feat: add lines attribute

docutils.js

@@ -1,4 +1,97 @@
-/* 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,
+  );
+  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 +161,9 @@ function generateAttributesTable(
   defaultValueByAttr = {},
   reloadAttrs = [],
 ) {
+  if (!attrs?.length) {
+    return null;
+  }
   let innerHMTL = `<table class="table-auto w-full" >
     <thead>
       <tr>
@@ -112,8 +208,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 +234,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 +261,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>

index.html

@@ -46,19 +46,24 @@ <h2 class="text-xl font-bold">Usage example</h2>
       ></pre>
 
       <geops-mobility
+        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>
@@ -74,141 +79,29 @@ <h1 class="text-xl font-bold">More mobility web components</h1>
       const pkgSrc = "https://www.unpkg.com/@geops/mobility-web-component";
       const wc = document.querySelector("geops-mobility");
 
-
       window.addEventListener("load", () => {
         const attributes = window.MobilityMapAttributes;
-        const events = window.MobilityMapEvents || {
-          "mwc:selectedfeature": {
-            description:
-              "Event fired when a feature is selected on the map. The event data contains the selected feature in GeoJSON format.",
-            public:true
-            },
-          "mwc:stopssearchselect": {
-            description:
-              "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.",
-            public:true
-
-            },
-          "mwc:attribute": {
-            description:
-              "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
-            public:true
-
-            },
-          "mwc:singleclick": {
-            description:
-              "Event fired when the map is clicked. The event data contains the map coordinates in EPSG:3857 and the pixel coordinates.",
-            public:true
-
-            },
-          "mwc:permalink": {
-            description:
-              "Event fired when the map's state changes. The event data contains the permalink URL search parameters as string.",
-            public:true
-
-            },
-          "mwc:messageready": {
-            description:
-              "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.",
-
-            public:true
-            },
-        };
-
+        const events = window.MobilityMapEvents;
 
-
-        // Add special parameters
+        // Add page parameters
         attributes.fullscreen = {
           type: "boolean",
           defaultValue: "false",
           description: `Load the page in fullscreen mode.`,
           reload: true,
-          public:false,
+          public: false,
         };
 
         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,
+          public: false,
         };
 
-        /* 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;
-          }, {});
-
-        document.querySelector("#attributes").innerHTML =
-          generateAttributesTable(
-            wc,
-            attrs,
-            booleanAttrs,
-            booleanTrueByDefault,
-            descriptionByAttr,
-            defaultValueByAttr,
-            reloadAttrs,
-          );
-        document.querySelector("#events").innerHTML = generateEventsTable(
-          wc,
-          evts,
-          descriptionByEvent,
-        );
-        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);
-          });
-        });
+        onLoad(wc, attributes, events, pkgSrc);
       });
     </script>
   </body>