Merge branch 'feature/address-search-title-i18n' of https://github.com/Dataport/polar into client/text-locator

warm-coolguy · warm-coolguy · commit 0629de347592 · 2024-02-26T12:54:52.000+01:00
diff --git a/packages/clients/afm/API.md b/packages/clients/afm/API.md
@@ -38,7 +38,10 @@ In your HTML, a div with unique ID is required that holds the following style pr
     position: relative;
   "
   id="polarstern"
-/>
+>
+  <!-- Optional, may use if your page does not have its own <noscript> information -->
+  <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+</div>
 ```
 
 ```js
diff --git a/packages/clients/afm/example/index.html b/packages/clients/afm/example/index.html
@@ -34,7 +34,9 @@ <h2>Karte</h2>
         box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.5);
       "
       id="polarstern"
-    ></div>
+    >
+      <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+    </div>
     <h2>Beispiel für programmatische Informationsbindung</h2>
     <p>Aktuelle Zoomstufe: <span id="vuex-target-zoom" /></p>
     <p>Featureinformationen: <span id="vuex-target-gfi" /></p>
diff --git a/packages/clients/afm/example/prod-example.html b/packages/clients/afm/example/prod-example.html
@@ -34,7 +34,9 @@ <h2>Karte</h2>
         box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.5);
       "
       id="polarstern"
-    ></div>
+    >
+      <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+    </div>
     <h2>Beispiel für programmatische Informationsbindung</h2>
     <p>Aktuelle Zoomstufe: <span id="vuex-target-zoom" /></p>
     <p>Featureinformationen: <span id="vuex-target-gfi" /></p>
diff --git a/packages/clients/dish/src/index.html b/packages/clients/dish/src/index.html
@@ -20,7 +20,9 @@
   </head>
   <body style="width: 100%; height: 100%; overscroll-behavior: contain">
     <div style="width: 100%; height: 100%">
-      <div id="polarstern"></div>
+      <div id="polarstern">
+        <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+      </div>
     </div>
     <script type="module" src="./polar-client.ts"></script>
   </body>
diff --git a/packages/clients/generic/API.md b/packages/clients/generic/API.md
@@ -20,6 +20,22 @@ The method expects a single object with the following parameters.
 | enabledPlugins  | string[]? | This is a client-specific field. Since the `@polar/client-generic` client contains all existing plugins, they are activated by strings. The strings match their package names: `'address-search' \| 'attributions' \| 'draw'* \| 'export' \| 'filter'* \| 'fullscreen'* \| 'geo-location'* \| 'gfi'* \| 'icon-menu' \| 'layer-chooser'* \| 'legend' \| 'loading-indicator' \| 'pins' \| 'reverse-geocoder' \| 'scale' \| 'toast' \| 'zoom'*`. The plugins marked with * are nested in the `'icon-menu'` in this pre-layouting, hence they depend upon it being active, too. |
 | modifyLayerConfiguration | ((layerConf: object[]) => object[])? | Defaults to identity function. This function is applied to the loaded layer configuration before usage. That is, the `services` can be modified by this to e.g. set parameters not supported by the service register, add additional layers, and so on. |
 
+In your HTML, a div with unique ID (`containerId` from above) is required that holds the following style properties. Width and height can be changed as you need, but are required to be defined.
+
+```html
+<div
+  style="
+    width: 680px;
+    height: 420px;
+    position: relative;
+  "
+  id="polarstern"
+>
+  <!-- Optional, may use if your page does not have its own <noscript> information -->
+  <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+</div>
+```
+
 `createMap` returns a Promise of a map instance. This returned instance is required to retrieve information from the map.
 
 The package also includes a `style.css` and an `index.html` file. The `style.css`'s relative path must, if it isn't the default value `'./style.css'`, be included in the `mapConfiguration` as follows:
diff --git a/packages/clients/meldemichel/API.md b/packages/clients/meldemichel/API.md
@@ -67,7 +67,10 @@ A document rendering the map client could e.g. look like this:
     </style>
   </head>
   <body>
