@iamproperty/components 2.7.5 → 2.7.8

package/assets/js/modules/table.js

@@ -11,7 +11,7 @@ function table(tableElement) {
   const sortedEvent = new Event('sorted');
   const filteredEvent = new Event('filtered');
   const reorderedEvent = new Event('reordered');
-  const randID = 'tabe_'+Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
+  const randID = 'table_'+Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
   let draggedRow;
 
   tableElement.setAttribute('id',randID)
@@ -271,87 +271,6 @@ function table(tableElement) {
     tableElement.append(style);
   }
 
-  const createPaginationForm = function(show,page,totalRows){
-
-    const form = document.createElement("div");
-    form.classList.add('table__pagination');
-    form.classList.add('row');
-    form.classList.add('pt-3');
-    form.classList.add('pb-3');
-
-    // Create the form and create a container div to hold the pagination buttons
-    form.innerHTML = `<div class="col mw-fit-content mb-3">
-  <div class="form-control__wrapper form-control-inline mb-0">
-    <label for="${randID}_showing" class="form-label">Showing:</label>
-    <input type="number" name="${randID}_showing" id="${randID}_showing" class="form-control form-control-sm showing-input-field" placeholder="" list="${randID}_pagination" value="${show}" min="1" max="${totalRows}" />
-  </div>
-  <datalist id="${randID}_pagination">
-  <option value="5">5</option>
-  ${totalRows > 10 ? `<option value="10">10</option>` : ''}
-  ${totalRows > 20 ? `<option value="20">20</option>` : ''}
-  <option value="${totalRows}">${totalRows}</option>
-  </datalist>
-</div>
-<div class="col mw-fit-content me-auto d-flex align-items-center mb-3"><span class="label">per page</span></div>
-<div class="col mw-fit-content d-sm-flex justify-content-end align-items-center" id="${randID}_paginationBtns"></div>`;
-
-    // Add after the actual table
-    tableElement.append(form)
-  }
-
-  const createPaginationButttons = function(show,page,totalRows){
-
-    const paginationButtonsWrapper = document.getElementById(randID+'_paginationBtns')
-
-    if(paginationButtonsWrapper == null)
-      return false;
-
-    const numberPages = Math.ceil(totalRows / show)
-
-    if(numberPages == 1){ // Remore the buttons or dont display any if we dont need them
-      paginationButtonsWrapper.innerHTML = '';
-    }
-    else if(numberPages < 5){ // If less than 5 pages (which fits comfortably on mobile) we display buttons
-
-      let strButtons = '';
-
-      for (let i = 1; i <= numberPages; i++) {
-
-        if(i == page)
-          strButtons += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
-        else
-          strButtons += `<li class="page-item"><button class="page-link" data-page="${i}">${i}</button></li>`;
-      }
-
-      paginationButtonsWrapper.innerHTML = `<span class="pe-2 mb-3">Page: </span><ul class="pagination mb-3">
-        ${page == 1 ? `<li class="page-item disabled"><span class="page-link">Previous</span></li>` : `<li class="page-item"><button class="page-link" data-page="${parseInt(page)-1}">Previous</button></li>`}
-        ${strButtons}
-        ${page == numberPages ? `<li class="page-item disabled"><span class="page-link">Next</span></li>` : `<li class="page-item"><button class="page-link" data-page="${parseInt(page)+1}">Next</button></li>`}
-      </ul>`;
-
-    }
-    else { // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
-
-      let strOptions = '';
-
-      for (let i = 1; i <= numberPages; i++) {
-
-        if(i == page)
-          strOptions += `<option value="${i}" selected>Page ${i}</option>`;
-        else
-          strOptions += `<option value="${i}">Page ${i}</option>`;
-      }
-
-      paginationButtonsWrapper.innerHTML = `
-<div class="form-control__wrapper page-number mb-2">
-<select class="form-select">
-  ${strOptions}
-</select>
-</div>
-      `;
-    }
-  }
-
   // On page load check if the table should be paginated
   if(tableElement.getAttribute('data-show')){
 
@@ -361,15 +280,15 @@ function table(tableElement) {
 
     if(show < totalRows){
       paginateRows(show,page);
-      createPaginationForm(show,page,totalRows);
-      createPaginationButttons(show,page,totalRows);
+      createPaginationForm(randID,tableElement,show,page,totalRows);
+      createPaginationButttons(randID,tableElement,show,page,totalRows);
 
       tableElement.addEventListener('change', function(e){
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('.table__pagination input[type="number"]')) {
   
             paginateRows(target.value,page);
-            createPaginationButttons(target.value,page,totalRows);
+            createPaginationButttons(randID,tableElement,target.value,page,totalRows);
             tableElement.setAttribute('data-show',target.value)
           }
         }
@@ -380,7 +299,7 @@ function table(tableElement) {
           if (target.matches('.page-item:not(.active):not(.disabled) .page-link')) { 
     
             paginateRows(tableElement.getAttribute('data-show'),target.getAttribute('data-page'));
-            createPaginationButttons(tableElement.getAttribute('data-show'),target.getAttribute('data-page'),totalRows);
+            createPaginationButttons(randID,tableElement,tableElement.getAttribute('data-show'),target.getAttribute('data-page'),totalRows);
           }
         }
       }, false);
@@ -390,7 +309,7 @@ function table(tableElement) {
           if (target.matches('.table__pagination select')) {
   
             paginateRows(tableElement.getAttribute('data-show'),target.value);
-            createPaginationButttons(tableElement.getAttribute('data-show'),target.value,totalRows);
+            createPaginationButttons(randID,tableElement,tableElement.getAttribute('data-show'),target.value,totalRows);
           }
         }
       });
