Abschluss: Wiederherstellung der Editoren-Technik (Behandlung von Bildern im Text), Korrektur Bilderhandling beim Löschen eines Keyvisual-Slider Elementes

js/editor.js

@@ -119,10 +119,13 @@ var editor = new Object({
             if (event.target.tagName === 'A' || event.target.tagName === 'SPAN') {
                 return true;
             }
-            editor.type = event.currentTarget.dataset.editable;
+
-            if (editor.type === 'textimage') {
+            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');
@@ -335,11 +338,15 @@ var editor = new Object({
         editor.name = '';
         editor.contentHtml = '';
         editor.contentData = null;
-        editor.formElement = null;
+        editor.preventSortStop = false;
+
+        editor.element = null;
+
         editor.titleElement.html(editor.title);
         editor.layerElement.hide();
         editor.contentElement.html('');
         editor.waitingElement.hide();
+
     },
 
     callEditor: function () {
@@ -385,6 +392,7 @@ var editor = new Object({
             dataType: 'json',
             error: function () {
                 console.log(webserviceUrl);
+                console.log(editor.type);
                 alert('Fehler beim Holen der Editor-Daten!');
             },
             success: function (data) {
@@ -396,7 +404,7 @@ var editor = new Object({
 
     fillHtml: function () {
         if (editor.contentHtml === '' || editor.contentData === null) {
-            window.setTimeout(editor.fillHtml, 100);
+            window.setTimeout(editor.fillHtml, 50);
             return;
         }
 
@@ -404,9 +412,8 @@ var editor = new Object({
             editor.fillSpielBericht();
             editor.fillStandard();
         }
-        else if (editor.type === 'keyvisual') {
+        else if (editor.type === 'keyvisual' || editor.type === 'image') {
             imgEditor.setData(editor.contentData);
-            //editor.fillStandard();
         }
         else if (editor.type === 'struktur') {
             navEditor.setData(editor.contentData);
@@ -755,7 +762,6 @@ var navEditor = new Object({
     },
 
     close: function () {
-        navEditor.structureHtml = '';
         navEditor.navData = null;
         navEditor.navPath = [];
         navEditor.structureHtml = '';
@@ -886,8 +892,8 @@ var imgEditor = new Object({
         imgEditor.sortCancelElement.click(function () {
             imgEditor.enableEdit();
         });
-        imgEditor.sortBoxElement.on('click', '.del_handle', function () {
+        imgEditor.sortBoxElement.on('click', '.del_handle', function (event) {
-            imgEditor.enableDelete();
+            imgEditor.enableDelete(event);
         });
         imgEditor.deleteCancelElement.click(function () {
             imgEditor.enableEdit();
@@ -933,12 +939,23 @@ var imgEditor = new Object({
 
         $('#navId', editor.contentElement).val(navigationId);
 
-        $.each(imgEditor.imgIDs, function (key, value) {
+        if (editor.type === 'keyvisual') {
-            imgEditor.imgThumbElement.append('<li id="sort_' + value + '"><img src="' + imgEditor.imgPath + imgEditor.imgData[value].imgName + imgEditor.thumbSuffix + '.' + imgEditor.imgData[value].imgExtension + '" onclick="imgEditor.fillForm(' + value + ', ' + key + ');"/><span class="del_handle">&nbsp;</span></li>');
+            $.each(imgEditor.imgIDs, function (key, value) {
-        });
+                if (key === 0) {
+                    imgEditor.imgThumbElement.append('<li id="sort_' + value + '"><img src="' + imgEditor.imgPath + imgEditor.imgData[value].imgName + imgEditor.thumbSuffix + '.' + imgEditor.imgData[value].imgExtension + '" onclick="imgEditor.fillForm(' + value + ', ' + key + ');"/></li>');
+                    return true;
+                }
+                imgEditor.imgThumbElement.append('<li id="sort_' + value + '"><img src="' + imgEditor.imgPath + imgEditor.imgData[value].imgName + imgEditor.thumbSuffix + '.' + imgEditor.imgData[value].imgExtension + '" onclick="imgEditor.fillForm(' + value + ', ' + key + ');"/><span class="del_handle">&nbsp;</span></li>');
+            });
 
-        if (imgEditor.imgCount === 0 || imgEditor.imgData[imgEditor.imgIDs[0]].hasSlider === 'Y') {
+            if (imgEditor.imgData[imgEditor.imgIDs[0]].hasSlider === 'Y') {
-            imgEditor.sortBoxElement.append('<img src="' + imgEditor.imgDummy.replace(imgEditor.imgDummyExtension, imgEditor.thumbSuffix + imgEditor.imgDummyExtension) + '" onclick="imgEditor.enableUpload();"/>');
+                imgEditor.sortBoxElement.append('<img src="' + imgEditor.imgDummy.replace(imgEditor.imgDummyExtension, imgEditor.thumbSuffix + imgEditor.imgDummyExtension) + '" onclick="imgEditor.enableUpload();"/>');
+            }
+        }
+        else if (editor.type === 'image') {
+            imgEditor.imgData[imgEditor.imgIDs[0]].sliderContent = '';
+            imgEditor.imgData[imgEditor.imgIDs[0]].hasSlider = 'N';
+            imgEditor.fillForm(imgEditor.imgIDs[0], 0);
         }
     },
 
@@ -1009,6 +1026,14 @@ var imgEditor = new Object({
                 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);
@@ -1072,16 +1097,22 @@ var imgEditor = new Object({
         imgEditor.disableUpload();
         imgEditor.disableSorting();
 
+        imgEditor.formActionElement.val('updateData');
+
         $('input', '.editFields').prop('disabled', false);
         $('.editFields').show();
     },
 
-    enableDelete: function () {
+    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();
     },
@@ -1096,6 +1127,8 @@ var imgEditor = new Object({
         imgEditor.disableDelete();
         imgEditor.disableSorting();
 
+        imgEditor.formActionElement.val('updateData');
+
         $('input', '.uploadFields').prop('disabled', false);
         $('.uploadFields').show();
     },
@@ -1146,6 +1179,10 @@ var imgEditor = new Object({
                     }
                     imgEditor.uploadSource = fileEvent.target.result;
 
+                    if (imgEditor.imgThumbElement.is(':ui-resizable')) {
+                        imgEditor.imgThumbElement.resizable('destroy');
+                    }
+
                     imgEditor.enableEdit();
                     imgEditor.fillForm(-1, -1);
 
@@ -1229,8 +1266,10 @@ var imgEditor = new Object({
         if (imgEditor.imgThumbElement.is(':ui-sortable')) {
             imgEditor.imgThumbElement.sortable('destroy');
 
-            $.each($('li', imgEditor.imgThumbElement), function () {
+            $.each($('li', imgEditor.imgThumbElement), function (key) {
-                $(this).append('<span class="del_handle">&nbsp;</span>');
+                if (key > 0) {
+                    $(this).append('<span class="del_handle">&nbsp;</span>');
+                }
                 $('.sort_handle', this).remove();
             });
         }
@@ -1242,7 +1281,7 @@ var imgEditor = new Object({
 
     close: function () {
         imgEditor.isFirst = true;
-        imgEditor.imgCount = 1;
+        imgEditor.imgCount = 0;
         imgEditor.imgIDs = [];
         imgEditor.imgData = {};
         imgEditor.imgPath = '';
@@ -1253,9 +1292,14 @@ var imgEditor = new Object({
         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;
@@ -1264,7 +1308,6 @@ var imgEditor = new Object({
         imgEditor.sortButtonElement = null;
         imgEditor.sortCancelElement = null;
         imgEditor.deleteCancelElement = null;
-        imgEditor.uploadCancelElement = null;
         imgEditor.rightBoxElement = null;
         imgEditor.formActionElement = null;
         imgEditor.imagePlaceholder = null;
@@ -1280,6 +1323,4 @@ var imgEditor = new Object({
         imgEditor.previewWidth = null;
         imgEditor.editImage = null;
     }
-
-
 });

lang/lang-de.php

@@ -73,9 +73,11 @@ $lang['image']['editHint'] = 'Durch Klick auf ein Vorschaubild, können die Date
 $lang['image']['sort'] = 'Sortieren';
 $lang['image']['imageName'] = 'Bildname';
 $lang['image']['imageTitle'] = 'Bildtitel';
-$lang['image']['imageType'] = 'Keyvisual-Typ';
+$lang['image']['keyvisualType'] = 'Keyvisual-Typ';
+$lang['image']['imageType'] = 'Bild-Typ';
 $lang['image']['imageSingle'] = 'Einzelbild';
 $lang['image']['imageSlider'] = 'Slider';
+$lang['image']['imageMore'] = 'Weitere Galeriebilder';
 $lang['image']['deleteHeadLine'] = 'Löschen eines Bildes!';
 $lang['image']['deleteHint'] = 'Wollen Sie das ausgewählte Bild wirklich löschen?<br/>';
 $lang['image']['sortHeadLine'] = 'Speichern der Bildreihenfolge!';

templates/image.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * Created by CS medien- & kommunikationssysteme.
+ * @author Christian Steinle
+ * @date 27.09.2016
+ *
+ * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
+ */
+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);
+
+?>
+<form id="editor_form" action="" method="post">
+	<input type="hidden" name="userId" id="userId" value=""/>
+	<input type="hidden" name="prefix" id="prefix" value=""/>
+	<input type="hidden" name="navId" id="navId" value=""/>
+	<input type="hidden" name="dataSet" id="dataSet" value=""/>
+	<input type="hidden" name="request" id="request" value="updateData"/>
+
+	<input type="hidden" name="imgExtension" id="imgExtension" value=""/>
+	<input type="hidden" name="imgOrigname" id="imgOrigname" value=""/>
+	<input type="hidden" name="previewHeight" id="previewHeight" value=""/>
+	<input type="hidden" name="previewLeft" id="previewLeft" value=""/>
+	<input type="hidden" name="previewTop" id="previewTop" value=""/>
+	<input type="hidden" name="previewWidth" id="previewWidth" value=""/>
+
+	<input type="hidden" name="uploadFile" id="uploadFile" value="" disabled="disabled"/>
+
+	<input type="hidden" name="hasSlider" value="N"/>
+	<input type="hidden" name="sliderContent" value=""/>
+
+	<div>
+		<div id="imagePlaceholder">
+			<div id="imageCover">
+				<div id="coverTop"></div>
+				<div id="coverRight"></div>
+				<div id="coverBottom"></div>
+				<div id="coverLeft"></div>
+			</div>
+			<div id="imagePreview"></div>
+		</div>
+		<label for="imgName"><?php echo $lang['image']['imageName']; ?></label><input type="text" name="imgName" id="imgName" value=""/><br/>
+		<label for="imgTitle"><?php echo $lang['image']['imageTitle']; ?></label><input type="text" name="imgTitle" id="imgTitle" value=""/><br/>
+		<label for="changeUploadFile"><?php echo $lang['image']['newUpload']; ?></label><input type="file" name="changeUploadFile" id="changeUploadFile" class="uploadFile"/><br/>
+		<div class="bottom">
+			<input type="button" class="submitButton formSubmit" value="<?php echo $lang['button']['save']; ?>">
+			<input type="button" class="submitButton formCancel" value="<?php echo $lang['button']['cancel']; ?>">
+		</div>
+	</div>

templates/keyvisual.php

@@ -50,8 +50,11 @@ include_once($includeFile);
 			<div class="rightBox deleteFields box">
 				<h1><?php echo $lang['image']['deleteHeadLine']; ?></h1>
 				<p><?php echo $lang['image']['deleteHint']; ?></p>
-				<input type="button" class="submitButton" value="<?php echo $lang['button']['save']; ?>">
+				<input type="hidden" name="firstImage" id="firstImage" value=""/>
-				<input type="button" id="deleteCancel" class="submitButton" value="<?php echo $lang['button']['cancel']; ?>">
+				<div>
+					<input type="button" class="submitButton formSubmit" value="<?php echo $lang['button']['save']; ?>">
+					<input type="button" id="deleteCancel" class="submitButton" value="<?php echo $lang['button']['cancel']; ?>">
+				</div>
 				<br class="fix"/>&nbsp;<br/>
 			</div>
 			<div class="rightBox sortFields box">
@@ -87,7 +90,7 @@ include_once($includeFile);
 				<label for="imgName"><?php echo $lang['image']['imageName']; ?></label><input type="text" name="imgName" id="imgName" value=""/><br/>
 				<label for="imgTitle"><?php echo $lang['image']['imageTitle']; ?></label><input type="text" name="imgTitle" id="imgTitle" value=""/><br/>
 				<div id="imageSlider">
-					<label><?php echo $lang['image']['imageType']; ?></label>
+					<label><?php echo $lang['image']['keyvisualType']; ?></label>
 					<input type="radio" name="hasSlider" id="hasSlider_N" value="N"/><label for="hasSlider_N"><?php echo $lang['image']['imageSingle']; ?></label>
 					<input type="radio" name="hasSlider" id="hasSlider_Y" value="Y"/><label for="hasSlider_Y"><?php echo $lang['image']['imageSlider']; ?></label><br/>
 				</div>