Fix marquee nesting and add seamless scroll support (#1925)

relates to xibosignageltd/xibo-private#352
xibosignage · Jul 20, 2023 · 669be95 · 669be95
1 parent a5838f1
commit 669be95
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/modules/src/xibo-layout-animate.js b/modules/src/xibo-layout-animate.js
@@ -34,15 +34,15 @@ jQuery.fn.extend({
         options.effect === 'marqueeUp' ||
         options.effect === 'marqueeDown'
       ) {
-        $contentDiv.find('.scroll').marquee();
+        $contentDiv.find('.scroll:not(.animating)').marquee();
       } else if (
         options.effect === 'marqueeLeft' ||
         options.effect === 'marqueeRight'
       ) {
         if (isAndroid) {
-          $contentDiv.find('.scroll').overflowMarquee();
+          $contentDiv.find('.scroll:not(.animating)').overflowMarquee();
         } else {
-          $contentDiv.find('.scroll').marquee();
+          $contentDiv.find('.scroll:not(.animating)').marquee();
         }
       } else if (options.effect !== 'none') { // Cycle effect
         // Resume effect

diff --git a/modules/src/xibo-text-render.js b/modules/src/xibo-text-render.js
@@ -41,6 +41,7 @@ jQuery.fn.extend({
       widgetDesignHeight: 0,
       widgetDesignGap: 0,
       displayDirection: 0,
+      seamless: true,
     };
 
     options = $.extend({}, defaults, options);
@@ -52,16 +53,25 @@ jQuery.fn.extend({
       // Remove animation items
       $contentDiv.find('.text-render-anim-item').remove();
 
+      // If options is seamless, remove second .scroll marquee div
+      // so we don't have duplicated elements
+      if (
+        options.seamless &&
+        $contentDiv.find('.scroll .js-marquee').length > 1
+      ) {
+        $contentDiv.find('.scroll .js-marquee')[1].remove();
+      }
+
       // Show and reset the hidden elements
       const $originalElements =
         $contentDiv.find('.text-render-hidden-element');
       $originalElements.removeClass('text-render-hidden-element').show();
 
       // If we have a scroll container, move elements
       // to content and destroy container
-      if ($contentDiv.find('div[class="scroll"]').length > 0) {
+      if ($contentDiv.find('.scroll').length > 0) {
         $originalElements.appendTo($contentDiv);
-        $contentDiv.find('div[class="scroll"]').remove();
+        $contentDiv.find('.scroll').remove();
       }
     };
 
@@ -405,7 +415,7 @@ jQuery.fn.extend({
             'data-is-legacy': false,
             'data-speed': options.speed / 25 * 1000,
             'data-direction': options.direction,
-            'data-duplicated': true,
+            'data-duplicated': options.seamless,
             scaleFactor: options.scaleFactor,
           });
         } else {
@@ -440,6 +450,9 @@ jQuery.fn.extend({
           } else {
             $contentDiv.find('.scroll').overflowMarquee();
           }
+
+          // Add animating class to prevent multiple inits
+          $contentDiv.find('.scroll').addClass('animating');
         }
       }