@@ -548,8 +467,8 @@ function table(tableElement) {
       if(show < totalRows){
 
         paginateRows(show,1);
-        createPaginationForm(show,1,totalRows);
-        createPaginationButttons(show,1,totalRows);
+        createPaginationForm(randID,tableElement,show,1,totalRows);
+        createPaginationButttons(randID,tableElement,show,1,totalRows);
       }
     }
 
@@ -582,4 +501,85 @@ function table(tableElement) {
   }, false);
 }
 
+export const createPaginationForm = function(randID,tableElement,show,page,totalRows){
+
+  const form = document.createElement("div");
+  form.classList.add('table__pagination');
+  form.classList.add('row');
+  form.classList.add('pt-3');
+  form.classList.add('pb-3');
+
+  // Create the form and create a container div to hold the pagination buttons
+  form.innerHTML = `<div class="col mw-fit-content mb-3">
+<div class="form-control__wrapper form-control-inline mb-0">
+  <label for="${randID}_showing" class="form-label">Showing:</label>
+  <input type="number" name="${randID}_showing" id="${randID}_showing" class="form-control form-control-sm showing-input-field" placeholder="" list="${randID}_pagination" value="${show}" min="1" max="${totalRows}" />
+</div>
+<datalist id="${randID}_pagination">
+<option value="5">5</option>
+${totalRows > 10 ? `<option value="10">10</option>` : ''}
+${totalRows > 20 ? `<option value="20">20</option>` : ''}
+<option value="${totalRows}">${totalRows}</option>
+</datalist>
+</div>
+<div class="col mw-fit-content me-auto d-flex align-items-center mb-3"><span class="label">per page</span></div>
+<div class="col mw-fit-content d-sm-flex justify-content-end align-items-center" id="${randID}_paginationBtns"></div>`;
+
+  // Add after the actual table
+  tableElement.append(form)
+}
+
+export const createPaginationButttons = function(randID,tableElement,show,page,totalRows){
+
+  const paginationButtonsWrapper = document.getElementById(randID+'_paginationBtns')
+
+  if(paginationButtonsWrapper == null)
+    return false;
+
+  const numberPages = Math.ceil(totalRows / show)
+
+  if(numberPages == 1){ // Remore the buttons or dont display any if we dont need them
+    paginationButtonsWrapper.innerHTML = '';
+  }
+  else if(numberPages < 5){ // If less than 5 pages (which fits comfortably on mobile) we display buttons
+
+    let strButtons = '';
+
+    for (let i = 1; i <= numberPages; i++) {
+
+      if(i == page)
+        strButtons += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
+      else
+        strButtons += `<li class="page-item"><button class="page-link" data-page="${i}">${i}</button></li>`;
+    }
+
+    paginationButtonsWrapper.innerHTML = `<span class="pe-2 mb-3">Page: </span><ul class="pagination mb-3">
+      ${page == 1 ? `<li class="page-item disabled"><span class="page-link">Previous</span></li>` : `<li class="page-item"><button class="page-link" data-page="${parseInt(page)-1}">Previous</button></li>`}
+      ${strButtons}
+      ${page == numberPages ? `<li class="page-item disabled"><span class="page-link">Next</span></li>` : `<li class="page-item"><button class="page-link" data-page="${parseInt(page)+1}">Next</button></li>`}
+    </ul>`;
+
+  }
+  else { // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
+
+    let strOptions = '';
+
+    for (let i = 1; i <= numberPages; i++) {
+
+      if(i == page)
+        strOptions += `<option value="${i}" selected>Page ${i}</option>`;
+      else
+        strOptions += `<option value="${i}">Page ${i}</option>`;
+    }
+
+    paginationButtonsWrapper.innerHTML = `
+<div class="form-control__wrapper page-number mb-2">
+<select class="form-select">
+${strOptions}
+</select>
+</div>
+    `;
+  }
+}
+
 export default table

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v2.7.1
+  * Bootstrap v2.7.8
   * Copyright 2011-2022 [object Object]
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -26,12 +26,25 @@
 
     return null;
   };
