From 5d0cd3c80b14e009808768a95b34dab87370c267 Mon Sep 17 00:00:00 2001 From: jiroghianni Date: Thu, 9 Jan 2025 15:31:14 +0100 Subject: [PATCH] [#2870] Add dynamic HTMX code, works partially --- .../siteimprove/dynamic-tracking.js | 36 ++-- .../js/components/siteimprove/tracking.js | 169 ++++++++++++------ src/open_inwoner/scss/views/_view.scss | 24 ++- 3 files changed, 157 insertions(+), 72 deletions(-) diff --git a/src/open_inwoner/js/components/siteimprove/dynamic-tracking.js b/src/open_inwoner/js/components/siteimprove/dynamic-tracking.js index f9fe66a937..a609012aff 100644 --- a/src/open_inwoner/js/components/siteimprove/dynamic-tracking.js +++ b/src/open_inwoner/js/components/siteimprove/dynamic-tracking.js @@ -1,24 +1,24 @@ -// Mock _sz object for testing -if (typeof _sz === 'undefined') { - var _sz = { - push: function (data) { - try { - console.log('Event pushed to _sz:', data) - } catch (error) { - console.error('Error occurred while pushing event data:', error) - } - }, - } -} +// // Mock _sz object for testing +// if (typeof _sz === 'undefined') { +// var _sz = { +// push: function (data) { +// try { +// console.log('dynamicfile Event pushed to _sz:', data) +// } catch (error) { +// console.error('Error occurred while pushing event data:', error) +// } +// }, +// } +// } // // document.addEventListener('DOMContentLoaded', function () { // console.log('DOM fully loaded and parsed. Initializing tracker...') // // // Stable parent element for checking existence -// const parentSelector = '#cases-detail-content' +// const casesParentSelector = '#cases-detail-content' // // // Retry interval in milliseconds -// const retryInterval = 20 +// const casesRetryInterval = 20 // // // Function to track delete links and spans // function trackDeleteEvents() { @@ -87,25 +87,25 @@ if (typeof _sz === 'undefined') { // function startPolling() { // console.log('Starting polling for #form_upload...') // const pollingInterval = setInterval(() => { -// const parent = document.querySelector(parentSelector) +// const parent = document.querySelector(casesParentSelector) // // if (!parent) { // console.log( -// `#cases-detail-content (${parentSelector}) not found. Stopping polling.` +// `#cases-detail-content (${casesParentSelector}) not found. Stopping polling.` // ) // clearInterval(pollingInterval) // return // } // // console.log( -// `#cases-detail-content (${parentSelector}) found. Checking components...` +// `#cases-detail-content (${casesParentSelector}) found. Checking components...` // ) // // if (trackDeleteEvents()) { // console.log('Required elements found and tracked. Stopping polling.') // clearInterval(pollingInterval) // } -// }, retryInterval) +// }, casesRetryInterval) // } // // // Start the polling process diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js index ddb7ca9a8d..b89bcc9b9f 100644 --- a/src/open_inwoner/js/components/siteimprove/tracking.js +++ b/src/open_inwoner/js/components/siteimprove/tracking.js @@ -348,12 +348,6 @@ let isEventTrackerInitialized = false ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button span': ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], - //DYNAMIC 1 - // '#document-upload > div.form__control.file-input > div.file-list > ul > li > aside > div > div > a': - // ['event', 'Aanvraag detail', 'Click', 'Verwijder document'], - // '#document-upload > div.form__control.file-input > div.file-list > ul > li > aside > div > div > a > span': - // ['event', 'Aanvraag detail', 'Click', 'Verwijder document'], - // END DYN 1 // Detail case toggle statuses '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button': ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], @@ -417,6 +411,18 @@ let isEventTrackerInitialized = false '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .material-icons': ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], // Filters in Cases list + '#filterBar .filter-bar__mobile-button > button': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], + '#filterBar .filter-bar__mobile-button > button span': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], '.filter-bar #selectButton': [ 'event', 'Mijn aanvragen filters', @@ -503,57 +509,117 @@ let isEventTrackerInitialized = false new EventTracker(selectorMap) } - // function trackDynamicElements() { - // const fileList = document.querySelector('#document-upload') - // - // if (fileList) { - // const fileObserver = new MutationObserver(() => { - // const deleteButton = fileList.querySelector( - // 'div.form__control.file-input > div.file-list > ul > li > aside > div > div > a' - // ) - // const deleteButtonText = fileList.querySelector( - // 'div.form__control.file-input > div.file-list > ul > li > aside > div > div > a > span' - // ) - // - // if (deleteButton) { - // deleteButton.addEventListener('click', () => { - // const eventData = [ - // 'event', - // 'Aanvraag detail', - // 'Click', - // 'Verwijder document', - // ] - // _sz.push(eventData) - // console.log('Tracked event:', eventData) - // }) - // } - // - // if (deleteButtonText) { - // deleteButtonText.addEventListener('click', () => { - // const eventData = [ - // 'event', - // 'Aanvraag detail', - // 'Click', - // 'Verwijder document', - // ] - // _sz.push(eventData) - // console.log('Tracked event:', eventData) - // }) - // } - // }) - // - // fileObserver.observe(fileList, { childList: true, subtree: true }) - // } else { - // console.warn('File list container not found. Dynamic tracking skipped.') - // } - // } + document.addEventListener('DOMContentLoaded', function () { + console.log( + 'Dynamic HTMX DOM fully loaded and parsed. Initializing tracker...' + ) + + // Stable parent element for checking existence + const casesParentSelector = '#cases-detail-content' + + // Retry interval in milliseconds + const casesRetryInterval = 20 + + // Function to track delete links and spans + function trackDeleteEvents() { + // console.log('HTMX Checking for #form_upload...') + const formUpload = document.querySelector('#form_upload') + + if (!formUpload) { + // Repoll when #form_upload not found. + return false + } + + // console.log('HTMX #form_upload detected. Checking for .file-list...') + const fileList = formUpload.querySelector( + '.file-list .file-list__list .file-list__list-item' + ) + + if (!fileList) { + // Retry when file-list structure not found within #form_upload. + return false + } + + // Add event listener for 'Verwijder document' links + const links = formUpload.querySelectorAll( + '.file-list .file-list__list .file-list__list-item a' + ) + if (links.length) { + console.log( + `Found ${links.length} delete links. Adding click listeners...` + ) + links.forEach((link, index) => { + link.addEventListener('click', function () { + console.log(`Link ${index + 1} clicked. Sending Siteimprove event.`) + if (typeof _sz !== 'undefined') { + _sz.push([ + 'event', + 'Aanvraag detail', + 'Click', + 'Verwijder document', + ]) + } + }) + }) + } + + // Add event listener for the within the links + const spans = formUpload.querySelectorAll( + '.file-list .file-list__list .file-list__list-item a span' + ) + if (spans.length) { + console.log( + `Found ${spans.length} delete spans. Adding click listeners...` + ) + spans.forEach((span, index) => { + span.addEventListener('click', function () { + console.log(`Span ${index + 1} clicked. Sending Siteimprove event.`) + if (typeof _sz !== 'undefined') { + _sz.push([ + 'event', + 'Aanvraag detail', + 'Click', + 'Verwijder document', + ]) + } + }) + }) + } else { + console.log('No delete spans found within the file list.') + } + + return true // Successfully tracked + } + + // Function to poll for the existence of #form_upload and .file-list + function startPolling() { + console.log('again Starting polling for #form_upload...') + const pollingInterval = setInterval(() => { + const parent = document.querySelector(casesParentSelector) + + if (!parent) { + clearInterval(pollingInterval) + return + } + + if (trackDeleteEvents()) { + console.log( + 'Delete-file elements found and tracked. Stopping polling.' + ) + clearInterval(pollingInterval) + } + }, casesRetryInterval) + } + + // Start the polling process + startPolling() + }) function checkForSzObject() { const intervalId = setInterval(() => { if (typeof _sz !== 'undefined') { clearInterval(intervalId) initEventTracker() - //trackDynamicElements() // Add dynamic tracking here too, if needed } else { console.log('-> SiteImprove _sz is not defined yet.') } @@ -566,7 +632,6 @@ let isEventTrackerInitialized = false if (typeof _sz !== 'undefined') { observer.disconnect() initEventTracker() - // trackDynamicElements() } }) diff --git a/src/open_inwoner/scss/views/_view.scss b/src/open_inwoner/scss/views/_view.scss index a08f0d1439..36c6068e55 100644 --- a/src/open_inwoner/scss/views/_view.scss +++ b/src/open_inwoner/scss/views/_view.scss @@ -65,10 +65,30 @@ } //SITEIMPROVE TEST -#form_upload { +#form_upload .file-list .file-list__list .file-list__list-item { background-color: yellow; } -#form_upload .file-list .file-list__list-item .file__container .file__download { +#form_upload + .file-list + .file-list__list + .file-list__list-item + .file-error__size { background-color: orange; } + +#form_upload + .file-list + .file-list__list + .file-list__list-item + .file-error__type { + background-color: lightgreen; +} + +#form_upload + .file-list + .file-list__list + .file-list__list-item + .file-error__type-size { + background-color: mediumpurple; +}