Show
Ignore:
Timestamp:
09.05.2019 17:34:07 (7 months ago)
Author:
wy59
Message:

1. Phase 2: Changed the thickness and opacity label display (which were next to their slider controls) into input fields. Editing the input fields now also updates the slider controls. 2. Some bug fixes, for example can now use numeric and regulare keypad's numbers when focus is on thickness/opacity inputs. 3. Changes to css to get the input fields looking right.

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

    r33042 r33061  
    22 
    33function 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     
    412    this.id = id; 
    513    this.shiftKeyPressed = false; 
     
    1018    this.colorButtons = {}; 
    1119    this.thicknessValue = 1; 
    12     this.opacityValue = 0.4; 
     20    this.opacityValue = 40; 
    1321    this.overlays = []; 
    1422    this.selectedShapes = []; 
     
    2937        fillColor: '#CA4A2F', 
    3038        strokeWeight: this.thicknessValue, 
    31         fillOpacity: this.opacityValue, 
     39        fillOpacity: this.opacityValue / 100, 
    3240        editable: true, 
    3341        geodesic: false, 
     
    6169    var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id); 
    6270    var thicknessValue = ((thicknessSlider.value / 20) * 100) / 100; 
    63     thicknessSliderOutput.innerHTML = thicknessValue.toFixed(2); 
     71    thicknessSliderOutput.value = thicknessValue.toFixed(2); 
    6472    //console.log("Init thickness slider value: " + thicknessValue); 
    6573 
     
    6775        that.shapeSpecsChangeMD(); 
    6876        var thicknessVal = ((this.value / 20) * 100) / 100; 
    69         thicknessSliderOutput.innerHTML = thicknessVal.toFixed(2); 
     77        thicknessSliderOutput.value = thicknessVal.toFixed(2); 
    7078        that.thicknessValue = this.value / 20; 
    7179        that.shapeOptions.strokeWeight = that.thicknessValue; 
    7280        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); 
    7492    } 
    7593    //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 
    7695    var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 
    7796    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 
    78     opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%"; 
     97    //opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%"; 
    7998     
    8099    opacitySlider.oninput = function () { 
    81100        that.shapeSpecsChangeMD(); 
    82         opacitySliderOutput.innerHTML = Math.round(this.value * 100) / 100 + "%"; 
     101        opacitySliderOutput.value = this.value; 
    83102        that.opacityValue = this.value / 100; 
    84103        that.shapeOptions.fillOpacity = that.opacityValue; 
    85104        that.setSelectedOpacity(that.opacityValue); 
    86105    } 
    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     
    88116    document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() }); 
    89117    document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() }); 
     
    336364    //Keyboard shortcuts             
    337365    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        }); 
    351375         
    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(); 
    399439 
    400440    this.buildColorPalette(); 
    401      
    402      
    403441     
    404442     
     
    629667    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 
    630668    // 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);  
    632672    document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100; 
    633673 
    634674    //Update the opacity slider and value on the settings menu 
    635675    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; 
    638678 
    639679    if (this.drawingManager.drawingMode == null) { 
  • main/trunk/greenstone3/web/interfaces/default/style/map-editors.css

    r33042 r33061  
    3838 
    3939} 
     40/*hide the input number spinner in Chrome  
     41input[type=number]::-webkit-inner-spin-button,  
     42input[type=number]::-webkit-outer-spin-button {  
     43  -webkit-appearance: none;  
     44  margin: 0;  
     45}  
     46*/ 
    4047 
    4148#LineThickness{ 
     
    4754} 
    4855 
     56input[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 
    4988#ColourOpacity{ 
    50     display: inline-block; 
    5189    float: left; 
    52         margin-left: 3px; 
     90    margin-left: 3px; 
    5391    margin-right: 3px; 
    5492} 
     93 
     94/* 
     95#opacityRangeVal{ 
     96   width:250px;  
     97   max-width:250px; 
     98} 
     99*/ 
    55100 
    56101#buttons3{ 
  • main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

    r33042 r33061  
    247247                        <div id="SecondRow"> 
    248248                            <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}" />               
    253260                                </p> 
    254261                                <!-- <p>Value: </p> --> 
     
    256263                             
    257264                            <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}" /> 
    261272                                </p> 
    262273                                <!-- <p>Value: </p> -->