@iamproperty/components 2.9.0 → 3.1.0

package/assets/js/modules/orderablelist.js

@@ -0,0 +1,122 @@
+function orderlist(list) {
+  const randID = 'list_'+Math.random().toString(36).substr(2, 9);
+  const listItems = list.querySelectorAll('li');
+  const listCount = listItems.length;
+  let draggedRow;
+
+  list.setAttribute('role','list');
+  list.setAttribute('tabindex',0);
+  list.setAttribute('aria-label','Use the key tab to buttons to move between list items, once you have selected a list item you can move it up and down using the arrow keys.');
+
+  list.querySelectorAll('li').forEach((item, index) => {
+
+    // Make draggable
+    item.setAttribute('id',randID+'_row_'+(index+1));
+    item.setAttribute('data-order',index+1);
+    item.setAttribute('draggable','true');
+    item.addEventListener("dragstart", setDraggedRow);
+    item.setAttribute('tabindex',0);
+    item.setAttribute('role','listitem');
+    item.setAttribute('aria-label',`${item.innerText}: ${index+1} of ${listCount} moveable items`);
+  });
+
+  function setDraggedRow(e) {
+    e.dataTransfer.setData("text/plain", e.target.id);
+    draggedRow = e.target;
+    e.target.classList.add('li--dragging');
+  }
+
+  function resetItems(){
+
+    // Re label the rows
+    Array.from(list.querySelectorAll('li')).forEach((item, index) => {
+      item.classList.remove('li--dragging')
+      item.classList.remove('li--dropable')
+      item.setAttribute('data-order',index+1);
+      item.setAttribute('aria-label',`${item.innerText}: ${index+1} of ${listCount} moveable items`);
+    });
+  }
+
+  list.addEventListener("dragover", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+  }, false);
+
+  list.addEventListener("dragenter", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('li')) {
+
+        target.classList.add('li--dropable')
+      }
+    }
+  }, false);
+
+  list.addEventListener("dragleave", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('li')) {
+
+        target.classList.remove('li--dropable')
+      }
+    }
+  }, false);
+
+  list.addEventListener("drop", function(e) {
+
+    e.preventDefault();
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('li')) {
+
+        if(target.parentNode != null && draggedRow.parentNode != null && target != draggedRow){
+
+          draggedRow.parentNode.removeChild( draggedRow );
+
+          if(draggedRow.getAttribute('data-order') > target.getAttribute('data-order'))
+            target.parentNode.insertBefore(draggedRow, target);
+          else
+            target.parentNode.insertBefore(draggedRow, target.nextElementSibling);
+
+          resetItems();
+
+
+          //tableElement.dispatchEvent(reorderedEvent);
+        }
+        break;
+      }
+    }
+  }, false);
+
+  list.addEventListener("keydown", function( e ) {
+
+    let item = e.target;
+
+    if(e.keyCode == 38){
+      e.preventDefault();
+
+      if (item.previousElementSibling)
+        item.parentNode.insertBefore(item, item.previousElementSibling);
+
+      item.focus();
+    }
+    else if(e.keyCode == 40){
+      e.preventDefault();
+
+      if (item.nextElementSibling)
+        item.parentNode.insertBefore(item.nextElementSibling, item);
+
+      item.focus();
+    }
+
+    resetItems();
+
+  }, false);
+
+}
+
+export default orderlist;

package/assets/js/modules/table.js

