[Mapbender-commits] r9913 - trunk/mapbender/http/plugins

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Thu Jun 14 01:38:29 PDT 2018


Author: armin11
Date: 2018-06-14 01:38:29 -0700 (Thu, 14 Jun 2018)
New Revision: 9913

Modified:
   trunk/mapbender/http/plugins/mb_metadata_layer.php
   trunk/mapbender/http/plugins/mb_metadata_layerPreview.js
   trunk/mapbender/http/plugins/mb_metadata_wmc_edit.php
Log:
Fix for handling of preview image - possibility to alter and delete previews - thanx to fa benndorf

Modified: trunk/mapbender/http/plugins/mb_metadata_layer.php
===================================================================
--- trunk/mapbender/http/plugins/mb_metadata_layer.php	2018-06-14 07:35:22 UTC (rev 9912)
+++ trunk/mapbender/http/plugins/mb_metadata_layer.php	2018-06-14 08:38:29 UTC (rev 9913)
@@ -94,12 +94,16 @@
 			</div>
 			<div id="previewTabs-2">
 				<div id="previewImgUpload">
-					<form id="previewImgForm" action='../php/mb_metadata_uploadLayerPreview.php' enctype="multipart/form-data">
+					<form id="previewImgForm" action='../php/mb_metadata_uploadLayerPreview.php' enctype="multipart/form-data" target="upload_iframe" method="POST">
+                        <input id="previewReloadButton" type="button" value="Preview neuladen">
+                        <iframe name="upload_iframe" width="220" height="220" style="border:0;padding:0"></iframe>
 						<input type="file" name="image">
-                        <span style="display:none;color:green" class="hasPreviewImage">Preview vorhanden</span>
-						<input type="submit" value="Upload">
-						<input type="hidden" name="source_id" value="source_id" >
-						<div id="upload"></div>
+                        <br>
+						<input id="previewUploadButton" type="button" value="Upload">
+                        <input id="previewDeleteButton" class="hasPreviewImage" type="button" value="Löschen">
+						<input id="previewSourceId" type="hidden" name="source_id">
+                        <input id="previewType" type="hidden" name="type">
+                        <input id="previewAction" type="hidden" name="upload_action">
 					</form>
 				</div>
 				<div id="textarea">

