diff --git a/js/editor.js b/js/editor.js index d8b60ed..7a840f2 100644 --- a/js/editor.js +++ b/js/editor.js @@ -1,3 +1,26 @@ +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(); }); @@ -11,10 +34,12 @@ var editor = new Object({ name: '', contentHtml: '', contentData: null, + preventSortStop: false, /** * jQuery-Elemente für den Editor */ + pageElement: null, titleElement: null, layerElement: null, closeElement: null, @@ -22,26 +47,66 @@ var editor = new Object({ 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.editableElement = $('[data-editable]'); 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) { @@ -51,7 +116,7 @@ var editor = new Object({ clickEvents: function () { editor.editableElement.on('click', function (event) { - if (event.target.tagName === 'A') { + if (event.target.tagName === 'A' || event.target.tagName === 'SPAN') { return true; } editor.type = event.currentTarget.dataset.editable; @@ -66,7 +131,8 @@ var editor = new Object({ editor.closeElement.click(function () { editor.close(); - navigation.close(); + navEditor.close(); + imgEditor.close(); }); editor.contentElement.on('click', '.formSubmit', function () { @@ -110,6 +176,158 @@ var editor = new Object({ 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 () { @@ -151,11 +369,19 @@ var editor = new Object({ }); }, - getEditorData: function () { + 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: editor.element, prefix: prefix, navId: navigationId}, + data: {request: 'getData', userId: userId, dataSet: requestElement, prefix: prefix, navId: navigationId}, dataType: 'json', error: function () { console.log(webserviceUrl); @@ -163,7 +389,6 @@ var editor = new Object({ }, success: function (data) { editor.contentData = data; - console.log(data); editor.fillHtml(); } }); @@ -178,10 +403,13 @@ var editor = new Object({ if (editor.type === 'spielbericht') { editor.fillSpielBericht(); } - - if (editor.type === 'struktur') { - navigation.setData(editor.contentData); - navigation.fillData(); + else if (editor.type === 'keyvisual') { + imgEditor.setData(editor.contentData); + //editor.fillStandard(); + } + else if (editor.type === 'struktur') { + navEditor.setData(editor.contentData); + navEditor.fillData(); } else { editor.fillStandard(); @@ -203,7 +431,6 @@ var editor = new Object({ }, fillStandard: function () { - $.each(editor.contentData, function (key, value) { var input = $('#' + key, editor.contentElement); if (input.length == 0) { @@ -309,7 +536,7 @@ var editor = new Object({ } }); -navigation = new Object({ +var navEditor = new Object({ navData: null, navPath: [], structureHtml: '', @@ -328,62 +555,62 @@ navigation = new Object({ moveChooserElement: null, setData: function (navigationData) { - navigation.navData = navigationData.navigation; - navigation.navPath = navigationData.navPath; - navigation.init(); + navEditor.navData = navigationData.navigation; + navEditor.navPath = navigationData.navPath; + navEditor.init(); }, init: function () { - navigation.initElements(); - navigation.clickEvents(); + navEditor.initElements(); + navEditor.clickEvents(); }, initElements: function () { - navigation.structureElement = $('#struktur'); - navigation.navPointElement = $('#navPoint'); - navigation.breadCrumbElement = $('#breadCrumb'); - navigation.showActionElement = $('#showAction'); - navigation.templateElement = $('#actionTemplates'); - navigation.moveChooserElement = $('#otherMain_box'); - navigation.actionChooserElement = $('.actionChooser', navigation.templateElement); + 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 () { - navigation.structureElement.on('click', 'li.open > span', function () { + navEditor.structureElement.on('click', 'li.open > span', function () { var parent = $(this).parent('li'); parent.removeClass('open'); parent.addClass('navclose'); }); - navigation.structureElement.on('click', 'li.navclose > span', function () { + navEditor.structureElement.on('click', 'li.navclose > span', function () { var parent = $(this).parent('li'); parent.removeClass('navclose'); parent.addClass('open'); }); - navigation.navPointElement.on('click', 'li.open > span', function () { + navEditor.navPointElement.on('click', 'li.open > span', function () { var parent = $(this).parent('li'); parent.removeClass('open'); parent.addClass('navclose'); }); - navigation.navPointElement.on('click', 'li.navclose > span', function () { + navEditor.navPointElement.on('click', 'li.navclose > span', function () { var parent = $(this).parent('li'); parent.removeClass('navclose'); parent.addClass('open'); }); - navigation.structureElement.on('click', 'li.editable', function (event) { + navEditor.structureElement.on('click', 'li.editable', function (event) { if (this != event.target) { return true; } - navigation.chosenNavStart = $(this).data('navstart'); - navigation.chosenNavId = $(this).data('navid'); - navigation.makeBreadCrumb(this); - navigation.fillEditArea(); + navEditor.chosenNavStart = $(this).data('navstart'); + navEditor.chosenNavId = $(this).data('navid'); + navEditor.makeBreadCrumb(this); + navEditor.fillEditArea(); }); - navigation.navPointElement.on('click', 'li.editable', function (event) { + navEditor.navPointElement.on('click', 'li.editable', function (event) { if (this != event.target) { return true; } @@ -391,66 +618,75 @@ navigation = new Object({ $('#parentNavName', editor.formElement).val($(this).context.childNodes[1].textContent); }); - navigation.showActionElement.on('click', '[data-show]', function () { + navEditor.showActionElement.on('click', '[data-show]', function () { var action = $(this).data('show'); - navigation.showActionElement.html($('.action' + action, navigation.templateElement).clone()); + 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 () { - navigation.makeHtml(0); - $(navigation.structureElement, editor.contentElement).html(navigation.structureHtml); - navigation.moveHtml = ''; - navigation.moveChooserElement.html(navigation.moveHtml); - navigation.fillEditArea(); + navEditor.makeHtml(0); + $(navEditor.structureElement, editor.contentElement).html(navEditor.structureHtml); + navEditor.moveHtml = ''; + navEditor.moveChooserElement.html(navEditor.moveHtml); + navEditor.fillEditArea(); }, makeHtml: function (navStart) { - var actualNavStartElements = navigation.navData['navStart_' + navStart]; - navigation.structureHtml += ''; }, makeBreadCrumb: function (element) { - navigation.breadCrumb = ' > ' + $(element).context.childNodes[1].textContent; + navEditor.breadCrumb = ' > ' + $(element).context.childNodes[1].textContent; $.each($(element).parents('li'), function () { - navigation.breadCrumb = ' > ' + ($(this).context.childNodes[1].textContent) + navigation.breadCrumb; + navEditor.breadCrumb = ' > ' + ($(this).context.childNodes[1].textContent) + navEditor.breadCrumb; }); }, fillEditArea: function () { - navigation.breadCrumbElement.html(navigation.breadCrumb); - navigation.chosenData = navigation.navData['navStart_' + navigation.chosenNavStart]['navId_' + navigation.chosenNavId]; + navEditor.breadCrumbElement.html(navEditor.breadCrumb); + navEditor.chosenData = navEditor.navData['navStart_' + navEditor.chosenNavStart]['navId_' + navEditor.chosenNavId]; - var activeElement = $('span[data-show="Activate"]', navigation.actionChooserElement); - var deActiveElement = $('span[data-show="Deactivate"]', navigation.actionChooserElement); - if (navigation.chosenData[prefix + '_navActive'] === 'Y') { + 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(); @@ -464,11 +700,11 @@ navigation = new Object({ } editor.fillSpecial(); - navigation.fillSpecialData(); + navEditor.fillSpecialData(); - navigation.showActionElement.html(navigation.actionChooserElement.clone()); + navEditor.showActionElement.html(navEditor.actionChooserElement.clone()); - $.each(navigation.chosenData, function (key, value) { + $.each(navEditor.chosenData, function (key, value) { $('#' + key.replace(prefix + '_', ''), editor.formElement).val(value); /** * In den einzelnen Aktions-Templates suchen @@ -479,11 +715,12 @@ navigation = new Object({ }); - navigation.navPointElement.show(); + navEditor.navPointElement.show(); }, fillSpecialData: function () { - navigation.fillPageTypes(); + navEditor.fillPageTypes(); + navEditor.fillSortData(); }, fillPageTypes: function () { @@ -496,24 +733,551 @@ navigation = new Object({ $('.navigationType').html(optionHtml); }, - close: function () { - navigation.structureHtml = ''; - navigation.navData = null; - navigation.navPath = []; - navigation.structureHtml = ''; - navigation.moveHtml = ''; - navigation.breadCrumb = ''; - navigation.chosenNavStart = 0; - navigation.chosenNavId = 0; - navigation.chosenData = null; + fillSortData: function () { + var navPoints = navEditor.navData['navStart_' + navEditor.chosenNavStart]; + var button = $('.checkSort'); + var navSort = $('.navSort'); - navigation.structureElement = null; - navigation.navPointElement = null; - navigation.breadCrumbElement = null; - navigation.showActionElement = null; - navigation.templateElement = null; - navigation.actionChooserElement = null; - navigation.moveChooserElement = null; + 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.structureHtml = ''; + 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 () { + imgEditor.enableDelete(); + }); + 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); + + $.each(imgEditor.imgIDs, function (key, value) { + imgEditor.imgThumbElement.append('
  •  
    • '); + }); + + if (imgEditor.imgCount === 0 || imgEditor.imgData[imgEditor.imgIDs[0]].hasSlider === 'Y') { + imgEditor.sortBoxElement.append(''); + } + }, + + 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); + (imgID === -1) ? imgEditor.dataSetElement.val(editor.type + '_' + imgEditor.imgIDs[0]) : 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), + 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(); + + $('input', '.editFields').prop('disabled', false); + $('.editFields').show(); + }, + + enableDelete: function () { + imgEditor.deleteActive = true; + imgEditor.disableEdit(); + imgEditor.disableUpload(); + imgEditor.disableSorting(); + + $('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(); + + $('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; + + 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 () { + $(this).append(' '); + $('.sort_handle', this).remove(); + }); + } + + $('input', '.sortFields').prop('disabled', true); + $('.sortFields').hide(); + $('#sortSave').hide(); + }, + + close: function () { + imgEditor.isFirst = true; + imgEditor.imgCount = 1; + imgEditor.imgIDs = []; + imgEditor.imgData = {}; + imgEditor.imgPath = ''; + imgEditor.imgTypes = []; + imgEditor.maxDimension = {}; + imgEditor.imgDummy = ''; + imgEditor.imgDummyExtension = ''; + imgEditor.imgDimension = {}; + imgEditor.imgOrigDimension = {}; + imgEditor.thumbDimension = {}; + + imgEditor.editActive = true; + imgEditor.sortActive = false; + + imgEditor.imgThumbElement = null; + imgEditor.dataSetElement = null; + imgEditor.imgSliderElement = null; + imgEditor.sortBoxElement = null; + imgEditor.sortButtonElement = null; + imgEditor.sortCancelElement = null; + imgEditor.deleteCancelElement = null; + imgEditor.uploadCancelElement = 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; } diff --git a/lang/lang-de.php b/lang/lang-de.php index 3749251..019554b 100644 --- a/lang/lang-de.php +++ b/lang/lang-de.php @@ -7,15 +7,10 @@ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de) */ - -$lang['headline']['label'] = ''; -$lang['headline']['input'] = ''; - -$lang['subline']['label'] = ''; -$lang['subline']['input'] = ''; - -$lang['text']['label']['content'] = ''; -$lang['text']['input']['content'] = ''; +$lang['newContent']['title'] = 'Neue Elemente'; +$lang['newContent']['text'] = 'Text'; +$lang['newContent']['subline'] = 'Überschrift'; +$lang['newContent']['textImage'] = 'Text + Bild'; $lang['spielbericht']['headline'] = 'Überschrift'; $lang['spielbericht']['gegner'] = 'Gegner'; @@ -59,6 +54,7 @@ $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:'; @@ -69,10 +65,26 @@ $lang['struktur']['turnier'] = 'Turnier-Seite (mit mehreren Spielberichten)'; $lang['struktur']['widget'] = 'Widget (z.B. Tabelle)'; - $lang['widget']['wettbewerb'] = 'Wettbewerbs-ID:'; +$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']['imageName'] = 'Bildname'; +$lang['image']['imageTitle'] = 'Bildtitel'; +$lang['image']['imageType'] = 'Keyvisual-Typ'; +$lang['image']['imageSingle'] = 'Einzelbild'; +$lang['image']['imageSlider'] = 'Slider'; +$lang['image']['deleteHeadLine'] = 'Löschen eines Bildes!'; +$lang['image']['deleteHint'] = 'Wollen Sie das ausgewählte Bild wirklich löschen?
    '; +$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['button']['cancel'] = 'Abbrechen'; $lang['button']['prev'] = 'Zurück'; $lang['button']['next'] = 'Weiter'; diff --git a/templates/keyvisual.php b/templates/keyvisual.php index 344504f..333a2c6 100644 --- a/templates/keyvisual.php +++ b/templates/keyvisual.php @@ -8,5 +8,95 @@ */ 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'; +} + +include_once($includeFile); + ?> -
    Keyvisual
    \ No newline at end of file +
    + + + + + + + + + + + + + + + + + + +
    +
    +
    +
      +
      +
      +

      +

      + +
       
      +
      +
      +

      +

      + + +
       
      +
      +
      +

      +

      + +
      + + +
      +
       
      +
      +
      +

      +


      +
      + + +
       
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + +
      +
      +
      +
      +
      + + +
      +
      +
      +
      \ No newline at end of file diff --git a/templates/struktur.php b/templates/struktur.php index 78f29f1..700479d 100644 --- a/templates/struktur.php +++ b/templates/struktur.php @@ -37,7 +37,7 @@ include_once($includeFile);


      -
      +



      @@ -73,16 +73,19 @@ include_once($includeFile); - -
      - Die Sortierung muss noch implementiert werden + + + +

      +
      + +
      +
      - -
      @@ -97,8 +100,6 @@ include_once($includeFile);
      - -
      @@ -114,7 +115,7 @@ include_once($includeFile);
      -

      Neuen Menü-Punkt anlegen nach folgendem Navigations-Punkt:

      +