From c82ecc43fddb2a4bafe178397d65422ab6e9a4d4 Mon Sep 17 00:00:00 2001 From: Sean King Date: Thu, 11 May 2017 18:37:24 +0200 Subject: [PATCH 1/3] cleanup protectEditing and ignore shadow roots. Fixes #17 --- simpla-admin.html | 2 +- src/utils/pointerEvents.js | 62 +++++++++++++++++--------------------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/simpla-admin.html b/simpla-admin.html index 3d6f8ad..21330bd 100644 --- a/simpla-admin.html +++ b/simpla-admin.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/utils/pointerEvents.js b/src/utils/pointerEvents.js index 2a73f03..06a0dd1 100644 --- a/src/utils/pointerEvents.js +++ b/src/utils/pointerEvents.js @@ -1,4 +1,3 @@ -const ADMIN_ELEMENTS = [ 'simpla-admin', 'simpla-login', 'simpla-admin-controls', 'simpla-notify' ]; const EVENTS_TO_BLOCK = [ 'click', 'ontouchend' ]; let observer, @@ -55,6 +54,10 @@ function stopAndPreventUnimportant(event) { event.stopPropagation(); } +function elementsIn(list) { + return Array.prototype.filter.call(list, node => node.nodeType === 1); +} + /** * Check if given element name is Simpla name * @param {string} name Name to check @@ -71,47 +74,34 @@ function isSimplaName(name) { * @param {Node} node Node to check * @return {Boolean} True if node is a Simpla Element */ -function isSimplaElement(node) { - if (isSimplaName(node.localName)) { +function isSimplaElement(element) { + if (isSimplaName(element.localName)) { return true; } - return node.getAttribute && isSimplaName(node.getAttribute('is')); + return isSimplaName(element.getAttribute('is')); } /** - * Checks if the given node is an editable element. Editable means the element - * is a Simpla Element and it is not a special ignored element e.g. simpla-admin - * @param {Node} node Node to check if it's an editable element - * @return {Boolean} True if editable element, false otherwise - */ -function isEditableElement(node) { - const ignored = (name) => ADMIN_ELEMENTS.includes(name), - isEditableName = (name) => isSimplaName(name) && !ignored(name); - - if (isEditableName(node.localName)) { - return true; - } - - return isEditableName(node.getAttribute && node.getAttribute('is')); -} - -/** - * Get all editable elements in the given list. + * Get all editable elements in the given list * @param {(NodeList|Node[])} list List of nodes to check * @return {HTMLElement[]} Array of editable elements */ -function editableElementsIn(list) { - return Array.prototype.filter.call(list, isEditableElement); +function ignoredElementsIn(elements) { + const shouldIgnore = element => isSimplaElement(element) || + !document.querySelector('simpla-admin').contains(element) || + !element.shadowRoot === root; + + return elements.filter(shouldIgnore); } /** - * Get all simpla elements in the given list. + * Get all simpla elements in the given list * @param {(NodeList|Node[])} list List of nodes to check * @return {HTMLElement[]} Array of simpla elements */ -function simplaElementsIn(list) { - return Array.prototype.filter.call(list, isSimplaElement); +function simplaElementsIn(elements) { + return elements.filter(isSimplaElement); } /** @@ -119,8 +109,8 @@ function simplaElementsIn(list) { * @param {(NodeList|Node[])} list NodeList or Array of nodes to check * @return {HTMLElement[]} Array of elements that have click listeners blocked */ -function blockedElementsIn(list) { - return Array.prototype.filter.call(list, element => isolatedElements.has(element)); +function blockedElementsIn(elements) { + return elements.filter(element => isolatedElements.has(element)); } /** @@ -193,13 +183,16 @@ function restoreClicksAndResetPointer(element) { */ observer = new MutationObserver((mutations) => { mutations.forEach(mutation => { - editableElementsIn(mutation.addedNodes) + const addedElements = elementsIn(mutation.addedNodes), + removedElemenets = elementsIn(mutation.removedNodes); + + ignoredElementsIn(addedElements) .forEach(cancelClicksAndAllowPointer); - simplaElementsIn(mutation.addedNodes) + simplaElementsIn(addedElements) .forEach(enablePointerEventsOn); - blockedElementsIn(mutation.removedNodes) + blockedElementsIn(removedElemenets) .forEach(restoreClicksAndResetPointer); }); }) @@ -220,8 +213,9 @@ export default { * @return {undefined} */ disable() { - const allElements = document.querySelectorAll('*'); - editableElementsIn(allElements) + const allElements = elementsIn(document.querySelectorAll('*')); + + ignoredElementsIn(allElements) .forEach(cancelClicksAndAllowPointer); simplaElementsIn(allElements) From fe5795fe96e8e767f0c3bdd7988686bbea08781c Mon Sep 17 00:00:00 2001 From: Sean King Date: Thu, 11 May 2017 18:42:40 +0200 Subject: [PATCH 2/3] update pointerEvents function comments --- simpla-admin.html | 2 +- src/utils/pointerEvents.js | 27 ++++++++++++++++----------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/simpla-admin.html b/simpla-admin.html index 21330bd..d411e79 100644 --- a/simpla-admin.html +++ b/simpla-admin.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/utils/pointerEvents.js b/src/utils/pointerEvents.js index 06a0dd1..e324a59 100644 --- a/src/utils/pointerEvents.js +++ b/src/utils/pointerEvents.js @@ -54,10 +54,6 @@ function stopAndPreventUnimportant(event) { event.stopPropagation(); } -function elementsIn(list) { - return Array.prototype.filter.call(list, node => node.nodeType === 1); -} - /** * Check if given element name is Simpla name * @param {string} name Name to check @@ -69,9 +65,18 @@ function isSimplaName(name) { return name && prefixed(name); } +/** + * Returns an array of elements in a nodeList + * @param {NodeList} list Nodelist to filter + * @return {HTMLElement[]} Array of element nodes + */ +function elementsIn(list) { + return Array.prototype.filter.call(list, node => node.nodeType === 1); +} + /** * Check if the given element is a Simpla Element - * @param {Node} node Node to check + * @param {HTMLElement} element Element to check * @return {Boolean} True if node is a Simpla Element */ function isSimplaElement(element) { @@ -84,8 +89,8 @@ function isSimplaElement(element) { /** * Get all editable elements in the given list - * @param {(NodeList|Node[])} list List of nodes to check - * @return {HTMLElement[]} Array of editable elements + * @param {Array} elements Array of elements to check + * @return {HTMLElement[]} Array of editable elements */ function ignoredElementsIn(elements) { const shouldIgnore = element => isSimplaElement(element) || @@ -97,8 +102,8 @@ function ignoredElementsIn(elements) { /** * Get all simpla elements in the given list - * @param {(NodeList|Node[])} list List of nodes to check - * @return {HTMLElement[]} Array of simpla elements + * @param {Array} elements Array of elements to check + * @return {HTMLElement[]} Array of simpla elements */ function simplaElementsIn(elements) { return elements.filter(isSimplaElement); @@ -106,8 +111,8 @@ function simplaElementsIn(elements) { /** * Gets all elements that are currently stored and have their click events blocked - * @param {(NodeList|Node[])} list NodeList or Array of nodes to check - * @return {HTMLElement[]} Array of elements that have click listeners blocked + * @param {Array} elements Array of elements to check + * @return {HTMLElement[]} Array of elements that have click listeners blocked */ function blockedElementsIn(elements) { return elements.filter(element => isolatedElements.has(element)); From 627208737548ab370a51ed87dcb5ac809ea26285 Mon Sep 17 00:00:00 2001 From: Sean King Date: Fri, 12 May 2017 11:15:50 +0200 Subject: [PATCH 3/3] patch ignored elements check --- simpla-admin.html | 2 +- src/utils/pointerEvents.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/simpla-admin.html b/simpla-admin.html index d411e79..92af572 100644 --- a/simpla-admin.html +++ b/simpla-admin.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/utils/pointerEvents.js b/src/utils/pointerEvents.js index e324a59..ade7e43 100644 --- a/src/utils/pointerEvents.js +++ b/src/utils/pointerEvents.js @@ -94,8 +94,8 @@ function isSimplaElement(element) { */ function ignoredElementsIn(elements) { const shouldIgnore = element => isSimplaElement(element) || - !document.querySelector('simpla-admin').contains(element) || - !element.shadowRoot === root; + window.SimplaAdmin.contains(element) || + !!element.shadowRoot; return elements.filter(shouldIgnore); }