Erster Checkin für die neue Version 2.0
This commit is contained in:
566
js/csEditor.js
Normal file
566
js/csEditor.js
Normal file
@@ -0,0 +1,566 @@
|
||||
/**
|
||||
* 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();
|
||||
});
|
||||
Reference in New Issue
Block a user