Keep plugin state in state manager (fixes #201)

Change-Id: If4a5305f3e41f1fcac4a47afeba613b3106c69fa
KorAP · Dec 10, 2024 · ed223be · ed223be
1 parent b759ee9
commit ed223be
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 13 deletions.
diff --git a/Changes b/Changes
@@ -1,4 +1,4 @@
-0.59 2024-11-21
+0.59 2024-12-10
         - Improve appearance of title-addon on logo. (uyen-nhu)
         - Create and style new item on top navbar for 'News'. (uyen-nhu)
         - Change settings link in logout.html.ep to dynamic link. (uyen-nhu)
@@ -19,6 +19,7 @@
           logo and icons, fix animation of navbar when scrolling on
           small devices. (uyen-nhu)
         - Return cursor position for query object (fixes #228; diewald)
+        - Keep plugin state in statemanager (fixes #201; diewald)
 
 0.58 2024-11-15
         - Cookie path is settable now (hebasta)

diff --git a/dev/js/spec/stateSpec.js b/dev/js/spec/stateSpec.js
@@ -231,5 +231,18 @@ define(['state','state/manager'], function (stateClass, stateManagerClass) {
 
       expect(sm.toString()).toEqual("\"test\":2");
     });
+
+    it('should load stored states', function () {
+      const el = document.createElement('input');
+      el.setAttribute("value","\"test\":2");
+      const sm = stateManagerClass.create(el);
+      expect(sm).toBeTruthy();
+
+      const s1 = sm.newState('test', [1,2,3], 1);
+
+      expect(s1.get()).toEqual(2);
+
+      expect(sm.toString()).toEqual("\"test\":2");
+    });
   });
 });
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
@@ -586,7 +586,17 @@ define([
             };
 
             const input = form.addE("input");
+            input.setAttribute("type","text");
             input.setAttribute("name","state");
+
+            const url = new URL(window.location.href);
+
+            // Access the query parameters to check for states
+            const state = new URLSearchParams(url.search).get('state');
+            if (state != null && state != "") {
+              input.setAttribute("value", state);
+            };
+
             KorAP.States = stateManagerClass.create(input);
 
             // Load Plugin Server first

diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
@@ -14,13 +14,7 @@ define(['plugin/widget', 'plugin/service', 'state', 'state/manager', 'pageInfo',
   KorAP.Panel = KorAP.Panel || {};
 
   const d = document;
-
-  // State manager undefined
-  const states = KorAP.States ? KorAP.States :
-
-        // Not serialized state manager
-        stateManagerClass.create(document.createElement('input'));
-
+
   // Contains all servicess to address with
   // messages to them
   var services = {};
@@ -75,6 +69,11 @@ define(['plugin/widget', 'plugin/service', 'state', 'state/manager', 'pageInfo',
       this._q      = d.getElementById("q-field")
       this._cutoff = d.getElementById("q-cutoff-field");
 
+       // State manager undefined
+      this._states =  KorAP.States ? KorAP.States :
+        // Not serialized state manager
+        stateManagerClass.create(document.createElement('input'));
+
       return this;
     },
 
@@ -246,7 +245,7 @@ define(['plugin/widget', 'plugin/service', 'state', 'state/manager', 'pageInfo',
           //   Accept a "value" list here for toggling, which should
           //   also allow for "rolling" through states via CSS classes
           //   as 'toggle-true', 'toggle-false' etc.
-          let state = states.newState(
+          let state = that._states.newState(
             (onClick["state"] ? onClick["state"] : name),
             [true, false],
             onClick["default"]
@@ -651,7 +650,7 @@ define(['plugin/widget', 'plugin/service', 'state', 'state/manager', 'pageInfo',
 
     // Return states object
     states : function () {
-      return states;
+      return this._states;
     },
 
     // Destructor, just for testing scenarios

diff --git a/dev/js/src/state/manager.js b/dev/js/src/state/manager.js
@@ -33,9 +33,9 @@ define(['state'], function(stateClass) {
 
     // Parse a value and populate states
     _parse : function (value) {
-      if (value === undefined || value === '')
+      if (value == null || value == undefined || value == '')
         return;
-      
+
       this._states = JSON.parse('{' + value + '}');
     },
 
@@ -52,7 +52,7 @@ define(['state'], function(stateClass) {
 
     // Update the query component for states
     _update : function () {
-      this._e.value = this.toString();
+      this._e.setAttribute("value", this.toString());
     },
 
 
@@ -63,6 +63,11 @@ define(['state'], function(stateClass) {
       const t = this;
       let s = stateClass.create(values);
 
+      if (this._states[name] != undefined) {
+        if (values.includes(this._states[name]))
+          s.setIfNotYet(this._states[name]);
+      };
+
       // Set default value
       // TODO: It would be better to make this part
       // of the state and serialize correctly using TOJSON()