Erster Checkin für die neue Version 2.0

js/csEditor.js

@@ -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();
+});

js/headlineEditor.js

@@ -0,0 +1,75 @@
+/**
+ * Headline-Editor
+ *     Stellt die Funktionalität für die Bearbeitung der Überschriften zur Verfügung
+ *
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 11.10.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+var Headline = {
+    headlineEditor: null,
+
+    headlineElement: null,
+
+    init: function() {
+        Headline.initElements();
+    },
+
+    initElements: function() {
+        Headline.headlineElement = $('#navHeadline');
+    },
+
+    fillEditorContent: function () {
+        if (CS.editorData === null || CS.editorHtml === '') {
+            window.setTimeout('Headline.fillEditorContent()', 50);
+            return true;
+        }
+
+        Headline.init();
+
+        CS.editorData.navHeadline = '<h1>' + CS.editorData.navHeadline + '</h1>';
+        $.each(CS.editorData, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+        });
+
+        $('#navName').html(CS.editorData.navName);
+
+        Headline.headlineEditor = Headline.headlineElement.ckeditor({
+            extraPlugins: 'divarea',
+            height: '70px',
+            removeButtons: 'Redo,Font,FontSize',
+            removePlugins: 'elementspath',
+            resize_enabled: false,
+            stylesSet: [
+                {name: 'small', element: 'small'}
+            ],
+            toolbarGroups: [
+                {name: 'clipboard', groups: ['clipboard', 'undo']},
+                {name: 'styles', groups: ['styles']}
+            ]
+        }).editor;
+
+        /**
+         * Entfernen des Format-DropDowns über Instanziierung nicht möglich, da die Styles der Überschrift sonst nicht angewendet wird
+         */
+        Headline.headlineElement.ckeditor().on('instanceReady.ckeditor', function() {
+            $('.cke_combo.cke_combo__format.cke_combo_off').hide();
+        });
+
+        Headline.headlineEditor.on('key', function (event) {
+            if (event.data.keyCode === 13) {
+                event.cancel();
+                return true;
+            }
+        });
+
+    },
+
+    close: function () {
+
+    }
+
+};

js/imageTextEditor.js

