PromoSlider only uses desktop's slides by default (#88)

bin/Controls/Slider/ToggleMobileSlidesSetting.js

+/**
+ * @module package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * Inhaltseinstellung für Promoslider
+ */
+define('package/quiqqer/bricks/bin/Controls/Slider/ToggleMobileSlidesSetting', [
+
+    'qui/QUI',
+    'qui/controls/Control',
+    'qui/controls/buttons/Switch'
+
+], function (QUI, QUIControl, QUISwitch) {
+    "use strict";
+
+    var lg = 'quiqqer/bricks';
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/bricks/bin/Controls/Slider/ToggleMobileSlidesSetting',
+
+        $Switch: QUISwitch,
+
+        Binds: [
+            '$onImport',
+            '$switchToggled'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        /**
+         * event: on import
+         */
+        $onImport: function () {
+            var Wrapper = new Element('span', {
+                id: 'ToggleMobileSlidesSettingWrapper'
+            });
+
+            this.$Switch = new QUISwitch({
+                status: this.getElm().value === "true",
+                events: {
+                    onChange: this.$switchToggled
+                }
+            }).inject(Wrapper);
+
+            Wrapper.wraps(this.getElm());
+
+            if (!this.$Switch.getStatus()) {
+                // Wait for the MobileSlides-control to be loaded before it can be hidden
+                // TODO: Maybe there is a better way than setTimeout()?
+                setTimeout(function() {
+                    this.hideMobileSlidesSetting();
+                }.bind(this), 200);
+            }
+        },
+
+
+        /**
+         * Called when the switch is toggled
+         */
+        $switchToggled: function () {
+            this.getElm().value = this.$Switch.getStatus();
+            this.toggleMobileSlidesSettingVisibility();
+        },
+
+
+        /**
+         * Returns the setting-section containing a mobileslides-settings
+         *
+         * @return {HTMLElement | null}
+         .*/
+        getMobileSlidesSettingElement: function () {
+            return document.getElementsByName('mobileslides')[0].parentElement.parentElement.parentElement;
+        },
+
+
+        /**
+         * Hides the mobileslides-setting-section (CSS "visibility" and "display")
+         */
+        hideMobileSlidesSetting: function () {
+            this.getMobileSlidesSettingElement().setStyles({
+                visibility: 'hidden',
+                display   : 'none'
+            });
+        },
+
+
+        /**
+         * Shows the mobileslides-setting-section (CSS "visibility" and "display")
+         */
+        showMobileSlidesSetting: function () {
+            this.getMobileSlidesSettingElement().setStyles({
+                visibility: 'visible',
+                display   : null
+            });
+        },
+
+
+        /**
+         * Toggles the mobileslides-setting-section visibility (CSS "visibility" and "display")
+         */
+        toggleMobileSlidesSettingVisibility: function () {
+            this.$Switch.getStatus() ? this.showMobileSlidesSetting() : this.hideMobileSlidesSetting();
+        }
+    });
+});

bricks.xml

@@ -217,6 +217,12 @@
                     <locale group="quiqqer/bricks" var="brick.control.promoslider.settings.desktopslides"/>
                 </setting>
 
+                <setting name="isMobileSlidesEnabled" type="hidden"
+                         data-qui="package/quiqqer/bricks/bin/Controls/Slider/ToggleMobileSlidesSetting"
+                >
+                    <locale group="quiqqer/bricks" var="brick.control.promoslider.settings.isMobileSlidesEnabled"/>
+                </setting>
+
                 <setting name="mobileslides" type="hidden"
                          data-qui="package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings"
                 >

locale.xml

@@ -424,6 +424,12 @@
             <de><![CDATA[Desktop Slides]]></de>
             <en><![CDATA[Desktop slides]]></en>
         </locale>
+
+        <locale name="brick.control.promoslider.settings.isMobileSlidesEnabled">
+            <de><![CDATA[Separate Slides auf Mobilgeräten]]></de>
+            <en><![CDATA[Separate slides on mobile devices]]></en>
+        </locale>
+
         <locale name="brick.control.promoslider.settings.mobileslides">
             <de><![CDATA[Mobile Slides]]></de>
             <en><![CDATA[Mobile slides]]></en>

src/QUI/Bricks/Controls/Slider/Promoslider.php

@@ -35,7 +35,8 @@ public function __construct($attributes = array())
             'image-as-wallpaper'         => false,
             'image-wallpaper-attachment' => false,
             'autostart'                  => false,
-            'delay'                      => 5000
+            'delay'                      => 5000,
+            'isMobileSlidesEnabled'      => false
         ));
 
         $this->addCSSFile(
@@ -68,6 +69,7 @@ public function getBody()
         $this->setAttribute('data-qui-options-image-as-wallpaper', false);
         $this->setAttribute('data-qui-options-wallpaper-attachment', false);
         $this->setAttribute('data-qui-options-delay', 5000);
+        $this->setAttribute('data-qui-options-isMobileSlidesEnabled', false);
 
         if ($this->getAttribute('pagefit') === false) {
             $this->setAttribute('pagefitcut', false);
@@ -158,16 +160,32 @@ public function getBody()
             $this->addCSSClass('quiqqer-bricks-promoslider__nav_inner');
         }
 
+        if ($this->getAttribute('isMobileSlidesEnabled') === "true") {
+            $this->setAttribute(
+                'data-qui-options-isMobileSlidesEnabled',
+                $this->getAttribute('isMobileSlidesEnabled')
+            );
+        }
 
         $this->parseSlides($this->getAttribute('desktopslides'), 'desktop');
-        $this->parseSlides($this->getAttribute('mobileslides'), 'mobile');
 
-        $Engine->assign(array(
+        $options = array(
             'this'          => $this,
             'desktopSlides' => $this->desktopSlides,
-            'mobileSlides'  => $this->mobileSlides,
             'Utils'         => new Utils()
-        ));
+        );
+        
+        if ($this->getAttribute('isMobileSlidesEnabled') === "true") {
+            $this->parseSlides($this->getAttribute('mobileslides'), 'mobile');
+
+            $options['mobileSlides'] = $this->mobileSlides;
+        } else {
+            $this->parseSlides($this->getAttribute('desktopslides'), 'mobile');
+
+            $options['mobileSlides'] = $this->desktopSlides;
+        }
+
+        $Engine->assign($options);
 
         return $Engine->fetch(dirname(__FILE__) . '/Promoslider.html');
     }