Ignore:
Timestamp:
2019-05-09T17:34:07+12:00 (5 years 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.
File:
1 edited

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