@iamproperty/components 2.7.9 → 3.0.0

package/assets/js/modules/testimonial.js

@@ -1,83 +1,83 @@
-function testimonial(testimonialElement) {
-
-  var scrollTimeout;
-  const imagesCarousel = testimonialElement.querySelector('.testimonial__images');
-  const itemCount = imagesCarousel.querySelectorAll('img').length;
-
-  // If we only have 1 item lets not bother doing anything else
-  if(itemCount == 1){
-    return false;
-  }
-
-  testimonialElement.classList.add('testimonial--multi')
-
-  // Set where the buttons go to
-  const setButtons = function(scrollTo){
-
-    const nextButton = testimonialElement.querySelector('.btn-next');
-    const prevButton = testimonialElement.querySelector('.btn-prev');
-
-    nextButton.setAttribute('data-go',scrollTo+1);
-    prevButton.setAttribute('data-go',scrollTo-1);
-    nextButton.removeAttribute('disabled')
-    prevButton.removeAttribute('disabled')
-
-    if(scrollTo == 1)
-      prevButton.setAttribute('disabled',true);
-    else if(scrollTo == itemCount)
-      nextButton.setAttribute('disabled',true);
-  }
-
-  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-  imagesCarousel.addEventListener('scroll', function(e){
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
-        
-      let scrollWidth = imagesCarousel.scrollWidth;
-      let scrollHeight = imagesCarousel.scrollHeight;
-      let scrollLeft = imagesCarousel.scrollLeft;
-      let scrollDown = imagesCarousel.scrollTop;
-      let scrollTo = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-
-      // Change in scroll direction
-      if(scrollLeft == 0 && scrollDown != 0)
-        scrollTo = Math.round((scrollDown / scrollHeight) * itemCount) + 1;
-
-      testimonialElement.setAttribute('data-show',scrollTo)
-      setButtons(scrollTo);
-    }, 300); 
-
-  }, false);
-
-  // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  testimonialElement.addEventListener('click', function(e){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-
-      if (target.matches('[data-go]')) {
-        
-        let scrollTo = parseInt(target.getAttribute('data-go'));
-        let scrollDown = 0;
-        let scrollLeft = 0
-        let scrollWidth = imagesCarousel.scrollWidth;
-        let scrollHeight = imagesCarousel.scrollHeight;
-        
-        if(scrollWidth > scrollHeight)
-          scrollLeft = Math.floor(scrollWidth * ((scrollTo-1) / itemCount))
-        else 
-          scrollDown = Math.floor(scrollHeight * ((scrollTo-1) / itemCount))
-        
-        // Trigger the scroll
-        imagesCarousel.scroll({
-          top: scrollDown,
-          left: scrollLeft, 
-          behavior: 'smooth'
-        });
-
-        break;
-      }
-    }
-  }, false);
-}
-
+function testimonial(testimonialElement) {
+
+  var scrollTimeout;
+  const imagesCarousel = testimonialElement.querySelector('.testimonial__images');
+  const itemCount = imagesCarousel.querySelectorAll('img').length;
+
+  // If we only have 1 item lets not bother doing anything else
+  if(itemCount == 1){
+    return false;
+  }
+
+  testimonialElement.classList.add('testimonial--multi')
+
+  // Set where the buttons go to
+  const setButtons = function(scrollTo){
+
+    const nextButton = testimonialElement.querySelector('.btn-next');
+    const prevButton = testimonialElement.querySelector('.btn-prev');
+
+    nextButton.setAttribute('data-go',scrollTo+1);
+    prevButton.setAttribute('data-go',scrollTo-1);
+    nextButton.removeAttribute('disabled')
+    prevButton.removeAttribute('disabled')
+
+    if(scrollTo == 1)
+      prevButton.setAttribute('disabled',true);
+    else if(scrollTo == itemCount)
+      nextButton.setAttribute('disabled',true);
+  }
+
+  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
+  imagesCarousel.addEventListener('scroll', function(e){
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(function(){ 
+        
+      let scrollWidth = imagesCarousel.scrollWidth;
+      let scrollHeight = imagesCarousel.scrollHeight;
+      let scrollLeft = imagesCarousel.scrollLeft;
+      let scrollDown = imagesCarousel.scrollTop;
+      let scrollTo = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
+
+      // Change in scroll direction
+      if(scrollLeft == 0 && scrollDown != 0)
+        scrollTo = Math.round((scrollDown / scrollHeight) * itemCount) + 1;
+
+      testimonialElement.setAttribute('data-show',scrollTo)
+      setButtons(scrollTo);
+    }, 300); 
+
+  }, false);
+
+  // when the buttons are used we need to make sure the carousel scrolls to the correct place
+  testimonialElement.addEventListener('click', function(e){
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+
+      if (target.matches('[data-go]')) {
+        
+        let scrollTo = parseInt(target.getAttribute('data-go'));
+        let scrollDown = 0;
+        let scrollLeft = 0
+        let scrollWidth = imagesCarousel.scrollWidth;
+        let scrollHeight = imagesCarousel.scrollHeight;
+        
+        if(scrollWidth > scrollHeight)
+          scrollLeft = Math.floor(scrollWidth * ((scrollTo-1) / itemCount))
+        else 
+          scrollDown = Math.floor(scrollHeight * ((scrollTo-1) / itemCount))
+        
+        // Trigger the scroll
+        imagesCarousel.scroll({
+          top: scrollDown,
+          left: scrollLeft, 
+          behavior: 'smooth'
+        });
+
+        break;
+      }
+    }
+  }, false);
+}
+
 export default testimonial

