feat: package-bricks#124 - WYSIWYG Button Bricks



ajax/getBrickInfo.php

+<?php
+
+/**
+ * Gets information about a brick
+ */
+
+QUI::$Ajax->registerFunction(
+    'package_quiqqer_ckeditor4_ajax_getBrickInfo',
+    function ($brickId) {
+        try {
+            $Brick = QUI\Bricks\Manager::init()->getBrickById($brickId);
+        } catch (QUI\Exception $Exception) {
+            return '';
+        }
+
+        return '#'.$Brick->getAttribute('id').' - '.$Brick->getAttribute('title');
+    },
+    ['brickId']
+);

plugins/quiqqer/quiqqerBricks/plugin.js

 (function () {
     "use strict";
 
+    // finds out which project are active
+    var getProjectData = function (Node, editor) {
+        var Panel, Site;
+        var project = '';
+        var lang    = '';
+
+        if (Node.closest('.qui-panel')) {
+            Panel = window.QUI.Controls.getById(
+                Node.closest('.qui-panel').get('data-quiid')
+            );
+
+            if (Panel && Panel.getType() === 'controls/projects/project/site/Panel') {
+                Site = Panel.getSite();
+
+                project = Site.getProject().getName();
+                lang    = Site.getProject().getLang();
+            }
+        } else {
+            Node = editor.ui.contentsElement.$;
+
+            if (Node.closest('.qui-panel')) {
+                Panel = window.QUI.Controls.getById(
+                    Node.closest('.qui-panel').get('data-quiid')
+                );
+
+                if (Panel && Panel.getType() === 'controls/projects/project/site/Panel') {
+                    Site = Panel.getSite();
+
+                    project = Site.getProject().getName();
+                    lang    = Site.getProject().getLang();
+                }
+            }
+        }
+
+        return {
+            project: project,
+            lang   : lang
+        };
+    };
+
+    var editNode = function (Node, editor) {
+        if (!Node.classList.contains('quiqqer_bricks_placeholder')) {
+            return;
+        }
+
+        var brickId     = Node.getAttribute('data-brickid');
+        var projectData = getProjectData(Node, editor);
+
+        require(['qui/controls/windows/Confirm'], function (QUIConfirm) {
+            new QUIConfirm({
+                icon     : 'fa fa-cubes',
+                title    : 'Editor Baustein ändern',
+                maxHeight: 300,
+                maxWidth : 500,
+                events   : {
+                    onOpen: function (Win) {
+                        Win.getContent().set(
+                            'html',
+
+                            '<label style="display: flex; width: 300px; 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">' +
+                            '       <span class="fa fa-cubes"></span>' +
+                            '   </button>' +
+                            '</label>'
+                        );
+
+                        Win.getContent().getElement('input').set('value', brickId);
+
+                        Win.getContent().getElement('button').addEvent('click', function () {
+                            require([
+                                'package/quiqqer/bricks/bin/Controls/backend/BrickSelectWindow'
+                            ], function (BrickSelectWindow) {
+                                new BrickSelectWindow({
+                                    project : projectData.project,
+                                    lang    : projectData.lang,
+                                    multiple: false,
+                                    events  : {
+                                        onSubmit: function (Instance, ids) {
+                                            if (ids.length) {
+                                                Win.getContent()
+                                                   .getElement('input')
+                                                   .set('value', parseInt(ids[0].id));
+                                            }
+                                        }
+                                    }
+                                }).open();
+                            });
+                        });
+                    },
+
+                    onSubmit: function (Win) {
+                        var brickId = Win.getContent().getElement('input').value;
+
+                        if (brickId !== '') {
+                            Node.setAttribute('data-brickid', brickId);
+                            refreshPlaceholderDisplay(Node, editor);
+                        }
+                    }
+                }
+            }).open();
+        });
+    };
+
+    // set custom div events
+    var setPlaceHolderEvents = function (element, editor) {
+        if (element.getAttribute('data-placeholder-event')) {
+            return;
+        }
+
+        // edit
+        element.addEventListener('click', function (e) {
+            var Target = e.target;
+
+            // delete brick
+            if (Target.name === 'delete') {
+                e.preventDefault();
+
+                var Brick = e.target.closest('.quiqqer_bricks_placeholder');
+                Brick.parentNode.removeChild(Brick)
+            }
+        });
+
+        element.addEventListener('focus', function () {
+            console.log('focus');
+        });
+
+        element.addEventListener('dblclick', function (e) {
+            editNode(e.target, editor);
+        });
+
+        element.setAttribute('data-placeholder-event', 1);
+        element.setAttribute('tabindex', -1);
+
+        refreshPlaceholderDisplay(element, editor);
+    };
+
+    // refresh placeholder display data
+    var refreshPlaceholderDisplay = function (element, editor) {
+        var doc      = editor.document.$;
+        var Info     = element.querySelector('.quiqqer_bricks_placeholder_info');
+        var Settings = element.querySelector('.quiqqer_bricks_placeholder_settings');
+
+        if (!Info) {
+            Info = doc.createElement('div');
+            Info.classList.add('quiqqer_bricks_placeholder_info');
+
+            element.appendChild(Info);
+        }
+
+        if (!Settings) {
+            Settings           = doc.createElement('div');
+            Settings.innerHTML = '<button name="delete">x</button>';
+            Settings.classList.add('quiqqer_bricks_placeholder_settings');
+
+            element.appendChild(Settings);
+        }
+
+        require(['Ajax'], function (QUIAjax) {
+            QUIAjax.get('package_quiqqer_ckeditor4_ajax_getBrickInfo', function (result) {
+                Info.innerHTML = result;
+            }, {
+                'package': 'quiqqer/ckeditor4',
+                brickId  : element.getAttribute('data-brickid')
+            });
+        });
+    };
+
+    var setCustomEvents = function (evt) {
+        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++) {
+            setPlaceHolderEvents(elements[i], editor);
+        }
+    };
+
+    // add ckeditor
     CKEDITOR.plugins.add('quiqqerBricks', {
         icons: "icon",
         lang : ['en', 'de'],
@@ -8,12 +188,35 @@
         onLoad: function () {
             // Register styles for placeholder widget frame.
             CKEDITOR.addCss(
-                '.quiqqer_bricks_placeholder{' +
+                '.quiqqer_bricks_placeholder {' +
+                '   cursor: pointer;' +
                 '   display: inline-block;' +
                 '   background-color:#dedede;' +
                 '   height: 200px;' +
                 '   margin-bottom: 10px;' +
+                '   position: relative;' +
                 '   width: 100%;' +
+                '}' +
+                '.quiqqer_bricks_placeholder:hover {' +
+                '   outline: 2px solid #2F8FC6' +
+                '}' +
+                '.quiqqer_bricks_placeholder_info {' +
+                '   left: 10px;' +
+                '   position: absolute;' +
+                '   pointer-events: none;' +
+                '   top: 10px;' +
+                '}' +
+                '' +
+                '.quiqqer_bricks_placeholder_settings {' +
+                '   display: none;' +
+                //'   pointer-events: none;' +
+                '   position: absolute;' +
+                '   top: 10px;' +
+                '   right: 10px;' +
+                '}' +
+                '' +
+                '.quiqqer_bricks_placeholder:hover .quiqqer_bricks_placeholder_settings {' +
+                '   display: inline;' +
                 '}'
             );
         },
@@ -30,23 +233,24 @@
                 icon   : this.path + 'images/icon.jpg'
             });
 
+            // save
             editor.on('getData', function (evt) {
                 var Ghost = new Element('div', {
                     html: evt.data.dataValue
                 });
 
                 var placeholders = Ghost.getElements('.quiqqer_bricks_placeholder');
-                var lang, project, brickid, textNode, PH;
+                var brickId, textNode, PH;
 
                 for (var i = 0, len = placeholders.length; i < len; i++) {
                     PH      = placeholders[i];
-                    brickid = PH.get('data-brickid');
+                    brickId = PH.get('data-brickid');
 
-                    if (!brickid) {
+                    if (!brickId) {
                         continue;
                     }
 
-                    textNode = document.createTextNode("{{brick id=" + brickid + "}}");
+                    textNode = document.createTextNode("{{brick id=" + brickId + "}}");
 
                     PH.parentNode.insertBefore(textNode, PH);
                     PH.parentNode.removeChild(PH);
@@ -55,7 +259,7 @@
                 evt.data.dataValue = Ghost.get('html');
             });
 
-
+            // load
             editor.on('setData', function (evt) {
                 var result;
                 var data = evt.data.dataValue;
@@ -66,7 +270,7 @@
 
                 result = data.replace(
                     /{{brick ([^}}]*)}}/g,
-                    function (match, contents, offset, input_string) {
+                    function (match) {
                         match = match.replace('{{brick ', '')
                         match = match.replace('}}', '');
                         match = match.trim();
@@ -82,9 +286,9 @@
                         }
 
                         if ("id" in attributes) {
-                            return '<div class="quiqqer_bricks_placeholder" ' +
+                            return '<cke:object class="quiqqer_bricks_placeholder" ' +
                                 'data-brickid="' + attributes.id + '"' +
-                                '>&nbsp;</div>';
+                                '></cke:object>';
                         }
 
                         return "";
@@ -92,40 +296,34 @@
                 );
 
                 evt.data.dataValue = result;
+
+                setTimeout(function () {
+                    setCustomEvents(evt);
+                }, 500);
             });
 
+            editor.on('afterInsertHtml', setCustomEvents);
+
 
+            // editor inser command
             editor.addCommand('insert-quiqqer-brick', {
                 exec: function (editor) {
                     require([
                         'package/quiqqer/bricks/bin/Controls/backend/BrickSelectWindow'
                     ], function (BrickSelectWindow) {
                         // get project, if editor is in panel
-                        var Node    = editor.ui.contentsElement.$;
-                        var project = '';
-                        var lang    = '';
-
-                        if (Node.getParent('.qui-panel')) {
-                            var Panel = QUI.Controls.getById(
-                                Node.getParent('.qui-panel').get('data-quiid')
-                            );
-
-                            if (Panel && Panel.getType() === 'controls/projects/project/site/Panel') {
-                                var Site = Panel.getSite();
-
-                                project = Site.getProject().getName();
-                                lang    = Site.getProject().getLang();
-                            }
-                        }
+                        var Node        = editor.ui.contentsElement.$;
+                        var projectData = getProjectData(Node, editor);
 
                         new BrickSelectWindow({
-                            project : project,
-                            lang    : lang,
+                            project : projectData.project,
+                            lang    : projectData.lang,
                             area    : 'content',
                             multiple: false,
                             events  : {
                                 onSubmit: function (Instance, bricks) {
                                     self.insertBrick(
+                                        editor,
                                         bricks[0].id,
                                         bricks[0].project,
                                         bricks[0].lang
@@ -138,12 +336,28 @@
             });
         },
 
-        insertBrick: function (brickId, project, lang) {
-            this.$Editor.insertHtml(
+        insertBrick: function (editor, brickId) {
+            editor.insertHtml(
                 '<div class="quiqqer_bricks_placeholder" ' +
                 '   data-brickid="' + brickId + '"' +
                 '>&nbsp;</div>'
             );
+
+            var i, len, o;
+            var doc   = editor.document.$;
+            var nodes = doc.body.querySelectorAll('div.quiqqer_bricks_placeholder');
+
+            for (i = 0, len = nodes.length; i < len; i++) {
+                o = doc.createElement('cke:object');
+                o.setAttribute('data-brickid', nodes[i].getAttribute('data-brickid'));
+                o.classList.add('quiqqer_bricks_placeholder');
+
+                nodes[i].parentNode.replaceChild(o, nodes[i]);
+            }
+
+            setCustomEvents({
+                editor: editor
+            });
         }
     });
 })();