Tabbisテーマコンポーネント

開発
1

こんにちは！投稿でタブを作成するために外部スクリプト [tabbis.js](https://www.opensourceagenda.com/projects/tabbisjs) を使用するテーマコンポーネントを作成しようとしています。こちらのチュートリアルに従いました: Embed widget within text in a topic - #2 by Johani

これが私のテーマコンポーネントの現状です。

Common > Header

<script type="text/discourse-plugin" version="0.8">
// options
const TABBIS_SCRIPT_SRC = "https://cdn.jsdelivr.net/gh/jenstornell/tabbis.js/assets/js/src/tabbis.es6.js";

// we use the Discourse Load script lib to ensure scripts are loaded
// properly. Don't worry, this is smart enough to not duplicate the script
// if it's already loaded
const loadScript = require("discourse/lib/load-script").default;

// create a post decorator
api.decorateCookedElement(
  post => {
    // does this post have tabbis tabs?
    const tabbisTabs = post.querySelectorAll('[data-wrap="tabbis"]');

    // Yes, so let's do some work.
    if (tabbisTabs.length) {
      // for each tabbis widget
      tabbisTabs.forEach(tabbisTab => {

        // load the tabbis script.
        loadScript(TABBIS_SCRIPT_SRC).then(() => {

          // everything is ready, let's call the tabbis script
          tabbis();
        });
      });
    }
  },
  // add an id to the decorator to avoid memory leaks
  { id: "render-tabbis-tabs" }
);

</script>

Common > CSS (copied straight from the tabbis.js repo)

[data-tabs],
[data-panes] {
  --color: #000; }

[data-tabs] {
  background: var(--color);
  border: 2px solid var(--color);
  border-bottom: none;
  overflow-x: auto;
  display: flex; }
  [data-tabs] > [role="tab"] {
    all: unset;
    padding: .75rem 1.5rem;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    outline: none; }
    [data-tabs] > [role="tab"]:hover {
      background: rgba(255, 255, 255, 0.2); }
    [data-tabs] > [role="tab"]:active {
      background: rgba(255, 255, 255, 0.3); }
    [data-tabs] > [role="tab"]:focus {
      border: 1px dotted rgba(255, 255, 255, 0.5); }
    [data-tabs] > [role="tab"][aria-selected="true"] {
      background: #fff;
      color: #000; }
      [data-tabs] > [role="tab"][aria-selected="true"]:focus {
        border: 1px dotted rgba(0, 0, 0, 0.5); }

[data-panes] {
  border: 2px solid var(--color);
  border-top: none; }
  [data-panes] > * {
    background: #fff;
    padding: 2rem;
    font-weight: 600;
    outline: none;
    border: 1px solid transparent; }
    [data-panes] > *:focus {
      border: 1px dotted rgba(0, 0, 0, 0.5); }
    @media screen and (max-width: 460px) {
      [data-panes] > * {
        padding: 1rem; } }

Content Security Policy Script src: https://cdn.jsdelivr.net を追加しました

Post markup

[wrap="tabbis"]<div>data-tabs">
<button>Tab1</button>
<button>Tab2</button>
<button>Tab3</button>
</div>

<div>panes">
<div>Pane1</div>
<div>Pane2</div>
<div>Pane3</div>
</div>[/wrap]

スクリプトは投稿を編集すると一瞬読み込まれるように見えますが、完全に読み込まれると使用できなくなります。

コンソールに表示されますが、修正方法がわかりません。Discourse の他のタブとの競合があるのでしょうか？

tabbis uncaught type error
tabbis uncaught type error345×286 14.4 KB

これを機能させるにはどうすればよいですか？お手上げです！

「いいね！」 1
2

それにはプラグインが必要だと思いますが、間違っている可能性もあります。

mathプラグインやプラグインガイドを確認してみてください。

3

このスクリプトはなぜテーマコンポーネントではなくプラグインを必要とするのですか？シングルページアプリケーションの構造はまだ私にとって非常に新しいです。

4

テーマコンポーネントのソースコード全体（できればGitHubリポジトリとして）を共有していただければ、簡単にサポートできます。

ところで、これはかなり便利なテーマコンポーネントのようですね！

「いいね！」 6
5

ありがとうございます！このコミュニティにすでにタブプラグインやコンポーネントがないことに驚きました。コミュニティでぜひ使いたいと思っていたので、自分で試してみることにしました。基本的なJavaScript以外はほとんど初心者ですが、学ぼうとしています。

「いいね！」 2
6

変更後の投稿マークアップは次のようになります。

[wrap="tabbis"]
  <div>
    <span>タブ1</span>
    <span>タブ2</span>
    <span>タブ3</span>
  </div>

  <div>
    <div>ペイン1</div>
    <div>ペイン2</div>
    <div>ペイン3</div>
  </div>
[/wrap]

これで動作します :tada:

さらに改善するために、いくつか注意点があります。

  1. loadScript を複数回呼び出さないでください。呼び出す前に既にロードされているか確認してください。そうしないと、複数回呼び出されることになります。

  2. tabbis() の呼び出しに、より具体的なセレクターを渡してください。これにより、 specifically 選択したものを初期化できます。

「いいね！」 6