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 8, 2024
1 parent d63a010 commit 598ca71
Show file tree
Hide file tree
Showing 22 changed files with 215 additions and 48 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){"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);
14 changes: 0 additions & 14 deletions components/ILIAS/UI/resources/js/Dropdown/dropdown.js

This file was deleted.

42 changes: 42 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,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,
},
}),
],
},
};
96 changes: 96 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,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);
}
}
23 changes: 23 additions & 0 deletions components/ILIAS/UI/resources/js/Dropdown/src/index.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 Dropdown from './Dropdown';

il.UI = il.UI || {};
il.UI.dropdown = {};
il.UI.dropdown.init = function (htmlElement) {
return new Dropdown(htmlElement);
};
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<?php

declare(strict_types=1);

/**
* This file is part of ILIAS, a powerful learning management system
* published by ILIAS open source e-Learning e.V.
Expand All @@ -18,6 +16,8 @@
*
*********************************************************************/

declare(strict_types=1);

namespace ILIAS\UI\Implementation\Component\Dropdown;

use ILIAS\UI\Component\JavaScriptBindable;
Expand Down Expand Up @@ -74,6 +74,11 @@ protected function renderDropdown(Dropdown $component, RendererInterface $defaul
$tpl->parseCurrentBlock();
}

$component = $component->withAdditionalOnLoadCode(
fn($id) =>
"il.UI.dropdown.init(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 598ca71

Please sign in to comment.