Changeset 33061 for main/trunk/greenstone3/web/interfaces
- Timestamp:
- 2019-05-09T17:34:07+12:00 (5 years ago)
- Location:
- main/trunk/greenstone3/web/interfaces/default
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
r33042 r33061 2 2 3 3 function MapEditor(id) { 4 // TODO: investigate const, see https://www.w3schools.com/js/js_const.asp and check it will work on older browsers, 5 // https://stackoverflow.com/questions/4271566/how-do-i-know-which-version-of-javascript-im-using 6 this.MAX_THICKNESS = 5.0; 7 this.MIN_THICKNESS = 0.0; 8 9 this.MAX_OPACITY = 100.00; 10 this.MIN_OPACITY = 0.00; 11 4 12 this.id = id; 5 13 this.shiftKeyPressed = false; … … 10 18 this.colorButtons = {}; 11 19 this.thicknessValue = 1; 12 this.opacityValue = 0.4;20 this.opacityValue = 40; 13 21 this.overlays = []; 14 22 this.selectedShapes = []; … … 29 37 fillColor: '#CA4A2F', 30 38 strokeWeight: this.thicknessValue, 31 fillOpacity: this.opacityValue ,39 fillOpacity: this.opacityValue / 100, 32 40 editable: true, 33 41 geodesic: false, … … 61 69 var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id); 62 70 var thicknessValue = ((thicknessSlider.value / 20) * 100) / 100; 63 thicknessSliderOutput. innerHTML= thicknessValue.toFixed(2);71 thicknessSliderOutput.value = thicknessValue.toFixed(2); 64 72 //console.log("Init thickness slider value: " + thicknessValue); 65 73 … … 67 75 that.shapeSpecsChangeMD(); 68 76 var thicknessVal = ((this.value / 20) * 100) / 100; 69 thicknessSliderOutput. innerHTML= thicknessVal.toFixed(2);77 thicknessSliderOutput.value = thicknessVal.toFixed(2); 70 78 that.thicknessValue = this.value / 20; 71 79 that.shapeOptions.strokeWeight = that.thicknessValue; 72 80 that.setSelectedThickness(that.thicknessValue); 73 81 } 82 83 thicknessSliderOutput.oninput = function () { 84 that.shapeSpecsChangeMD(); 85 if(this.value > that.MAX_THICKNESS) this.value = that.MAX_THICKNESS; 86 if(this.value < that.MIN_THICKNESS) this.value = that.MIN_THICKNESS; 87 var thicknessVal = this.value * 20; 88 thicknessSlider.value = thicknessVal.toFixed(2); 89 that.thicknessValue = this.value; 90 that.shapeOptions.strokeWeight = that.thicknessValue; 91 that.setSelectedThickness(that.thicknessValue); 74 92 } 75 93 //Update opacity 94 // TODO: https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa 76 95 var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 77 96 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 78 opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%";97 //opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%"; 79 98 80 99 opacitySlider.oninput = function () { 81 100 that.shapeSpecsChangeMD(); 82 opacitySliderOutput. innerHTML = Math.round(this.value * 100) / 100 + "%";101 opacitySliderOutput.value = this.value; 83 102 that.opacityValue = this.value / 100; 84 103 that.shapeOptions.fillOpacity = that.opacityValue; 85 104 that.setSelectedOpacity(that.opacityValue); 86 105 } 87 106 opacitySliderOutput.oninput = function () { 107 that.shapeSpecsChangeMD(); 108 if(this.value > that.MAX_OPACITY) this.value = that.MAX_OPACITY; 109 if(this.value < that.MIN_OPACITY) this.value = that.MIN_OPACITY; 110 opacitySlider.value = this.value; 111 that.opacityValue = this.value / 100; 112 that.shapeOptions.fillOpacity = that.opacityValue; 113 that.setSelectedOpacity(that.opacityValue); 114 } 115 88 116 document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() }); 89 117 document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() }); … … 336 364 //Keyboard shortcuts 337 365 var mapAndControls = document.getElementById("map-and-controls-" + this.id); 338 339 //Sets shift as unpressed 340 mapAndControls.addEventListener('keyup', function (event) { 341 if (event.keyCode == '16') { 342 that.shiftKeyPressed = false; 343 } 344 }); 345 346 mapAndControls.addEventListener('keydown', function (event) { 347 348 // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler 349 var keyCode = String.fromCharCode(event.which); 350 // console.log("Key pressed: " + keyCode); 366 var thicknessField = document.getElementById ("thicknessRangeVal-" + this.id); 367 var opacityField = document.getElementById ("opacityRangeVal-" + this.id); 368 var openMapFunction = function() { 369 //Sets shift as unpressed 370 mapAndControls.addEventListener('keyup', function (event) { 371 if (event.keyCode == '16') { 372 that.shiftKeyPressed = false; 373 } 374 }); 351 375 352 //Sets shift as pressed 353 if (event.keyCode == '16') { 354 that.shiftKeyPressed = true; 355 } 356 else if (keyCode == 'Y' && (event.ctrlKey || event.metaKey)) { 357 that.mapEditorHistory.redo(); 358 } 359 else if (keyCode == 'Z' && (event.ctrlKey || event.metaKey) ) { 360 if (that.shiftKeyPressed == false) { 361 that.mapEditorHistory.undo(); 362 } 363 } 364 else if (keyCode == 'A' && (event.ctrlKey || event.metaKey)) { 365 event.preventDefault(); 366 that.drawingManager.setDrawingMode(null); 367 that.selectAll(); 368 } 369 else if (keyCode == 'D' && (event.ctrlKey || event.metaKey)) { 370 event.preventDefault(); 371 that.deselectAll(); 372 } 373 else if (keyCode == '0' || keyCode == 'Ã' || (keyCode == 'G'&& (event.ctrlKey || event.metaKey))) { 374 event.preventDefault(); 375 that.drawingManager.setDrawingMode(null); 376 } else if (keyCode == '1') { 377 that.drawingManager.setDrawingMode('marker'); 378 } else if (keyCode == '2') { 379 that.drawingManager.setDrawingMode('circle'); 380 } else if (keyCode == '3') { 381 that.drawingManager.setDrawingMode('polygon'); 382 } else if (keyCode == '4') { 383 that.drawingManager.setDrawingMode('polyline'); 384 } else if (keyCode == '5') { 385 that.drawingManager.setDrawingMode('rectangle'); 386 } 387 //else if (keyCode == 'S') { 388 // that.saveToArchives(); 389 //} 390 else if (keyCode == 'Q') { // for debugging information, press Q (easy to hit key) 391 that.printHistory(); 392 } 393 else if (keyCode == '.') { 394 that.deleteSelectedShapes(); 395 } 396 // console.log(keyCode); 397 }); 398 376 mapAndControls.addEventListener('keydown', function (event) { 377 378 // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler 379 var keyCode = String.fromCharCode(event.which); 380 //console.log("Key pressed: " + keyCode); 381 382 //disable keyboard shortcut within the number input field 383 var activeElement = $(document.activeElement); 384 if(activeElement.attr('type') == 'number'){ 385 //console.log('number detected') 386 return; 387 } 388 //Sets shift as pressed 389 if (event.keyCode == '16') { 390 that.shiftKeyPressed = true; 391 } 392 else if (keyCode == 'Y' && (event.ctrlKey || event.metaKey)) { 393 that.mapEditorHistory.redo(); 394 } 395 else if (keyCode == 'Z' && (event.ctrlKey || event.metaKey) ) { 396 if (that.shiftKeyPressed == false) { 397 that.mapEditorHistory.undo(); 398 } 399 } 400 else if (keyCode == 'A' && (event.ctrlKey || event.metaKey)) { 401 event.preventDefault(); 402 that.drawingManager.setDrawingMode(null); 403 that.selectAll(); 404 } 405 else if (keyCode == 'D' && (event.ctrlKey || event.metaKey)) { 406 event.preventDefault(); 407 that.deselectAll(); 408 } 409 410 else if (keyCode == '0' || keyCode == 'Ã' || (keyCode == 'G'&& (event.ctrlKey || event.metaKey))) { 411 event.preventDefault(); 412 that.drawingManager.setDrawingMode(null); 413 } else if (keyCode == '1') { 414 that.drawingManager.setDrawingMode('marker'); 415 } else if (keyCode == '2') { 416 that.drawingManager.setDrawingMode('circle'); 417 } else if (keyCode == '3') { 418 that.drawingManager.setDrawingMode('polygon'); 419 } else if (keyCode == '4') { 420 that.drawingManager.setDrawingMode('polyline'); 421 } else if (keyCode == '5') { 422 that.drawingManager.setDrawingMode('rectangle'); 423 } 424 425 //else if (keyCode == 'S') { 426 // that.saveToArchives(); 427 //} 428 else if (keyCode == 'Q') { // for debugging information, press Q (easy to hit key) 429 that.printHistory(); 430 } 431 else if (keyCode == '.') { 432 that.deleteSelectedShapes(); 433 } 434 // console.log(keyCode); 435 }); 436 }; 437 438 openMapFunction(); 399 439 400 440 this.buildColorPalette(); 401 402 403 441 404 442 … … 629 667 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 630 668 // update the thickness innerHTML's value to always have 2 decimal places, https://www.w3schools.com/js/js_number_methods.asp 631 thicknessSliderOutput.innerHTML = thi.toFixed(2); 669 //console.log("thi =" + thi + " type of = " + typeof thi ); 670 thi = parseFloat(thi); //Ensure the thi is a number 671 thicknessSliderOutput.value = thi.toFixed(2); 632 672 document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100; 633 673 634 674 //Update the opacity slider and value on the settings menu 635 675 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 636 opacitySliderOutput. innerHTML = Math.round(opa * 100) * 100 / 100 + "%";637 document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 /100;676 opacitySliderOutput.value = opa * 100; 677 document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100; 638 678 639 679 if (this.drawingManager.drawingMode == null) { -
main/trunk/greenstone3/web/interfaces/default/style/map-editors.css
r33042 r33061 38 38 39 39 } 40 /*hide the input number spinner in Chrome 41 input[type=number]::-webkit-inner-spin-button, 42 input[type=number]::-webkit-outer-spin-button { 43 -webkit-appearance: none; 44 margin: 0; 45 } 46 */ 40 47 41 48 #LineThickness{ … … 47 54 } 48 55 56 input[type=range]{ 57 height: 10px; 58 } 59 60 /*make '%' display within the input field*/ 61 .valueChanger { 62 height: 21px; 63 width: 70px; 64 position: relative; 65 display: inline-block; 66 } 67 68 #opacityRangeVal { 69 width: 70%; 70 height: 100%; 71 padding-right: 10%; 72 } 73 74 .unit { 75 display: block; 76 width: 45px; 77 height: 21px; 78 line-height: 21px; 79 position: absolute; 80 top: 0px; 81 right: 0px; 82 } 83 84 .valueInput{ 85 width:55px; 86 } 87 49 88 #ColourOpacity{ 50 display: inline-block;51 89 float: left; 52 90 margin-left: 3px; 53 91 margin-right: 3px; 54 92 } 93 94 /* 95 #opacityRangeVal{ 96 width:250px; 97 max-width:250px; 98 } 99 */ 55 100 56 101 #buttons3{ -
main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl
r33042 r33061 247 247 <div id="SecondRow"> 248 248 <div id="LineThickness"> 249 <p>Line thickness: 250 <span id="thicknessRangeVal-{@nodeID}">1.00</span> 251 <!--<input id="thicknessRangeVal-{@nodeID}" type="number" min="1.00" max="5.00" value="1.00" />--> 252 <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" /> 249 <p style="display:inline-block">Line thickness: 250 <!-- <span id="thicknessRangeVal-{@nodeID}">1.00</span> --> 251 <div class="valueChanger"> 252 <input type="number" class="valueInput" id="thicknessRangeVal-{@nodeID}" min="1.00" max="5.00" value="1.00" step="0.01" /> 253 <span class="unit" style="display:none">%</span> 254 <!-- % sign added above, to keep the thickness field width equal to that of the opacity field --> 255 <!-- setting the step attribute to 0.01 means we allow 2 decimal places 256 (then Firefox won't make the box red/invalid for values with 2 dec places) 257 --> 258 </div> 259 <input type="range" size="2" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" /> 253 260 </p> 254 261 <!-- <p>Value: </p> --> … … 256 263 257 264 <div id="ColourOpacity"> 258 <p>Colour opacity: 259 <span id="opacityRangeVal-{@nodeID}">1.0</span> 260 <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" /> 265 <p style="display:inline-block">Colour opacity: 266 <!-- <span id="opacityRangeVal-{@nodeID}">1.0</span> --> 267 <div class="valueChanger"> 268 <input type="number" class="valueInput" id="opacityRangeVal-{@nodeID}" min="0.0" max="100.0" value="40" /> 269 <span class="unit">%</span> 270 </div> 271 <input type="range" min="0" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" /> 261 272 </p> 262 273 <!-- <p>Value: </p> -->
Note:
See TracChangeset
for help on using the changeset viewer.