diff --git a/css/editor.css b/css/editor.css new file mode 100644 index 0000000..32240cc --- /dev/null +++ b/css/editor.css @@ -0,0 +1,231 @@ +#csEditorLayer { + position: absolute; + z-index: 2000; + height: 100%; + width: 100%; + top: 0; + background-color: rgba(204, 204, 204, .9); + display: none; +} + +#csEditorWrapper { + height: 100%; +} + +#csEditorHeader, #csEditorFooter { + height: 50px; + background-color: #000; + color: #fff; +} + +#csEditorHeader h1, #csEditorFooter h1 { + font-size: 24px; + margin-top: 0; + margin-bottom: 0; + line-height: 50px; +} + +#csEditorLayerClose { + font-size: 24px; + line-height: 50px; + cursor: pointer; +} + +#csEditorContent { + height: calc(100% - 100px); + background-color: #fff; + overflow: auto; +} + +#csEditorPageElements { + width: 220px; + position: fixed; + right: 0; + top: 300px; + overflow: hidden; +} + +#csEditorPageElementsTitle { + margin-right: 45px; + font-weight: bold; + cursor: move; +} + +#csEditorPageElementsMin { + position: absolute; + right: 15px; + top: 12px; + cursor: pointer; +} + +#csEditorPageElementsContent h2 { + font-size: 14px; +} + +#csEditorPageElementsContent h2, #csEditorPageElementsContent p { + font-weight: bold; + height: 20px; + line-height: 20px; + margin: 0; + padding: 0; +} + +#csEditorPageElementsContent .ImageText-Image { + display: none; +} + +#csEditorPageElementsContent .ImageText-Text { + padding: 0; +} + +#csEditorPageElementsContent h2, #csEditorPageElementsContent p, #csEditorPageElementsContent .ImageText-Text { + width: 100%; +} + +#csEditorPageElementsContent .row { + margin: 0; +} + +.pageWrapper { + position: relative; +} + +.pageWrapper .glyphicon-pencil { + position: absolute; + left: -14px; + cursor: pointer; +} + +.pageWrapper .glyphicon-trash { + position: absolute; + left: -42px; + cursor: pointer; +} + +.pageWrapper .glyphicon-sort { + position: absolute; + right: -14px; + cursor: move; +} + +.csEditorSortable .glyphicon-sort { + position: absolute; + right: 42px; + cursor: move; + +} + +.csEditorSortable li { + position: relative; + list-style-type: none; +} + +ul.nav { + position: relative; +} + +ul.nav > .glyphicon-pencil { + left: -29px; + color: #fff; +} + +.row { + position: relative; +} + +.editableHover { + background-color: #f00; + opacity: .5; +} + +.csEditorStructure ul { + padding-left: 20px; + font-style: normal; + text-decoration: none; +} + +.csEditorStructure > ul { + padding: 15px; +} + +.csEditorStructure li { + text-decoration: none; + list-style-type: none; + font-weight: normal; +} + +.csEditorStructure li.csEditorClosed ul { + display: none; +} + +.csEditorStructure li.csEditorChosen { + font-weight: bold; +} + +.csEditorStructure li.csEditorInactive { + font-style: italic; + color: #777; +} + +#csEditorContent .csEditorSliderContent { + padding-top: 48px; +} + +#csEditorContent .csEditorSliderContent:not(:first-of-type) { + display: none; +} + +#csEditorForm, .csEditorSlider, .csEditorSliderContent, .editFields, .sortFields, .moveFields, .childFields, .siblingFields { + height: 100%; +} + +.editFields, .sortFields, .moveFields, .childFields, .siblingFields { + padding-top: 24px; +} + +#content .sortable { + min-height: 20px; +} + +#csEditorImage { + margin-top: 42px; +} + +#csEditorImagePlaceholder { + position: relative; +} + +#csEditorImageCover { + position: absolute; + box-shadow: inset 0 0 4px #f00; + z-index: 50; +} + +#csEditorCoverTop, #csEditorCoverRight, #csEditorCoverBottom, #csEditorCoverLeft { + position: absolute; + background-color: rgba(100, 100, 100, .8); + z-index: 1; +} + +#csEditorContent > div { + height: 100%; +} + +.csEditorButtonGroup { + position: absolute; + bottom: 0; + height: 50px; + background-color: #9d9d9d; + padding-top: 8px; + width: 100%; +} + +.ui-icon-gripsmall-diagonal-se { + position: absolute; + width: 8px; + height: 8px; + bottom: 0px; + right: 0px; + background-color: #f00; + cursor: se-resize; +} \ No newline at end of file diff --git a/css/editor.min.css b/css/editor.min.css new file mode 100644 index 0000000..957f966 --- /dev/null +++ b/css/editor.min.css @@ -0,0 +1 @@ +#csEditorLayer{position:absolute;z-index:2000;height:100%;width:100%;top:0;background-color:rgba(204,204,204,.9);display:none}#csEditorWrapper{height:100%}#csEditorHeader,#csEditorFooter{height:50px;background-color:#000;color:#fff}#csEditorHeader h1,#csEditorFooter h1{font-size:24px;margin-top:0;margin-bottom:0;line-height:50px}#csEditorLayerClose{font-size:24px;line-height:50px;cursor:pointer}#csEditorContent{height:calc(100% - 100px);background-color:#fff;overflow:auto}#csEditorPageElements{width:220px;position:fixed;right:0;top:300px;overflow:hidden}#csEditorPageElementsTitle{margin-right:45px;font-weight:bold;cursor:move}#csEditorPageElementsMin{position:absolute;right:15px;top:12px;cursor:pointer}#csEditorPageElementsContent h2{font-size:14px}#csEditorPageElementsContent h2,#csEditorPageElementsContent p{font-weight:bold;height:20px;line-height:20px;margin:0;padding:0}#csEditorPageElementsContent .ImageText-Image{display:none}#csEditorPageElementsContent .ImageText-Text{padding:0}#csEditorPageElementsContent h2,#csEditorPageElementsContent p,#csEditorPageElementsContent .ImageText-Text{width:100%}#csEditorPageElementsContent .row{margin:0}.pageWrapper{position:relative}.pageWrapper .glyphicon-pencil{position:absolute;left:-14px;cursor:pointer}.pageWrapper .glyphicon-trash{position:absolute;left:-42px;cursor:pointer}.pageWrapper .glyphicon-sort{position:absolute;right:-14px;cursor:move}.csEditorSortable .glyphicon-sort{position:absolute;right:42px;cursor:move}.csEditorSortable li{position:relative;list-style-type:none}ul.nav{position:relative}ul.nav>.glyphicon-pencil{left:-29px;color:#fff}.row{position:relative}.editableHover{background-color:red;opacity:.5}.csEditorStructure ul{padding-left:20px;font-style:normal;text-decoration:none}.csEditorStructure>ul{padding:15px}.csEditorStructure li{text-decoration:none;list-style-type:none;font-weight:normal}.csEditorStructure li.csEditorClosed ul{display:none}.csEditorStructure li.csEditorChosen{font-weight:bold}.csEditorStructure li.csEditorInactive{font-style:italic;color:#777}#csEditorContent .csEditorSliderContent{padding-top:48px}#csEditorContent .csEditorSliderContent:not(:first-of-type){display:none}#csEditorForm,.csEditorSlider,.csEditorSliderContent,.editFields,.sortFields,.moveFields,.childFields,.siblingFields{height:100%}.editFields,.sortFields,.moveFields,.childFields,.siblingFields{padding-top:24px}#content .sortable{min-height:20px}#csEditorImage{margin-top:42px}#csEditorImagePlaceholder{position:relative}#csEditorImageCover{position:absolute;box-shadow:inset 0 0 4px red;z-index:50}#csEditorCoverTop,#csEditorCoverRight,#csEditorCoverBottom,#csEditorCoverLeft{position:absolute;background-color:rgba(100,100,100,.8);z-index:1}#csEditorContent>div{height:100%}.csEditorButtonGroup{position:absolute;bottom:0;height:50px;background-color:#9d9d9d;padding-top:8px;width:100%}.ui-icon-gripsmall-diagonal-se{position:absolute;width:8px;height:8px;bottom:0;right:0;background-color:red;cursor:se-resize} \ No newline at end of file diff --git a/editor.js.php b/editor.js.php new file mode 100644 index 0000000..3f78c6a --- /dev/null +++ b/editor.js.php @@ -0,0 +1,37 @@ + + +var csEditorLang = ; +var csEditorTemplate = ''; +var csEditorPageElements = ''; + + 0) { + return true; + } + var style = (this.dataset.editor === 'Headline' || this.dataset.editor === 'Navigation' || this.dataset.editor === 'Subline') ? ' style="margin-top:24px;"' : ''; + $(this).append(''); + }); + + if (CS.sortableElement.length > 1) { + CS.sortableElement.each(function () { + var style = (this.dataset.editor === 'Subline') ? ' style="margin-top:24px;"' : ''; + $(this).append(''); + }); + } + + CS.sortableElement.each(function () { + var style = (this.dataset.editor === 'Subline') ? ' style="margin-top:24px;"' : ''; + $(this).append(''); + }); + + }, + + /** + * 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(); +}); diff --git a/js/editor.js b/js/editor.js deleted file mode 100644 index 0771f96..0000000 --- a/js/editor.js +++ /dev/null @@ -1,1341 +0,0 @@ -var userId; -var specialSite; -var editorLang; -var grid; -var gridCount; -var prefix; -var navigationId; -var webserviceUrl; -var editorUrl; -var editorVersion; -var sessLang; -var navId; -var editorParams; -var pathMed; -var imageTypes; -var dimOrig; -var stdKeyvisual; -var dimKeyvisual; -var keyvisualThumb; -var stdImage; -var dimImage; -var imageThumb; - -$(document).ready(function () { - editor.init(); -}); - -var editor = new Object({ - /** - * Standard-Variablen für den Editor - */ - type: '', - title: '', - name: '', - contentHtml: '', - contentData: null, - preventSortStop: false, - - /** - * jQuery-Elemente für den Editor - */ - pageElement: null, - titleElement: null, - layerElement: null, - closeElement: null, - contentElement: null, - waitingElement: null, - editableElement: null, - formElement: null, - newObjectElement: null, - newObjectTitleElement: null, - newObjectMinElement: null, - newSublineElement: null, - newTextElement: null, - newTextImageTextElement: null, - newTextImageImageElement: null, - newElementsClass: null, - element: null, - - init: function () { - editor.initElements(); - editor.initNewElements(); - editor.hoverEvents(); - editor.clickEvents(); - }, - - initElements: function () { - editor.pageElement = $('#content'); - editor.titleElement = $('#editor_title'); - editor.layerElement = $('#editor_layer'); - editor.closeElement = $('#editor_layer_close'); - editor.contentElement = $('#editor_content'); - editor.waitingElement = $('#wait'); - editor.editableElement = $('[data-editable]'); - editor.title = editor.titleElement.html(); - - if (specialSite === true) { - return true; - } - $('> div:not(.headline)', editor.pageElement).each(function () { - $(this).append(''); - $(this).append(''); - }); - - }, - - initNewElements: function () { - editor.newObjectElement = $('#editor_elements'); - editor.newObjectTitleElement = $('#boxtitle'); - editor.newSublineElement = $('.content', '#content_subline_'); - editor.newTextElement = $('.content', '#content_text_'); - editor.newTextImageTextElement = $('.content', '#content_textimage_'); - editor.newTextImageImageElement = $('img', '#content_textimage_'); - - editor.newObjectMinElement = $('.min'); - editor.newElementsClass = $('.elem_button'); - - editor.newObjectTitleElement.html(editorLang.newContent.title); - editor.newSublineElement.html(editorLang.newContent.subline); - editor.newTextElement.html(editorLang.newContent.text); - editor.newTextImageTextElement.html(editorLang.newContent.textImage); - editor.newTextImageImageElement.attr('src', stdImage); - }, - - hoverEvents: function () { - editor.editableElement.on('mouseenter', function (event) { - if ($(event.currentTarget).data('editable') === 'textimage') { - return; - } - $(event.currentTarget).addClass('editable_hover'); - }); - editor.editableElement.on('mouseleave', function (event) { - $(event.currentTarget).removeClass('editable_hover'); - }); - }, - - clickEvents: function () { - editor.editableElement.on('click', function (event) { - if (event.target.tagName === 'A' || event.target.tagName === 'SPAN') { - return true; - } - - var tmpEditorType = event.currentTarget.dataset.editable; - if (tmpEditorType === 'textimage') { - return true; - } - - editor.type = tmpEditorType; - editor.waitingElement.show(); - editor.name = editor.type.toUpperCase(); - editor.element = $(event.currentTarget).attr('id'); - editor.callEditor(); - }); - - editor.closeElement.click(function () { - editor.close(); - navEditor.close(); - imgEditor.close(); - }); - - editor.contentElement.on('click', '.formSubmit', function () { - editor.submitData(); - }); - - editor.contentElement.on('click', '.formCancel', function () { - editor.close(); - }); - - editor.contentElement.on('click', '.formNext', function () { - var actualInnerSlider = $(this).parents('.inner'); - actualInnerSlider.hide(); - actualInnerSlider.next('.inner').show(); - }); - - editor.contentElement.on('click', '.formPrev', function () { - var actualInnerSlider = $(this).parents('.inner'); - actualInnerSlider.hide(); - actualInnerSlider.prev('.inner').show(); - }); - - editor.contentElement.on('change', '#spieltyp', function () { - var durationElement = $('#spieldauer'); - var delayedElement = $('#verschoben'); - var duration = $(this).find(':selected').data('duration'); - var delayed = $(this).find(':selected').data('delayed'); - - if (duration == 'hide') { - durationElement.val('regular'); - durationElement[0].disabled = true; - } - else if (duration == 'show') { - durationElement[0].disabled = false; - } - - if (delayed == 'hide') { - delayedElement[0].disabled = true; - } - else if (delayed == 'show') { - delayedElement[0].disabled = false; - } - }); - - editor.newObjectElement.on('click', editor.newObjectMinElement, function (event) { - if (!$(event.target).hasClass('min')) { - return; - } - if (editor.newObjectTitleElement.html() !== '') { - editor.newObjectTitleElement.html(''); - editor.newObjectMinElement.html('<'); - $(this).css({width: grid, height: grid}); - editor.newObjectMinElement.css({marginRight: -1 * (grid / 2)}); - } - else { - editor.newObjectTitleElement.html(editorLang.newContent.title); - editor.newObjectMinElement.html('>'); - $(this).css({width: '', height: ''}); - editor.newObjectMinElement.css({marginRight: ''}); - } - }); - - editor.newObjectElement.draggable({ - addClasses: false, - handle: editor.newObjectTitleElement - }); - - editor.pageElement.sortable({ - axis: 'y', - forcePlaceholderSize: true, - handle: '.sort_handle', - items: '> :not(.headline)', - placeholder: 'editable_hover', - receive: function (event, ui) { - editor.preventSortStop = true; - - ui.helper.attr('id', ui.helper.data('temp')); - ui.helper.removeAttr('style'); - - var headline = $('.headline', editor.pageElement); - var sortOrder = editor.pageElement.sortable('toArray'); - var isTextImage = (ui.helper.attr('id') === 'content_textimage_'); - if (headline.length === 1) { - sortOrder.splice(0, 0, headline.attr('id')); - } - - var formData = { - request: 'insertData', - userId: userId, - prefix: prefix, - navId: navigationId, - dataSet: ui.helper.data('temp'), - content: $('.content', ui.helper).html(), - order: sortOrder - }; - if (isTextImage) { - formData.image = $('img', ui.helper).attr('src'); - } - - $.ajax({ - url: webserviceUrl, - data: formData, - dataType: 'json', - method: 'post', - error: function (jqXHR, textStatus, errorThrow) { - console.log(jqXHR); - console.log(textStatus); - console.log(errorThrow); - alert('Fehler beim Einfügen des neuen Seitenelements!') - }, - - success: function (data) { - if (isTextImage) { - location.reload(); - } - ui.helper.attr('id', ui.helper.data('temp') + data); - editor.preventSortStop = false; - } - }); - - editor.initElements(); - editor.hoverEvents(); - editor.clickEvents(); - }, - stop: function () { - - if (editor.preventSortStop === true) { - return; - } - var headline = $('.headline', editor.pageElement); - var sortOrder = editor.pageElement.sortable('toArray'); - if (headline.length === 1) { - sortOrder.splice(0, 0, headline.attr('id')); - } - var formData = { - request: 'updateData', - userId: userId, - prefix: prefix, - dataSet: 'content_' + navigationId, - siteContents: sortOrder.join(';').replace(/content_/g, '') - }; - - $.ajax({ - url: webserviceUrl, - data: formData, - dataType: 'text', - method: 'post', - error: function (jqXHR, textStatus, errorThrow) { - console.log(jqXHR); - console.log(textStatus); - console.log(errorThrow); - alert('Fehler beim Speichern der Sortierung!') - } - }); - } - }); - - editor.newElementsClass.draggable({ - connectToSortable: editor.pageElement, - helper: 'clone', - start: function (event, ui) { - ui.helper.removeClass('elem_button'); - ui.helper.removeClass('editable_hover'); - $('div', ui.helper).removeClass('editable_hover'); - ui.helper.attr('data-temp', $(ui.helper.context).prop('id')); - } - }); - - editor.pageElement.on('click', '.del_handle', function () { - var element = $(this).parent('[data-editable]'); - var formData = { - request: 'deleteData', - userId: userId, - prefix: prefix, - dataSet: $(this).parent('[data-editable]').attr('id'), - navId: navigationId - }; - - $.ajax({ - url: webserviceUrl, - data: formData, - method: 'post', - dataType: 'text', - error: function (x, y, z) { - console.log(x); - console.log(y); - console.log(z); - alert('Fehler beim Löschen des Seitenelements!'); - }, - success: function () { - element.remove(); - } - }); - - }); - }, - - close: function () { - editor.type = ''; - editor.name = ''; - editor.contentHtml = ''; - editor.contentData = null; - editor.preventSortStop = false; - - editor.element = null; - - editor.titleElement.html(editor.title); - editor.layerElement.hide(); - editor.contentElement.html(''); - editor.waitingElement.hide(); - - }, - - callEditor: function () { - editor.titleElement.html(editor.titleElement.html().replace('%%type%%', editor.name)); - editor.getEditorHtml(); - editor.getEditorData(); - editor.layerElement.show(); - }, - - getEditorHtml: function () { - var editorFile = editorUrl + editorVersion + '/templates/' + editor.type + '.php'; - $.ajax({ - type: 'POST', - url: editorFile, - data: {lang: sessLang}, - dataType: 'html', - error: function () { - console.log(editorFile); - console.log(editor.type); - alert('Fehler beim Holen des Editor-HTMLs!'); - }, - success: function (html) { - editor.contentHtml = html; - editor.contentElement.html(html); - editor.formElement = $('#editor_form'); - } - }); - }, - - getEditorData: function (element) { - var requestElement = (element) ? element : editor.element; - var elementArray = requestElement.split('_'); - if (elementArray[elementArray.length - 1] === '') { - editor.contentData = {}; - editor.fillHtml(); - return; - } - - $.ajax({ - type: 'POST', - url: webserviceUrl, - data: {request: 'getData', userId: userId, dataSet: requestElement, prefix: prefix, navId: navigationId}, - dataType: 'json', - error: function () { - console.log(webserviceUrl); - console.log(editor.type); - alert('Fehler beim Holen der Editor-Daten!'); - }, - success: function (data) { - editor.contentData = data; - editor.fillHtml(); - } - }); - }, - - fillHtml: function () { - if (editor.contentHtml === '' || editor.contentData === null) { - window.setTimeout(editor.fillHtml, 50); - return; - } - - if (editor.type === 'spielbericht') { - editor.fillSpielBericht(); - editor.fillStandard(); - } - else if (editor.type === 'keyvisual' || editor.type === 'image') { - imgEditor.setData(editor.contentData); - } - else if (editor.type === 'struktur') { - navEditor.setData(editor.contentData); - navEditor.fillData(); - } - else { - editor.fillStandard(); - } - - editor.fillSpecial(); - editor.checkDuration(); - editor.checkDelayed(); - editor.changeSpielBericht(); - - editor.waitingElement.hide(); - }, - - fillSpecial: function () { - $('#userId', editor.contentElement).val(userId); - $('#prefix', editor.contentElement).val(prefix); - $('#dataSet', editor.contentElement).val(editor.element); - $('#siteId', editor.contentElement).val(navId); - }, - - fillStandard: function () { - $.each(editor.contentData, function (key, value) { - var input = $('#' + key, editor.contentElement); - if (input.length == 0) { - input = $('#' + key + '_' + value, editor.contentElement); - if (input.length != 0) { - input[0].checked = true; - } - } - else { - input.val(value); - } - }); - - }, - - fillSpielBericht: function () { - - var teamOptions = ''; - $.each(editorParams.spielbericht.teamname, function (key, value) { - teamOptions += ''; - }); - $('#teamname', editor.contentElement).html(teamOptions); - - var spielTypOptions = ''; - $.each(editorParams.spielbericht.spieltyp, function (key, value) { - var duration = (value === 'pokal') ? 'show' : 'hide'; - var delayed = (value === 'abgesagt') ? 'show' : 'hide'; - spielTypOptions += ''; - }); - $('#spieltyp', editor.contentElement).html(spielTypOptions); - - var spielDauerOptions = ''; - $.each(editorParams.spielbericht.spieldauer, function (key, value) { - spielDauerOptions += ''; - }); - $('#spieldauer', editor.contentElement).html(spielDauerOptions); - }, - - changeSpielBericht: function () { - if (editor.type != 'spielbericht') { - return true; - } - $('#siteId').val(navigationId); - }, - - checkDuration: function () { - var durationElement = $('#spieldauer'); - var duration = $('#spieltyp').find(':selected').data('duration'); - if (duration == 'hide') { - durationElement.val('regular'); - durationElement[0].disabled = true; - } - else if (duration == 'show') { - durationElement[0].disabled = false; - } - }, - - checkDelayed: function () { - var delayedElement = $('#verschoben'); - var delayed = $('#spieltyp').find(':selected').data('delayed'); - if (delayed == 'hide') { - delayedElement[0].disabled = true; - } - else if (delayed == 'show') { - delayedElement[0].disabled = false; - } - }, - - submitData: function () { - editor.waitingElement.show(); - /** - * Update der Textareas mit Daten aus der CKEditor Instanz - */ - $('textarea.ckeditor').each(function () { - var textArea = $(this); - textArea.val(CKEDITOR.instances[textArea.attr('name')].getData()); - }); - - $('.uploadFile').prop('disabled', true); - var formData = new FormData(editor.formElement[0]); - - $.ajax({ - //url: webserviceUrl.replace('remote_data', 'test_data'), - url: webserviceUrl, - type: 'POST', - data: formData, - processData: false, - contentType: false, - error: function (jqXHR, textStatus, errorThrown) { - console.log(jqXHR); - console.log(textStatus); - console.log(errorThrown); - alert('Bei der Verarbeitung der Daten ist ein Fehler aufgetreten!\nStatus: "' + textStatus + '"\nFehlermeldung: "' + errorThrown + '"'); - }, - success: function (data) { - if (data === 'SUCCESS') { - location.reload(); - } - else { - alert('Bei der Verarbeitung der Daten ist ein Fehler aufgetreten!'); - } - } - }); - } -}); - -var navEditor = new Object({ - navData: null, - navPath: [], - structureHtml: '', - moveHtml: '', - breadCrumb: '', - chosenNavStart: 0, - chosenNavId: 0, - chosenData: null, - - structureElement: null, - navPointElement: null, - breadCrumbElement: null, - showActionElement: null, - templateElement: null, - actionChooserElement: null, - moveChooserElement: null, - - setData: function (navigationData) { - navEditor.navData = navigationData.navigation; - navEditor.navPath = navigationData.navPath; - navEditor.init(); - }, - - init: function () { - navEditor.initElements(); - navEditor.clickEvents(); - }, - - initElements: function () { - navEditor.structureElement = $('#struktur'); - navEditor.navPointElement = $('#navPoint'); - navEditor.breadCrumbElement = $('#breadCrumb'); - navEditor.showActionElement = $('#showAction'); - navEditor.templateElement = $('#actionTemplates'); - navEditor.moveChooserElement = $('#otherMain_box'); - navEditor.actionChooserElement = $('.actionChooser', navEditor.templateElement); - }, - - clickEvents: function () { - navEditor.structureElement.on('click', 'li.open > span', function () { - var parent = $(this).parent('li'); - parent.removeClass('open'); - parent.addClass('navclose'); - }); - - navEditor.structureElement.on('click', 'li.navclose > span', function () { - var parent = $(this).parent('li'); - parent.removeClass('navclose'); - parent.addClass('open'); - }); - - navEditor.navPointElement.on('click', 'li.open > span', function () { - var parent = $(this).parent('li'); - parent.removeClass('open'); - parent.addClass('navclose'); - }); - - navEditor.navPointElement.on('click', 'li.navclose > span', function () { - var parent = $(this).parent('li'); - parent.removeClass('navclose'); - parent.addClass('open'); - }); - - navEditor.structureElement.on('click', 'li.editable', function (event) { - if (this != event.target) { - return true; - } - navEditor.chosenNavStart = $(this).data('navstart'); - navEditor.chosenNavId = $(this).data('navid'); - navEditor.makeBreadCrumb(this); - navEditor.fillEditArea(); - }); - - navEditor.navPointElement.on('click', 'li.editable', function (event) { - if (this != event.target) { - return true; - } - $('#navStart', editor.formElement).val($(this).data('navid')); - $('#parentNavName', editor.formElement).val($(this).context.childNodes[1].textContent); - }); - - navEditor.showActionElement.on('click', '[data-show]', function () { - var action = $(this).data('show'); - navEditor.showActionElement.html($('.action' + action, navEditor.templateElement).clone()); - $('.navSort', navEditor.showActionElement).sortable({ - axis: 'y', - handle: '.sort_handle', - stop: function () { - var newSort = $('.navSort', navEditor.showActionElement).sortable('toArray'); - $('.newSort', navEditor.showActionElement).val(JSON.stringify(newSort)); - $('input.hidden', navEditor.showActionElement).removeClass('hidden'); - } - }); - }); - - }, - - fillData: function () { - navEditor.makeHtml(0); - $(navEditor.structureElement, editor.contentElement).html(navEditor.structureHtml); - navEditor.moveHtml = '
  •   / ' + navEditor.structureHtml + '