@@ -0,0 +1,306 @@
+/**
+ * ImageText-Editor
+ *     Stellt die Funktionalität für die Bearbeitung des zusammengesetzten Editors Bild + Text zur Verfügung
+ *
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 13.10.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+var ImageText = {
+    textEditor: null,
+    editorImage: null,
+
+    textInput: null,
+    nameInput: null,
+    extensionInput: null,
+    origNameInput: null,
+    titleInput: null,
+    formatInput: null,
+    topInput: null,
+    leftInput: null,
+    heightInput: null,
+    widthInput: null,
+    uploadFileInput: null,
+
+    placeHolderElement: null,
+    imageElement: null,
+    previewElement: null,
+    coverElement: null,
+    coverTopElement: null,
+    coverRightElement: null,
+    coverBottomElement: null,
+    coverLeftElement: null,
+
+    previewWidth: 0,
+    previewHeight: 0,
+    imageWidth: 0,
+    imageHeight: 0,
+    imageFormat: 0,
+    coverTop: 0,
+    coverLeft: 0,
+    coverWidth: 0,
+    coverHeight: 0,
+    minWidth: 0,
+    minHeight: 0,
+
+    uploadFileName: '',
+    uploadFileExtension: '',
+
+    init: function () {
+        ImageText.initElements();
+    },
+
+    initElements: function () {
+        ImageText.textInput = $('#text');
+        ImageText.nameInput = $('#imageName');
+        ImageText.extensionInput = $('#imageExtension');
+        ImageText.origNameInput = $('#imageOrigName');
+        ImageText.titleInput = $('#imageTitle');
+        ImageText.formatInput = $('#imageFormat');
+        ImageText.topInput = $('#imageTop');
+        ImageText.leftInput = $('#imageLeft');
+        ImageText.heightInput = $('#imageHeight');
+        ImageText.widthInput = $('#imageWidth');
+        ImageText.uploadFileInput = $('#changeUploadFile');
+
+        ImageText.placeHolderElement = $('#csEditorImagePlaceholder');
+        ImageText.imageElement = $('#csEditorImage');
+        ImageText.previewElement = $('#csEditorImagePreview');
+        ImageText.coverElement = $('#csEditorImageCover');
+        ImageText.coverTopElement = $('#csEditorCoverTop');
+        ImageText.coverRightElement = $('#csEditorCoverRight');
+        ImageText.coverBottomElement = $('#csEditorCoverBottom');
+        ImageText.coverLeftElement = $('#csEditorCoverLeft');
+    },
+
+    fillEditorContent: function () {
+        if (CS.editorData === null || CS.editorHtml === '') {
+            window.setTimeout('ImageText.fillEditorContent()', 50);
+            return true;
+        }
+        ImageText.init();
+
+        $('#navID').val(csEditorParams.navID);
+        CS.editorData.text = '<p>' + CS.editorData.text + '</p>';
+        $.each(CS.editorData, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+        });
+
+        ImageText.imageFormat = CS.editorData.imageWidth / CS.editorData.imageHeight;
+        ImageText.setFormatInput();
+
+        ImageText.formatInput.on('click', function () {
+            $(this).data('current', $(this).val());
+        });
+
+        ImageText.formatInput.on('change', function () {
+            var selectedFormat = $(this).val();
+            ImageText.setImageFormat(selectedFormat);
+        });
+
+        ImageText.textEditor = ImageText.textInput.ckeditor({
+            enterMode: CKEDITOR.ENTER_BR,
+            extraPlugins: 'divarea',
+            height: '240px',
+            removeButtons: 'Redo,Font,FontSize',
+            removePlugins: 'elementspath',
+            toolbarGroups: [
+                {name: 'clipboard', groups: ['clipboard', 'undo']},
+                {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
+                {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
+                {name: 'paragraph', groups: ['list']},
+                {name: 'links'}
+            ]
+        }).editor;
+
+        ImageText.uploadFileInput.on('change', function (event) {
+            var file = event.currentTarget.files[0];
+            if ($.inArray(file.type, csEditorParams.imageTypes) === -1) {
+                alert('Wrong file type');
+                return false;
+            }
+            ImageText.imageFormat = 3 / 2;
+            ImageText.setFormatInput();
+
+            ImageText.uploadFileExtension = csEditorParams.fileExtensions[file.type];
+            var nameParts = file.name.split('.');
+            if (nameParts.length > 1) {
+                nameParts.pop();
+            }
+            ImageText.uploadFileName = nameParts.join('.');
+
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                ImageText.editorImage.src = reader.result;
+            };
+            reader.readAsDataURL(file);
+        });
+
+        ImageText.imageElement.attr('src', csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '.' + CS.editorData.imageExtension);
+
+        ImageText.editorImage = new Image();
+        ImageText.editorImage.onload = function () {
+            ImageText.imageWidth = ImageText.editorImage.naturalWidth;
+            ImageText.imageHeight = ImageText.editorImage.naturalHeight;
+            ImageText.previewWidth = csEditorParams.imageDimension.image.width;
+            ImageText.previewHeight = ImageText.previewWidth * ImageText.imageHeight / ImageText.imageWidth;
+            ImageText.coverLeft = parseFloat(CS.editorData.imageLeft);
+            ImageText.coverTop = parseFloat(CS.editorData.imageTop);
+            ImageText.coverWidth = parseFloat(CS.editorData.imageWidth);
+            ImageText.coverHeight = parseFloat(CS.editorData.imageHeight);
+            ImageText.minWidth = ImageText.previewWidth * ImageText.previewWidth / csEditorParams.imageDimension.orig.width;
+            ImageText.minHeight = ImageText.minWidth / ImageText.imageFormat;
+
+            if (ImageText.previewWidth > ImageText.imageWidth || ImageText.previewWidth / ImageText.imageFormat > ImageText.imageHeight) {
+                alert(csEditorLang.error.wrongImageDimension.replace('%width%', ImageText.previewWidth).replace('%height%', ImageText.previewWidth / ImageText.imageFormat));
+                ImageText.uploadFileExtension = '';
+                ImageText.uploadFileName = '';
+                return false;
+            }
+
+            if (ImageText.uploadFileName !== '') {
+                ImageText.nameInput.val(ImageText.uploadFileName);
+                ImageText.extensionInput.val(ImageText.uploadFileExtension);
+                ImageText.origNameInput.val(ImageText.uploadFileName);
+                ImageText.titleInput.val(ImageText.uploadFileName);
+            }
+
+            ImageText.previewElement.attr('src', ImageText.editorImage.src);
+            ImageText.setCover();
+            ImageText.setResizable();
+            ImageText.setDraggable();
+        };
+        ImageText.editorImage.src = csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '_orig.' + CS.editorData.imageExtension;
+
+    },
+
+    close: function () {
+
+    },
+
+    setCover: function () {
+        if (ImageText.coverHeight > ImageText.previewHeight) {
+            ImageText.coverHeight = ImageText.previewHeight;
+            ImageText.coverWidth = ImageText.coverHeight * ImageText.imageFormat;
+        }
+
+        ImageText.placeHolderElement.css({width: ImageText.previewWidth, height: ImageText.previewHeight});
+        ImageText.coverElement.css({
+            left: ImageText.coverLeft + 'px',
+            top: ImageText.coverTop + 'px',
+            width: ImageText.coverWidth,
+            height: ImageText.coverHeight
+        });
+        ImageText.coverTopElement.css({
+            left: 0,
+            top: 0,
+            width: ImageText.previewWidth,
+            height: ImageText.coverTop
+        });
+        ImageText.coverRightElement.css({
+            right: 0,
+            top: ImageText.coverTop + 'px',
+            width: ImageText.previewWidth - ImageText.coverLeft - ImageText.coverWidth,
+            height: ImageText.coverHeight
+        });
+        ImageText.coverBottomElement.css({
+            left: 0,
+            bottom: 0,
+            width: ImageText.previewWidth,
+            height: ImageText.previewHeight - ImageText.coverTop - ImageText.coverHeight
+        });
+        ImageText.coverLeftElement.css({
+            left: 0,
+            top: ImageText.coverTop + 'px',
+            width: ImageText.coverLeft,
+            height: ImageText.coverHeight
+        });
+
+        ImageText.topInput.val(ImageText.coverTop);
+        ImageText.leftInput.val(ImageText.coverLeft);
+        ImageText.heightInput.val(ImageText.coverHeight);
+        ImageText.widthInput.val(ImageText.coverWidth);
+    },
+
+    setFormatInput: function () {
+        if (ImageText.imageFormat < 1) {
+            ImageText.formatInput.val('portrait');
+        }
+        else if (ImageText.imageFormat === 1) {
+            ImageText.formatInput.val('square');
+        }
+        else if (ImageText.imageFormat > 1) {
+            ImageText.formatInput.val('landscape');
+        }
+    },
+
+    setResizable: function () {
+        ImageText.coverElement.resizable({
+            aspectRatio: false,
+            containment: ImageText.placeHolderElement,
+            handles: 'se',
+            minWidth: ImageText.minWidth,
+            create: function () {
+                if (ImageText.coverWidth < ImageText.minWidth) {
+                    ImageText.coverWidth = ImageText.minWidth;
+                    ImageText.coverHeight = ImageText.previewHeight * ImageText.previewHeight / ImageText.previewWidth;
+                    ImageText.coverLeft = Math.min(ImageText.coverLeft, (ImageText.previewWidth - ImageText.coverWidth));
+                    ImageText.coverTop = Math.min(ImageText.coverTop, (ImageText.previewHeight - ImageText.coverHeight));
+                }
+                ImageText.setCover();
+            },
+            resize: function (event, ui) {
+                ui.size.height = ui.size.width * ImageText.coverHeight / ImageText.coverWidth;
+                if (ui.position.top + ui.size.height > ImageText.previewHeight) {
+                    ui.size.height = ImageText.previewHeight - ui.position.top;
+                    ui.size.width = ui.size.height * ImageText.imageFormat;
+                }
+                ImageText.coverWidth = ui.size.width;
+                ImageText.coverHeight = ui.size.height;
+                ImageText.setCover();
+            }
+        })
+    },
+
+    setDraggable: function () {
+        ImageText.coverElement.draggable({
+            containment: ImageText.placeHolderElement,
+            cursor: 'crosshair',
+            drag: function (event, ui) {
+                ImageText.coverLeft = ui.position.left;
+                ImageText.coverTop = ui.position.top;
+                ImageText.setCover();
+            }
+        })
+    },
+
+    setImageFormat: function (selectedFormat) {
+        var tempFormat;
+        switch (selectedFormat) {
+            case 'portrait':
+                tempFormat = 2 / 3;
+                break;
+            case 'square':
+                tempFormat = 1;
+                break;
+            case 'landscape':
+                tempFormat = 3 / 2;
+                break;
+        }
+
+        if (ImageText.imageHeight < ImageText.minWidth / tempFormat) {
+            alert(csEditorLang.error.wrongImageDimension.replace('%width%', ImageText.previewWidth).replace('%height%', ImageText.previewWidth / tempFormat));
+            ImageText.formatInput.val(ImageText.formatInput.data('current'));
+            return false;
+        }
+
+        ImageText.imageFormat = tempFormat;
+        ImageText.minHeight = ImageText.minWidth / ImageText.imageFormat;
+        ImageText.coverHeight = ImageText.coverWidth / ImageText.imageFormat;
+        ImageText.setCover();
+    }
+
+};

js/keyVisualEditor.js

@@ -0,0 +1,347 @@
+/**
+ * KeyVisual-Editor
+ *     Stellt die Funktionalität für die Bearbeitung des KeyVisual-Bereichs zur Verfügung
+ *
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 13.12.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+var KeyVisual = {
+    type: '',
+    editorImages: null,
+    editorImage: null,
+    imageTypes: null,
+    imageParams: null,
+    origParams: null,
+    thumbParams: null,
+    fileExtension: null,
+    uploadFileName: '',
+    mediaPath: '',
+    chosenImageID: 0,
+
+    nameInput: null,
+    extensionInput: null,
+    origNameInput: null,
+    titleInput: null,
+    topInput: null,
+    leftInput: null,
+    heightInput: null,
+    widthInput: null,
+    uploadFileInput: null,
+    requestInput: null,
+
+    thumbElement: null,
+    typeChooser: null,
+    placeHolderElement: null,
+    imageElement: null,
+    previewElement: null,
+    coverElement: null,
+    coverTopElement: null,
+    coverRightElement: null,
+    coverBottomElement: null,
+    coverLeftElement: null,
+
+    previewWidth: 0,
+    previewHeight: 0,
+    imageWidth: 0,
+    imageHeight: 0,
+    imageFormat: 0,
+    coverTop: 0,
+    coverLeft: 0,
+    coverWidth: 0,
+    coverHeight: 0,
+    minWidth: 0,
+    minHeight: 0,
+    placeHolderWidth: 0,
+    editorScale: 1,
+
+    init: function () {
+        KeyVisual.initElements();
+        KeyVisual.initVariables();
+        KeyVisual.initFunctions();
+    },
+
+    initElements: function () {
+        KeyVisual.thumbElement = $('#csEditorThumb');
+        KeyVisual.typeChooser = $('#Type');
+        KeyVisual.nameInput = $('#imageName');
+        KeyVisual.extensionInput = $('#imageExtension');
+        KeyVisual.origNameInput = $('#imageOrigName');
+        KeyVisual.titleInput = $('#imageTitle');
+        KeyVisual.placeHolderElement = $('#csEditorImagePlaceholder');
+        KeyVisual.imageElement = $('#csEditorImage');
+        KeyVisual.previewElement = $('#csEditorImagePreview');
+        KeyVisual.coverElement = $('#csEditorImageCover');
+        KeyVisual.coverTopElement = $('#csEditorCoverTop');
+        KeyVisual.coverRightElement = $('#csEditorCoverRight');
+        KeyVisual.coverBottomElement = $('#csEditorCoverBottom');
+        KeyVisual.coverLeftElement = $('#csEditorCoverLeft');
+
+        KeyVisual.topInput = $('#imageTop');
+        KeyVisual.leftInput = $('#imageLeft');
+        KeyVisual.heightInput = $('#imageHeight');
+        KeyVisual.widthInput = $('#imageWidth');
+        KeyVisual.uploadFileInput = $('#changeUploadFile');
+        KeyVisual.requestInput = $('#request');
+    },
+
+    initVariables: function () {
+        KeyVisual.type = CS.editorData.Type;
+        KeyVisual.editorImages = CS.editorData.images;
+        KeyVisual.imageParams = csEditorParams.imageDimension.keyVisual;
+        KeyVisual.origParams = csEditorParams.imageDimension.orig;
+        KeyVisual.thumbParams = csEditorParams.imageDimension.thumb;
+        KeyVisual.fileExtension = csEditorParams.fileExtensions;
+        KeyVisual.mediaPath = csEditorParams.mediaPrefix + csEditorParams.navID + '/';
+        KeyVisual.chosenImageID = CS.editorData.IDs[0];
+        KeyVisual.imageFormat = KeyVisual.imageParams.width / KeyVisual.imageParams.height;
+        KeyVisual.editorImages[0] = {};
+        $.each(KeyVisual.editorImages[KeyVisual.chosenImageID], function(key, value) {
+            KeyVisual.editorImages[0][key] = '0';
+        });
+        $('#navID').val(csEditorParams.navID);
+    },
+
+    initFunctions: function () {
+        KeyVisual.typeChooser.on('change', function () {
+            KeyVisual.type = $(this).val();
+            KeyVisual.showElementsForType();
+        })
+    },
+
+    fillEditorContent: function () {
+        if (CS.editorData === null || CS.editorHtml === '') {
+            window.setTimeout('KeyVisual.fillEditorContent()', 50);
+            return true;
+        }
+
+        KeyVisual.init();
+        KeyVisual.fillThumbs();
+
+        $.each(CS.editorData, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+        });
+
+        KeyVisual.uploadFileInput.on('change', function (event) {
+            var file = event.currentTarget.files[0];
+            if ($.inArray(file.type, csEditorParams.imageTypes) === -1) {
+                alert('Wrong file type');
+                return false;
+            }
+
+            KeyVisual.uploadFileExtension = csEditorParams.fileExtensions[file.type];
+            var nameParts = file.name.split('.');
+            if (nameParts.length > 1) {
+                nameParts.pop();
+            }
+            KeyVisual.uploadFileName = nameParts.join('.');
+
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                KeyVisual.editorImage.src = reader.result;
+            };
+            reader.readAsDataURL(file);
+        });
+
+        KeyVisual.imageElement.attr('src', csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '.' + CS.editorData.imageExtension);
+
+        KeyVisual.editorImage = new Image();
+        KeyVisual.editorImage.onload = function () {
+            KeyVisual.placeHolderWidth = KeyVisual.placeHolderElement.innerWidth();
+            KeyVisual.editorScale = csEditorParams.imageDimension.keyVisual.width / KeyVisual.placeHolderWidth;
+
+            KeyVisual.imageWidth = KeyVisual.editorImage.naturalWidth;
+            KeyVisual.imageHeight = KeyVisual.editorImage.naturalHeight;
+            KeyVisual.previewWidth = KeyVisual.placeHolderWidth;
+            KeyVisual.previewHeight = KeyVisual.placeHolderWidth * KeyVisual.imageHeight / KeyVisual.imageWidth;
+
+            KeyVisual.coverLeft = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageLeft) / KeyVisual.editorScale;
+            KeyVisual.coverTop = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageTop) / KeyVisual.editorScale;
+            KeyVisual.coverWidth = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageWidth) / KeyVisual.editorScale;
+            KeyVisual.coverHeight = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageHeight) / KeyVisual.editorScale;
+            KeyVisual.minWidth = KeyVisual.previewWidth * csEditorParams.imageDimension.keyVisual.width / csEditorParams.imageDimension.orig.width;
+            KeyVisual.minHeight = KeyVisual.minWidth * csEditorParams.imageDimension.keyVisual.height / csEditorParams.imageDimension.keyVisual.width;
+
+            if (KeyVisual.previewWidth > KeyVisual.imageWidth || KeyVisual.previewHeight > KeyVisual.imageHeight) {
+                alert(csEditorLang.error.wrongImageDimension.replace('%width%', csEditorParams.imageDimension.keyVisual.width).replace('%height%', csEditorParams.imageDimension.keyVisual.height));
+                KeyVisual.uploadFileExtension = '';
+                KeyVisual.uploadFileName = '';
+                return false;
+            }
+
+            if (KeyVisual.uploadFileName !== '') {
+                KeyVisual.nameInput.val(KeyVisual.uploadFileName);
+                KeyVisual.extensionInput.val(KeyVisual.uploadFileExtension);
+                KeyVisual.origNameInput.val(KeyVisual.uploadFileName);
+                KeyVisual.titleInput.val(KeyVisual.uploadFileName);
+            }
+
+            KeyVisual.previewElement.attr('src', KeyVisual.editorImage.src);
+            KeyVisual.setCover();
+            KeyVisual.setResizable();
+            KeyVisual.setDraggable();
+        };
+    },
+
+    fillThumbs: function () {
+        $.each(KeyVisual.editorImages, function (key, value) {
+            if (key === '0') {
+                return;
+            }
+            KeyVisual.thumbElement.append('<img onclick="KeyVisual.chosenImageID = ' + key + '; KeyVisual.fillImageEditArea();" class="formNext" src="' + KeyVisual.mediaPath + value.imageName + '_thumb.' + value.imageExtension + '" width="' + KeyVisual.thumbParams.width + '"/>');
+        });
+        KeyVisual.thumbElement.append('<img onclick="KeyVisual.chosenImageID = 0; KeyVisual.fillImageEditArea();" class="formNext" src="' + KeyVisual.imageParams.standardImage + '" width="' + KeyVisual.thumbParams.width + '"/>');
+
+        KeyVisual.showElementsForType();
+    },
+
+    fillImageEditArea: function () {
+        if (KeyVisual.chosenImageID > 0) {
+            KeyVisual.requestInput.val('updateImage');
+        }
+        else {
+            KeyVisual.requestInput.val('appendKeyVisual');
+        }
+
+        var image = KeyVisual.editorImages[KeyVisual.chosenImageID];
+        $.each(image, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+        });
+
+        KeyVisual.editorImage.src = csEditorParams.mediaPrefix + csEditorParams.navID + '/' + image.imageName + '_orig.' + image.imageExtension;
+    },
+
+    showForSingle: function () {
+        $('img:not(:first)', KeyVisual.thumbElement).hide();
+        $('.kenburns').hide();
+        $('select', '.kenburns').prop('disabled', true);
+    },
+
+    showForKenburns: function () {
+        KeyVisual.showForMultiple();
+        $('.kenburns').show();
+        $('select', '.kenburns').prop('disabled', false);
+    },
+
+    showForSlider: function () {
+        KeyVisual.showForMultiple();
+        $('.kenburns').hide();
+        $('select', '.kenburns').prop('disabled', true);
+    },
+
+    showForMultiple: function () {
+        $('img', KeyVisual.thumbElement).show();
+    },
+
+    showElementsForType: function () {
+        switch (KeyVisual.type) {
+            case 'Single':
+                KeyVisual.showForSingle();
+                break;
+            case 'Kenburns':
+                KeyVisual.showForKenburns();
+                break;
+            case 'Slider':
+                KeyVisual.showForSlider();
+                break;
+        }
+    },
+
+    setCover: function () {
+        if (KeyVisual.coverHeight > KeyVisual.previewHeight) {
+            KeyVisual.coverHeight = KeyVisual.previewHeight;
+            KeyVisual.coverWidth = KeyVisual.coverHeight * KeyVisual.imageFormat;
+        }
+
+        KeyVisual.placeHolderElement.css({
+            width: KeyVisual.placeHolderWidth,
+            height: KeyVisual.placeHolderWidth * KeyVisual.editorImage.naturalHeight / KeyVisual.editorImage.naturalWidth
+        });
+        KeyVisual.coverElement.css({
+            left: KeyVisual.coverLeft + 'px',
+            top: KeyVisual.coverTop + 'px',
+            width: KeyVisual.coverWidth,
+            height: KeyVisual.coverHeight
+        });
+        KeyVisual.coverTopElement.css({
+            left: 0,
+            top: 0,
+            width: KeyVisual.previewWidth,
+            height: KeyVisual.coverTop
+        });
+        KeyVisual.coverRightElement.css({
+            right: 0,
+            top: KeyVisual.coverTop + 'px',
+            width: KeyVisual.previewWidth - KeyVisual.coverLeft - KeyVisual.coverWidth,
+            height: KeyVisual.coverHeight
+        });
+        KeyVisual.coverBottomElement.css({
+            left: 0,
+            bottom: 0,
+            width: KeyVisual.previewWidth,
+            height: KeyVisual.previewHeight - KeyVisual.coverTop - KeyVisual.coverHeight
+        });
+        KeyVisual.coverLeftElement.css({
+            left: 0,
+            top: KeyVisual.coverTop + 'px',
+            width: KeyVisual.coverLeft,
+            height: KeyVisual.coverHeight
+        });
+
+        KeyVisual.topInput.val(KeyVisual.coverTop * KeyVisual.editorScale);
+        KeyVisual.leftInput.val(KeyVisual.coverLeft * KeyVisual.editorScale);
+        KeyVisual.heightInput.val(KeyVisual.coverHeight * KeyVisual.editorScale);
+        KeyVisual.widthInput.val(KeyVisual.coverWidth * KeyVisual.editorScale);
+        console.log(KeyVisual.heightInput);
+        console.log(KeyVisual.heightInput.val());
+        console.log(KeyVisual.widthInput);
+        console.log(KeyVisual.widthInput.val());
+    },
+
+    setResizable: function () {
+        KeyVisual.coverElement.resizable({
+            aspectRatio: false,
+            containment: KeyVisual.placeHolderElement,
+            handles: 'se',
+            minWidth: KeyVisual.minWidth,
+            create: function () {
+                if (KeyVisual.coverWidth < KeyVisual.minWidth) {
+                    KeyVisual.coverWidth = KeyVisual.minWidth;
+                    KeyVisual.coverHeight = KeyVisual.minHeight;
+                    KeyVisual.coverLeft = Math.min(KeyVisual.coverLeft, (KeyVisual.previewWidth - KeyVisual.coverWidth));
+                    KeyVisual.coverTop = Math.min(KeyVisual.coverTop, (KeyVisual.previewHeight - KeyVisual.coverHeight));
+                }
+                KeyVisual.setCover();
+            },
+            resize: function (event, ui) {
+                ui.size.height = ui.size.width * KeyVisual.coverHeight / KeyVisual.coverWidth;
+                if (ui.position.top + ui.size.height > KeyVisual.previewHeight) {
+                    ui.size.height = KeyVisual.previewHeight - ui.position.top;
+                    ui.size.width = ui.size.height * KeyVisual.imageFormat;
+                }
+                KeyVisual.coverWidth = ui.size.width;
+                KeyVisual.coverHeight = ui.size.height;
+                KeyVisual.setCover();
+            }
+        })
+    },
+
+    setDraggable: function () {
+        KeyVisual.coverElement.draggable({
+            containment: KeyVisual.placeHolderElement,
+            cursor: 'crosshair',
+            drag: function (event, ui) {
+                KeyVisual.coverLeft = ui.position.left;
+                KeyVisual.coverTop = ui.position.top;
+                KeyVisual.setCover();
+            }
+        })
+    },
+
+    close: function () {
+
+    }
+};

js/navigationEditor.js

@@ -0,0 +1,444 @@
+/**
+ * Navigation-Editor
+ *     Stellt die Funktionalität für die Bearbeitung der Navigations-Struktur zur Verfügung
+ *
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 06.10.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+var Navigation = {
+    structureHtml: '',
+    chosenNavID: 0,
+    chosenNavPath: [],
+    chosenBreadCrumb: '',
+
+    /**
+     * jQuery-Variablen des Navigations-Editors
+     */
+    structureElement: null,
+    moveStructureElement: null,
+    breadCrumbElement: null,
+    tokenElement: null,
+    buttonEditElement: null,
+    buttonSortElement: null,
+    buttonMoveElement: null,
+    buttonChildElement: null,
+    buttonSiblingElement: null,
+
+    init: function () {
+        Navigation.initElements();
+        Navigation.initIconFunctions();
+    },
+
+    initElements: function () {
+        Navigation.structureElement = $('#csEditorStructure');
+        Navigation.moveStructureElement = $('#csEditorMoveStructure');
+        Navigation.breadCrumbElement = $('.csEditorBreadCrumb');
+        Navigation.buttonEditElement = $('.formEdit');
+        Navigation.buttonSortElement = $('.formSort');
+        Navigation.buttonMoveElement = $('.formMove');
+        Navigation.buttonChildElement = $('.formChild');
+        Navigation.buttonSiblingElement = $('.formSibling');
+    },
+
+    initIconFunctions: function () {
+        Navigation.structureElement.on('click', '.glyphicon-folder-close', function () {
+            $(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
+            $(this).parent('li').removeClass('csEditorClosed').addClass('csEditorOpen');
+        });
+
+        Navigation.structureElement.on('click', '.glyphicon-folder-open', function (event) {
+            if (event.target !== this) {
+                return true;
+            }
+            $(this).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
+            $(this).parent('li').removeClass('csEditorOpen').addClass('csEditorClosed');
+        });
+
+        Navigation.structureElement.on('click', 'li', function () {
+            if (event.target !== this) {
+                return true;
+            }
+
+            $('li', Navigation.structureElement).removeClass('csEditorChosen');
+            $(this).addClass('csEditorChosen');
+            $(this).parents('li').addClass('csEditorChosen');
+            Navigation.setChosenElements(this);
+        });
+
+        Navigation.moveStructureElement.on('click', '.glyphicon-folder-close', function () {
+            $(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
+            $(this).parent('li').removeClass('csEditorClosed').addClass('csEditorOpen');
+        });
+
+        Navigation.moveStructureElement.on('click', '.glyphicon-folder-open', function (event) {
+            if (event.target !== this) {
+                return true;
+            }
+            $(this).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
+            $(this).parent('li').removeClass('csEditorOpen').addClass('csEditorClosed');
+        });
+
+        Navigation.moveStructureElement.on('click', 'li:not(.csEditorNotEditable)', function () {
+            if (event.target !== this) {
+                return true;
+            }
+            var navStart = $(this).data('navstart');
+            var navID = $(this).data('navid');
+            if (navID !== 0) {
+                var actualNavElement = CS.editorData['navStart_' + navStart]['navID_' + navID];
+            }
+            else {
+                var actualNavElement = {navName: '/'};
+            }
+
+            var maxNavSort = 0;
+            if (CS.editorData['navStart_' + navID] != undefined) {
+                $.each(CS.editorData['navStart_' + navID], function (key, navPoint) {
+                    maxNavSort = Math.max(navPoint.navSort, maxNavSort);
+                });
+                ++maxNavSort;
+            }
+            $('.moveSubmit').show();
+            $('li', Navigation.moveStructureElement).removeClass('csEditorChosen');
+            $(this).addClass('csEditorChosen');
+            $("input[name='navStart']", $('.moveFields')).val(navID);
+            $("input[name='navSort']", $('.moveFields')).val(maxNavSort);
+            $('#csEditorMoveToItem').html(actualNavElement['navName']);
+        })
+    },
+
+    fillEditorContent: function () {
+        if (CS.editorData === null || CS.editorHtml === '') {
+            window.setTimeout('Navigation.fillEditorContent()', 50);
+            return true;
+        }
+        Navigation.init();
+
+        Navigation.chosenNavID = csEditorParams.navID;
+        Navigation.chosenNavPath = csEditorParams.navigationPath;
+        Navigation.buildStructureHtml(0);
+        Navigation.structureElement.html(Navigation.structureHtml);
+        Navigation.breadCrumbElement.html(Navigation.chosenBreadCrumb);
+        Navigation.fillForm();
+    },
+
+    buildStructureHtml: function (navStart) {
+        var actualNavStartElements = CS.editorData['navStart_' + navStart];
+        if (navStart === 0) {
+            Navigation.structureHtml += '<ul class="well"><li data-navid="0" class="csEditorOpen csEditorChosen"><span class="glyphicon glyphicon-folder-open"></span>&nbsp;/';
+            Navigation.chosenBreadCrumb += '/ ';
+        }
+        Navigation.structureHtml += '<ul>';
+
+        $.each(actualNavStartElements, function (key, actualNavElement) {
+            var liClass = '';
+            var spanClass = '';
+
+            if ($.inArray(actualNavElement['navID'], Navigation.chosenNavPath) !== -1) {
+                liClass += 'csEditorOpen ';
+                spanClass = 'glyphicon glyphicon-folder-open';
+                Navigation.chosenBreadCrumb += '> ' + actualNavElement['navName'] + ' ';
+            }
+            else {
+                liClass += 'csEditorClosed ';
+                spanClass = 'glyphicon glyphicon-folder-close';
+            }
+
+            if (CS.editorData['navStart_' + actualNavElement['navID']] == undefined) {
+                liClass += 'csEditorEmpty ';
+                spanClass = 'glyphicon glyphicon-align-justify';
+            }
+
+            if (actualNavElement['navActive'] !== 'yes') {
+                liClass += 'csEditorInactive ';
+            }
+            if (actualNavElement['navID'] == csEditorParams.navID) {
+                liClass += 'csEditorChosen';
+            }
+            Navigation.structureHtml += '<li data-navstart="' + navStart + '" data-navid="' + actualNavElement['navID'] + '" class="' + liClass + '"><span class="' + spanClass + '"></span>&nbsp;' + actualNavElement['navName'];
+            if (CS.editorData['navStart_' + actualNavElement['navID']] != undefined) {
+                Navigation.buildStructureHtml(actualNavElement['navID']);
+            }
+            Navigation.structureHtml += '</li>';
+        });
+
+        if (navStart === 0) {
+            Navigation.structureHtml += '</li>';
+        }
+        Navigation.structureHtml += '</ul>';
+    },
+
+    setChosenElements: function (element) {
+        Navigation.chosenNavID = element.dataset.navid;
+        Navigation.buildBreadCrumb(element);
+        Navigation.buildNavPath(element);
+        Navigation.fillForm();
+    },
+
+    fillForm: function () {
+        if (Navigation.chosenNavID == 0) {
+            Navigation.enableRootButtons();
+        }
+        else {
+            Navigation.enableAllButtons();
+        }
+        var navStart = Navigation.chosenNavPath[Navigation.chosenNavPath.length - 2];
+        var chosenNavElement = CS.editorData['navStart_' + navStart]['navID_' + Navigation.chosenNavID];
+        $.each(chosenNavElement, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+            if (value !== null) {
+                $("input[type='radio'][name='" + key + "'][value='" + value.replace(/\'/g, '\\') + "']", CS.contentElement).prop('checked', true);
+            }
+        });
+        Navigation.fillSpecial();
+    },
+
+    fillSpecial: function () {
+        if (Navigation.chosenNavID > 0) {
+            Navigation.fillMove();
+            Navigation.fillSibling();
+        }
+        Navigation.fillSort();
+        Navigation.fillChild();
+    },
+
+    fillSort: function () {
+        if (CS.editorData['navStart_' + Navigation.chosenNavID] == undefined) {
+            $('.csEditorSortable').html('Keine Untermenü-Punkte zum Sortieren vorhanden!');
+            $('.sortSubmit').hide();
+            return true;
+        }
+
+        var sortHtml = '<ul>';
+        $('.sortSubmit').show();
+        $.each(CS.editorData['navStart_' + Navigation.chosenNavID], function (key, navPoint) {
+            sortHtml += '<li data-id="' + navPoint['navID'] + '">' + navPoint['navName'] + '<span class="glyphicon glyphicon-sort"></span></li>';
+        });
+        sortHtml += '</ul>';
+        $("input[name='navStart']", '.sortFields').val(Navigation.chosenNavID);
+
+        $('.csEditorSortable').html(sortHtml);
+        $('ul', '.csEditorSortable').sortable({
+            axis: 'y',
+            forcePlaceholderSize: true,
+            handle: '.glyphicon-sort',
+            stop: function () {
+                var order = $('ul', '.csEditorSortable').sortable('toArray', {attribute: 'data-id'});
+                $("input[name='sortOrder']", '.sortFields').val(order);
+            }
+        });
+    },
+
+    fillMove: function () {
+        Navigation.moveStructureElement.html(Navigation.structureHtml);
+        var ownItem = $("li[data-navid='" + Navigation.chosenNavID + "']", Navigation.moveStructureElement);
+        $(ownItem.parents('li')[0]).addClass('csEditorNotEditable');
+        $("li[data-navid='" + Navigation.chosenNavID + "']", Navigation.moveStructureElement).remove();
+        $("input[name='navSort']", '.moveFields').val(0);
+        $('.moveSubmit').hide();
+    },
+
+    fillChild: function () {
+        $("input[name='navStart']", '.childFields').val(Navigation.chosenNavID);
+        $("input[name='navName']", '.childFields').val('');
+        $("input[name='navTitle']", '.childFields').val('');
+        $("input[name='navSort']", '.childFields').val(0);
+        $("input[name='navActive']", '.childFields').val('yes');
+    },
+
+    fillSibling: function () {
+        var navStart = Navigation.chosenNavPath[Navigation.chosenNavPath.length - 2];
+        var chosenNavElement = CS.editorData['navStart_' + navStart]['navID_' + Navigation.chosenNavID];
+        $("input[name='navSort']", '.siblingFields').val(parseInt(chosenNavElement.navSort) + 1);
+        $("input[name='navName']", '.siblingFields').val('');
+        $("input[name='navTitle']", '.siblingFields').val('');
+        $("input[name='navActive']", '.siblingFields').val('yes');
+    },
+
+    buildBreadCrumb: function (element) {
+        Navigation.breadCrumb = '>' + $(element)[0].childNodes[1].textContent;
+
+        $.each($(element).parents('li'), function () {
+            Navigation.breadCrumb = '>' + ($(this)[0].childNodes[1].textContent) + '&nbsp;' + Navigation.breadCrumb;
+        });
+
+        Navigation.breadCrumb = Navigation.breadCrumb.substr(2);
+        Navigation.breadCrumbElement.html(Navigation.breadCrumb);
+    },
+
+    buildNavPath: function (element) {
+        var path = [];
+        path.push(element.dataset.navid);
+
+        $.each($(element).parents('li'), function () {
+            path.push(this.dataset.navid);
+        });
+
+        path.push('0');
+        Navigation.chosenNavPath = path.reverse();
+    },
+
+    enableEdit: function () {
+        Navigation.disableSort();
+        Navigation.disableMove();
+        Navigation.disableSibling();
+        Navigation.disableChild();
+        Navigation.disableDelete();
+
+        $('input', '.editFields').prop('disabled', false);
+        $('.editFields').show();
+    },
+
+    enableSort: function () {
+        Navigation.disableEdit();
+        Navigation.disableMove();
+        Navigation.disableSibling();
+        Navigation.disableChild();
+        Navigation.disableDelete();
+
+        $('input', '.sortFields').prop('disabled', false);
+        $('.sortFields').show();
+    },
+
+    enableMove: function () {
+        Navigation.disableEdit();
+        Navigation.disableSort();
+        Navigation.disableSibling();
+        Navigation.disableChild();
+        Navigation.disableDelete();
+
+        $('input', '.moveFields').prop('disabled', false);
+        $('.moveFields').show();
+    },
+
+    enableSibling: function () {
+        Navigation.disableEdit();
+        Navigation.disableSort();
+        Navigation.disableMove();
+        Navigation.disableChild();
+        Navigation.disableDelete();
+
+        $('input', '.siblingFields').prop('disabled', false);
+        $('.siblingFields').show();
+    },
+
+    enableChild: function () {
+        Navigation.disableEdit();
+        Navigation.disableSort();
+        Navigation.disableMove();
+        Navigation.disableSibling();
+        Navigation.disableDelete();
+
+        $('input', '.childFields').prop('disabled', false);
+        $('.childFields').show();
+    },
+
+    enableDelete: function () {
+        Navigation.disableEdit();
+        Navigation.disableSort();
+        Navigation.disableMove();
+        Navigation.disableSibling();
+        Navigation.disableChild();
+
+        $('input', '.deleteFields').prop('disabled', false);
+        $('.deleteFields').show();
+    },
+
+    disableEdit: function () {
+        $('input', '.editFields').prop('disabled', true);
+        $('.editFields').hide();
+    },
+
+    disableSort: function () {
+        /* TODO: Destroy Sortable;
+         if (imgEditor.imgThumbElement.is(':ui-sortable')) {
+         imgEditor.imgThumbElement.sortable('destroy');
+         */
+
+        $('input', '.sortFields').prop('disabled', true);
+        $('.sortFields').hide();
+    },
+
+    disableMove: function () {
+        $('input', '.moveFields').prop('disabled', true);
+        $('.moveFields').hide();
+    },
+
+    disableSibling: function () {
+        $('input', '.siblingFields').prop('disabled', true);
+        $('.siblingFields').hide();
+    },
+
+    disableChild: function () {
+        $('input', '.childFields').prop('disabled', true);
+        $('.childFields').hide();
+    },
+
+    disableDelete: function () {
+        $('input', '.deleteFields').prop('disabled', true);
+        $('.deleteFields').hide();
+    },
+
+    enableAllButtons: function () {
+        Navigation.disableAllButtons();
+
+        Navigation.buttonEditElement.removeClass('disabled');
+        Navigation.buttonMoveElement.removeClass('disabled');
+        Navigation.buttonSiblingElement.removeClass('disabled');
+
+        Navigation.buttonEditElement.on('click', Navigation.enableEdit);
+        Navigation.buttonSortElement.on('click', Navigation.enableSort);
+        Navigation.buttonMoveElement.on('click', Navigation.enableMove);
+        Navigation.buttonChildElement.on('click', Navigation.enableChild);
+        Navigation.buttonSiblingElement.on('click', Navigation.enableSibling);
+    },
+
+    enableRootButtons: function () {
+        Navigation.disableAllButtons();
+
+        Navigation.buttonEditElement.addClass('disabled');
+        Navigation.buttonMoveElement.addClass('disabled');
+        Navigation.buttonSiblingElement.addClass('disabled');
+
+        Navigation.buttonEditElement.on('click', function () {
+            return false;
+        });
+        Navigation.buttonSortElement.on('click', Navigation.enableSort);
+        Navigation.buttonMoveElement.on('click', function () {
+            return false;
+        });
+        Navigation.buttonChildElement.on('click', Navigation.enableChild);
+        Navigation.buttonSiblingElement.on('click', function () {
+            return false;
+        });
+    },
+
+    disableAllButtons: function () {
+        Navigation.buttonEditElement.off();
+        Navigation.buttonSortElement.off();
+        Navigation.buttonMoveElement.off();
+        Navigation.buttonChildElement.off();
+        Navigation.buttonSiblingElement.off();
+    },
+
+    close: function () {
+        Navigation.structureHtml = '';
+        Navigation.chosenNavID = 0;
+        Navigation.chosenNavPath = [];
+        Navigation.chosenBreadCrumb = '';
+
+        Navigation.structureElement = null;
+        Navigation.moveStructureElement = null;
+        Navigation.breadCrumbElement = null;
+        Navigation.tokenElement = null;
+        Navigation.buttonEditElement = null;
+        Navigation.buttonSortElement = null;
+        Navigation.buttonMoveElement = null;
+        Navigation.buttonChildElement = null;
+        Navigation.buttonSiblingElement = null;
+    }
+};

js/sublineEditor.js

@@ -0,0 +1,75 @@
+/**
+ * Subline-Editor
+ *     Stellt die Funktionalität für die Bearbeitung der Überschriften zur Verfügung
+ *
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 15.10.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+var Subline = {
+    subLineEditor: null,
+
+    subLineElement: null,
+
+    init: function() {
+        Subline.initElements();
+    },
+
+    initElements: function() {
+        Subline.subLineElement = $('#text');
+    },
+
+    fillEditorContent: function () {
+        if (CS.editorData === null || CS.editorHtml === '') {
+            window.setTimeout('Subline.fillEditorContent()', 50);
+            return true;
+        }
+
+        Subline.init();
+
+        CS.editorData.text = '<h2>' + CS.editorData.text + '</h2>';
+        $.each(CS.editorData, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+        });
+
+        $('#navName').html(CS.editorData.navName);
+
+        Subline.subLineEditor = Subline.subLineElement.ckeditor({
+            extraPlugins: 'divarea',
+            height: '70px',
+            removeButtons: 'Redo,Font,FontSize',
+            removePlugins: 'elementspath',
+            resize_enabled: false,
+            stylesSet: [
+                {name: 'small', element: 'small'}
+            ],
+            toolbarGroups: [
+                {name: 'clipboard', groups: ['clipboard', 'undo']},
+                {name: 'styles', groups: ['styles']}
+            ]
+        }).editor;
+
+        /**
+         * Entfernen des Format-DropDowns über Instanziierung nicht möglich, da die Styles der Überschrift sonst nicht angewendet wird
+         */
+        Subline.subLineElement.ckeditor().on('instanceReady.ckeditor', function() {
+            $('.cke_combo.cke_combo__format.cke_combo_off').hide();
+        });
+
+        Subline.subLineEditor.on('key', function (event) {
+            if (event.data.keyCode === 13) {
+                event.cancel();
+                return true;
+            }
+        });
+
+    },
+
+    close: function () {
+
+    }
+
+};

