wait #7831 @4:00

diff --git a/framework/application/views/helpers/Logos.php b/framework/application/views/helpers/Logos.php
index a3489dd4a3467160bfa284b252b8f8a28d872d03..5329d9e8234adbf5ec26526cf0cc06b133c480e1 100644 (file)
--- a/framework/application/views/helpers/Logos.php
+++ b/framework/application/views/helpers/Logos.php
@@ -5,7 +5,7 @@ class Fluidbook_View_Helper_Logos extends CubeIT_View_Helper_Abstract {
         * @return string\r
         */\r
        public function logos($logos, $wrapper_element = 'section') {\r
-        $this->headScript()->addSplideCarousel();\r
+        $this->headScript()->addDynamicMarquee();\r
 \r
                $images = CubeIT_Util_Cms::extractFiles($logos);\r
                if (!count($images)) {\r
@@ -17,11 +17,17 @@ class Fluidbook_View_Helper_Logos extends CubeIT_View_Helper_Abstract {
                $res = '';\r
                foreach ($images as $image) {\r
                    $img = $this->imageCms($image, '', null, null, ['class' => 'logos-image']);\r
-                       $res .= $this->htmlElement($img, 'div', ['class' => 'logos-item splide__slide']);\r
+                       $res .= $this->htmlElement($img, 'div', ['class' => 'logos-item']);\r
                }\r
 \r
-               $res = $this->htmlElement($res, 'div', ['class' => 'logos-grid splide__list']);\r
-               $res = $this->htmlElement($res, 'div', ['class' => 'splide__track']);\r
-               return $this->htmlElement($res, $wrapper_element, ['class' => 'logos-wrapper splide']);\r
+        // For making animated marquee loop\r
+        // https://www.youtube.com/watch?v=uw5jVO1eNF8\r
+        foreach ($images as $image) {\r
+            $img = $this->imageCms($image, '', null, null, ['class' => 'logos-image']);\r
+            $res .= $this->htmlElement($img, 'div', ['class' => 'logos-item', 'aria-hidden' => 'true']);\r
+        }\r
+\r
+               $res = $this->htmlElement($res, 'div', ['class' => 'logos-grid', 'id' => 'marquee']);\r
+               return $this->htmlElement($res, $wrapper_element, ['class' => 'logos-wrapper']);\r
        }\r
 }\r

diff --git a/framework/library/CubeIT/View/Helper/HeadScript.php b/framework/library/CubeIT/View/Helper/HeadScript.php
index b4fd0e0f82b4e507428cd8c53ff6877aef14d036..aea25e0cb95aab4aeaafc7cc113723056b1cbb81 100644 (file)
--- a/framework/library/CubeIT/View/Helper/HeadScript.php
+++ b/framework/library/CubeIT/View/Helper/HeadScript.php
@@ -1060,21 +1060,6 @@ class CubeIT_View_Helper_HeadScript extends Zend_View_Helper_HeadScript
         return $this;
     }
 
-    public function addSplideCarousel()
-    {
-        if (!$this->_add('splidejs')) {
-            return $this;
-        }
-        $this->view->headLink()->addDNSPrefetch('//cdnjs.cloudflare.com/');
-        $this->appendFile('//cdnjs.cloudflare.com/ajax/libs/splidejs/' . static::SPLIDECAROUSEL_VERSION . '/js/splide.min.js');
-        $this->view->headLink()->appendStylesheet('//cdnjs.cloudflare.com/ajax/libs/splidejs/' . static::SPLIDECAROUSEL_VERSION . '/css/splide.min.css');
-
-        $this->view->headLink()->addDNSPrefetch('//cdnjs.jsdelivr.net/');
-        $this->appendFile('//cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js');
-
-        return $this;
-    }
-
     public function addDotDotDot()
     {
         if (!$this->_add('dotdotdot')) {

diff --git a/js/106-logos.js b/js/106-logos.js
index d329aa357ab933c0d14e16fd4b4a13c70e45573d..d56bba0ed1002fca8258b4f91595189c2ce84da6 100644 (file)
--- a/js/106-logos.js
+++ b/js/106-logos.js
@@ -1,22 +1,5 @@
 registerLoader(load_logo, true);
 
 function load_logo() {
-    console.log(window.splide.Extensions)
-    new Splide( '.splide', {
-        drag: false,
-        autoWidth: true,
-        type: 'loop',
-        gap: 40,
-        pagination: false,
-        arrows: false,
-        autoScroll: {
-            speed: .5,
-        },
-        mediaQuery: 'min',
-        breakpoints: {
-            768: {
-                gap: 90,
-            },
-        }
-    } ).mount(window.splide.Extensions);
+    //
 }
\ No newline at end of file

diff --git a/less/106-logos.less b/less/106-logos.less
index 883968f665ba8f74c3cc6f81dd36d3432276282a..8ddc61daa63d2b95b9645e54ad4ac5c47a1697e1 100644 (file)
--- a/less/106-logos.less
+++ b/less/106-logos.less
@@ -5,12 +5,16 @@
                background-color: #e8eefa;\r
                padding-top: 3%;\r
                padding-bottom: 3%;\r
+               overflow: clip;\r
        }\r
 \r
        &-grid {\r
                display: flex !important;\r
                align-items: center;\r
-               padding: 0 70px;\r
+               padding: 0 0 0 70px;\r
+               gap: 70px;\r
+               width: max-content;\r
+               animation: marquee 30s linear infinite forwards;\r
 \r
                @media (max-width: 1299px) {\r
                        padding: 0;\r
@@ -25,8 +29,14 @@
 \r
        &-image {\r
                width: 120px;\r
-               height: 100%;\r
+               height: 45px;\r
                max-width: 120px;\r
                max-height: 45px;\r
        }\r
 }\r
+\r
+@keyframes marquee {\r
+       to {\r
+               transform: translateX(-50%);\r
+       }\r
+}
\ No newline at end of file