@geops/rvf-mobility-web-component 0.1.65 → 0.1.67

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.67](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.66...v0.1.67) (2025-10-16)
+
+
+### Features
+
+* add mapset timestamp attribute ([6e25a8b](https://github.com/geops/rvf-mobility-web-component/commit/6e25a8bc75eeef75a4cd367838403443b9aca08f))
+* add mapsettags attribute and fix bbox transformation on load ([23809bd](https://github.com/geops/rvf-mobility-web-component/commit/23809bdbc8a2616da24e7c0929c216245026b2b6))
+
+### [0.1.66](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.65...v0.1.66) (2025-10-15)
+
+
+### Bug Fixes
+
+* add documentation for url paramters ([e759e58](https://github.com/geops/rvf-mobility-web-component/commit/e759e589105c7551819ca83df0b36769fb45a0b0))
+* add documentation for url paramters ([b4083e2](https://github.com/geops/rvf-mobility-web-component/commit/b4083e2521fc10b445be9edd464b8e94d88dcf66))
+* add documentation for url paramters ([6eb1629](https://github.com/geops/rvf-mobility-web-component/commit/6eb1629afda1afec9caddf1e0807546d70c434fd))
+* add noapply url parameter documentation ([6e42a63](https://github.com/geops/rvf-mobility-web-component/commit/6e42a6307438989265b3546f4ca789c6ddf71662))
+* fix layer config title display when there is not translation ([feba3da](https://github.com/geops/rvf-mobility-web-component/commit/feba3dafc92ad1e941899eb9de2e99ccaccf2b67))
+
 ### [0.1.65](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.64...v0.1.65) (2025-10-14)
 
 

package/docutils.js

@@ -1,6 +1,8 @@
-const activateAttrUrlParameters = true;
+/* Will ignore web component attributes defined as url parameters */
+const doNotApplyAttributesUrlParameters =
+  new URLSearchParams(window.location.search).get("noapply") === "true";
 
-function onLoad(wc, attributes, events, pkgSrc) {
+function onLoad(wc, attributes, events, pkgSrc, urlParameters = {}) {
   /* Show private attributes for dev purpose */
   const showPrivate =
     new URLSearchParams(window.location.search).get("private") === "true";
@@ -10,7 +12,7 @@ function onLoad(wc, attributes, events, pkgSrc) {
   const booleanAttrs = Object.entries(attributes)
     .filter(([, attr]) => attr.type === "boolean")
     .map(([key]) => key);
-  const booleanTrueByDefault = booleanAttrs.filter(
+  const booleanTrueByDefaultAttrs = booleanAttrs.filter(
     (key) => attributes[key].defaultValue === "true",
   );
   const reloadAttrs = Object.entries(attributes)
@@ -37,6 +39,25 @@ function onLoad(wc, attributes, events, pkgSrc) {
     {},
   );
 
+  const attrsContent = generateAttributesTable(
+    wc,
+    attrs,
+    booleanAttrs,
+    booleanTrueByDefaultAttrs,
+    descriptionByAttr,
+    defaultValueByAttr,
+    reloadAttrs,
+  );
+
+  if (attrsContent) {
+    const elt = document.querySelector("#attributes");
+    if (elt) {
+      elt.innerHTML = attrsContent;
+    }
+  } else {
+    document.querySelector("#attributesDoc")?.remove();
+  }
+
   /* Events */
   const evts = Object.keys(events);
   const descriptionByEvent = Object.entries(events)
@@ -51,30 +72,66 @@ function onLoad(wc, attributes, events, pkgSrc) {
       return acc;
     }, {});
 
-  /* Build HTML */
-  const attrsContent = generateAttributesTable(
-    wc,
-    attrs,
-    booleanAttrs,
-    booleanTrueByDefault,
-    descriptionByAttr,
-    defaultValueByAttr,
-    reloadAttrs,
-  );
-
-  if (attrsContent) {
-    document.querySelector("#attributes").innerHTML = attrsContent;
+  const evtsContent = generateEventsTable(wc, evts, descriptionByEvent);
+  if (evtsContent) {
+    const elt = document.querySelector("#events");
+    if (elt) {
+      elt.innerHTML = evtsContent;
+    }
   } else {
-    document.querySelector("#attributesDoc").remove();
+    document.querySelector("#eventsDoc")?.remove();
   }
 
-  const evtsContent = generateEventsTable(wc, evts, descriptionByEvent);
-  if (evtsContent) {
-    document.querySelector("#events").innerHTML = evtsContent;
+  /* URL Parameters */
+  const params = Object.keys(urlParameters);
+  const booleanParams = Object.entries(urlParameters)
+    .filter(([, attr]) => attr.type === "boolean")
+    .map(([key]) => key);
+  const booleanTrueByDefaultParams = booleanParams.filter(
+    (key) => urlParameters[key].defaultValue === "true",
+  );
+  const reloadParams = Object.entries(urlParameters).map(([key]) => key);
+
+  const descriptionByParam = Object.entries(urlParameters)
+    .filter(([key, attr]) => {
+      if (showPrivate) {
+        return true;
+      }
+      return attr.public;
+    })
+    .reduce((acc, [key, attr]) => {
+      acc[key] = attr.description;
+      return acc;
+    }, {});
+
+  const defaultValueByParam = Object.entries(urlParameters).reduce(
+    (acc, [key, attr]) => {
+      acc[key] = attr.defaultValue;
+      return acc;
+    },
+    {},
+  );
+
+  const urlParamsContent = generateAttributesTable(
+    wc,
+    params,
+    booleanParams,
+    booleanTrueByDefaultParams,
+    descriptionByParam,
+    defaultValueByParam,
+    reloadParams,
+  );
+  if (urlParamsContent) {
+    const elt = document.querySelector("#urlParameters");
+    if (elt) {
+      elt.innerHTML = urlParamsContent;
+    }
   } else {
-    document.querySelector("#eventsDoc").remove();
+    document.querySelector("#urlParamtersDoc")?.remove();
   }
 
+  /* Build HTML */
+
   document.querySelector("#code").innerHTML = generateCodeText(
     wc,
     attrs,
@@ -128,7 +185,7 @@ function applyPermalinkParameters(wc, attributes) {
   }
 
   // Apply all url parameters as attribute of the web component and fill the input fields.
-  if (activateAttrUrlParameters) {
+  if (!doNotApplyAttributesUrlParameters) {
     params.forEach((value, key) => {
       if (!(key in attributes)) {
         return;
@@ -191,7 +248,11 @@ function generateAttributesTable(
       const defaultChecked = booleanTrueByDefault.includes(key)
         ? "checked"
         : "";
-      const currValue = wc.getAttribute(key);
+      let currValue = wc.getAttribute(key);
+      const isUrlParameters = reloadAttrs?.includes(key);
+      if (isUrlParameters) {
+        currValue = new URLSearchParams(window.location.search).get(key);
+      }
       let checked = currValue === "true" ? "checked" : "";
       if (currValue !== "true" && currValue !== "false") {
         checked = defaultChecked;
@@ -201,28 +262,31 @@ function generateAttributesTable(
       <td class="border px-4 py-2">${key}</td>
       <!--td class="border px-4 py-2"></td>
       <td class="border px-4 py-2"></td-->
-      <td class="border px-4 py-2">
-      <div class="flex gap-4">
+      <td class="border px-4 py-2 space-y-2">
       ${
         isBoolean
           ? `<input
           type="checkbox"
-          class="border"
+          id="${key}"
+          class="border mr-4 cursor-pointer inline-block"
           name="${key}"
           ${checked ? "checked" : ""}
           onchange="document.querySelector('${wc.localName}').setAttribute('${key}', this.checked);onAttributeUpdate(document.querySelector('${wc.localName}'),this.name, this.checked, '${reloadAttrs.join(",")}');"
           />`
           : `
-        <input
-          type="text"
-          class="border"
-          name="${key}"
-          value="${wc.getAttribute(key) || defaultValueByAttr[key] || ""}" 
-          />
-        <button class="border p-2 bg-black hover:bg-gray-700 text-white" onclick="document.querySelector('${wc.localName}').setAttribute('${key}', this.previousElementSibling.value);onAttributeUpdate(document.querySelector('${wc.localName}'),this.previousElementSibling.name, this.previousElementSibling.value, '${reloadAttrs.join(",")}');">Update</button>`
+        <div class="flex gap-4 mb-2">
+          <input
+            type="text"
+            class="border px-2"
+            name="${key}"
+            placeholder="${defaultValueByAttr[key] || ""}"
+            value="${wc.getAttribute(key) || defaultValueByAttr[key] || ""}" 
+            />
+          <button class="border cursor-pointer p-2 bg-black hover:bg-gray-700 text-white" onclick="document.querySelector('${wc.localName}').setAttribute('${key}', this.previousElementSibling.value);onAttributeUpdate(document.querySelector('${wc.localName}'),this.previousElementSibling.name, this.previousElementSibling.value, '${reloadAttrs.join(",")}');">Update</button>
+        </div>`
       }
-      </div>
-      ${descriptionByAttr[key] ? `<div class="pt-2">${descriptionByAttr[key]}</div>` : ``}
+      
+      ${descriptionByAttr[key] ? `<label for="${key}" class="cursor-pointer">${descriptionByAttr[key]}</label>` : ``}
       </td>
     </tr>
   `;
@@ -342,7 +406,7 @@ function onAttributeUpdate(wc, key, value, reloadAttrs) {
     window.location.reload();
   } else {
     wc.setAttribute(key, value);
-    if (activateAttrUrlParameters) {
+    if (!doNotApplyAttributesUrlParameters) {
       window.history.replaceState(
         {},
         "",

package/index.html

@@ -34,7 +34,7 @@
   <body class="p-8">
     <!-- tailwind hack to add class used in docutils -->
     <div
-      class="absolute inset-0 flex h-full w-full table-auto gap-4 flex-col border bg-black p-0 px-4 py-2 pt-2 text-white hover:bg-gray-700"
+      class="absolute inset-0 flex h-full w-full table-auto mr-4 gap-4 space-y-4 flex-col border bg-black p-0 px-4 py-2 pt-2 text-white hover:bg-gray-700"
       style="display: none"
     ></div>
     </script>
@@ -53,20 +53,33 @@
         class="block h-128 w-full resize overflow-hidden rounded-[16px] border"
       ></geops-mobility>
 
-      <br />
-      <div id="attributesDoc">
+      <div id="attributesDoc" class="space-y-4">
         <h2 class="text-xl font-bold">Attributes</h2>
+
+        <pre class="rounded bg-slate-800 p-4 text-slate-200">
+// Modify an attribute
+document.getElementById('map').setAttribute("zoom", "15");
+</pre
+        >
         <div id="attributes"></div>
       </div>
-      <div id="eventsDoc">
+      <div id="eventsDoc" class="space-y-4">
         <h2 class="text-xl font-bold">Events</h2>
         <pre class="rounded bg-slate-800 p-4 text-slate-200">
+// Listen to an event
 document.getElementById('map').addEventListener('mwc:attribute', (event) => {
   console.log('Display last data received:', event.data);
-});</pre
+});
+</pre
         >
         <div id="events"></div>
       </div>
+
+      <div id="urlParametersDoc" class="space-y-4">
+        <h2 class="text-xl font-bold">Documentation URL parameters</h2>
+        <p>The following parameters are only used by this documentation webpage.</p>
+        <div id="urlParameters"></div>
+      </div>
       <br />
       <br />
       <h1 class="text-xl font-bold">More mobility web components</h1>
@@ -87,24 +100,39 @@ document.getElementById('map').addEventListener('mwc:attribute', (event) => {
         const events = window.MobilityMapEvents;
 
         // Add page parameters
-        attributes.fullscreen = {
-          type: "boolean",
-          defaultValue: "false",
-          description: `Load the page in fullscreen mode.`,
-          reload: true,
-          public: false,
-        };
+        const urlParameters = {
+          fullscreen: {
+            type: "boolean",
+            defaultValue: "false",
+            description: `Load the map in fullscreen mode.`,
+            public: true,
+          },
+          noapply: {
+            type: "boolean",
+            defaultValue: "false",
+            description:
+              "Will not apply web component attributes defined as url parameters. Useful to test the permalink functionality of the web component.",
+            public: true,
+          },
+
+          debug: {
+            type: "boolean",
+            defaultValue: "false",
+            description:
+              "Displays debug information for vehicles when true, use only for debugging.",
+            public: true,
+          },
 
-        attributes.debug = {
-          type: "boolean",
-          defaultValue: "false",
-          description:
-            "Displays debug information for vehicles when true, use only for debugging.",
-          reload: true,
-          public: false,
+          private: {
+            type: "boolean",
+            defaultValue: "false",
+            description:
+              "Displays all private attributes, if there are some, use only for development purpose.",
+            public: true,
+          },
         };
 
-        onLoad(wc, attributes, events, pkgSrc);
+        onLoad(wc, attributes, events, pkgSrc, urlParameters);
       });
     </script>
   </body>