feat: Brick edit button at the WYSIWYG Brick Window

plugins/quiqqer/quiqqerBricks/plugin.js

 (function () {
     "use strict";
-
+    console.log('init quiqqer bricks');
     // finds out which project are active
     var getProjectData = function (Node, editor) {
         var Panel, Site;
         var project = '';
-        var lang    = '';
+        var lang = '';
 
         if (Node.closest('.qui-panel')) {
             Panel = window.QUI.Controls.getById(
@@ -16,7 +16,7 @@
                 Site = Panel.getSite();
 
                 project = Site.getProject().getName();
-                lang    = Site.getProject().getLang();
+                lang = Site.getProject().getLang();
             }
         } else {
             Node = editor.ui.contentsElement.$;
@@ -30,7 +30,7 @@
                     Site = Panel.getSite();
 
                     project = Site.getProject().getName();
-                    lang    = Site.getProject().getLang();
+                    lang = Site.getProject().getLang();
                 }
             }
         }
@@ -46,7 +46,7 @@
             return;
         }
 
-        var brickId     = Node.getAttribute('data-brickid');
+        var brickId = Node.getAttribute('data-brickid');
         var projectData = getProjectData(Node, editor);
 
         require([
@@ -63,18 +63,30 @@
                         Win.getContent().set(
                             'html',
 
-                            '<label style="display: flex; width: 300px; margin: 2rem auto 0;">' +
+                            '<label style="display: flex; width: 350px; margin: 2rem auto 0;">' +
                             '   <span style="padding: 0 10px 0 0; line-height: 30px;">Brick ID:</span>' +
                             '   <input style="flex-grow: 1" type="text" name="brickId" />' +
-                            '   <button class="qui-button">' +
+                            '   <button class="qui-button" name="select">' +
                             '       <span class="fa fa-cubes"></span>' +
                             '   </button>' +
+                            '   <button class="qui-button" name="edit">' +
+                            '       <span class="fa fa-edit"></span>' +
+                            '   </button>' +
                             '</label>'
                         );
 
                         Win.getContent().getElement('input').set('value', brickId);
+                        Win.getContent().getElement('button[name="select"]').set(
+                            'title',
+                            QUILocale.get('quiqqer/ckeditor4', 'window.bricks.editor.selectBrick')
+                        );
 
-                        Win.getContent().getElement('button').addEvent('click', function () {
+                        Win.getContent().getElement('button[name="edit"]').set(
+                            'title',
+                            QUILocale.get('quiqqer/ckeditor4', 'window.bricks.editor.editBrick')
+                        );
+
+                        Win.getContent().getElement('button[name="select"]').addEvent('click', function () {
                             require([
                                 'package/quiqqer/bricks/bin/Controls/backend/BrickSelectWindow'
                             ], function (BrickSelectWindow) {
@@ -94,6 +106,29 @@
                                 }).open();
                             });
                         });
+
+                        Win.getContent().getElement('button[name="edit"]').addEvent('click', function () {
+                            let brickId = Win.getContent().getElement('input').value;
+
+                            if (brickId === '') {
+                                return;
+                            }
+
+                            Win.close();
+
+                            require([
+                                'utils/Panels',
+                                'package/quiqqer/bricks/bin/BrickEdit'
+                            ], function (PanelUtils, BrickPanel) {
+                                PanelUtils.openPanelInTasks(
+                                    new BrickPanel({
+                                        id         : brickId,
+                                        projectName: projectData.project,
+                                        projectLang: projectData.lang
+                                    })
+                                );
+                            });
+                        });
                     },
 
                     onSubmit: function (Win) {
@@ -118,7 +153,7 @@
         // edit
         element.addEventListener('click', function (e) {
             var Target = e.target;
-            var Brick  = Target;
+            var Brick = Target;
 
             if (!Brick.classList.contains('quiqqer_bricks_placeholder')) {
                 Brick = Target.closest('.quiqqer_bricks_placeholder');
@@ -143,8 +178,8 @@
 
     // refresh placeholder display data
     var refreshPlaceholderDisplay = function (element, editor) {
-        var doc      = editor.document.$;
-        var Info     = element.querySelector('.quiqqer_bricks_placeholder_info');
+        var doc = editor.document.$;
+        var Info = element.querySelector('.quiqqer_bricks_placeholder_info');
         var Settings = element.querySelector('.quiqqer_bricks_placeholder_settings');
 
         if (!Info) {
@@ -156,8 +191,8 @@
         }
 
         if (!Settings) {
-            Settings                 = doc.createElement('div');
-            Settings.innerHTML       = '<button name="delete">x</button>';
+            Settings = doc.createElement('div');
+            Settings.innerHTML = '<button name="delete">x</button>';
             Settings.contentEditable = false;
 
             Settings.classList.add('quiqqer_bricks_placeholder_settings');
@@ -175,8 +210,8 @@
     };
 
     var setCustomEvents = function (evt) {
-        var editor   = evt.editor;
-        var doc      = editor.document.$;
+        var editor = evt.editor;
+        var doc = editor.document.$;
         var elements = doc.querySelectorAll('.quiqqer_bricks_placeholder');
 
         for (var i = 0, len = elements.length; i < len; i++) {
@@ -187,9 +222,13 @@
     // add ckeditor
     window.CKEDITOR.plugins.add('quiqqerBricks', {
         icons: "icon",
-        lang : ['en', 'de'],
+        lang : [
+            'en',
+            'de'
+        ],
 
         onLoad: function () {
+            console.log('onload quiqqer bricks');
             // Register styles for placeholder widget frame.
             window.CKEDITOR.addCss(
                 '.quiqqer_bricks_placeholder {' +
@@ -229,6 +268,8 @@
         },
 
         init: function (editor) {
+            console.log('on init quiqqer bricks');
+
             var self = this;
 
             this.$Editor = editor;
@@ -250,7 +291,7 @@
                 var brickId, textNode, PH;
 
                 for (var i = 0, len = placeholders.length; i < len; i++) {
-                    PH      = placeholders[i];
+                    PH = placeholders[i];
                     brickId = PH.get('data-brickid');
 
                     if (!brickId) {
@@ -294,11 +335,11 @@
 
                         if ("id" in attributes) {
                             return '<cke:object ' +
-                                'contenteditable="false" ' +
-                                'data-cke-widget-wrapper="1" ' +
-                                'class="quiqqer_bricks_placeholder cke_widget_wrapper cke_widget_inline" ' +
-                                'data-brickid="' + attributes.id + '"' +
-                                '></cke:object>';
+                                   'contenteditable="false" ' +
+                                   'data-cke-widget-wrapper="1" ' +
+                                   'class="quiqqer_bricks_placeholder cke_widget_wrapper cke_widget_inline" ' +
+                                   'data-brickid="' + attributes.id + '"' +
+                                   '></cke:object>';
                         }
 
                         return "";
@@ -322,7 +363,7 @@
                         'package/quiqqer/bricks/bin/Controls/backend/BrickSelectWindow'
                     ], function (BrickSelectWindow) {
                         // get project, if editor is in panel
-                        var Node        = editor.ui.contentsElement.$;
+                        var Node = editor.ui.contentsElement.$;
                         var projectData = getProjectData(Node, editor);
 
                         new BrickSelectWindow({
@@ -355,7 +396,7 @@
             );
 
             var i, len, o;
-            var doc   = editor.document.$;
+            var doc = editor.document.$;
             var nodes = doc.body.querySelectorAll('div.quiqqer_bricks_placeholder');
 
             for (i = 0, len = nodes.length; i < len; i++) {