Skip to content
Code-Schnipsel Gruppen Projekte
Commit 1a4ccb79 erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

feat: Brick edit button at the WYSIWYG Brick Window

Übergeordneter 6e279e64
No related branches found
No related tags found
2 Merge Requests!6Version 2.3.1,!2feat: Brick edit button at the WYSIWYG Brick Window
Leerzeichenänderungen ausblenden
Inline Nebeneinander
locale.xml
+ 9
− 0
Zeige Datei @ 1a4ccb79
......@@ -151,5 +151,14 @@
<de><![CDATA[Editor Baustein ändern]]></de>
<en><![CDATA[Change editor brick]]></en>
</locale>
<locale name="window.bricks.editor.selectBrick">
<de><![CDATA[Anderen Brick auswählen]]></de>
<en><![CDATA[Select other brick]]></en>
</locale>
<locale name="window.bricks.editor.editBrick">
<de><![CDATA[Brick editieren]]></de>
<en><![CDATA[Edit brick]]></en>
</locale>
</groups>
</locales>
plugins/quiqqer/quiqqerBricks/plugin.js
+ 65
− 24
Zeige Datei @ 1a4ccb79
(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++) {
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab