- Timestamp:
- 2019-04-30T17:20:10+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
r32851 r33042 58 58 59 59 //Update thickness 60 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 60 61 var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id); 61 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 62 thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100; 62 var thicknessValue = ((thicknessSlider.value / 20) * 100) / 100; 63 thicknessSliderOutput.innerHTML = thicknessValue.toFixed(2); 64 //console.log("Init thickness slider value: " + thicknessValue); 63 65 64 66 thicknessSlider.oninput = function () { 65 67 that.shapeSpecsChangeMD(); 66 thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100; 68 var thicknessVal = ((this.value / 20) * 100) / 100; 69 thicknessSliderOutput.innerHTML = thicknessVal.toFixed(2); 67 70 that.thicknessValue = this.value / 20; 68 71 that.shapeOptions.strokeWeight = that.thicknessValue; … … 73 76 var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 74 77 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 75 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);78 opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%"; 76 79 77 80 opacitySlider.oninput = function () { 78 81 that.shapeSpecsChangeMD(); 79 opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;82 opacitySliderOutput.innerHTML = Math.round(this.value * 100) / 100 + "%"; 80 83 that.opacityValue = this.value / 100; 81 84 that.shapeOptions.fillOpacity = that.opacityValue; … … 248 251 this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(styleControl); 249 252 253 /* 250 254 // Set the map's style to the initial value of the selector. 251 255 var styleSelector = document.getElementById('style-selector' + "-" + this.id); … … 263 267 }); 264 268 }); 269 */ 265 270 266 271 this.drawingManager = new google.maps.drawing.DrawingManager({ … … 620 625 621 626 MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) { 627 //console.log("New thickness value: " + thi); 622 628 //Update thickness slider and value on the settings menu 623 629 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 624 thicknessSliderOutput.innerHTML = thi; 630 // 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); 625 632 document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100; 626 633 627 634 //Update the opacity slider and value on the settings menu 628 635 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 629 opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;636 opacitySliderOutput.innerHTML = Math.round(opa * 100) * 100 / 100 + "%"; 630 637 document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100; 631 638 -
main/trunk/greenstone3/web/interfaces/default/style/map-editors.css
r32856 r33042 62 62 63 63 #FillColour { 64 display: inline;65 float: left; 64 /*display: inline; 65 float: left;*/ 66 66 padding-left: 10px; 67 67 } -
main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl
r33016 r33042 247 247 <div id="SecondRow"> 248 248 <div id="LineThickness"> 249 <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" /> </p> 250 <p>Value: <span id="thicknessRangeVal-{@nodeID}"></span></p> 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}" /> 253 </p> 254 <!-- <p>Value: </p> --> 251 255 </div> 252 256 253 257 <div id="ColourOpacity"> 254 <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" /> </p> 255 <p>Value: <span id="opacityRangeVal-{@nodeID}"></span></p> 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}" /> 261 </p> 262 <!-- <p>Value: </p> --> 256 263 </div> 257 264 </div> … … 262 269 </div> 263 270 </div> 271 <!-- 264 272 <div id="style-selector-control-{@nodeID}" class="map-control"> 265 273 <select id="style-selector-{@nodeID}" class="selector-control"> … … 274 282 <option value="hiding">Hide features</option> 275 283 </select> 276 </div> 284 </div> 285 --> 277 286 278 287 </div>
Note:
See TracChangeset
for help on using the changeset viewer.