-    <div id="meldemichel-map-client"></div>
+    <div id="meldemichel-map-client">
+      <!-- Optional, may use if your page does not have its own <noscript> information -->
+      <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+    </div>
     <script type="module">
       import meldemichelMapClient from './client-meldemichel.js'
 
diff --git a/packages/clients/meldemichel/src/html/index.html b/packages/clients/meldemichel/src/html/index.html
@@ -20,7 +20,9 @@
   </head>
   <body style="width: 100%; height: 100%; overscroll-behavior: contain">
     <div style="width: 100%; height: 100%">
-      <div id="polarstern"></div>
+      <div id="polarstern">
+        <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+      </div>
     </div>
     <script type="module">
       import client from './client-meldemichel.js'
diff --git a/packages/clients/meldemichel/src/index.html b/packages/clients/meldemichel/src/index.html
@@ -21,7 +21,9 @@
   </head>
   <body style="width: 100%; height: 100%; overscroll-behavior: contain">
     <div style="width: 100%; height: 100%">
-      <div id="polarstern"></div>
+      <div id="polarstern">
+        <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
+      </div>
     </div>
     <script type="module">
       import client from './polar-client.ts'
diff --git a/packages/clients/snowbox/src/index.html b/packages/clients/snowbox/src/index.html
@@ -84,7 +84,9 @@ <h2>🗺️ Map</h2>
         <option value="de">German</option>
       </select>
     </label>
-    <div id="polarstern" class="polarstern"></div>
+    <div id="polarstern" class="polarstern">
+      <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+    </div>
     <h2>Example for programmatic information binding</h2>
     <p>
       This illustrates which kind of data can be retrieved from the map client.
diff --git a/packages/plugins/AddressSearch/CHANGELOG.md b/packages/plugins/AddressSearch/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## unpublished
+
+- Feature: Add title internationalization; i.e. features may now contain locale keys as titles.
+
 ## 1.2.1
 
 - Fix: Keyboard navigation of results to work on all browsers.
diff --git a/packages/plugins/AddressSearch/src/components/Results.vue b/packages/plugins/AddressSearch/src/components/Results.vue
@@ -55,7 +55,7 @@
         >
           <v-list-item-title>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span v-html="emTitleByInput(feature.title, inputValue)"></span>
+            <span v-html="emTitleByInput($t(feature.title), inputValue)"></span>
           </v-list-item-title>
         </v-list-item>
       </template>
diff --git a/packages/types/custom/CHANGELOG.md b/packages/types/custom/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## unpublished
+
+- Fix: Add `string` as option for `SearchType` since arbitrary strings can be registered.
+
 ## 1.4.1
 
 - Fix: Increase type precision of EPSG codes from `string` to `EPSG:${string}`.
diff --git a/packages/types/custom/core.ts b/packages/types/custom/core.ts
@@ -35,7 +35,7 @@ export interface PluginOptions {
 export type RenderType = 'iconMenu' | 'independent'
 
 /** Possible search methods by type */
-export type SearchType = 'bkg' | 'gazetteer' | 'wfs' | 'mpapi'
+export type SearchType = 'bkg' | 'gazetteer' | 'wfs' | 'mpapi' | string
 
 /**
  * Additional queryParameters for the GET-Request;
diff --git a/pages/documentation.html b/pages/documentation.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="./assets/iceberg_icon.svg">
   <link rel="stylesheet" href="./mvp.css">
+  <link rel="stylesheet" href="./mobile.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - documentation">
diff --git a/pages/index.html b/pages/index.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="./assets/iceberg_icon.svg">
   <link rel="stylesheet" href="./mvp.css">
+  <link rel="stylesheet" href="./mobile.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - the configurable map client factory">
diff --git a/pages/mobile.css b/pages/mobile.css
@@ -0,0 +1,6 @@
+/* px determined by when the page starts to look wonky */
+@media screen and (max-width: 650px) {
+  nav {
+    flex-direction: column;
+  }
+}