package/assets/js/modules/youtubevideo.js

@@ -1,145 +1,145 @@
-/**
- * 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 */
-  constructor(embed){
-
-    let createEmbed = this.createEmbed;
-
-    // If the scripts is already loaded then lets just create the embed
-    if(document.body.classList.contains('youtubeLoaded')){
-      embed.addEventListener('click', function(e){
-
-        // loop parent nodes from the target to the delegation node
-        for (var target = e.target; target && target != this; target = target.parentNode) {
-      
-          if (target.matches('a:not([data-modal-youtube]')) {
-  
-            e.preventDefault();
-            createEmbed(embed,target);
-            break;
-          }
-        }
-      }, false);
-    }
-    else {
-      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.
-   */
-  loadScripts(embed, createEmbed){
-    
-    return new Promise((resolve, reject) => {
-
-      const image = new Image();
-      image.onload = function(){
-        
-        // This code loads the IFrame Player API code asynchronously.
-        var tag = document.createElement('script');
-        tag.src = "https://www.youtube.com/iframe_api";
-        var firstScriptTag = document.getElementsByTagName('script')[0];
-        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-        document.body.classList.add('youtubeLoaded');
-        resolve(true);
-
-        // script has loaded, you can now use it safely
-        tag.onload = () => {
-
-          embed.addEventListener('click', function(e){
-            // loop parent nodes from the target to the delegation node
-            for (var target = e.target; target && target != this; target = target.parentNode) {
-          
-              if (target.matches('a:not([data-modal-youtube]')) {
-      
-                e.preventDefault();
-                createEmbed(embed,target);
-                break;
-              }
-            }
-          }, false);
-        }   
-
-      };
-      image.onerror = function(){
-        reject(false);
-      };
-      image.src = "https://youtube.com/favicon.ico";
-    });
-  
-  }
-
-  /**
-   * Create the YouTube embed after the user has clicked on it.
-   * @param {HTMLElement} embed dom element
-   */
-  createEmbed(embed,target){
-
-    // 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();
-
-
-    var video_id = target.getAttribute('data-id');
-    var link_id = target.getAttribute('id')
-    
-    // create an id to pass t the script if one isn't present
-    if(typeof link_id == 'undefined' || link_id == null){
-
-      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.          
-    function onYouTubeIframeAPIReady() {
-
-      window.player = new YT.Player(link_id, {
-        height: '100%',
-        width: '100%',
-        videoId: video_id,
-        playerVars: { 
-          'modestbranding': 1,
-          'playsinline': 1,
-          'rel': 0,
-          'showinfo': 0
-        },
-        events: {
-          'onReady': onPlayerReady,
-          'onStateChange': onPlayerStateChange
-        }
-      });
-
-    }
-    onYouTubeIframeAPIReady();
-    
-    // The API will call this function when the video player is ready.
-    function onPlayerReady(event) {
-      // Play the video straight away
-      event.target.playVideo();
-      
-    }
-
-    // The API calls this function when the player's state changes.
-    // The function indicates that when playing a video (state=1)
-    var done = false;
-    function onPlayerStateChange(event) {
-      
-      if (event.data == YT.PlayerState.PLAYING && !done) {
-        
-        var link = document.getElementById(link_id);
-        link.classList.add('player-ready');
-
-        done = true;
-      }
-    }
-  }
-}
-
-export default youtubeVideo
+/**
+ * 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 {Element} embed dom element */
+  constructor(embed){
+
+    let createEmbed = this.createEmbed;
+
+    // If the scripts is already loaded then lets just create the embed
+    if(document.body.classList.contains('youtubeLoaded')){
+      embed.addEventListener('click', function(e){
+
+        // loop parent nodes from the target to the delegation node
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+
+          if (target.matches('a:not([data-modal-youtube]')) {
+
+            e.preventDefault();
+            createEmbed(embed,target);
+            break;
+          }
+        }
+      }, false);
+    }
+    else {
+      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.
+   */
+  loadScripts(embed, createEmbed){
+
+    return new Promise((resolve, reject) => {
+
+      const image = new Image();
+      image.onload = function(){
+
+        // This code loads the IFrame Player API code asynchronously.
+        var tag = document.createElement('script');
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        document.body.classList.add('youtubeLoaded');
+        resolve(true);
+
+        // script has loaded, you can now use it safely
+        tag.onload = () => {
+
+          embed.addEventListener('click', function(e){
+            // loop parent nodes from the target to the delegation node
+            for (var target = e.target; target && target != this; target = target.parentNode) {
+
+              if (target.matches('a:not([data-modal-youtube]')) {
+
+                e.preventDefault();
+                createEmbed(embed,target);
+                break;
+              }
+            }
+          }, false);
+        }
+
+      };
+      image.onerror = function(){
+        reject(false);
+      };
+      image.src = "https://youtube.com/favicon.ico";
+    });
+
+  }
+
+  /**
+   * Create the YouTube embed after the user has clicked on it.
+   * @param {HTMLElement} embed dom element
+   */
+  createEmbed(embed,target){
+
+    // 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();
+
+
+    var video_id = target.getAttribute('data-id');
+    var link_id = target.getAttribute('id')
+
+    // create an id to pass t the script if one isn't present
+    if(typeof link_id == 'undefined' || link_id == null){
+
+      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.
+    function onYouTubeIframeAPIReady() {
+
+      window.player = new YT.Player(link_id, {
+        height: '100%',
+        width: '100%',
+        videoId: video_id,
+        playerVars: {
+          'modestbranding': 1,
+          'playsinline': 1,
+          'rel': 0,
+          'showinfo': 0
+        },
+        events: {
+          'onReady': onPlayerReady,
+          'onStateChange': onPlayerStateChange
+        }
+      });
+
+    }
+    onYouTubeIframeAPIReady();
+
+    // The API will call this function when the video player is ready.
+    function onPlayerReady(event) {
+      // Play the video straight away
+      event.target.playVideo();
+
+    }
+
+    // The API calls this function when the player's state changes.
+    // The function indicates that when playing a video (state=1)
+    var done = false;
+    function onPlayerStateChange(event) {
+
+      if (event.data == YT.PlayerState.PLAYING && !done) {
+
+        var link = document.getElementById(link_id);
+        link.classList.add('player-ready');
+
+        done = true;
+      }
+    }
+  }
+}
+
+export default youtubeVideo