Modified: trunk/mapbender/http/plugins/mb_metadata_layerPreview.js
===================================================================
--- trunk/mapbender/http/plugins/mb_metadata_layerPreview.js	2018-06-14 07:35:22 UTC (rev 9912)
+++ trunk/mapbender/http/plugins/mb_metadata_layerPreview.js	2018-06-14 08:38:29 UTC (rev 9913)
@@ -142,39 +142,53 @@
 
 
 $metadataLayerPreview.bind('uploadFormReady', function(e, form) {
-    $(form).bind('submit', function() {
-        // event.preventDefault();
-        if ($('input[id="layer_id"]').val() == undefined) { // in wmc_metadata
-
-            if ($('input[id="wmc_id"]').val() !== "") {
-
-                if ($('#previewImgForm input[type=file]').val() !== "") {
-
-                    fileUpload(form, '../php/mb_metadata_uploadLayerPreview.php', 'upload', 'wmc');
-
-                }
-
-            } else {
-
-                alert('Pleaese choose a wmc before uploading an image');
-            }
+    var type;
+    
+    if ($('input[id="layer_id"]').val() == undefined) {
+        type = 'wmc';
+    } else {
+        type = 'wms';
+    }
+     
+    $('#previewUploadButton').bind('click', function (e) {
+        if (type === 'wmc' && $('input[id="wmc_id"]').val() === "") {
+            alert('Please choose a wmc before uploading an image');
+        }
+        else if (type === 'wms' && $('input[id="layer_id"]').val() === "") {
+            alert('Please choose a layer before uploading an image');
+        }
+        else if ($('#previewImgForm input[type=file]').val() !== "") {
+            fileUpload(form, '../php/mb_metadata_uploadLayerPreview.php', type, 'upload');
+        }
+    });
+    
+    $('#previewDeleteButton').bind('click', function () {
+        fileUpload(form, '../php/mb_metadata_uploadLayerPreview.php', type, 'delete');
+    });
+    
+    $('#previewReloadButton').bind('click', function () {
+        fileUpload(form, '../php/mb_metadata_uploadLayerPreview.php', type, 'getImage');
+    });
+    
+    $("iframe[name=upload_iframe]").bind("load", function () {
+        var iframe = this;
+        var body;
+        if (iframe.contentDocument) {
+            body = iframe.contentDocument.body;
+        } else if (iframe.contentWindow) {
+            body = iframe.contentWindow.document.body;
+        } else if (iframe.document) {
+            body = iframe.document.body;
+        }
+        if ($(body).find(".defaultPreview").length === 0) {
+            $("#previewImgUpload .hasPreviewImage").css('display','inline-block');
         } else {
-
-            if ($('input[id="layer_id"]').val() !== "") {
-
-                if ($('#previewImgForm input[type=file]').val() !== "") {
-
-                    fileUpload(form, '../php/mb_metadata_uploadLayerPreview.php', 'upload', 'wms');
-
-                 }
-
-            } else {
-
-                alert('Pleaese choose a layer before uploading an image');
-            }
+            $("#previewImgUpload .hasPreviewImage").css('display','none');
         }
-        return false;
+        
+        form.reset();
     });
+    
 });
 
 $metadataLayerPreview.bind('fileChange', function(e, fileInput) {
@@ -192,7 +206,6 @@
                 // check the file format
                 // if ((img.width > 200 && img.height > 200) || (img.width < 200 && img.height < 200)) {
                 if ((img.width != 200 || img.height != 200)) {
-
                     alert('Choosed image size doesn\'t fit. The image will be scaled to 200px * 200px.');
                     // fileInput.files[0] = img;
                 } else if ($('#previewImgForm input[type=file]')[0].files[0].name.split('.').pop() == 'bmp') {
@@ -204,56 +217,18 @@
 
             img.src = fr.result; // is the data URL because called with readAsDataURL
         };
-
-        fr.readAsDataURL(this.files[0]);
-
-
-
     });
 });
 
+function fileUpload(form, action_url, type, action) {
 
-
-function fileUpload(form, action_url, div_id, type) {
-    var iframe = document.createElement("iframe");
-    iframe.setAttribute("id", "upload_iframe");
-    iframe.setAttribute("name", "upload_iframe");
-    iframe.setAttribute("width", "0");
-    iframe.setAttribute("height", "0");
-    iframe.setAttribute("border", "0");
-    iframe.setAttribute("style", "width: 0; height: 0; border: none;");
-    form.parentNode.appendChild(iframe);
-    window.frames['upload_iframe'].name = "upload_iframe";
-    iframeId = document.getElementById("upload_iframe");
-    var eventHandler = function() {
-        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
-        else iframeId.removeEventListener("load", eventHandler, false);
-        if (iframeId.contentDocument) {
-            content = iframeId.contentDocument.body.innerHTML;
-        } else if (iframeId.contentWindow) {
-            content = iframeId.contentWindow.document.body.innerHTML;
-        } else if (iframeId.document) {
-            content = iframeId.document.body.innerHTML;
-        }
-        document.getElementById(div_id).innerHTML = content;
-        setTimeout('iframeId.parentNode.removeChild(iframeId)', 350);
-        $("#previewImgForm").get(0).reset();
-        $("#previewImgUpload .hasPreviewImage").css('display','inline-block');
-
-    }
-    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
-    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);
-    form.setAttribute("target", "upload_iframe");
-    form.setAttribute("action", action_url);
-    form.setAttribute("method", "post");
-    form.setAttribute("enctype", "multipart/form-data");
-    form.setAttribute("encoding", "multipart/form-data");
-    //set the layer_id
+    $("#previewAction").val(action);
+    $("#previewType").val(type);
     if (type === 'wms') {
-        $('#previewImgForm input[type=hidden]').val($('input[id="layer_id"]').val());
+        $('#previewSourceId').val($('input[id="layer_id"]').val());
     } else {
-        $('#previewImgForm input[type=hidden]').val($('input[id="wmc_id"]').val());
+        $('#previewSourceId').val($('input[id="wmc_id"]').val());
     }
+    
     form.submit();
-    document.getElementById(div_id).innerHTML = "Uploading...";
 }

Modified: trunk/mapbender/http/plugins/mb_metadata_wmc_edit.php
===================================================================
--- trunk/mapbender/http/plugins/mb_metadata_wmc_edit.php	2018-06-14 07:35:22 UTC (rev 9912)
+++ trunk/mapbender/http/plugins/mb_metadata_wmc_edit.php	2018-06-14 08:38:29 UTC (rev 9913)
@@ -67,12 +67,16 @@
 			</div>
 			<div id="previewTabs-2">
 				<div id="previewImgUpload">
-					<form id="previewImgForm" action='../php/mb_metadata_uploadLayerPreview.php' enctype="multipart/form-data">
+					<form id="previewImgForm" action='../php/mb_metadata_uploadLayerPreview.php' enctype="multipart/form-data" target="upload_iframe" method="POST">
+                        <input id="previewReloadButton" type="button" value="Preview neuladen">
+                        <iframe name="upload_iframe" width="220" height="220" style="border:0;padding:0"></iframe>
 						<input type="file" name="image">
-						<span style="display:none;color:green" class="hasPreviewImage">Vorschaubild vorhanden</span>
-						<input type="submit" value="Upload">
-						<input type="hidden" name="source_id" value="source_id" >
-						<div id="upload"></div>
+                        <br>
+						<input id="previewUploadButton" type="button" value="Upload">
+                        <input id="previewDeleteButton" class="hasPreviewImage" type="button" value="Löschen">
+						<input id="previewSourceId" type="hidden" name="source_id">
+                        <input id="previewType" type="hidden" name="type">
+                        <input id="previewAction" type="hidden" name="upload_action">
 					</form>
 				</div>
 				<div id="textarea">



More information about the Mapbender_commits mailing list