@@ -22,7 +22,7 @@ function table(tableElement) {
     // Create an array from the table rows, the index created is then used to sort the array
     let tableArr = [];
     Array.from(tbody.querySelectorAll('tr')).forEach((tableRow, index) => {
-      
+
       let rowIndex = tableRow.querySelector('td[data-label="'+sortBy+'"], th[data-label="'+sortBy+'"]').textContent;
 
       if(isNumeric(rowIndex))
@@ -56,7 +56,7 @@ function table(tableElement) {
   // Declare event handlers
   tableElement.addEventListener('click', function(e){
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('[data-sortable]')) { 
+      if (target.matches('[data-sortable]')) {
 
         // Get current sort order
         let sort = target.getAttribute('aria-sort') == "ascending" ? "descending" : "ascending";
@@ -77,7 +77,7 @@ function table(tableElement) {
         sortTable(target.textContent, sort);
 
         Array.from(tableElement.querySelectorAll('tr[draggable]')).forEach((tableRow, index) => {
-      
+
           tableRow.removeAttribute('draggable');
         });
         break;
@@ -286,7 +286,7 @@ function table(tableElement) {
       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(randID,tableElement,target.value,page,totalRows);
             tableElement.setAttribute('data-show',target.value)
@@ -296,8 +296,8 @@ function table(tableElement) {
 
       tableElement.addEventListener('click', function(e){
         for (var target = e.target; target && target != this; target = target.parentNode) {
-          if (target.matches('.page-item:not(.active):not(.disabled) .page-link')) { 
-    
+          if (target.matches('.page-item:not(.active):not(.disabled) .page-link')) {
+
             paginateRows(tableElement.getAttribute('data-show'),target.getAttribute('data-page'));
             createPaginationButttons(randID,tableElement,tableElement.getAttribute('data-show'),target.getAttribute('data-page'),totalRows);
           }
@@ -307,7 +307,7 @@ function table(tableElement) {
       tableElement.addEventListener('change', function(e){
         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(randID,tableElement,tableElement.getAttribute('data-show'),target.value,totalRows);
           }
@@ -347,7 +347,7 @@ function table(tableElement) {
     });
   }
 
-  if(tableElement.getAttribute('data-reorder')){
+  if(tableElement.getAttribute('data-reorder') && tableElement.getAttribute('data-reorder') != "false"){
 
     // Add column heading
     const orderHeading = document.createElement('th');
@@ -361,22 +361,22 @@ function table(tableElement) {
     // Reset order button
     tableElement.addEventListener('click', function(e){
       for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('.table-order-reset')) { 
-  
+        if (target.matches('.table-order-reset')) {
+
           // unset sort attributes
           Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
             col.setAttribute('aria-sort','none');
           });
-  
+
           // Save the sort options on the table element so that it can be re-sorted later
           tableElement.removeAttribute('data-sort');
           tableElement.removeAttribute('data-sortBy');
-  
+
           // Sort the table
           sortTable('Order', 'ascending');
-  
+
           Array.from(tableElement.querySelectorAll('tbody tr')).forEach((tableRow, index) => {
-      
+
             tableRow.setAttribute('draggable','true');
           });
 
@@ -385,7 +385,7 @@ function table(tableElement) {
       }
     }, false);
 
-    
+
     document.addEventListener("dragover", function( e ) {
       // prevent default to allow drop
       e.preventDefault();
@@ -397,7 +397,7 @@ function table(tableElement) {
       e.dataTransfer.dropEffect = "move";
 
       for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-reorder] tbody tr')) { 
+        if (target.matches('[data-reorder] tbody tr')) {
 
           target.classList.add('tr--dropable')
         }
@@ -408,7 +408,7 @@ function table(tableElement) {
       // prevent default to allow drop
       e.preventDefault();
       for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-reorder] tbody tr')) { 
+        if (target.matches('[data-reorder] tbody tr')) {
 
           target.classList.remove('tr--dropable')
         }
@@ -420,8 +420,8 @@ function table(tableElement) {
       e.preventDefault();
 
       for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-reorder] tbody tr')) { 
-  
+        if (target.matches('[data-reorder] tbody tr')) {
+
           if(target.parentNode != null && draggedRow.parentNode != null && target != draggedRow){
 
             draggedRow.parentNode.removeChild( draggedRow );
@@ -432,7 +432,7 @@ function table(tableElement) {
               target.parentNode.insertBefore(draggedRow, target.nextElementSibling);
 
             // Re label the rows
-            Array.from(tbody.querySelectorAll('tr')).forEach((tableRowOrder, index) => { 
+            Array.from(tbody.querySelectorAll('tr')).forEach((tableRowOrder, index) => {
               tableRowOrder.classList.remove('tr--dragging')
               tableRowOrder.classList.remove('tr--dropable')
               tableRowOrder.querySelector('th').innerHTML = index + 1;
@@ -450,7 +450,7 @@ function table(tableElement) {
   // #endregion Reorderable
 
   // Watch for the filterable event and re-sort the tbody
-  tableElement.addEventListener('filtered', function (e) { 
+  tableElement.addEventListener('filtered', function (e) {
 
     if(tableElement.getAttribute('data-sortBy') && tableElement.getAttribute('data-sort'))
       sortTable(tableElement.getAttribute('data-sortBy'), tableElement.getAttribute('data-sort'));
@@ -478,7 +478,7 @@ function table(tableElement) {
     }
   }, false);
 
-  tableElement.addEventListener('sorted', function (e) { 
+  tableElement.addEventListener('sorted', function (e) {
 
     if(tableElement.getAttribute('data-reorder')){
 
@@ -486,7 +486,7 @@ function table(tableElement) {
     }
   }, false);
 
-  tableElement.addEventListener('populated', function (e) { 
+  tableElement.addEventListener('populated', function (e) {
 
     var tableFilter = tableElement.querySelector('.table__filters')
     tableFilter.remove();
@@ -582,4 +582,4 @@ ${strOptions}
   }
 }
 
-export default table
+export default table

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v3.0.0
+  * Bootstrap v3.1.0
   * Copyright 2011-2022 [object Object]
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -102,13 +102,16 @@
         if (window.matchMedia('(min-width: 62em)').matches) detail.removeAttribute('open');
       }, false);
     });
-    var observer = new IntersectionObserver(_ref => {
-      var [e] = _ref;
-      return e.target.classList.toggle("is-stuck", e.intersectionRatio < 1);
-    }, {
-      threshold: [1]
-    });
-    observer.observe(element);
+
+    if ('IntersectionObserver' in window) {
+      var observer = new IntersectionObserver(_ref => {
+        var [e] = _ref;
+        return e.target.classList.toggle("is-stuck", e.intersectionRatio < 1);
+      }, {
+        threshold: [1]
+      });
+      observer.observe(element);
+    }
   };
 
   function table(tableElement) {
@@ -373,7 +376,7 @@
       });
     };
 
-    if (tableElement.getAttribute('data-reorder')) {
+    if (tableElement.getAttribute('data-reorder') && tableElement.getAttribute('data-reorder') != "false") {
       // Add column heading
       var orderHeading = document.createElement('th');
       orderHeading.innerHTML = 'Order';
@@ -529,36 +532,40 @@
     }
   };
 
-  function accordion(accordionElement) {
-      // Fetch all the details element.
-      if (!accordionElement.classList.contains('accordion--keep-open')) {
-          var details_1 = accordionElement.querySelectorAll(":scope > details");
-          // Add the onclick listeners.
-          details_1.forEach(function (targetDetail) {
-              targetDetail.addEventListener("click", function () {
-                  // Close all the details that are not targetDetail.
-                  details_1.forEach(function (detail) {
-                      if (detail !== targetDetail) {
-                          detail.removeAttribute("open");
-                      }
-                  });
-              });
-          });
-      }
-      if (window.location.hash && document.querySelector(window.location.hash + ':not([open]) summary')) {
-          var detail = document.querySelector(window.location.hash + ' summary');
-          if (detail instanceof HTMLElement) {
-              detail.click();
-          }
-      }
-      window.addEventListener('hashchange', function () {
-          if (window.location.hash && document.querySelector(window.location.hash + ' summary')) {
-              var detail = document.querySelector(window.location.hash + ' summary');
-              if (detail instanceof HTMLElement) {
-                  detail.click();
-              }
-          }
-      });
+  function accordion(accordionElement) {
+    // Fetch all the details element.
+    if (!accordionElement.classList.contains('accordion--keep-open')) {
+      var details = accordionElement.querySelectorAll(":scope > details"); // Add the onclick listeners.
+
+      details.forEach(targetDetail => {
+        targetDetail.addEventListener("click", () => {
+          // Close all the details that are not targetDetail.
+          details.forEach(detail => {
+            if (detail !== targetDetail) {
+              detail.removeAttribute("open");
+            }
+          });
+        });
+      });
+    }
+
+    if (window.location.hash && document.querySelector(window.location.hash + ':not([open]) summary')) {
+      var detail = document.querySelector(window.location.hash + ' summary');
+
+      if (detail instanceof HTMLElement) {
+        detail.click();
+      }
+    }
+
+    window.addEventListener('hashchange', function () {
+      if (window.location.hash && document.querySelector(window.location.hash + ' summary')) {
+        var _detail = document.querySelector(window.location.hash + ' summary');
+
+        if (_detail instanceof HTMLElement) {
+          _detail.click();
+        }
+      }
+    });
   }
 
   function testimonial(testimonialElement) {
@@ -710,9 +717,13 @@
 
   function inputRedirect(inputWrapper) {
     inputWrapper.addEventListener('change', function (e) {
-      var url = inputWrapper.getAttribute('data-redirect');
-      var desiredValue = inputWrapper.getAttribute('data-value-if');
-      if (inputWrapper.value == desiredValue) document.location.href = url;
+      if (inputWrapper.matches('[data-value-if]')) {
+        var url = inputWrapper.getAttribute('data-redirect');
+        var desiredValue = inputWrapper.getAttribute('data-value-if');
+        if (inputWrapper.value == desiredValue) document.location.href = url;
+      } else {
+        if (typeof inputWrapper.value != "undefined") document.location.href = inputWrapper.value;
+      }
     }, false);
   } //
 
@@ -748,7 +759,7 @@
     Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement, index) => {
       inputRange(arrayElement);
     });
-    Array.from(formElement.querySelectorAll('[data-redirect][data-value-if]')).forEach((arrayElement, index) => {
+    Array.from(formElement.querySelectorAll('[data-redirect]')).forEach((arrayElement, index) => {
       inputRedirect(arrayElement);
     });
     Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement, index) => {
@@ -985,7 +996,7 @@
     window.onhashchange = locationHashChanged;
   };
 
-  // Modules
+  // @ts-nocheck
   // Attach classes to dom elements
   document.addEventListener("DOMContentLoaded", function () {
       addBodyClasses(document.body);
@@ -993,35 +1004,35 @@
       checkElements(document.body);
       console.log('test.js');
       // ANav
-      Array.from(document.querySelectorAll('.nav')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.nav')).forEach(function (arrayElement) {
           navbar(arrayElement);
       });
       // Advanced tables
-      Array.from(document.querySelectorAll('.table__wrapper')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.table__wrapper')).forEach(function (arrayElement) {
           table(arrayElement);
       });
       // Accordions
-      Array.from(document.querySelectorAll('.accordion')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.accordion')).forEach(function (arrayElement) {
           accordion(arrayElement);
       });
       // Testimonial
-      Array.from(document.querySelectorAll('.testimonial')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.testimonial')).forEach(function (arrayElement) {
           testimonial(arrayElement);
       });
       // Carousel
-      Array.from(document.querySelectorAll('.carousel')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.carousel')).forEach(function (arrayElement) {
           carousel(arrayElement);
       });
       // Form
-      Array.from(document.querySelectorAll('form')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('form')).forEach(function (arrayElement) {
           form(arrayElement);
       });
       // Modal
-      Array.from(document.querySelectorAll('.modal')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.modal')).forEach(function (arrayElement) {
           modal(arrayElement);
       });
       // YouTube videos
-      Array.from(document.querySelectorAll('.youtube-embed')).forEach(function (arrayElement, index) {
+      Array.from(document.querySelectorAll('.youtube-embed')).forEach(function (arrayElement) {
           new youtubeVideo(arrayElement);
       });
       window.addEventListener('hashchange', function () {