@iamproperty/components 3.4.5 → 3.4.7

package/assets/ts/modules/helpers.ts

@@ -1,4 +1,6 @@
 // @ts-nocheck
+import { createEmbed } from "./youtubevideo"; 
+
 /** 
  * Global helper functions to help maintain and enhance framework elements.
  * @module Helpers 
@@ -8,7 +10,7 @@
  * Add global classes used by the CSS and later JavaScript.
  * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
  */
- export const addBodyClasses = (body) => {
+export const addBodyClasses = (body) => {
   
   body.classList.add("js-enabled");
 
@@ -26,77 +28,113 @@
  */
 export const addGlobalEvents = (body) => {
   
-  window.addEventListener('hashchange', function() {
+  const checkElements = function(hash){
 
-    const hash = location.hash.replace('#','');
-    const label = document.querySelector(`label[for="${hash}"]`);
-    const detail = document.querySelector(`details[id="${hash}"]:not([open])`);
+    const label = document.querySelector(`label[for="${hash.replace('#','')}"]`);
+    const summary = document.querySelector(hash+' summary');
+    const dialog = document.querySelector(`dialog${hash}`);
 
-    if(label)
+    if(label instanceof HTMLElement)
       label.click();
-    else if(detail)
-      detail.setAttribute('open','open');
-    
-  }, false);
+    else if(summary instanceof HTMLElement)
+      summary.click();
+    else if(dialog instanceof HTMLElement)
+      dialog.showModal();
+  }
 
-  return null
-}
+  if(location.hash)
+    checkElements(location.hash);
 
-/**
- * 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) => {
+  window.addEventListener('hashchange', function() { checkElements(location.hash); }, false);
 
-  // Tables
-  Array.from(element.querySelectorAll('table')).forEach((table, index) => {
+  addEventListener("popstate", (event) => {
 
-    tableStacked(table);
-    tableWrap(table);
+    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;
+  // Dialogs/modals
+  document.addEventListener('click', (event) => {
 
-    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) => {
+    // Modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
 
-  const colHeadings = Array.from(table.querySelectorAll('thead th'));
-  const colRows = Array.from(table.querySelectorAll('tbody tr'));
+      const button = event.target.closest('[data-modal]');
+      const modalID = button.getAttribute('data-modal');
+      const dialog = document.querySelector(`dialog#${modalID}`);
+      
+      // Create close button is needed
+      if(dialog.parentNode.closest('form') && !dialog.querySelector(':scope > .dialog__close:first-child'))
+        dialog.innerHTML = `<button class="dialog__close" formmethod="dialog">Close</button>${dialog.innerHTML}`;
+      else if(!dialog.parentNode.closest('form') && !dialog.querySelector(':scope > form:first-child'))
+        dialog.innerHTML = `<form><button class="dialog__close" formmethod="dialog">Close</button></form>${dialog.innerHTML}`;
 
-  colRows.forEach((row, index) => {
 
-    const cells = Array.from(row.querySelectorAll('th, td'));
-    
-    cells.forEach((cell, cellIndex) => {
+      let videoButton = dialog.querySelector('.youtube-embed a');
 
-      const heading = colHeadings[cellIndex];
-      if(typeof heading != "undefined"){
+      if (videoButton){
+        createEmbed(videoButton)
+      }
 
-        let tempDiv = document.createElement("div");
-        tempDiv.innerHTML = heading.innerHTML;
-        let headingText = tempDiv.textContent || tempDiv.innerText || "";
-        cell.setAttribute('data-label',headingText);
+      dialog.showModal();
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "openModal",
+        "id": modalID
+      });
+    };
+    // Close modal
+    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')){
+
+      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(popover.hasAttribute('open')){
+        
+        popover.close();
+        dataEvent = "closePopover"
       }
-    });
+      else
+        popover.show();
+
+      window.dataLayer = window.dataLayer || [];
+      
+      window.dataLayer.push({
+        "event": dataEvent,
+        "id": btn.textContent
+      });
+    };
   });
-}
 
+  return null
+}
 
 export const isNumeric = function(str) {
   if (typeof str != "string") return false // we only process strings!  
@@ -117,4 +155,4 @@ export const safeID = function(str){
   str = str.replace(/\W/g,'');
 
   return str;
-}
+}

package/assets/ts/modules/pagination.ts

@@ -0,0 +1,44 @@
+const createPaginationButttons = function(controller: any,pagination: any){
+  
+  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;