import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
 static targets = ['sidebar', 'main', 'header', 'footer', 'overlay'];
 static classes = ['open'];
 handleToggling() {
 this.toggleSidebar();
 this.toggleAccessories();
 }
 toggleSidebar() {
 if (this.openedSidebar) {
 this.sidebarTarget.classList.remove('left-0');
 this.sidebarTarget.classList.add('-left-full');
 } else {
 this.sidebarTarget.classList.remove('-left-full');
 this.sidebarTarget.classList.add('left-0');
 }
 }
 toggleAccessories() {
 if (this.openedSidebar) {
 this.scrollOffset = window.scrollY - this.headerTarget.offsetHeight;
 this.mainTarget.classList.add(...this.openClasses);
 this.mainTarget.style.top = -1 * this.scrollOffset + 'px';
 this.footerTarget.classList.add(...this.openClasses);
 this.footerTarget.style.top = -1 * this.scrollOffset + this.mainTarget.offsetHeight + 'px';
 this.showOverlay();
 } else {
 this.mainTarget.classList.remove(...this.openClasses);
 this.mainTarget.style.removeProperty('top');
 this.footerTarget.classList.remove(...this.openClasses);
 this.footerTarget.style.removeProperty('top');
 this.removeOverlay();
 window.scrollTo(0, this.scrollOffset + this.headerTarget.offsetHeight);
 }
 }
 showOverlay() {
 if (this.hasOverlayTarget) {
 this.overlayTarget.classList.remove('invisible');
 this.overlayTarget.classList.add('opacity-100');
 }
 }
 removeOverlay() {
 if (this.hasOverlayTarget) {
 this.overlayTarget.classList.add('invisible');
 this.overlayTarget.classList.remove('opacity-100');
 }
 }
 get openedSidebar() {
 return this.sidebarTarget.classList.contains('left-0');
 }
}
</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/digitalsociety/sidebar_controller-93ce818f.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://coops.or.kr/assets/controllers/digitalsociety/sidebar_controller-93ce818f.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>