diff --git a/components/ILIAS/UI/UI.php b/components/ILIAS/UI/UI.php index 2b00ee377859..906f9496113c 100644 --- a/components/ILIAS/UI/UI.php +++ b/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"); diff --git a/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js b/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js new file mode 100644 index 000000000000..8f905b620dc1 --- /dev/null +++ b/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js @@ -0,0 +1,15 @@ +/** + * 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 + */ +!function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=e(t);class n{#t;#e;#i;#n;constructor(t){if(this.#e=t,this.#t=t.ownerDocument,this.#i=this.#e.querySelector(":scope > button"),null===this.#i)throw new Error("Dropdown: Expected exactly one button in dropdown element.",this.#e);if(this.#n=this.#e.querySelector(":scope > ul"),null===this.#n)throw new Error("Dropdown: Expected exactly one ul in dropdown element.",this.#e);this.#i.addEventListener("click",this.#s)}#o=t=>{27===t.which&&this.hide()};#s=t=>{t.stopPropagation(),this.show()};#h=()=>{this.hide()};show(){this.#n.style.display="block",this.#i.setAttribute("aria-expanded","true"),this.#t.addEventListener("keydown",this.#o),this.#t.addEventListener("click",this.#h),this.#i.removeEventListener("click",this.#s)}hide(){this.#n.style.display="none",this.#i.setAttribute("aria-expanded","false"),this.#t.removeEventListener("keydown",this.#o),this.#t.removeEventListener("click",this.#h),this.#i.addEventListener("click",this.#s)}}i.default.UI=i.default.UI||{},i.default.UI.dropdown={},i.default.UI.dropdown.init=function(t){return new n(t)}}(il); diff --git a/components/ILIAS/UI/resources/js/Dropdown/dropdown.js b/components/ILIAS/UI/resources/js/Dropdown/dropdown.js deleted file mode 100755 index 2a61cf0310dd..000000000000 --- a/components/ILIAS/UI/resources/js/Dropdown/dropdown.js +++ /dev/null @@ -1,14 +0,0 @@ -(function($) { - $(document).on('shown.bs.dropdown', function(event) { - var dropdown = $(event.target); - dropdown.find('.dropdown-toggle').attr('aria-expanded', true); - //Fit Dropdowns correctly to page, omit for legacy component, add new Item, see #30856 - il.UI.page.fit(dropdown.find('.dropdown-menu:not(#il-add-new-item-gl)')); - }); - - // on close - $(document).on('hidden.bs.dropdown', function(event) { - var dropdown = $(event.target); - dropdown.find('.dropdown-toggle').attr('aria-expanded', false); - }); -})($); \ No newline at end of file diff --git a/components/ILIAS/UI/resources/js/Dropdown/rollup.config.js b/components/ILIAS/UI/resources/js/Dropdown/rollup.config.js new file mode 100644 index 000000000000..35ada0585d08 --- /dev/null +++ b/components/ILIAS/UI/resources/js/Dropdown/rollup.config.js @@ -0,0 +1,42 @@ +/** + * 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 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/index.js', + output: { + file: './dist/dropdown.js', + format: 'iife', + banner: copyright, + globals: { + document: 'document', + ilias: 'il', + }, + plugins: [ + terser({ + format: { + comments: preserveCopyright, + }, + }), + ], + }, +}; diff --git a/components/ILIAS/UI/resources/js/Dropdown/src/Dropdown.js b/components/ILIAS/UI/resources/js/Dropdown/src/Dropdown.js new file mode 100644 index 000000000000..fb07b7c3c6a3 --- /dev/null +++ b/components/ILIAS/UI/resources/js/Dropdown/src/Dropdown.js @@ -0,0 +1,96 @@ +/** + * 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 {Document} + */ + #document; + + /** + * @type {HTMLElement} + */ + #element; + + /** + * @type {HTMLElement} + */ + #button; + + /** + * @type {HTMLElement} + */ + #list; + + /** + * @param {HTMLElement} element + */ + constructor(element) { + this.#element = element; + this.#document = element.ownerDocument; + + this.#button = this.#element.querySelector(':scope > button'); + if (this.#button === null) { + throw new Error('Dropdown: Expected exactly one button in dropdown element.', this.#element); + } + + this.#list = this.#element.querySelector(':scope > ul'); + if (this.#list === null) { + throw new Error('Dropdown: Expected exactly one ul in dropdown element.', this.#element); + } + + this.#button.addEventListener('click', this.#showOnClick); + } + + /** + * @type {function(KeyboardEvent)} + */ + #hideOnEscape = (/** @param {KeyboardEvent} event */ event) => { + if (event.which === 27) { // ESCAPE + this.hide(); + } + }; + + /** + * @type {function(KeyboardEvent)} + */ + #showOnClick = (/** @param {KeyboardEvent} event */event) => { + event.stopPropagation(); + this.show(); + }; + + /** + * @type {function()} + */ + #hideOnClick = () => { + this.hide(); + }; + + show() { + this.#list.style.display = 'block'; + this.#button.setAttribute('aria-expanded', 'true'); + this.#document.addEventListener('keydown', this.#hideOnEscape); + this.#document.addEventListener('click', this.#hideOnClick); + this.#button.removeEventListener('click', this.#showOnClick); + } + + hide() { + this.#list.style.display = 'none'; + this.#button.setAttribute('aria-expanded', 'false'); + this.#document.removeEventListener('keydown', this.#hideOnEscape); + this.#document.removeEventListener('click', this.#hideOnClick); + this.#button.addEventListener('click', this.#showOnClick); + } +} diff --git a/components/ILIAS/UI/resources/js/Dropdown/src/index.js b/components/ILIAS/UI/resources/js/Dropdown/src/index.js new file mode 100644 index 000000000000..8540a86abe18 --- /dev/null +++ b/components/ILIAS/UI/resources/js/Dropdown/src/index.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 Dropdown from './Dropdown'; + +il.UI = il.UI || {}; +il.UI.dropdown = {}; +il.UI.dropdown.init = function (htmlElement) { + return new Dropdown(htmlElement); +}; diff --git a/components/ILIAS/UI/src/Implementation/Component/Dropdown/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Dropdown/Renderer.php index 00d2770d3038..535eabaa72ac 100755 --- a/components/ILIAS/UI/src/Implementation/Component/Dropdown/Renderer.php +++ b/components/ILIAS/UI/src/Implementation/Component/Dropdown/Renderer.php @@ -1,7 +1,5 @@ parseCurrentBlock(); } + $component = $component->withAdditionalOnLoadCode( + fn($id) => + "il.UI.dropdown.init(document.getElementById(\"$id\"));" + ); + $this->renderId($component, $tpl); return $tpl->get(); diff --git a/components/ILIAS/UI/src/templates/default/Dropdown/tpl.standard.html b/components/ILIAS/UI/src/templates/default/Dropdown/tpl.standard.html index f2a0520d5acc..ff24ccec52bf 100755 --- a/components/ILIAS/UI/src/templates/default/Dropdown/tpl.standard.html +++ b/components/ILIAS/UI/src/templates/default/Dropdown/tpl.standard.html @@ -1,4 +1,4 @@ -
+