up

assets/js/partners-marquee.js

@@ -0,0 +1,121 @@
+(function (root, factory) {
+    if (typeof module === "object" && module.exports) {
+        module.exports = factory();
+        return;
+    }
+
+    root.PartnerMarquee = factory();
+}(typeof self !== "undefined" ? self : this, function () {
+    "use strict";
+
+    function calculateCopies(viewportWidth, baseWidth) {
+        if (!viewportWidth || !baseWidth) {
+            return 2;
+        }
+
+        return Math.max(1, Math.ceil((viewportWidth + 1) / baseWidth));
+    }
+
+    function calculateDuration(segmentWidth) {
+        var minDuration = 18;
+        var pixelsPerSecond = 90;
+
+        if (!segmentWidth) {
+            return minDuration;
+        }
+
+        return Math.max(minDuration, Math.round((segmentWidth / pixelsPerSecond) * 10) / 10);
+    }
+
+    function buildSegmentMarkup(baseMarkup, copies) {
+        return new Array(copies + 1).join(baseMarkup);
+    }
+
+    function syncTrack(track) {
+        var marquee = track.parentNode;
+        var firstSet = track.querySelector(".partner-track-set");
+        var viewportWidth;
+        var baseWidth;
+        var copies;
+        var segmentMarkup;
+        var firstSegment;
+        var secondSegment;
+
+        if (!marquee || !firstSet) {
+            return;
+        }
+
+        if (!track.getAttribute("data-base-markup")) {
+            track.setAttribute("data-base-markup", firstSet.innerHTML.trim());
+        }
+
+        track.innerHTML = "";
+
+        firstSet = document.createElement("div");
+        firstSet.className = "partner-track-set";
+        firstSet.setAttribute("aria-hidden", "true");
+        firstSet.innerHTML = track.getAttribute("data-base-markup");
+        track.appendChild(firstSet);
+
+        viewportWidth = marquee.clientWidth;
+        baseWidth = firstSet.scrollWidth;
+        copies = calculateCopies(viewportWidth, baseWidth);
+        segmentMarkup = buildSegmentMarkup(track.getAttribute("data-base-markup"), copies);
+
+        track.innerHTML = "";
+
+        firstSegment = document.createElement("div");
+        firstSegment.className = "partner-track-set";
+        firstSegment.innerHTML = segmentMarkup;
+
+        secondSegment = document.createElement("div");
+        secondSegment.className = "partner-track-set";
+        secondSegment.setAttribute("aria-hidden", "true");
+        secondSegment.innerHTML = segmentMarkup;
+
+        track.appendChild(firstSegment);
+        track.appendChild(secondSegment);
+        track.style.animationDuration = calculateDuration(firstSegment.scrollWidth) + "s";
+    }
+
+    function syncAll() {
+        var tracks = document.querySelectorAll(".partner-track");
+        var i;
+
+        for (i = 0; i < tracks.length; i += 1) {
+            syncTrack(tracks[i]);
+        }
+    }
+
+    function debounce(fn, wait) {
+        var timer = null;
+
+        return function () {
+            clearTimeout(timer);
+            timer = setTimeout(fn, wait);
+        };
+    }
+
+    function init() {
+        if (!document.querySelector(".partner-track")) {
+            return;
+        }
+
+        syncAll();
+        window.addEventListener("resize", debounce(syncAll, 120));
+    }
+
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", init);
+        } else {
+            init();
+        }
+    }
+
+    return {
+        buildSegmentMarkup: buildSegmentMarkup,
+        calculateCopies: calculateCopies,
+        calculateDuration: calculateDuration
+    };
+}));

assets/js/script.js

@@ -95,7 +95,15 @@
         }
     }
 
-
+    // DATA BACKGROUND IMAGE
+    var sliderBgSetting = $(".slide-bg-image");
+    sliderBgSetting.each(function(indx){
+        if ($(this).attr("data-background")){
+            $(this).css("background-image", "url(" + $(this).data("background") + ")");
+        }
+    });
+
+
     // HERO SLIDER
     if (typeof Swiper === "function" && jQuery(".swiper-container").length) {
         var menu = [];
@@ -155,14 +163,6 @@
         var swiper = new Swiper(".swiper-container", swiperOptions);
     }
 
-    // DATA BACKGROUND IMAGE
-    var sliderBgSetting = $(".slide-bg-image");
-    sliderBgSetting.each(function(indx){
-        if ($(this).attr("data-background")){
-            $(this).css("background-image", "url(" + $(this).data("background") + ")");
-        }
-    });
-
 
 
     /*------------------------------------------
@@ -433,11 +433,11 @@
                     items: 3
                 },
 
-                1200 : {
-                    items: 4
-                }
-            }
-        });
+                992 : {
+                    items: 4
+                }
+            }
+        });
     }