|||
|-|-|-|
| 
| 概要 | 作成画面にボタンを追加し、ドラッグ可能なインタラクティブな画像比較スライダーを作成できるようにします。
| 
|リポジトリ| GitHub - josephclaytonhansen/discourse-image-comparison-slider |
| 
|インストールガイド|テーマまたはテーマコンポーネントのインストール方法|
| 
|Discourseテーマ初心者の方へ| Discourseテーマの使用方法に関する初心者ガイド|
このテーマコンポーネントをインストール
このコンポーネントは、作成画面にボタンを追加し、ドラッグ可能な画像比較スライダーを作成できるようにします。スライダーの方向やボタンアイコンなどの設定は、管理者設定からカスタマイズできます。
Discourse開発は初めてなので、もし間違いがあればお詫び申し上げます。
WIPとは何ですか？（今は20文字ですか？）
WIPは作業進行中を意味します。
素晴らしいですね！この貢献に感謝します 
どのようなアップデートを考えていますか？
主な目的は、コードを整理し、Discourse に沿ったものにすることです。現在、テーマコンポーネントの作成方法を積極的に学習していたため、少しずさんになっています 
また、コンポーザーからスライダーの方向を変更する方法を追加する予定です。現在は管理設定で設定された方向になっていますが、ユーザーが制御できるようにしたいと考えています。（編集：これは追加されました！）
スライダーのハンドル/区切り線のスタイルをさらに制御したいのですが、残念ながらそれはあまり可能ではありません。スライダーを処理する JavaScript は、CSS 変更の前にスライダーを構築し、CSS 変更時にスライダーを再構築しません。
素晴らしいですね！ 
貢献に感謝します 
ユーザーが縦向きまたは横向きのスライダーを選択できるように、data-direction-horizontal または data-direction-vertical 属性を追加しました。ユーザーが方向を指定しない場合は、管理設定で選択されたデフォルト設定が使用されます。
素晴らしいです。よくできました。
原因を特定するのは難しいです。こちらでは再現できません 
これらのエラーのうち、tooltipContainerやResizeObserverループを使用していないため、このコンポーネントからのものである可能性があるのは最初のものだけですが、これも確信はありません。
最新バージョンにアップデートしましたか？昨日、これを修正する可能性のある変更を加えました。
ジョセフさん、ありがとうございます。最新バージョンを使用しています。奇妙なことに、このメッセージを再度表示させることができず、問題も見当たらないため、一時的なものだったのかもしれません。
それともう一つ、アイコンが変更されません。もちろん、svgアイコンサブセットに追加しました。サイトで既に機能している別のアイコンも試しましたが、稲妻マークから変わりません。「arrows-alt-h」に変更しようとしています。
私のミスです。それを修正する変更をコミットしました。見つけてくれてありがとうございます！
素晴らしい、いくつか問題があります。
フォーラムを en_GB ロケールに変更したところ、マウスオーバーするとコンポーネント設定の代替/フレーバーテキストの代わりに以下が表示されます。
プラグインがすべてのカーソルマウスダウンイベントを奪い、ページ上のテキストのコピー/貼り付け/引用などを選択できなくしているようです。これは meta.discourse では問題ありません…設定/テーマ（主に Sam のシンプルなテーマにギャラリーや GIF などのコンポーネントを追加したもの）に関する詳細を提供できます。それは消えました…テクノロジーは素晴らしいです。
機能を使用するための説明投稿を作成しましたが、何も表示されないという人もいました。（人々からの実際のバグレポートがないため、あまり役立つフィードバックではありません）。
うーん…これは奇妙ですね。Firefoxでテストしたときは問題ありませんでした。再現できるか試してみます。ランダムなバグは大好きです🫠 使用しているライブラリは、Firefoxのリポジトリで問題なく動作しており、オープンでもクローズでもないので、バグ修正はさらに難しくなります。
ロケールについてですが、ロケールファイルの提供プロセスがどうなっているのかよくわかりません。私は英語（英国）を話すのでen.GBを追加できますが、私の専門知識はそれくらいです。他のテーマコンポーネントの著者は、ロケールファイルの翻訳がどのように機能するべきか知っていますか？Google翻訳でテキストを処理すべきでしょうか？
Yoursと正常に動作するコンポーネント（giphy）との唯一の違いはインデントだと思います…
おそらく、すべてのymlの良さが同じインデントレベルにあることが原因で、パーサーが…
基本的に…私はハックで、何をしているのか全く分かりません。
お気持ちお察しします 確認してみます。VS StudioのYMLパーサーを使っているのですが、標準に100%準拠していない可能性があります。Notepadで昔ながらの手動インデントを試してみます。
@Frully Firefoxの問題を修正しました。これにより、すべてのブラウザで動作するはずです（Chrome、Firefox、Safari、およびモバイルバージョンで問題なくテストしました）。これを更新すると、Firefoxユーザーにも対応します。
こんにちは
このテーマコンポーネントはとても素晴らしいですね。ありがとうございます。インストールしました
ボタンのテキストとプレースホルダーテキストに関する問題です。
また、以下のテーマコンポーネントも使用しています。
インストール後、以下のようになっています。
奇妙ですよね？
ステファン
その問題については考えていませんでした。指摘してくれてありがとう @Stephane_Roy！
問題は、両方のテーマコンポーネントが同じ翻訳変数を使用していることです。他のTCも同様の問題を抱えている可能性があります。修正方法は、以下の箇所で button_text と add_images_prompt の名前を更新/変更することです。Masonry Image Galleryも更新します。
translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;
api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“<0xC2><0xA0>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});
