import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
 static targets = ['button', 'popup', 'backdrop'];
 toggle(event) {
 event.preventDefault();
 if (this.buttonTarget.getAttribute('aria-expanded') == 'false') {
 this.show();
 } else {
 this.hide(null);
 }
 }
 show() {
 this.buttonTarget.setAttribute('aria-expanded', 'true');
 this.popupTarget.classList.remove('hidden');
 }
 hide(event) {
 if (event) {
 const target = event.target;
 const clickedInsidePopup = this.popupTarget.contains(target);
 const clickedInsideButton = this.buttonTarget.contains(target);
 const clickedBackdrop = this.hasBackdropTarget && this.backdropTarget.contains(target);
 const clickedFormOrInput =
 target.tagName === 'FORM' || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
 // popup 또는 button 안을 클릭했는데 backdrop이 아니라면 -> 아무것도 안 함
 if ((clickedInsidePopup || clickedInsideButton) && !clickedBackdrop) {
 return;
 } else if (clickedFormOrInput) {
 return;
 }
 }
 this.buttonTarget.setAttribute('aria-expanded', 'false');
 this.popupTarget.classList.add('hidden');
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/speech" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://coops.or.kr/assets/controllers/dropdown_controller-b5a72e90.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://coops.or.kr/assets/controllers/dropdown_controller-b5a72e90.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech" selected="selected">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>