From fdecd09bf382a66aab1ca89c38b5986c167cac91 Mon Sep 17 00:00:00 2001 From: Henning Leutz <leutz@pcsg.de> Date: Fri, 29 Sep 2017 10:36:11 +0200 Subject: [PATCH] fix: wallpaper slider komplett umgebaut -> UX verbessert und Einstellungen und Popup verlegt --- bin/Controls/Slider/PromoSliderSettings.css | 67 +--- bin/Controls/Slider/PromosliderSettings.js | 337 +++++++++--------- .../Slider/PromosliderSettingsEntry.html | 115 +++--- .../Slider/PromosliderSettingsOnlyContent.js | 35 +- locale.xml | 20 +- src/QUI/Bricks/Manager.php | 3 + 6 files changed, 261 insertions(+), 316 deletions(-) diff --git a/bin/Controls/Slider/PromoSliderSettings.css b/bin/Controls/Slider/PromoSliderSettings.css index 8c43c13..2c5f1fc 100644 --- a/bin/Controls/Slider/PromoSliderSettings.css +++ b/bin/Controls/Slider/PromoSliderSettings.css @@ -1,65 +1,8 @@ -.quiqqer-bricks-promoslider-settings { - position: relative; +.quiqqer-bricks-promoslider-settings-entry-form table { + border: none; } -.quiqqer-bricks-promoslider-settings-entry { - background: #f0f0f0; - border: 1px solid #ddd; - height: 100%; - left: 0; - overflow: auto; - opacity: 0; - position: absolute; - top: -50px; - width: 100%; +.quiqqer-bricks-promoslider-settings-entry-form td { + padding-left: 0; + padding-right: 0; } - -.quiqqer-bricks-promoslider-settings-entry-header { - background: #e1e4e9; - clear: both; - float: left; - height: 30px; - width: 100%; -} - -.quiqqer-bricks-promoslider-settings-entry-close { - cursor: pointer; - line-height: 30px; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 30px; -} - -.quiqqer-bricks-promoslider-settings-entry-close:hover { - background: rgba(0, 0, 0, 0.1); -} - -.quiqqer-bricks-promoslider-settings-entry-form { - clear: both; - float: left; - height: calc(100% - 100px); - margin-top: 10px; - overflow: auto; - padding: 0 10px 0 10px; - width: 100%; -} - -.quiqqer-bricks-promoslider-settings-entry-form .field-container-field { - background: #fff; - max-width: none; -} - -.quiqqer-bricks-promoslider-settings-entry-form .field-container-item { - width: 100px; -} - -.quiqqer-bricks-promoslider-settings-entry-buttons { - clear: both; - float: left; - height: 50px; - padding: 10px 0; - text-align: center; - width: 100%; -} \ No newline at end of file diff --git a/bin/Controls/Slider/PromosliderSettings.js b/bin/Controls/Slider/PromosliderSettings.js index b738eb7..27e6e74 100644 --- a/bin/Controls/Slider/PromosliderSettings.js +++ b/bin/Controls/Slider/PromosliderSettings.js @@ -3,17 +3,6 @@ * @author www.pcsg.de (Henning Leutz) * * Inhaltseinstellung für Promoslider - * - * @require qui/QUI - * @require qui/controls/Control - * @require qui/controls/windows/Confirm - * @require qui/controls/buttons/Button - * @require Locale - * @require Mustache - * @require controls/grid/Grid - * @require utils/Controls - * @require text!package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsEntry.html - * @require css!package/quiqqer/bricks/bin/Controls/Slider/PromoSliderSettings.css */ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ @@ -163,12 +152,12 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ dataType : 'string', width : 300 }, { - header : QUILocale.get(lg, 'quiqqer.products.control.slidesettings.type'), + header : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.align'), dataIndex: 'type', dataType : 'string', width : 200 }, { - header : QUILocale.get(lg, 'quiqqer.products.control.slidesettings.url'), + header : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.url'), dataIndex: 'url', dataType : 'string', width : 300 @@ -176,10 +165,6 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ dataIndex: 'image', dataType : 'string', hidden : true - }, { - header : QUILocale.get(lg, 'quiqqer.products.control.slidesettings.text'), - dataIndex: 'text', - hidden : true }] }); @@ -188,19 +173,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ var buttons = this.$Grid.getButtons(), Edit = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'edit'; + return Btn.getAttribute('name') === 'edit'; })[0], Up = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'up'; + return Btn.getAttribute('name') === 'up'; })[0], Down = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'down'; + return Btn.getAttribute('name') === 'down'; })[0], Delete = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'delete'; + return Btn.getAttribute('name') === 'delete'; })[0]; Up.enable(); @@ -220,7 +205,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ try { this.$data = JSON.decode(this.$Input.value); - if (typeOf(this.$data) != 'array') { + if (typeOf(this.$data) !== 'array') { this.$data = []; } @@ -273,6 +258,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ insert.type = entry.type; } + if ("url" in entry) { + insert.url = entry.url; + } + data.push(insert); } @@ -283,19 +272,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ var buttons = this.$Grid.getButtons(), Edit = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'edit'; + return Btn.getAttribute('name') === 'edit'; })[0], Up = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'up'; + return Btn.getAttribute('name') === 'up'; })[0], Down = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'down'; + return Btn.getAttribute('name') === 'down'; })[0], Delete = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'delete'; + return Btn.getAttribute('name') === 'delete'; })[0]; Up.disable(); @@ -403,7 +392,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ del: function (index) { var newList = []; - if (typeOf(index) != 'array') { + if (typeOf(index) !== 'array') { index = [index]; } @@ -427,7 +416,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ var controls = QUI.Controls.getControlsInElement(this.getElm()); controls.each(function (Control) { - if (Control == this) { + if (Control === this) { return; } @@ -449,7 +438,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ image: gridData[i].image, title: gridData[i].title, text : gridData[i].text, - type : gridData[i].type + type : gridData[i].type, + url : gridData[i].url }); } @@ -458,61 +448,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ }, /** - * Open edit dialog - * - * @retrun {Promise} + * Dialogs */ - $openEditDialog: function () { - var data = this.$Grid.getSelectedData(); - var index = this.$Grid.getSelectedIndices(); - - if (!data.length) { - return; - } - - data = data[0]; - index = index[0]; - - return this.$createDialog().then(function (Container) { - var CloseButton = Container.getElement( - '.quiqqer-bricks-promoslider-settings-entry-buttons button' - ); - - var Form = Container.getElement('form'); - var Image = Form.elements.image; - var Title = Form.elements.title; - var Description = Form.elements.description; - var Type = Form.elements.type; - var Button = QUI.Controls.getById(CloseButton.get('data-quiid')); - - Button.addEvent('click', function () { - this.edit(index, { - image: Image.value, - title: Title.value, - text : Description.value, - type : Type.value - }); - - moofx(Container).animate({ - opacity: 0, - top : -30 - }, { - duration: 250, - callback: function () { - Container.destroy(); - } - }); - }.bind(this)); - - Image.value = data.image; - Title.value = data.title; - Description.value = data.text; - Type.value = data.type; - - Image.fireEvent('change'); - Description.fireEvent('change'); - }.bind(this)); - }, /** * opens the delete dialog @@ -544,45 +481,107 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ }).open(); }, + /** + * Open edit dialog + * + * @retrun {Promise} + */ + $openEditDialog: function () { + var self = this, + data = this.$Grid.getSelectedData(), + index = this.$Grid.getSelectedIndices(); + + if (!data.length) { + return Promise.resolve(); + } + + data = data[0]; + index = index[0]; + + return this.$createDialog().then(function (Dialog) { + Dialog.addEvent('onSubmit', function () { + Dialog.Loader.show(); + + var Content = Dialog.getContent(); + var Form = Content.getElement('form'); + + var Image = Form.elements.image; + var Title = Form.elements.title; + var Description = Form.elements.description; + var Type = Form.elements.type; + var Url = Form.elements.url; + + self.edit(index, { + image: Image.value, + title: Title.value, + text : Description.value, + type : Type.value, + url : Url.value + }); + + Dialog.close(); + }); + + + Dialog.addEvent('onOpenAfterCreate', function () { + var Content = Dialog.getContent(); + var Form = Content.getElement('form'); + + var Image = Form.elements.image; + var Title = Form.elements.title; + var Description = Form.elements.description; + var Type = Form.elements.type; + var Url = Form.elements.url; + + Image.value = data.image; + Title.value = data.title; + Description.value = data.text; + Type.value = data.type; + Url.value = data.url; + + Image.fireEvent('change'); + Description.fireEvent('change'); + }); + + Dialog.setAttribute('title', QUILocale.get(lg, 'quiqqer.bricks.promoslider.editialog.title')); + Dialog.open(); + }); + }, + /** * opens the add dialog * * @return {Promise} */ $openAddDialog: function () { - return this.$createDialog().then(function (Container) { - var CloseButton = Container.getElement( - '.quiqqer-bricks-promoslider-settings-entry-buttons button' - ); + var self = this; - var Button = QUI.Controls.getById(CloseButton.get('data-quiid')); + return this.$createDialog().then(function (Dialog) { + Dialog.addEvent('onSubmit', function () { + Dialog.Loader.show(); - Button.addEvent('click', function () { - var Form = Container.getElement('form'); + var Content = Dialog.getContent(); + var Form = Content.getElement('form'); var Image = Form.elements.image; var Title = Form.elements.title; var Description = Form.elements.description; var Type = Form.elements.type; + var Url = Form.elements.url; - this.add({ + self.add({ image: Image.value, title: Title.value, text : Description.value, - type : Type.value + type : Type.value, + url : Url.value }); - moofx(Container).animate({ - opacity: 0, - top : -30 - }, { - duration: 250, - callback: function () { - Container.destroy(); - } - }); - }.bind(this)); - }.bind(this)); + Dialog.close(); + }); + + Dialog.open(); + }); }, /** @@ -591,80 +590,72 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [ * @return {Promise} */ $createDialog: function () { - return new Promise(function (resolve) { - var Container = new Element('div', { - html : Mustache.render(templateEntry, { - fieldImage : QUILocale.get(lg, 'quiqqer.products.control.create.image'), - fieldUrl : QUILocale.get(lg, 'quiqqer.products.control.create.url'), - fieldTitle : QUILocale.get(lg, 'quiqqer.products.control.create.title'), - fieldDescription: QUILocale.get(lg, 'quiqqer.products.control.create.text'), - fieldType : QUILocale.get(lg, 'quiqqer.products.control.create.align') - }), - 'class': 'quiqqer-bricks-promoslider-settings-entry' - }).inject(this.getElm()); - - var Close = Container.getElement( - '.quiqqer-bricks-promoslider-settings-entry-close' - ); - - var Buttons = Container.getElement( - '.quiqqer-bricks-promoslider-settings-entry-buttons' - ); - - var Text = Container.getElement('.field-description'); - - Text.getParent().setStyles({ - height: 100 - }); + var self = this; - Close.addEvent('click', function () { - moofx(Container).animate({ - opacity: 0, - top : -30 - }, { - duration: 250, - callback: function () { - Container.destroy(); + return new Promise(function (resolve) { + var Dialog = new QUIConfirm({ + title : QUILocale.get(lg, 'quiqqer.bricks.promoslider.adddialog.title'), + icon : 'fa fa-edit', + maxWidth : 800, + maxHeight: 600, + autoclose: false, + events : { + onOpen: function (Win) { + Win.Loader.show(); + Win.getContent().set('html', ''); + + var Container = new Element('div', { + html : Mustache.render(templateEntry, { + fieldImage : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.image'), + fieldUrl : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.url'), + fieldTitle : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.title'), + fieldDescription: QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.text'), + fieldType : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.align') + }), + 'class': 'quiqqer-bricks-promoslider-settings-entry' + }).inject(Win.getContent()); + + var Text = Container.getElement('.field-description'); + + Text.getParent().setStyles({ + height: 100 + }); + + QUI.parse(Container).then(function () { + return ControlsUtils.parse(Container); + }).then(function () { + var controls = QUI.Controls.getControlsInElement(Container), + project = self.getAttribute('project'); + + controls.each(function (Control) { + if (Control === self) { + return; + } + + if ("setProject" in Control) { + Control.setProject(project); + } + }); + + Win.fireEvent('openAfterCreate', [Win]); + + moofx(Container).animate({ + opacity: 1, + top : 0 + }, { + duration: 250, + callback: function () { + resolve(Container); + Win.Loader.hide(); + } + }); + }); } - }); - }); - - new QUIButton({ - text : QUILocale.get('quiqqer/system', 'accept'), - styles: { - 'float': 'none' } - }).inject(Buttons); - - - QUI.parse(Container).then(function () { - return ControlsUtils.parse(Container); - }).then(function () { - - var controls = QUI.Controls.getControlsInElement(Container), - project = this.getAttribute('project'); - - controls.each(function (Control) { - if (Control == this) { - return; - } + }); - if ("setProject" in Control) { - Control.setProject(project); - } - }.bind(this)); - - moofx(Container).animate({ - opacity: 1, - top : 0 - }, { - duration: 250, - callback: function () { - resolve(Container); - } - }); - }.bind(this)); - }.bind(this)); + resolve(Dialog); + }); } }); }); diff --git a/bin/Controls/Slider/PromosliderSettingsEntry.html b/bin/Controls/Slider/PromosliderSettingsEntry.html index 3a7bdec..466a662 100644 --- a/bin/Controls/Slider/PromosliderSettingsEntry.html +++ b/bin/Controls/Slider/PromosliderSettingsEntry.html @@ -1,58 +1,65 @@ -<div class="quiqqer-bricks-promoslider-settings-entry-header"> - <div class="quiqqer-bricks-promoslider-settings-entry-close"> - <span class="fa fa-remove"></span> - </div> -</div> - <form name="quiqqer-bricks-promoslider-settings-entry" class="quiqqer-bricks-promoslider-settings-entry-form" > - <label class="field-container"> - <span class="field-container-item"> - {{fieldImage}} - </span> - <span class="field-container-field"> - <input name="image" class="field-image media-image"/> - </span> - </label> - - <label class="field-container"> - <span class="field-container-item"> - {{fieldUrl}} - </span> - <input name="url" class="field-container-field field-description" - data-qui="controls/projects/project/site/Input" - /> - </label> - - <label class="field-container"> - <span class="field-container-item"> - {{fieldTitle}} - </span> - <input name="title" class="field-container-field field-title"/> - </label> - - <label class="field-container"> - <span class="field-container-item"> - {{fieldDescription}} - </span> - <input name="description" class="field-container-field field-description" - data-qui="controls/editors/Input" - /> - </label> - - <label class="field-container"> - <span class="field-container-item"> - {{fieldType}} - </span> - <select name="type" class="field-container-field field-type"> - <option value="right">Text rechts platzieren</option> - <option value="left">Text links platzieren</option> - </select> - </label> - + <table class="data-table data-table-flexbox"> + <tbody> + <tr> + <td> + <label class="field-container"> + <span class="field-container-item"> + {{fieldImage}} + </span> + <input name="image" class="field-container-field media-image"/> + </label> + </td> + </tr> + <tr> + <td> + <label class="field-container"> + <span class="field-container-item"> + {{fieldUrl}} + </span> + <input name="url" class="field-container-field" + data-qui="controls/projects/project/site/Input" + /> + </label> + </td> + </tr> + <tr> + <td> + <label class="field-container"> + <span class="field-container-item"> + {{fieldTitle}} + </span> + <input name="title" class="field-container-field"/> + </label> + </td> + </tr> + <tr> + <td> + <label class="field-container"> + <span class="field-container-item"> + {{fieldDescription}} + </span> + <input name="description" class="field-container-field field-description" + data-qui="controls/editors/Input" + /> + </label> + </td> + </tr> + <tr> + <td> + <label class="field-container"> + <span class="field-container-item"> + {{fieldType}} + </span> + <select name="type" class="field-container-field field-type"> + <option value="right">Text rechts platzieren</option> + <option value="left">Text links platzieren</option> + </select> + </label> + </td> + </tr> + </tbody> + </table> </form> - -<div class="quiqqer-bricks-promoslider-settings-entry-buttons"> - -</div> \ No newline at end of file diff --git a/bin/Controls/Slider/PromosliderSettingsOnlyContent.js b/bin/Controls/Slider/PromosliderSettingsOnlyContent.js index f506265..8d1fcf1 100644 --- a/bin/Controls/Slider/PromosliderSettingsOnlyContent.js +++ b/bin/Controls/Slider/PromosliderSettingsOnlyContent.js @@ -3,17 +3,6 @@ * @author www.pcsg.de (Henning Leutz) * * Wallpaper Slider mit zwei Inhaltsbereichen - * - * @require qui/QUI - * @require qui/controls/Control - * @require qui/controls/windows/Confirm - * @require qui/controls/buttons/Button - * @require Locale - * @require Mustache - * @require controls/grid/Grid - * @require utils/Controls - * @require text!package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html - * @require css!package/quiqqer/bricks/bin/Controls/Slider/PromoSliderSettings.css */ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyContent', [ @@ -185,19 +174,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten var buttons = this.$Grid.getButtons(), Edit = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'edit'; + return Btn.getAttribute('name') === 'edit'; })[0], Up = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'up'; + return Btn.getAttribute('name') === 'up'; })[0], Down = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'down'; + return Btn.getAttribute('name') === 'down'; })[0], Delete = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'delete'; + return Btn.getAttribute('name') === 'delete'; })[0]; Up.enable(); @@ -217,7 +206,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten try { this.$data = JSON.decode(this.$Input.value); - if (typeOf(this.$data) != 'array') { + if (typeOf(this.$data) !== 'array') { this.$data = []; } @@ -284,19 +273,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten var buttons = this.$Grid.getButtons(), Edit = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'edit'; + return Btn.getAttribute('name') === 'edit'; })[0], Up = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'up'; + return Btn.getAttribute('name') === 'up'; })[0], Down = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'down'; + return Btn.getAttribute('name') === 'down'; })[0], Delete = buttons.filter(function (Btn) { - return Btn.getAttribute('name') == 'delete'; + return Btn.getAttribute('name') === 'delete'; })[0]; Up.disable(); @@ -385,7 +374,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten del: function (index) { var newList = []; - if (typeOf(index) != 'array') { + if (typeOf(index) !== 'array') { index = [index]; } @@ -409,7 +398,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten var controls = QUI.Controls.getControlsInElement(this.getElm()); controls.each(function (Control) { - if (Control == this) { + if (Control === this) { return; } @@ -595,7 +584,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten project = this.getAttribute('project'); controls.each(function (Control) { - if (Control == this) { + if (Control === this) { return; } diff --git a/locale.xml b/locale.xml index af1e349..9e85102 100644 --- a/locale.xml +++ b/locale.xml @@ -684,23 +684,35 @@ Möchten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de> <en><![CDATA[The slide can not be restored]]></en> </locale> - <locale name="quiqqer.products.control.create.image"> + <locale name="quiqqer.bricks.promoslider.create.image"> <de><![CDATA[Bild]]></de> <en><![CDATA[Image]]></en> </locale> - <locale name="quiqqer.products.control.create.title"> + <locale name="quiqqer.bricks.promoslider.create.url"> + <de><![CDATA[URL]]></de> + <en><![CDATA[URL]]></en> + </locale> + <locale name="quiqqer.bricks.promoslider.create.title"> <de><![CDATA[Titel]]></de> <en><![CDATA[Title]]></en> </locale> - <locale name="quiqqer.products.control.create.text"> + <locale name="quiqqer.bricks.promoslider.create.text"> <de><![CDATA[Text]]></de> <en><![CDATA[Text]]></en> </locale> - <locale name="quiqqer.products.control.create.align"> + <locale name="quiqqer.bricks.promoslider.create.align"> <de><![CDATA[Ausrichtung]]></de> <en><![CDATA[Align]]></en> </locale> + <locale name="quiqqer.bricks.promoslider.adddialog.title"> + <de><![CDATA[Slide erstellen]]></de> + <en><![CDATA[Add Slide]]></en> + </locale> + <locale name="quiqqer.bricks.promoslider.editialog.title"> + <de><![CDATA[Slide bearbieten]]></de> + <en><![CDATA[Edit Slide]]></en> + </locale> </groups> <groups name="quiqqer/bricks" datatype="js,php"> <locale name="brick.control.navigation.setting.content"> diff --git a/src/QUI/Bricks/Manager.php b/src/QUI/Bricks/Manager.php index 09827d6..fa27ef3 100644 --- a/src/QUI/Bricks/Manager.php +++ b/src/QUI/Bricks/Manager.php @@ -645,6 +645,9 @@ public function saveBrick($brickId, array $brickData) ), array( 'id' => (int)$brickId )); + + // @todo it is a workaround + QUI\Cache\Manager::clearAll(); } /** -- GitLab