diff --git a/ajax/getBrickInfo.php b/ajax/getBrickInfo.php
new file mode 100644
index 0000000000000000000000000000000000000000..bb344c4e10dfe168eeac65683231b39f08329d59
--- /dev/null
+++ b/ajax/getBrickInfo.php
@@ -0,0 +1,19 @@
+<?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']
+);
diff --git a/plugins/quiqqer/quiqqerBricks/plugin.js b/plugins/quiqqer/quiqqerBricks/plugin.js
index d610860b79621f9a2b43e207b210c9c22c86109b..527ba73a53a3726bbadcb5f9581f50955c1413e1 100644
--- a/plugins/quiqqer/quiqqerBricks/plugin.js
+++ b/plugins/quiqqer/quiqqerBricks/plugin.js
@@ -1,6 +1,186 @@
(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 + '"' +
- '> </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 + '"' +
'> </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
+ });
}
});
})();