@iamproperty/components 3.4.6 → 3.5.0

package/assets/js/modules/applied-filters.js

@@ -0,0 +1,100 @@
+// @ts-nocheck
+function createAppliedFilters(container, filters) {
+    function addFilterButton(filters, input) {
+        let shouldRemoveFilter = false;
+        let inputName = input.getAttribute('name');
+        if (inputName.includes('[]'))
+            inputName = inputName.replace('[]', `[${input.value}]`);
+        let filter = filters.querySelector(`[data-name="${inputName}"]`);
+        if (filter && input.getAttribute('type') == 'checkbox')
+            shouldRemoveFilter = true;
+        let filterText = input.getAttribute('data-filter-text');
+        if (!filter) {
+            filter = document.createElement('button');
+            filters.appendChild(filter);
+        }
+        filter.setAttribute('type', 'button');
+        filter.classList.add('filter');
+        filter.setAttribute('data-name', inputName);
+        filter.innerHTML = filterText.replace('$value', input.value);
+        // If the value
+        if (!input.value || shouldRemoveFilter)
+            filter.remove();
+        // If input has an ancestor with data-filter and all of inputs in that parent have been filled in then we need to transform the filter
+        if (input.parentNode.closest('[data-filter-text]')) {
+            let parent = input.parentNode.closest('[data-filter-text]');
+            let allValuesSet = true;
+            inputName = "";
+            parent.querySelectorAll('input').forEach((element, index) => {
+                let name = element.getAttribute('name');
+                // create a joined inputname for the parent filter
+                inputName += `${index != 0 ? ',' : ''}${name}`;
+                if (filters.querySelector(`[data-name="${name}"]`))
+                    filters.querySelector(`[data-name="${name}"]`).remove();
+                if (element.value) {
+                    let childFilter = document.createElement('button');
+                    childFilter.setAttribute('type', 'button');
+                    childFilter.classList.add('filter');
+                    childFilter.setAttribute('data-name', name);
+                    childFilter.innerHTML = filterText.replace('$value', element.value);
+                    filters.appendChild(childFilter);
+                }
+                else
+                    allValuesSet = false;
+            });
+            if (filters.querySelector(`[data-name="${inputName}"]`))
+                filters.querySelector(`[data-name="${inputName}"]`).remove();
+            if (allValuesSet) {
+                let newFilterText = parent.getAttribute('data-filter-text');
+                parent.querySelectorAll('input').forEach((element, index) => {
+                    let name = element.getAttribute('name');
+                    // Remove all the child filter tags
+                    if (filters.querySelector(`[data-name="${name}"]`))
+                        filters.querySelector(`[data-name="${name}"]`).remove();
+                    newFilterText = newFilterText.replace(`$${index + 1}`, element.value);
+                });
+                let parentFilter = document.createElement('button');
+                parentFilter.setAttribute('type', 'button');
+                parentFilter.classList.add('filter');
+                parentFilter.setAttribute('data-name', inputName);
+                parentFilter.innerHTML = newFilterText;
+                filters.appendChild(parentFilter);
+            }
+        }
+    }
+    // check for inputs on load
+    Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
+        addFilterButton(filters, input);
+    });
+    container.addEventListener('change', function (event) {
+        if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')) {
+            let input = event.target.closest('input[data-filter-text]');
+            addFilterButton(filters, input);
+        }
+        ;
+    }, false);
+    filters.addEventListener('click', function (event) {
+        if (event && event.target instanceof HTMLElement && event.target.closest('.filter')) {
+            let filter = event.target.closest('.filter');
+            let names = filter.getAttribute('data-name').split(',');
+            for (var t = 0; t < names.length; t++) {
+                let name = names[t];
+                let selector = `[name="${name}"]`;
+                if (name.match(/\[(.*)\]/)) {
+                    let newName = name.replace(/\[(.*)\]/, `[]`);
+                    let value = name.replace(/.*\[(.*)\]/, `$1`);
+                    selector = `[name="${newName}"][value="${value}"]`;
+                }
+                let inputs = container.querySelectorAll(selector);
+                for (var i = 0; i < inputs.length; i++) {
+                    let input = inputs[i];
+                    if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')
+                        inputs[i].value = "";
+                    inputs[i].checked = false;
+                }
+            }
+            filter.remove();
+        }
+    }, false);
+}
+export default createAppliedFilters;

package/assets/js/modules/data-layer.js

