UI: JS for dropdown

components/ILIAS/UI/UI.php

@@ -41,7 +41,7 @@ public function init(
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/Counter/dist/counter.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
-            new Component\Resource\ComponentJS($this, "js/Dropdown/dropdown.js");
+            new Component\Resource\ComponentJS($this, "js/Dropdown/dist/dropdown.js");
 
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\NodeModule("dropzone/dist/min/dropzone.min.js");

components/ILIAS/UI/resources/js/Dropdown/rollup.config.js

@@ -0,0 +1,27 @@
+import terser from '@rollup/plugin-terser';
+import copyright from '../../../../../../scripts/Copyright-Checker/copyright';
+import preserveCopyright from '../../../../../../scripts/Copyright-Checker/preserveCopyright';
+
+export default {
+  external: [
+    'document',
+    'ilias',
+  ],
+  input: './src/dropdown.js',
+  output: {
+    file: './dist/dropdown.js',
+    format: 'iife',
+    banner: copyright,
+    globals: {
+      document: 'document',
+      ilias: 'il',
+    },
+    plugins: [
+      terser({
+        format: {
+          comments: preserveCopyright,
+        },
+      }),
+    ],
+  },
+};

components/ILIAS/UI/resources/js/Dropdown/src/dropdown.class.js

@@ -0,0 +1,129 @@
+/**
+* This file is part of ILIAS, a powerful learning management system
+* published by ILIAS open source e-Learning e.V.
+*
+* ILIAS is licensed with the GPL-3.0,
+* see https://www.gnu.org/licenses/gpl-3.0.en.html
+* You should have received a copy of said license along with the
+* source code, too.
+*
+* If this is not the case or you just want to try ILIAS, you'll find
+* us at:
+* https://www.ilias.de
+* https://github.com/ILIAS-eLearning
+*/
+
+export default class Dropdown {
+  /**
+   * @type {DOMDocument}
+   */
+  #document;
+
+  /**
+   * @type {HTMLElement}
+   */
+  #element;
+
+  /**
+   * @type {HTMLElement}
+   */
+  #button;
+
+  /**
+   * @type {HTMLElement}
+   */
+  #list;
+
+  /**
+   * @type {function}
+   */
+  #makeInvisibleOnEscape;
+
+  /**
+   * @type {function}
+   */
+  #makeVisibleOnClick;
+
+  /**
+   * @type {function}
+   */
+  #makeInvisibleOnClick;
+
+  /**
+   * @param {DOMDocument} document
+   * @param {HTMLElement} element
+   */
+  constructor(document, element) {
+    this.#document = document;
+    this.#element = element;
+
+    const buttons = this.#element.querySelectorAll(':scope > button');
+    if (buttons.length !== 1) {
+      console.log('Dropdown: Expected exactly one button in dropdown element.', this.#element);
+      return;
+    }
+    this.#button = buttons[0];
+
+    const lists = this.#element.querySelectorAll(':scope > ul');
+    if (lists.length !== 1) {
+      console.log('Dropdown: Expected exactly one ul in dropdown element.', this.#element);
+      return;
+    }
+    this.#list = lists[0];
+
+    this.initEvents();
+  }
+
+  initEvents() {
+    const self = this;
+    this.#button.addEventListener('keydown', (event) => {
+      if (event.which === 13) { // Enter
+        event.preventDefault();
+        self.toggleVisibility();
+      }
+    });
+
+    this.#makeInvisibleOnEscape = function (event) {
+      if (event.which === 27) { // ESCAPE
+        event.preventDefault();
+        self.makeInvisible();
+      }
+    };
+
+    this.#makeVisibleOnClick = function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      self.makeVisible();
+    };
+    this.#button.addEventListener('click', this.#makeVisibleOnClick);
+
+    this.#makeInvisibleOnClick = function () {
+      self.makeInvisible();
+    };
+  }
+
+  toggleVisibility() {
+    const visible = this.#list.style.display === 'block';
+    if (visible) {
+      this.makeInvisible();
+    } else {
+      this.makeVisible();
+    }
+  }
+
+  makeVisible() {
+    this.#list.style.display = 'block';
+    this.#button.setAttribute('aria-expanded', 'true');
+    this.#document.addEventListener('keydown', this.#makeInvisibleOnEscape);
+    this.#document.addEventListener('click', this.#makeInvisibleOnClick);
+    this.#button.removeEventListener('click', this.#makeVisibleOnClick);
+  }
+
+  makeInvisible() {
+    this.#list.style.display = 'none';
+    this.#button.setAttribute('aria-expanded', 'false');
+    this.#document.removeEventListener('keydown', this.#makeInvisibleOnEscape);
+    this.#document.removeEventListener('click', this.#makeInvisibleOnClick);
+    this.#button.addEventListener('click', this.#makeVisibleOnClick);
+  }
+}

components/ILIAS/UI/resources/js/Dropdown/src/dropdown.js

@@ -0,0 +1,23 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+import il from 'ilias';
+import document from 'document';
+import Dropdown from './dropdown.class';
+
+il.UI = il.UI || {};
+il.UI.dropdown = function (htmlElement) {
+  new Dropdown(document, htmlElement);
+};

components/ILIAS/UI/src/Implementation/Component/Dropdown/Renderer.php

@@ -74,6 +74,11 @@ protected function renderDropdown(Dropdown $component, RendererInterface $defaul
             $tpl->parseCurrentBlock();
         }
 
+        $component = $component->withAdditionalOnLoadCode(
+            fn($id) =>
+            "il.UI.dropdown(document.getElementById(\"$id\"));"
+        );
+
         $this->renderId($component, $tpl);
 
         return $tpl->get();

components/ILIAS/UI/src/templates/default/Dropdown/tpl.standard.html

@@ -1,4 +1,4 @@
-<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="{ID}" <!-- BEGIN aria_label --> aria-label="{ARIA_LABEL}"<!-- END aria_label --> aria-haspopup="true" aria-expanded="false" aria-controls="{ID_MENU}">{LABEL}<span class="caret"></span></button>
+<div class="dropdown" id="{ID}"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" <!-- BEGIN aria_label --> aria-label="{ARIA_LABEL}"<!-- END aria_label --> aria-haspopup="true" aria-expanded="false" aria-controls="{ID_MENU}">{LABEL}<span class="caret"></span></button>
 <ul id="{ID_MENU}" class="dropdown-menu">
 <!-- BEGIN item -->	<li>{ITEM}</li>
 <!-- END item --></ul>