Turbo を使いたい！
Turbo を使うと画面遷移が高速になり、ユーザビリティが向上します！
が、まだ Turbo に対応しているものは少ないようです。
今回、AdminLTE (3.1.0) を使っている時に動かない部分があったので、その対処方法を書き留めます。
Turbo で AdminLTE の困りごと
Turbo で何が困るのかというと、画面遷移時に JavaScript が読み込まれない事です。
色々読み込まないから高速！なのですが、JavaScript が読み込み時に処理が走る前提のものもあるので、それらについては対処が必要です。
そして、AdminLTE にも JavaScript 読み込み時に実行する処理がいくつかあります。
まずは、Layout Plugin でサイドバーやログインフォームの高さを修正する処理です
(このせいで、サイドバーがスクロールできなくなりました)。
他には、Push Menu Plugin (サイドバーを最小化できるやつ) で data-enable-remember="true" とした場合、記憶したサイドバーの状態を復元する処理もあります
(他にもありそうだが、対処方法は一緒なはず)。
対処方法
対処としては、"turbo:load" イベントで、必要な処理を呼び出します。
application.js
const apply_at_turbo_load = () => {
$("body").Layout("fixLayoutHeight");
$("body").Layout("fixLoginRegisterHeight");
$('[data-widget="pushmenu"]').PushMenu();
};
document.addEventListener("turbo:load", apply_at_turbo_load);
ついでに
Turbo では、訪問したページをキャッシュしておき、同じページを開くとき、読み込む前にキャッシュを表示する preview 機能があります。
が、そのせいで、前に表示されたフラッシュメッセージや、閉じたはずのサイドバーが一瞬見えてしまいます。
以下を記載して preview しないようにした方が良いかも。
application.html
<meta name="turbo-cache-control" content="no-preview">