@geops/rvf-mobility-web-component 0.1.10 → 0.1.11

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 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.11](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.10...v0.1.11) (2024-12-17)
+
+
+### Features
+
+* add and hide pois layer ([f99d82a](https://github.com/geops/rvf-mobility-web-component/commit/f99d82a944d9daeb0acae9b0c3519cb8bbb608d7))
+* add copyright in export and add feature details on click ([#10](https://github.com/geops/rvf-mobility-web-component/issues/10)) ([3e2ed59](https://github.com/geops/rvf-mobility-web-component/commit/3e2ed597c374e2edfb2d1a8e4b3afe0e4dc80e0a))
+* add custom click listener ([74de9e4](https://github.com/geops/rvf-mobility-web-component/commit/74de9e42125ee068147d67a17324ba06fd1727a1))
+* add export pdf ([#7](https://github.com/geops/rvf-mobility-web-component/issues/7)) ([3409f8b](https://github.com/geops/rvf-mobility-web-component/commit/3409f8baf257dcacc3c823355209e3c44214a31b))
+* add rvf context and rvf print menu button ([37f6ddf](https://github.com/geops/rvf-mobility-web-component/commit/37f6ddfcec4a950539c41178575dc841c5824252))
+* added layers tree component ([#9](https://github.com/geops/rvf-mobility-web-component/issues/9)) ([ceb0220](https://github.com/geops/rvf-mobility-web-component/commit/ceb022025eeb7b4cf25ff9a38afe8950b7d1d651))
+
+
+### Bug Fixes
+
+* add better types ([c5ddf70](https://github.com/geops/rvf-mobility-web-component/commit/c5ddf7041036ab1c5e702b6d6c702bf9747df396))
+* add lonlat to singleclick event ([786c79b](https://github.com/geops/rvf-mobility-web-component/commit/786c79bdd2fae619c522f635217684c05347bfe9))
+* add mobidata bw layers as a group ([2aab2a5](https://github.com/geops/rvf-mobility-web-component/commit/2aab2a570c3e6214830895c146a5a95836a75516))
+* add selected state ([ea6e84e](https://github.com/geops/rvf-mobility-web-component/commit/ea6e84ee265d734a502e5e2299571bd977133433))
+* create a correct layer tree ([1d886b5](https://github.com/geops/rvf-mobility-web-component/commit/1d886b588821467db431bddc45821ba21b471946))
+* dispatch event on html element ([e36f61d](https://github.com/geops/rvf-mobility-web-component/commit/e36f61d8295193896aba57694a4de0141aa8d0f8))
+* display the copyright after an export ([cb957b7](https://github.com/geops/rvf-mobility-web-component/commit/cb957b71a528a2ad466e8bc0f0a1ddf8eb844920))
+* hide print menu for now ([43dc47f](https://github.com/geops/rvf-mobility-web-component/commit/43dc47fc3ba17f8af10b057d61cce33268ffdba6))
+* improve demo ([3ca67ea](https://github.com/geops/rvf-mobility-web-component/commit/3ca67eacf74b89cd396a66706b111d0e9d8963a0))
+* improve demo ([1ed0b7e](https://github.com/geops/rvf-mobility-web-component/commit/1ed0b7e078b23c1bc3d1bbe1743d45b318b129b5))
+* make realtime use the map pixel ratio ([dce1004](https://github.com/geops/rvf-mobility-web-component/commit/dce1004f9d945d5cd260e41660a71d49ce684e18))
+* manage boolean attributes ([be816a9](https://github.com/geops/rvf-mobility-web-component/commit/be816a9f005a6979af1b0bf02034e9fe1bb22218))
+* memoize onselect callback ([1d7e739](https://github.com/geops/rvf-mobility-web-component/commit/1d7e739e08da0d8d2ebb6594f83abdf9a655e658))
+* remove useless xyz ([926cca7](https://github.com/geops/rvf-mobility-web-component/commit/926cca7e235265ccc6ab1ffb8241aa65454500e0))
+* use also input.css for components ([1284687](https://github.com/geops/rvf-mobility-web-component/commit/128468703b3e1f50b851050870205364f43e5def))
+* use memo ([0a3f107](https://github.com/geops/rvf-mobility-web-component/commit/0a3f1074bbc75b371c6375f91a9c9975a9627ed4))
+* use proper rendercomplete event ([8cd5136](https://github.com/geops/rvf-mobility-web-component/commit/8cd51362b012bd7ce482355a11a6007ca705a12a))
+
 ### [0.1.10](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.9...v0.1.10) (2024-12-05)
 
 

package/docutils.js

@@ -0,0 +1,198 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function applyPermalinkParameters(wc) {
+  const params = new URLSearchParams(window.location.search);
+
+  // Apply fullscreen mode
+  if (params.get("fullscreen") === "true") {
+    wc.parentElement.removeChild(wc);
+    wc.className = "absolute w-full h-full inset-0";
+    document.body.appendChild(wc);
+    document.body.style = "padding:0;";
+  } else {
+    const doc = document.querySelectorAll("#doc");
+    doc.forEach((d) => {
+      return (d.style.display = "block");
+    });
+  }
+  // Apply x,y,z
+  if (
+    params.get("permalink") === "true" &&
+    params.get("x") &&
+    params.get("y")
+  ) {
+    wc.setAttribute("center", `${params.get("x")},${params.get("y")}`);
+    params.delete("x");
+    params.delete("y");
+  }
+
+  if (params.get("permalink") === "true" && params.get("z")) {
+    wc.setAttribute("zoom", params.get("z"));
+    params.delete("z");
+  }
+
+  // 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;
+      }
+    }
+  });
+
+  // Get an apikey if there is none defined
+  if (!wc.getAttribute("apikey")) {
+    fetch("https://backend.developer.geops.io/publickey")
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        if (data && data.success) {
+          wc.setAttribute("apikey", data.key);
+        }
+      });
+  }
+}
+
+// Generates a HTML table with all attributes of a web component
+function generateAttributesTable(wc, attrs, booleanAttrs = []) {
+  let innerHMTL = `<table class="table-auto w-full" >
+    <thead>
+      <tr>
+        <th class="border px-4 py-2">Name</th>
+        <!--th class="border px-4 py-2">Default</th>
+        <th class="border px-4 py-2">Description</th-->
+        <th class="border px-4 py-2">Value</th>
+      </tr>
+    </thead>
+    <tbody>`;
+  innerHMTL += attrs
+    .sort()
+    .map((key) => {
+      const isBoolean = booleanAttrs.includes(key);
+      return `
+    <tr>
+      <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">
+      ${
+        isBoolean
+          ? `<input
+          type="checkbox"
+          class="border"
+          name="${key}"
+          ${wc.getAttribute(key) === "true" ? "checked" : ""}
+          onchange="document.querySelector('${wc.localName}').setAttribute('${key}', this.checked);onAttributeUpdate(document.querySelector('${wc.localName}'),this.name, this.checked);" 
+          />`
+          : `
+        <input
+          type="text"
+          class="border"
+          name="${key}"
+          value="${wc.getAttribute(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);">Update</button>`
+      }
+      </div>
+        </td>
+    </tr>
+  `;
+    })
+    .join("");
+
+  innerHMTL += `</tbody>
+  </table>`;
+  return innerHMTL;
+}
+
+// Generates a code text for the web component
+function generateCodeText(
+  wc,
+  attrs,
+  pkgSrc = "https://www.unpkg.com/@geops/mobility-web-component",
+) {
+  let codeText = "";
+  codeText = `&lt;script\n\ttype="module"\n\tsrc="${pkgSrc}"&gt;
+&lt;/script&gt;
+&lt;${wc.localName} style="display:block;width:100%;height:500px;"`;
+
+  attrs.forEach((key) => {
+    const attributeValue = wc.getAttribute(key);
+    const inputValue = document.querySelector(`[name=${key}]`).value;
+    if (attributeValue !== null && attributeValue === inputValue) {
+      codeText += `\n\t${[key, '"' + wc.getAttribute(key) + '"'].join("=")}`;
+    }
+  });
+
+  return codeText + `&gt;\n&lt;/${wc.localName}&gt;`;
+}
+
+// Generates a HTML table with all events of a web component
+function generateEventsTable(wc, events) {
+  let innerHMTL = `<table class="table-auto w-full" >
+    <thead>
+      <tr>
+        <th class="border px-4 py-2">Name</th>
+        <th class="border px-4 py-2">Last data received</th>
+      </tr>
+    </thead>
+    <tbody>`;
+  innerHMTL += events
+    .sort()
+    .map((key) => {
+      wc.addEventListener(key, (event) => {
+        let stringify;
+        try {
+          stringify = JSON.stringify(event, undefined, 4);
+        } catch (e) {
+          stringify =
+            "Object not stringifyable, open the console (F12) to see the object received.";
+          console.log(key + " event", event);
+        }
+        if (key === "singleclick") {
+          stringify = "event.data.lonlat:\n";
+          stringify += JSON.stringify(event.data.lonlat, undefined, 4);
+          stringify += "\n";
+          stringify += "event.data.features:\n";
+          stringify += JSON.stringify(event.data.features, undefined, 4);
+        }
+
+        document.querySelector(`[name='${key}']`).value = stringify.toString();
+      });
+      return `
+        <tr>
+          <td class="border px-4 py-2">${key}</td>
+          <td class="border px-4 py-2">
+            <div class="flex gap-4">
+              <textarea
+                type="text"
+                class="border w-full h-300"
+                style="height:300px;"
+                name="${key}"
+              ></textarea>
+            </div>
+          </td>
+        </tr>
+      `;
+    })
+    .join("");
+
+  innerHMTL += `</tbody>
+  </table>`;
+
+  return innerHMTL;
+}
+
+// Update url on attributes update via inputs
+function onAttributeUpdate(wc, key, value) {
+  const params = new URLSearchParams(window.location.search);
+  params.set(key, value);
+  wc.setAttribute(key, value);
+  window.history.replaceState({}, "", `${window.location.pathname}?${params}`);
+}

package/index.html

@@ -18,10 +18,12 @@
       }
     </script>
     <script type="module" src="./index.js"></script>
+    <script src="./docutils.js"></script>
     <link rel="stylesheet" type="text/css" href="./output.css" />
     <style>
       ::-webkit-scrollbar {
-        width: 3px;
+        width: 10px;
+        height: 10px;
       }
       a {
         text-decoration: underline;
@@ -29,248 +31,77 @@
     </style>
   </head>
   <body class="p-8">
-    <div id="doc" style="display: none" class="mx-auto max-w-5xl space-y-4">
+    <!-- tailwind hack to add class used in docutils -->
+    <div class="border px-4 py-2 table-auto w-full flex gap-4 p-2 bg-black text-white hover:bg-gray-700" 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>
       <p>This is a demo of the Mobility Web Component.</p>
       <h2>Usage example</h2>
       <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded"></pre>
 
-      <!-- Default -->
       <geops-mobility
         class="h-96 block resize overflow-auto w-full"
       ></geops-mobility>
 
       <br />
-      <!-- <h2 class="text-xl font-bold">Attributes</h2> -->
-      <!-- <button
-        class="border rounded p-2 hover:bg-slate-200"
-        onclick="toggleBooleanAttribute('search')"
-      >
-        Toggle search
-      </button> -->
-
-      <!-- <table class="table-auto w-full" >
-        <thead>
-          <tr>
-            <th class="border px-4 py-2">Name</th>
-            <th class="border px-4 py-2">Default</th>
-            <th class="border px-4 py-2">Description</th>
-            <th class="border px-4 py-2">Selected</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td class="border px-4 py-2">apikey</td>
-            <td class="border px-4 py-2"></td>
-            <td class="border px-4 py-2"></td>
-            <td class="border px-4 py-2">
-              <input
-                type="text"
-                class="border"
-                value=""
-                onchange="map.setAttribute('apikey', this.value)"/>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="border px-4 py-2">search</td>
-            <td class="border px-4 py-2">true</td>
-            <td class="border px-4 py-2"></td>
-            <td class="border px-4 py-2">
-              <select
-              class="border px-4 py-2"
-                name="baselayer"
-                onchange="map.setAttribute(this.name, this.value)">
-                <option value="travic_v2">travic_v2</option>
-                <option value="base_dark_v2">base_dark_v2</option>
-              </select>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="border px-4 py-2">realtime</td>
-            <td class="border px-4 py-2">true</td>
-            <td class="border px-4 py-2"></td>
-            <td class="border px-4 py-2">
-              <input
-                name="realtime"
-                type="checkbox"
-                checked
-                onchange="toggleBooleanAttribute(this.name)"/>
-            </td>
-          </tr>
-          <tr>
-            <td class="border px-4 py-2">search</td>
-            <td class="border px-4 py-2">true</td>
-            <td class="border px-4 py-2"></td>
-            <td class="border px-4 py-2">
-              <input
-                name="search"
-                type="checkbox"
-                checked
-                onchange="toggleBooleanAttribute(this.name)"/>
-            </td>
-          </tr>
-        </tbody>
-      </table> -->
-
-      <!-- <br />
+      <h2 class="text-xl font-bold">Attributes</h2>
+      <div id="attributes"></div>
+      <h2 class="text-xl font-bold">Events</h2>
+      <div id="events"></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
         >
       </p> -->
     </div>
-
     <br />
     <br />
     <script type="text/javascript">
-      params = new URLSearchParams(window.location.search);
-
-      // There should be only on map on the html page at this point
-      const doc = document.querySelectorAll("#doc");
-      const map = document.querySelector("geops-mobility");
-
-      if (params.get("fullscreen") === "true") {
-        map.parentElement.removeChild(map);
-        map.className = "absolute w-full h-full inset-0";
-        document.body.appendChild(map);
-        document.body.style = "padding:0;";
-      } else {
-        doc.forEach((d) => (d.style.display = "block"));
-      }
-      params.delete("fullscreen");
+      const pkgSrc = "https://www.unpkg.com/@geops/rvf-mobility-web-component";
+      const wc = document.querySelector("geops-mobility");
 
-      if (
-        params.get("permalink") !== "false" &&
-        params.get("x") &&
-        params.get("y")
-      ) {
-        map.setAttribute("center", `${params.get("x")},${params.get("y")}`);
-        params.delete("x");
-        params.delete("y");
-      }
-
-      if (params.get("permalink") !== "false" && params.get("z")) {
-        map.setAttribute("zoom", params.get("z"));
-        params.delete("z");
-      }
-
-      // Apply all url parameters as attribute of the web component
-      params.forEach((value, key) => {
-        map.setAttribute(key, value);
-        const input = document.querySelector(`input[name=${key}]`);
-        if (input) {
-          if (input.type === "checkbox") {
-            input.checked = value !== "false";
-          } else {
-           input.value = value;
-          }
-        }
-      });
-
-      // if (!map.getAttribute("apikey")) {
-      //   fetch("https://backend.developer.geops.io/publickey")
-      //     .then((response) => response.json())
-      //     .then((data) => {
-      //       if (data && data.success) {
-      //         map.setAttribute("apikey", data.key);
-      //       }
-      //     });
-      // }
-
-      // Listen StopsSearch event
-      window.addEventListener("mwc:stopssearchselect", (event) => {
-        console.log("mwc:stopssearchselect event: ", event.data);
-        // window.top.postMessage(event.data, "*");
-      });
-
-      // Send url search params to parent window
-      window.addEventListener("mwc:attribute", (event) => {
-        console.log("mwc:attribute event: ", event.data);
-        window.top.postMessage(new URLSearchParams(event.data).toString(), "*");
-      });
-
-      // Listen window event
-      window.addEventListener("message", (event) => {
-        console.log("message event: ", event);
-      });
-
-      function toggleBooleanAttribute(name) {
-        const value = map.getAttribute(name);
-        map.setAttribute(name, value === "false" ? "true" : "false");
-        const urlParams = new URLSearchParams(window.location.search);
-        urlParams.set(name, map.getAttribute(name));
-        window.history.replaceState(
-          {},
-          "",
-          `${window.location.pathname}?${urlParams}`,
-        );
-        generateCodeText();
-      }
       const attrs = [
-          "apikey",
-          "baselayer",
-          "center",
-          "geolocation",
-          "mapsurl",
-          "mots",
-          "notification",
-          "notificationat",
-          "notificationurl",
-          "notificationbeforelayerid",
+          // "apikey",
+          // "baselayer",
+          // "center",
+          // "geolocation",
+          // "mapsurl",
+          // "mots",
+          // "notification",
+          // "notificationat",
+          // "notificationurl",
+          // "notificationbeforelayerid",
           "realtime",
-          "realtimeUrl",
+          // "realtimeUrl",
           "search",
-          "tenant",
-          "zoom",
-          "permalink",
+          // "tenant",
+          // "zoom",
+          // "permalink",
         ];
 
-      function generateCodeText() {
-        const codeElt = document.querySelector("#code");
-        let codeText = "";
-        codeText = `&lt;script\n\ttype="module"\n\tsrc="https://www.unpkg.com/@geops/rvf-mobility-web-component"&gt;
-&lt;/script&gt;
-&lt;geops-mobility style="display:block;height:600px;width:100%;" `;
-
-        attrs.forEach((key) => {
-          if (key == "apikey") {
-            // codeText += `\n\tapikey="YOUR_GEOPS_API_KEY"`;
-          } else if (map.getAttribute(key) !== null) {
-            codeText += `\n\t${[key, '"' + map.getAttribute(key) + '"'].join("=")}`;
-          } else if (key == "center") {
-            // codeText += `\n\tcenter="831634,5933959"`;
-          } else if (key == "zoom") {
-            // codeText += `\n\tzoom="13"`;
-          } else if (key == "baselayer") {
-            // codeText += `\n\tbaselayer="travic_v2"`;
-          }
-        });
-
-        code.innerHTML = codeText + `&gt;\n&lt;/geops-mobility&gt;`;
-      }
-
-      // Initialize value of inputs fields
-      function initInputs() {
-        attrs.forEach((key) => {
-          const input = document.querySelector(`input[name=${key}]`);
-          if (input) {
-            input.value = map.getAttribute(key) || "";
-          }
-        });
-        const inputs = document.querySelectorAll("input");
-        inputs.forEach((input) => {
-          input.addEventListener("change", () => {
-            generateCodeText();
-          });
-        });
-      }
-
-      initInputs();
-      generateCodeText();
+      const booleanAttrs = [
+        "geolocation",
+        "notification",
+        "realtime",
+        "search",
+        "permalink",
+      ];
+
+      const events = [
+        "singleclick",
+        // "mwc:attribute",
+      ];
+
+      document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs);
+      document.querySelector('#events').innerHTML = generateEventsTable(wc, events);
+      document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
+      wc.addEventListener('mwc:attribute', (event) => {
+        document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
+      });
+      applyPermalinkParameters(wc);
     </script>
   </body>
 </html>