Changeset 32803

Timestamp:

2019-02-22T19:11:39+13:00 (5 years ago)

Author:

ak19

Message:

Zeddy stuff 1. saving shapes on map on S press; 2. reloading on map load (init); 3. Zeddy fixed other stuff.

File:

• main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js (modified) (13 diffs)

main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js

@@ -37 +37 @@
 MapEditor.prototype.initMapEditorControls = function () {
     var that = this;
-    console.log(this.id);
+
 
     var draggableCB = document.querySelector("input[name=draggableCB]");
@@ -60 +60 @@
     var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
     var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
-    thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
+    thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100;
 
     thicknessSlider.oninput = function () {
         that.shapeSpecsChangeMD();
-        thicknessSliderOutput.innerHTML = this.value / 20;
+        thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
         that.thicknessValue = this.value / 20;
         that.polyOptions.strokeWeight = that.thicknessValue;
@@ -73 +73 @@
     var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
     var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-    opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) / 100;
-
+    opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
+    
     opacitySlider.oninput = function () {
         that.shapeSpecsChangeMD();
-        opacitySliderOutput.innerHTML = "% " + this.value;
+        opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
         that.opacityValue = this.value / 100;
         that.polyOptions.fillOpacity = that.opacityValue;
@@ -107 +107 @@
         //do not write any code here in this function
     }
+    
+    /* TODO: WORK IN PROGRESS
+    window.onbeforeunload = function (e) {
+        var collection = gs.cgiParams.c;
+        var site_name = gs.xsltParams.site_name;
+        var documentID = this.id;
+        var metadataName = "MapOverlays";
+        
+        
+        //functions.getArchivesMetadata = function(collection, site, documentID, metadataName, metadataPosition, responseFunction);
+        
+        
+        //responseFunction = console.log()
+        
+        var savedOverlays = null;
+        var enableMessage = that.overlays == savedOverlays;
+        var enableMessage = true;
+        var message = "Your confirmation message goes here.",
+        e = e || window.event;
+        // For IE and Firefox
+        if (e) {
+            if(enableMessage){
+                e.returnValue = message;
+                // For Safari
+                return message;         
+            }
+        }
+    }*/
+    
 }
 
@@ -151 +180 @@
 
 MapEditor.prototype.shapeSpecsChangeMD = function () {
-    console.log(this.selectedShapes);
-
     if (this.selectedShapes.length > 0) {
         this.mapEditorHistory.historyOverlayPush();
@@ -313 +340 @@
     });
 