+  /**
+   * Add global events.
+   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+   */
+
+  var addGlobalEvents = body => {
+    window.addEventListener('hashchange', function () {
+      var hash = location.hash.replace('#', '');
+      var label = document.querySelector("label[for=\"".concat(hash, "\"]"));
+      var detail = document.querySelector("details[id=\"".concat(hash, "\"]:not([open])"));
+      if (label) label.click();else if (detail) detail.setAttribute('open', 'open');
+    }, 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.
    */
 
-
   var checkElements = element => {
     // Tables
     Array.from(element.querySelectorAll('table')).forEach((table, index) => {
@@ -44,7 +57,6 @@
    * @param {HTMLElement} table Dom table element
    */
 
-
   var tableWrap = table => {
     if (!table.parentNode.classList.contains('table__wrapper')) {
       var tableHTML = table.outerHTML;
@@ -56,7 +68,6 @@
    * @param {HTMLElement} table Dom table element
    */
 
-
   var tableStacked = table => {
     var colHeadings = Array.from(table.querySelectorAll('thead th'));
     var colRows = Array.from(table.querySelectorAll('tbody tr'));
@@ -74,14 +85,12 @@
       });
     });
   };
-
   var isNumeric = function isNumeric(str) {
     if (typeof str != "string") return false; // we only process strings!  
 
     return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
     !isNaN(parseFloat(str)); // ...and ensure strings of whitespace fail
   };
-
   var zeroPad = (num, places) => String(num).padStart(places, '0');
 
   var navbar = element => {
@@ -110,7 +119,7 @@
     var sortedEvent = new Event('sorted');
     var filteredEvent = new Event('filtered');
     var reorderedEvent = new Event('reordered');
-    var randID = 'tabe_' + Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
+    var randID = 'table_' + Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
 
     var draggedRow;
     tableElement.setAttribute('id', randID); // #region Sortable
@@ -296,47 +305,6 @@
       var stopShowing = show * page;
       style.innerHTML = "\n    #".concat(randID, " tbody tr {\n      display: none;\n    }\n    #").concat(randID, " tbody tr:nth-child(").concat(startShowing, "),\n    #").concat(randID, " tbody tr:nth-child(").concat(startShowing, ") ~ tr{\n      display: block;\n    }\n    @media screen and (min-width: 36em) {\n      #").concat(randID, " tbody tr:nth-child(").concat(startShowing, "),\n      #").concat(randID, " tbody tr:nth-child(").concat(startShowing, ") ~ tr{\n        display: table-row;\n      }\n    }\n    #").concat(randID, " tbody tr:nth-child(").concat(stopShowing, ") ~ tr{\n      display: none;\n    }\n    ");
       tableElement.append(style);
-    };
-
-    var createPaginationForm = function createPaginationForm(show, page, totalRows) {
-      var form = document.createElement("div");
-      form.classList.add('table__pagination');
-      form.classList.add('row');
-      form.classList.add('pt-3');
-      form.classList.add('pb-3'); // Create the form and create a container div to hold the pagination buttons
-
-      form.innerHTML = "<div class=\"col mw-fit-content mb-3\">\n  <div class=\"form-control__wrapper form-control-inline mb-0\">\n    <label for=\"".concat(randID, "_showing\" class=\"form-label\">Showing:</label>\n    <input type=\"number\" name=\"").concat(randID, "_showing\" id=\"").concat(randID, "_showing\" class=\"form-control form-control-sm showing-input-field\" placeholder=\"\" list=\"").concat(randID, "_pagination\" value=\"").concat(show, "\" min=\"1\" max=\"").concat(totalRows, "\" />\n  </div>\n  <datalist id=\"").concat(randID, "_pagination\">\n  <option value=\"5\">5</option>\n  ").concat(totalRows > 10 ? "<option value=\"10\">10</option>" : '', "\n  ").concat(totalRows > 20 ? "<option value=\"20\">20</option>" : '', "\n  <option value=\"").concat(totalRows, "\">").concat(totalRows, "</option>\n  </datalist>\n</div>\n<div class=\"col mw-fit-content me-auto d-flex align-items-center mb-3\"><span class=\"label\">per page</span></div>\n<div class=\"col mw-fit-content d-sm-flex justify-content-end align-items-center\" id=\"").concat(randID, "_paginationBtns\"></div>"); // Add after the actual table
-
-      tableElement.append(form);
-    };
-
-    var createPaginationButttons = function createPaginationButttons(show, page, totalRows) {
-      var paginationButtonsWrapper = document.getElementById(randID + '_paginationBtns');
-      if (paginationButtonsWrapper == null) return false;
-      var numberPages = Math.ceil(totalRows / show);
-
-      if (numberPages == 1) {
-        // Remore the buttons or dont display any if we dont need them
-        paginationButtonsWrapper.innerHTML = '';
-      } else if (numberPages < 5) {
-        // If less than 5 pages (which fits comfortably on mobile) we display buttons
-        var strButtons = '';
-
-        for (var i = 1; i <= numberPages; i++) {
-          if (i == page) strButtons += "<li class=\"page-item active\" aria-current=\"page\"><span class=\"page-link\">".concat(i, "</span></li>");else strButtons += "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(i, "\">").concat(i, "</button></li>");
-        }
-
-        paginationButtonsWrapper.innerHTML = "<span class=\"pe-2 mb-3\">Page: </span><ul class=\"pagination mb-3\">\n        ".concat(page == 1 ? "<li class=\"page-item disabled\"><span class=\"page-link\">Previous</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) - 1, "\">Previous</button></li>"), "\n        ").concat(strButtons, "\n        ").concat(page == numberPages ? "<li class=\"page-item disabled\"><span class=\"page-link\">Next</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) + 1, "\">Next</button></li>"), "\n      </ul>");
-      } else {
-        // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
-        var strOptions = '';
-
-        for (var _i = 1; _i <= numberPages; _i++) {
-          if (_i == page) strOptions += "<option value=\"".concat(_i, "\" selected>Page ").concat(_i, "</option>");else strOptions += "<option value=\"".concat(_i, "\">Page ").concat(_i, "</option>");
-        }
-
-        paginationButtonsWrapper.innerHTML = "\n<div class=\"form-control__wrapper page-number mb-2\">\n<select class=\"form-select\">\n  ".concat(strOptions, "\n</select>\n</div>\n      ");
-      }
     }; // On page load check if the table should be paginated
 
 
