[academic_query] add auto update, timer and button functionality. Not bug_free, but I don_t see it getting better right now.

SQUASHED: AUTO-COMMIT-src-components-widgets-academic-query.js,AUTO-COMMIT-src-components-widgets-academic-subquery.js,

Author: s4pu

src/components/widgets/academic-query.js

@@ -1,33 +1,6 @@
 import Morph from 'src/components/widgets/lively-morph.js';
 import AcademicSubquery from "src/components/widgets/academic-subquery.js";
 
-/*const observer = new MutationObserver(function(mutations) {
-  mutations.forEach(mutation => {
-    //lively.notify("observation", mutation.type)
-    if (mutation.type == "characterData") {
-      var element = mutation.target;
-      lively.notify("ELEMENT",element)
-      while (element.parentNode && (element.nodeName != "ACADEMIC-QUERY")) {
-        lively.notify("CURRENT ELEMENT",element)
-        element = element.parentNode;
-      }
-      if (element.nodeName == "ACADEMIC-QUERY") {
-        element.textContent = element.viewToQuery();
-      } else {
-        lively.notify("Could not find academic-query");
-      }
-    }
-  })
-})
-const config = {
-  attributes: true,
-  childList: true,
-  subtree: true,
-  attributeOldValue: true,
-  characterDataOldValue: true,
-  //attributeFilter: true // breaks for some reason
-}*/
-
 export default class AcademicQuery extends Morph {
   constructor() {
     super();
@@ -39,11 +12,17 @@ export default class AcademicQuery extends Morph {
     // alternativ immer das AcademicQuery object mitgeben
     // und dem Bescheid geben, wenn ein update ist
     // (alles kacke)
+    // idealerweise bemerkt der hier schon, wenn sich
+    // irgendwo unter ihm Text ändert
     var observer = new MutationObserver((mutations) => {
-      mutations.forEach(mutation => {
+      mutations.forEach(async mutation => {
         //lively.notify("SUPER observation", mutation.type)
         if (mutation.type == "childList") {
-          if (this.subquery) this.textContent = this.subquery.viewToQuery();
+          if (this.subquery) {
+            this.textContent = await this.subquery.viewToQuery();
+            var input = this.get('#queryInput');
+            input.value = this.getQuery();
+          }
         }
       })
     });
@@ -82,8 +61,8 @@ export default class AcademicQuery extends Morph {
     } else {
       lively.notify("Could not load query.");
     }
-    var input = <input value={queryView.textContent} style="width: 300px"></input>;
-    var updateButton = <button click={() => input.value = (this.getQuery())}>update</button>;
+    var input = <input id="queryInput" value={this.textContent} style="width: 300px"></input>;
+    var updateButton = <button click={() => this.setQuery(input.value)}>update</button>;
 
     pane.innerHTML = ""
     pane.appendChild(<div>

src/components/widgets/academic-subquery.js

@@ -149,6 +149,7 @@ const config = {
 }*/
 
 var observer;
+var timeout;
 
 export default class AcademicSubquery extends Morph {
   constructor() {
@@ -160,16 +161,21 @@ export default class AcademicSubquery extends Morph {
 
     observer = new MutationObserver((mutations) => {
       mutations.forEach(mutation => {
-        //nach jeder Änderung erstmal nen Timer
         //lively.notify("observation", mutation.type)
-        if (mutation.type == "characterData") {
-          this.textContent = this.viewToQuery();
-        }
-        if (mutation.type == "childList") {
-          var div = <div id="update"></div>;
-          this.appendChild(div);
-          this.removeChild(div);
-        }
+        
+        timeout = setTimeout(async () => {
+          if (mutation.type == "characterData") {
+            this.textContent = await this.viewToQuery();
+          }
+          if (mutation.type == "childList") {
+            clearTimeout(timeout);
+            //timeout = setTimeout(() => {
+              var div = <div id="update"></div>;
+              this.appendChild(div);
+              this.removeChild(div);
+            //}, 3000);
+          }
+        }, 1000);
       })
     });
 
@@ -181,6 +187,8 @@ export default class AcademicSubquery extends Morph {
       characterDataOldValue: true,
     };
 
+    // TODO: Why are we switching focus after editing
+    // once we start observing?
     observer.observe(this.get('#pane'), config);
   }
 
@@ -202,7 +210,9 @@ export default class AcademicSubquery extends Morph {
   async setQueryObject(o) {
     this.ui = await this.queryToView(o);
 
-    this.updateView()
+    this.updateView();
+    
+    return this;
   }
 
   async updateView() {
@@ -214,14 +224,14 @@ export default class AcademicSubquery extends Morph {
     }
   }
 
-  viewToQuery() {
+  async viewToQuery() {
     var query = "... parsed from ui"
 
     if (this.isComplex) {
       // TODO: Why is this neccessary?
-      if (this.leftSubquery && this.rightSubquery) {
-        var left = this.leftSubquery.viewToQuery()
-        var right = this.rightSubquery.viewToQuery()
+      if (await this.leftSubquery && await this.rightSubquery) {
+        var left = await this.leftSubquery.viewToQuery()
+        var right = await this.rightSubquery.viewToQuery()
         var conjunction = this.get('#conjunction').textContent
         query = conjunction + "(" + left + ", " + right + ")";
       }
@@ -232,6 +242,12 @@ export default class AcademicSubquery extends Morph {
       query = attr + comp + "'" + val + "'";
     }
 
+    if (query == "... parsed from ui") {
+      lively.notify("LEFT", this.leftSubquery)
+      lively.notify("RIGHT", this.rightSubquery)
+      lively.notify("COMPLEX", this.isComplex)
+    }
+    
     return query
   }