コンポーネントの新しいJSタブにスクリプトを正しく移動する方法

[管理者通知] テーマ「_Base」には、更新が必要なコードが含まれています。(ID:discourse.script-tag-discourse-plugin) (詳細はこちら)

私のフォーラムの1つでは、JSスクリプトを新しいJSカスタマイズタブに移動するだけで、このメッセージを削除しました。

もう一方のフォーラムでは、それほど簡単にはいきません。

これは、タグを受け入れるカテゴリでのみコンポーザーのタグフィールドを表示する、古いオーバーライドです。

<script type="text/discourse-plugin" version="1.4.0">    
    // show tag chooser in the composer only when necessary
    const discourseComputed = require("discourse-common/utils/decorators").default;
    const EmberObject = require("@ember/object").default;
    function toggleTagChooser(display = "hide") {
        if (display == "show") {
            document.getElementsByClassName("mini-tag-chooser")[0].style.display = "block";
            document.getElementsByClassName("reply-area")[0].classList.add("with-tags");
            return;
        }
        // Verify the existence of the tag choser
        let tagChoser = document.getElementsByClassName("mini-tag-chooser");
        if(tagChoser.length > 0) {
            tagChoser[0].style.display = "none";
            document.getElementsByClassName("reply-area")[0].classList.remove("with-tags");
        }
        return;
    }
    api.modifyClass('controller:composer', {
        pluginId: "toggleTagChoser",
        @discourseComputed("model.category", "model.tags", "lastValidatedAt")
        tagValidation(category, tags, lastValidatedAt) {
            // custom code to toggle the tag choser
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // end of the custom code
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorporates both minimum_required_tags, and required_tag_groups
                if (category.minimumRequiredTags > tagsArray.length) {
                    return EmberObject.create({
                        failed: true,
                        reason: I18n.t("composer.error.tags_missing", {
                            count: category.minimumRequiredTags,
                        }),
                        lastShownAt: lastValidatedAt,
                    });
                }
            }
        }
    });
</script>

このスクリプトは、metaで投稿された類似の(そして古い、2019年以前の)変更に基づいていましたが、元の投稿は見つけられません。

とにかく、質問は2つあります。

  1. これをJSタブに正しく移動するにはどうすればよいですか?可能ですか、それともテーマコンポーネントを作成する必要がありますか?

  2. 特定のカテゴリでのみコンポーザーのタグセレクターを非表示/表示する、よりエレガントな方法はありますか?私のフォーラムでは、タグは1つのカテゴリ(#search#offerタグ付きの広告カテゴリ)にのみ使用しています。

「いいね!」 1

ボディのカテゴリクラスに基づいてタグフィールドを表示/非表示するためにCSSを使用できますが、それがよりエレガントかどうかは議論の余地があります:slight_smile:

「いいね!」 1

スタッフにとっては解決しませんが(https://meta.discourse.org/t/make-category-tag-rules-restrictions-apply-to-moderators-too/240496)、タグをそのカテゴリに制限すると、他のカテゴリでは(スタッフ以外は)使用できなくなります。カテゴリの`/edit/tags`から:

上記で指定されたタグとタググループは、このカテゴリおよびそれらを指定する他のカテゴリでのみ利用可能になります。他のカテゴリでの使用はできません。

「いいね!」 1

しばらくぶりに動作を確認しました。

  • トピック作成時に、選択したカテゴリに関係なく(管理ユーザー以外に利用可能なタグがないカテゴリであっても)、コンポーザーにタグ入力が表示されます。これは避けたいことです。
  • CSSのみでは機能しません。コンポーザーはどのページでも開くことができ、目的のカテゴリを対象とする親CSSがないため、コンポーザーのタグ入力を非表示にすることができません。そのため、JavaScriptを使用したのだと思います。

そのため、何か見落としていることがない限り、目標を達成するにはスクリプトが必要だと考えています。

これに関する元の#featureトピックはここにありました。

この機能が実装されるほどの関心が集まらなかったのでしょう。また、samによると#pr-welcomeは望ましくなかったようです。

そのため、カスタムJavaScriptソリューションに頼ることになります(修正する必要がありますね :smiling_face_with_tear:)。

「いいね!」 1

コピー&ペーストするだけで可能です。JSタブ内のものは、 ` と全く同じように実行されます。動作しない場合は、コードを共有していただけますか?

クレイジーなモダンCSSを使えば可能です:

.d-editor-container:has(.category-input .select-kit-header[data-name="Support"]) .tags-input {
    display: none !important;
}

^^これはMetaの「Support」カテゴリのタグ入力を非表示にします。

[data-name="Support"]:not(data-name="Support") に置き換えることで、ロジックを反転させることができます。

「いいね!」 4

Holy moly! どうやら私の2012年のCSSスキルはもう通用しないようです。なんだか変な感じですが、2012年は文字通り昨日だったと確信していたのに!


以下のようにしました。

.d-editor-container:not(:has(.category-input .select-kit-header\[data-name=“Trading Post”\])) .tags-input {
    display: none;
}

これにより、Trading Post以外のすべてのカテゴリで非表示になります。

皆さん、ありがとうございます!

「いいね!」 5