diff --git a/bin/Controls/Slider/ToggleMobileSlidesSetting.js b/bin/Controls/Slider/ToggleMobileSlidesSetting.js new file mode 100644 index 0000000000000000000000000000000000000000..b6715b47ff52ae026356ab358fc5fb73975255b6 --- /dev/null +++ b/bin/Controls/Slider/ToggleMobileSlidesSetting.js @@ -0,0 +1,113 @@ +/** + * @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(); + } + }); +}); diff --git a/bricks.xml b/bricks.xml index e45836a093d3f0233072af720622ee98c48dff39..8aec116e66b7f630f5d14b532ed8e46062d236fb 100644 --- a/bricks.xml +++ b/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" > diff --git a/locale.xml b/locale.xml index c86f1ff2427b3bea7204567fe173cc3dc83e138d..11abffa66c67c4a20bb684aaa92048ab0592da04 100644 --- a/locale.xml +++ b/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> diff --git a/src/QUI/Bricks/Controls/Slider/Promoslider.php b/src/QUI/Bricks/Controls/Slider/Promoslider.php index 70753209cffdc8c3885a36981d5024bcaa66a3cd..6cbd18fd42b8da42303de8ace9988422cc09874b 100644 --- a/src/QUI/Bricks/Controls/Slider/Promoslider.php +++ b/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'); }