122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
(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
|
|
};
|
|
}));
|