Implement dynamic language switching

packages/person-select/src/person-select.js

@@ -15,6 +15,7 @@ class PersonSelect extends VPULitElementJQuery {
     constructor() {
         super();
         this.lang = 'de';
+        this.jsonld = null;
     }
 
     static get properties() {
@@ -29,13 +30,33 @@ class PersonSelect extends VPULitElementJQuery {
 
         this.updateComplete.then(()=>{
             const that = this;
-            const $that = $(this);
             let lastResult = {};
 
             JSONLD.initialize(utils.getAPiUrl(), function (jsonld) {
+                that.jsonld = jsonld;
+                const $select = that.initSelect2();
+
+                // close the selector on blur of the web component
+                $(that).blur(() => {
+                    // the 500ms delay is a workaround to actually get an item selected when clicking on it,
+                    // because the blur gets also fired when clicking in the selector
+                    setTimeout(() => {$select.select2('close')}, 500);
+                });
+            });
+        })
+    }
+
+    /**
+     * Initializes the Select2 selector
+     */
+    initSelect2() {
+        const that = this;
+        const $this = $(this);
+        let lastResult = {};
+
         // find the correct api url for a person
-                const apiUrl = jsonld.getApiUrlForIdentifier("http://schema.org/Person");
-                // const apiUrl = jsonld.getApiUrlForEntityName("Event");
+        const apiUrl = this.jsonld.getApiUrlForIdentifier("http://schema.org/Person");
+        // const apiUrl = this.jsonld.getApiUrlForEntityName("Event");
 
         // the mapping we need for Select2
         const localContext = {
@@ -43,14 +64,14 @@ class PersonSelect extends VPULitElementJQuery {
             "text": "http://schema.org/name"
         };
 
-                const $select = that.$('#person-select');
+        const $select = this.$('#person-select');
 
         $select.select2({
             width: '100%',
-                    language: that.lang === "de" ? select2LangDe() : select2LangEn(),
+            language: this.lang === "de" ? select2LangDe() : select2LangEn(),
             minimumInputLength: 2,
             placeholder: i18n.t('person-select.placeholder'),
-                    dropdownParent: that.$('#person-select-dropdown'),
+            dropdownParent: this.$('#person-select-dropdown'),
             ajax: {
                 delay: 250,
                 url: apiUrl,
@@ -68,7 +89,7 @@ class PersonSelect extends VPULitElementJQuery {
                     console.log(data);
                     lastResult = data;
 
-                            const results = jsonld.transformMembers(data, localContext);
+                    const results = that.jsonld.transformMembers(data, localContext);
 
                     console.log("results");
                     console.log(results);
@@ -81,14 +102,14 @@ class PersonSelect extends VPULitElementJQuery {
         }).on("select2:select", function (e) {
             // set value custom element
             const identifier = e.params.data.id;
-                    $that.attr("value", identifier);
-                    $that.val(identifier);
+            $this.attr("value", identifier);
+            $this.val(identifier);
 
             const object = utils.findObjectInApiResults(identifier, lastResult);
-                    $that.attr("data-object", JSON.stringify(object));
+            $this.attr("data-object", JSON.stringify(object));
 
             // fire a change event
-                    that.dispatchEvent(new CustomEvent('change', {
+            this.dispatchEvent(new CustomEvent('change', {
                 detail: {
                     value: identifier,
                 },
@@ -96,14 +117,23 @@ class PersonSelect extends VPULitElementJQuery {
             }));
         });
 
-                // close the selector on blur of the web component
-                $(that).blur(() => {
-                    // the 500ms delay is a workaround to actually get an item selected when clicking on it,
-                    // because the blur gets also fired when clicking in the selector
-                    setTimeout(() => {$select.select2('close')}, 500);
-                });
+        return $select;
+    }
+
+    updated(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "lang") {
+                i18n.changeLanguage(this.lang);
+
+                const $select = this.$('#person-select.select2-hidden-accessible');
+
+                if ($select.length > 0) {
+                    // no other way to set an other language at runtime did work
+                    $select.select2('destroy');
+                    this.initSelect2();
+                }
+            }
         });
-        })
     }
 
     render() {