投票をモーダルでできるようにする

ykominami commented 1 year ago

第10回勉強会での具体的な実装方法を知らない状態でコメントします。以下はRails 7でBootstrapのmodalを用いてモーダルウィンドウを実現したというブログです。 Rails 7 Modal Forms with Hotwire and Bootstrap - Tutorial turbo-frameに含まれるdiv要素に、stimulusのコントローラを設定します。またturob-before-renderイベントを指定して、対応するactionとして、コントローラ内のhideBeforeRenderメソッドを呼び出すようにしています。コントローラ内ではconnect()で、上記div要素指定して、BootstrapのModalのインスタンスを生成し、それのShowメソッドを呼び出します。 hideBeforeRender()では、モーダルウィンドをオープンしていれば、eventのデフォルト動作をキャンセルし、上記div要素にイベントリスナーを追加し、hide()を呼び出します。

ただ、この処理内容でissueの「投票をモーダルでできるようにする」が実現できるかは不明ですし、私自身stimulusを使うのが初めてで、このブログの内容を再現できませんでした。そのため参考として扱ってください。

ykominami commented 1 year ago

追記：私がコメントで触れた内容は、第10回勉強会議事録にある「懇親会で出た参考記事」のURLの内容とだいたい同じ内容に思えます。

ykominami commented 1 year ago

別の方法雄も紹介します。こちらを試したときはブログの再現をすることができました。

こちらは、BootstrapではなくTailWindを用います。そのため以下のライブラリを使用します。 https://github.com/excid3/tailwindcss-stimulus-components

こちらもstimulusを使いますが、コントローラ内でバックグラウンドとしてウィンドウを全体を覆うdiv要素内で作成して、bodyに追加し、コントローラのtargetをそのウィンドウの上に出し、targetのclassに”hidden"クラスを指定・削除することで、非表示・表示をさせます。

さらにこのブログでは、カスタムTurbo Stream Actionを作成して、サーバ側からダイアログのクローズを指定しています。具体的にはクライアント側でイベントを発生させるカスタムTurbo Stream Actionを記述すると、クライアントのwindowsに対してイベントをdispatchさせ、そのイベントを受け取って、stimulusのコントローラのclose()メソッドが呼び出されます

<turbo-stream action="prepend" target="card-list">
 (略)
</turbo-stream>
<turbo-stream name="modalClose" action="dispatch_event">
  <template></template>
</turbo-stream>

Building a modal form with Turbo Stream GET requests and custom stream actions · Colby.so

ykominami commented 1 year ago

まだ試してもいないので紹介のみですが、独自のカスタムTurbo Stram Actionを提供するTurboPowerというGithubリポジトリがあります。

marcoroth/turbo_power: Power-pack for Turbo Streams

railsから利用するためのgemです

marcoroth/turbo_power-rails: Power-pack for Turbo Streams

ykominami commented 1 year ago

これも紹介のみですが、ViewComponentを用いた実装というのもあります。ただ私はViewComponet自体も経験していないので、本当に紹介のみです。

How to create modals with form handling through a Turbo frame | how to ruby

ykominami commented 1 year ago

Stimulusのコントローラの話が続いたので、「Outlets API」の解説を含むQiitaの記事を紹介します

Outlets APIはコントローラAがコントローラBのメソッドを直接呼び出せるというものです従来は、イベントを介して他のコントローラにメソッドを呼び出させるというやりかたでした。