@geops/rvf-mobility-web-component 0.1.60 → 0.1.62

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 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.62](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.61...v0.1.62) (2025-10-13)
+
+
+### 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))
+* add lnp highlight and link component ([5cd87b6](https://github.com/geops/rvf-mobility-web-component/commit/5cd87b6f424f1440ffcc2c747e7ae6f89d1cfe0e))
+* add new notifications list web component ([d782521](https://github.com/geops/rvf-mobility-web-component/commit/d7825217b90536cd281a57468fa83a498496bfd9))
+* clear properly the state ([718dec6](https://github.com/geops/rvf-mobility-web-component/commit/718dec62f4db3ff6a9d03a6be6f5e03522c09a1d))
+* **MapsetLayer:** add parameters to add a mapset layer ([35b9a67](https://github.com/geops/rvf-mobility-web-component/commit/35b9a67a2955099707db733170bee83521c0ecb1))
+* **MapsetLayer:** add parameters to add a mapset layer ([0651c0e](https://github.com/geops/rvf-mobility-web-component/commit/0651c0e591a8460587dc8a127b4ff96c98a64a19))
+
+
+### Bug Fixes
+
+*  add links and images ([b1402cb](https://github.com/geops/rvf-mobility-web-component/commit/b1402cba3923d425ffb6c1b63ea67ca5d3c9be4e))
+* activate use of graph bbox parameter ([#25](https://github.com/geops/rvf-mobility-web-component/issues/25)) ([56960a1](https://github.com/geops/rvf-mobility-web-component/commit/56960a18c672e3ad7a7e76096222d4547a5d5ad2))
+* add fonts of rvf ([7005f3b](https://github.com/geops/rvf-mobility-web-component/commit/7005f3b080a91aecdd258125160c1c414025ae22))
+* add highlight lnp features ([93ed570](https://github.com/geops/rvf-mobility-web-component/commit/93ed5702733379c4059e45a63d23eb78fc11021a))
+* add linksand fix dates display ([e0b1927](https://github.com/geops/rvf-mobility-web-component/commit/e0b1927b6d4abd2369a8c8c67f42f75db579c563))
+* add missing html page ([75f7e1e](https://github.com/geops/rvf-mobility-web-component/commit/75f7e1e9f9ca9b75c0322d55d90e3f4a752d1d7c))
+* add source-sans-3 ([2009840](https://github.com/geops/rvf-mobility-web-component/commit/20098404889fde0d463434de5b1b832a4ce70a3f))
+* avoid empty array ([3732bbe](https://github.com/geops/rvf-mobility-web-component/commit/3732bbee22064135ef01866ea9870a0cf15f0fc3))
+* avoid undefined layer comparaison ([60652b1](https://github.com/geops/rvf-mobility-web-component/commit/60652b196c3798e3a9fad049b6a9bade4ad31401))
+* change notifications name ([93de3fd](https://github.com/geops/rvf-mobility-web-component/commit/93de3fd75682d86abcf64d137a1d3fd762336ba2))
+* deactivate graphs ([24c96d0](https://github.com/geops/rvf-mobility-web-component/commit/24c96d0861c462508cc13e1c7f819059b9433ee7))
+* fix click on features ([529b71c](https://github.com/geops/rvf-mobility-web-component/commit/529b71c799e6016b815cd2d1f3aeb6a36b3198b2))
+* fix css ([6cec249](https://github.com/geops/rvf-mobility-web-component/commit/6cec249106447ba2095f1049edd0499e827f5d5f))
+* fix highlight von mobility point ([4d7616c](https://github.com/geops/rvf-mobility-web-component/commit/4d7616c56dcbd4d759f626418bc7a20bf7b9c755))
+* fix pointer events on menus ([f83ba3c](https://github.com/geops/rvf-mobility-web-component/commit/f83ba3c1674fa23515b68b4e6044623b5e902e41))
+* fix pointer-events ([a81a1fc](https://github.com/geops/rvf-mobility-web-component/commit/a81a1fc18ae0b21238e726452f9a81488fecfaac))
+* get more infos about station and cluster ([18cd22c](https://github.com/geops/rvf-mobility-web-component/commit/18cd22cdde580ba22c5a54a13d6644ae8a3ab497))
+* load mor feature infos only when necessary ([1b7b4cb](https://github.com/geops/rvf-mobility-web-component/commit/1b7b4cb63fc9142ed873c9f3301e4fc05dd7396e))
+* **MapsetLayer:** only fetch kmls if layer is visible ([d1272c0](https://github.com/geops/rvf-mobility-web-component/commit/d1272c054174ced5c6203d5e3ec43b6a1596bf82))
+* **MapsetLayer:** reload plans on pan/zoom ([0a45a0c](https://github.com/geops/rvf-mobility-web-component/commit/0a45a0c93242450c9d5ec9d44ca7199f9f49dd9a))
+* merge upstream and add tests for default values ([7cf94f1](https://github.com/geops/rvf-mobility-web-component/commit/7cf94f1d9a46d8d38a25bb1b4294bc0e530adcff))
+* ordered the layer tree ([fbefac7](https://github.com/geops/rvf-mobility-web-component/commit/fbefac70df808b992f144b875e09a8d7ae8a6266))
+* reduc copyright font size ([a0fa433](https://github.com/geops/rvf-mobility-web-component/commit/a0fa433d4c77786d26dbbdb446c5811a0ae004a8))
+* reduc copyright font size ([8b3875c](https://github.com/geops/rvf-mobility-web-component/commit/8b3875c72c65251981dafb0293f6a61c2aabce67))
+* use a fix layer order in layertree ([4a5fe10](https://github.com/geops/rvf-mobility-web-component/commit/4a5fe10f3dc8fb8bcb7d862b30199fb0a2634025))
+* use good filter ([66840ef](https://github.com/geops/rvf-mobility-web-component/commit/66840efb733435dbc421fb7420d2761654b4d8e6))
+* use proper filter ([ee26cb4](https://github.com/geops/rvf-mobility-web-component/commit/ee26cb46e785e279e51112f0361d0f54351b4fbb))
+* use proper filter ([543d682](https://github.com/geops/rvf-mobility-web-component/commit/543d682436e42ea4b788b73b1634fe823b144d22))
+* use proper template ([c5ea26b](https://github.com/geops/rvf-mobility-web-component/commit/c5ea26b7d0300fa26f24ace8ba146683bb471fa6))
+
+### [0.1.61](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.60...v0.1.61) (2025-10-07)
+
 ### [0.1.60](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.59...v0.1.60) (2025-10-07)
 
 

package/README.md

@@ -19,6 +19,7 @@ Most components in RVF are mostly very generic and could be migrate to the main
 - [RVF design system](https://www.rvf.de/muster#c4523)
 - [Sketch file design system](https://www.sketch.com/s/71e4d120-f65f-4451-80c8-0a7e60e22265/p/22207D12-0F28-49D1-BCA4-1EDEF8B8BFE9/canvas)
 - [Sketch file design website](https://www.sketch.com/s/25c65997-d5d5-426f-b86c-a68c2de03524)
+- [Adobe web project for fonts (user account in vault)](https://fonts.adobe.com/my_fonts#web_projects-section)
 - [VAG colors](https://www.vag-freiburg.de/fahrplan/linien-fahrplaene)
 - [Client test website](https://relaunch.rvf.de/geops-test)
 - [Netzplan on client production website](https://www.rvf.de/fahrtinfo/netzplan)

package/docutils.js

@@ -1,4 +1,98 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+function onLoad(wc, attributes, events, pkgSrc) {
+  /* Show private attributes for dev purpose */
+  const showPrivate =
+    new URLSearchParams(window.location.search).get("private") === "true";
+
+  /* Attributes */
+  const attrs = Object.keys(attributes);
+  const booleanAttrs = Object.entries(attributes)
+    .filter(([, attr]) => attr.type === "boolean")
+    .map(([key]) => key);
+  const booleanTrueByDefault = booleanAttrs.filter(
+    (key) => attributes[key].defaultValue === "true",
+  );
+  const reloadAttrs = Object.entries(attributes)
+    .filter(([key, attr]) => !!attr.reload)
+    .map(([key]) => key);
+
+  const descriptionByAttr = Object.entries(attributes)
+    .filter(([key, attr]) => {
+      if (showPrivate) {
+        return true;
+      }
+      return attr.public;
+    })
+    .reduce((acc, [key, attr]) => {
+      acc[key] = attr.description;
+      return acc;
+    }, {});
+
+  const defaultValueByAttr = Object.entries(attributes).reduce(
+    (acc, [key, attr]) => {
+      acc[key] = attr.defaultValue;
+      return acc;
+    },
+    {},
+  );
+
+  /* Events */
+  const evts = Object.keys(events);
+  const descriptionByEvent = Object.entries(events)
+    .filter(([key, attr]) => {
+      if (showPrivate) {
+        return true;
+      }
+      return attr.public;
+    })
+    .reduce((acc, [key, attr]) => {
+      acc[key] = attr.description;
+      return acc;
+    }, {});
+
+  /* Build HTML */
+  const attrsContent = generateAttributesTable(
+    wc,
+    attrs,
+    booleanAttrs,
+    booleanTrueByDefault,
+    descriptionByAttr,
+    defaultValueByAttr,
+    reloadAttrs,
+  );
+  console.log(attrsContent);
+  if (attrsContent) {
+    document.querySelector("#attributes").innerHTML = attrsContent;
+  } else {
+    document.querySelector("#attributesDoc").remove();
+  }
+
+  const evtsContent = generateEventsTable(wc, evts, descriptionByEvent);
+  if (evtsContent) {
+    document.querySelector("#events").innerHTML = evtsContent;
+  } else {
+    document.querySelector("#eventsDoc").remove();
+  }
+
+  document.querySelector("#code").innerHTML = generateCodeText(
+    wc,
+    attrs,
+    pkgSrc,
+  );
+  wc.addEventListener("mwc:attribute", (event) => {
+    document.querySelector("#code").innerHTML = generateCodeText(
+      wc,
+      attrs,
+      pkgSrc,
+    );
+  });
+  applyPermalinkParameters(wc);
+  evts.forEach((eventName) => {
+    wc.addEventListener(eventName, (event) => {
+      console.log(`${eventName} event`, event);
+    });
+  });
+}
+
 function applyPermalinkParameters(wc) {
   const params = new URLSearchParams(window.location.search);
 
@@ -68,6 +162,9 @@ function generateAttributesTable(
   defaultValueByAttr = {},
   reloadAttrs = [],
 ) {
+  if (!attrs.filter((key) => descriptionByAttr[key])?.length) {
+    return null;
+  }
   let innerHMTL = `<table class="table-auto w-full" >
     <thead>
       <tr>
@@ -112,8 +209,7 @@ function generateAttributesTable(
           type="text"
           class="border"
           name="${key}"
-          value="${wc.getAttribute(key) || ""}" 
-          placeholder="${defaultValueByAttr[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>`
       }
@@ -139,7 +235,7 @@ function generateCodeText(
   let codeText = "";
   codeText = `&lt;script\n\ttype="module"\n\tsrc="${pkgSrc}"&gt;
 &lt;/script&gt;
-&lt;${wc.localName}\n\tid="map"\n\tstyle="display:block;width:100%;height:500px;border:1px solid #e5e7eb;border-radius:16px;"`;
+&lt;${wc.localName}${wc.id ? '\n\tid="' + wc.id + '"' : ""}\n\tstyle="display:block;width:100%;height:500px;border:1px solid #e5e7eb;border-radius:16px;"`;
 
   attrs.forEach((key) => {
     const attributeValue = wc.getAttribute(key);
@@ -166,6 +262,9 @@ function generateCodeText(
 
 // Generates a HTML table with all events of a web component
 function generateEventsTable(wc, events, descriptionByEvent = {}) {
+  if (!events?.length) {
+    return null;
+  }
   let innerHMTL = `<table class="table-auto w-full" >
     <thead>
       <tr>

package/index.html

@@ -37,6 +37,8 @@
       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"
       style="display: none"
     ></div>
+    </script>
+<!-- <button onclick="document.getElementById('map').setAttribute('center',      '877430.64,6118377.18');document.getElementById('map').setAttribute('zoom','17.02');">Center and zoom to Denzligen</button> -->
     <div class="pt-2" style="display: none"></div>
     <div id="doc" style="display: none" class="mx-auto max-w-3xl space-y-4">
       <h1 class="flex gap-4"><img src="./Logo.svg">Mobility Web Component</h1>
@@ -48,27 +50,32 @@
       ></pre>
 
       <geops-mobility
-        class="block h-128 w-full resize overflow-hidden rounded-2xl border"
+        id="map"
+        class="block h-128 w-full resize overflow-hidden rounded-[16px] border"
       ></geops-mobility>
 
       <br />
-      <h2 class="text-xl font-bold">Attributes</h2>
-      <div id="attributes"></div>
-      <h2 class="text-xl font-bold">Events</h2>
-      <pre id="code" class="rounded bg-slate-800 p-4 text-slate-200">
+      <div id="attributesDoc">
+        <h2 class="text-xl font-bold">Attributes</h2>
+        <div id="attributes"></div>
+      </div>
+      <div id="eventsDoc">
+        <h2 class="text-xl font-bold">Events</h2>
+        <pre class="rounded bg-slate-800 p-4 text-slate-200">
 document.getElementById('map').addEventListener('mwc:attribute', (event) => {
   console.log('Display last data received:', event.data);
 });</pre
-      >
-      <div id="events"></div>
+        >
+        <div id="events"></div>
+      </div>
       <br />
       <br />
-      <!--h1 class="text-xl font-bold">More mobility web components</h1>
+      <h1 class="text-xl font-bold">More mobility web components</h1>
       <p>
-        <a href="search.html" target="_blank"
-          >&gt;&gt; Usage example Search Component</a
+        <a href="notifications.html" target="_blank"
+          >&gt;&gt; Usage example Notifications Web Component</a
         >
-      </p> -->
+      </p>
     </div>
     <br />
     <br />
@@ -77,101 +84,28 @@ document.getElementById('map').addEventListener('mwc:attribute', (event) => {
       const wc = document.querySelector("geops-mobility");
 
       window.addEventListener("load", () => {
+        const attributes = window.MobilityMapAttributes;
+        const events = window.MobilityMapEvents;
 
-        // Add special parameters
-        window.MobilityMapAttributes.fullscreen = {
+        // Add page parameters
+        attributes.fullscreen = {
           type: "boolean",
           defaultValue: "false",
           description: `Load the page in fullscreen mode.`,
           reload: true,
+          public: false,
         };
 
-        window.MobilityMapAttributes.debug = {
+        attributes.debug = {
           type: "boolean",
           defaultValue: "false",
-          description: "Displays debug information for vehicles when true, use only for debugging.",
+          description:
+            "Displays debug information for vehicles when true, use only for debugging.",
           reload: true,
+          public: false,
         };
 
-        /* Attributes */
-        const attrs = Object.keys(MobilityMapAttributes);
-        const booleanAttrs = Object.entries(MobilityMapAttributes)
-          .filter(([, attr]) => attr.type === "boolean")
-          .map(([key]) => key);
-        const booleanTrueByDefault = booleanAttrs.filter(
-          (key) => MobilityMapAttributes[key].defaultValue === "true",
-        );
-        const reloadAttrs = Object.entries(MobilityMapAttributes)
-          .filter(([key, attr]) => !!attr.reload)
-          .map(([key]) => key);
-
-        const descriptionByAttr = Object.entries(MobilityMapAttributes).reduce((acc, [key, attr]) => {
-            acc[key] = attr.description;
-            return acc;
-          }, {});
-
-        const defaultValueByAttr = Object.entries(MobilityMapAttributes).reduce((acc, [key, attr]) => {
-            acc[key] = attr.defaultValue;
-            return acc;
-          }, {});
-
-        /* Events */
-        const events = [
-          "mwc:selectedfeature",
-          // "mwc:stopssearchselect",
-          // "mwc:attribute",
-          // "mwc:singleclick",
-          // "mwc:permalink",
-          // "mwc:messageready",
-        ];
-        const descriptionByEvent = {
-          "mwc:selectedfeature":
-            "Event fired when a feature is selected on the map. The event data contains the selected feature in GeoJSON format.",
-          "mwc:stopssearchselect":
-            "Only when search attribute is 'true'. Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
-          "mwc:attribute":
-            "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
-          "mwc:permalink":
-            "Event fired when the map's state changes. The event data contains the permalink URL search parameters as string.",
-          "mwc:messageready":
-            "Only if the web-component is embedded in an iframe. Message event fired when the web component is ready to receive messages from parent window. ",
-          "mwc:singleclick":
-            "Event fired when the map is clicked. The event data contains the map coordinates in EPSG:3857 and the pixel coordinates.",
-        };
-
-        document.querySelector("#attributes").innerHTML =
-          generateAttributesTable(
-            wc,
-            attrs,
-            booleanAttrs,
-            booleanTrueByDefault,
-            descriptionByAttr,
-            defaultValueByAttr,
-            reloadAttrs,
-          );
-        document.querySelector("#events").innerHTML = generateEventsTable(
-          wc,
-          events,
-          descriptionByEvent,
-        );
-        document.querySelector("#code").innerHTML = generateCodeText(
-          wc,
-          attrs,
-          pkgSrc,
-        );
-        wc.addEventListener("mwc:attribute", (event) => {
-          document.querySelector("#code").innerHTML = generateCodeText(
-            wc,
-            attrs,
-            pkgSrc,
-          );
-        });
-        applyPermalinkParameters(wc);
-        events.forEach((eventName) => {
-          wc.addEventListener(eventName, (event) => {
-            console.log(`${eventName} event`, event);
-          });
-        });
+        onLoad(wc, attributes, events, pkgSrc);
       });
     </script>
   </body>