fix Svelte accessibily linter warnings, no more autofocus

[nominatim-ui.git] / src / components / SearchSectionDetails.svelte

diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index 7429dbd76e8fa6df614c91c4db48218e31cd7e0d..def887386df64d9dd115cd0953b2574bb0acfb9b 100644 (file)
--- a/src/components/SearchSectionDetails.svelte
+++ b/src/components/SearchSectionDetails.svelte
@@ -1,96 +1,60 @@
 <script>
+  import { refresh_page } from '../lib/stores.js';
+
   export let api_request_params = {};
 
   function handleFormSubmit(event) {
-
     let form_el = event.target;
-    let val = form_el.querySelector('input[type=edit]').value;
-    let matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
-
-    if (!matches) {
-      matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
-    }
-
-    if (!matches) {
+    let val = form_el.querySelector('input[type=edit]').value.trim();
+    let type_and_id_match = val.match(/^\s*([NWR])(\d+)\s*$/i)
+                            || val.match(/\/(relation|way|node)\/(\d+)\s*$/);
+
+    var params = new URLSearchParams();
+    if (type_and_id_match) {
+      params.set('osmtype', type_and_id_match[1].charAt(0).toUpperCase());
+      params.set('osmid', type_and_id_match[2]);
+    } else if (val.match(/^\d+$/)) {
+      params.set('place_id', val);
+    } else {
       alert('invalid input');
       return;
     }
 
-    let osmtype_short = matches[1].charAt(0).toUpperCase();
-    form_el.querySelector('input[name=osmtype]').setAttribute('value', osmtype_short);
-    form_el.querySelector('input[name=osmid]').setAttribute('value', matches[2]);
-    form_el.submit();
+    refresh_page('details', params);
   }
 </script>
 
-<ul class="nav nav-tabs">
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#by-osm-type-and-id" class:active={!api_request_params.place_id}>OSM type and OSM id</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#by-place-id" class:active={api_request_params.place_id}>Place id</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#by-osm-url">openstreetmap.org URL</a>
-  </li>
-</ul>
-
-<div class="tab-content">
-  <div class="tab-pane" id="by-osm-type-and-id" role="tabpanel" class:active={!api_request_params.place_id}>
-    <form on:submit|preventDefault={handleFormSubmit}
-          id="form-by-type-and-id"
-          class="form-inline"
-          action="details.html">
-      <input type="edit"
-             class="form-control form-control-sm"
-             pattern="^[NWR][0-9]+$"
-             placeholder="e.g. N123 or W123 or R123"
-             value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}" />
-      <input type="hidden" name="osmtype" />
-      <input type="hidden" name="osmid" />
-      <input type="submit" class="btn btn-primary btn-sm" value="Show" />
-    </form>
-  </div>
-
-  <div class="tab-pane" id="by-place-id" role="tabpanel" class:active={api_request_params.place_id}>
-    <form class="form-inline" action="details.html">
+<form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
+  <div class="row g-1">
+    <div class="col-auto">
       <input type="edit"
-             class="form-control form-control-sm"
-             pattern="^[0-9]+$"
-             name="place_id"
-             placeholder="e.g. 12345"
-             value="{api_request_params.place_id || ''}" />
-      <input type="submit"
-             class="btn btn-primary btn-sm"
-             value="Show" />
-    </form>
-  </div>
-
-  <div class="tab-pane" id="by-osm-url" role="tabpanel">
-    <form on:submit|preventDefault={handleFormSubmit}
-          id="form-by-osm-url"
-          class="form-inline"
-          action="details.html">
-      <input type="url"
-             class="form-control form-control-sm"
-             pattern=".*openstreetmap.*"
-             placeholder="e.g. https://www.openstreetmap.org/relation/123" />
-      <input type="hidden" name="osmtype" />
-      <input type="hidden" name="osmid" />
-      <input type="submit" class="btn btn-primary btn-sm" value="Show" />
-    </form>
+             class="form-control form-control-sm me-1"
+             pattern="^[NWRnwr]?[0-9]+$|.*openstreetmap.*"
+             value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
+      </div>
+    <div class="col-auto">
+      <button type="submit" class="btn btn-primary btn-sm">Show</button>
+    </div>
   </div>
-</div>
+</form>
+<small class="form-text text-muted">
+  OSM type+id (<em>N123</em>,
+               <em>n123</em>,
+               <em>W123</em>,
+               <em>w123</em>,
+               <em>R123</em>,
+               <em>r123</em>),
+  Place id (<em>1234</em>) or
+  URL (<em>https://openstreetmap.org/way/123</em>)
+</small>
 
 <style>
-  .nav-tabs {
-    font-size: 0.8em;
-  }
-  .tab-pane {
-    padding-top: 1rem;
-  }
   form .form-control{
-    margin-right: 5px;
-    width: 30em;
+    width: 500px;
+    max-width: 100%;
+  }
+  .form-text em {
+    font-family: monospace;
+    font-style: normal;
   }
 </style>