From aad63c316a864c89382693f37ea4d7f2dbaf93d2 Mon Sep 17 00:00:00 2001 From: Stephan Max Date: Sat, 30 Jun 2018 01:57:52 +0200 Subject: [PATCH 1/3] External links inside shadow dom open in new tab --- js/editor.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/js/editor.js b/js/editor.js index 0ab440d33..e781d1ab7 100644 --- a/js/editor.js +++ b/js/editor.js @@ -54,6 +54,20 @@ } } + /** + * Interrupts the default click event on external links inside + * the shadow dom and opens them in a new tab instead + * @param {Array} externalLinks - all external links inside the shadow dom + */ + function openLinksInNewTab(externalLinks) { + externalLinks.forEach(function(externalLink) { + externalLink.addEventListener('click', function(event) { + event.preventDefault(); + window.open(externalLink.href); + }); + }); + } + /** * Set or update the CSS and HTML in the output pane. * @param {Object} content - The content of the template element. @@ -80,6 +94,7 @@ shadow.appendChild(document.importNode(content, true)); setOutputHeight(shadow.querySelector('div')); + openLinksInNewTab(shadow.querySelectorAll('a[href^="http"]')); } /** From 8e976d00f9335f6932b7c8da577816fcbd977e00 Mon Sep 17 00:00:00 2001 From: Stephan Max Date: Sat, 30 Jun 2018 02:12:45 +0200 Subject: [PATCH 2/3] Relative links inside the shadow dom scroll the targeted anchor into view --- js/editor.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/js/editor.js b/js/editor.js index e781d1ab7..7e80132a2 100644 --- a/js/editor.js +++ b/js/editor.js @@ -68,6 +68,21 @@ }); } + /** + * Interrupts the default click event on relative links inside + * the shadow dom and scrolls to the targeted anchor + * @param {Object} shadow - the shadow dom root + * @param {Array} relativeLinks - all relative links inside the shadow dom + */ + function scrollToAnchors(shadow, relativeLinks) { + relativeLinks.forEach(function(relativeLink) { + relativeLink.addEventListener('click', function(event) { + event.preventDefault(); + shadow.querySelector(relativeLink.hash).scrollIntoView(); + }); + }); + } + /** * Set or update the CSS and HTML in the output pane. * @param {Object} content - The content of the template element. @@ -95,6 +110,7 @@ shadow.appendChild(document.importNode(content, true)); setOutputHeight(shadow.querySelector('div')); openLinksInNewTab(shadow.querySelectorAll('a[href^="http"]')); + scrollToAnchors(shadow, shadow.querySelectorAll('a[href^="#"]')); } /** From 296b9ac09d5cf9fa50c6f7e032f77a3d86102922 Mon Sep 17 00:00:00 2001 From: Stephan Max Date: Wed, 4 Jul 2018 12:57:26 +0200 Subject: [PATCH 3/3] Move helper functions to utilities module --- js/editor-libs/mce-utils.js | 27 +++++++++++++++++++++++++++ js/editor.js | 33 ++------------------------------- 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/js/editor-libs/mce-utils.js b/js/editor-libs/mce-utils.js index 083e35da9..c39157d22 100644 --- a/js/editor-libs/mce-utils.js +++ b/js/editor-libs/mce-utils.js @@ -37,6 +37,19 @@ module.exports = { return tmpElem.style[property] !== undefined; }, + /** + * Interrupts the default click event on external links inside + * the shadow dom and opens them in a new tab instead + * @param {Array} externalLinks - all external links inside the shadow dom + */ + openLinksInNewTab: function(externalLinks) { + externalLinks.forEach(function(externalLink) { + externalLink.addEventListener('click', function(event) { + event.preventDefault(); + window.open(externalLink.href); + }); + }); + }, /** * Posts a name to set as a mark to Kuma for * processing and beaconing to GA @@ -45,6 +58,20 @@ module.exports = { postToKuma: function(perf) { window.parent.postMessage(perf, 'https://developer.mozilla.org'); }, + /** + * Interrupts the default click event on relative links inside + * the shadow dom and scrolls to the targeted anchor + * @param {Object} shadow - the shadow dom root + * @param {Array} relativeLinks - all relative links inside the shadow dom + */ + scrollToAnchors: function(shadow, relativeLinks) { + relativeLinks.forEach(function(relativeLink) { + relativeLink.addEventListener('click', function(event) { + event.preventDefault(); + shadow.querySelector(relativeLink.hash).scrollIntoView(); + }); + }); + }, /** * Hides the default example and shows the custom block * @param {object} customBlock - The HTML section to show diff --git a/js/editor.js b/js/editor.js index 7e80132a2..87ebdeff1 100644 --- a/js/editor.js +++ b/js/editor.js @@ -54,35 +54,6 @@ } } - /** - * Interrupts the default click event on external links inside - * the shadow dom and opens them in a new tab instead - * @param {Array} externalLinks - all external links inside the shadow dom - */ - function openLinksInNewTab(externalLinks) { - externalLinks.forEach(function(externalLink) { - externalLink.addEventListener('click', function(event) { - event.preventDefault(); - window.open(externalLink.href); - }); - }); - } - - /** - * Interrupts the default click event on relative links inside - * the shadow dom and scrolls to the targeted anchor - * @param {Object} shadow - the shadow dom root - * @param {Array} relativeLinks - all relative links inside the shadow dom - */ - function scrollToAnchors(shadow, relativeLinks) { - relativeLinks.forEach(function(relativeLink) { - relativeLink.addEventListener('click', function(event) { - event.preventDefault(); - shadow.querySelector(relativeLink.hash).scrollIntoView(); - }); - }); - } - /** * Set or update the CSS and HTML in the output pane. * @param {Object} content - The content of the template element. @@ -109,8 +80,8 @@ shadow.appendChild(document.importNode(content, true)); setOutputHeight(shadow.querySelector('div')); - openLinksInNewTab(shadow.querySelectorAll('a[href^="http"]')); - scrollToAnchors(shadow, shadow.querySelectorAll('a[href^="#"]')); + mceUtils.openLinksInNewTab(shadow.querySelectorAll('a[href^="http"]')); + mceUtils.scrollToAnchors(shadow, shadow.querySelectorAll('a[href^="#"]')); } /**