Skip to content

Commit

Permalink
UI: JS for dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
klees committed Jul 3, 2024
1 parent d63a010 commit 40e0539
Show file tree
Hide file tree
Showing 22 changed files with 207 additions and 46 deletions.
2 changes: 1 addition & 1 deletion components/ILIAS/UI/UI.php
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
15 changes: 15 additions & 0 deletions components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js
Original file line number Diff line number Diff line change
@@ -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,e){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=i(t),s=i(e);class o{#t;#e;#i;#n;constructor(t,e){this.#t=t,this.#e=e;const i=this.#e.querySelectorAll(":scope > button");if(1!==i.length)throw new Error("Dropdown: Expected exactly one button in dropdown element.",this.#e);[this.#i]=i;const n=this.#e.querySelectorAll(":scope > ul");if(1!==n.length)throw new Error("Dropdown: Expected exactly one ul in dropdown element.",this.#e);[this.#n]=n,this.#i.addEventListener("keydown",(t=>{13===t.which&&this.toggleVisibility()})),this.#i.addEventListener("click",this.#s)}#o=t=>{27===t.which&&this.hide()};#s=t=>{t.stopPropagation(),this.show()};#h=()=>{this.hide()};toggleVisibility(){"block"===this.#n.style.display?this.hide():this.show()}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)}}n.default.UI=n.default.UI||{},n.default.UI.dropdown=function(t){return new o(s.default,t)}}(il,document);
14 changes: 0 additions & 14 deletions components/ILIAS/UI/resources/js/Dropdown/dropdown.js

This file was deleted.

27 changes: 27 additions & 0 deletions components/ILIAS/UI/resources/js/Dropdown/rollup.config.js
Original file line number Diff line number Diff line change
@@ -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,
},
}),
],
},
};
105 changes: 105 additions & 0 deletions components/ILIAS/UI/resources/js/Dropdown/src/dropdown.class.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/**
* 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;

/**
* @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) {
throw new Error('Dropdown: Expected exactly one button in dropdown element.', this.#element);
}
[this.#button] = buttons;

const lists = this.#element.querySelectorAll(':scope > ul');
if (lists.length !== 1) {
throw new Error('Dropdown: Expected exactly one ul in dropdown element.', this.#element);
}
[this.#list] = lists;

this.#button.addEventListener('keydown', (event) => {
if (event.which === 13) { // Enter
this.toggleVisibility();
}
});

this.#button.addEventListener('click', this.#showOnClick);
}

#hideOnEscape = (event) => {
if (event.which === 27) { // ESCAPE
this.hide();
}
};

#showOnClick = (event) => {
event.stopPropagation();
this.show();
};

#hideOnClick = () => {
this.hide();
};

toggleVisibility() {
const visible = this.#list.style.display === 'block';
if (visible) {
this.hide();
} else {
this.show();
}
}

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);
}
}
23 changes: 23 additions & 0 deletions components/ILIAS/UI/resources/js/Dropdown/src/dropdown.js
Original file line number Diff line number Diff line change
@@ -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) {
return new Dropdown(document, htmlElement);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
@@ -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" <!-- 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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -272,8 +272,8 @@ public function testRenderWithActions(): void
<div></div>
<div></div>
<div class="il-card-repository-dropdown">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu"><span class="caret"></span></button>
<div class="dropdown" id="id_3">
<button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu"><span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="https://www.ilias.de" id="id_2">Visit ILIAS</button></li>
</ul>
Expand Down
10 changes: 5 additions & 5 deletions components/ILIAS/UI/tests/Component/Dropdown/DropdownTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ public function testRenderItems(): void
$html = $r->render($c);

$expected = <<<EOT
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">
<div class="dropdown" id="id_3">
<button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">
<span class="caret"></span>
</button>
<ul id="id_3_menu" class="dropdown-menu">
Expand Down Expand Up @@ -124,7 +124,7 @@ public function testRenderItemsWithLabel(): void
$html = $r->render($c);

$expected = <<<EOT
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">label<span class="caret"></span></button>
<div class="dropdown" id="id_3"><button class="btn btn-default dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">label<span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="https://www.ilias.de" id="id_1">ILIAS</button></li>
<li><hr /></li>
Expand All @@ -150,7 +150,7 @@ public function testRenderWithLinkNewViewport(): void
$html = $r->render($c);

$expected = <<<EOT
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_1" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_1_menu"><span class="caret"></span></button>
<div class="dropdown" id="id_1"><button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_1_menu"><span class="caret"></span></button>
<ul id="id_1_menu" class="dropdown-menu">
<li><a href="http://www.ilias.de" target="_blank" rel="noopener">Link to ILIAS</a></li>
</ul>
Expand All @@ -174,7 +174,7 @@ public function testRenderItemsWithAriaLabel(): void
$html = $r->render($c);

$expected = <<<EOT
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="my_aria_label" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">label<span class="caret"></span></button>
<div class="dropdown" id="id_3"><button class="btn btn-default dropdown-toggle" type="button" aria-label="my_aria_label" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">label<span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="https://www.ilias.de" id="id_1">ILIAS</button></li>
<li><hr /></li>
Expand Down
4 changes: 2 additions & 2 deletions components/ILIAS/UI/tests/Component/Entity/EntityTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,8 @@ public function testEntityRendering(): void
<div class="c-entity __container">
<div class="c-entity __blocking-conditions">bc</div>
<div class="c-entity __actions">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_9" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_9_menu"><span class="caret"></span></button>
<div class="dropdown" id="id_9">
<button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_9_menu"><span class="caret"></span></button>
<ul id="id_9_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="#" id="id_7">shy</button></li>
<li><button class="btn btn-link" data-action="#" id="id_8">shy</button></li>
Expand Down
4 changes: 2 additions & 2 deletions components/ILIAS/UI/tests/Component/Item/ItemGroupTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,8 @@ public function testRenderWithActions(): void
$expected = <<<EOT
<div class="il-item-group">
<h3>group</h3>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">
<div class="dropdown" id="id_3">
<button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">
<span class="caret"></span>
</button>
<ul id="id_3_menu" class="dropdown-menu">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,8 @@ public function getOnLoadCodeAsync(): string
<span aria-hidden="true">&times;</span>
</button>
<div class="il-item-description">description</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_menu">
<div class="dropdown" id="id">
<button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_menu">
<span class="caret"></span>
</button>
<ul id="id_menu" class="dropdown-menu">
Expand Down
2 changes: 1 addition & 1 deletion components/ILIAS/UI/tests/Component/Item/ItemTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ public function testRenderBase(): void
$expected = <<<EOT
<div class="il-item il-std-item ">
<h4 class="il-item-title">Item Title</h4>
<div class="il-item-actions l-bar__space-keeper"><div class="l-bar__element"><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu"><span class="caret"></span></button>
<div class="il-item-actions l-bar__space-keeper"><div class="l-bar__element"><div class="dropdown" id="id_3"><button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu"><span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="https://www.ilias.de" id="id_1" >ILIAS</button>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,7 @@ public function testRenderingWithCrumbs(): void
<div class="il-pagetitle">pagetitle</div>
</div>
<nav class="il-header-locator">
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">label3<span class="caret"></span></button>
<div class="dropdown" id="id_3"><button class="btn btn-default dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu">label3<span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="#" id="id_1">label2</button></li>
<li><button class="btn btn-link" data-action="#" id="id_2">label1</button></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ public function testRenderWithActions(): void
$expected = <<<EOT
<div class="panel panel-flex il-panel-listing-std-container clearfix">
<div class="panel-heading ilHeader">
<div class="panel-title"><h2>title</h2></div><div class="panel-controls"><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu"> <span class="caret"></span></button>
<div class="panel-title"><h2>title</h2></div><div class="panel-controls"><div class="dropdown" id="id_3"><button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu"> <span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="https://www.ilias.de" id="id_1">ILIAS</button></li>
<li><button class="btn btn-link" data-action="https://www.github.com" id="id_2">GitHub</button></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ public function testRenderPanelSecondaryWithActions(): void
<div class="panel-heading ilHeader">
<div class="panel-title"><h2>Title</h2></div>
<div class="panel-controls">
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_3" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu" ><span class="caret"></span></button>
<div class="dropdown" id="id_3"><button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_3_menu" ><span class="caret"></span></button>
<ul id="id_3_menu" class="dropdown-menu">
<li><button class="btn btn-link" data-action="https://www.ilias.de" id="id_1">ILIAS</button></li>
<li><button class="btn btn-link" data-action="https://www.github.com" id="id_2">Github</button></li>
Expand Down Expand Up @@ -233,8 +233,8 @@ public function testRenderPanelSecondaryWithSortation(): void
<div class="panel-title"><h2>Title</h2></div>
<div class="panel-viewcontrols l-bar__space-keeper">
<div class="il-viewcontrol-sortation l-bar__element" id="id_1">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="id_4" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_4_menu">
<div class="dropdown" id="id_4">
<button class="btn btn-default dropdown-toggle" type="button" aria-label="actions" aria-haspopup="true" aria-expanded="false" aria-controls="id_4_menu">
<span class="caret"></span>
</button>
<ul id="id_4_menu" class="dropdown-menu">
Expand Down
Loading

0 comments on commit 40e0539

Please sign in to comment.