@geops/rvf-mobility-web-component 0.1.64 → 0.1.66

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 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.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)
+
+
+### Features
+
+* add lines attribute ([#28](https://github.com/geops/rvf-mobility-web-component/issues/28)) ([3475b21](https://github.com/geops/rvf-mobility-web-component/commit/3475b2121f02997219821ea79fff71d289b37878))
+
+
+### Bug Fixes
+
+* active docu permalink ([821ea85](https://github.com/geops/rvf-mobility-web-component/commit/821ea85d97f0c5c6f1ae8ca1394fd8152c2bb70a))
+* add a container ([fae18ad](https://github.com/geops/rvf-mobility-web-component/commit/fae18ad2cd72fac8ac566d5dbf20e2ae2e05c7cd))
+* add missing file ([5bcca16](https://github.com/geops/rvf-mobility-web-component/commit/5bcca16dcaf6bbc0ba80734149ed07ee79ea55d8))
+* always read url parameters when a permalink template is set ([5636bce](https://github.com/geops/rvf-mobility-web-component/commit/5636bceb97b669328bf1e009370e91435a51d991))
+* fix inout copy rendering ([b3da415](https://github.com/geops/rvf-mobility-web-component/commit/b3da41560a4a49ec0dea11710f4324b591471128))
+* fix input copy ([1201c0c](https://github.com/geops/rvf-mobility-web-component/commit/1201c0c478dfb0d175c914c57916d1ff6698bf71))
+* highlight hidden by default ([6882da0](https://github.com/geops/rvf-mobility-web-component/commit/6882da08563820c133dd2c132e0990054d0b33b7))
+* make the layers permalink params work ([cf961b2](https://github.com/geops/rvf-mobility-web-component/commit/cf961b2ec5edfc6424baae4d7f43fd8866f26083))
+* make the layers permalink params work ([0559bc8](https://github.com/geops/rvf-mobility-web-component/commit/0559bc8e6dee0859abc53f9d2a6d7d2d04c186b8))
+* move rvf customs code in other components ([0fff2d7](https://github.com/geops/rvf-mobility-web-component/commit/0fff2d7c260e876dffa042966892796f35776de0))
+* preserve drawing buffer when necessary ([5e4f199](https://github.com/geops/rvf-mobility-web-component/commit/5e4f19975b3dcc50cbc66b483143efdaa72b8cf0))
+* read properly the layers url param ([926ddfd](https://github.com/geops/rvf-mobility-web-component/commit/926ddfd4bd1a62502994cd8d7ad60f7714483b40))
+* remove default zoom attribute ([b45821a](https://github.com/geops/rvf-mobility-web-component/commit/b45821ad08ac39bc55e46e15b229f33d117fc646))
+* set width in pixels to keep always the same size ([29ff7c9](https://github.com/geops/rvf-mobility-web-component/commit/29ff7c9142a3243809ad70b2cf827ed137e96f31))
+
 ### [0.1.64](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.63...v0.1.64) (2025-10-14)
 
 

package/docutils.js

@@ -1,4 +1,8 @@
-function onLoad(wc, attributes, events, pkgSrc) {
+/* 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, urlParameters = {}) {
   /* Show private attributes for dev purpose */
   const showPrivate =
     new URLSearchParams(window.location.search).get("private") === "true";
@@ -8,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)
@@ -35,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)
@@ -49,30 +72,66 @@ function onLoad(wc, attributes, events, pkgSrc) {
       return acc;
     }, {});
 
-  /* Build HTML */
-  const attrsContent = generateAttributesTable(
-    wc,
-    attrs,
-    booleanAttrs,
-    booleanTrueByDefault,
-    descriptionByAttr,
-    defaultValueByAttr,
-    reloadAttrs,
-  );
-  console.log(attrsContent);
-  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,
@@ -85,7 +144,7 @@ function onLoad(wc, attributes, events, pkgSrc) {
       pkgSrc,
     );
   });
-  applyPermalinkParameters(wc);
+  applyPermalinkParameters(wc, attributes);
   evts.forEach((eventName) => {
     wc.addEventListener(eventName, (event) => {
       console.log(`${eventName} event`, event);
@@ -93,7 +152,7 @@ function onLoad(wc, attributes, events, pkgSrc) {
   });
 }
 
-function applyPermalinkParameters(wc) {
+function applyPermalinkParameters(wc, attributes) {
   const params = new URLSearchParams(window.location.search);
 
   // Apply fullscreen mode
@@ -126,20 +185,26 @@ function applyPermalinkParameters(wc) {
   }
 
   // Apply all url parameters as attribute of the web component and fill the input fields.
-  params.forEach((value, key) => {
-    wc.setAttribute(key, value);
-    const input = document.querySelector(`[name=${key}]`);
-    if (input) {
-      if (input.type === "checkbox") {
-        input.checked = value !== "false";
-      } else {
-        input.value = value;
+  if (!doNotApplyAttributesUrlParameters) {
+    params.forEach((value, key) => {
+      if (!(key in attributes)) {
+        return;
       }
-    }
-  });
+      wc.setAttribute(key, value);
+
+      const input = document.querySelector(`[name=${key}]`);
+      if (input) {
+        if (input.type === "checkbox") {
+          input.checked = value !== "false";
+        } else {
+          input.value = value;
+        }
+      }
+    });
+  }
 
   // Get an apikey if there is none defined
-  if (!wc.getAttribute("apikey")) {
+  if (!wc.getAttribute("apikey") && !attributes.apikey.defaultValue) {
     fetch("https://backend.developer.geops.io/publickey")
       .then((response) => {
         return response.json();
@@ -183,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;
@@ -193,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>
   `;
@@ -334,10 +406,12 @@ function onAttributeUpdate(wc, key, value, reloadAttrs) {
     window.location.reload();
   } else {
     wc.setAttribute(key, value);
-    window.history.replaceState(
-      {},
-      "",
-      `${window.location.pathname}?${params}`,
-    );
+    if (!doNotApplyAttributesUrlParameters) {
+      window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}?${params}`,
+      );
+    }
   }
 }

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>
@@ -48,26 +48,38 @@
         id="code"
         class="overflow-auto rounded bg-slate-800 p-4 text-slate-200"
       ></pre>
-
       <geops-mobility
         id="map"
         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>
@@ -88,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>