Changeset 32803 for main/trunk
- Timestamp:
- 2019-02-22T19:11:39+13:00 (5 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
r32798 r32803 37 37 MapEditor.prototype.initMapEditorControls = function () { 38 38 var that = this; 39 console.log(this.id); 39 40 40 41 41 var draggableCB = document.querySelector("input[name=draggableCB]"); … … 60 60 var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id); 61 61 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 62 thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;62 thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100; 63 63 64 64 thicknessSlider.oninput = function () { 65 65 that.shapeSpecsChangeMD(); 66 thicknessSliderOutput.innerHTML = this.value / 20;66 thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100; 67 67 that.thicknessValue = this.value / 20; 68 68 that.polyOptions.strokeWeight = that.thicknessValue; … … 73 73 var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 74 74 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 75 opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) / 100;76 75 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value); 76 77 77 opacitySlider.oninput = function () { 78 78 that.shapeSpecsChangeMD(); 79 opacitySliderOutput.innerHTML = "% " + this.value;79 opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100; 80 80 that.opacityValue = this.value / 100; 81 81 that.polyOptions.fillOpacity = that.opacityValue; … … 107 107 //do not write any code here in this function 108 108 } 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 109 138 } 110 139 … … 151 180 152 181 MapEditor.prototype.shapeSpecsChangeMD = function () { 153 console.log(this.selectedShapes);154 155 182 if (this.selectedShapes.length > 0) { 156 183 this.mapEditorHistory.historyOverlayPush(); … … 313 340 }); 314 341 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))) { 320 356 that.mapEditorHistory.redo(); 321 357 } 322 if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {358 else if (keyCode == 'z' && (event.ctrlKey || event.metaKey)) { 323 359 if (that.shiftKeyPressed == false) { 324 360 that.mapEditorHistory.undo(); 325 361 } 326 362 } 327 if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {363 else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) { 328 364 event.preventDefault(); 329 365 that.drawingManager.setDrawingMode(null); … … 331 367 332 368 } 333 if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {369 else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) { 334 370 event.preventDefault(); 335 371 that.deselectAll(); 336 372 } 337 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {373 else if (keyCode == '0' || keyCode == '`') { 338 374 339 375 that.drawingManager.setDrawingMode(null); 340 } else if ( event.code == 'Digit1') {376 } else if (keyCode == '1') { 341 377 that.drawingManager.setDrawingMode('marker'); 342 } else if ( event.code == 'Digit2') {378 } else if (keyCode == '2') { 343 379 that.drawingManager.setDrawingMode('circle'); 344 } else if ( event.code == 'Digit3') {380 } else if (keyCode == '3') { 345 381 that.drawingManager.setDrawingMode('polygon'); 346 } else if ( event.code == 'Digit4') {382 } else if (keyCode == '4') { 347 383 that.drawingManager.setDrawingMode('polyline'); 348 } else if ( event.code == 'Digit5') {384 } else if (keyCode == '5') { 349 385 that.drawingManager.setDrawingMode('rectangle'); 350 } else if (event.code == 'KeyQ') { 386 } else if (keyCode == 's') { 387 that.saveToArchives(); 388 } else if (keyCode == 'q') { 351 389 that.printHistory(); 352 390 } 353 // console.log( event.code);391 // console.log(keyCode); 354 392 }); 355 393 … … 364 402 365 403 //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') { 368 406 that.shiftKeyPressed = true; 369 407 … … 373 411 374 412 //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') { 377 415 that.shiftKeyPressed = false; 378 416 } … … 381 419 382 420 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 383 442 } 384 443 … … 583 642 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 584 643 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; 586 645 587 646 //Update the opacity slider and value on the settings menu 588 647 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; 591 650 592 651 if (this.drawingManager.drawingMode == null) { … … 611 670 } 612 671 672 673 MapEditor.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 613 690 MapEditor.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); 617 694 //console.log(this.selectedShapes); 695 var collection = gs.cgiParams.c; 696 console.log(collection); 618 697 console.log(this.overlays); 619 620 698 var json_overlays = ShapesUtil.overlayToJSON(this.overlays); 621 699 622 700 console.log("JSON overlay:\n" + JSON.stringify(json_overlays)); 623 701 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 709 MapEditor.prototype.LOAD = function (json_str) { 710 this.mapEditorHistory.historyOverlayPush(); 711 712 var map_editor = Object.values(gsmap_store)[0]; 630 713 var new_overlays = ShapesUtil.JSONToOverlays(json_str); 631 632 714 for (var i=0; i<map_editor.overlays.length; i++) { 633 715 map_editor.overlays[i].setMap(null); … … 639 721 map_editor.overlays[i].setMap(map_editor.map); 640 722 } 723 724 this.mapEditorHistory.presentOverlayPush(); 641 725 642 726 }
Note:
See TracChangeset
for help on using the changeset viewer.