From fec6bd8e4dd9cc44213b13c6cfca7ee069e30a9a Mon Sep 17 00:00:00 2001 From: Tanner Date: Mon, 28 Jun 2021 15:52:45 -0700 Subject: [PATCH 1/5] If target is in between example-choices, return to avoid errors with findParentChoiceElem --- editor/js/editor-libs/events.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/editor/js/editor-libs/events.js b/editor/js/editor-libs/events.js index c634d3572..7d2f4279b 100644 --- a/editor/js/editor-libs/events.js +++ b/editor/js/editor-libs/events.js @@ -24,6 +24,14 @@ function addCSSEditorEventListeners(exampleChoiceList) { exampleChoiceList.addEventListener('click', function(event) { var target = event.target; + var isClickedBetween = target.getAttribute('id') === 'example-choice-list'; + + // if original target is in between or outside of `example-choice` + // elements, ie the parent
element + // then bail + if (isClickedBetween) { + return; + } // if the original target is not an `example-choice` element if (!target.classList.contains('example-choice')) { From 876e1b64c5faad377b2e635d8ba5e5868cd17098 Mon Sep 17 00:00:00 2001 From: Tanner Date: Mon, 12 Jul 2021 16:04:24 -0700 Subject: [PATCH 2/5] Refactor .example-choice click implementation --- editor/js/editor-libs/events.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/editor/js/editor-libs/events.js b/editor/js/editor-libs/events.js index 7d2f4279b..be0e583ca 100644 --- a/editor/js/editor-libs/events.js +++ b/editor/js/editor-libs/events.js @@ -25,6 +25,7 @@ function addCSSEditorEventListeners(exampleChoiceList) { exampleChoiceList.addEventListener('click', function(event) { var target = event.target; var isClickedBetween = target.getAttribute('id') === 'example-choice-list'; + var exampleChoices = exampleChoiceList.querySelectorAll('.example-choice'); // if original target is in between or outside of `example-choice` // elements, ie the parent
element @@ -33,22 +34,9 @@ function addCSSEditorEventListeners(exampleChoiceList) { return; } - // if the original target is not an `example-choice` element - if (!target.classList.contains('example-choice')) { - // find this element's `example-choice` parent - target = mceUtils.findParentChoiceElem(target); - } - - if (target.classList.contains('copy')) { - mceAnalytics.trackEvent({ - category: 'Interactive Example - CSS', - action: 'Copy to clipboard clicked', - label: 'Interaction Events' - }); - } - - // and pass it on to `onChoose` - module.exports.onChoose(target); + Array.from(exampleChoices).forEach((choice) => { + choice.addEventListener("click", handleChoiceEvent); + }); }); } @@ -160,6 +148,18 @@ function handlePasteEvents(event) { Prism.highlightElement(parentCodeElem); } +function handleChoiceEvent() { + if (this.classList.contains('copy')) { + mceAnalytics.trackEvent({ + category: 'Interactive Example - CSS', + action: 'Copy to clipboard clicked', + label: 'Interaction Events', + }); + } + + module.exports.onChoose(this); +} + module.exports = { /** * Called when a new `example-choice` has been selected. From 5b16f2423ac29ef7e33226b8f806f62b87cbe546 Mon Sep 17 00:00:00 2001 From: Tanner Date: Mon, 12 Jul 2021 16:32:54 -0700 Subject: [PATCH 3/5] Replace double quotes with single quotes --- editor/js/editor-libs/events.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/js/editor-libs/events.js b/editor/js/editor-libs/events.js index be0e583ca..042ad6bf5 100644 --- a/editor/js/editor-libs/events.js +++ b/editor/js/editor-libs/events.js @@ -35,7 +35,7 @@ function addCSSEditorEventListeners(exampleChoiceList) { } Array.from(exampleChoices).forEach((choice) => { - choice.addEventListener("click", handleChoiceEvent); + choice.addEventListener('click', handleChoiceEvent); }); }); } @@ -156,7 +156,7 @@ function handleChoiceEvent() { label: 'Interaction Events', }); } - + module.exports.onChoose(this); } From 458049fef523196920d5d43236f93ea5e82ae215 Mon Sep 17 00:00:00 2001 From: Tanner Date: Wed, 14 Jul 2021 10:18:18 -0700 Subject: [PATCH 4/5] Move logic outside of parent click event --- editor/js/editor-libs/events.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/editor/js/editor-libs/events.js b/editor/js/editor-libs/events.js index 042ad6bf5..242c6c86a 100644 --- a/editor/js/editor-libs/events.js +++ b/editor/js/editor-libs/events.js @@ -22,21 +22,9 @@ function addCSSEditorEventListeners(exampleChoiceList) { ); }); - exampleChoiceList.addEventListener('click', function(event) { - var target = event.target; - var isClickedBetween = target.getAttribute('id') === 'example-choice-list'; - var exampleChoices = exampleChoiceList.querySelectorAll('.example-choice'); - - // if original target is in between or outside of `example-choice` - // elements, ie the parent
element - // then bail - if (isClickedBetween) { - return; - } - - Array.from(exampleChoices).forEach((choice) => { - choice.addEventListener('click', handleChoiceEvent); - }); + var exampleChoices = exampleChoiceList.querySelectorAll('.example-choice'); + Array.from(exampleChoices).forEach((choice) => { + choice.addEventListener('click', handleChoiceEvent); }); } From 1f1706c867e3ae9b035526d687e4141a68b765dc Mon Sep 17 00:00:00 2001 From: Tanner Date: Wed, 14 Jul 2021 12:22:30 -0700 Subject: [PATCH 5/5] Remove unused reference to mceUtils --- editor/js/editor-libs/events.js | 1 - 1 file changed, 1 deletion(-) diff --git a/editor/js/editor-libs/events.js b/editor/js/editor-libs/events.js index 242c6c86a..b82731430 100644 --- a/editor/js/editor-libs/events.js +++ b/editor/js/editor-libs/events.js @@ -1,7 +1,6 @@ var clippy = require('./clippy'); var cssEditorUtils = require('./css-editor-utils'); var mceAnalytics = require('./analytics'); -var mceUtils = require('./mce-utils'); /** * Adds listeners for events from the CSS live examples