wait #7831 @7:30

diff --git a/framework/application/views/helpers/Logos.php b/framework/application/views/helpers/Logos.php
index 3c4b16ac93104eef2d1b55adf5f42d13e96c6944..a3489dd4a3467160bfa284b252b8f8a28d872d03 100644 (file)
--- a/framework/application/views/helpers/Logos.php
+++ b/framework/application/views/helpers/Logos.php
@@ -5,6 +5,8 @@ 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
+\r
                $images = CubeIT_Util_Cms::extractFiles($logos);\r
                if (!count($images)) {\r
                        return;\r
@@ -15,10 +17,11 @@ 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']);\r
+                       $res .= $this->htmlElement($img, 'div', ['class' => 'logos-item splide__slide']);\r
                }\r
 \r
-               $res = $this->htmlElement($res, 'div', ['class' => 'logos-grid']);\r
-               return $this->htmlElement($res, $wrapper_element, ['class' => 'logos-wrapper grid']);\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
        }\r
 }\r

diff --git a/framework/library/CubeIT/View/Helper/HeadScript.php b/framework/library/CubeIT/View/Helper/HeadScript.php
index 68faed85b8bdd162bfe254ea0b6507fb33e6b88b..b4fd0e0f82b4e507428cd8c53ff6877aef14d036 100644 (file)
--- a/framework/library/CubeIT/View/Helper/HeadScript.php
+++ b/framework/library/CubeIT/View/Helper/HeadScript.php
@@ -46,6 +46,11 @@ class CubeIT_View_Helper_HeadScript extends Zend_View_Helper_HeadScript
      */
     const SLICKCAROUSEL_VERSION = '1.9.0';
 
+    /**
+     * @link https://cdnjs.com/libraries/splidejs
+     */
+    const SPLIDECAROUSEL_VERSION = '4.1.4';
+
     /**
      * @link http://cdnjs.com/libraries/jquery.nanoscroller/
      */
@@ -1055,6 +1060,21 @@ 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
new file mode 100644 (file)
index 0000000..d329aa3
--- /dev/null
+++ b/js/106-logos.js
@@ -0,0 +1,22 @@
+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 25889b9e43c0157c9286c5d5743180b3f79404f7..883968f665ba8f74c3cc6f81dd36d3432276282a 100644 (file)
--- a/less/106-logos.less
+++ b/less/106-logos.less
@@ -2,17 +2,14 @@
 \r
 .logos {\r
        &-wrapper {\r
-               background-color: @color-light-grey;\r
+               background-color: #e8eefa;\r
                padding-top: 3%;\r
                padding-bottom: 3%;\r
        }\r
 \r
        &-grid {\r
-               display: flex;\r
+               display: flex !important;\r
                align-items: center;\r
-               justify-content: center;\r
-               width: 100%;\r
-               margin: -1em 0; // Offset vertical padding on .logos-item so we only have spacing between multiple rows\r
                padding: 0 70px;\r
 \r
                @media (max-width: 1299px) {\r
@@ -20,24 +17,14 @@
                }\r
 \r
                @media @m640 {\r
-                       flex-wrap: wrap;\r
-\r
                        .logos-item {\r
                                flex-basis: 33%; // Switch to 3 cols instead of 5\r
                        }\r
                }\r
        }\r
 \r
-       &-item {\r
-               flex: 1 1 auto; // Equal width columns covering available total width\r
-               display: flex; // Enable flex here to allow easier centering of images\r
-               justify-content: center;\r
-               align-items: center;\r
-               padding: 1em; // Controls minimum space between items\r
-       }\r
-\r
        &-image {\r
-               width: 100%;\r
+               width: 120px;\r
                height: 100%;\r
                max-width: 120px;\r
                max-height: 45px;\r