@@ -347,13 +315,13 @@
 
       if (show < totalRows) {
         paginateRows(show, page);
-        createPaginationForm(show, page, totalRows);
-        createPaginationButttons(show, page, totalRows);
+        createPaginationForm(randID, tableElement, show, page, totalRows);
+        createPaginationButttons(randID, tableElement, show, page, totalRows);
         tableElement.addEventListener('change', function (e) {
           for (var target = e.target; target && target != this; target = target.parentNode) {
             if (target.matches('.table__pagination input[type="number"]')) {
               paginateRows(target.value, page);
-              createPaginationButttons(target.value, page, totalRows);
+              createPaginationButttons(randID, tableElement, target.value, page, totalRows);
               tableElement.setAttribute('data-show', target.value);
             }
           }
@@ -362,7 +330,7 @@
           for (var target = e.target; target && target != this; target = target.parentNode) {
             if (target.matches('.page-item:not(.active):not(.disabled) .page-link')) {
               paginateRows(tableElement.getAttribute('data-show'), target.getAttribute('data-page'));
-              createPaginationButttons(tableElement.getAttribute('data-show'), target.getAttribute('data-page'), totalRows);
+              createPaginationButttons(randID, tableElement, tableElement.getAttribute('data-show'), target.getAttribute('data-page'), totalRows);
             }
           }
         }, false);
@@ -370,7 +338,7 @@
           for (var target = e.target; target && target != this; target = target.parentNode) {
             if (target.matches('.table__pagination select')) {
               paginateRows(tableElement.getAttribute('data-show'), target.value);
-              createPaginationButttons(tableElement.getAttribute('data-show'), target.value, totalRows);
+              createPaginationButttons(randID, tableElement, tableElement.getAttribute('data-show'), target.value, totalRows);
             }
           }
         });
@@ -496,8 +464,8 @@
 
         if (_show < _totalRows) {
           paginateRows(_show, 1);
-          createPaginationForm(_show, 1, _totalRows);
-          createPaginationButttons(_show, 1, _totalRows);
+          createPaginationForm(randID, tableElement, _show, 1, _totalRows);
+          createPaginationButttons(randID, tableElement, _show, 1, _totalRows);
         }
       }
 
