@iamproperty/components 3.0.0 → 3.2.0

package/assets/js/modules/modal.js

@@ -1,90 +1,90 @@
-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();
-    }
-    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;
-}
-
+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();
+    }
+    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

package/assets/js/modules/nav.js

@@ -1,28 +1,28 @@
-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
+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

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;