'; - navEditor.moveChooserElement.html(navEditor.moveHtml); - navEditor.fillEditArea(); - }, - - makeHtml: function (navStart) { - var actualNavStartElements = navEditor.navData['navStart_' + navStart]; - navEditor.structureHtml += '
    '; - - $.each(actualNavStartElements, function (key, actualNavElement) { - var liClass = (actualNavElement[prefix + '_navEditable'] === 'true') ? 'editable ' : 'not_editable '; - if ($.inArray(actualNavElement[prefix + '_navId'], navEditor.navPath) !== -1) { - liClass += 'open '; - navEditor.breadCrumb += '> ' + actualNavElement[prefix + '_navName'] + ' '; - } - else { - liClass += 'navclose '; - } - liClass += (navEditor.navData['navStart_' + actualNavElement[prefix + '_navId']] == undefined) ? 'empty ' : ''; - liClass += (actualNavElement[prefix + '_navActive'] != 'Y') ? 'editorDeactive ' : ''; - if (actualNavElement[prefix + '_navId'] == navigationId) { - liClass += 'editorChosen'; - navEditor.chosenNavStart = navStart; - navEditor.chosenNavId = navigationId; - } - navEditor.structureHtml += '
  •  ' + actualNavElement[prefix + '_navName']; - if (navEditor.navData['navStart_' + actualNavElement[prefix + '_navId']] != undefined) { - navEditor.makeHtml(actualNavElement[prefix + '_navId']); - } - navEditor.structureHtml += '
    • '; - }); - - navEditor.structureHtml += '