@@ -521,6 +489,46 @@
     }, false);
   }
 
+  var createPaginationForm = function createPaginationForm(randID, tableElement, show, page, totalRows) {
+    var form = document.createElement("div");
+    form.classList.add('table__pagination');
+    form.classList.add('row');
+    form.classList.add('pt-3');
+    form.classList.add('pb-3'); // Create the form and create a container div to hold the pagination buttons
+
+    form.innerHTML = "<div class=\"col mw-fit-content mb-3\">\n<div class=\"form-control__wrapper form-control-inline mb-0\">\n  <label for=\"".concat(randID, "_showing\" class=\"form-label\">Showing:</label>\n  <input type=\"number\" name=\"").concat(randID, "_showing\" id=\"").concat(randID, "_showing\" class=\"form-control form-control-sm showing-input-field\" placeholder=\"\" list=\"").concat(randID, "_pagination\" value=\"").concat(show, "\" min=\"1\" max=\"").concat(totalRows, "\" />\n</div>\n<datalist id=\"").concat(randID, "_pagination\">\n<option value=\"5\">5</option>\n").concat(totalRows > 10 ? "<option value=\"10\">10</option>" : '', "\n").concat(totalRows > 20 ? "<option value=\"20\">20</option>" : '', "\n<option value=\"").concat(totalRows, "\">").concat(totalRows, "</option>\n</datalist>\n</div>\n<div class=\"col mw-fit-content me-auto d-flex align-items-center mb-3\"><span class=\"label\">per page</span></div>\n<div class=\"col mw-fit-content d-sm-flex justify-content-end align-items-center\" id=\"").concat(randID, "_paginationBtns\"></div>"); // Add after the actual table
+
+    tableElement.append(form);
+  };
+  var createPaginationButttons = function createPaginationButttons(randID, tableElement, show, page, totalRows) {
+    var paginationButtonsWrapper = document.getElementById(randID + '_paginationBtns');
+    if (paginationButtonsWrapper == null) return false;
+    var numberPages = Math.ceil(totalRows / show);
+
+    if (numberPages == 1) {
+      // Remore the buttons or dont display any if we dont need them
+      paginationButtonsWrapper.innerHTML = '';
+    } else if (numberPages < 5) {
+      // If less than 5 pages (which fits comfortably on mobile) we display buttons
+      var strButtons = '';
+
+      for (var i = 1; i <= numberPages; i++) {
+        if (i == page) strButtons += "<li class=\"page-item active\" aria-current=\"page\"><span class=\"page-link\">".concat(i, "</span></li>");else strButtons += "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(i, "\">").concat(i, "</button></li>");
+      }
+
+      paginationButtonsWrapper.innerHTML = "<span class=\"pe-2 mb-3\">Page: </span><ul class=\"pagination mb-3\">\n      ".concat(page == 1 ? "<li class=\"page-item disabled\"><span class=\"page-link\">Previous</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) - 1, "\">Previous</button></li>"), "\n      ").concat(strButtons, "\n      ").concat(page == numberPages ? "<li class=\"page-item disabled\"><span class=\"page-link\">Next</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) + 1, "\">Next</button></li>"), "\n    </ul>");
+    } else {
+      // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
+      var strOptions = '';
+
+      for (var _i = 1; _i <= numberPages; _i++) {
+        if (_i == page) strOptions += "<option value=\"".concat(_i, "\" selected>Page ").concat(_i, "</option>");else strOptions += "<option value=\"".concat(_i, "\">Page ").concat(_i, "</option>");
+      }
+
+      paginationButtonsWrapper.innerHTML = "\n<div class=\"form-control__wrapper page-number mb-2\">\n<select class=\"form-select\">\n".concat(strOptions, "\n</select>\n</div>\n    ");
+    }
+  };
+
   function accordion(accordionElement) {
     // Fetch all the details element.
     if (!accordionElement.classList.contains('accordion--keep-open')) {
@@ -914,6 +922,7 @@
 
   document.addEventListener("DOMContentLoaded", function () {
     addBodyClasses(document.body);
+    addGlobalEvents();
     checkElements(document.body);
     console.log('test.js'); // ANav
 
@@ -948,6 +957,11 @@
     Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement, index) => {
       new youtubeVideo(arrayElement);
     });
+    window.addEventListener('hashchange', function () {
+      var hash = location.hash.replace('#', '');
+      var label = document.querySelector("label[for=\"".concat(hash, "\"]"));
+      if (label) label.click();
+    }, false);
   });
 
 }));