@iamproperty/components 2.7.7 → 2.9.0

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v2.7.6
+  * Bootstrap v3.0.0
   * Copyright 2011-2022 [object Object]
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -8,14 +8,14 @@
   factory();
 })((function () { 'use strict';
 
-  /** 
-   * Global helper functions to help maintain and enhance framework elements.
-   * @module Helpers 
+  /** 
+   * Global helper functions to help maintain and enhance framework elements.
+   * @module Helpers 
    */
 
-  /**
-   * Add global classes used by the CSS and later JavaScript.
-   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+  /**
+   * Add global classes used by the CSS and later JavaScript.
+   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
    */
   var addBodyClasses = body => {
     body.classList.add("js-enabled");
@@ -26,9 +26,23 @@
 
     return null;
   };
-  /**
-   * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function. 
-   * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
+  /**
+   * Add global events.
+   * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+   */
+
+  var addGlobalEvents = body => {
+    window.addEventListener('hashchange', function () {
+      var hash = location.hash.replace('#', '');
+      var label = document.querySelector("label[for=\"".concat(hash, "\"]"));
+      var detail = document.querySelector("details[id=\"".concat(hash, "\"]:not([open])"));
+      if (label) label.click();else if (detail) detail.setAttribute('open', 'open');
+    }, false);
+    return null;
+  };
+  /**
+   * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function. 
+   * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
    */
 
   var checkElements = element => {
@@ -38,9 +52,9 @@
       tableWrap(table);
     });
   };
-  /**
-   * Wrap tables with a table wrapper div to help maintain its responsive design.
-   * @param {HTMLElement} table Dom table element
+  /**
+   * Wrap tables with a table wrapper div to help maintain its responsive design.
+   * @param {HTMLElement} table Dom table element
    */
 
   var tableWrap = table => {
@@ -49,9 +63,9 @@
       table.outerHTML = "<div class=\"table__wrapper\">".concat(tableHTML, "</div>");
     }
   };
-  /**
-   * Creates data attributes to be used by the CSS for mobile views.
-   * @param {HTMLElement} table Dom table element
+  /**
+   * Creates data attributes to be used by the CSS for mobile views.
+   * @param {HTMLElement} table Dom table element
    */
 
   var tableStacked = table => {
@@ -515,35 +529,36 @@
     }
   };
 
-  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');
-      detail.click();
-    }
-
-    window.addEventListener('hashchange', function () {
-      if (window.location.hash && document.querySelector(window.location.hash + ' summary')) {
-        var _detail = document.querySelector(window.location.hash + ' summary');
-
-        _detail.click();
-      }
-    });
+  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 testimonial(testimonialElement) {
@@ -781,11 +796,11 @@
     }, false);
   }
 
-  /**
-   * Integrate YouTube videos as a way of hosting videos without the overhead and worry surrounding hosting vides. i.e. file sizes, performance and accessibility.
+  /**
+   * Integrate YouTube videos as a way of hosting videos without the overhead and worry surrounding hosting vides. i.e. file sizes, performance and accessibility.
    */
   class youtubeVideo {
-    /** @param {HTMLElement} embed dom element */
+    /** @param {Element} embed dom element */
     constructor(embed) {
       var createEmbed = this.createEmbed; // If the scripts is already loaded then lets just create the embed
 
@@ -804,10 +819,10 @@
         this.loadScripts(embed, this.createEmbed);
       }
     }
-    /**
-     * Load the YouTube scripts before trying to create the embed
-     * @param {HTMLElement} embed dom element
-     * @param {Function} createEmbed function to create the embed after script loaded.
+    /**
+     * Load the YouTube scripts before trying to create the embed
+     * @param {HTMLElement} embed dom element
+     * @param {Function} createEmbed function to create the embed after script loaded.
      */
 
 
@@ -845,9 +860,9 @@
         image.src = "https://youtube.com/favicon.ico";
       });
     }
-    /**
-     * Create the YouTube embed after the user has clicked on it.
-     * @param {HTMLElement} embed dom element
+    /**
+     * Create the YouTube embed after the user has clicked on it.
+     * @param {HTMLElement} embed dom element
      */
 
 
