svelte 4.x => 5.0

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

diff --git a/src/components/ResultsList.svelte b/src/components/ResultsList.svelte
index cf931cbd11f1d05da7a4596c3a353911dad448d1..8935ec1b1a2a7d17dc80dd8875b990c1788d7fa5 100644 (file)
--- a/src/components/ResultsList.svelte
+++ b/src/components/ResultsList.svelte
@@ -1,11 +1,13 @@
 <script>
 <script>

-  import { results_store, current_result_store } from '../lib/stores.js';
-  import { formatLabel, detailsURL } from '../lib/helpers.js';
+  import { results_store } from '../lib/stores.js';
+  import { formatLabel } from '../lib/helpers.js';

 
 

+  import DetailsLink from './DetailsLink.svelte';

   import Welcome from './Welcome.svelte';
   import MapIcon from './MapIcon.svelte';
 
   export let reverse_search = false;
   import Welcome from './Welcome.svelte';
   import MapIcon from './MapIcon.svelte';
 
   export let reverse_search = false;

+  export let current_result = null;

 
   let aSearchResults;
   let iHighlightNum;
 
   let aSearchResults;
   let iHighlightNum;


@@ -15,7 +17,7 @@
     if (!data) { return; }
     aSearchResults = data;
     iHighlightNum = 0;
     if (!data) { return; }
     aSearchResults = data;
     iHighlightNum = 0;

-    current_result_store.set(aSearchResults[0]);
+    current_result = aSearchResults[0];

 
 
     let search_params = new URLSearchParams(window.location.search);
 
 
     let search_params = new URLSearchParams(window.location.search);


@@ -44,25 +46,33 @@
     }
     let pos = Number(result_el.dataset.position);
 
     }
     let pos = Number(result_el.dataset.position);
 

-    current_result_store.set(aSearchResults[pos]);
+    current_result = aSearchResults[pos];

     iHighlightNum = pos;
   }
 
 </script>
 
 {#if aSearchResults && aSearchResults.length > 0}
     iHighlightNum = pos;
   }
 
 </script>
 
 {#if aSearchResults && aSearchResults.length > 0}

-  <div id="searchresults">
+  <div id="searchresults" role="list">

 
     {#each aSearchResults as aResult, iResNum}
 
     {#each aSearchResults as aResult, iResNum}

-      <div class="result" class:highlight={iResNum === iHighlightNum} data-position="{iResNum}" on:click|stopPropagation={handleClick}>
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <div class="result"
+           class:highlight={iResNum === iHighlightNum}
+           role="listitem"
+           data-position="{iResNum}"
+           on:click|stopPropagation={handleClick}
+           on:keypress|stopPropagation={handleClick}>

         <div style="float:right">
           <MapIcon aPlace={aResult} />
         </div>
         <span class="name">{aResult.display_name}</span>
         <span class="type">{formatLabel(aResult)}</span>
         <div style="float:right">
           <MapIcon aPlace={aResult} />
         </div>
         <span class="name">{aResult.display_name}</span>
         <span class="type">{formatLabel(aResult)}</span>

-        <p class="coords">{aResult.lat},{aResult.lon}</p>  
+        <p class="coords">{aResult.lat},{aResult.lon}</p>

 
 

-        <a class="details btn btn-outline-secondary btn-sm" href="{detailsURL(aResult)}">details</a>
+        <DetailsLink extra_classes="btn btn-outline-secondary btn-sm" feature={aResult}>
+          details
+        </DetailsLink>

       </div>
     {/each}
 
       </div>
     {/each}
 


@@ -101,22 +111,23 @@
     background-color: #D9E7F7;
     border-color: #9DB9E4;
   }
     background-color: #D9E7F7;
     border-color: #9DB9E4;
   }

-  .result.highlight .details {
+  .result.highlight :global(a) {

     margin: 10px auto;
     display: block;
     max-width: 10em;
     padding: 1px;
     margin: 10px auto;
     display: block;
     max-width: 10em;
     padding: 1px;

+    background-color: white;

   }
   .result .type{
     color: gray;
     font-size: 0.8em;
   }
   }
   .result .type{
     color: gray;
     font-size: 0.8em;
   }

-  .result .details {
+  .result :global(a) {

     display: none;
   }
 
   .result .coords {
     display: none;
   }
 
   .result .coords {

-    display: none;  
+    display: none;

   }
 
   .noresults{
   }
 
   .noresults{


@@ -129,11 +140,7 @@
     margin-top: 1em;
   }
 
     margin-top: 1em;
   }
 

-  .btn-outline-secondary {
-    background-color: white;
-  }
-
-  .btn-outline-secondary:hover {
+  .result.highlight :global(a):hover {

     color: #111;
   }
     color: #111;
   }

-</style>
\ No newline at end of file
+</style>