サイドバーのユーザーフィールド切り替え

テーマコンポーネント
1

|||
|-|-|-|
| :information_source: | 概要 | サイドバーにトグルを追加する
| :hammer_and_wrench:|リポジトリ| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| :question:|インストールガイド|テーマまたはテーマコンポーネントのインストール方法|
| :open_book:|Discourseテーマ初心者の方へ| Discourseテーマの使用方法に関する初心者向けガイド|

<!- 自動インストールボタンの「repoName」と「repoURL」を入力してください →

このテーマコンポーネントをインストール

<!- このテーマ/コンポーネントを1〜2文で説明してください →

このテーマコンポーネントの開発をサポートしてくれたDiscourse Metaの@Kinetiksoftに感謝します。@Kinetiksoftなしでは、このテーマコンポーネントは存在しなかったでしょう。

このテーマコンポーネントを使用すると、サイドバーに一連のボタンを追加してユーザーフィールドを調整できます。

<!- スクリーンショット（該当する場合）を追加してください →
image

image
image1170×447 22.2 KB

image
image2139×738 51.9 KB

<!- 必要に応じて詳細を追加し、設定を説明してください →

開発者向けの追加手順

ボタンが押されたとき、および初めてロードされたときに、テーマコンポーネントはAppEventを送信します。

ボタンが押されたときにアクションを実行する必要がある場合は、api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });を使用します。

    // ボタンのトグルイベントを処理するには、`api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`を使用します
    // ボタンのトグルイベントを処理するには、`api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`を使用します
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });
「いいね！」 9
2

迅速かつ質の高いソリューションを提供してくれた @Lhc_fl さん、ありがとうございます。

私たちのユースケースは、マーケットプレイスのリクエストの説明に基づいています。
このアイデアは、Our solution for blurring NSFW content に触発されたもので、私たちはロジックを反転させ、コミュニティがメディアをぼかしたり元に戻したりするためのトグルが必要でした。

カスタムユーザーフィールドをチェックボックスとして追加し、以下の手順に従ってください。

サイドバーユーザーフィールドトグルと追加のカスタムコンポーネントを使用します。

  1. 管理ダッシュボードで新しいテーマコンポーネントを作成します。
    /admin/customize/ → Components → Install → Create new (component)
  2. CSSを追加します。
CSS 
/* #nswfトピックのすべてのメディアにnsfwぼかしとオーバーレイテキストを表示します */
.nsfw-hide {
	.topic-body .cooked img:not(.emoji):not(.avatar),
	.topic-body .cooked iframe,
	.topic-body .cooked .lazyYT-container,
	.topic-body .cooked .video-container,
	.topic-thumbnail img:not(.emoji) {
        filter: blur(10px);
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body:hover .cooked img:not(.emoji),
	.topic-body:hover .cooked iframe,
	.topic-body:hover .cooked .lazyYT-container,
	.topic-body:hover .cooked .video-container,
	.topic-thumbnail:hover img:not(.emoji) {
        filter: blur(0);
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body .cooked a.lightbox:before,
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    z-index:2;
        padding: 5px;
        font-size:1em;
        position:absolute;

        color:#fff;
        content: '👀 Hover to show';
        background: #e86800;
	}

	.topic-body .cooked a.lightbox:before,
	.topic-body .cooked iframe:before {
        top: 15px;
        left: 10px;
	}

	.topic-thumbnail a:before {
        top: 65px;
        left: 20px;
	}

	.topic-body .cooked a.lightbox:hover:before,
	.topic-body .cooked iframe:hover:before,
	.topic-thumbnail a:hover:before,
	.topic-body .cooked .video-container:hover:before {
	    display:none;
	}
}
  1. JS (Head) を追加します。
JSコード 
<script type="text/discourse-plugin" version="0.8.7">
const { userPath } = require("discourse/lib/url");
const { ajax } = require("discourse/lib/ajax");

const you = api.getCurrentUser();

if (you) {
  ajax(userPath(`${you.username_lower}.json`)).then((res) => {
    api
      ._lookupContainer("model:site")
      .appEvents.trigger("sidebar_user_fields_toggled", {
        user_fields: res.user.user_fields,
      });
  });
}
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2

api.onAppEvent("sidebar_user_fields_toggled", (status) => {
    if (window.jQuery) {
        window.jQuery(function ($) {
            if (status.user_fields[2] === "true") { // または他の値
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>
  1. トグルコンポーネントのボタンを希望どおりに設定します。ここではカスタムユーザーフィールドIDを参照として使用します。

追伸：同じコードをトグルコンポーネント自体に入力できるかもしれませんが、テストする手間が省け、正常に動作しているコードをなぜ変更する必要があるのか疑問に思いました。

:plus: @Lhc_fl のコンポーネントは、ドロップダウンナビゲーションタイプでも完全に機能します。

「いいね！」 7