feat: package-bricks#124

bin/Editor.js

@@ -247,23 +247,23 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
                 }
 
                 window.CKEDITOR.replace(instance, {
-                    skinName                 : 'moono-lisa',
-                    customConfig             : '',
-                    language                 : Locale.getCurrent(),
-                    baseHref                 : URL_DIR,
-                    basePath                 : URL_DIR,
-                    height                   : height,
-                    width                    : width,
-                    toolbar                  : toolbar,
-                    allowedContent           : true,
-                    extraAllowedContent      : 'iframe(*)[*]{*}; img(*)[*]{*}; script(*)[*]{*}; ins(*)[*]{*}',
-                    protectedSource          : [/<ins[\s|\S]+?<\/ins>/g],
-                    stylesSet                : styles,
-                    contentsCss              : data.cssFiles || [],
-                    bodyClass                : data.bodyClass,
+                    skinName           : 'moono-lisa',
+                    customConfig       : '',
+                    language           : Locale.getCurrent(),
+                    baseHref           : URL_DIR,
+                    basePath           : URL_DIR,
+                    height             : height,
+                    width              : width,
+                    toolbar            : toolbar,
+                    allowedContent     : true,
+                    extraAllowedContent: 'iframe(*)[*]{*}; img(*)[*]{*}; script(*)[*]{*}; ins(*)[*]{*}',
+                    protectedSource    : [/<ins[\s|\S]+?<\/ins>/g],
+                    stylesSet          : styles,
+                    contentsCss        : data.cssFiles || [],
+                    bodyClass          : data.bodyClass,
                     // templates_files : [URL_OPT_DIR +'base/bin/pcsgEditorPlugins/templates.php'],
-                    baseFloatZIndex          : zIndex,
-                    extraPlugins             : extraPlugins,
+                    baseFloatZIndex: zIndex,
+                    extraPlugins   : extraPlugins,
                     //removePlugins            : 'scayt',
                     disableNativeSpellChecker: config.disableNativeSpellChecker,
                     autoGrow_onStartup       : false,
@@ -484,7 +484,7 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
             var extra      = [],
                 buttonList = [];
 
-            if (typeOf(toolbar) == 'array') {
+            if (typeOf(toolbar) === 'array') {
                 buttonList = toolbar.flatten();
             }
 

plugins/quiqqer/quiqqerBricks/lang/de.js

+CKEDITOR.plugins.setLang('quiqqerBricks', 'de', {
+    button: 'QUIQQER Bausteine'
+});

plugins/quiqqer/quiqqerBricks/lang/en.js

+CKEDITOR.plugins.setLang('quiqqerBricks', 'en', {
+    button: 'QUIQQER Bricks'
+});

plugins/quiqqer/quiqqerBricks/plugin.js

+(function () {
+    "use strict";
+
+    CKEDITOR.plugins.add('quiqqerBricks', {
+        icons: "icon",
+        lang : ['en', 'de'],
+
+        onLoad: function () {
+            // Register styles for placeholder widget frame.
+            CKEDITOR.addCss(
+                '.quiqqer_bricks_placeholder{' +
+                '   display: inline-block;' +
+                '   background-color:#dedede;' +
+                '   height: 200px;' +
+                '   margin-bottom: 10px;' +
+                '   width: 100%;' +
+                '}'
+            );
+        },
+
+        init: function (editor) {
+            var self = this;
+
+            this.$Editor = editor;
+
+            editor.ui.addButton('QuiqqerBricks', {
+                label  : editor.lang.quiqqerBricks.button,
+                toolbar: 'insert',
+                command: 'insert-quiqqer-brick',
+                icon   : this.path + 'images/icon.jpg'
+            });
+
+            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;
+
+                for (var i = 0, len = placeholders.length; i < len; i++) {
+                    PH      = placeholders[i];
+                    brickid = PH.get('data-brickid');
+
+                    if (!brickid) {
+                        continue;
+                    }
+
+                    textNode = document.createTextNode("{{brick id=" + brickid + "}}");
+
+                    PH.parentNode.insertBefore(textNode, PH);
+                    PH.parentNode.removeChild(PH);
+                }
+
+                evt.data.dataValue = Ghost.get('html');
+            });
+
+
+            editor.on('setData', function (evt) {
+                var result;
+                var data = evt.data.dataValue;
+
+                if (data.indexOf('{{brick ') === -1) {
+                    return;
+                }
+
+                result = data.replace(
+                    /{{brick ([^}}]*)}}/g,
+                    function (match, contents, offset, input_string) {
+                        match = match.replace('{{brick ', '')
+                        match = match.replace('}}', '');
+                        match = match.trim();
+                        match = match.split(' ');
+
+                        var parts;
+                        var attributes = [];
+
+                        for (var m = 0, len = match.length; m < len; m++) {
+                            parts = match[m].trim().split('=');
+
+                            attributes[parts[0]] = parts[1];
+                        }
+
+                        if ("id" in attributes) {
+                            return '<div class="quiqqer_bricks_placeholder" ' +
+                                'data-brickid="' + attributes.id + '"' +
+                                '>&nbsp;</div>';
+                        }
+
+                        return "";
+                    }
+                );
+
+                evt.data.dataValue = result;
+            });
+
+
+            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();
+                            }
+                        }
+
+                        new BrickSelectWindow({
+                            project : project,
+                            lang    : lang,
+                            area    : 'content',
+                            multiple: false,
+                            events  : {
+                                onSubmit: function (Instance, bricks) {
+                                    self.insertBrick(
+                                        bricks[0].id,
+                                        bricks[0].project,
+                                        bricks[0].lang
+                                    );
+                                }
+                            }
+                        }).open();
+                    });
+                }
+            });
+        },
+
+        insertBrick: function (brickId, project, lang) {
+            this.$Editor.insertHtml(
+                '<div class="quiqqer_bricks_placeholder" ' +
+                '   data-brickid="' + brickId + '"' +
+                '>&nbsp;</div>'
+            );
+        }
+    });
+})();