Changeset 33042


Ignore:
Timestamp:
2019-04-30T17:20:10+12:00 (2 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:
3 edited

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>
Note: See TracChangeset for help on using the changeset viewer.