Skip to content

Commit

Permalink
[#2870] Add dynamic HTMX code, works partially
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Jan 9, 2025
1 parent 09ff2d7 commit 5d0cd3c
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 72 deletions.
36 changes: 18 additions & 18 deletions src/open_inwoner/js/components/siteimprove/dynamic-tracking.js
View file
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down Expand Up @@ -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
Expand Down
169 changes: 117 additions & 52 deletions src/open_inwoner/js/components/siteimprove/tracking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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 <span> 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.')
}
Expand All @@ -566,7 +632,6 @@ let isEventTrackerInitialized = false
if (typeof _sz !== 'undefined') {
observer.disconnect()
initEventTracker()
// trackDynamicElements()
}
})

Expand Down
24 changes: 22 additions & 2 deletions src/open_inwoner/scss/views/_view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 5d0cd3c

Please sign in to comment.