@@ -861,7 +876,7 @@
         var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
         link_id = randLetter + Date.now();
         target.setAttribute('id', link_id);
-      } // This function creates an <iframe> (and YouTube player) after the API code downloads.          
+      } // This function creates an <iframe> (and YouTube player) after the API code downloads.
 
 
       function onYouTubeIframeAPIReady() {
@@ -904,44 +919,118 @@
 
   }
 
-  // Bootstrap modules
+  var modal = element => {
+    var links = element.querySelectorAll('.modal__outer a, .modal__outer button');
+    var firstLink = links[0];
+    var lastLink = links[links.length - 1];
+    var modalID = element.getAttribute('id');
 
-  document.addEventListener("DOMContentLoaded", function () {
-    addBodyClasses(document.body);
-    checkElements(document.body);
-    console.log('test.js'); // ANav
+    var closeModal = function closeModal() {
+      var 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.
 
-    Array.from(document.querySelectorAll('.nav')).forEach((arrayElement, index) => {
-      navbar(arrayElement);
-    }); // Advanced tables
+      if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function") window.player.pauseVideo();
+    }; // Trap the tab focus inside
 
-    Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement, index) => {
-      table(arrayElement);
-    }); // Accordions
 
-    Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement, index) => {
-      accordion(arrayElement);
-    }); // Testimonial
+    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
 
-    Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement, index) => {
-      testimonial(arrayElement);
-    }); // Carousel
+    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;
+        }
+      }
+    });
 
-    Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement, index) => {
-      carousel(arrayElement);
-    }); // Form
+    function locationHashChanged() {
+      if (location.hash === '#' + modalID) {
+        console.log("Modal is now open");
+        var videoButton = document.querySelector('.modal:target .modal__inner > .youtube-embed:first-child:last-child a');
+        console.log(videoButton);
 
-    Array.from(document.querySelectorAll('form')).forEach((arrayElement, index) => {
-      form(arrayElement);
-    }); // Modal
+        if (videoButton) {
+          videoButton.click();
+        }
+      }
+    }
 
-    Array.from(document.querySelectorAll('.modal')).forEach((arrayElement, index) => {
-      modal(arrayElement);
-    }); // YouTube videos
+    window.onhashchange = locationHashChanged;
+  };
 
-    Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement, index) => {
-      new youtubeVideo(arrayElement);
-    });
+  // Modules
+  // Attach classes to dom elements
+  document.addEventListener("DOMContentLoaded", function () {
+      addBodyClasses(document.body);
+      addGlobalEvents();
+      checkElements(document.body);
+      console.log('test.js');
+      // ANav
+      Array.from(document.querySelectorAll('.nav')).forEach(function (arrayElement, index) {
+          navbar(arrayElement);
+      });
+      // Advanced tables
+      Array.from(document.querySelectorAll('.table__wrapper')).forEach(function (arrayElement, index) {
+          table(arrayElement);
+      });
+      // Accordions
+      Array.from(document.querySelectorAll('.accordion')).forEach(function (arrayElement, index) {
+          accordion(arrayElement);
+      });
+      // Testimonial
+      Array.from(document.querySelectorAll('.testimonial')).forEach(function (arrayElement, index) {
+          testimonial(arrayElement);
+      });
+      // Carousel
+      Array.from(document.querySelectorAll('.carousel')).forEach(function (arrayElement, index) {
+          carousel(arrayElement);
+      });
+      // Form
+      Array.from(document.querySelectorAll('form')).forEach(function (arrayElement, index) {
+          form(arrayElement);
+      });
+      // Modal
+      Array.from(document.querySelectorAll('.modal')).forEach(function (arrayElement, index) {
+          modal(arrayElement);
+      });
+      // YouTube videos
+      Array.from(document.querySelectorAll('.youtube-embed')).forEach(function (arrayElement, index) {
+          new youtubeVideo(arrayElement);
+      });
+      window.addEventListener('hashchange', function () {
+          var hash = location.hash.replace('#', '');
+          var label = document.querySelector("label[for=\"".concat(hash, "\"]"));
+          if (label instanceof HTMLElement) {
+              label.click();
+          }
+      }, false);
   });
 
 }));