feat(wc): add a html embedder for web components

this will allow easily using web components through an iframe.
geonetwork · Apr 21, 2023 · b269b47 · b269b47
1 parent 05902a5
commit b269b47
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 0 deletions.
diff --git a/tools/webcomponent/REAME.md b/tools/webcomponent/REAME.md
@@ -0,0 +1,23 @@
+# Web components tools
+
+## HTML embedder
+
+The file [`wc-embedder.html`](wc-embedder.html) can be used to wrap a geonetwork-ui Web Component into a full HTML page,
+for example to be used in an [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
+
+To use it, specify the name and attributes of the Web Component to be created when accessing the page:
+
+```
+wc-embedder.html?e=gn-dataset-preview&a=api-url=https://dev.geo2france.fr/geonetwork/srv/api&a=primary-color=%230f4395&a=secondary-color=%238bc832&a=main-color=%23555&a=background-color=%23fdfbff
+```
+
+> Note the `#` being encoded to `%23`
+
+The following query parameters are supported:
+
+- `e` (single): element name, such as `gn-results-list`
+- `a` (multiple): attributes, specified in the following format: `a=attribute-name=attribute-value`
+
+The created element will be sized to take the full width and height of the page, thus allowing precise sizing when used in an iframe.
+
+The Web Components used are the latest ones distributed on the [`wc-dist` branch](https://github.com/geonetwork/geonetwork-ui/blob/wc-dist).
diff --git a/tools/webcomponent/wc-embedder.html b/tools/webcomponent/wc-embedder.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>geonetwork-ui web component embedder</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <style>
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        font-family: 'Open Sans', 'dataFeeder', sans-serif !important;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+    <script>
+      function showError(message) {
+        const errorMessage = document.createElement('div')
+        errorMessage.style.cssText = `
+width: 100%;
+height: 100%;
+color: #9f0000;
+background-color: #fdd;
+border: 1px solid #9f0000;
+border-radius: 2px;
+box-sizing: border-box;
+padding: 8px;
+  `
+        errorMessage.textContent = `An error occurred when trying to embed the web component:
+${message}`
+        document.body.append(errorMessage)
+      }
+
+      try {
+        const params = new URL(window.location).searchParams
+        const elementName = params.get('e')
+        const attributes = params.getAll('a')
+
+        const element = document.createElement(elementName)
+        for (const attr of attributes) {
+          const key = attr.split('=')[0]
+          const value = attr.replace(`${key}=`, '')
+          element.setAttribute(key, value)
+        }
+        element.style.cssText = `
+display: block;
+width: 100%;
+height: 100%;
+box-sizing: border-box;
+        `
+        document.body.append(element)
+      } catch (e) {
+        showError(e.message || e)
+      }
+    </script>
+  </body>
+</html>