https://www.agrihub-app.com/assets/controllers/turbo-dialog_contro…ef4fe6ce2a3b2e7e0224406333168ab3d04ebd1d.js

1/**
2 * Turboを使用したダイアログ表示のためのStimulusコントローラー
3 *
4 * 使い方:
5 * 1. ダイアログを表示したい要素に turbo_frame_tag を使用し、以下の属性を設定:
6 *    = turbo_frame_tag 'dialog-id', class: 'full-dialog',
7 *      data: { controller: 'turbo-dialog',
8 *              action: 'turbo:frame-render->turbo-dialog#open' }
9 *
10 * 2. リンクやボタンからダイアログを開く場合:
11 *    = link_to path, data: { turbo: true, turbo_frame: 'dialog-id' }
12 *
13 * 3. 呼び出される側のViewファイルの構造:
14 *    = turbo_frame_tag 'dialog-id' do
15 *      .dialog-add-target
16 *        .full-dialog-body
17 *          = render 'shared/header'
18 *          （ダイアログの内容）
19 *
20 * 注意:
21 * - ダイアログのIDは一意である必要があります
22 * - full-dialog と dialog-add-target と full-dialog-body クラスは必須です
23 * - shared/header の読み込みは必須です（閉じるボタンなどのダイアログ制御に必要）
24 */
25import { Controller } from "@hotwired/stimulus"
26
27export default class extends Controller {
28  connect() {
29    document.getElementById('loading-splash').style.display = 'none';
30  }
31
32  open(event) {
33    if (event.target !== event.currentTarget) return;
34
35    $('#loading-splash').hide();
36    if (!dialog.isTargetOpened(`#${this.element.id}`)) {
37      dialog.open(`#${this.element.id}`)
38    }
39  }
40};