@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/modules/orderablelist.ts

@@ -1,123 +1,131 @@
 // @ts-nocheck
 function orderlist(list) {
-  const randID = 'list_'+Math.random().toString(36).substr(2, 9);
+  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.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`);
+    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);
+    e.dataTransfer.setData('text/plain', e.target.id);
     draggedRow = e.target;
     e.target.classList.add('li--dragging');
   }
 
-  function resetItems(){
-
+  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`);
+      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')) {
+  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';
 
-        target.classList.add('li--dropable')
+      for (let 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(
+    'dragleave',
+    function (e) {
+      // prevent default to allow drop
+      e.preventDefault();
+      for (let target = e.target; target && target != this; target = target.parentNode) {
+        if (target.matches('li')) {
+          target.classList.remove('li--dropable');
+        }
       }
-    }
-  }, false);
+    },
+    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 );
+  list.addEventListener(
+    'drop',
+    function (e) {
+      e.preventDefault();
 
-          if(draggedRow.getAttribute('data-order') > target.getAttribute('data-order'))
-            target.parentNode.insertBefore(draggedRow, target);
-          else
-            target.parentNode.insertBefore(draggedRow, target.nextElementSibling);
+      for (let 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);
 
-          resetItems();
+            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);
+            //tableElement.dispatchEvent(reorderedEvent);
+          }
+          break;
         }
-        break;
       }
-    }
-  }, false);
+    },
+    false
+  );
 
-  list.addEventListener("keydown", function( e ) {
+  list.addEventListener(
+    'keydown',
+    function (e) {
+      const item = e.target;
 
-    let item = e.target;
+      if (e.keyCode == 38) {
+        e.preventDefault();
 
-    if(e.keyCode == 38){
-      e.preventDefault();
+        if (item.previousElementSibling) item.parentNode.insertBefore(item, item.previousElementSibling);
 
-      if (item.previousElementSibling)
-        item.parentNode.insertBefore(item, item.previousElementSibling);
+        item.focus();
+      } else if (e.keyCode == 40) {
+        e.preventDefault();
 
-      item.focus();
-    }
-    else if(e.keyCode == 40){
-      e.preventDefault();
-
-      if (item.nextElementSibling)
-        item.parentNode.insertBefore(item.nextElementSibling, item);
-
-      item.focus();
-    }
+        if (item.nextElementSibling) item.parentNode.insertBefore(item.nextElementSibling, item);
 
-    resetItems();
-
-  }, false);
+        item.focus();
+      }
 
+      resetItems();
+    },
+    false
+  );
 }
 
 export default orderlist;

package/assets/ts/modules/pagination.ts

@@ -1,41 +1,36 @@
-const createPaginationButttons = function(controller: any,pagination: any){
-  
-  if(!controller.getAttribute('data-pages'))
-    return false;
+const createPaginationButttons = function (controller: any, pagination: any) {
+  if (!controller.getAttribute('data-pages')) return false;
 
-  if(!controller.getAttribute('data-page'))
-    controller.setAttribute('data-page', 1);
+  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');
+  const currentPage = controller.getAttribute('data-page');
+  const numberPages = controller.getAttribute('data-pages');
+  const numberRows = controller.getAttribute('data-total');
+  const showRows = controller.getAttribute('data-show');
+  const addRows = controller.getAttribute('data-increment');
 
-  if(numberPages <= 1){
-    
+  if (numberPages <= 1) {
     pagination.innerHTML = '';
     return false;
   }
-  
+
   let strOptions = '';
 
   for (let i = 1; i <= numberPages; i++) {
-
     strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
   }
 
   pagination.innerHTML = `<div class="pagination mb-0 d-none d-sm-flex">
     <div><select>${strOptions}</select></div>
-    <button class="prev" ${currentPage == 1 ?'disabled':''} data-page="${parseInt(currentPage)-1}">Previous</button>
-    <button class="next" ${currentPage == numberPages ?'disabled':''} data-page="${parseInt(currentPage)+1}">Next</button>
+    <button class="prev" ${currentPage == 1 ? 'disabled' : ''} data-page="${parseInt(currentPage) - 1}">Previous</button>
+    <button class="next" ${currentPage == numberPages ? 'disabled' : ''} data-page="${parseInt(currentPage) + 1}">Next</button>
   </div>`;
   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>
+  <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;