[WIP] Custom JS injection

package.json

@@ -50,7 +50,6 @@
     "sirv-cli": "^1.0.0",
     "stamen-attribution": "github:stamen/stamen-attribution#v0.1.0",
     "svelte-fa": "^2.4.0",
-    "sveltestrap": "^5.11.3",
     "tangram": "^0.21.1"
   },
   "main": "dist/bundle.js"

src/components/CustomJsUi.svelte

@@ -0,0 +1,137 @@
+<script>
+  import { config as configStore, mapObj as mapObjStore } from '../stores';
+
+  export let mapId;
+  export let mapIdIndex;
+
+  let mapObj;
+  let mounted = false;
+
+  mapObjStore.subscribe(state => {
+    const index = mapIdIndex.split('-').pop();
+    mapObj = state?.[index];
+  });
+
+  const { customJs } = $configStore;
+
+  $: validActions = customJs.filter(js => js.mapIds.includes(mapId));
+
+  $: dropdownOptions = validActions.filter(ui => ui.type === 'dropdown');
+
+  $: checkboxOptions = validActions.filter(ui => ui.type === 'checkbox');
+
+  let selectedDropdown = null;
+
+  $: {
+    if (!dropdownOptions.length) {
+      selectedDropdown = null;
+    }
+  }
+
+  const onClickDropdown = e => {
+    const { dropdown, option } = JSON.parse(e.target.value);
+    const opt = dropdownOptions?.[dropdown]?.options?.[option];
+    if (!mapObj || !opt) return;
+    const { script } = opt;
+    const fn = script(mapObj);
+    fn();
+  };
+
+  const onClickCheckbox = script => {
+    const index = mapIdIndex.split('-').pop();
+    if (!mapObj || !script) return;
+    const fn = script(mapObj);
+    fn();
+  };
+
+  const getInitialCheck = checked => {
+    // checked is either a boolean or a factory fn
+    if (typeof checked === 'boolean') {
+      return checked;
+    }
+    if (!mapObj || !checked) return;
+    const fn = checked(mapObj);
+    return fn();
+  };
+
+  $: if (mapObj) {
+    mapObj.on('style.load', () => {
+      mounted = true;
+    });
+  }
+</script>
+
+{#if mounted}
+  {#if validActions.length}
+    <div class="action-dropdown">Custom actions:</div>
+  {/if}
+
+  <div class="controls">
+    {#if dropdownOptions.length}
+      <select
+        id="custom-actions"
+        bind:value={selectedDropdown}
+        on:change={onClickDropdown}
+      >
+        {#each dropdownOptions as dropdownAction, i}
+          <optgroup label={dropdownAction?.label}>
+            <option value={null} disabled selected hidden
+              >Select action...</option
+            >
+            {#each dropdownAction?.options as dropDownOption, iter}
+              <option value={JSON.stringify({ dropdown: i, option: iter })}>
+                {dropDownOption?.label}
+              </option>
+            {/each}
+          </optgroup>
+        {/each}
+      </select>
+    {/if}
+
+    {#if checkboxOptions.length}
+      <div class="checkbox-container">
+        {#each checkboxOptions as checkboxAction, i}
+          <div class="checkbox-options">
+            <div class="checkbox-label">{checkboxAction?.label}:</div>
+            {#each checkboxAction?.options as checkboxOption, iter}
+              {#if checkboxOption?.script(mapObj)}
+                <input
+                  type="checkbox"
+                  id={iter}
+                  checked={getInitialCheck(checkboxOption?.checked)}
+                  on:click={() => onClickCheckbox(checkboxOption?.script)}
+                />
+                <label for={iter}>{checkboxOption?.label}</label>
+              {/if}
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .action-dropdown {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .checkbox-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .checkbox-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+</style>

src/components/GlMap.svelte

@@ -2,7 +2,7 @@
   import deepEqual from 'deep-equal';
   import throttle from 'lodash.throttle';
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-  import { config as configStore } from '../stores';
+  import { config as configStore, mapObj as mapObjStore } from '../stores';
 
   export let id;
   export let bearing;
@@ -13,6 +13,7 @@
   export let zoom;
   export let mapStyle;
   export let numberOfMaps;
+  export let onMapMount;
 
   export let mapRenderer;
 
@@ -130,6 +131,8 @@
       ...mapViewProps,
     });
 
+    onMapMount(map);
+
     // Also focus map on wheel (automatically focused on click)
     const throttledWheelHandler = throttle(() => {
       document.getElementById(id).querySelector('canvas[tabindex="0"]').focus();

src/components/GoogleMap.svelte

@@ -1,6 +1,6 @@
 <script>
   import { round } from '../math';
-  import { config as configStore } from '../stores';
+  import { config as configStore, mapObj as mapObjStore } from '../stores';
   import throttle from 'lodash.throttle';
   import deepEqual from 'deep-equal';
   import { Loader } from '@googlemaps/js-api-loader';
@@ -13,6 +13,7 @@
   export let zoom;
   export let mapStyle;
   export let numberOfMaps;
+  export let onMapMount;
 
   let googleMapsAPIKey;
   configStore.subscribe(value => ({ googleMapsAPIKey } = value));
@@ -96,6 +97,8 @@
         zoomControl: false,
       });
 
+      onMapMount(map);
+
       const throttledWheelHandler = throttle(() => {
         document.getElementById(id).querySelector('div[tabindex="0"]').focus();
       }, 250);

src/components/LeafletMap.svelte

@@ -1,6 +1,7 @@
 <script>
   import deepEqual from 'deep-equal';
   import throttle from 'lodash.throttle';
+  import { mapObj as mapObjStore } from '../stores';
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
   import * as L from 'leaflet';
   import 'leaflet/dist/leaflet.css';
@@ -11,6 +12,7 @@
   export let mapStyle;
   export let numberOfMaps;
   export let overrideLayer;
+  export let onMapMount;
 
   const dispatch = createEventDispatcher();
 
@@ -64,6 +66,8 @@
     }).setView(mapViewProps.center, mapViewProps.zoom + 1);
     map.attributionControl.setPrefix('');
 
+    onMapMount(map);
+
     // Also focus map on wheel (automatically focused on click)
     const throttledWheelHandler = throttle(() => {
       document.getElementById(id).focus();

src/components/Map.svelte

@@ -9,6 +9,7 @@
     maps as mapsStore,
     linkLocations as linkLocationsStore,
     mapLocations as mapLocationsStore,
+    mapObj as mapObjStore,
   } from '../stores';
   import { validateMapState } from '../map-state-utils';
   import isEqual from 'lodash.isequal';
@@ -109,6 +110,10 @@
     }
   };
 
+  const onMapMount = mapObj => {
+    mapObjStore.update(store => ({ ...store, [map.index]: mapObj }));
+  };
+
   $: {
     // Add trigger for stylesheet changes for locally served styles
     stylesheet;
@@ -126,6 +131,7 @@
     <div class="map" class:highlight-diff={highlightDifferences}>
       <svelte:component
         this={MapComponent}
+        {onMapMount}
         {...props}
         {...mapStateProps}
         on:mapMove={handleMapMove}
@@ -144,6 +150,7 @@
     >
       <MapLabel
         index={map.index}
+        mapIdIndex={mapId}
         name={map.name}
         onClose={removeMap}
         disableClose={numberOfMaps <= 1}
@@ -176,7 +183,7 @@
     margin-bottom: 2em;
     width: auto;
     max-width: calc(100% - 6em);
-    min-width: 240px;
+    min-width: 300px;
   }
 
   .highlight-diff {

src/components/MapLabel.svelte

@@ -13,6 +13,7 @@
   export let disableClose;
   export let mapState;
   export let stylesheet;
+  export let mapIdIndex;
 
   let locationProps;
 
@@ -26,7 +27,7 @@
     </button>
     <div class="map-name">{name}</div>
     <div class="options-container">
-      <MapStyleInputWrapper {index} {stylesheet} />
+      <MapStyleInputWrapper {index} {stylesheet} {mapIdIndex} />
       {#if !$linkLocationsStore && Object.keys(locationProps).length}
         <div class="location-control">
           <MapLocationControl on:mapState {...locationProps} />

src/components/MapLocationDropdown.svelte

@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte';
   import { config as configStore } from '../stores';
-  import SimpleDropdown from './inputs/SimpleDropdown.svelte';
+  import Dropdown from './inputs/Dropdown/Dropdown.svelte';
 
   export let bearing;
   export let center;
@@ -97,14 +97,19 @@
 </script>
 
 {#if gazetteer}
-  <SimpleDropdown
-    placeholder={'Go to...'}
-    options={selectionOptions}
-    value={selected}
-    onClick={onSelect}
-    direction="down"
-  />
+  <div class="dropdown-container">
+    <Dropdown
+      placeholder={'Go to...'}
+      options={selectionOptions}
+      activeValue={selected}
+      {onSelect}
+      direction="down"
+    />
+  </div>
 {/if}
 
 <style>
+  .dropdown-container {
+    min-width: 140px;
+  }
 </style>

src/components/MapStyleInput.svelte

@@ -4,7 +4,8 @@
   import { shortcut } from '../shortcut';
   import { fetchUrl } from '../fetch-url';
   import StylesDropdown from './inputs/StylesDropdown.svelte';
-  import SimpleDropdown from './inputs/SimpleDropdown.svelte';
+  import Dropdown from './inputs/Dropdown/Dropdown.svelte';
+
   const dispatch = createEventDispatcher();
 
   export let dropdownDisplayOptions;
@@ -63,8 +64,8 @@
       value.branch = textInput;
     }
     if (mapObj) {
-      value.id = mapObj?.style?.id ?? mapObj.id;
-      value.name = mapObj?.style?.name ?? mapObj.name;
+      value.id = mapObj.id ?? mapObj?.style?.id;
+      value.name = mapObj.name ?? mapObj?.style?.name;
     }
 
     dispatch('updateMapStore', { value });
@@ -228,10 +229,10 @@
 
   <div class="renderer-control">
     <span class="nowrap">Rendered with</span>
-    <SimpleDropdown
+    <Dropdown
       options={rendererOptions.map(v => ({ label: v.name, value: v.value }))}
-      value={rendererValue}
-      onClick={v => dispatch('selectRenderer', { value: v })}
+      activeValue={rendererValue}
+      onSelect={v => dispatch('selectRenderer', { value: v })}
       direction="up"
     />
   </div>
@@ -243,11 +244,19 @@
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    max-width: 240px;
+    max-width: 300px;
   }
 
   .custom-input {
     margin-top: 0px;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+  }
+
+  .custom-input input {
+    flex-grow: 1;
+    width: 0;
   }
 
   .input-error:focus {