Tabs to Stimulus

webgis/js/controllers/tabs_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['active', 'tab', 'content'];
+
+    activate(event) {
+        this.deactivate();
+        const activeId = event.currentTarget.id;
+
+        event.currentTarget.classList.add('is-active');
+        this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
+            .classList.remove('is-hidden');
+    }
+
+    reset() {
+        this.deactivate();
+        const activeId = this.activeTarget.id;
+
+        this.activeTarget.classList.add('is-active');
+        this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
+            .classList.remove('is-hidden');
+    }
+
+    deactivate() {
+        this.tabTargets.forEach(tab => {
+            tab.classList.remove('is-active');
+        });
+
+        this.contentTargets.forEach(content => {
+            content.classList.add('is-hidden');
+        });
+    }
+}
+