Make EN locale more international, add EN-US alternatively available …

…for the US, i18n optimizations, update stac-fields

README.md

@@ -118,7 +118,7 @@ The following languages are currently supported:
 
 - German (Germany, Switzerland)
 - Spanish
-- English (US, UK)
+- English (International, US, UK)
 - French (Canada, France, Switzerland)
 - Italian (Italy, Switzerland)
 - Romanian

config.js

@@ -13,6 +13,7 @@ module.exports = {
         "es",
         "en",
 //      "en-GB",
+//      "en-US",
         "fr",
 //      "fr-CA",
 //      "fr-CH",

package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^10.1.0",
     "@musement/iso-duration": "^1.0.0",
-    "@radiantearth/stac-fields": "1.3.3",
+    "@radiantearth/stac-fields": "1.4.0",
     "@radiantearth/stac-migrate": "~1.6.0",
     "ajv-i18n": "^4.2.0",
     "axios": "^1.2.0",

src/StacBrowser.vue

@@ -42,8 +42,7 @@ import STAC from './models/stac';
 import Utils from './utils';
 import URI from 'urijs';
 
-import I18N from '@radiantearth/stac-fields/I18N';
-import { translateFields, API_LANGUAGE_CONFORMANCE, loadMessages } from './i18n';
+import { API_LANGUAGE_CONFORMANCE } from './i18n';
 import { getBest, prepareSupported } from './locale-id';
 import BrowserStorage from "./browser-store";
 
@@ -144,13 +143,6 @@ export default {
           return;
         }
 
-        // Update stac-fields
-        I18N.locales = [locale];
-        I18N.translate = translateFields;
-
-        // Load messages
-        await loadMessages(locale);
-
         // Set the locale for vue-i18n
         this.$root.$i18n.locale = locale;
 

src/components/Catalogs.vue

@@ -159,7 +159,8 @@ export default {
       }
       // Sort
       if (!this.hasMore && this.sort !== 0) {
-        catalogs = catalogs.slice(0).sort((a,b) => STAC.getDisplayTitle(a).localeCompare(STAC.getDisplayTitle(b), this.uiLanguage));
+        const collator = new Intl.Collator(this.uiLanguage);
+        catalogs = catalogs.slice(0).sort((a,b) => collator.compare(STAC.getDisplayTitle(a), STAC.getDisplayTitle(b)));
         if (this.sort === -1) {
           catalogs = catalogs.reverse();
         }

src/components/Items.vue

@@ -130,7 +130,8 @@ export default {
     chunkedItems() {
       let items = this.items;
       if (this.sort !== 0) {
-        items = items.slice(0).sort((a,b) => STAC.getDisplayTitle(a).localeCompare(STAC.getDisplayTitle(b), this.uiLanguage));
+        const collator = new Intl.Collator(this.uiLanguage);
+        items = items.slice(0).sort((a,b) => collator.compare(STAC.getDisplayTitle(a), STAC.getDisplayTitle(b)));
         if (this.sort === -1) {
           items = items.reverse();
         }

src/components/Links.vue

@@ -61,7 +61,8 @@ export default {
         }
         return summary;
       }, {});
-      return Object.values(groups).sort((g1, g2) => g1.label.localeCompare(g2.label, this.uiLanguage));
+      const collator = new Intl.Collator(this.uiLanguage);
+      return Object.values(groups).sort((g1, g2) => collator.compare(g1.label, g2.label));
     },
     hasGroups() {
       return this.groups.some(group => group.rel.length > 0 && group.links.length >= 2);

src/components/Map.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="map-container">
     <l-map class="map" v-if="show" :class="stac.type" @ready="init" :options="mapOptions">
-      <l-control-fullscreen :key="`z${ix}`" :options="fullscreenOptions" />
-      <l-control-zoom :key="`z${ix}`" v-bind="zoomControlTexts" position="topleft" />
+      <l-control-fullscreen :key="`fullscreen${ix}`" :options="fullscreenOptions" />
+      <l-control-zoom :key="`zoom${ix}`" v-bind="zoomControlTexts" position="topleft" />
       <l-control-layers v-if="showLayerControl" position="bottomleft" ref="layerControl" />
       <component
         v-for="basemap of basemaps" :is="basemap.is" :key="basemap.key"