feat: event selection

bin/backend/Snippets.js

@@ -100,7 +100,7 @@ define('package/quiqqer/html-snippets/bin/backend/Snippets', [
 
                 this.$Grid = new Grid(Container, {
                     height: Label.getParent('.qui-panel-content').getSize().y - 100,
-                    multiple: true,
+                    multipleSelection: true,
                     columnModel: columnModel,
                     buttons: [
                         {

bin/backend/controls/EventSelect.css

+.html-snippet-eventSelect {
+    position: relative;
+}
+
+.html-snippet-eventSelect input {
+    width: calc(100% - 50px);
+}
+
+.html-snippet-eventSelect-drop {
+    border-radius: 3px;
+    cursor: pointer;
+    line-height: 36px;
+    height: 36px;
+    position: absolute;
+    right: 2px;
+    text-align: center;
+    top: 2px;
+    width: 40px;
+}
+
+.html-snippet-eventSelect-drop:hover {
+    background: #2f8fc6;
+    color: #fff;
+}

bin/backend/controls/EventSelect.js

+define('package/quiqqer/html-snippets/bin/backend/controls/EventSelect', [
+
+    'qui/QUI',
+    'qui/controls/Control',
+    'qui/controls/contextmenu/Menu',
+    'qui/controls/contextmenu/Item',
+    'Locale',
+
+    'css!package/quiqqer/html-snippets/bin/backend/controls/EventSelect.css'
+
+], function(QUI, QUIControl, QUIMenu, QUIMenuItem, QUILocale) {
+    'use strict';
+
+    const lg = 'quiqqer/html-snippets';
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type: 'package/quiqqer/html-snippets/bin/backend/controls/EventSelect',
+
+        Binds: [
+            '$openMenu',
+            '$menuItemMouseDown',
+            '$keyup'
+        ],
+
+        initialize: function(options) {
+            this.parent(options);
+
+            this.$Menu = null;
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        $onImport: function() {
+            this.$Input = this.$Elm;
+            this.$Input.autocomplete = 'off';
+            this.$Input.addEvents({
+                keyup: this.$keyup,
+                blur: () => {
+                    if (this.$Menu) {
+                        this.$Menu.hide();
+                    }
+                }
+            });
+
+            this.$Elm = new Element('div', {
+                'class': 'field-container-field html-snippet-eventSelect'
+            }).wraps(this.$Input);
+
+            new Element('span', {
+                'class': 'html-snippet-eventSelect-drop fa fa-chevron-down',
+                events: {
+                    click: this.$openMenu
+                }
+            }).inject(this.getElm());
+
+
+            this.$Menu = new QUIMenu({
+                showIcons: false,
+                styles: {
+                    width: this.$Elm.getSize().x
+                },
+                events: {
+                    onMouseDown: function() {
+
+                    }
+                }
+            }).inject(this.$Elm);
+
+            this.$Menu.appendChild(
+                new QUIMenuItem({
+                    text: QUILocale.get(lg, 'html.snippet.select.template.event.headerBegin'),
+                    value: 'onQuiqqer::template::header::begin',
+                    events: {
+                        onMouseDown: this.$menuItemMouseDown
+                    }
+                })
+            );
+
+            this.$Menu.appendChild(
+                new QUIMenuItem({
+                    text: QUILocale.get(lg, 'html.snippet.select.template.event.headerEnd'),
+                    value: 'onQuiqqer::template::header::end',
+                    events: {
+                        onMouseDown: this.$menuItemMouseDown
+                    }
+                })
+            );
+
+            this.$Menu.appendChild(
+                new QUIMenuItem({
+                    text: QUILocale.get(lg, 'html.snippet.select.template.event.bodyBegin'),
+                    value: 'onQuiqqer::template::body::begin',
+                    events: {
+                        onMouseDown: this.$menuItemMouseDown
+                    }
+                })
+            );
+
+            this.$Menu.appendChild(
+                new QUIMenuItem({
+                    text: QUILocale.get(lg, 'html.snippet.select.template.event.bodyEnd'),
+                    value: 'onQuiqqer::template::body::end',
+                    events: {
+                        onMouseDown: this.$menuItemMouseDown
+                    }
+                })
+            );
+        },
+
+        $openMenu: function() {
+            this.$Menu.setPosition(-10, 50);
+            this.$Menu.show();
+        },
+
+        $keyup: function(e) {
+            if (e.key === 'down' && this.$Menu.isHidden()) {
+                this.$openMenu();
+                return;
+            }
+
+            if (e.key === 'down') {
+                this.$Menu.down();
+                return;
+            }
+
+            if (e.key === 'up' && !this.$Menu.isHidden()) {
+                this.$Menu.up();
+                return;
+            }
+
+            if (e.key === 'enter' && !this.$Menu.isHidden()) {
+                this.$Input.value = this.$Menu.getActive().getAttribute('value');
+                this.$Menu.hide();
+            }
+        },
+
+        $menuItemMouseDown: function(Instance) {
+            this.$Input.value = Instance.getAttribute('value');
+        }
+    });
+});
\ No newline at end of file

bin/backend/controls/SnippetInput.js

@@ -17,6 +17,8 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
 ], function(QUI, QUIControl, QUILoader, QUISwitch, SnippetUtils, QUIAjax, QUILocale) {
     'use strict';
 
+    const lg = 'quiqqer/html-snippets';
+
     return new Class({
 
         Extends: QUIControl,
@@ -38,6 +40,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
             this.$data = null;
 
             this.$Status = null;
+            this.$StatusText = null;
             this.$Project = null;
             this.$GDPR = null;
 
@@ -74,7 +77,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
             SnippetUtils.isGDPRInstalled().then((isInstalled) => {
                 if (isInstalled) {
                     const GDPRLabel = new Element('label', {
-                        html: '<span>GDPR Kategorie</span>'
+                        html: '<span>' + QUILocale.get(lg, 'html.snippet.gdpr.title') + '</span>'
                     }).inject(this.$Elm, 'top');
 
 
@@ -107,7 +110,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
 
                 const Title = new Element('div', {
                     'class': 'quiqqer-html-snippet-input-title',
-                    html: '<span>HTML-Snippet</span>'
+                    html: '<span>' + QUILocale.get(lg, 'html.snippet.title') + '</span>'
                 }).inject(this.$Elm, 'top');
 
 
@@ -115,8 +118,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
                     'class': 'quiqqer-html-snippet-input-status'
                 }).inject(Title);
 
-                new Element('span', {
-                    html: 'HTML-Snippet ist aktiviert',
+                this.$StatusText = new Element('span', {
                     styles: {
                         'float': 'left'
                     }
@@ -137,10 +139,12 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
 
                 if (this.$data && this.$data.active) {
                     this.$Status.setSilentOn();
+                    this.$StatusText.set('html', QUILocale.get(lg, 'html.snippet.active'));
                 }
 
                 if (this.$data && !this.$data.active) {
                     this.$Status.setSilentOff();
+                    this.$StatusText.set('html', QUILocale.get(lg, 'html.snippet.deactive'));
                 }
             });
         },
@@ -190,8 +194,10 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
                     if (this.$Status) {
                         if (this.$data.active) {
                             this.$Status.setSilentOn();
+                            this.$StatusText.set('html', QUILocale.get(lg, 'html.snippet.active'));
                         } else {
                             this.$Status.setSilentOff();
+                            this.$StatusText.set('html', QUILocale.get(lg, 'html.snippet.deactive'));
                         }
                     }
 
@@ -237,6 +243,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
             if (status) {
                 SnippetUtils.activateSnippet(snippetName, project).then(() => {
                     this.Loader.hide();
+                    this.$StatusText.set('html', QUILocale.get(lg, 'html.snippet.active'));
                 }).catch((err) => {
                     QUI.getMessageHandler().then((MH) => {
                         MH.addError(err.getMessage());
@@ -245,6 +252,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/SnippetInput', [
             } else {
                 SnippetUtils.deactivateSnippet(snippetName, project).then(() => {
                     this.Loader.hide();
+                    this.$StatusText.set('html', QUILocale.get(lg, 'html.snippet.deactive'));
                 }).catch((err) => {
                     QUI.getMessageHandler().then((MH) => {
                         MH.addError(err.getMessage());

bin/backend/controls/windows/AddSnippet.html

@@ -27,7 +27,13 @@
             <td>
                 <label class="field-container">
                     <span class="field-container-item">{{textEvent}}</span>
-                    <input class="field-container-field" type="text" name="eventName" required/>
+                    <input
+                            data-qui="package/quiqqer/html-snippets/bin/backend/controls/EventSelect"
+                            class="field-container-field"
+                            type="text"
+                            name="eventName"
+                            required
+                    />
                 </label>
             </td>
         </tr>

bin/backend/controls/windows/AddSnippet.js

@@ -46,6 +46,7 @@ define('package/quiqqer/html-snippets/bin/backend/controls/windows/AddSnippet',
         },
 
         $onOpen: function() {
+            this.Loader.show();
             this.getContent().addClass('html-snippets-add');
 
             this.getContent().set('html', Mustache.render(template, {
@@ -70,6 +71,10 @@ define('package/quiqqer/html-snippets/bin/backend/controls/windows/AddSnippet',
             });
 
             this.getContent().getElement('form').elements.name.focus();
+
+            QUI.parse(this.getContent()).then(() => {
+                this.Loader.hide();
+            });
         },
 
         submit: function() {

bin/backend/controls/windows/EditSnippet.html

@@ -27,7 +27,12 @@
             <td>
                 <label class="field-container">
                     <span class="field-container-item">{{textEvent}}</span>
-                    <input class="field-container-field" type="text" name="eventName" required/>
+                    <input data-qui="package/quiqqer/html-snippets/bin/backend/controls/EventSelect"
+                           class="field-container-field"
+                           type="text"
+                           name="eventName"
+                           required
+                    />
                 </label>
             </td>
         </tr>

bin/backend/controls/windows/EditSnippet.js

@@ -80,7 +80,10 @@ define('package/quiqqer/html-snippets/bin/backend/controls/windows/EditSnippet',
                 Form.elements.eventName.value = result.event;
                 Form.elements.snippet.value = result.snippet;
                 Form.elements.gdpr.value = result.gdpr;
-                this.Loader.hide();
+
+                QUI.parse(this.getContent()).then(() => {
+                    this.Loader.hide();
+                });
             }, {
                 'package': 'quiqqer/html-snippets',
                 projectName: this.getAttribute('Project').getName(),

locale.xml

@@ -66,6 +66,42 @@
             <en><![CDATA[GDPR Category]]></en>
         </locale>
 
+        <locale name="html.snippet.title">
+            <de><![CDATA[HTML-Snippet]]></de>
+            <en><![CDATA[HTML-Snippet]]></en>
+        </locale>
+        <locale name="html.snippet.gdpr.title">
+            <de><![CDATA[GDPR Kategorie]]></de>
+            <en><![CDATA[GDPR category]]></en>
+        </locale>
+        <locale name="html.snippet.active">
+            <de><![CDATA[HTML-Snippet ist aktiviert]]></de>
+            <en><![CDATA[HTML snippet is activated]]></en>
+        </locale>
+        <locale name="html.snippet.deactive">
+            <de><![CDATA[HTML-Snippet ist deaktiviert]]></de>
+            <en><![CDATA[HTML snippet is edactivated]]></en>
+        </locale>
+
+
+        <locale name="html.snippet.select.template.event.headerBegin">
+            <de><![CDATA[<b>Header ganz oben</b> (onQuiqqer::template::header::begin)]]></de>
+            <en><![CDATA[<b>Header ganz oben</b> (onQuiqqer::template::header::begin)]]></en>
+        </locale>
+        <locale name="html.snippet.select.template.event.headerEnd">
+            <de><![CDATA[<b>Header ganz unten</b> (onQuiqqer::template::header::end)]]></de>
+            <en><![CDATA[<b>Header ganz unten</b> (onQuiqqer::template::header::end)]]></en>
+        </locale>
+        <locale name="html.snippet.select.template.event.bodyBegin">
+            <de><![CDATA[<b>Body ganz oben</b> (onQuiqqer::template::body::begin)]]></de>
+            <en><![CDATA[<b>Body ganz oben</b> (onQuiqqer::template::body::begin)]]></en>
+        </locale>
+        <locale name="html.snippet.select.template.event.bodyEnd">
+            <de><![CDATA[<b>Body ganz unten</b> (onQuiqqer::template::body::end)]]></de>
+            <en><![CDATA[<b>Body ganz unten</b> (onQuiqqer::template::body::end)]]></en>
+        </locale>
+
+
         <locale name="window.remove.title">
             <de><![CDATA[Snippet löschen]]></de>
             <en><![CDATA[Delete snippet]]></en>