567 lines
20 KiB
JavaScript
567 lines
20 KiB
JavaScript
/**
|
|
* CS-Editor
|
|
* Stellt die Grundsätzlichen Funktionen des Editors her.
|
|
* Bindet die einzelnen Editoren bei Aufruf ein.
|
|
*
|
|
* Created by CS medien- & kommunikationssysteme.
|
|
* @author Christian Steinle
|
|
* @date 30.09.2016
|
|
*
|
|
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
|
*/
|
|
|
|
var CS = new Object({
|
|
/**
|
|
* Standard-Variablen für den Editor
|
|
*/
|
|
editorType: '',
|
|
editorTemplate: '',
|
|
editorTitle: '',
|
|
editorName: '',
|
|
editorHtml: '',
|
|
editorDataID: 0,
|
|
editorData: null,
|
|
editor: null,
|
|
preventSortStop: false,
|
|
|
|
/**
|
|
* jQuery-Elemente für den Editor
|
|
*/
|
|
pageElement: null,
|
|
editorConfirmElement: null,
|
|
layerElement: null,
|
|
waitingElement: null,
|
|
titleElement: null,
|
|
closeElement: null,
|
|
contentElement: null,
|
|
editableElement: null,
|
|
editableHoverClassName: '',
|
|
sortableElement: null,
|
|
editorOpenElement: null,
|
|
editorSortElement: null,
|
|
editorTrashElement: null,
|
|
|
|
/**
|
|
* jQuery-Elemente für neue Seiten-Inhalte
|
|
*/
|
|
newObjectElement: null,
|
|
newObjectTitleElement: null,
|
|
newObjectMinElement: null,
|
|
newSubLineElement: null,
|
|
newTextElement: null,
|
|
newTextImageElement: null,
|
|
newTextImageTextElement: null,
|
|
newTextImageImageElement: null,
|
|
newElementsClass: null,
|
|
newElementsClassName: '',
|
|
|
|
/**
|
|
* Initialisiert die Icons und deren Funktionen, die bei $(document).ready gesetzt werden.
|
|
* onclick Events... werden sonst mehrfach gefeuert
|
|
*/
|
|
initPermanentFunctions: function () {
|
|
/**
|
|
* Editor Schließen
|
|
*/
|
|
CS.closeElement.on('click', function () {
|
|
CS.closeEditor();
|
|
});
|
|
|
|
/**
|
|
* Minimieren / Maximieren der Box mit neuen Seiten-Elementen
|
|
*/
|
|
CS.newObjectElement.on('click', CS.newObjectMinElement, function (event) {
|
|
if (!$(event.target).hasClass('glyphicon')) {
|
|
return;
|
|
}
|
|
if (CS.newObjectTitleElement.html() !== ' ') {
|
|
CS.newObjectTitleElement.html(' ');
|
|
CS.newObjectMinElement.removeClass('glyphicon-chevron-right');
|
|
CS.newObjectMinElement.addClass('glyphicon-chevron-left');
|
|
$(this).css({width: 45, height: 42});
|
|
}
|
|
else {
|
|
CS.newObjectTitleElement.html(csEditorLang.newContent.title);
|
|
CS.newObjectMinElement.removeClass('glyphicon-chevron-left');
|
|
CS.newObjectMinElement.addClass('glyphicon-chevron-right');
|
|
$(this).css({width: '', height: ''});
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
* Initialisiert den Editor
|
|
*/
|
|
initEditor: function () {
|
|
CS.initElements();
|
|
CS.initEvents();
|
|
},
|
|
|
|
/**
|
|
* Initialisiert die jQuery Elemente
|
|
* zum Bearbeiten und Einfügen neuer Inhalte
|
|
*/
|
|
initElements: function () {
|
|
CS.pageElement = $('.sortable', '#content');
|
|
CS.editorConfirmElement = $('#csEditorConfirm');
|
|
|
|
/**
|
|
* Elemente des Editor-Layers
|
|
*/
|
|
CS.layerElement = $('#csEditorLayer');
|
|
CS.waitingElement = $('#csEditorWaiting');
|
|
CS.titleElement = $('#csEditorTitle');
|
|
CS.closeElement = $('#csEditorLayerClose');
|
|
CS.contentElement = $('#csEditorContent');
|
|
CS.editableElement = $('[data-editor]');
|
|
CS.editableHoverClassName = 'editableHover';
|
|
CS.sortableElement = $('[data-editor]', '.sortable');
|
|
CS.editorTitle = CS.titleElement.html();
|
|
|
|
/**
|
|
* Elemente für neue Seiten-Inhalte
|
|
*/
|
|
CS.newObjectElement = $('#csEditorPageElements');
|
|
CS.newObjectTitleElement = $('#csEditorPageElementsTitle', CS.newObjectElement);
|
|
CS.newObjectMinElement = $('#csEditorPageElementsMin', CS.newObjectElement);
|
|
CS.newSubLineElement = $('[data-editor="Subline"] h2', CS.newObjectElement);
|
|
CS.newTextElement = $('[data-editor="Text"] p', CS.newObjectElement);
|
|
CS.newTextImageElement = $('[data-editor="ImageText"]', CS.newObjectElement);
|
|
CS.newTextImageTextElement = $('p', CS.newTextImageElement);
|
|
CS.newTextImageImageElement = $('img', CS.newTextImageElement);
|
|
CS.newElementsClassName = 'btn btn-default btn-block';
|
|
CS.newElementsClass = $('.' + CS.newElementsClassName.replace(/ /g, '.'));
|
|
|
|
/**
|
|
* Texte und Daten für neue Seiten-Inhalte
|
|
*/
|
|
CS.newObjectTitleElement.html(csEditorLang.newContent.title);
|
|
CS.newSubLineElement.html(csEditorLang.newContent.subline);
|
|
CS.newTextElement.html(csEditorLang.newContent.text);
|
|
CS.newTextImageTextElement.html(csEditorLang.newContent.textImage);
|
|
CS.newTextImageImageElement.attr('src', csEditorParams.imageDimension.image.standardImage);
|
|
},
|
|
|
|
/**
|
|
* Initialisiert die Events für den Editor
|
|
* - Bearbeitung
|
|
* - Sortierung
|
|
* - Einfügen neuer Inhalte
|
|
* - Speichern
|
|
* - Abbrechen
|
|
* - Vor / Zurück
|
|
*/
|
|
initEvents: function () {
|
|
CS.initIcons();
|
|
CS.initIconFunctions();
|
|
CS.initEditorFunctions();
|
|
CS.initNewElementFunctions();
|
|
},
|
|
|
|
/**
|
|
* Editier-, Sortier- und Lösch-Icons setzen
|
|
*/
|
|
initIcons: function () {
|
|
$('.glyphicon.glyphicon-pencil, .glyphicon.glyphicon-sort, .glyphicon.glyphicon-trash').remove();
|
|
CS.editableElement.each(function () {
|
|
if ($(this).parents('#csEditorPageElements').length > 0) {
|
|
return true;
|
|
}
|
|
var style = (this.dataset.editor === 'Headline' || this.dataset.editor === 'Navigation' || this.dataset.editor === 'Subline') ? ' style="margin-top:24px;"' : '';
|
|
$(this).append('<span' + style + ' class="glyphicon glyphicon-pencil"></span>');
|
|
});
|
|
|
|
if (CS.sortableElement.length > 1) {
|
|
CS.sortableElement.each(function () {
|
|
var style = (this.dataset.editor === 'Subline') ? ' style="margin-top:24px;"' : '';
|
|
$(this).append('<span' + style + ' class="glyphicon glyphicon-sort"></span>');
|
|
});
|
|
}
|
|
|
|
CS.sortableElement.each(function () {
|
|
var style = (this.dataset.editor === 'Subline') ? ' style="margin-top:24px;"' : '';
|
|
$(this).append('<span' + style + ' class="glyphicon glyphicon-trash"></span>');
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
* Funktionalität auf die Icons legen
|
|
*/
|
|
initIconFunctions: function () {
|
|
CS.editorOpenElement = $('.glyphicon-pencil');
|
|
CS.editorSortElement = $('.glyphicon-sort');
|
|
CS.editorTrashElement = $('.glyphicon-trash');
|
|
|
|
/**
|
|
* Hover Effekte
|
|
*/
|
|
CS.editorOpenElement.on('mouseenter', function () {
|
|
$(this).parent('[data-editor]').addClass(CS.editableHoverClassName);
|
|
});
|
|
|
|
CS.editorOpenElement.on('mouseleave', function () {
|
|
$(this).parent('[data-editor]').removeClass(CS.editableHoverClassName);
|
|
});
|
|
|
|
CS.editorSortElement.on('mouseenter', function () {
|
|
$(this).parent('[data-editor]').addClass(CS.editableHoverClassName);
|
|
});
|
|
|
|
CS.editorSortElement.on('mouseleave', function () {
|
|
$(this).parent('[data-editor]').removeClass(CS.editableHoverClassName);
|
|
});
|
|
|
|
CS.editorTrashElement.on('mouseenter', function () {
|
|
$(this).parent('[data-editor]').addClass(CS.editableHoverClassName);
|
|
});
|
|
|
|
CS.editorTrashElement.on('mouseleave', function () {
|
|
$(this).parent('[data-editor]').removeClass(CS.editableHoverClassName);
|
|
});
|
|
|
|
/**
|
|
* Sortierung der Seiten-Elemente und Einordnen neuer Elemente
|
|
*/
|
|
CS.pageElement.sortable({
|
|
axis: 'y',
|
|
forcePlaceholderSize: true,
|
|
handle: '.glyphicon-sort',
|
|
placeholder: CS.editableHoverClassName,
|
|
receive: function (event, ui) {
|
|
CS.preventSortStop = true;
|
|
ui.helper.removeAttr('style');
|
|
|
|
var sortOrder = CS.pageElement.sortable('toArray', {attribute: 'data-element'});
|
|
var formData = new FormData();
|
|
formData.append('request', 'insertContent');
|
|
formData.append('navID', csEditorParams.navID);
|
|
formData.append('token', csEditorParams.token);
|
|
formData.append('sortOrder', sortOrder);
|
|
|
|
var returnData = CS.sendRequest(formData, true);
|
|
if (!isNaN(returnData.responseJSON)) {
|
|
/**
|
|
* Arbeiten auf Attributen, data-Elemente funktionieren sonst in der stop-Funktion nicht!
|
|
*/
|
|
$(ui.helper).attr('data-id', returnData.responseJSON);
|
|
$(ui.helper).attr('data-element', $(ui.helper).attr('data-editor') + '_' + returnData.responseJSON);
|
|
|
|
CS.initEditor();
|
|
}
|
|
else {
|
|
alert('Fehler beim Einfügen des neuen Seiten-Inhalts');
|
|
}
|
|
},
|
|
stop: function () {
|
|
|
|
if (CS.preventSortStop === true) {
|
|
CS.preventSortStop = false;
|
|
return;
|
|
}
|
|
|
|
var sortOrder = CS.pageElement.sortable('toArray', {attribute: 'data-element'});
|
|
var formData = new FormData();
|
|
formData.append('request', 'updateContentSort');
|
|
formData.append('navID', csEditorParams.navID);
|
|
formData.append('token', csEditorParams.token);
|
|
formData.append('sortOrder', sortOrder);
|
|
CS.sendRequest(formData);
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Funktionalität im Editor-Layer festlegen
|
|
*/
|
|
initEditorFunctions: function () {
|
|
/**
|
|
* Editor öffnen
|
|
*/
|
|
CS.editorOpenElement.on('click', function () {
|
|
CS.editorType = $(this).parent('[data-editor]').data('editor');
|
|
CS.editorTemplate = CS.editorType.toLowerCase() + '.php';
|
|
CS.editorDataID = $(this).parent('[data-editor]').data('id');
|
|
CS.editorTitle = CS.titleElement.html();
|
|
CS.editorName = CS.editorType.toUpperCase();
|
|
CS.titleElement.html(CS.editorTitle.replace('%%editor%%', CS.editorName));
|
|
|
|
if (CS.callEditor() === false) {
|
|
return false;
|
|
}
|
|
|
|
CS.waitingElement.show();
|
|
CS.layerElement.show();
|
|
});
|
|
|
|
/**
|
|
* Dialog vor dem Löschen
|
|
*/
|
|
CS.editorConfirmElement.dialog({
|
|
autoOpen: false,
|
|
resizable: false,
|
|
classes: {
|
|
'ui-dialog': 'panel panel-primary',
|
|
'ui-dialog-titlebar': 'panel-heading',
|
|
'ui-dialog-titlebar-close': 'glyphicon glyphicon-remove',
|
|
'ui-dialog-content': 'panel-body',
|
|
'ui-dialog-buttonpane': 'panel-footer',
|
|
},
|
|
height: 'auto',
|
|
width: 400,
|
|
modal: true,
|
|
closeOnEscape: true,
|
|
buttons: [
|
|
{
|
|
text: csEditorLang.button.delete,
|
|
click: function () {
|
|
var formData = new FormData();
|
|
formData.append('token', csEditorParams.token);
|
|
formData.append('request', 'deleteContentElement');
|
|
formData.append('navID', csEditorParams.navID);
|
|
formData.append('editorType', CS.editorType);
|
|
formData.append('editorDataID', CS.editorDataID);
|
|
var returnData = CS.sendRequest(formData, true);
|
|
if (!isNaN(returnData.responseJSON) && returnData.responseJSON > 0) {
|
|
$('div[data-element="' + CS.editorType + '_' + CS.editorDataID + '"]').remove();
|
|
$(this).dialog('close');
|
|
}
|
|
}
|
|
},
|
|
{
|
|
text: csEditorLang['button']['cancel'],
|
|
click: function () {
|
|
$(this).dialog('close');
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
$('.ui-icon-alert', CS.editorConfirmElement).addClass('glyphicon glyphicon-alert');
|
|
$('button', '.ui-dialog-buttonset').addClass('btn btn-default');
|
|
|
|
/**
|
|
* Löschen von Elementen, danach kommt der Dialog
|
|
*/
|
|
CS.editorTrashElement.on('click', function () {
|
|
CS.editorDataID = $(this).parent().data('id');
|
|
CS.editorType = $(this).parent().data('editor');
|
|
CS.editorConfirmElement.dialog('open');
|
|
});
|
|
|
|
/**
|
|
* Zur Sicherheit Funktionen von den Handlern entfernen
|
|
* Ansonsten werden diese Events mehrfach getriggert, wenn neue Seitenelement hinzugefügt werden
|
|
*/
|
|
CS.contentElement.off('click', '.formCancel');
|
|
CS.contentElement.off('click', '.formNext');
|
|
CS.contentElement.off('click', '.formPrev');
|
|
CS.contentElement.off('click', '.formSubmit');
|
|
|
|
/**
|
|
* Button zum Absenden der Daten
|
|
*/
|
|
CS.contentElement.on('click', '.formSubmit', function () {
|
|
/**
|
|
* Update der CKEditor-Instanzen, rückschreiben in die Textareas
|
|
*/
|
|
$.each(CKEDITOR.instances, function (key) {
|
|
CKEDITOR.instances[key].updateElement();
|
|
});
|
|
|
|
var form = document.getElementById('csEditorForm');
|
|
var formData = new FormData(form);
|
|
formData.append('token', csEditorParams.token);
|
|
|
|
var returnData = CS.sendRequest(formData, true);
|
|
if (!isNaN(returnData.responseJSON) && returnData.responseJSON > 0) {
|
|
CS.resetEditor();
|
|
CS.callEditor();
|
|
}
|
|
else {
|
|
/**
|
|
* TODO: Fehlermeldung mit Übersetzung
|
|
*/
|
|
alert('Fehler beim Speichern der Daten');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Button zum Abbrechen, schließt den Editor
|
|
*/
|
|
CS.contentElement.on('click', '.formCancel', function () {
|
|
CS.closeEditor();
|
|
});
|
|
|
|
/**
|
|
* Weiter, benötigt für Editoren mit mehreren Seiten
|
|
*/
|
|
CS.contentElement.on('click', '.formNext', function () {
|
|
var actualInnerSlider = $(this).parents('.csEditorSliderContent');
|
|
actualInnerSlider.hide();
|
|
actualInnerSlider.next('.csEditorSliderContent').show();
|
|
});
|
|
|
|
/**
|
|
* Zurück, benötigt für Editoren mit mehreren Seiten
|
|
*/
|
|
CS.contentElement.on('click', '.formPrev', function () {
|
|
var actualInnerSlider = $(this).parents('.csEditorSliderContent');
|
|
actualInnerSlider.hide();
|
|
actualInnerSlider.prev('.csEditorSliderContent').show();
|
|
});
|
|
},
|
|
|
|
initNewElementFunctions: function () {
|
|
/**
|
|
* Verschiebbarkeit der Box
|
|
*/
|
|
CS.newObjectElement.draggable({
|
|
addClasses: false,
|
|
handle: CS.newObjectTitleElement,
|
|
stop: function () {
|
|
CS.newObjectElement.css({
|
|
left: 'auto',
|
|
right: ($(document).innerWidth - CS.newObjectElement.position().left - CS.newObjectElement.innerWidth)
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Hinzufügen neuer Seiten-Inhalte
|
|
* TODO: Ausblenden nicht vorhandener Neuer Elemente anhand der Konfiguration
|
|
*/
|
|
CS.newElementsClass.draggable({
|
|
connectToSortable: CS.pageElement,
|
|
helper: 'clone',
|
|
start: function (event, ui) {
|
|
ui.helper.removeClass(CS.newElementsClassName);
|
|
ui.helper.removeClass(CS.editableHoverClassName);
|
|
$('div', ui.helper).removeClass(CS.editableHoverClassName);
|
|
}
|
|
});
|
|
},
|
|
|
|
callEditor: function () {
|
|
switch (CS.editorType) {
|
|
case 'Navigation':
|
|
CS.editor = Navigation;
|
|
break;
|
|
|
|
case 'Headline':
|
|
CS.editor = Headline;
|
|
break;
|
|
|
|
case 'Subline':
|
|
CS.editor = Subline;
|
|
break;
|
|
|
|
case 'Text':
|
|
CS.editor = Text;
|
|
break;
|
|
|
|
case 'ImageText':
|
|
CS.editor = ImageText;
|
|
break;
|
|
|
|
case 'KeyVisual':
|
|
CS.editor = KeyVisual;
|
|
break;
|
|
|
|
default:
|
|
alert('JavaScript Funktionalität ist für diesen Editoren-Typ (' + CS.editorType + ') noch nicht implementiert!');
|
|
return false;
|
|
break;
|
|
}
|
|
if (CS.editor !== null) {
|
|
CS.fetchHTML();
|
|
CS.fetchData();
|
|
CS.editor.fillEditorContent();
|
|
return true;
|
|
}
|
|
},
|
|
|
|
resetEditor: function () {
|
|
CS.editor.close();
|
|
CS.contentElement.html('');
|
|
|
|
CS.editorHtml = '';
|
|
CS.editorData = null;
|
|
},
|
|
|
|
closeEditor: function () {
|
|
CS.resetEditor();
|
|
CS.titleElement.html(CS.editorTitle);
|
|
|
|
CS.editorTitle = '';
|
|
CS.editorType = '';
|
|
CS.editorTemplate = '';
|
|
CS.editorName = '';
|
|
CS.editorDataID = 0;
|
|
CS.editor = null;
|
|
|
|
CS.waitingElement.hide();
|
|
CS.layerElement.hide();
|
|
location.reload();
|
|
},
|
|
|
|
sendRequest: function (formData, sync) {
|
|
sync = (sync) ? sync : false;
|
|
|
|
return $.ajax({
|
|
url: csEditorParams.backendUrl,
|
|
data: formData,
|
|
dataType: 'json',
|
|
method: 'post',
|
|
async: !sync,
|
|
processData: false,
|
|
contentType: false,
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
alert(csEditorLang.error.sendData + '\n' + csEditorLang.error.status + '"' + textStatus + '"\n' + csEditorLang.error.errorMessage + '"' + errorThrown + '"');
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
fetchHTML: function () {
|
|
$.ajax({
|
|
url: csEditorParams.editorUrl + csEditorParams.editorVersion + '/templates/' + CS.editorTemplate,
|
|
data: {lang: csEditorParams.sessionLanguage},
|
|
dataType: 'html',
|
|
method: 'post',
|
|
error: function () {
|
|
alert(csEditorLang.error.template + '\n' + CS.editorTemplate);
|
|
},
|
|
success: function (editorHtml) {
|
|
CS.editorHtml = editorHtml;
|
|
CS.contentElement.html(editorHtml);
|
|
}
|
|
});
|
|
},
|
|
|
|
fetchData: function () {
|
|
$.ajax({
|
|
url: csEditorParams.backendUrl,
|
|
data: {token: csEditorParams.token, request: 'get' + CS.editorType, ID: CS.editorDataID},
|
|
dataType: 'json',
|
|
method: 'post',
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
alert(csEditorLang.error.fetchData + '\n' + csEditorLang.error.status + '"' + textStatus + '"\n' + csEditorLang.error.errorMessage + '"' + errorThrown + '"');
|
|
},
|
|
success: function (editorData) {
|
|
CS.editorData = editorData;
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
var body = $('body');
|
|
body.prepend(csEditorTemplate);
|
|
body.append(csEditorPageElements);
|
|
CS.initEditor();
|
|
CS.initPermanentFunctions();
|
|
});
|