'; - }, - - makeBreadCrumb: function (element) { - navEditor.breadCrumb = ' > ' + $(element).context.childNodes[1].textContent; - - $.each($(element).parents('li'), function () { - navEditor.breadCrumb = ' > ' + ($(this).context.childNodes[1].textContent) + navEditor.breadCrumb; - }); - }, - - fillEditArea: function () { - navEditor.breadCrumbElement.html(navEditor.breadCrumb); - navEditor.chosenData = navEditor.navData['navStart_' + navEditor.chosenNavStart]['navId_' + navEditor.chosenNavId]; - - var activeElement = $('span[data-show="Activate"]', navEditor.actionChooserElement); - var deActiveElement = $('span[data-show="Deactivate"]', navEditor.actionChooserElement); - if (navEditor.chosenData[prefix + '_navActive'] === 'Y') { - activeElement.next('br').hide(); - activeElement.hide(); - deActiveElement.next('br').show(); - deActiveElement.show(); - } - else { - deActiveElement.next('br').hide(); - deActiveElement.hide(); - activeElement.next('br').show(); - activeElement.show(); - } - - editor.fillSpecial(); - navEditor.fillSpecialData(); - - navEditor.showActionElement.html(navEditor.actionChooserElement.clone()); - - $.each(navEditor.chosenData, function (key, value) { - $('#' + key.replace(prefix + '_', ''), editor.formElement).val(value); - /** - * In den einzelnen Aktions-Templates suchen - */ - $.each($('#' + key.replace(prefix + '_', ''), '#actionTemplates div'), function () { - $(this).val(value); - }); - - }); - - navEditor.navPointElement.show(); - }, - - fillSpecialData: function () { - navEditor.fillPageTypes(); - navEditor.fillSortData(); - }, - - fillPageTypes: function () { - var optionHtml = ''; - - $.each(editorParams.pageTypes, function (key, value) { - optionHtml += ''; - }); - - $('.navigationType').html(optionHtml); - }, - - fillSortData: function () { - var navPoints = navEditor.navData['navStart_' + navEditor.chosenNavStart]; - var button = $('.checkSort'); - var navSort = $('.navSort'); - - if (Object.keys(navPoints).length < 2) { - button.hide(); - button.next('br').hide(); - return true; - } - - navSort.html(''); - $.each(navPoints, function (navId, navPointData) { - navSort.append(''); - }); - - button.show(); - button.next('br').show(); - }, - - close: function () { - navEditor.navData = null; - navEditor.navPath = []; - navEditor.structureHtml = ''; - navEditor.moveHtml = ''; - navEditor.breadCrumb = ''; - navEditor.chosenNavStart = 0; - navEditor.chosenNavId = 0; - navEditor.chosenData = null; - - navEditor.structureElement = null; - navEditor.navPointElement = null; - navEditor.breadCrumbElement = null; - navEditor.showActionElement = null; - navEditor.templateElement = null; - navEditor.actionChooserElement = null; - navEditor.moveChooserElement = null; - } -}); - -var imgEditor = new Object({ - thumbSuffix: '_thumb', - origSuffix: '_orig', - editImageID: 'editImage', - - isFirst: true, - imgCount: 0, - imgIDs: [], - imgData: {}, - imgPath: '', - imgTypes: [], - maxDimension: {}, - imgDummy: '', - imgDummyExtension: '', - imgDimension: {}, - imgOrigDimension: {}, - thumbDimension: {}, - coverDimension: {}, - uploadSource: '', - chosenThumb: -1, - - editActive: true, - sortActive: false, - deleteActive: false, - uploadActive: false, - - imgThumbElement: null, - dataSetElement: null, - imgSliderElement: null, - sortBoxElement: null, - sortButtonElement: null, - sortCancelElement: null, - deleteCancelElement: null, - rightBoxElement: null, - formActionElement: null, - imagePlaceholder: null, - imagePreview: null, - imageCover: null, - coverTop: null, - coverRight: null, - coverBottom: null, - coverLeft: null, - previewTop: null, - previewLeft: null, - previewHeight: null, - previewWidth: null, - editImage: null, - - setData: function (imageData) { - if ($.isEmptyObject(imageData) === true) { - imgEditor.imgCount = 0; - imgEditor.init(); - imgEditor.fillData(); - return; - } - - imgEditor.imgData[imageData.id] = imageData; - - if (imgEditor.isFirst === true) { - imgEditor.imgIDs.push(imageData.id); - imgEditor.isFirst = false; - - if (imageData.sliderContent !== '') { - var sliderContents = imageData.sliderContent.split(';'); - imgEditor.getSliderContent(sliderContents); - } - - imgEditor.init(); - } - - imgEditor.imgCount++; - if (imgEditor.imgCount === 1) { - imgEditor.fillData(); - } - }, - - initElements: function () { - imgEditor.imgThumbElement = $('#imgThumbs'); - imgEditor.dataSetElement = $('#dataSet'); - imgEditor.imgSliderElement = $('#imageSlider'); - imgEditor.sortBoxElement = $('#newSort_box'); - imgEditor.sortButtonElement = $('#sortButton'); - imgEditor.sortCancelElement = $('#sortCancel'); - imgEditor.deleteCancelElement = $('#deleteCancel'); - imgEditor.uploadCancelElement = $('#uploadCancel'); - imgEditor.sortBoxElement.css({width: imgEditor.thumbDimension.width + 4 * grid}); - imgEditor.rightBoxElement = $('.rightBox'); - imgEditor.rightBoxElement.css({width: (parseInt(gridCount) * parseInt(grid - 1) - parseInt(imgEditor.sortBoxElement.css('width')) - 8)}); - imgEditor.formActionElement = $('#formAction'); - imgEditor.imagePlaceholder = $('#imagePlaceholder'); - imgEditor.imagePreview = $('#imagePreview'); - imgEditor.imageCover = $('#imageCover'); - imgEditor.coverTop = $('#coverTop'); - imgEditor.coverRight = $('#coverRight'); - imgEditor.coverBottom = $('#coverBottom'); - imgEditor.coverLeft = $('#coverLeft'); - imgEditor.previewTop = $('#previewTop'); - imgEditor.previewLeft = $('#previewLeft'); - imgEditor.previewHeight = $('#previewHeight'); - imgEditor.previewWidth = $('#previewWidth'); - imgEditor.editImage = $('#' + imgEditor.editImageID); - }, - - clickEvents: function () { - - imgEditor.sortButtonElement.click(function () { - imgEditor.enableSorting(); - }); - imgEditor.sortCancelElement.click(function () { - imgEditor.enableEdit(); - }); - imgEditor.sortBoxElement.on('click', '.del_handle', function (event) { - imgEditor.enableDelete(event); - }); - imgEditor.deleteCancelElement.click(function () { - imgEditor.enableEdit(); - }); - imgEditor.uploadCancelElement.click(function () { - imgEditor.enableEdit(); - }); - - $('.uploadFile', editor.contentElement).change(imgEditor.handleFileSelect); - - - }, - - init: function () { - imgEditor.imgPath = pathMed + prefix + '/' + navigationId + '/'; - imgEditor.imgTypes = imageTypes; - imgEditor.maxDimension = dimOrig; - - if (editor.type === 'keyvisual') { - imgEditor.imgDummy = stdKeyvisual; - imgEditor.imgDimension = dimKeyvisual; - imgEditor.thumbDimension = keyvisualThumb; - } - else if (editor.type === 'image') { - imgEditor.imgDummy = stdImage; - imgEditor.imgDimension = dimImage; - imgEditor.thumbDimension = imageThumb; - } - - imgEditor.imgDummyExtension = imgEditor.getExtension(imgEditor.imgDummy); - - imgEditor.initElements(); - imgEditor.clickEvents(); - - imgEditor.enableEdit(); - }, - - fillData: function () { - if (imgEditor.imgCount < imgEditor.imgIDs.length) { - window.setTimeout(imgEditor.fillData, 50); - return; - } - - $('#navId', editor.contentElement).val(navigationId); - - if (editor.type === 'keyvisual') { - $.each(imgEditor.imgIDs, function (key, value) { - if (key === 0) { - imgEditor.imgThumbElement.append('
    • '); - return true; - } - imgEditor.imgThumbElement.append('
  •  
    • '); - }); - - if (imgEditor.imgIDs.length === 0 || imgEditor.imgData[imgEditor.imgIDs[0]].hasSlider === 'Y') { - imgEditor.sortBoxElement.append(''); - } - } - else if (editor.type === 'image') { - imgEditor.imgData[imgEditor.imgIDs[0]].sliderContent = ''; - imgEditor.imgData[imgEditor.imgIDs[0]].hasSlider = 'N'; - imgEditor.fillForm(imgEditor.imgIDs[0], 0); - } - }, - - getSliderContent: function (sliderContents) { - $.each(sliderContents, function (key, value) { - imgEditor.imgIDs.push(value); - editor.getEditorData(editor.type + '_' + value); - }); - }, - - fillForm: function (imgID, imgKey) { - imgEditor.chosenThumb = imgKey; - if (imgEditor.editActive !== true) { - return; - } - - editor.contentData = imgEditor.imgData[imgID]; - editor.fillStandard(); - - if (imgKey !== 0) { - imgEditor.imgSliderElement.hide(); - } - else { - imgEditor.imgSliderElement.show(); - } - - imgEditor.makeEditingArea(imgID); - if (imgID === -1) { - if (typeof(imgEditor.imgIDs[0]) == 'undefined') { - imgEditor.dataSetElement.val(editor.type); - $('#request').val('insertData'); - } else { - imgEditor.dataSetElement.val(editor.type + '_' + imgEditor.imgIDs[0]) - } - } - else { - imgEditor.dataSetElement.val(editor.type + '_' + imgID); - } - - var actualInnerSlider = $('.editor_slider').children('.inner'); - actualInnerSlider.hide(); - actualInnerSlider.next('.inner').show(); - }, - - getExtension: function (imgPath) { - var imgPathArray = imgPath.split('.'); - return '.' + imgPathArray[imgPathArray.length - 1]; - }, - - makeEditingArea: function (imgID) { - var origImage = imgEditor.imgPath + imgEditor.imgData[imgID].imgName + imgEditor.origSuffix + '.' + imgEditor.imgData[imgID].imgExtension; - $('img', imgEditor.imagePlaceholder).remove(); - - if (imgID === -1) { - imgEditor.imagePlaceholder.append(''); - $('#uploadFile').val(imgEditor.uploadSource); - $('#uploadFile').prop('disabled', false); - editor.waitingElement.hide(); - } - else { - imgEditor.imagePlaceholder.append(''); - $('#uploadFile').val(''); - $('#uploadFile').prop('disabled', true); - imgEditor.formActionElement.val(''); - imgEditor.formActionElement.prop('disabled', true); - } - imgEditor.editImage = $('#' + imgEditor.editImageID); - - imgEditor.editImage.load(function () { - imgEditor.imgOrigDimension = {width: $(this).width(), height: $(this).height()}; - imgEditor.editImage.css({width: imgEditor.imgDimension.width}); - imgEditor.imagePlaceholder.css({width: imgEditor.imgDimension.width, height: imgEditor.editImage.innerHeight()}); - imgEditor.imageCover.css({width: imgEditor.imgDimension.width, height: imgEditor.editImage.innerHeight()}); - imgEditor.setCover(); - - imgEditor.imagePreview.resizable({ - aspectRatio: true, - containment: imgEditor.imagePlaceholder, - handles: 'se', - minWidth: (imgEditor.imgDimension.width * imgEditor.imgDimension.width / imgEditor.imgOrigDimension.width), - create: function () { - if (imgEditor.imagePreview.innerHeight() > imgEditor.editImage.innerHeight()) { - imgEditor.imagePreview.css({ - width: (imgEditor.imagePreview.innerWidth() * imgEditor.editImage.innerHeight() / imgEditor.imagePreview.innerHeight()), - height: imgEditor.editImage.innerHeight() - }); - imgEditor.previewHeight.val(imgEditor.editImage.innerHeight()); - imgEditor.previewWidth.val(imgEditor.imagePreview.innerWidth() * imgEditor.editImage.innerHeight() / imgEditor.imagePreview.innerHeight()); - imgEditor.setCover(); - } - }, - resize: function (event, ui) { - imgEditor.previewHeight.val(ui.size.height); - imgEditor.previewWidth.val(ui.size.width); - imgEditor.setCover(); - } - }); - - imgEditor.imagePreview.draggable({ - containment: imgEditor.imagePlaceholder, - cursor: 'crosshair', - drag: function (event, ui) { - imgEditor.previewTop.val(ui.position.top); - imgEditor.previewLeft.val(ui.position.left); - imgEditor.setCover(); - } - }); - }); - - }, - - setCover: function () { - imgEditor.coverDimension = { - top: parseFloat(imgEditor.previewTop.val()), - right: parseFloat(imgEditor.previewLeft.val()) + parseFloat(imgEditor.previewWidth.val()), - bottom: parseFloat(imgEditor.previewTop.val()) + parseFloat(imgEditor.previewHeight.val()), - left: parseFloat(imgEditor.previewLeft.val()), - width: parseFloat(imgEditor.previewWidth.val()), - height: parseFloat(imgEditor.previewHeight.val()) - }; - - imgEditor.imagePreview.css({ - top: imgEditor.coverDimension.top, - left: imgEditor.coverDimension.left, - height: imgEditor.coverDimension.height, - width: imgEditor.coverDimension.width - }); - imgEditor.coverTop.css({top: 0, left: 0, height: imgEditor.coverDimension.top, width: imgEditor.imgDimension.width}); - imgEditor.coverRight.css({ - top: imgEditor.coverDimension.top, - left: imgEditor.coverDimension.right, - height: imgEditor.coverDimension.bottom - imgEditor.coverDimension.top, - width: imgEditor.imgDimension.width - imgEditor.coverDimension.right - }); - imgEditor.coverBottom.css({ - top: imgEditor.coverDimension.bottom, - left: 0, - height: (imgEditor.editImage.innerHeight() - imgEditor.coverDimension.bottom), - width: imgEditor.imgDimension.width - }); - imgEditor.coverLeft.css({ - top: imgEditor.coverDimension.top, - left: 0, - height: imgEditor.coverDimension.height, - width: imgEditor.coverDimension.left - }); - }, - - enableEdit: function () { - imgEditor.editActive = true; - imgEditor.disableDelete(); - imgEditor.disableUpload(); - imgEditor.disableSorting(); - - imgEditor.formActionElement.val('updateData'); - - $('input', '.editFields').prop('disabled', false); - $('.editFields').show(); - }, - - enableDelete: function (event) { - imgEditor.deleteActive = true; - imgEditor.disableEdit(); - imgEditor.disableUpload(); - imgEditor.disableSorting(); - - $('#dataSet').val($(event.target).parent('li').attr('id').replace('sort', editor.type)); - $('#firstImage').val($('li:first-of-type', imgEditor.imgThumbElement).attr('id').replace('sort_', '')); - - $('#request').val('deleteData'); - $('input', '.deleteFields').prop('disabled', false); - $('.deleteFields').show(); - }, - - enableUpload: function () { - if (imgEditor.editActive !== true) { - return; - } - imgEditor.chosenThumb = -1; - imgEditor.uploadActive = true; - imgEditor.disableEdit(); - imgEditor.disableDelete(); - imgEditor.disableSorting(); - - imgEditor.formActionElement.val('updateData'); - - $('input', '.uploadFields').prop('disabled', false); - $('.uploadFields').show(); - }, - - handleFileSelect: function (event) { - var uploadFile = event.target.files[0]; - var fileReader = new FileReader(); - - if ($.inArray(uploadFile.type, imageTypes) === -1) { - alert('Die gewählte Datei kann nicht verarbeitet werden. Wählen Sie ein passendes Bildformat!'); - return false; - } - - editor.waitingElement.show(); - fileReader.onload = (function (uploadFile) { - return function (fileEvent) { - var extension = uploadFile.type.replace('image/', '').replace('jpeg', 'jpg'); - var fileName = uploadFile.name.split('.'); - fileName.pop(); - fileName = fileName.join('.'); - - imgEditor.imgData[-1] = { - id: -1, - imgName: fileName.toLowerCase(), - imgExtension: extension, - imgTitle: fileName.charAt(0).toUpperCase() + fileName.slice(1).toLowerCase(), - imgOrigname: fileName + '.' + extension, - previewTop: 0, - previewLeft: 0, - previewHeight: imgEditor.imgDimension.height, - previewWidth: imgEditor.imgDimension.width, - hasSlider: 'N', - sliderContent: '' - }; - - if (imgEditor.chosenThumb === 0) { - imgEditor.imgData[-1].hasSlider = imgEditor.imgData[imgEditor.imgIDs[imgEditor.chosenThumb]].hasSlider; - imgEditor.imgData[-1].sliderContent = imgEditor.imgData[imgEditor.imgIDs[imgEditor.chosenThumb]].sliderContent; - } - - var uploadImg = new Image(); - uploadImg.src = fileEvent.target.result; - - uploadImg.onload = function () { - if (this.width < imgEditor.imgDimension.width || this.height < imgEditor.imgDimension.height) { - alert('Das gewählte Bild entspricht nicht den minimalen Abmessungen (Breite:' + imgEditor.imgDimension.width + 'px x Höhe: ' + imgEditor.imgDimension.height + 'px)'); - editor.waitingElement.hide(); - return false; - } - imgEditor.uploadSource = fileEvent.target.result; - - if (imgEditor.imagePreview.is(':ui-resizable')) { - imgEditor.imagePreview.resizable('destroy'); - } - - imgEditor.enableEdit(); - imgEditor.fillForm(-1, -1); - - if ($(event.target).prop('id') === 'newUploadFile') { - imgEditor.formActionElement.val('appendImage'); - imgEditor.formActionElement.prop('disabled', false); - } - else if ($(event.target).prop('id') === 'changeUploadFile') { - imgEditor.formActionElement.val(''); - imgEditor.formActionElement.prop('disabled', true); - } - - }; - - }; - })(uploadFile); - fileReader.readAsDataURL(uploadFile); - }, - - enableSorting: function () { - - if (imgEditor.imgCount < 2) { - return; - } - - imgEditor.sortActive = true; - imgEditor.disableEdit(); - imgEditor.disableDelete(); - imgEditor.disableUpload(); - - $.each($('li', imgEditor.imgThumbElement), function () { - $(this).append(' '); - $('.del_handle', this).remove(); - }); - - $('input', '.sortFields').prop('disabled', false); - $('.sortFields').show(); - - imgEditor.imgThumbElement.sortable({ - axis: 'y', - handle: '.sort_handle', - stop: function () { - imgEditor.formActionElement.val('updateSort'); - imgEditor.formActionElement[0].disabled = false; - var sorting = imgEditor.imgThumbElement.sortable('toArray'); - var newFirstImageID = sorting.shift().replace('sort_', ''); - var sliderContent = sorting.join(';').replace(/sort_/g, ''); - editor.contentData = imgEditor.imgData[newFirstImageID]; - editor.fillStandard(); - imgEditor.dataSetElement.val(editor.type + '_' + newFirstImageID); - $('#sortSave').show(); - $('#sliderContent').val(sliderContent); - } - }); - }, - - disableEdit: function () { - imgEditor.editActive = false; - - $('input', '.editFields').prop('disabled', true); - $('.editFields').hide(); - }, - - disableDelete: function () { - imgEditor.deleteActive = false; - - $('input', '.deleteFields').prop('disabled', true); - $('.deleteFields').hide(); - }, - - disableUpload: function () { - imgEditor.uploadActive = false; - - $('input', '.uploadFields').prop('disabled', true); - $('.uploadFields').hide(); - }, - - disableSorting: function () { - imgEditor.sortActive = false; - - if (imgEditor.imgThumbElement.is(':ui-sortable')) { - imgEditor.imgThumbElement.sortable('destroy'); - - $.each($('li', imgEditor.imgThumbElement), function (key) { - if (key > 0) { - $(this).append(' '); - } - $('.sort_handle', this).remove(); - }); - } - - $('input', '.sortFields').prop('disabled', true); - $('.sortFields').hide(); - $('#sortSave').hide(); - }, - - close: function () { - imgEditor.isFirst = true; - imgEditor.imgCount = 0; - imgEditor.imgIDs = []; - imgEditor.imgData = {}; - imgEditor.imgPath = ''; - imgEditor.imgTypes = []; - imgEditor.maxDimension = {}; - imgEditor.imgDummy = ''; - imgEditor.imgDummyExtension = ''; - imgEditor.imgDimension = {}; - imgEditor.imgOrigDimension = {}; - imgEditor.thumbDimension = {}; - imgEditor.coverDimension = {}; - imgEditor.uploadSource = ''; - imgEditor.chosenThumb = -1; - - imgEditor.editActive = true; - imgEditor.sortActive = false; - imgEditor.deleteActive = false; - imgEditor.uploadActive = false; - - imgEditor.imgThumbElement = null; - imgEditor.dataSetElement = null; - imgEditor.imgSliderElement = null; - imgEditor.sortBoxElement = null; - imgEditor.sortButtonElement = null; - imgEditor.sortCancelElement = null; - imgEditor.deleteCancelElement = null; - imgEditor.rightBoxElement = null; - imgEditor.formActionElement = null; - imgEditor.imagePlaceholder = null; - imgEditor.imagePreview = null; - imgEditor.imageCover = null; - imgEditor.coverTop = null; - imgEditor.coverRight = null; - imgEditor.coverBottom = null; - imgEditor.coverLeft = null; - imgEditor.previewTop = null; - imgEditor.previewLeft = null; - imgEditor.previewHeight = null; - imgEditor.previewWidth = null; - imgEditor.editImage = null; - } -}); \ No newline at end of file diff --git a/js/headlineEditor.js b/js/headlineEditor.js new file mode 100644 index 0000000..8787382 --- /dev/null +++ b/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 = '

    ' + CS.editorData.navHeadline + '

    '; + $.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 () { + + } + +}; diff --git a/js/imageTextEditor.js b/js/imageTextEditor.js new file mode 100644 index 0000000..c1858b7 --- /dev/null +++ b/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 = '

    ' + CS.editorData.text + '

    '; + $.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(); + } + +}; diff --git a/js/keyVisualEditor.js b/js/keyVisualEditor.js new file mode 100644 index 0000000..fe714cc --- /dev/null +++ b/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(''); + }); + KeyVisual.thumbElement.append(''); + + 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 () { + + } +}; \ No newline at end of file diff --git a/js/navigationEditor.js b/js/navigationEditor.js new file mode 100644 index 0000000..481f6c6 --- /dev/null +++ b/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 += '
    •  /'; + Navigation.chosenBreadCrumb += '/ '; + } + Navigation.structureHtml += '
        '; + + $.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 += '
      •  ' + actualNavElement['navName']; + if (CS.editorData['navStart_' + actualNavElement['navID']] != undefined) { + Navigation.buildStructureHtml(actualNavElement['navID']); + } + Navigation.structureHtml += '
        • '; + }); + + if (navStart === 0) { + Navigation.structureHtml += ''; + } + Navigation.structureHtml += '
      '; + }, + + 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 = '
        '; + $('.sortSubmit').show(); + $.each(CS.editorData['navStart_' + Navigation.chosenNavID], function (key, navPoint) { + sortHtml += '
      • ' + navPoint['navName'] + '
        • '; + }); + sortHtml += '
      '; + $("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) + ' ' + 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; + } +}; diff --git a/js/sublineEditor.js b/js/sublineEditor.js new file mode 100644 index 0000000..df71b70 --- /dev/null +++ b/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 = '

      ' + CS.editorData.text + '

      '; + $.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 () { + + } + +}; diff --git a/js/textEditor.js b/js/textEditor.js new file mode 100644 index 0000000..60ae068 --- /dev/null +++ b/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 = '

      ' + CS.editorData.text + '

      '; + $.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 () { + + } +}; diff --git a/lang/lang-de.php b/lang/lang-de.php index 12fb26f..3d1ce2c 100644 --- a/lang/lang-de.php +++ b/lang/lang-de.php @@ -7,6 +7,9 @@ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de) */ +$lang['common']['yes'] = 'Ja'; +$lang['common']['no'] = 'Nein'; + $lang['newContent']['title'] = 'Neue Elemente'; $lang['newContent']['text'] = 'Text'; $lang['newContent']['subline'] = 'Überschrift'; @@ -30,47 +33,64 @@ $lang['spielbericht']['vorschau'] = 'Vorschau'; $lang['spielbericht']['date'] = 'Spiel vom:'; $lang['spielbericht']['delayed'] = 'Verschoben auf:'; +$lang['headline']['editHeadline'] = 'Überschrift der Seite '; -$lang['struktur']['editing'] = 'Bearbeitung des gewählten Navigationspunkts:'; -$lang['struktur']['rename'] = 'Umbenennen'; -$lang['struktur']['renameHelper'] = 'Änderung des angezeigten Namens in der Navigation'; -$lang['struktur']['activate'] = 'Aktivieren'; -$lang['struktur']['activateHelper'] = 'Aktiviert den gewählten Navigations-Punkt, so dass dessen Inhalte auf der Homepage wieder angezeigt werden'; -$lang['struktur']['deactivate'] = 'Deaktivieren'; -$lang['struktur']['deactivateHelper'] = 'Deaktiviert den gewählten Navigations-Punkt, so dass dessen Inhalte auf der Homepage nicht mehr angezeigt werden'; -$lang['struktur']['sort'] = 'Sortieren'; -$lang['struktur']['sortHelper'] = 'Änderung der Anzeige-Reihefolge der Navigations-Punkte'; -$lang['struktur']['move'] = 'Verschieben'; -$lang['struktur']['moveHelper'] = 'Verschieben des gewählten Menüpunktes unter einen neuen Navigations-Punkt'; -$lang['struktur']['submenu'] = 'Untermenü'; -$lang['struktur']['submenuHelper'] = 'Legt einen neuen Navigations-Punkt als erstes Element unter dem gewählten Punkt an'; -$lang['struktur']['menu'] = 'Menüpunkt'; -$lang['struktur']['menuHelper'] = 'Legt einen neuen Navigations-Punkt nach dem gewählten Punkt auf gleicher Ebene an'; +$lang['navigation']['headline'] = 'Bearbeitung der Seiten Struktur'; +$lang['navigation']['structure'] = 'Seiten Struktur'; +$lang['navigation']['edit'] = 'Bearbeiten'; +$lang['navigation']['editHelper'] = 'Bearbeitung des gewählten Navigationspunkts'; +$lang['navigation']['rename'] = 'Umbenennen'; +$lang['navigation']['renameHelper'] = 'Änderung des angezeigten Namens in der Navigation'; +$lang['navigation']['activate'] = 'Aktivieren'; +$lang['navigation']['activateHelper'] = 'Aktiviert den gewählten Navigations-Punkt, so dass dessen Inhalte auf der Homepage wieder angezeigt werden'; +$lang['navigation']['deactivate'] = 'Deaktivieren'; +$lang['navigation']['deactivateHelper'] = 'Deaktiviert den gewählten Navigations-Punkt, so dass dessen Inhalte auf der Homepage nicht mehr angezeigt werden'; +$lang['navigation']['sort'] = 'Sortieren'; +$lang['navigation']['sortHelper'] = 'Sortieren der Untermenü-Punkte des gewählten Navigations-Punkts'; +$lang['navigation']['move'] = 'Verschieben'; +$lang['navigation']['moveHelper'] = 'Verschieben des gewählten Menüpunktes unter einen neuen Navigations-Punkt'; +$lang['navigation']['subMenu'] = 'Untermenü'; +$lang['navigation']['subMenuHelper'] = 'Legt einen neuen Navigations-Punkt als erstes Element unter dem gewählten Punkt an'; +$lang['navigation']['menu'] = 'Menüpunkt'; +$lang['navigation']['menuHelper'] = 'Legt einen neuen Navigations-Punkt nach dem gewählten Punkt auf gleicher Ebene an'; -$lang['struktur']['navNameRename'] = 'Neuer Name:'; -$lang['struktur']['navNameEnable'] = 'Folgender Navigations-Punkt wird aktiviert:'; -$lang['struktur']['navNameDisable'] = 'Folgender Navigations-Punkt wird deaktiviert:'; -$lang['struktur']['navNameMove'][0] = 'Folgender Navigations-Punkt'; -$lang['struktur']['navNameMove'][1] = 'wird als Unterpunkt in den gewählten Punkt verschoben'; -$lang['struktur']['newSubMenu'] = 'Neues Untermenü unter folgendem Navigations-Punkt anlegen:'; -$lang['struktur']['newMenu'] = 'Neuen Menü-Punkt nach folgendem Navigations-Punkt anlegen:'; -$lang['struktur']['newSort'] = 'Umsortierung der folgenden Navigationspunkte:'; -$lang['struktur']['newNavName'] = 'Neuer Seiten-Name:'; -$lang['struktur']['newNavType'] = 'Neuer Seiten-Typ:'; +$lang['navigation']['name'] = 'Name:'; +$lang['navigation']['title'] = 'Titel:'; +$lang['navigation']['active'] = 'Aktivieren:'; +$lang['navigation']['choseAction'] = 'Aktion wählen:'; -$lang['struktur']['content'] = 'Standard-Seite'; -$lang['struktur']['uebersicht'] = 'Übersicht-Seite'; -$lang['struktur']['spielbericht'] = 'Spielbericht (Punkt-, Pokalspiel)'; -$lang['struktur']['turnier'] = 'Turnier-Seite (mit mehreren Spielberichten)'; -$lang['struktur']['widget'] = 'Widget (z.B. Tabelle)'; +$lang['navigation']['newLinkName'] = 'Link-Name der neuen Seite in der Navigation'; +$lang['navigation']['newTitle'] = 'Titel der neuen Seite'; +$lang['navigation']['chosenNavPoint'] = 'Gewählter Navigationspunkt:'; + +$lang['navigation']['navNameEnable'] = 'Folgender Navigations-Punkt wird aktiviert:'; +$lang['navigation']['navNameDisable'] = 'Folgender Navigations-Punkt wird deaktiviert:'; +$lang['navigation']['navNameMove'] = 'Folgender Navigations-Punkt wird als Unterpunkt in den gewählten Punkt verschoben:'; +$lang['navigation']['newSubMenu'] = 'Neues Untermenü unter folgendem Navigations-Punkt anlegen:'; +$lang['navigation']['newMenu'] = 'Neuen Menü-Punkt nach folgendem Navigations-Punkt anlegen:'; +$lang['navigation']['newSort'] = 'Umsortierung der folgenden Navigationspunkte:'; +$lang['navigation']['newNavName'] = 'Neuer Seiten-Name:'; +$lang['navigation']['newNavType'] = 'Neuer Seiten-Typ:'; + +$lang['navigation']['content'] = 'Standard-Seite'; +$lang['navigation']['uebersicht'] = 'Übersicht-Seite'; +$lang['navigation']['spielbericht'] = 'Spielbericht (Punkt-, Pokalspiel)'; +$lang['navigation']['turnier'] = 'Turnier-Seite (mit mehreren Spielberichten)'; +$lang['navigation']['widget'] = 'Widget (z.B. Tabelle)'; $lang['widget']['wettbewerb'] = 'Wettbewerbs-ID:'; +$lang['imageText']['headline'] = 'Auf das Bild klick'; + $lang['image']['editHeadline'] = 'Bearbeitung der Bilder'; $lang['image']['editHint'] = 'Durch Klick auf ein Vorschaubild, können die Daten des Einzelbildes bearbeitet werden.
      Um ein neues Bild hochzuladen, muss das "Dummy"-Bild angeklickt werden.
      Zur Umsortierung der bestehenden Bilder hier klicken:
      '; $lang['image']['sort'] = 'Sortieren'; +$lang['image']['imageFormat'] = 'Bildformat'; +$lang['image']['portrait'] = 'hoch'; +$lang['image']['square'] = 'quadratisch'; +$lang['image']['landscape'] = 'quer'; $lang['image']['imageName'] = 'Bildname'; $lang['image']['imageTitle'] = 'Bildtitel'; $lang['image']['keyvisualType'] = 'Keyvisual-Typ'; @@ -84,10 +104,41 @@ $lang['image']['sortHeadLine'] = 'Speichern der Bildreihenfolge!'; $lang['image']['sortHint'] = 'Nach Abschluß der Sortierung kann die neue Reichenfolge gespeichert werden.'; $lang['image']['uploadHeadLine'] = 'Upload eines Bildes!'; $lang['image']['uploadHint'] = 'Wählen Sie ein neues Bild zum Upload aus. Dieses kann in einem weiteren Schritt bearbeitet werden.
      '; -$lang['image']['newUpload'] = 'Neues Bild:'; +$lang['image']['newUpload'] = 'Neues Bild'; +$lang['image']['imageZoom'] = 'Zoomrichtung'; +$lang['image']['imageZoomIn'] = 'hinein zoomen'; +$lang['image']['imageZoomOut'] = 'heraus zoomen'; +$lang['image']['imageZoomDirection'] = 'Startpunkt'; +$lang['image']['nw'] = 'Oben links'; +$lang['image']['n'] = 'Oben mitte'; +$lang['image']['ne'] = 'Oben rechts'; +$lang['image']['e'] = 'Mitte rechts'; +$lang['image']['se'] = 'Unten rechts'; +$lang['image']['s'] = 'Unten mitte'; +$lang['image']['sw'] = 'Unten links'; +$lang['image']['w'] = 'Mitte links'; +$lang['image']['c'] = 'Zentrum'; + +$lang['keyVisual']['generalHelp'] = 'Eine Vorschau anklicken, um das Bild zu bearbeiten oder auszutauschen.
      '; +$lang['keyVisual']['type'] = 'KeyVisual Typ'; +$lang['keyVisual']['typeSlider'] = 'Slider'; +$lang['keyVisual']['typeKenBurns'] = 'KenBurns'; +$lang['keyVisual']['typeSingle'] = 'Einzel-Bild'; +/*$lang['keyVisual'][''] = ''; +$lang['keyVisual'][''] = ''; +$lang['keyVisual'][''] = '';*/ $lang['button']['cancel'] = 'Abbrechen'; $lang['button']['prev'] = 'Zurück'; $lang['button']['next'] = 'Weiter'; -$lang['button']['save'] = 'Speichern'; \ No newline at end of file +$lang['button']['save'] = 'Speichern'; +$lang['button']['delete'] = 'Löschen'; + +$lang['error']['template'] = 'Fehler beim Holen des Editor-Templates!'; +$lang['error']['sendData'] = 'Fehler beim Senden der Daten!'; +$lang['error']['fetchData'] = 'Fehler beim Holen der Editor-Daten!'; +$lang['error']['status'] = 'Status: '; +$lang['error']['errorMessage'] = 'Fehlermeldung: '; +$lang['error']['wrongFileType'] = 'Der Datei-Typ kann nicht verwendet werden!'; +$lang['error']['wrongImageDimension'] = 'Das ausgewählte Bild entspricht nicht den erforderlichen Mindestmaßen:' . "\n" . 'Breite: %width%' . "\n" . 'Höhe: %height%'; \ No newline at end of file diff --git a/templates/editorPageElements.html b/templates/editorPageElements.html new file mode 100644 index 0000000..d95329e --- /dev/null +++ b/templates/editorPageElements.html @@ -0,0 +1,21 @@ +
      +
      +
      + +
      +
      +
      +

      +
      +
      +

      +
      +
      +
      +
      +

      +
      +
      +
      +
      +
      \ No newline at end of file diff --git a/templates/editorTemplate.html b/templates/editorTemplate.html new file mode 100644 index 0000000..06e52c6 --- /dev/null +++ b/templates/editorTemplate.html @@ -0,0 +1,25 @@ +
      +

      These items will be permanently deleted and cannot be recovered. Are you sure?

      +
      +
      +
      +
      +
      +

      R!ST  + %%editor%% Editor +

      +
      +
      +
      +
      +
      +

      R!ST  + Editors +

      +

      + powered by +  CS internet solutions +

      +
      +
      +
      \ No newline at end of file diff --git a/templates/headline.php b/templates/headline.php index 645432c..115be46 100644 --- a/templates/headline.php +++ b/templates/headline.php @@ -11,20 +11,25 @@ header('Access-Control-Allow-Origin: *'); $includeFile = dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php'; if (file_exists(dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php')) { -$includeFile = dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php'; + $includeFile = dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php'; } include_once($includeFile); ?> -
      - - - - - - -
      - -
      -
      \ No newline at end of file +
      +
      + + +
      +

      + +
       
      +
      +
      + + +
      +
      +
      +
      \ No newline at end of file diff --git a/templates/imagetext.php b/templates/imagetext.php new file mode 100644 index 0000000..6357ae1 --- /dev/null +++ b/templates/imagetext.php @@ -0,0 +1,91 @@ + +
      +
      +
      +
      +
      + + + + + + + + + + +
      + +
      +
      + +
      +
      +
       
      +
      + + +
      +
      +
      +
      +
      +
      +
      +
      + +
      +
       
      +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
       
      + + +
      +
      +
      +
      \ No newline at end of file diff --git a/templates/keyvisual.php b/templates/keyvisual.php index 880a123..39e414a 100644 --- a/templates/keyvisual.php +++ b/templates/keyvisual.php @@ -2,7 +2,7 @@ /** * Created by CS medien- & kommunikationssysteme. * @author Christian Steinle - * @date 09.09.2016 + * @date 17.12.2016 * * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de) */ @@ -17,89 +17,106 @@ if (file_exists(dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php')) include_once($includeFile); ?> -
      - - - - - - - - - - - - - - - - - - -
      -
      -
      -
        -
        -
        -

        -

        - -
         
        -
        -
        -

        -

        - -
        - - +
        + +
        +
        +

        +
        + + + + + + + + + + +
        +
        +
        + +
        + + +
        +
        +
        + +
        +
        -
         
        -
        -

        -

        - -
        - - +
        +
        +
        +
        +
        +
        +
        +
        -
         
        -
        -
        -

        -


        -
        - - -
         
        +
         
        +
        +
        +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        +
        +
        + +
        + +
        +
        +
        + +
        + +
        +
        + +
        + +
        +
         
        + +
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        -
        - - -
        -
        -
        -
        -
        - - -
        -
        -
        - \ No newline at end of file + +
        \ No newline at end of file diff --git a/templates/navigation.php b/templates/navigation.php new file mode 100644 index 0000000..cabd383 --- /dev/null +++ b/templates/navigation.php @@ -0,0 +1,173 @@ + +
        +
        +
        +
        +
         
        +
        +

        +
        +
        +
        +
        +

        +
        +
        + + + + + +
        +
        +
        +
        +
        + +
        +
        +
        +
        +
        +

        + + +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        + +
        + + +
        +
        +
        +
        + + +
        +
        +
        +
        +

        +

         
        + + +
        +
        +
        +
        + + +
        +
        +
        +
        +

        +

         
        + + + + +
        +
        +
        +

        + +
        +
        +
        +
        + + +
        +
        +
        +
        +

        +

         
        + + + + +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        +
        + + +
        +
        +
        +
        +

        +

         
        + + + + +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        +
        + + +
        +
        +
        +
        +
        +
        +
        \ No newline at end of file diff --git a/templates/struktur.php b/templates/struktur.php deleted file mode 100644 index 700479d..0000000 --- a/templates/struktur.php +++ /dev/null @@ -1,127 +0,0 @@ - -
        - - - - - - -
        - -
        - \ No newline at end of file diff --git a/templates/subline.php b/templates/subline.php index 8113267..ec30415 100644 --- a/templates/subline.php +++ b/templates/subline.php @@ -17,14 +17,18 @@ if (file_exists(dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php')) include_once($includeFile); ?> -
        - - - - - - -
        - -
        -
        \ No newline at end of file +
        +
        + + +
         
        + +
        +
        +
        + + +
        +
        +
        +
        \ No newline at end of file diff --git a/templates/text.php b/templates/text.php index c6f31ff..ee42235 100644 --- a/templates/text.php +++ b/templates/text.php @@ -2,11 +2,10 @@ /** * Created by CS medien- & kommunikationssysteme. * @author Christian Steinle - * @date 09.09.2016 + * @date 12.10.2016 * * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de) */ - header('Access-Control-Allow-Origin: *'); $includeFile = dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php'; @@ -18,39 +17,18 @@ if (file_exists(dirname(__DIR__) . '/lang/lang-' . $_POST['lang'] . '.php')) include_once($includeFile); ?> -
        - - - - - - -
        - - -
        - -
        \ No newline at end of file +
        +
        + + +
         
        + +
        +
        +
        + + +
        +
        +
        +
        \ No newline at end of file