From ff0d63be66f7dce3a87770e748f92527d5b0466b Mon Sep 17 00:00:00 2001 From: Nils Haagen Date: Tue, 29 Oct 2024 16:47:29 +0100 Subject: [PATCH] UI/Button/Month: 42413, use month input (#8278) --- .../ILIAS/UI/resources/js/Button/button.js | 228 +++++++++--------- .../UI/resources/js/Dropdown/dist/dropdown.js | 2 +- .../Component/Button/Renderer.php | 26 +- .../UI/src/examples/Button/Month/base.php | 16 -- .../templates/default/Button/tpl.month.html | 10 +- .../Component/Button/ButtonMonthTest.php | 17 +- 6 files changed, 126 insertions(+), 173 deletions(-) diff --git a/components/ILIAS/UI/resources/js/Button/button.js b/components/ILIAS/UI/resources/js/Button/button.js index 9586864c96cf..8124f035e6c1 100755 --- a/components/ILIAS/UI/resources/js/Button/button.js +++ b/components/ILIAS/UI/resources/js/Button/button.js @@ -1,130 +1,124 @@ +/** + * 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 + */ + il = il || {}; il.UI = il.UI || {}; il.UI.button = il.UI.button || {}; -(function($, il) { - il.UI.button = (function($) { - - /* month button */ - var initMonth = function (id) { - $("#" + id).find(".inline-picker").each(function(o) { - $(this).datetimepicker({ - inline: true, - sideBySide: true, - viewMode: "months", - format: "MM/YYYY", - defaultDate: $(this).parent().data("defaultDate"), - locale: $(this).parent().data("lang") - }).on("dp.change", function (ev) { - var i, d, months = []; - var d = new Date(ev.date); - var m = d.getMonth() + 1; - m = ("00" + m).substring(m.toString().length); - - for (i = 1; i <= 12; i++) { - months.push(il.Language.txt("month_" + (("00" + i).substring(i.toString().length)) + "_short")); - } +(function ($, il) { + il.UI.button = (function ($) { + /* month button */ + const initMonth = function (id) { + const btn = document.querySelector(`#${id} > input`); + btn.addEventListener('change', (e) => { + const value = e.srcElement.value.split('-').reverse().join('-'); + const id = e.srcElement.closest('.il-btn-month').getAttribute('id'); + $(`#${id}`).trigger('il.ui.button.month.changed', [id, value]); + }); + }; - $("#" + id + " span.il-current-month").html(months[d.getMonth()] + " " + d.getFullYear()); - $("#" + id).trigger("il.ui.button.month.changed", [id, m + "-" + d.getFullYear()]); - }); - }); - }; + /* toggle button */ + const handleToggleClick = function (event, id, on_url, off_url, signals) { + const b = $(`#${id}`); + const pressed = b.attr('aria-pressed'); + for (let i = 0; i < signals.length; i++) { + const s = signals[i]; + if (s.event === 'click' + || (pressed === 'true' && s.event === 'toggle_on') + || (pressed !== 'true' && s.event === 'toggle_off') + ) { + $(b).trigger(s.signal_id, { + id: s.signal_id, + event: s.event, + triggerer: b, + options: s.options, + }); + } + } - /* toggle button */ - var handleToggleClick = function (event, id, on_url, off_url, signals) { - var b = $("#" + id); - var pressed = b.attr("aria-pressed"); - for (var i = 0; i < signals.length; i++) { - var s = signals[i]; - if (s.event === "click" || - (pressed === "true" && s.event === "toggle_on") || - (pressed !== "true" && s.event === "toggle_off") - ) { - $(b).trigger(s.signal_id, { - 'id' : s.signal_id, - 'event' : s.event, - 'triggerer' : b, - 'options' : s.options}); - } - } + if (pressed === 'true' && on_url !== '') { + window.location = on_url; + } - if (pressed === "true" && on_url !== '') { - window.location = on_url; - } + if (pressed !== 'true' && off_url !== '') { + window.location = off_url; + } - if (pressed !== "true" && off_url !== '') { - window.location = off_url; - } + return false; + }; - //console.log('handleToggelClick: ' + id); - return false; - }; + const activateLoadingAnimation = function (id) { + const $button = $(`#${id}`); + $button.addClass('il-btn-with-loading-animation'); + $button.addClass('disabled'); + return $button; + }; - var activateLoadingAnimation = function(id){ - console.log('#'+id); - var $button = $('#'+id); - $button.addClass('il-btn-with-loading-animation'); - $button.addClass('disabled'); - return $button; - }; + const deactivateLoadingAnimation = function (id) { + const $button = $(`#${id}`); + $button.removeClass('il-btn-with-loading-animation'); + $button.removeClass('disabled'); + return $button; + }; - var deactivateLoadingAnimation = function(id){ - var $button = $('#'+id); - $button.removeClass('il-btn-with-loading-animation'); - $button.removeClass('disabled'); - return $button; - }; - - return { - initMonth: initMonth, - handleToggleClick: handleToggleClick, - activateLoadingAnimation: activateLoadingAnimation, - deactivateLoadingAnimation: deactivateLoadingAnimation - }; - })($); -})($, il); + return { + initMonth, + handleToggleClick, + activateLoadingAnimation, + deactivateLoadingAnimation, + }; + }($)); +}($, il)); // toggle init -document.addEventListener("DOMContentLoaded", function() { - - document.querySelectorAll(".il-toggle-button:not(.unavailable)").forEach(button => { - const refreshLabels = (b, toggle = false) => { - let on = b.classList.contains("on"); - if (toggle) { - on = !on; - } - if (b.querySelectorAll(".il-toggle-label-off, .il-toggle-label-on").length > 0) { - b.querySelectorAll(".il-toggle-label-off, .il-toggle-label-on").forEach(l => { - l.style.display = "none"; - }); - if (on) { - b.setAttribute('aria-pressed', true); - b.classList.add("on"); - b.classList.remove("off"); - b.querySelector(".il-toggle-label-on").style.display = ""; - } else { - b.setAttribute('aria-pressed', false); - b.classList.add("off"); - b.classList.remove("on"); - b.querySelector(".il-toggle-label-off").style.display = ""; - } - } else { - if (on) { - b.setAttribute('aria-pressed', true); - b.classList.add("on"); - b.classList.remove("off"); - } else { - b.setAttribute('aria-pressed', false); - b.classList.add("off"); - b.classList.remove("on"); - } - } - } - refreshLabels(button); +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('.il-toggle-button:not(.unavailable)').forEach((button) => { + const refreshLabels = (b, toggle = false) => { + let on = b.classList.contains('on'); + if (toggle) { + on = !on; + } + if (b.querySelectorAll('.il-toggle-label-off, .il-toggle-label-on').length > 0) { + b.querySelectorAll('.il-toggle-label-off, .il-toggle-label-on').forEach((l) => { + l.style.display = 'none'; + }); + if (on) { + b.setAttribute('aria-pressed', true); + b.classList.add('on'); + b.classList.remove('off'); + b.querySelector('.il-toggle-label-on').style.display = ''; + } else { + b.setAttribute('aria-pressed', false); + b.classList.add('off'); + b.classList.remove('on'); + b.querySelector('.il-toggle-label-off').style.display = ''; + } + } else if (on) { + b.setAttribute('aria-pressed', true); + b.classList.add('on'); + b.classList.remove('off'); + } else { + b.setAttribute('aria-pressed', false); + b.classList.add('off'); + b.classList.remove('on'); + } + }; + refreshLabels(button); - button.addEventListener("click", e => { - const b = e.currentTarget; - refreshLabels(b, true); - }); - }); -}); \ No newline at end of file + button.addEventListener('click', (e) => { + const b = e.currentTarget; + refreshLabels(b, true); + }); + }); +}); diff --git a/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js b/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js index 692974855daa..b3866eeeca11 100644 --- a/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js +++ b/components/ILIAS/UI/resources/js/Dropdown/dist/dropdown.js @@ -12,4 +12,4 @@ * 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.key&&this.hide()};#s=t=>{t.stopPropagation(),this.show()};#d=()=>{this.hide()};#l=()=>{const t=this.#t.documentElement.clientWidth;this.#i.getBoundingClientRect().left+this.#n.getBoundingClientRect().width>t?(this.#n.classList.remove("dropdown-menu__right"),this.#n.classList.add("dropdown-menu__left")):(this.#n.classList.remove("dropdown-menu__left"),this.#n.classList.add("dropdown-menu__right"))};show(){this.#n.style.display="block",this.#l(),this.#i.setAttribute("aria-expanded","true"),this.#t.addEventListener("keydown",this.#o),this.#t.addEventListener("click",this.#d),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.#d),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); +!function(t){"use strict";class e{#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.key&&this.hide()};#s=t=>{t.stopPropagation(),this.show()};#d=()=>{this.hide()};#l=()=>{const t=this.#t.documentElement.clientWidth;this.#i.getBoundingClientRect().left+this.#n.getBoundingClientRect().width>t?(this.#n.classList.remove("dropdown-menu__right"),this.#n.classList.add("dropdown-menu__left")):(this.#n.classList.remove("dropdown-menu__left"),this.#n.classList.add("dropdown-menu__right"))};show(){this.#n.style.display="block",this.#l(),this.#i.setAttribute("aria-expanded","true"),this.#t.addEventListener("keydown",this.#o),this.#t.addEventListener("click",this.#d),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.#d),this.#i.addEventListener("click",this.#s)}}t.UI=t.UI||{},t.UI.dropdown={},t.UI.dropdown.init=function(t){return new e(t)}}(il); diff --git a/components/ILIAS/UI/src/Implementation/Component/Button/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Button/Renderer.php index 0446e48728c3..b1f51d7d8bfb 100755 --- a/components/ILIAS/UI/src/Implementation/Component/Button/Renderer.php +++ b/components/ILIAS/UI/src/Implementation/Component/Button/Renderer.php @@ -83,7 +83,7 @@ protected function renderButton(Component\Button\Button $component, RendererInte $tpl->setVariable("LABEL", $component->getLabel()); $symbol = $component->getSymbol(); - if($symbol !== null) { + if ($symbol !== null) { if ($component->getLabel() !== '') { $symbol = $symbol->withLabel(''); } @@ -284,32 +284,16 @@ protected function maybeRenderId(Component\JavaScriptBindable $component, Templa protected function renderMonth(Component\Button\Month $component): string { - $def = $component->getDefault(); - - for ($i = 1; $i <= 12; $i++) { - $this->toJS(array("month_" . str_pad((string) $i, 2, "0", STR_PAD_LEFT) . "_short")); - } - $tpl = $this->getTemplate("tpl.month.html", true, true); - $month = explode("-", $def); - $tpl->setVariable("DEFAULT_LABEL", $this->txt("month_" . str_pad($month[0], 2, "0", STR_PAD_LEFT) . "_short") . " " . $month[1]); - $tpl->setVariable("DEF_DATE", $month[0] . "/1/" . $month[1]); - // see https://github.com/moment/moment/tree/develop/locale - $lang_key = in_array($this->getLangKey(), array("ar", "bg", "cs", "da", "de", "el", "en", "es", "et", "fa", "fr", "hu", "it", - "ja", "ka", "lt", "nl", "pl", "pt", "ro", "ru", "sk", "sq", "sr", "tr", "uk", "vi", "zh")) - ? $this->getLangKey() - : "en"; - if ($lang_key == "zh") { - $lang_key = "zh-cn"; - } - $tpl->setVariable("LANG", $lang_key); - $component = $component->withAdditionalOnLoadCode(fn($id) => "il.UI.button.initMonth('$id');"); $id = $this->bindJavaScript($component); - $tpl->setVariable("ID", $id); + $def = $component->getDefault(); + $value = implode('-', array_reverse(explode("-", $def))); + $tpl->setVariable("DEFAULT", $value); + return $tpl->get(); } diff --git a/components/ILIAS/UI/src/examples/Button/Month/base.php b/components/ILIAS/UI/src/examples/Button/Month/base.php index ac310a0c68b7..f16e39c70281 100755 --- a/components/ILIAS/UI/src/examples/Button/Month/base.php +++ b/components/ILIAS/UI/src/examples/Button/Month/base.php @@ -1,21 +1,5 @@ - -
-
-
- + + \ No newline at end of file diff --git a/components/ILIAS/UI/tests/Component/Button/ButtonMonthTest.php b/components/ILIAS/UI/tests/Component/Button/ButtonMonthTest.php index 6a07aada900c..003dabf20471 100755 --- a/components/ILIAS/UI/tests/Component/Button/ButtonMonthTest.php +++ b/components/ILIAS/UI/tests/Component/Button/ButtonMonthTest.php @@ -58,16 +58,13 @@ public function testRender(): void $html = $r->render($c); $expected_html = << - -
-
-
- +
+ +
EOT; - $this->assertHTMLEquals("
" . $expected_html . "
", "
" . $html . "
"); + $this->assertEquals( + $this->brutallyTrimHTML($expected_html), + $this->brutallyTrimHTML($html) + ); } }