-    //Keyboard shortcuts        
-    var mapAndControls = document.getElementById("map-and-controls-" + this.id);
-    mapAndControls.addEventListener('keydown', function () {
-        if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) ||
-            (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) {
+    //Keyboard shortcuts            
+    var mapAndControls = $("#map-and-controls-" + this.id);
+    
+    mapAndControls.keypress(function (event) {  //mapAndControls.keydown(function (event) { 
+        // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler
+        //var keyCode = String.fromCharCode(event.keyCode); // for keyDown
+        var keyCode = String.fromCharCode(event.which);
+        //alert("Key pressed: " + keyCode);
+        
+        if (event.keyCode == 'shiftKey') {
+            that.shiftKeyPressed = true;
+        }
+        else if (keyCode == 'y' && (event.ctrlKey || event.metaKey) ||
+            (keyCode == 'z' && keyCode == 'shiftKey' && (event.ctrlKey || event.metaKey))) {
             that.mapEditorHistory.redo();
         }
-        if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
+        else if (keyCode == 'z' && (event.ctrlKey || event.metaKey)) {
             if (that.shiftKeyPressed == false) {
                 that.mapEditorHistory.undo();
             }
         }
-        if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {
+        else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
             that.drawingManager.setDrawingMode(null);
@@ -331 +367 @@
 
         }
-        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {
+        else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
             that.deselectAll();
         }
-        if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
+        else if (keyCode == '0' || keyCode == '`') {
 
             that.drawingManager.setDrawingMode(null);
-        } else if (event.code == 'Digit1') {
+        } else if (keyCode == '1') {
             that.drawingManager.setDrawingMode('marker');
-        } else if (event.code == 'Digit2') {
+        } else if (keyCode == '2') {
             that.drawingManager.setDrawingMode('circle');
-        } else if (event.code == 'Digit3') {
+        } else if (keyCode == '3') {
             that.drawingManager.setDrawingMode('polygon');
-        } else if (event.code == 'Digit4') {
+        } else if (keyCode == '4') {
             that.drawingManager.setDrawingMode('polyline');
-        } else if (event.code == 'Digit5') {
+        } else if (keyCode == '5') {
             that.drawingManager.setDrawingMode('rectangle');
-        } else if (event.code == 'KeyQ') {
+        } else if (keyCode == 's') {
+            that.saveToArchives();          
+        } else if (keyCode == 'q') {            
             that.printHistory();
         }
-        //                          console.log(event.code);
+        //                          console.log(keyCode);
     });
 
@@ -364 +402 @@
     
     //Sets shift as pressed
-    mapAndControls.addEventListener('keydown', function () {
-        if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+    mapAndControls.keydown(function (event) {
+        if (event.keyCode == 'shiftKey') {
             that.shiftKeyPressed = true;
 
@@ -373 +411 @@
 
     //Sets shift as unpressed
-    mapAndControls.addEventListener('keyup', function () {
-        if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+    mapAndControls.keyup(function (event) {     
+        if (event.keyCode == 'shiftKey') {
             that.shiftKeyPressed = false;
         }
@@ -381 +419 @@
 
     this.buildColorPalette();
+    
+    
+    
+    
+    var collection = gs.cgiParams.c;
+    var site_name = gs.xsltParams.site_name;
+    var nodeID = this.id; // documentID, hopefully contains section ID too
+    var metaname = "GPS.mapOverlay";
+    
+    // collection, site, documentID, metadataName, metadataPosition, responseFunction
+    gs.functions.getArchivesMetadata(collection, site_name, nodeID, metaname, 0, function(responseText){
+            // responseText is of type GSMetadata
+            
+            // called when data has been retrieved from archives
+            var JSONString = responseText.getValue();           
+            that.LOAD(JSONString);
+            //var json_overlays = ShapesUtil.overlayToJSON(this.overlays);  
+        }
+    ); // TODO: responseFunction in setMeta call
+    
+    
 }
 
@@ -583 +642 @@
     var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
     thicknessSliderOutput.innerHTML = thi;
-    document.getElementById("thicknessRange" + "-" + this.id).value = thi * 20;
+    document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;
 
     //Update the opacity slider and value on the settings menu
     var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-    opacitySliderOutput.innerHTML = "% " + opa * 100;
-    document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100;
+    opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;
+    document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
 
     if (this.drawingManager.drawingMode == null) {
@@ -611 +670 @@
 }
 
+
+MapEditor.prototype.saveToArchives = function () {
+    alert("Save pressed");
+    
+    var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
+    var collection = gs.cgiParams.c;
+    var site_name = gs.xsltParams.site_name;
+    var nodeID = this.id; // documentID, hopefully contains section ID too
+    var metaname = "GPS.mapOverlay";
+    
+    // collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction   
+    gs.functions.setArchivesMetadata(collection, site_name, nodeID, metaname, 0, JSON.stringify(json_overlays), null, "override", function(){
+            alert("SAVED");
+        }
+    );
+}
+
+
 MapEditor.prototype.printHistory = function () {
-    //console.log("prev", this.mapEditorHistory.prevOverlays);
-    //console.log("present ", this.mapEditorHistory.presentOverlays);
-    //console.log("undone ", this.mapEditorHistory.undoneOverlays);
+    console.log("prev", this.mapEditorHistory.prevOverlays);
+    console.log("present ", this.mapEditorHistory.presentOverlays);
+    console.log("undone ", this.mapEditorHistory.undoneOverlays);
     //console.log(this.selectedShapes);
+    var collection = gs.cgiParams.c;
+    console.log(collection);
     console.log(this.overlays);
-    
     var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
     
     console.log("JSON overlay:\n" + JSON.stringify(json_overlays));
     
-}
-
-MapEditor.LOAD = function (json_str) {
-    
-    var map_editor = Object.values(gsmap_store)[0]
-    
+    /*
+    this.LOAD('[{"strokeColor":"#32CD32","strokeWeight":1,"fillColor":"#32CD32","fillOpacity":0.4,"bounds":{"north":-37.78190971734986,"south":-37.787200748043546,"east":175.33850727431195,"west":175.3324991261186},"type":"rectangle"},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"bounds":{"north":-37.78550494611987,"south":-37.791270513892385,"east":175.33764896742719,"west":175.3284650837602},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.793034009483115,"south":-37.79723909833998,"east":175.3225427662553,"west":175.31498966566937},"type":"rectangle"},{"strokeColor":"#4B0082","strokeWeight":5,"fillColor":"#4B0082","fillOpacity":0.62,"bounds":{"north":-37.78991395018121,"south":-37.79737474238258,"east":175.30846653334515,"west":175.2955060993852},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.79961283312584,"south":-37.80700483276894,"east":175.3281217610063,"west":175.31241474501508},"type":"rectangle"},{"geodesic":false,"strokeColor":"#FF8C00","strokeWeight":1,"path":[{"lat":-37.77824647420985,"lng":175.31842289320844},{"lat":-37.792627052698045,"lng":175.32425938002484},{"lat":-37.79079571942646,"lng":175.31061230055707},{"lat":-37.78597977458094,"lng":175.2910429035844},{"lat":-37.78055298179892,"lng":175.29413280836957},{"lat":-37.77912838266847,"lng":175.3034883534135},{"lat":-37.77668614885508,"lng":175.30537662856},{"lat":-37.78218106147165,"lng":175.3079515492143}],"type":"polygon","fillColor":"#FF8C00","fillOpacity":0.4},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"center":{"lat":-37.7737689305036,"lng":175.33549693998134},"radius":811.9768269278177,"type":"circle"},{"position":{"lat":-37.77431167751719,"lng":175.3143825906161},"type":"marker"},{"position":{"lat":-37.782452404597294,"lng":175.3337803262118},"type":"marker"},{"geodesic":false,"strokeColor":"#4B0082","strokeOpacity":1,"strokeWeight":5,"path":[{"lat":-37.759203725669785,"lng":175.33033457820488},{"lat":-37.771688357854,"lng":175.35162058894707},{"lat":-37.79339574144619,"lng":175.3646668535955},{"lat":-37.81536797134891,"lng":175.35436717097832},{"lat":-37.819978597019684,"lng":175.32861796443535},{"lat":-37.81970739171663,"lng":175.2929123980291},{"lat":-37.806688365360884,"lng":175.26235667293145},{"lat":-37.795294834173575,"lng":175.25789347713066},{"lat":-37.78389954558992,"lng":175.2541169268377},{"lat":-37.77033143470697,"lng":175.26132670466973},{"lat":-37.760018005052494,"lng":175.27746287410332},{"lat":-37.75757514001425,"lng":175.31076518123223},{"lat":-37.759203725669785,"lng":175.33033457820488}],"type":"polyline"}]');
+    */
+     
+}
+
+// to be called after reading back in stored JSON from archives meta
+MapEditor.prototype.LOAD = function (json_str) {
+    this.mapEditorHistory.historyOverlayPush();
+    
+    var map_editor = Object.values(gsmap_store)[0];
     var new_overlays = ShapesUtil.JSONToOverlays(json_str);
-    
     for (var i=0; i<map_editor.overlays.length; i++) {
         map_editor.overlays[i].setMap(null);
@@ -639 +721 @@
         map_editor.overlays[i].setMap(map_editor.map);
     }
+    
+    this.mapEditorHistory.presentOverlayPush();
     
 }