From f390df80c7a8f4625a10c29a7636142971b832d7 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Mon, 6 Jul 2020 15:58:29 -0700 Subject: [PATCH 01/12] make match recursive --- src/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 0d1d2bb2..4010bd8c 100644 --- a/src/index.js +++ b/src/index.js @@ -100,7 +100,11 @@ function matchesSelector(element, selector) { element.webkitMatchesSelector; if (matches) { - return matches.apply(element, [selector]); + if(matches.apply(element, [selector])){ + return true; + }else if(element.parentElement){ + return matchesSelector(element.parentElement,selector) + } } else { log("Unable to match"); return false; From 9c09b132264ff7cfd44873bb976ae08d4e0afaa0 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Mon, 6 Jul 2020 16:05:34 -0700 Subject: [PATCH 02/12] fix link matching --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 4010bd8c..67bd95ab 100644 --- a/src/index.js +++ b/src/index.js @@ -105,6 +105,7 @@ function matchesSelector(element, selector) { }else if(element.parentElement){ return matchesSelector(element.parentElement,selector) } + return false; } else { log("Unable to match"); return false; From 3adad87cad88b78eac915a11f848ce4dc811a60d Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Mon, 6 Jul 2020 16:58:59 -0700 Subject: [PATCH 03/12] ensure matched element is used for event properties --- src/index.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 67bd95ab..51ad5357 100644 --- a/src/index.js +++ b/src/index.js @@ -101,20 +101,24 @@ function matchesSelector(element, selector) { if (matches) { if(matches.apply(element, [selector])){ - return true; + return element; }else if(element.parentElement){ return matchesSelector(element.parentElement,selector) } - return false; + return null; } else { log("Unable to match"); - return false; + return null; } } function onEvent(eventName, selector, callback) { document.addEventListener(eventName, function (e) { - if (matchesSelector(e.target, selector)) { + var matchedElement = matchesSelector(e.target, selector); + if (matchedElement) { + if(matchedElement != e.target){ + e.matchedElement = matchedElement; + } callback(e); } }); @@ -258,7 +262,7 @@ function cleanObject(obj) { } function eventProperties(e) { - let target = e.target; + let target = e.matchedElement || e.target; return cleanObject({ tag: target.tagName.toLowerCase(), id: presence(target.id), From c335a71cdc43de562f5308d328440828446ccd63 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Mon, 6 Jul 2020 17:32:16 -0700 Subject: [PATCH 04/12] include element that was clicked --- src/index.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 51ad5357..b034668c 100644 --- a/src/index.js +++ b/src/index.js @@ -261,17 +261,20 @@ function cleanObject(obj) { return obj; } -function eventProperties(e) { - let target = e.matchedElement || e.target; +function elementProperties(element){ return cleanObject({ - tag: target.tagName.toLowerCase(), - id: presence(target.id), - "class": presence(target.className), + tag: element.tagName.toLowerCase(), + id: presence(element.id), + "class": presence(element.className), page: page(), - section: getClosestSection(target) + section: getClosestSection(element) }); } +function eventProperties(e) { + return elementProperties(e.matchedElement || e.target); +} + function getClosestSection(element) { for ( ; element && element !== document; element = element.parentNode) { if (element.hasAttribute('data-section')) { @@ -428,10 +431,13 @@ ahoy.trackView = function (additionalProperties) { ahoy.trackClicks = function () { onEvent("click", "a, button, input[type=submit]", function (e) { - let target = e.target; + let target = e.matchedElement || e.target; let properties = eventProperties(e); properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); properties.href = target.href; + if(e.matchedElement){ + properties.clickedElement = elementProperties(e.target); + } ahoy.track("$click", properties); }); }; From 08dfca694540a8fe7b2f35e232edbfddd87a0d45 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 17:00:06 -0700 Subject: [PATCH 05/12] use this instead of monkey patching the Event --- src/index.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index b034668c..f01fd0c8 100644 --- a/src/index.js +++ b/src/index.js @@ -116,10 +116,7 @@ function onEvent(eventName, selector, callback) { document.addEventListener(eventName, function (e) { var matchedElement = matchesSelector(e.target, selector); if (matchedElement) { - if(matchedElement != e.target){ - e.matchedElement = matchedElement; - } - callback(e); + callback.call(matchedElement, e); } }); } @@ -271,10 +268,6 @@ function elementProperties(element){ }); } -function eventProperties(e) { - return elementProperties(e.matchedElement || e.target); -} - function getClosestSection(element) { for ( ; element && element !== document; element = element.parentNode) { if (element.hasAttribute('data-section')) { @@ -430,12 +423,15 @@ ahoy.trackView = function (additionalProperties) { }; ahoy.trackClicks = function () { + //

Foo

 + // e.target on Chrome (and likely every other browser) is not a#link tag but p#text + // onEvent will callback with this = a#text and e.target = p#text onEvent("click", "a, button, input[type=submit]", function (e) { - let target = e.matchedElement || e.target; - let properties = eventProperties(e); + let target = this; + let properties = elementProperties(this); properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); properties.href = target.href; - if(e.matchedElement){ + if(e.target != this){ properties.clickedElement = elementProperties(e.target); } ahoy.track("$click", properties); @@ -444,14 +440,14 @@ ahoy.trackClicks = function () { ahoy.trackSubmits = function () { onEvent("submit", "form", function (e) { - let properties = eventProperties(e); + let properties = elementProperties(e.target); ahoy.track("$submit", properties); }); }; ahoy.trackChanges = function () { onEvent("change", "input, textarea, select", function (e) { - let properties = eventProperties(e); + let properties = elementProperties(e.target); ahoy.track("$change", properties); }); }; From 714a4888ee97fbf8ceeeaa68c0095e22d3637ff9 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 17:25:38 -0700 Subject: [PATCH 06/12] fix spacing --- src/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index f01fd0c8..62e61509 100644 --- a/src/index.js +++ b/src/index.js @@ -100,9 +100,9 @@ function matchesSelector(element, selector) { element.webkitMatchesSelector; if (matches) { - if(matches.apply(element, [selector])){ + if (matches.apply(element, [selector])) { return element; - }else if(element.parentElement){ + } else if(element.parentElement) { return matchesSelector(element.parentElement,selector) } return null; @@ -423,7 +423,7 @@ ahoy.trackView = function (additionalProperties) { }; ahoy.trackClicks = function () { - //

Foo

 + // Example:

Foo

 // e.target on Chrome (and likely every other browser) is not a#link tag but p#text // onEvent will callback with this = a#text and e.target = p#text onEvent("click", "a, button, input[type=submit]", function (e) { @@ -431,9 +431,6 @@ ahoy.trackClicks = function () { let properties = elementProperties(this); properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); properties.href = target.href; - if(e.target != this){ - properties.clickedElement = elementProperties(e.target); - } ahoy.track("$click", properties); }); }; From 572794a220c7d53a1bb88eb25fe02aa4f191c944 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 17:46:26 -0700 Subject: [PATCH 07/12] rename elementProperties to eventProperties, pass element as this --- src/index.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index 62e61509..c543600c 100644 --- a/src/index.js +++ b/src/index.js @@ -258,13 +258,13 @@ function cleanObject(obj) { return obj; } -function elementProperties(element){ +function eventProperties(e){ return cleanObject({ - tag: element.tagName.toLowerCase(), - id: presence(element.id), - "class": presence(element.className), + tag: this.tagName.toLowerCase(), + id: presence(this.id), + "class": presence(this.className), page: page(), - section: getClosestSection(element) + section: getClosestSection(this) }); } @@ -427,24 +427,23 @@ ahoy.trackClicks = function () { // e.target on Chrome (and likely every other browser) is not a#link tag but p#text // onEvent will callback with this = a#text and e.target = p#text onEvent("click", "a, button, input[type=submit]", function (e) { - let target = this; - let properties = elementProperties(this); - properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); - properties.href = target.href; + let properties = eventProperties.call(this,e); + properties.text = properties.tag == "input" ? this.value : (this.textContent || this.innerText || this.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); + properties.href = this.href; ahoy.track("$click", properties); }); }; ahoy.trackSubmits = function () { onEvent("submit", "form", function (e) { - let properties = elementProperties(e.target); + let properties = eventProperties.call(this,e); ahoy.track("$submit", properties); }); }; ahoy.trackChanges = function () { onEvent("change", "input, textarea, select", function (e) { - let properties = elementProperties(e.target); + let properties = eventProperties.call(this, e); ahoy.track("$change", properties); }); }; From 63b607597a9e7d804e2e7c2ed2e401eb5e41e9a5 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 17:49:31 -0700 Subject: [PATCH 08/12] rename elementProperties to eventProperties, pass element as this --- src/index.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index c543600c..f78cb085 100644 --- a/src/index.js +++ b/src/index.js @@ -258,13 +258,14 @@ function cleanObject(obj) { return obj; } -function eventProperties(e){ +function eventProperties(event){ + let target = this; return cleanObject({ - tag: this.tagName.toLowerCase(), - id: presence(this.id), - "class": presence(this.className), + tag: target.tagName.toLowerCase(), + id: presence(target.id), + "class": presence(target.className), page: page(), - section: getClosestSection(this) + section: getClosestSection(target) }); } @@ -427,23 +428,26 @@ ahoy.trackClicks = function () { // e.target on Chrome (and likely every other browser) is not a#link tag but p#text // onEvent will callback with this = a#text and e.target = p#text onEvent("click", "a, button, input[type=submit]", function (e) { - let properties = eventProperties.call(this,e); - properties.text = properties.tag == "input" ? this.value : (this.textContent || this.innerText || this.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); - properties.href = this.href; + let target = this; + let properties = eventProperties.call(target,e); + properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); + properties.href = target.href; ahoy.track("$click", properties); }); }; ahoy.trackSubmits = function () { onEvent("submit", "form", function (e) { - let properties = eventProperties.call(this,e); + let target = this; + let properties = eventProperties.call(target,e); ahoy.track("$submit", properties); }); }; ahoy.trackChanges = function () { onEvent("change", "input, textarea, select", function (e) { - let properties = eventProperties.call(this, e); + let target = this; + let properties = eventProperties.call(target, e); ahoy.track("$change", properties); }); }; From a511e5e6f0c2e4cb890715ec0025a3b44de8024a Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 18:07:57 -0700 Subject: [PATCH 09/12] remove extraneous target = this, fix spacing --- src/index.js | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index f78cb085..674a90a3 100644 --- a/src/index.js +++ b/src/index.js @@ -102,8 +102,8 @@ function matchesSelector(element, selector) { if (matches) { if (matches.apply(element, [selector])) { return element; - } else if(element.parentElement) { - return matchesSelector(element.parentElement,selector) + } else if (element.parentElement) { + return matchesSelector(element.parentElement, selector) } return null; } else { @@ -259,13 +259,12 @@ function cleanObject(obj) { } function eventProperties(event){ - let target = this; return cleanObject({ - tag: target.tagName.toLowerCase(), - id: presence(target.id), - "class": presence(target.className), + tag: this.tagName.toLowerCase(), + id: presence(this.id), + "class": presence(this.className), page: page(), - section: getClosestSection(target) + section: getClosestSection(this) }); } @@ -428,26 +427,23 @@ ahoy.trackClicks = function () { // e.target on Chrome (and likely every other browser) is not a#link tag but p#text // onEvent will callback with this = a#text and e.target = p#text onEvent("click", "a, button, input[type=submit]", function (e) { - let target = this; - let properties = eventProperties.call(target,e); - properties.text = properties.tag == "input" ? target.value : (target.textContent || target.innerText || target.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); - properties.href = target.href; + let properties = eventProperties.call(this, e); + properties.text = properties.tag == "input" ? this.value : (this.textContent || this.innerText || this.innerHTML).replace(/[\s\r\n]+/g, " ").trim(); + properties.href = this.href; ahoy.track("$click", properties); }); }; ahoy.trackSubmits = function () { onEvent("submit", "form", function (e) { - let target = this; - let properties = eventProperties.call(target,e); + let properties = eventProperties.call(this, e); ahoy.track("$submit", properties); }); }; ahoy.trackChanges = function () { onEvent("change", "input, textarea, select", function (e) { - let target = this; - let properties = eventProperties.call(target, e); + let properties = eventProperties.call(this, e); ahoy.track("$change", properties); }); }; From 68f6b123c7c810de4cfdcfa63cdb87948eda8966 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 18:08:57 -0700 Subject: [PATCH 10/12] change var to let --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 674a90a3..f493290f 100644 --- a/src/index.js +++ b/src/index.js @@ -114,7 +114,7 @@ function matchesSelector(element, selector) { function onEvent(eventName, selector, callback) { document.addEventListener(eventName, function (e) { - var matchedElement = matchesSelector(e.target, selector); + let matchedElement = matchesSelector(e.target, selector); if (matchedElement) { callback.call(matchedElement, e); } From b1242948a5370d6214ba609f86359a86065bd4cc Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 18:11:29 -0700 Subject: [PATCH 11/12] fix space --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index f493290f..b3c4d8a0 100644 --- a/src/index.js +++ b/src/index.js @@ -258,7 +258,7 @@ function cleanObject(obj) { return obj; } -function eventProperties(event){ +function eventProperties(event) { return cleanObject({ tag: this.tagName.toLowerCase(), id: presence(this.id), From 33baf69fe02581de896cf64bf6a5d4f65386b8a5 Mon Sep 17 00:00:00 2001 From: Fred Leitz Date: Tue, 6 Oct 2020 18:12:08 -0700 Subject: [PATCH 12/12] change event to e --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index b3c4d8a0..d6884b53 100644 --- a/src/index.js +++ b/src/index.js @@ -258,7 +258,7 @@ function cleanObject(obj) { return obj; } -function eventProperties(event) { +function eventProperties(e) { return cleanObject({ tag: this.tagName.toLowerCase(), id: presence(this.id),