feat: sync platform tags and dropdown options

Kotlin · Aug 21, 2024 · 92ac543 · 92ac543
1 parent d4793c2
commit 92ac543
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 49 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl
@@ -6,22 +6,20 @@
                 aria-expanded="false"
         ></button>
         <ul role="listbox" id="id-of-listbox" class="dropdown--list">
-            <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
-                onkeyup="onToggleOptionByKey(event)" tabindex="0">
+            <li role="option" class="dropdown--option" tabindex="0">
                 <label class="checkbox">
                     <input type="checkbox" checked class="checkbox--input" id="1"/>
                     <span class="checkbox--icon"></span>
                     First
                 </label>
             </li>
-            <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
-                onkeyup="onToggleOptionByKey(event)" tabindex="0">
+            <li role="option" class="dropdown--option" tabindex="0">
                 <label class="checkbox">
-                    <input type="checkbox" disabled class="checkbox--input" id="2"/>
+                    <input type="checkbox" class="checkbox--input" id="2"/>
                     <span class="checkbox--icon"></span>
                     Second
                 </label>
             </li>
         </ul>
     </div>
-</#macro>
+</#macro>
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts
@@ -18,7 +18,7 @@ function initDropdowns(): void {
   );
 }
 
-function onToggleDropdown(event: Event, dropdown: Element): void {
+function onToggleDropdown(_: Event, dropdown: Element): void {
   const buttons = dropdown.querySelectorAll(DROPDOWN_TOGGLE);
   buttons?.forEach(toggleDropdownButton);
   const list = dropdown.querySelector(DROPDOWN_LIST);
@@ -35,38 +35,18 @@ function toggleDropdownList(list: Element | null): void {
   list?.classList.toggle('dropdown--list_expanded');
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  initDropdowns();
-
-  document.addEventListener('click', (event) => {
-    const target = event.target as HTMLElement;
-    if (!hasAncestorWithClass(target, 'dropdown') || target.id === 'filter-section-overlay') {
-      const dropdowns = document.querySelectorAll('.button_dropdown');
-      dropdowns.forEach((dropdown) => {
-        dropdown.classList.remove('button_dropdown_active');
-        dropdown.parentNode?.querySelector('.dropdown--list')?.classList.remove('dropdown--list_expanded');
-      });
-    }
-  });
-});
-
-function onToggleOption(event: PointerEvent): void {
-  const target = event.target as HTMLButtonElement;
-  target.classList.toggle('dropdown--option_active');
-  target.querySelector('.checkbox--input')?.toggleAttribute('checked');
-}
-
-function onToggleOptionByKey(event: KeyboardEvent): void {
-  const target = event.target as HTMLButtonElement;
-  if (event.key === 'Enter' || event.key === ' ') {
-    target.classList.toggle('dropdown--option_active');
-    target.querySelector('.checkbox--input')?.toggleAttribute('checked');
+function handleOutsideClick(event: MouseEvent): void {
+  const target = event.target as HTMLElement;
+  if (!hasAncestorWithClass(target, 'dropdown') || target.id === 'filter-section-overlay') {
+    const dropdowns = document.querySelectorAll('.button_dropdown');
+    dropdowns.forEach((dropdown) => {
+      dropdown.classList.remove('button_dropdown_active');
+      dropdown.parentNode?.querySelector('.dropdown--list')?.classList.remove('dropdown--list_expanded');
+    });
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as any).onToggleOption = onToggleOption;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as any).onToggleOptionByKey = onToggleOptionByKey;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as any).initDropdowns = initDropdowns;
+document.addEventListener('DOMContentLoaded', () => {
+  initDropdowns();
+  document.addEventListener('click', handleOutsideClick);
+});
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss
@@ -38,6 +38,8 @@
       height: 100vh;
       max-height: unset;
 
+      padding: 0;
+
       border: none;
     }
 
@@ -87,5 +89,9 @@
         background-color: lighten(rgb(48, 127, 255), 10%); // color-key-blue
       }
     }
+
+    & .checkbox {
+      pointer-events: none;
+    }
   }
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts
@@ -107,9 +107,46 @@ function initFilterSection(): void {
     resizeObserver.observe(navigation);
   };
 
+  function addOptionEventListener(): void {
+    options.forEach((option) => {
+      option.addEventListener('click', (event) => {
+        toggleFilterForOption(event.target as Element);
+      });
+      option.addEventListener('keydown', (event) => {
+        const key = (event as KeyboardEvent).key;
+        if (key === 'Enter' || key === ' ') {
+          toggleFilterForOption(event.target as Element);
+        }
+      });
+    });
+  }
+
   displayFilterSectionItems();
   initResizeObserver();
+  addOptionEventListener();
   window.addEventListener('resize', initResizeObserver);
 }
 
 document.addEventListener('DOMContentLoaded', initFilterSection);
+
+declare global {
+  const filteringContext: {
+    activeFilters: (string | null | undefined)[];
+  };
+
+  function refreshFiltering(): void;
+}
+
+/**
+ * This syncs platform tags and dropdown options filtering behavior.
+ */
+function toggleFilterForOption(option: Element): void {
+  const dataFilter = option.querySelector('.checkbox--input')?.getAttribute('data-filter');
+  const index = filteringContext.activeFilters.findIndex((item) => item === dataFilter);
+  if (index === -1) {
+    filteringContext.activeFilters.push(dataFilter);
+  } else {
+    filteringContext.activeFilters.splice(index, 1);
+  }
+  refreshFiltering();
+}
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/scripts/platform-content-handler.js b/dokka-subprojects/plugin-base/src/main/resources/dokka/scripts/platform-content-handler.js
@@ -369,4 +369,8 @@ function refreshFilterButtons() {
                 f.removeAttribute("data-active")
             }
         })
+    document.querySelectorAll("#filter-section .checkbox--input")
+        .forEach(f => {
+            f.checked = filteringContext.activeFilters.indexOf(f.getAttribute("data-filter")) !== -1;
+        })
 }
diff --git a/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl b/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl
@@ -20,8 +20,7 @@
                         </button>
                     </div>
                     <#list sourceSets as ss>
-                        <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
-                            onkeyup="onToggleOptionByKey(event)" tabindex="0">
+                        <li role="option" class="dropdown--option" tabindex="0">
                             <label class="checkbox">
                                 <input type="checkbox" class="checkbox--input" id="${ss.filter}"
                                        data-filter="${ss.filter}"/>

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -279,18 +279,13 @@
 .checkbox {
   position: relative;
   display: inline-block;
-  width: 18px;
-  height: 18px;
   cursor: pointer;
 }
 
-.checkbox:checked {
-  background-image: url(assets/checkbox-on.svg);
-}
-
 .checkbox--input {
   position: absolute;
   appearance: none;
+  visibility: hidden;
 }
 
 .checkbox--icon {
@@ -300,6 +295,18 @@
   margin-left: calc(-1 * var(--size-m2));
   background-image: url(assets/checkbox-off.svg);
 }
+
+.checkbox--input:checked + .checkbox--icon {
+  background-image: url(assets/checkbox-on.svg);
+}
+
+.checkbox--input:disabled + .checkbox--icon {
+  opacity: 0.2;
+}
+
+.checkbox--input:focus-visible {
+  outline: 4px solid var(--color-key-blue-05);
+}
 /*!
  * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */ /*!
@@ -464,6 +471,10 @@
 .dropdown--option_active:hover {
   background-color: #639fff;
 }
+
+.dropdown--option .checkbox {
+  pointer-events: none;
+}
 /*!
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */ /*!