フッターを対象とするJavaScriptがページ遷移後に機能しない

開発
1

フッターメニューをレスポンシブにするための CSS を作成しました。モバイルデバイスに遷移すると、フッターメニューはハンバーガーメニューと同様に設計されます。そのため、Edit Css/Html >> /head セクションにクリック関数を記述し、モバイルビューでのメニューの切り替えを実装しました。

ScriptIssue
ScriptIssue820×283 5.72 KB

このクリック関数は Discourse のホームページでは正常に動作しましたが、Summary や Forum Account などの他のページではスクリプトがブロックされました。そのため、サブメニューが表示されません。ブラウザのソースコードを確認しても、スクリプトは存在していることが確認できます。

なぜ Discourse の一部のページでカスタムスクリプトの実行がブロックされるのでしょうか？この問題に対する恒久的な解決策は何ですか？

2

Discourse はシングルページアプリケーションです。そのため、<head> タグに追加したスクリプトは、適切なフックを使用しない限り、初期ページ読み込み時に一度だけ実行されます。イベントリスナーを追加するようにコードを調整する必要があるかもしれません。

コードを共有していただけますか？

「いいね！」 3
3

こちらが私のスクリプトです。

ScriptTagHead
ScriptTagHead1117×450 20.8 KB

4

これに対処する方法はいくつか考えられますが、まずは適切なカスタマイズフックを使用した「正しい」方法で試してみましょう。

テーマのフッターセクションに HTML を追加すると、Discourse はページ遷移時や無限スクロールでより多くの要素が追加された際に、要素が飛び跳ねないように処理を行います。

これは custom-html コンポーネントとしてここに追加されます。

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

コンポーネントのコードを見ると、レンダリング時にアプリイベントを発火させることがわかります。

discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

これが使用すべきフックです。

どのように使用すればよいでしょうか？
plugin-api には、特定のアプリイベントが発火したときにコードを実行できるメソッドがあります。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519

イベント名は既知なので、以下のように使用できます。

api.onAppEvent("inserted-custom-html:footer", () => {
  // ここで作業を行います
});

これは plugin-API のメソッドであるため、スクリプトタグの type を text/discourse-plugin に変更する必要があります。

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  // ここで作業を行います
});
</script>

上記のスニペットは、フッターがレンダリングされるたびに発火します。したがって、以下のような処理が可能になります。

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  $(".footer-div #footerNavDiv").click(function () {
    console.log("クリックイベントをキャッチしました");
    // クリックイベントに対する処理をここで実施
  });
});
</script>

plugin-API については、こちら で詳しく読むことができます。

「いいね！」 5
5

素晴らしい、ありがとう :slight_smile:

「いいね！」 1