@iamproperty/components 2.7.6 → 2.7.7

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.5
+  * Bootstrap v2.7.6
   * Copyright 2011-2022 [object Object]
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -31,7 +31,6 @@
    * @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 +43,6 @@
    * @param {HTMLElement} table Dom table element
    */
 
-
   var tableWrap = table => {
     if (!table.parentNode.classList.contains('table__wrapper')) {
       var tableHTML = table.outerHTML;
@@ -56,7 +54,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 +71,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 +105,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 +291,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 +301,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 +316,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 +324,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 +450,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 +475,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')) {