@@ -0,0 +1,45 @@
+function createDataLayer() {
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+        "event": "Pageview",
+        "pageTitle": document.title
+    });
+    // Global events to track
+    document.addEventListener('click', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[open] summary')) {
+            window.dataLayer.push({
+                "event": "closeDetails",
+                // @ts-ignore: Object is possibly 'null'.
+                "detailsTitle": event.target.closest('summary').textContent
+            });
+        }
+        else if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {
+            window.dataLayer.push({
+                "event": "openDetails",
+                // @ts-ignore: Object is possibly 'null'.
+                "detailsTitle": event.target.closest('summary').textContent
+            });
+        }
+        if (event && event.target instanceof HTMLElement && event.target.closest('a')) {
+            window.dataLayer.push({
+                "event": "linkClicked",
+                // @ts-ignore: Object is possibly 'null'.
+                "linkText": event.target.closest('a').hasAttribute('title') ? event.target.closest('a').getAttribute('title') : event.target.closest('a').textContent,
+                // @ts-ignore: Object is possibly 'null'.
+                "class": (event.target.closest('a').hasAttribute('class') ? event.target.closest('a').getAttribute('class') : ''),
+                // @ts-ignore: Object is possibly 'null'.
+                "href": event.target.closest('a').getAttribute('href')
+            });
+        }
+        if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
+            window.dataLayer.push({
+                "event": "buttonClicked",
+                // @ts-ignore: Object is possibly 'null'.
+                "buttonText": event.target.closest('button').textContent,
+                // @ts-ignore: Object is possibly 'null'.
+                "class": (event.target.closest('button').hasAttribute('class') ? event.target.closest('button').getAttribute('class') : '')
+            });
+        }
+    });
+}
+export default createDataLayer;

package/assets/js/modules/filterlist.js

@@ -0,0 +1,32 @@
+// @ts-nocheck
+function filterlist(list, input) {
+    addFilterlistEventListeners(list, input);
+}
+function addFilterlistEventListeners(list, input) {
+    var timer;
+    input.addEventListener('keyup', (event) => {
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            filterTheList(list, input.value);
+        }, 500);
+    });
+    input.addEventListener('change', (event) => {
+        clearTimeout(timer);
+        filterTheList(list, input.value);
+    });
+}
+export const filterTheList = function (list, searchTerm) {
+    Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {
+        let content = item.textContent.toLowerCase();
+        item.classList.add('d-none');
+        if (content.includes(searchTerm.toLowerCase()))
+            item.classList.remove('d-none');
+    });
+    // Data layer Web component created
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+        "event": "Filtered list",
+        "value": searchTerm
+    });
+};
+export default filterlist;

package/assets/js/modules/helpers.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { createEmbed } from "./youtubevideo.js";
 /**
  * Global helper functions to help maintain and enhance framework elements.
  * @module Helpers
@@ -19,62 +20,114 @@ export const addBodyClasses = (body) => {
  * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
  */
 export const addGlobalEvents = (body) => {
-    if (location.hash && document.querySelector(location.hash + ':not([open]) summary')) {
-        const summary = document.querySelector(location.hash + ' summary');
-        if (summary instanceof HTMLElement)
-            summary.click();
-    }
-    window.addEventListener('hashchange', function () {
-        const hash = location.hash.replace('#', '');
-        const label = document.querySelector(`label[for="${hash}"]`);
-        const summary = document.querySelector(location.hash + ' summary');
+    const checkElements = function (hash) {
+        const label = document.querySelector(`label[for="${hash.replace('#', '')}"]`);
+        const summary = document.querySelector(hash + ' summary');
+        const dialog = document.querySelector(`dialog${hash}`);
         if (label instanceof HTMLElement)
             label.click();
         else if (summary instanceof HTMLElement)
             summary.click();
-    }, false);
-    return null;
-};
-/**
- * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function.
- * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
- */
-export const checkElements = (element) => {
-    // Tables
-    Array.from(element.querySelectorAll('table')).forEach((table, index) => {
-        tableStacked(table);
-        tableWrap(table);
+        else if (dialog instanceof HTMLElement)
+            dialog.showModal();
+    };
+    if (location.hash)
+        checkElements(location.hash);
+    window.addEventListener('hashchange', function () { checkElements(location.hash); }, false);
+    addEventListener("popstate", (event) => {
+        if (event.state.type == "pagination") {
+            let form = document.querySelector(`#${event.state.form}`);
+            let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
+            if (pageInput)
+                pageInput.value = event.state.page;
+            else
+                form.innerHTML += `<input name="page" type="hidden" data-pagination="true" value="${event.state.page}" />`;
+            form.dispatchEvent(new Event("submit"));
+        }
     });
-};
-/**
- * Wrap tables with a table wrapper div to help maintain its responsive design.
- * @param {HTMLElement} table Dom table element
- */
-export const tableWrap = (table) => {
-    if (!table.parentNode.classList.contains('table__wrapper')) {
-        const tableHTML = table.outerHTML;
-        table.outerHTML = `<div class="table__wrapper">${tableHTML}</div>`;
-    }
-};
-/**
- * Creates data attributes to be used by the CSS for mobile views.
- * @param {HTMLElement} table Dom table element
- */
-export const tableStacked = (table) => {
-    const colHeadings = Array.from(table.querySelectorAll('thead th'));
-    const colRows = Array.from(table.querySelectorAll('tbody tr'));
-    colRows.forEach((row, index) => {
-        const cells = Array.from(row.querySelectorAll('th, td'));
-        cells.forEach((cell, cellIndex) => {
-            const heading = colHeadings[cellIndex];
-            if (typeof heading != "undefined") {
-                let tempDiv = document.createElement("div");
-                tempDiv.innerHTML = heading.innerHTML;
-                let headingText = tempDiv.textContent || tempDiv.innerText || "";
-                cell.setAttribute('data-label', headingText);
+    // Dialogs/modals
+    document.addEventListener('click', (event) => {
+        // Modal
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')) {
+            const button = event.target.closest('[data-modal]');
+            const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
+            const dialog = document.querySelector(`dialog#${modalID}`);
+            // Create close button is needed
+            dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+            let videoButton = dialog.querySelector('.youtube-embed a');
+            if (videoButton) {
+                createEmbed(videoButton);
             }
-        });
+            dialog.showModal();
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                "event": "openModal",
+                "id": modalID
+            });
+        }
+        ;
+        // Close modal
+        if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')) {
+            const dialog = event.target.closest('dialog[open]');
+            event.preventDefault();
+            dialog.close();
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                "event": "closeModal",
+                "id": dialog.getAttribute('id')
+            });
+        }
+        if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')) {
+            const dialog = event.target.closest('dialog[open]');
+            const dialogDimensions = dialog.getBoundingClientRect();
+            if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+                dialog.close();
+                window.dataLayer = window.dataLayer || [];
+                window.dataLayer.push({
+                    "event": "closeModal",
+                    "id": dialog.getAttribute('id')
+                });
+            }
+        }
+        // Popover
+        if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
+            // Close existing open popover
+            let btn = event.target.closest('.dialog__wrapper > button');
+            let parent = event.target.closest('.dialog__wrapper > button').parentNode;
+            let dataEvent = "openPopover";
+            let popover = parent.querySelector(':scope > dialog');
+            if (document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
+                document.querySelector('dialog[open]').close();
+            if (popover.hasAttribute('open')) {
+                popover.close();
+                dataEvent = "closePopover";
+                popover.removeAttribute('style');
+                btn.classList.remove('active');
+            }
+            else {
+                popover.show();
+                btn.classList.add('active');
+                var position = btn.getBoundingClientRect();
+                let topOffset = position.top;
+                let leftOffset = position.left;
+                if (btn.closest('iam-table')) {
+                    let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+                    topOffset -= container.top;
+                    leftOffset -= container.left;
+                }
+                if (popover.classList.contains('dialog--fix')) {
+                    popover.setAttribute('style', `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`);
+                }
+            }
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                "event": dataEvent,
+                "id": btn.textContent
+            });
+        }
+        ;
     });
