Merge pull request #395 from rkflx/pr/improve-keyboard-handling-and-dialog-uis

Improve keyboard handling and dialog UIs

.prettierignore

@@ -1,11 +1,14 @@
 LICENSE
+Dockerfile
 dist/
 *.zip
 yarn.lock
 .idea
 .gitignore
+.eslintignore
 .prettierignore
 .tx/
 layers/
 locales/*.json
 resources/boundaries/
+resources/standalone/*.sh

index.html

@@ -427,7 +427,7 @@
                         </button>
                     </div>
                     <div class="modal-body">
-                        <form name="export">
+                        <form name="export" id="exportForm">
                             <div class="form-group row">
                                 <label class="col-form-label col-sm-2" data-i18n="export.trackname">Name</label>
                                 <div class="col-sm-10">
@@ -519,7 +519,7 @@
                             type="submit"
                             class="btn btn-primary"
                             data-i18n="export.title"
-                            form="export"
+                            form="exportForm"
                             id="submitExport"
                         >
                             Export route
@@ -680,7 +680,7 @@
                             Close
                         </button>
                         <button
-                            type="button"
+                            type="submit"
                             class="btn btn-primary"
                             form="loadedittrackForm"
                             data-i18n="trackasroute.title"
@@ -712,7 +712,7 @@
                     </div>
                     <div class="modal-body">
                         <p id="nogoError" class="invalid-feedback" style="display: none"></p>
-                        <form name="loadNogosForm">
+                        <form name="loadNogosForm" id="loadNogosForm">
                             <fieldset>
                                 <legend data-i18n="loadNogos.source">Source</legend>
                                 <div>
@@ -727,10 +727,7 @@
                                     </div>
                                     <p data-i18n="modal.or">or</p>
                                     <div class="form-group row">
-                                        <label
-                                            class="col-form-label col-sm-3"
-                                            for="loadNogosFile"
-                                            data-i18n="loadNogos.file"
+                                        <label class="col-form-label col-sm-3" for="nogoFile" data-i18n="loadNogos.file"
                                             >File (.geojson)</label
                                         >
                                         <div class="col-sm-9">
@@ -738,12 +735,12 @@
                                                 <input
                                                     type="file"
                                                     accept=".geojson"
-                                                    name="loadNogosFile"
-                                                    id="loadNogosFile"
+                                                    name="nogoFile"
+                                                    id="nogoFile"
                                                     class="custom-file-input"
                                                 />
                                                 <label
-                                                    for="loadNogosFile"
+                                                    for="nogoFile"
                                                     class="custom-file-label"
                                                     data-i18n="[data-browse]trackasroute.browse"
                                                     style="
@@ -803,7 +800,7 @@
                         </button>
 
                         <button
-                            type="button"
+                            type="submit"
                             class="btn btn-primary"
                             form="loadNogosForm"
                             data-i18n="loadNogos.load"

js/control/Export.js

@@ -71,6 +71,10 @@ BR.Export = L.Class.extend({
         }
     },
 
+    _selectTrackname: function () {
+        trackname.setSelectionRange(0, trackname.value.lastIndexOf(' - '));
+    },
+
     _generateTrackname: function () {
         var trackname = this.trackname;
         this._getCityAtPosition(
@@ -103,6 +107,8 @@ BR.Export = L.Class.extend({
                             trackname.value = trackname.value.replace(/[>)]/g, '').replace(/ \(/g, ' - ');
                             this._validationMessage();
                         }
+
+                        this._selectTrackname();
                     }, this)
                 );
             }, this)

js/index.js

@@ -457,6 +457,10 @@
         );
 
         BR.WhatsNew.init();
+
+        $('.modal').on('shown.bs.modal', function (e) {
+            $('input:visible:enabled:first', e.target).focus();
+        });
     }
 
     i18next.on('languageChanged', function (detectedLanguage) {

js/plugin/NogoAreas.js

@@ -98,6 +98,8 @@ BR.NogoAreas = L.Control.extend({
 
         L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
 
+        L.DomUtil.get('nogoFile').onchange = L.bind(this.onFileChanged, this);
+
         this.editTools.on(
             'editable:drawing:end',
             function (e) {
@@ -170,6 +172,11 @@ BR.NogoAreas = L.Control.extend({
         $('#nogoError').css('display', message ? 'block' : 'none');
     },
 
+    onFileChanged: function (e) {
+        if (!e.target.files[0]) return;
+        $(e.target).next('label').text(e.target.files[0].name);
+    },
+
     uploadNogos: function () {
         var self = this;
 

js/plugin/RouteLoaderConverter.js

@@ -191,7 +191,8 @@ BR.routeLoader = function (map, layersControl, routing, pois) {
                 }.bind(this)
             );
 
-            L.DomUtil.get('submitLoadEditTrack').onclick = L.bind(function () {
+            L.DomUtil.get('submitLoadEditTrack').onclick = L.bind(function (e) {
+                e.preventDefault(); // prevent page reload on form submission
                 this._closeCanceled = false;
                 this.onBusyChanged(true);
                 if (this._testLayer.getLayers().length > 0) {