Changeset 33042

Show
Ignore:
Timestamp:
30.04.2019 17:20:10 (3 months 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:
3 modified

Legend:

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

    r32851 r33042  
    5858     
    5959    //Update thickness 
     60    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 
    6061    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); 
    6365 
    6466    thicknessSlider.oninput = function () { 
    6567        that.shapeSpecsChangeMD(); 
    66         thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100; 
     68        var thicknessVal = ((this.value / 20) * 100) / 100; 
     69        thicknessSliderOutput.innerHTML = thicknessVal.toFixed(2); 
    6770        that.thicknessValue = this.value / 20; 
    6871        that.shapeOptions.strokeWeight = that.thicknessValue; 
     
    7376    var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 
    7477    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 
    75     opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value); 
     78    opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%"; 
    7679     
    7780    opacitySlider.oninput = function () { 
    7881        that.shapeSpecsChangeMD(); 
    79         opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100; 
     82        opacitySliderOutput.innerHTML = Math.round(this.value * 100) / 100 + "%"; 
    8083        that.opacityValue = this.value / 100; 
    8184        that.shapeOptions.fillOpacity = that.opacityValue; 
     
    248251    this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(styleControl); 
    249252 
     253    /*  
    250254    // Set the map's style to the initial value of the selector. 
    251255    var styleSelector = document.getElementById('style-selector' + "-" + this.id); 
     
    263267        }); 
    264268    }); 
     269    */ 
    265270 
    266271    this.drawingManager = new google.maps.drawing.DrawingManager({ 
     
    620625 
    621626MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) { 
     627    //console.log("New thickness value: " + thi); 
    622628    //Update thickness slider and value on the settings menu 
    623629    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);  
    625632    document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100; 
    626633 
    627634    //Update the opacity slider and value on the settings menu 
    628635    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 + "%"; 
    630637    document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100; 
    631638 
  • main/trunk/greenstone3/web/interfaces/default/style/map-editors.css

    r32856 r33042  
    6262 
    6363#FillColour { 
    64     display: inline; 
    65     float: left; 
     64    /*display: inline; 
     65    float: left;*/ 
    6666    padding-left: 10px; 
    6767} 
  • main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

    r33016 r33042  
    247247                        <div id="SecondRow"> 
    248248                            <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> --> 
    251255                            </div>   
    252256                             
    253257                            <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> --> 
    256263                            </div> 
    257264                        </div> 
     
    262269                        </div> 
    263270                    </div> 
     271                    <!-- 
    264272                    <div id="style-selector-control-{@nodeID}"  class="map-control"> 
    265273                      <select id="style-selector-{@nodeID}" class="selector-control"> 
     
    274282                        <option value="hiding">Hide features</option> 
    275283                      </select> 
    276                     </div>       
     284                    </div>   
     285                    --> 
    277286                 
    278287                </div>