@iamproperty/components 3.2.0 → 3.4.4

package/assets/js/modules/modal.js

@@ -1,90 +1,69 @@
+// @ts-nocheck
 const modal = (element) => {
-
-  const links = element.querySelectorAll('.modal__outer a, .modal__outer button');
-  const firstLink = links[0]
-  const lastLink = links[links.length - 1]
-  const modalID = element.getAttribute('id');
-
-  const closeModal = function(){
-    const button = document.querySelector('[href="'+window.location.hash+'"]');
-    button.focus();
-    window.location.hash = "close";
-    history.replaceState("", document.title, window.location.pathname + window.location.search);
-
-    // If there is more than one video lets make sure there is only one playing at a time.
-    if(typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
-      window.player.pauseVideo();
-  }
-
-  // Trap the tab focus inside
-  element.addEventListener('keydown', function(e){
-
-    if(e.key === "Tab" && e.shiftKey && document.activeElement == firstLink){
-
-      e.preventDefault();
-      lastLink.focus();
+    const links = element.querySelectorAll('.modal__outer a, .modal__outer button');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    const modalID = element.getAttribute('id');
+    const closeModal = function () {
+        const button = document.querySelector('[href="' + window.location.hash + '"]');
+        button.focus();
+        window.location.hash = "close";
+        history.replaceState("", document.title, window.location.pathname + window.location.search);
+        // If there is more than one video lets make sure there is only one playing at a time.
+        if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
+            window.player.pauseVideo();
+    };
+    // Trap the tab focus inside
+    element.addEventListener('keydown', function (e) {
+        if (e.key === "Tab" && e.shiftKey && document.activeElement == firstLink) {
+            e.preventDefault();
+            lastLink.focus();
+        }
+        else if (e.key === "Tab" && !e.shiftKey && document.activeElement == lastLink) {
+            e.preventDefault();
+            firstLink.focus();
+        }
+    });
+    // ESC will close the open modal
+    document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && document.querySelector('.modal:target'))
+            closeModal();
+    });
+    element.addEventListener('click', function (e) {
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+            // Close links will close the model by default but we want to remove the hash link also
+            if (target.matches('[href="#close"]')) {
+                e.preventDefault();
+                closeModal();
+                break;
+            }
+            // Dock the modal to the right or left to make the content behind readable
+            else if (target.matches('.modal__dock--right')) {
+                e.preventDefault();
+                if (!element.classList.contains('modal--left'))
+                    element.classList.add('modal--right');
+                element.classList.remove('modal--left');
+                break;
+            }
+            else if (target.matches('.modal__dock--left')) {
+                e.preventDefault();
+                if (!element.classList.contains('modal--right'))
+                    element.classList.add('modal--left');
+                element.classList.remove('modal--right');
+                break;
+            }
+        }
+    });
+    function locationHashChanged() {
+        if (location.hash === '#' + modalID) {
+            console.log("Modal is now open");
+            const videoButton = document.querySelector('.modal:target .modal__inner > .youtube-embed:first-child:last-child a');
+            console.log(videoButton);
+            if (videoButton) {
+                videoButton.click();
+            }
+        }
     }
-    else if(e.key === "Tab" && !e.shiftKey && document.activeElement == lastLink) {
-
-      e.preventDefault();
-      firstLink.focus();
-    }
-  });
-
-  // ESC will close the open modal
-  document.addEventListener("keydown", function(e){
-    if (e.key === "Escape" && document.querySelector('.modal:target'))
-      closeModal();
-  });
-
-  element.addEventListener('click', function(e){
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-
-      // Close links will close the model by default but we want to remove the hash link also
-      if (target.matches('[href="#close"]')) {
-        
-        e.preventDefault();
-        closeModal();
-        break;
-      }
-      // Dock the modal to the right or left to make the content behind readable
-      else if (target.matches('.modal__dock--right')) {
-        
-        e.preventDefault();
-        if(!element.classList.contains('modal--left'))
-          element.classList.add('modal--right');
-
-        element.classList.remove('modal--left');
-
-        break;
-      }   
-      else if (target.matches('.modal__dock--left')) {
-        
-        e.preventDefault();
-
-        if(!element.classList.contains('modal--right'))
-          element.classList.add('modal--left');
-
-        element.classList.remove('modal--right');
-
-        break;
-      }
-    }
-  });
-
-  function locationHashChanged() {
-    if (location.hash === '#'+modalID) {
-      console.log("Modal is now open");
-      const videoButton = document.querySelector('.modal:target .modal__inner > .youtube-embed:first-child:last-child a');
-
-      console.log(videoButton)
-      if (videoButton){
-        videoButton.click();
-      }
-        
-    }
-  }
-  window.onhashchange = locationHashChanged;
-}
-
-export default modal
+    window.onhashchange = locationHashChanged;
+};
+export default modal;

package/assets/js/modules/nav.js

@@ -1,28 +1,18 @@
+// @ts-nocheck
 const navbar = (element) => {
-
-  Array.from(element.querySelectorAll('details')).forEach((detail, index) => {
-
-    detail.addEventListener('mouseenter', function(e){
-
-      if(window.matchMedia('(min-width: 62em)').matches)
-        detail.setAttribute('open','true')
-    }, false);
-
-    detail.addEventListener('mouseleave', function(e){
-
-      if(window.matchMedia('(min-width: 62em)').matches)
-        detail.removeAttribute('open')
-    }, false);
-  });
-
-  if ('IntersectionObserver' in window) {
-    const observer = new IntersectionObserver(
-      ([e]) => e.target.classList.toggle("is-stuck", e.intersectionRatio < 1),
-      { threshold: [1] }
-    );
-
-    observer.observe(element);
-  }
-}
-
-export default navbar
+    Array.from(element.querySelectorAll('details')).forEach((detail, index) => {
+        detail.addEventListener('mouseenter', function (e) {
+            if (window.matchMedia('(min-width: 62em)').matches)
+                detail.setAttribute('open', 'true');
+        }, false);
+        detail.addEventListener('mouseleave', function (e) {
+            if (window.matchMedia('(min-width: 62em)').matches)
+                detail.removeAttribute('open');
+        }, false);
+    });
+    if ('IntersectionObserver' in window) {
+        const observer = new IntersectionObserver(([e]) => e.target.classList.toggle("is-stuck", e.intersectionRatio < 1), { threshold: [1] });
+        observer.observe(element);
+    }
+};
+export default navbar;

package/assets/js/modules/orderablelist.js

@@ -1,122 +1,91 @@
+// @ts-nocheck
 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`);
+    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`);
     });
-  }
-
-  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')
-      }
+    function setDraggedRow(e) {
+        e.dataTransfer.setData("text/plain", e.target.id);
+        draggedRow = e.target;
+        e.target.classList.add('li--dragging');
     }
-  }, 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')
-      }
+    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`);
+        });
     }
-  }, 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);
+    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');
+            }
         }
-        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);
-
+    }, 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;