@iamproperty/components 3.2.0 → 3.4.5

package/assets/js/modules/testimonial.js

@@ -1,83 +1,64 @@
+// @ts-nocheck
 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;
-      }
+    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;
     }
-  }, 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
+export default testimonial;

package/assets/js/modules/youtubevideo.js

@@ -1,145 +1,114 @@
+// @ts-nocheck
 /**
  * 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;
-          }
+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);
         }
-      }, 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";
+        });
     }
-  }
-
-  /**
-   * 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);
+    /**
+     * 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);
         }
-
-      };
-      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
+        // 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;
+            }
         }
-      });
-
-    }
-    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
+export default youtubeVideo;