From 2a259c9dea449982be3adc80eb026a30dc7c5d8c Mon Sep 17 00:00:00 2001 From: Dennis Sen Date: Wed, 8 Jan 2025 08:18:21 +0100 Subject: [PATCH 1/3] add embedded scenario for meldemichel --- packages/clients/meldemichel/API.md | 48 ++++++- .../example/complete_embedded.html | 125 ++++++++++++++++++ .../clients/meldemichel/example/index.html | 4 + 3 files changed, 176 insertions(+), 1 deletion(-) create mode 100644 packages/clients/meldemichel/example/complete_embedded.html diff --git a/packages/clients/meldemichel/API.md b/packages/clients/meldemichel/API.md index a9bdf144d..d232b0661 100644 --- a/packages/clients/meldemichel/API.md +++ b/packages/clients/meldemichel/API.md @@ -136,8 +136,54 @@ A document rendering the map client could e.g. look like this: ``` -## Rendering COMPLETE mode +## Rendering COMPLETE mode (full page) The `index.html` included in the package's `dist` folder has been prepared for this mode and must merely be hosted. Please see the table in chapter `Basic usage` about configuration options. + +## Rendering COMPLETE mode (embedded element) + +To embed the COMPLETE mode map on any page, provide a div with an id like `meldemichel-map-client`; you may choose any id you like. + +The following script tag can then be used to render the productive services of the Meldemichel map client. + +```html + +``` + +POLAR will rebuild the given div to contain a ShadowDOM that hosts the map. The outer div will change to have the id `meldemichel-map-client-wrapper` (resp. `${yourId}-wrapper`) and can be used to style the map's height and width with, for example: + +```css +#polarstern-wrapper { + /* "position: relative;" is the minimum required styling */ + position: relative; + height: 400px; + width: 100%; +} +``` + +To also serve users with JS disabled some content, this fragment is common: + +```html +
+ + +
+``` + +For a complete example, you may also check [the running embedded scenario](https://dataport.github.io/polar/docs/meldemichel/example/complete_embedded.html) or its [source file](https://github.com/Dataport/polar/blob/main/packages/clients/meldemichel/example/complete_embedded.html). diff --git a/packages/clients/meldemichel/example/complete_embedded.html b/packages/clients/meldemichel/example/complete_embedded.html new file mode 100644 index 000000000..a0af9a9d7 --- /dev/null +++ b/packages/clients/meldemichel/example/complete_embedded.html @@ -0,0 +1,125 @@ + + + + + + + MML INTEGRATION TEST + + + + +
+

Meldemichel-Einbindesimulation

+
+
+
+
+

Blindtext

+

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.

+
+
+

Aktuell gemeldete Schäden

+ +
+
+
+

Blindtext II.

+

Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.

+
+
+ + + + diff --git a/packages/clients/meldemichel/example/index.html b/packages/clients/meldemichel/example/index.html index 7cce949dd..98c610b54 100644 --- a/packages/clients/meldemichel/example/index.html +++ b/packages/clients/meldemichel/example/index.html @@ -38,6 +38,10 @@

Meldemichel Example Hub

"COMPLETE" (Übersichtskarte)
Meldemichel Map Client rendered fullpage in mode COMPLETE.
+
+ "COMPLETE_EMBEDDED" (Übersichtskarte eingebettet) +
+
Meldemichel Map Client rendered as page element in mode COMPLETE.
"COMPLETE" (Übersichtskarte) – Production Mode Test Date: Mon, 20 Jan 2025 06:58:00 +0100 Subject: [PATCH 2/3] Update packages/clients/meldemichel/API.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit apply suggestion "fix example id" Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com> --- packages/clients/meldemichel/API.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clients/meldemichel/API.md b/packages/clients/meldemichel/API.md index d232b0661..d738ed637 100644 --- a/packages/clients/meldemichel/API.md +++ b/packages/clients/meldemichel/API.md @@ -169,7 +169,7 @@ The following script tag can then be used to render the productive services of t POLAR will rebuild the given div to contain a ShadowDOM that hosts the map. The outer div will change to have the id `meldemichel-map-client-wrapper` (resp. `${yourId}-wrapper`) and can be used to style the map's height and width with, for example: ```css -#polarstern-wrapper { +#meldemichel-map-client-wrapper { /* "position: relative;" is the minimum required styling */ position: relative; height: 400px; From f4477c7aa230c0eebd94d61cf41479178ebca4f3 Mon Sep 17 00:00:00 2001 From: Dennis Sen <108349707+warm-coolguy@users.noreply.github.com> Date: Mon, 20 Jan 2025 06:58:16 +0100 Subject: [PATCH 3/3] Update packages/clients/meldemichel/API.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit apply suggestion "insist upon