src/components/DetailsLink.svelte

   1 <script>
   2   import { refresh_page } from '../lib/stores.js';
   3   import { SvelteURLSearchParams } from 'svelte/reactivity';
   4
   5   export let extra_classes = '';
   6   export let feature = null;
   7
   8   let url_params = new SvelteURLSearchParams();
   9   let href = 'details.html';
  10
  11   function formatShortOSMType(sType) {
  12     if (sType === 'node') return 'N';
  13     if (sType === 'way') return 'W';
  14     if (sType === 'relation') return 'R';
  15     return '';
  16   }
  17
  18   function handleClick() {
  19     refresh_page('details', url_params);
  20   }
  21
  22   $: {
  23     let new_params = new SvelteURLSearchParams();
  24
  25     if (feature !== null) {
  26       if (feature.osm_type) {
  27         if (feature.osm_type.length === 1) {
  28           new_params.set('osmtype', feature.osm_type);
  29         } else {
  30           new_params.set('osmtype', formatShortOSMType(feature.osm_type));
  31         }
  32
  33         new_params.set('osmid', feature.osm_id);
  34
  35         if (feature.class) {
  36           new_params.set('class', feature.class);
  37         } else if (feature.category) {
  38           new_params.set('class', feature.category);
  39         }
  40       } else if (feature.place_id) {
  41         new_params.set('place_id', feature.place_id);
  42       }
  43     }
  44     url_params = new_params;
  45   }
  46
  47   $: {
  48     let param_str = url_params.toString();
  49     href = 'details.html' + (param_str ? '?' : '') + param_str;
  50   }
  51 </script>
  52
  53 <a on:click|preventDefault|stopPropagation={handleClick} href={href} class={extra_classes}>
  54   <slot></slot>
  55 </a>