js/textEditor.js

@@ -0,0 +1,57 @@
+/**
+ * Text-Editor
+ *     Stellt die Funktionalität für die Bearbeitung der Texte zur Verfügung
+ *
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 13.10.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+
+var Text = {
+    textEditor: null,
+
+    textElement: null,
+
+    init: function() {
+        Text.initElements();
+    },
+
+    initElements: function() {
+        Text.textInput = $('#text');
+    },
+
+    fillEditorContent: function () {
+        if (CS.editorData === null || CS.editorHtml === '') {
+            window.setTimeout('Text.fillEditorContent()', 50);
+            return true;
+        }
+        Text.init();
+
+        CS.editorData.text = '<p>' + CS.editorData.text + '</p>';
+        $.each(CS.editorData, function (key, value) {
+            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
+        });
+
+        Text.textEditor = Text.textInput.ckeditor({
+            enterMode: CKEDITOR.ENTER_BR,
+            extraPlugins: 'divarea',
+            height: '500px',
+            removeButtons: 'Redo,Font,FontSize',
+            removePlugins: 'elementspath',
+            toolbarGroups: [
+                {name: 'clipboard', groups: ['clipboard', 'undo']},
+                {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
+                {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
+                {name: 'paragraph', groups: ['list']},
+                {name: 'links'},
+                {name: 'about'}
+            ]
+        }).editor;
+    },
+
+    close: function () {
+
+    }
+};