@iamproperty/components 3.4.6 → 3.5.0

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,85 +28,154 @@
  */
 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();
-  }
+  const checkElements = function(hash){
 
-  window.addEventListener('hashchange', function() {
-
-    const hash = location.hash.replace('#','');
-    const label = document.querySelector(`label[for="${hash}"]`);
-    const summary = document.querySelector(location.hash+' summary');
+    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);
+    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')){
+  // Dialogs/modals
+  document.addEventListener('click', (event) => {
 
-    const tableHTML = table.outerHTML;
+    // Modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
 
-    table.outerHTML = `<div class="table__wrapper">${tableHTML}</div>`;
-  }
-}
+      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');
 
-/**
- * Creates data attributes to be used by the CSS for mobile views.
- * @param {HTMLElement} table Dom table element
- */
-export const tableStacked = (table) => {
+      if (videoButton){
+        createEmbed(videoButton)
+      }
 
-  const colHeadings = Array.from(table.querySelectorAll('thead th'));
-  const colRows = Array.from(table.querySelectorAll('tbody tr'));
+      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')
+        });
+      }
+    }
 
-  colRows.forEach((row, index) => {
+    // Popover
+    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
 
-    const cells = Array.from(row.querySelectorAll('th, td'));
-    
-    cells.forEach((cell, cellIndex) => {
+      // 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"
 
-      const heading = colHeadings[cellIndex];
-      if(typeof heading != "undefined"){
+        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;
+
+        }
 
-        let tempDiv = document.createElement("div");
-        tempDiv.innerHTML = heading.innerHTML;
-        let headingText = tempDiv.textContent || tempDiv.innerText || "";
-        cell.setAttribute('data-label',headingText);
+        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") return false // we only process strings!  
@@ -125,4 +196,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;