wip: working episode-container

assets/bootstrap.js

@@ -3,7 +3,7 @@ import Popover from '@stimulus-components/popover';
 import Dialog from '@stimulus-components/dialog';
 import Dropdown from '@stimulus-components/dropdown';
 import 'animate.css';
-import Brock from './components/brock.js';
+import EpisodeContainer from './components/episode-container.js';
 
 const app = startStimulusApp();
 // register any custom, 3rd party controllers here
@@ -11,4 +11,4 @@ app.register('popover', Popover);
 app.register('dialog', Dialog);
 app.register('dropdown', Dropdown);
 
-customElements.define('brock-app', Brock);
+customElements.define('episode-container', EpisodeContainer);

assets/components/brock.js

@@ -1,25 +0,0 @@
-export default class Brock extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.render();
-    }
-
-    render() {
-        this.innerHTML = `
-            Yo, yo, yo! Waddup ${this.name}, doe, it's Brocky fresh!
-        `;
-    }
-
-    // attribute change
-    attributeChangedCallback(property, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        this[ property ] = newValue;
-        this.render();
-    }
-
-    static get observedAttributes() {
-        return ['name'];
-    }
-}

assets/components/episode-container.js

@@ -0,0 +1,34 @@
+export default class EpisodeContainer extends HTMLElement {
+    #resultsToggleBtnEl;
+    #resultsTableEl;
+    #resultsCountBadgeEl;
+
+    constructor() {
+        super();
+        this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
+        this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
+        this.#resultsTableEl = this.querySelector('.results-container');
+
+        this.#resultsToggleBtnEl.addEventListener('click', () => this.toggleResults());
+        this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());
+    }
+    connectedCallback() {
+
+    }
+
+    // attribute change
+    attributeChangedCallback(property, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        this[ property ] = newValue;
+    }
+
+    static get observedAttributes() {
+        return ['name'];
+    }
+
+    toggleResults() {
+        this.#resultsToggleBtnEl.classList.toggle('rotate-90');
+        this.#resultsToggleBtnEl.classList.toggle('-rotate-90');
+        this.#resultsTableEl.classList.toggle('hidden');
+    }
+}

assets/controllers/tv_episode_list_controller.js

@@ -16,8 +16,10 @@ export default class extends Controller {
         });
         if (window.location.hash) {
             let targetElement = document.querySelector(window.location.hash);
-            targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            targetElement.classList.add('animate__animated', 'animate__pulse', 'animate__faster');
+            if (targetElement) {
+                targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                targetElement.classList.add('animate__animated', 'animate__pulse', 'animate__faster');
+            }
         }
     }
 

assets/controllers/tv_results_controller.js

@@ -71,13 +71,6 @@ export default class extends Controller {
         }
     }
 
-    toggleList() {
-        this.listTarget.classList.toggle('options-table');
-        this.listTarget.classList.toggle('hidden');
-        this.toggleButtonTarget.classList.toggle('rotate-90');
-        this.toggleButtonTarget.classList.toggle('-rotate-90');
-    }
-
     download() {
         this.options.forEach(option => {
             const optionSelector = option.querySelector('input[type="checkbox"]');

assets/styles/app.css

@@ -130,3 +130,21 @@ dialog[data-dialog-target="dialog"][closing] {
     background: unset;
     @apply bg-orange-500/80 text-black font-bold rounded-md
 }
+
+.progress {
+    display: grid;
+    grid-template: 1fr / 1fr;
+    place-items: center;
+}
+.progress > * {
+    grid-column: 1 / 1;
+    grid-row: 1 / 1;
+}
+.progress .background {
+    z-index: 1;
+    place-self: start;
+}
+.progress .number {
+    z-index: 2;
+    background: transparent;
+}