various updates

Author: adictonator

assets/images/arrows.png

@@ -1,100 +1,22 @@
-/*
-	Vanilla Javascript Marquee
-	Version: 0.2.1
-	Author: Robert Bossaert <https://github.com/robertbossaert>
-	Example call:
-
-	new Marquee('element');
-
-	new Marquee('element', {
-		direction: 'rtl',
-	});
-*/
-var Marquee = function (element, defaults) {
-  var elem = document.getElementById(element),
-    options = (defaults === undefined) ? {} : defaults,
-    continuous = options.continuous || true,	// once or continuous
-    direction = options.direction || 'ltr', 	// ltr or rtl
-    loops = options.loops || -1,
-    speed = options.speed || 0.5,
-    milestone = 0,
-    marqueeElem = null,
-    elemWidth = null,
-    self = this,
-    ltrCond = 0,
-    loopCnt = 0,
-    start = 0,
-    textcolor = options.textcolor || '#000000', // Define the text color
-    bgcolor = options.bgcolor || '#ffffff', // Define the background color
-    opacity = options.opacity || 1.0,
-    process = null,
-    constructor = function (elem) {
-
-      // Build html
-      var elemHTML = elem.innerHTML;
-      var elemNode = elem.childNodes[1] || elem;
-      elemWidth = elemNode.offsetWidth;
-      marqueeElem = '<div>' + elemHTML + '</div>';
-      elem.innerHTML = marqueeElem;
-      marqueeElem = elem.getElementsByTagName('div')[0];
-      elem.style.overflow = 'hidden';
-      marqueeElem.style.whiteSpace = 'nowrap';
-      marqueeElem.style.position = 'relative';
-      marqueeElem.style.color = textcolor;
-      marqueeElem.style.backgroundColor = bgcolor;
-      marqueeElem.style.opacity = opacity;
-
-      if (continuous) {
-        marqueeElem.innerHTML += elemHTML;
-        marqueeElem.style.width = '200%';
-
-        if (direction === 'ltr') {
-          start = -elemWidth;
-        }
-      } else {
-        ltrCond = elem.offsetWidth;
-
-        if (direction === 'rtl') {
-          milestone = ltrCond;
-        }
-      }
-
-      if (direction === 'ltr') {
-        milestone = -elemWidth;
-      } else if (direction === 'rtl') {
-        speed = -speed;
+  function Marquee(selector, speed) {
+    const parentSelector = document.querySelector(selector);
+    const clone = parentSelector.innerHTML;
+    const firstElement = parentSelector.children[0];
+    let i = 0;
+    console.log(firstElement);
+    parentSelector.insertAdjacentHTML('beforeend', clone);
+    parentSelector.insertAdjacentHTML('beforeend', clone);
+
+    setInterval(function () {
+      firstElement.style.marginLeft = `-${i}px`;
+      if (i > firstElement.clientWidth) {
+        i = 0;
       }
-
-      self.start();
-
-      return marqueeElem;
-    }
-
-  this.start = function () {
-    process = window.setInterval(function () {
-      self.play();
-    });
-  };
-
-  this.play = function () {
-    // beginning
-    marqueeElem.style.left = start + 'px';
-    start = start + speed;
-
-    if (start > ltrCond || start < -elemWidth) {
-      start = milestone;
-      loopCnt++;
-
-      if (loops !== -1 && loopCnt >= loops) {
-        marqueeElem.style.left = 0;
-      }
-    }
-  }
-
-  this.end = function () {
-    window.clearInterval(process);
+      i = i + speed;
+    }, 0);
   }
 
-  // Init plugin
-  marqueeElem = constructor(elem);
-}
+  //after window is completed load
+  //1 class selector for marquee
+  //2 marquee speed 0.2
+  window.addEventListener('load', Marquee('[data-trusted-brands]', 0.5))

assets/js/marquee.js

@@ -180,6 +180,7 @@
 </footer>
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
+<?php wp_footer(); ?>
 </body>
 
 </html>

footer.php

@@ -144,13 +144,14 @@ function cjt_scripts()
 {
 	wp_enqueue_style('cjt-style', get_stylesheet_uri(), array(), _S_VERSION);
 
-	wp_enqueue_script('cjt-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true);
+	wp_enqueue_script('cjt-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), _S_VERSION, true);
+	wp_enqueue_script('cjt-marquee', get_template_directory_uri() . '/assets/js/marquee.js', array(), _S_VERSION, true);
 
 	if (is_singular() && comments_open() && get_option('thread_comments')) {
 		wp_enqueue_script('comment-reply');
 	}
 }
-add_action('wp_enqueue_scripts', 'cjt_scripts');
+add_action('wp_enqueue_scripts', 'cjt_scripts', 1);
 
 /**
  * Implement the Custom Header feature.