+    return null;
 };
 export const isNumeric = function (str) {
     if (typeof str != "string")

package/assets/js/modules/pagination.js

@@ -0,0 +1,33 @@
+const createPaginationButttons = function (controller, pagination) {
+    if (!controller.getAttribute('data-pages'))
+        return false;
+    if (!controller.getAttribute('data-page'))
+        controller.setAttribute('data-page', 1);
+    let currentPage = controller.getAttribute('data-page');
+    let numberPages = controller.getAttribute('data-pages');
+    let numberRows = controller.getAttribute('data-total');
+    let showRows = controller.getAttribute('data-show');
+    let addRows = controller.getAttribute('data-increment');
+    if (numberPages <= 1) {
+        pagination.innerHTML = '';
+        return false;
+    }
+    let strButtons = '';
+    for (let i = 1; i <= numberPages; i++) {
+        if (i == currentPage)
+            strButtons += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
+        else
+            strButtons += `<li class="page-item"><a href="?page=${i}" class="page-link" data-page="${i}">${i}</a></li>`;
+    }
+    pagination.innerHTML = `<ul class="pagination mb-0 d-none d-sm-flex">
+    ${currentPage == 1 ? `<li class="page-item disabled"><span class="page-link">Previous</span></li>` : `<li class="page-item"><a href="?page=${parseInt(currentPage) - 1}" class="page-link" data-page="${parseInt(currentPage) - 1}">Previous</a></li>`}
+    ${strButtons}
+    ${currentPage == numberPages ? `<li class="page-item disabled"><span class="page-link">Next</span></li>` : `<li class="page-item"><a href="?page=${parseInt(currentPage) + 1}" class="page-link" data-page="${parseInt(currentPage) + 1}">Next</a></li>`}
+  </ul>`;
+    pagination.innerHTML += `<div class="d-sm-none text-center">
+  <span class="d-block pb-2">You've viewed ${showRows} of ${numberRows} results</span>
+  <a href="?show=${parseInt(showRows) + parseInt(addRows)}" class="btn btn-primary w-100 m-0" data-show="${parseInt(showRows) + parseInt(addRows)}">Load more results</a>
+  </div>`;
+    return true;
+};
+export default createPaginationButttons;