From 191eeaa0d9011c9359772e0538da576fb234074f Mon Sep 17 00:00:00 2001 From: gerd <gerd@gerd.pcsg.local> Date: Fri, 10 Mar 2017 15:24:32 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20General-Tour=20f=C3=BCr=20Bricks-=20Tou?= =?UTF-8?q?rmodul?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bin/guides/General.js | 727 ++++++++++++++++++++++++++++++++++++++++++ tour.xml | 14 + 2 files changed, 741 insertions(+) create mode 100644 bin/guides/General.js create mode 100644 tour.xml diff --git a/bin/guides/General.js b/bin/guides/General.js new file mode 100644 index 0000000..c387ab4 --- /dev/null +++ b/bin/guides/General.js @@ -0,0 +1,727 @@ +/** + * @module package/quiqqer/bricks/bin/guides/General + * + * Erste Tour für die Bricks (Grundlagentour) + * + * @require package/quiqqer/tour/bin/classes/Tour + * @require utils/Panels + * @require Locale + * @require Projects + */ +define('package/quiqqer/bricks/bin/guides/General', [ + + 'package/quiqqer/tour/bin/classes/Tour', + 'utils/Panels', + 'Locale', + 'Projects' + +], function (Tour, PanelUtils, QUILocale, Projects) { + "use strict"; + + var lg = 'quiqqer/bricks'; + + var Bricks = new Tour(); + var FooterZone = null; + + var DropDownMenu, + BricksMenuEntry, + PopupBox, + PopupBox2, + BrickPanel, + BrickSettings, + SitePanel, + ProjectPanel; + + var step1Text = QUILocale.get(lg, 'tour.general.bricks.Step1_1.Text') + + '<a target="_blank" href = "https://www.quiqqer.com/media/cache/quiqqer/zonen-bild.png">' + + '<img src="' + URL_OPT_DIR + 'quiqqer/tour/img/zonen-bild.png"' + + ' style="max-width: 100%; height: 200px;" /></a>' + + QUILocale.get(lg, 'tour.general.bricks.Step1_2.Text'); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : step1Text, + when : { + show: function () { + var quiId = document.getElement('[data-name = "extras"]').getAttribute('data-quiid'); + DropDownMenu = QUI.Controls.getById(quiId); + } + }, + buttons: [{ + text : QUILocale.get(lg, 'tour.general.bricks.Button.Abbruch'), + action: function () { + Bricks.cancel(); + } + }, { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + }] + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step2.Text'), + buttons : false, + attachTo: { + element: function () { + return DropDownMenu.getElm(); + }, + on : 'right' + }, + when : { + show: function () { + DropDownMenu.getElm().addEvent('click', Bricks.next); + var Entries = DropDownMenu.getChildren(); + Entries.forEach(function (Entry) { + if (Entry.options.name === 'bricks') { + BricksMenuEntry = Entry; + } + }); + }, + hide: function () { + DropDownMenu.getElm().removeEvent('click', Bricks.next); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step3.Text'), + buttons : false, + attachTo: { + element: function () { + return BricksMenuEntry.getElm(); + }, + on : 'right' + }, + when : { + show: function () { + BricksMenuEntry.getElm().addEvent('click', Bricks.next); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step4.Text'), + buttons: { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step5.Text'), + buttons : false, + attachTo: { + element: function () { + return document.getElement('[name="brick-add"]'); + }, + on : 'right' + }, + when : { + show: function () { + BrickPanel = QUI.Controls.getByType('package/quiqqer/bricks/bin/Manager')[0].getElm(); + BrickPanel.getElement('[name="brick-add"]').addEvent('click', Bricks.next); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step6.Text'), + buttons: { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step7.Text'), + buttons : false, + attachTo: { + element: function () { + PopupBox = document.getElement('.qui-window-popup.box'); + + return PopupBox.getElement('select') + }, + on : 'right' + + }, + when : { + show: function () { + PopupBox.getElement('select').addEvent('click', Bricks.next) + }, + hide: function () { + PopupBox.getElement('select').removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step8.Text'), + attachTo: { + element: function () { + return PopupBox.getElement('input[name = "title"]') + }, + on : 'right' + }, + buttons : false, + // { + // text: QUILocale.get(lg, 'Bricks.Button.Weiter'), + // action: function () { + // Bricks.next(); + // } + // }, + when : { + show: function () { + PopupBox.getElement('input[name = "title"]').addEvent('keydown', Bricks.next) + }, + hide: function () { + PopupBox.getElement('input[name = "title"]').removeEvent('keydown', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step9.Text'), + attachTo: { + element: function () { + return PopupBox.getElement('button[name = "submit"]') + }, + on : 'right' + }, + buttons : false, + // { + // text: QUILocale.get(lg, 'Bricks.Button.Weiter'), + // action: function () { + // Bricks.next(); + // } + // }, + when : { + show: function () { + PopupBox.getElement('button[name = "submit"]').addEvent('click', Bricks.next) + }, + hide: function () { + PopupBox.getElement('button[name = "submit"]').removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step10.Text'), + buttons: { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + BrickSettings = QUI.Controls.getByType('package/quiqqer/bricks/bin/BrickEdit'); + BrickSettings = BrickSettings[BrickSettings.length - 1]; + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step11.Text'), + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('[name="information"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + BrickSettings.getElm().getElement('[name = "settings"]').fireEvent('click'); + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step12_1.Text'), + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('[name="settings"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step12_2.Text'), + buttons : false, + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('.quiqqer-bricks-brickareas-buttons button') + }, + on : 'right' + }, + when : { + show: function () { + BrickSettings.getElm().getElement('.quiqqer-bricks-brickareas-buttons button').addEvent('click', Bricks.next) + }, + hide: function () { + BrickSettings.getElm().getElement('.quiqqer-bricks-brickareas-buttons button').removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step12_3.Text'), + buttons: { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + PopupBox2 = QUI.Controls.getByType('package/quiqqer/bricks/bin/AreaWindow')[0].getElm(); + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step12_4.Text'), + attachTo: { + element: function () { + var Footer; + Footer = PopupBox2.getElements('.quiqqer-bricks-area.smooth'); + Footer.forEach(function (Entry) { + if (Entry.getAttribute('data-area') === "footer") { + Footer = Entry; + } + }); + + return Footer + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + }, + when : { + show: function () { + var Footer; + Footer = PopupBox2.getElements('.quiqqer-bricks-area.smooth'); + Footer.forEach(function (Entry) { + if (Entry.getAttribute('data-area') === "footer") { + Footer = Entry; + } + }); + + Footer.addEvent('click', Bricks.next) + }, + hide: function () { + var Footer; + Footer = PopupBox2.getElements('.quiqqer-bricks-area.smooth'); + Footer.forEach(function (Entry) { + if (Entry.getAttribute('data-area') === "footer") { + Footer = Entry; + } + }); + + Footer.removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step12_5.Text'), + attachTo: { + element: function () { + return PopupBox2.getElement('[name = "submit"]'); + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + PopupBox2.getElement('[name = "submit"]').fireEvent('click'); + Bricks.next(); + } + }, + when : { + show: function () { + PopupBox2.getElement('[name = "submit"]').addEvent('click', Bricks.next) + } + } + }); + + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step13.Text'), + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('[name="extra"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + BrickSettings.getElm().getElement('[name = "content"]').fireEvent('click'); + Bricks.next(); + } + }, + when : { + show: function () { + BrickSettings.getElm().getElement('[name="extra"]').fireEvent('click'); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step14.Text'), + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('[name="content"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step15.Text'), + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('[name="save"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + }, + when : { + show: function () { + BrickSettings.getElm().getElement('[name="save"]').addEvent('click', Bricks.next) + }, + hide: function () { + BrickSettings.getElm().getElement('[name="save"]').removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step16.Text'), + attachTo: { + element: function () { + return BrickSettings.getElm().getElement('[name="close"]') + }, + on : 'left' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + if (BrickSettings.getElm().getElement('[name="close"]')) { + BrickSettings.getElm().getElement('[name="close"]').fireEvent('click') + } else { + Bricks.next(); + } + } + }, + when : { + show: function () { + BrickSettings.getElm().getElement('[name="close"]').addEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step17.Text'), + buttons: { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + var ProjektBar = document.getElements('.project-container'); + var Panel = QUI.Controls.getById( + ProjektBar.getParent('.qui-panel').get('data-quiid') + ); + ProjectPanel = Panel; + Panel.open(function () { + Projects.getList(function (result) { + var keys = Object.keys(result), + project = result[keys[0]], + projectName = keys[0], + projectLang = project.default_lang; + + Panel.setAttribute('project', projectName); + Panel.setAttribute('lang', projectLang); + Panel.openProject(); + + PanelUtils.openSitePanel(projectName, projectLang, 1) + .then(function (CreatedPanel) { + SitePanel = CreatedPanel; + Bricks.next.delay(500); + }); + }); + }); + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step18.Text'), + attachTo: { + element: function () { + return SitePanel.getElm().getElement('[name="quiqqer.bricks"]'); + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + SitePanel.addEvent('onCategoryEnter', function () { + Bricks.next.delay(500) + }); + SitePanel.getCategory('quiqqer.bricks').click(); + } + }, + when : { + show: function () { + SitePanel.getElm().getElement('[name="quiqqer.bricks"]').addEvent('click', function () { + Bricks.next.delay(500) + }) + }, + hide: function () { + SitePanel.getElm().getElement('[name="quiqqer.bricks"]').removeEvent('click', function () { + Bricks.next.delay(500) + }) + } + } + }); + + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step19.Text'), + attachTo: { + element: function () { + var rows = SitePanel.getElm().getElements('.quiqqer-bricks-site-category-area'); + var counter = 1; + while (rows === null) { + counter++; + rows = SitePanel.getElm().getElements('.quiqqer-bricks-site-category-area'); + if (counter > 10) { + break; + } + } + rows.forEach(function (row) { + if (row.getAttribute('data-name') === "footer") { + FooterZone = row; + } + }); + var Buttons = FooterZone.getElements('button'); + return FooterZone.getElement('button'); //@todo zufall ... welcher button das genau ist + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + FooterZone.getElement('button').fireEvent('click'); + } + }, + when : { + show: function () { + FooterZone.getElement('button').addEvent('click', function () { + Bricks.next.delay(500) + }) + }, + hide: function () { + FooterZone.getElement('button').removeEvent('click', function () { + Bricks.next.delay(500) + }) + } + } + }); + // + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step20.Text'), + attachTo: { + element: function () { + return document.getElement('.qui-window-popup.box') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + //@todo random eines auswählen wenn er es nicht gemacht hat. fire event ist unschön + document.getElements('.qui-window-popup.box .qui-window-popup-content.box .qui-elements-list-item.smooth')[0].fireEvent('click'); + Bricks.next(); + } + }, + when : { + show: function () { + document.getElements('.qui-window-popup.box .qui-window-popup-content.box .qui-elements-list-item.smooth').forEach(function (Item) { + Item.addEvent('click', Bricks.next) + }) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step21.Text'), + attachTo: { + element: function () { + return FooterZone.getElement('button .fa.fa-gear').getParent() + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + FooterZone.getElement('button .fa.fa-gear').getParent().fireEvent('click') + } + }, + when : { + show: function () { + FooterZone.getElement('button .fa.fa-gear').getParent().addEvent('click', function () { + Bricks.next.delay(500) + }) + }, + hide: function () { + FooterZone.getElement('button .fa.fa-gear').getParent().removeEvent('click', function () { + Bricks.next.delay(500) + }) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step22.Text'), + attachTo: { + element: function () { + return document.getElement('.qui-window-popup.box [name="inheritance"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next(); + } + }, + when : { + show: function () { + document.getElement('.qui-window-popup.box [name="inheritance"]').addEvent('click', Bricks.next) + }, + hide: function () { + document.getElement('.qui-window-popup.box [name="inheritance"]').removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step23.Text'), + attachTo: { + element: function () { + return document.getElement('.qui-window-popup.box [name="submit"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + document.getElement('.qui-window-popup.box [name="submit"]').fireEvent('click') + } + }, + when : { + show: function () { + document.getElement('.qui-window-popup.box [name="submit"]').addEvent('click', Bricks.next) + }, + hide: function () { + document.getElement('.qui-window-popup.box [name="submit"]').removeEvent('click', Bricks.next) + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step24.Text'), + attachTo: { + element: function () { + return FooterZone.getElement('button .fa.fa-remove').getParent() + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next() + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step25.Text'), + attachTo: { + element: function () { + return SitePanel.getElm().getElement('[name = "preview"]') + }, + on : 'right' + }, + buttons : { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Weiter'), + action: function () { + Bricks.next() + } + } + }); + + Bricks.addStep({ + title : QUILocale.get(lg, 'tour.general.bricks.Step1.Title'), + text : QUILocale.get(lg, 'tour.general.bricks.Step26.Text'), + buttons: { + text : QUILocale.get(lg, 'tour.general.bricks.Button.Ende'), + action: function () { + Bricks.cancel(); + } + } + }); + + + return Bricks +}); \ No newline at end of file diff --git a/tour.xml b/tour.xml new file mode 100644 index 0000000..6042d4b --- /dev/null +++ b/tour.xml @@ -0,0 +1,14 @@ +<quiqqer> + <tours> + <tour require="package/quiqqer/bricks/bin/guides/General"> + <title> + <locale group="quiqqer/bricks" var="tour.general.BricksTitle"/> + </title> + <description> + <locale group="quiqqer/bricks" var="tour.general.BricksDescription"/> + </description> + + <icon/> + </tour> + </tours> +</quiqqer> \ No newline at end of file -- GitLab