feat(ui): sync form params with url query params (permalink)

Author: matthiasschaub

client-src/create/form.js

@@ -1,7 +1,6 @@
 import { Margin, ORIENTATION, PAPER_FORMAT } from "@giscience/ol-print-layout-control";
 import { get as getProjection, toLonLat, transformExtent } from "ol/proj";
 import { SKETCH_MAP_MARGINS } from "./sketchMapMargins";
-import { fillSelectOptions } from "../shared";
 
 function bindFormToPrintLayoutControl(printLayoutControl, messageController) {
     const paperFormats = { ...PAPER_FORMAT };
@@ -10,12 +9,6 @@ function bindFormToPrintLayoutControl(printLayoutControl, messageController) {
     // TODO: This is temporary. Delete once A0 works
     delete paperFormats.A0;
 
-    // property: format
-    fillSelectOptions("format", paperFormats);
-
-    // set initial form value from ol-control
-    document.getElementById("format").value = printLayoutControl.getFormat();
-
     // bind listeners to update ol-control from form
     document.getElementById("format")
         .addEventListener("change", (event) => {
@@ -27,9 +20,6 @@ function bindFormToPrintLayoutControl(printLayoutControl, messageController) {
             );
         });
 
-    // property: orientation
-    fillSelectOptions("orientation", ORIENTATION);
-
     // set initial form value from ol-control
     document.getElementById("orientation").value = printLayoutControl.getOrientation();
 
@@ -78,6 +68,10 @@ function bindFormToPrintLayoutControl(printLayoutControl, messageController) {
 
     // disable form submit and display info if zoom is lower than 9
     function handleZoomChange(zoom) {
+        document.getElementById("zoom").value = zoom;
+        document.getElementById("page-setup-form").dispatchEvent(new CustomEvent("zoom-updated", {
+            detail: { value: zoom },
+        }));
         if (zoom < 9) {
             messageController.addWarning("zoom-info");
         } else {
@@ -132,19 +126,24 @@ function bindFormToPrintLayoutControl(printLayoutControl, messageController) {
     printLayoutControl.on("change:bbox", (event) => {
         // update the URL when the selection is changed  (e.g. to bookmark the current selection)
         const newCenter = printLayoutControl.getMap().getView().getCenter();
-        window.history.replaceState({}, "", `?center=${newCenter}`);
+        document.getElementById("center").value = newCenter;
+        document.getElementById("page-setup-form").dispatchEvent(new CustomEvent("center-updated", {
+            detail: { value: newCenter },
+        }));
         // show warning and disable form if bbox crosses the antimeridian
         handleAntimeridian(event.target.getBboxAsLonLat());
     });
 }
 
 function bindFormToLayerSwitcherControl(layerSwitcherControl) {
-// set initial form value from ol-control
+    // set initial form value from ol-control
     document.getElementById("layer").value = layerSwitcherControl.get("activeLayer").name;
-
     function handleLayerSwitch(event) {
         const activeLayerName = event.target.get("activeLayer").name;
         document.getElementById("layer").value = activeLayerName;
+        document.getElementById("page-setup-form").dispatchEvent(new CustomEvent("layer-updated", {
+            detail: { value: activeLayerName },
+        }));
     }
     layerSwitcherControl.on("change:activeLayer", handleLayerSwitch);
 }

client-src/create/index.js

@@ -4,6 +4,7 @@ import "ol-geocoder/dist/ol-geocoder.css";
 import "./geocoder.css";
 import "./create.css";
 
+import Alpine from "alpinejs";
 import {
     addGeocoderControl,
     addLayerswitcherControl,
@@ -13,17 +14,62 @@ import {
 import { bindFormToLayerSwitcherControl, bindFormToPrintLayoutControl } from "./form.js";
 import { MessageController } from "./messageController";
 
+window.Alpine = Alpine;
+
+const updateQueryParam = (paramName, newValue) => {
+    const url = new URL(window.location);
+    url.searchParams.set(paramName, newValue);
+    window.history.replaceState({}, "", url);
+};
+
+document.addEventListener("alpine:init", () => {
+    Alpine.directive("query-string", (el, {
+        modifiers, // eslint-disable-line no-unused-vars
+        expression,
+    }, {
+        evaluate,
+    }) => {
+        const urlParams = new URLSearchParams(window.location.search);
+
+        const paramName = expression;
+        const initialValue = urlParams.get(paramName) ?? evaluate(expression);
+
+        Alpine.bind(el, {
+            "x-data": function () { // eslint-disable-line func-names
+                return {
+                    init() {
+                        this[paramName] = initialValue;
+                        this.$watch(expression, (value) => {
+                            updateQueryParam(paramName, value);
+                        });
+                    },
+                };
+            },
+        });
+    });
+});
+
+Alpine.start();
+
 // Retrieve potentially given map center and baselayer from URL (e.g. from a bookmarked selection)
 const searchParams = new URLSearchParams(window.location.search);
 const centerArg = searchParams.get("center");
+const zoomArg = searchParams.get("zoom");
 const baselayerArg = searchParams.get("layer");
+const orientationArg = searchParams.get("orientation");
+const formatArg = searchParams.get("format");
 
 let center = [966253.1800856147, 6344703.99262965];
 if (centerArg != null) {
     const centerCoords = centerArg.split(",");
     center = [parseFloat(centerCoords[0]), parseFloat(centerCoords[1])];
 }
 
+let zoom = 15;
+if (zoomArg != null) {
+    zoom = zoomArg;
+}
+
 // type BaselayerType = "OSM" | "ESRI:World_Imagery"
 let activeBaselayer;
 if (baselayerArg != null) {
@@ -36,9 +82,18 @@ if (baselayerArg != null) {
     }
 }
 
-const map = createMap("map", center, 15, activeBaselayer);
+let orientation = "LANDSCAPE";
+if (orientationArg != null) {
+    orientation = orientationArg.toUpperCase();
+}
+
+let format = "A4";
+if (formatArg != null) {
+    format = formatArg.toUpperCase();
+}
 
-const printLayoutControl = addPrintLayoutControl(map);
+const map = createMap("map", center, zoom, activeBaselayer);
+const printLayoutControl = addPrintLayoutControl(map, format, orientation);
 const messageController = new MessageController();
 
 bindFormToPrintLayoutControl(printLayoutControl, messageController);

client-src/create/map.js

@@ -108,13 +108,18 @@ function createMap(target = "map", lonLat = [966253.1800856147, 6344703.99262965
 /**
  * Add the print-layout-control to an OpenLayers Map
  * @param map - An instance of an OpenLayers Map
+ * @param format - An instance of FORMAT
+ * @param orientation - An instance of ORIENTATION
  * @returns {PrintLayout}
  */
-function addPrintLayoutControl(map) {
+function addPrintLayoutControl(map, format, orientation) {
+    const paperFormat = PAPER_FORMAT[format];
+    const paperOrientation = ORIENTATION[orientation];
+    const paperMargins = SKETCH_MAP_MARGINS[paperFormat][paperOrientation];
     const printLayoutControl = new PrintLayout({
-        format: PAPER_FORMAT.A4,
-        orientation: ORIENTATION.LANDSCAPE,
-        margin: SKETCH_MAP_MARGINS.A4.landscape,
+        format: paperFormat,
+        orientation: paperOrientation,
+        margin: paperMargins,
     });
     map.addControl(printLayoutControl);
 

client-src/shared/domHelpers.js

@@ -8,23 +8,6 @@ function getUUIDFromURL() {
     return location.pathname.match(UUID_V4_PATTERN)[0];
 }
 
-/**
- * Fills the options of an HTMLSelectElement with the values of a simple key-value Object
- * @param {string} selectElementId - the id of an HTMLSelectElement
- * @param { {[key:string] : string|number}} optionsMap - a key-value Object, values will be used as
- *     options text and value
- */
-function fillSelectOptions(selectElementId, optionsMap) {
-    const selectElement = document.getElementById(selectElementId);
-    Object.values(optionsMap)
-        .forEach((paperformatValue) => {
-            const option = document.createElement("option");
-            option.text = paperformatValue;
-            option.value = paperformatValue;
-            selectElement.appendChild(option);
-        });
-}
-
 /**
  * set the aria-busy HTMLAttribute on the given HTMLElement
  * @param elementId
@@ -103,7 +86,6 @@ function openAllDetailsElements() {
 
 export {
     getUUIDFromURL,
-    fillSelectOptions,
     setTaskStatus,
     setDisabled,
     setDownloadLink,

package-lock.json

@@ -49,6 +49,7 @@
     "dependencies": {
         "@giscience/ol-print-layout-control": "^1.0.2",
         "@picocss/pico": "^2.1.1",
+        "alpinejs": "^3.15.0",
         "filebokz": "^0.1.3",
         "ol": "^8.1.0",
         "ol-geocoder": "^4.3.1"

package.json

@@ -37,23 +37,49 @@
                         the antimeridian.') }}
                 </article>
             </div>
-
-            <form id="page-setup-form" action="/{{ lang }}/create/results" method="post">
+            <!--
+            State is synced between OpenLayers (including PrintLayoutControl)
+            and Alping.js via below HTML form and custom events.
+            Alping.js synchronizes form values to URL query parameter via `x-query-string`.
+            -->
+            <form
+                id="page-setup-form"
+                action="/{{ lang }}/create/results"
+                method="post"
+                x-data="{ format: '', orientation: '', layer: '', center: '', zoom: ''}"
+                x-on:layer-updated="layer= $event.detail.value"
+                x-on:center-updated="center= $event.detail.value"
+                x-on:zoom-updated="zoom= $event.detail.value"
+            >
                 <label for="format">{{ _('Paper Format') }}</label>
-                <select id="format" name="format"></select>
+                <select id="format" name="format" x-model="format" x-query-string="format">
+                    <!-- TODO: re-enable A0 -->
+                    <!--<option value="A0">A0</option>-->
+                    <option value="A1">A1</option>
+                    <option value="A2">A2</option>
+                    <option value="A3">A3</option>
+                    <option value="A4">A4</option>
+                    <option value="LETTER">Letter</option>
+                    <option value="TABLOID">Tabloid</option>
+                </select>
 
                 <label for="orientation">{{ _('Paper Orientation') }}</label>
-                <select id="orientation" name="orientation"></select>
+                <select id="orientation" name="orientation" x-model="orientation" x-query-string="orientation">
+                    <option value="landscape">Landscape</option>
+                    <option value="portrait">Portrait</option>
+                </select>
 
                 <input type="hidden" id="bbox" name="bbox" value="1,1,5,5">
                 <input type="hidden" id="bboxWGS84" name="bboxWGS84" value="1,1,5,5">
                 <input type="hidden" id="size" name="size" value='{"width": 6055, "height": 8658}'>
                 <input type="hidden" id="scale" name="scale" value='11545.36'>
-                <input type="hidden" id="layer" name="layer" value="satellite">
+                <input type="hidden" id="layer" name="layer" x-model="layer" x-query-string="layer">
+                <input hidden disabled id="center" x-model="center" x-query-string="center">
+                <input hidden disabled id="zoom" x-model="zoom" x-query-string="zoom">
                 <button id="next-button" type="button">{{ _('NEXT') }} &rarr;</button>
             </form>
         </div>
 
     </div>
 </main>
-{% endblock body %}
+{% endblock body %}