-
Notifications
You must be signed in to change notification settings - Fork 344
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Footer: Copy permalink to clipboard (#7498)
* Footer: Copy permalink to clipboard * Fix cut off permanent tooltip
- Loading branch information
Showing
12 changed files
with
300 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(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<n.right&&(e.style.transform="translateX(calc("+(o.right-n.right)+"px - 50%))"),setTimeout((()=>{e.parentNode.classList.remove("c-tooltip--visible")}),t)}});o.default.Footer={permalink:n}}(il); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%))')); | ||
| }); |
Oops, something went wrong.