Changeset 33042 for main/trunk/greenstone3/web/interfaces

Timestamp:

2019-04-30T17:20:10+12:00 (5 years ago)

Author:

ak19

Message:

Martin's Map Editor commits. First phase of Dr Bainbridge's requests: 1. shape colour controls are no longer 2 lines, merged into one. This was a fix to the css file. 2. Removed the themes dropdown menu. 3. Moved the thickness and opacity sliders' value display from a 2nd row to just in front of their sliders (and percent sign is now sensibly placed AFTER the number). Future commits to contain input fields for thickness and opacity sliders.

Location:

main/trunk/greenstone3/web/interfaces/default

Files:

• js/map-scripts-editor.js (modified) (5 diffs)
• style/map-editors.css (modified) (1 diff)
• transform/pages/document.xsl (modified) (3 diffs)

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

@@ -58 +58 @@
     
     //Update thickness
+    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
     var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
-    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
-    thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100;
+    var thicknessValue = ((thicknessSlider.value / 20) * 100) / 100;
+    thicknessSliderOutput.innerHTML = thicknessValue.toFixed(2);
+    //console.log("Init thickness slider value: " + thicknessValue);
 
     thicknessSlider.oninput = function () {
         that.shapeSpecsChangeMD();
-        thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
+        var thicknessVal = ((this.value / 20) * 100) / 100;
+        thicknessSliderOutput.innerHTML = thicknessVal.toFixed(2);
         that.thicknessValue = this.value / 20;
         that.shapeOptions.strokeWeight = that.thicknessValue;
@@ -73 +76 @@
     var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
     var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-    opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
+    opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%";
     
     opacitySlider.oninput = function () {
         that.shapeSpecsChangeMD();
-        opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
+        opacitySliderOutput.innerHTML = Math.round(this.value * 100) / 100 + "%";
         that.opacityValue = this.value / 100;
         that.shapeOptions.fillOpacity = that.opacityValue;
@@ -248 +251 @@
     this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(styleControl);
 
+    /* 
     // Set the map's style to the initial value of the selector.
     var styleSelector = document.getElementById('style-selector' + "-" + this.id);
@@ -263 +267 @@
         });
     });
+    */
 
     this.drawingManager = new google.maps.drawing.DrawingManager({
@@ -620 +625 @@
 
 MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {
+    //console.log("New thickness value: " + thi);
     //Update thickness slider and value on the settings menu
     var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
-    thicknessSliderOutput.innerHTML = thi;
+    // update the thickness innerHTML's value to always have 2 decimal places, https://www.w3schools.com/js/js_number_methods.asp
+    thicknessSliderOutput.innerHTML = thi.toFixed(2); 
     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 = "% " + Math.round(opa * 100) * 100 / 100;
+    opacitySliderOutput.innerHTML = Math.round(opa * 100) * 100 / 100 + "%";
     document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
 

main/trunk/greenstone3/web/interfaces/default/style/map-editors.css

@@ -62 +62 @@
 
 #FillColour {
-    display: inline;
-    float: left;
+    /*display: inline;
+    float: left;*/
     padding-left: 10px;
 }

main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

@@ -247 +247 @@
                         <div id="SecondRow">
                             <div id="LineThickness">
-                                <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" /> </p>
-                                <p>Value: <span id="thicknessRangeVal-{@nodeID}"></span></p>
+                                <p>Line thickness:
+                                    <span id="thicknessRangeVal-{@nodeID}">1.00</span>
+                                    <!--<input id="thicknessRangeVal-{@nodeID}" type="number" min="1.00" max="5.00" value="1.00" />-->
+                                    <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" />
+                                </p>
+                                <!-- <p>Value: </p> -->
                             </div>  
                             
                             <div id="ColourOpacity">
-                                <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" /> </p>
-                                <p>Value: <span id="opacityRangeVal-{@nodeID}"></span></p>
+                                <p>Colour opacity: 
+                                    <span id="opacityRangeVal-{@nodeID}">1.0</span>
+                                    <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" />
+                                </p>
+                                <!-- <p>Value: </p> -->
                             </div>
                         </div>
@@ -262 +269 @@
                         </div>
                     </div>
+                    <!--
                     <div id="style-selector-control-{@nodeID}"  class="map-control">
                       <select id="style-selector-{@nodeID}" class="selector-control">
@@ -274 +282 @@
                         <option value="hiding">Hide features</option>
                       </select>
-                    </div>      
+                    </div>  
+                    -->
                 
                 </div>