diff --git a/lang/ilias_de.lang b/lang/ilias_de.lang index 57bac8a0b2fe..2ad8cc197f72 100644 --- a/lang/ilias_de.lang +++ b/lang/ilias_de.lang @@ -3772,6 +3772,7 @@ common#:#copy_all#:#Alle kopieren common#:#copy_n_of_suffix#:#- Kopie (%1$s) common#:#copy_of#:#Kopie von common#:#copy_of_suffix#:#- Kopie +common#:#copy_perma_link#:#Link in Zwischenablage kopieren common#:#copy_selected_items#:#Kopieren common#:#count#:#Anzahl common#:#counter_novelty#:#Neuigkeiten @@ -5254,6 +5255,7 @@ common#:#pd_items_news#:#Einschließlich Neuigkeiten der ausgewählten Objekte common#:#pdf_export#:#PDF-Export common#:#perm_settings#:#Rechte common#:#perma_link#:#Link zu dieser Seite +common#:#perma_link_copied#:#Link zu dieser Seite wurde in die Zwischenablage kopiert. common#:#permission#:#Recht common#:#permission_denied#:#Kein Zugriffsrecht common#:#permission_settings#:#Rechteeinstellungen diff --git a/lang/ilias_en.lang b/lang/ilias_en.lang index 89f6673d37bc..10ab787bbb3e 100644 --- a/lang/ilias_en.lang +++ b/lang/ilias_en.lang @@ -3772,6 +3772,7 @@ common#:#copy_all#:#Copy all common#:#copy_n_of_suffix#:#- Copy (%1$s) common#:#copy_of#:#Copy of common#:#copy_of_suffix#:#- Copy +common#:#copy_perma_link#:#Copy link to clipboard common#:#copy_selected_items#:#Copy common#:#count#:#Count common#:#counter_novelty#:#News @@ -5254,6 +5255,7 @@ common#:#pd_items_news#:#Include News of Personal Items common#:#pdf_export#:#PDF Export common#:#perm_settings#:#Permissions common#:#perma_link#:#Permanent Link +common#:#perma_link_copied#:#Link to this page has been copied to the clipboard. common#:#permission#:#Permission common#:#permission_denied#:#Permission Denied common#:#permission_settings#:#Object Permission Settings diff --git a/src/UI/Implementation/Component/MainControls/Renderer.php b/src/UI/Implementation/Component/MainControls/Renderer.php index 145f67260e3e..79a12236a36c 100644 --- a/src/UI/Implementation/Component/MainControls/Renderer.php +++ b/src/UI/Implementation/Component/MainControls/Renderer.php @@ -441,11 +441,16 @@ protected function renderFooter(Footer $component, RendererInterface $default_re $perm_url = $component->getPermanentURL(); if ($perm_url instanceof URI) { - $url = $perm_url->__toString(); - $link = $this->getUIFactory() - ->link() - ->standard($this->txt('perma_link'), $url); - $tpl->setVariable('PERMANENT', $default_renderer->render($link)); + $code = function (string $id) use ($perm_url): string { + $id = $this->jsonEncode($id); + $perm_url = $this->jsonEncode((string) $perm_url); + + return "document.getElementById($id).addEventListener('click', e => il.Footer.permalink.copyText($perm_url) + .then(() => il.Footer.permalink.showTooltip(e.target.nextElementSibling, 5000)));"; + }; + $button = $this->getUIFactory()->button()->shy($this->txt('copy_perma_link'), '')->withAdditionalOnLoadCode($code); + $tpl->setVariable('PERMANENT', $default_renderer->render($button)); + $tpl->setVariable('PERMANENT_TOOLTIP', $this->txt('perma_link_copied')); } return $tpl->get(); } @@ -460,6 +465,7 @@ public function registerResources(ResourceRegistry $registry): void $registry->register('./src/UI/templates/js/MainControls/dist/maincontrols.min.js'); $registry->register('./src/GlobalScreen/Client/dist/GS.js'); $registry->register('./src/UI/templates/js/MainControls/system_info.js'); + $registry->register('./src/UI/templates/js/MainControls/dist/footer.min.js'); } /** @@ -475,4 +481,9 @@ protected function getComponentInterfaceName(): array Component\MainControls\SystemInfo::class ); } + + private function jsonEncode($value): string + { + return json_encode($value, JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_THROW_ON_ERROR); + } } diff --git a/src/UI/templates/default/MainControls/tpl.footer.html b/src/UI/templates/default/MainControls/tpl.footer.html index 136f7254444d..6102133e35b2 100644 --- a/src/UI/templates/default/MainControls/tpl.footer.html +++ b/src/UI/templates/default/MainControls/tpl.footer.html @@ -2,8 +2,11 @@
-
+
{PERMANENT} +
diff --git a/src/UI/templates/js/MainControls/dist/footer.min.js b/src/UI/templates/js/MainControls/dist/footer.min.js new file mode 100644 index 000000000000..1ad793232be4 --- /dev/null +++ b/src/UI/templates/js/MainControls/dist/footer.min.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(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);var n=Object.freeze({__proto__:null,copyText:e=>{if(window.navigator.clipboard)return window.navigator.clipboard.writeText(e);const t=document.createElement("span"),o=document.createRange(),n=window.getSelection();t.textContent=e,document.body.appendChild(t),o.selectNodeContents(t),n.addRange(o);const r=document.execCommand("copy");return n.removeAllRanges(),t.remove(),r?Promise.resolve():Promise.reject(new Error("Unable to copy text."))},showTooltip:(e,t)=>{const o=(Array.from(document.getElementsByTagName("main")).find((e=>!e.hidden))||document.body).getBoundingClientRect();e.parentNode.classList.add("c-tooltip--visible");const n=e.getBoundingClientRect();o.left>n.left?e.style.transform="translateX(calc("+(o.left-n.left)+"px - 50%))":o.right{e.parentNode.classList.remove("c-tooltip--visible")}),t)}});o.default.Footer={permalink:n}}(il); diff --git a/src/UI/templates/js/MainControls/rollup.config.js b/src/UI/templates/js/MainControls/rollup.config.js index 4fdbcdfa686b..f41a41ba8ae8 100644 --- a/src/UI/templates/js/MainControls/rollup.config.js +++ b/src/UI/templates/js/MainControls/rollup.config.js @@ -48,4 +48,23 @@ export default [ external: ['il', 'jquery'], }, + { + input: './src/footer.js', + output: { + file: './dist/footer.min.js', + format: 'iife', + banner: copyright, + plugins: [ + terser({ + format: { + comments: preserveCopyright, + }, + }), + ], + globals: { + il: 'il', + }, + }, + external: ['il'], + }, ]; diff --git a/src/UI/templates/js/MainControls/src/footer.js b/src/UI/templates/js/MainControls/src/footer.js new file mode 100644 index 000000000000..b3279469352f --- /dev/null +++ b/src/UI/templates/js/MainControls/src/footer.js @@ -0,0 +1,19 @@ +/** + * 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 'il'; +import * as permalink from './footer/permalink'; + +il.Footer = { permalink }; diff --git a/src/UI/templates/js/MainControls/src/footer/permalink.js b/src/UI/templates/js/MainControls/src/footer/permalink.js new file mode 100644 index 000000000000..bde15be71e8b --- /dev/null +++ b/src/UI/templates/js/MainControls/src/footer/permalink.js @@ -0,0 +1,55 @@ +/** + * 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 + */ + +/** + * @param {string} text + * @returns {Promise} + */ +export const copyText = text => { + if (window.navigator.clipboard) { + return window.navigator.clipboard.writeText(text); + } + + const node = document.createElement('span'); + const range = document.createRange(); + const selection = window.getSelection(); + + node.textContent = text; + document.body.appendChild(node); + range.selectNodeContents(node); + selection.addRange(range); + + const success = document.execCommand('copy'); + selection.removeAllRanges(); + node.remove(); + + return success ? Promise.resolve() : Promise.reject(new Error('Unable to copy text.')); +}; + +export const showTooltip = (node, delay) => { + const main = (Array.from(document.getElementsByTagName('main')).find(n => !n.hidden) || document.body).getBoundingClientRect(); + node.parentNode.classList.add('c-tooltip--visible'); + const r = node.getBoundingClientRect(); + + if (main.left > r.left) { + node.style.transform = 'translateX(calc(' + (main.left - r.left) + 'px - 50%))'; + } else if (main.right < r.right) { + node.style.transform = 'translateX(calc(' + (main.right - r.right) + 'px - 50%))'; + } + + setTimeout(() => { + node.parentNode.classList.remove('c-tooltip--visible'); + }, delay); +}; diff --git a/templates/default/070-components/UI-framework/MainControls/_ui-component_footer.scss b/templates/default/070-components/UI-framework/MainControls/_ui-component_footer.scss index 2dcdbca46a22..cf4469084b23 100644 --- a/templates/default/070-components/UI-framework/MainControls/_ui-component_footer.scss +++ b/templates/default/070-components/UI-framework/MainControls/_ui-component_footer.scss @@ -18,8 +18,8 @@ footer{ font-size: $il-font-size-small; padding: $il-padding-small-vertical $il-padding-large-horizontal; - .il-footer-content div { - display: inline-block; + .il-footer-content div:not(.c-tooltip) { + display: inline-block; } .il-footer-links { diff --git a/templates/default/delos.css b/templates/default/delos.css index c6a8c5988ad3..ef9f070e78d6 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -6221,7 +6221,7 @@ footer { font-size: 0.75rem; padding: 3px 12px; } -.il-maincontrols-footer .il-footer-content div { +.il-maincontrols-footer .il-footer-content div:not(.c-tooltip) { display: inline-block; } .il-maincontrols-footer .il-footer-links ul { diff --git a/tests/UI/Client/MainControls/permalink.test.js b/tests/UI/Client/MainControls/permalink.test.js new file mode 100644 index 000000000000..d50ffe22d222 --- /dev/null +++ b/tests/UI/Client/MainControls/permalink.test.js @@ -0,0 +1,160 @@ +/** + * 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 { describe, it, beforeEach, afterEach } from 'mocha'; +import { expect } from 'chai'; +import { copyText, showTooltip } from '../../../../src/UI/templates/js/MainControls/src/footer/permalink'; + +const expectOneCall = () => { + const expected = []; + const called = []; + + return { + callOnce: (proc = () => {}) => { + const f = (...args) => { + if (called.includes(f)) { + throw new Error('Called more than once.'); + } + called.push(f); + return proc(...args); + }; + expected.push(f); + + return f; + }, + finish: () => expected.forEach(proc => { + if (!called.includes(proc)) { + throw new Error('Never called.'); + } + }), + }; +}; + +describe('Test permalink copy to clipboard', () => { + const saved = {}; + beforeEach(() => { + saved.window = globalThis.window; + saved.document = globalThis.document; + }); + afterEach(() => { + globalThis.window = saved.window; + globalThis.document = saved.document; + }); + + it('Clipboard API', () => { + let written = null; + const response = {}; + const writeText = s => { + written = s; + return response; + }; + globalThis.window = { navigator: { clipboard: { writeText } } }; + expect(copyText('foo')).to.be.equal(response); + expect(written).to.be.equal('foo'); + }); + + it('Legacy Clipboard API', () => { + const {callOnce, finish} = expectOneCall(); + const node = { remove: callOnce() }; + const range = { + selectNodeContents: callOnce(n => expect(n).to.be.equal(node)) + }; + const selection = { + addRange: callOnce(x => expect(x).to.be.equal(range)), + removeAllRanges: callOnce(), + }; + + globalThis.window = { + navigator: {}, + getSelection: callOnce(() => selection), + }; + + globalThis.document = { + createRange: callOnce(() => range), + + createElement: callOnce(text => { + expect(text).to.be.equal('span'); + return node; + }), + + execCommand: callOnce(s => { + expect(s).to.be.equal('copy'); + return true; + }), + + body: { + appendChild: callOnce(n => { + expect(n).to.be.equal(node); + expect(n.textContent).to.be.equal('foo'); + }), + }, + }; + + return copyText('foo').then(finish); + }); +}); + +describe('Test permanentlink show tooltip', () => { + const saved = {}; + beforeEach(() => { + saved.setTimeout = globalThis.setTimeout; + saved.document = globalThis.document; + }); + afterEach(() => { + globalThis.setTimeout = saved.setTimeout; + globalThis.document = saved.document; + }); + + const testTooltip = (mainRect, nodeRect, expectTransform = null) => () => { + const {callOnce, finish} = expectOneCall(); + let callTimeout = null; + globalThis.document = { + getElementsByTagName: callOnce(tag => { + expect(tag).to.be.equal('main'); + return [ + {getBoundingClientRect: callOnce(() => mainRect)} + ]; + }), + }; + + globalThis.setTimeout = callOnce((proc, delay) => { + callTimeout = proc; + expect(delay).to.be.equal(4321); + }); + + const isTooltipClass = name => expect(name).to.be.equal('c-tooltip--visible'); + const node = { + parentNode: { + classList: { + add: callOnce(isTooltipClass), + remove: callOnce(isTooltipClass), + }, + }, + getBoundingClientRect: callOnce(() => nodeRect), + style: {transform: null}, + }; + showTooltip(node, 4321); + + expect(callTimeout).not.to.be.equal(null); + expect(node.style.transform).to.be.equal(expectTransform); + + callTimeout(); + finish(); + }; + + it('Show tooltip', testTooltip({left: 0, right: 10}, {left: 1, right: 9})); + it('Show tooltip left aligned', testTooltip({left: 5, right: 10}, {left: 3, right: 9}, 'translateX(calc(2px - 50%))')); + it('Show tooltip right aligned', testTooltip({left: 0, right: 7}, {left: 1, right: 9}, 'translateX(calc(-2px - 50%))')); +}); diff --git a/tests/UI/Component/MainControls/FooterTest.php b/tests/UI/Component/MainControls/FooterTest.php index 4582beed36e2..e036f1892c21 100644 --- a/tests/UI/Component/MainControls/FooterTest.php +++ b/tests/UI/Component/MainControls/FooterTest.php @@ -155,9 +155,9 @@ public function listing(): C\Listing\Factory return new I\Listing\Factory(); } - public function link(): C\Link\Factory + public function button(): C\Button\Factory { - return new I\Link\Factory(); + return new I\Button\Factory(); } }; } @@ -228,7 +228,9 @@ public function testRenderingPermUrl($footer): void $expected = <<
-
perma_link +
+ +
footer text