Changeset 32803

Show
Ignore:
Timestamp:
22.02.2019 19:11:39 (8 months 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.

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js

    r32798 r32803  
    3737MapEditor.prototype.initMapEditorControls = function () { 
    3838    var that = this; 
    39     console.log(this.id); 
     39 
    4040 
    4141    var draggableCB = document.querySelector("input[name=draggableCB]"); 
     
    6060    var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id); 
    6161    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 
    62     thicknessSliderOutput.innerHTML = thicknessSlider.value / 20; 
     62    thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100; 
    6363 
    6464    thicknessSlider.oninput = function () { 
    6565        that.shapeSpecsChangeMD(); 
    66         thicknessSliderOutput.innerHTML = this.value / 20; 
     66        thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100; 
    6767        that.thicknessValue = this.value / 20; 
    6868        that.polyOptions.strokeWeight = that.thicknessValue; 
     
    7373    var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 
    7474    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 
    75     opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) / 100; 
    76  
     75    opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value); 
     76     
    7777    opacitySlider.oninput = function () { 
    7878        that.shapeSpecsChangeMD(); 
    79         opacitySliderOutput.innerHTML = "% " + this.value; 
     79        opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100; 
    8080        that.opacityValue = this.value / 100; 
    8181        that.polyOptions.fillOpacity = that.opacityValue; 
     
    107107        //do not write any code here in this function 
    108108    } 
     109     
     110    /* TODO: WORK IN PROGRESS 
     111    window.onbeforeunload = function (e) { 
     112        var collection = gs.cgiParams.c; 
     113        var site_name = gs.xsltParams.site_name; 
     114        var documentID = this.id; 
     115        var metadataName = "MapOverlays"; 
     116         
     117         
     118        //functions.getArchivesMetadata = function(collection, site, documentID, metadataName, metadataPosition, responseFunction); 
     119         
     120         
     121        //responseFunction = console.log() 
     122         
     123        var savedOverlays = null; 
     124        var enableMessage = that.overlays == savedOverlays; 
     125        var enableMessage = true; 
     126        var message = "Your confirmation message goes here.", 
     127        e = e || window.event; 
     128        // For IE and Firefox 
     129        if (e) { 
     130            if(enableMessage){ 
     131                e.returnValue = message; 
     132                // For Safari 
     133                return message;          
     134            } 
     135        } 
     136    }*/ 
     137     
    109138} 
    110139 
     
    151180 
    152181MapEditor.prototype.shapeSpecsChangeMD = function () { 
    153     console.log(this.selectedShapes); 
    154  
    155182    if (this.selectedShapes.length > 0) { 
    156183        this.mapEditorHistory.historyOverlayPush(); 
     
    313340    }); 
    314341 
    315     //Keyboard shortcuts         
    316     var mapAndControls = document.getElementById("map-and-controls-" + this.id); 
    317     mapAndControls.addEventListener('keydown', function () { 
    318         if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || 
    319             (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) { 
     342    //Keyboard shortcuts             
     343    var mapAndControls = $("#map-and-controls-" + this.id); 
     344     
     345    mapAndControls.keypress(function (event) {  //mapAndControls.keydown(function (event) {  
     346        // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler 
     347        //var keyCode = String.fromCharCode(event.keyCode); // for keyDown 
     348        var keyCode = String.fromCharCode(event.which); 
     349        //alert("Key pressed: " + keyCode); 
     350         
     351        if (event.keyCode == 'shiftKey') { 
     352            that.shiftKeyPressed = true; 
     353        } 
     354        else if (keyCode == 'y' && (event.ctrlKey || event.metaKey) || 
     355            (keyCode == 'z' && keyCode == 'shiftKey' && (event.ctrlKey || event.metaKey))) { 
    320356            that.mapEditorHistory.redo(); 
    321357        } 
    322         if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) { 
     358        else if (keyCode == 'z' && (event.ctrlKey || event.metaKey)) { 
    323359            if (that.shiftKeyPressed == false) { 
    324360                that.mapEditorHistory.undo(); 
    325361            } 
    326362        } 
    327         if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) { 
     363        else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) { 
    328364            event.preventDefault(); 
    329365            that.drawingManager.setDrawingMode(null); 
     
    331367 
    332368        } 
    333         if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) { 
     369        else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) { 
    334370            event.preventDefault(); 
    335371            that.deselectAll(); 
    336372        } 
    337         if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') { 
     373        else if (keyCode == '0' || keyCode == '`') { 
    338374 
    339375            that.drawingManager.setDrawingMode(null); 
    340         } else if (event.code == 'Digit1') { 
     376        } else if (keyCode == '1') { 
    341377            that.drawingManager.setDrawingMode('marker'); 
    342         } else if (event.code == 'Digit2') { 
     378        } else if (keyCode == '2') { 
    343379            that.drawingManager.setDrawingMode('circle'); 
    344         } else if (event.code == 'Digit3') { 
     380        } else if (keyCode == '3') { 
    345381            that.drawingManager.setDrawingMode('polygon'); 
    346         } else if (event.code == 'Digit4') { 
     382        } else if (keyCode == '4') { 
    347383            that.drawingManager.setDrawingMode('polyline'); 
    348         } else if (event.code == 'Digit5') { 
     384        } else if (keyCode == '5') { 
    349385            that.drawingManager.setDrawingMode('rectangle'); 
    350         } else if (event.code == 'KeyQ') { 
     386        } else if (keyCode == 's') { 
     387            that.saveToArchives();           
     388        } else if (keyCode == 'q') {             
    351389            that.printHistory(); 
    352390        } 
    353         //                          console.log(event.code); 
     391        //                          console.log(keyCode); 
    354392    }); 
    355393 
     
    364402     
    365403    //Sets shift as pressed 
    366     mapAndControls.addEventListener('keydown', function () { 
    367         if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') { 
     404    mapAndControls.keydown(function (event) { 
     405        if (event.keyCode == 'shiftKey') { 
    368406            that.shiftKeyPressed = true; 
    369407 
     
    373411 
    374412    //Sets shift as unpressed 
    375     mapAndControls.addEventListener('keyup', function () { 
    376         if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') { 
     413    mapAndControls.keyup(function (event) {      
     414        if (event.keyCode == 'shiftKey') { 
    377415            that.shiftKeyPressed = false; 
    378416        } 
     
    381419 
    382420    this.buildColorPalette(); 
     421     
     422     
     423     
     424     
     425    var collection = gs.cgiParams.c; 
     426    var site_name = gs.xsltParams.site_name; 
     427    var nodeID = this.id; // documentID, hopefully contains section ID too 
     428    var metaname = "GPS.mapOverlay"; 
     429     
     430    // collection, site, documentID, metadataName, metadataPosition, responseFunction 
     431    gs.functions.getArchivesMetadata(collection, site_name, nodeID, metaname, 0, function(responseText){ 
     432            // responseText is of type GSMetadata 
     433             
     434            // called when data has been retrieved from archives 
     435            var JSONString = responseText.getValue();            
     436            that.LOAD(JSONString); 
     437            //var json_overlays = ShapesUtil.overlayToJSON(this.overlays);   
     438        } 
     439    ); // TODO: responseFunction in setMeta call 
     440     
     441     
    383442} 
    384443 
     
    583642    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 
    584643    thicknessSliderOutput.innerHTML = thi; 
    585     document.getElementById("thicknessRange" + "-" + this.id).value = thi * 20; 
     644    document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100; 
    586645 
    587646    //Update the opacity slider and value on the settings menu 
    588647    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 
    589     opacitySliderOutput.innerHTML = "% " + opa * 100; 
    590     document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100; 
     648    opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100; 
     649    document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100; 
    591650 
    592651    if (this.drawingManager.drawingMode == null) { 
     
    611670} 
    612671 
     672 
     673MapEditor.prototype.saveToArchives = function () { 
     674    alert("Save pressed"); 
     675     
     676    var json_overlays = ShapesUtil.overlayToJSON(this.overlays); 
     677    var collection = gs.cgiParams.c; 
     678    var site_name = gs.xsltParams.site_name; 
     679    var nodeID = this.id; // documentID, hopefully contains section ID too 
     680    var metaname = "GPS.mapOverlay"; 
     681     
     682    // collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction    
     683    gs.functions.setArchivesMetadata(collection, site_name, nodeID, metaname, 0, JSON.stringify(json_overlays), null, "override", function(){ 
     684            alert("SAVED"); 
     685        } 
     686    ); 
     687} 
     688 
     689 
    613690MapEditor.prototype.printHistory = function () { 
    614     //console.log("prev", this.mapEditorHistory.prevOverlays); 
    615     //console.log("present ", this.mapEditorHistory.presentOverlays); 
    616     //console.log("undone ", this.mapEditorHistory.undoneOverlays); 
     691    console.log("prev", this.mapEditorHistory.prevOverlays); 
     692    console.log("present ", this.mapEditorHistory.presentOverlays); 
     693    console.log("undone ", this.mapEditorHistory.undoneOverlays); 
    617694    //console.log(this.selectedShapes); 
     695    var collection = gs.cgiParams.c; 
     696    console.log(collection); 
    618697    console.log(this.overlays); 
    619      
    620698    var json_overlays = ShapesUtil.overlayToJSON(this.overlays); 
    621699     
    622700    console.log("JSON overlay:\n" + JSON.stringify(json_overlays)); 
    623701     
    624 } 
    625  
    626 MapEditor.LOAD = function (json_str) { 
    627      
    628     var map_editor = Object.values(gsmap_store)[0] 
    629      
     702    /* 
     703    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"}]'); 
     704    */ 
     705      
     706} 
     707 
     708// to be called after reading back in stored JSON from archives meta 
     709MapEditor.prototype.LOAD = function (json_str) { 
     710    this.mapEditorHistory.historyOverlayPush(); 
     711     
     712    var map_editor = Object.values(gsmap_store)[0]; 
    630713    var new_overlays = ShapesUtil.JSONToOverlays(json_str); 
    631      
    632714    for (var i=0; i<map_editor.overlays.length; i++) { 
    633715        map_editor.overlays[i].setMap(null); 
     
    639721        map_editor.overlays[i].setMap(map_editor.map); 
    640722    } 
     723     
     724    this.mapEditorHistory.presentOverlayPush(); 
    641725     
    642726}