[academic_query] refactoring, nothing broken up to this point

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

Author: s4pu

src/components/widgets/academic-subquery.js

@@ -1,5 +1,6 @@
 import Morph from 'src/components/widgets/lively-morph.js';
 import ohm from "https://unpkg.com/[email protected]/dist/ohm.js";
+import MicrosoftAcademicEntities from "src/client/literature.js";
 
 var g = ohm.grammar(
   `Academic { 
@@ -320,6 +321,7 @@ export default class AcademicSubquery extends Morph {
     var edit = this.get('#edit');
     edit.innerHTML = "";
 
+    // TODO: Hier this.editing = !this.editing und dann updateView()
     if (!this.editing) {
       this.editing = true;
       edit.appendChild(<i class="fa fa-hand-paper-o" aria-hidden="true"></i>);
@@ -344,76 +346,79 @@ export default class AcademicSubquery extends Morph {
   onMouseOut(event) {
     this.style.color = "black"
   }
+  
+  async buildConjunctionQuery(object) {
+    var inner = <span id="inner"></span>;
+    var conjunction = <span id="conjunction" contenteditable="false" style="font-size: 150%">{object.conjunction}</span>;
+    var left = await (<academic-subquery style="font-size: smaller;"></academic-subquery>);
+    await left.setQueryObject(object.left);
+    this.leftSubquery = left; // for viewToQuery
+    var right = await (<academic-subquery style="font-size: smaller;"></academic-subquery>);
+    await right.setQueryObject(object.right);
+    this.rightSubquery = right; // for viewToQuery
+    inner.appendChild(
+      <table>
+        <tr>
+          <th>{conjunction}</th>
+          <th>
+            <table>
+              <tr>{left}</tr>
+              <tr>{right}</tr>
+            </table>
+          </th>
+        </tr>
+      </table>
+    )
+    return inner;
+  }
+  
+  buildSimpleQuery(object) {
+    var inner =
+      <span class="hover" contenteditable="false" id="inner">
+        <span class="hovercontent">
+          <button
+            class="button"
+            click={() => {
+              this.setQuery(
+                "And(" + this.textContent + ", " + this.textContent + ")")
+            }}>AND</button>
+          <button
+            class="button"
+            click={() => {
+              this.setQuery(
+                "Or(" + this.textContent + ", " + this.textContent + ")")
+            }}>OR</button>
+        </span>
+      </span>;
+
+    var query = <span name="sub" draggable='true'></span>;
+    [object.attribute, object.comparator, object.value].forEach(value => {
+      query.appendChild(<span class="queryPart" name="queryPart">{value} </span>)
+      query.addEventListener('mouseover', (evt) => this.onMouseOver(evt));
+      query.addEventListener('mouseout', (evt) => this.onMouseOut(evt));
+      query.style.cursor = "grab" // on drag: grabbing
+    });
+    inner.appendChild(query);
+    var edit = <span id="edit" title="toggle edit mode" click={() => this.toggleEditing()}><i class="fa fa-pencil" aria-hidden="true"></i></span>;
+    edit.style.cursor = "pointer";
+    inner.appendChild(edit);
+    return inner;
+  }
 
   async queryToView(object) {
-    var span = <span contenteditable="false" id="inner"></span>;
-    var subSpan;
-      
-    switch(object.type) {
-      case "conjunction":
-        // Textselection in css vielleicht entfernen für Drag & Drop (bzw. erstmal Drag einschalten)
-        // events.stoppropagation und preventdefault
-        this.isComplex = true;
-        subSpan = <span id="conjunction" contenteditable="false" style="font-size: 150%">{object.conjunction}</span>;
-        var left = await (<academic-subquery style="font-size: smaller;"></academic-subquery>);
-        await left.setQueryObject(object.left);
-        this.leftSubquery = left; // for viewToQuery
-        var right = await (<academic-subquery style="font-size: smaller;"></academic-subquery>);
-        await right.setQueryObject(object.right);
-        this.rightSubquery = right; // for viewToQuery
-        span.appendChild(
-          <table>
-            <tr>
-              <th>{subSpan}</th>
-              <th>
-                <table>
-                  <tr>{left}</tr>
-                  <tr>{right}</tr>
-                </table>
-              </th>
-            </tr>
-          </table>
-        )
-        break;
+    var inner = <span id="inner"></span>;
 
+    if (object.type == "conjunction") {
+      this.isComplex = true;
+      inner = await this.buildConjunctionQuery(object);
+    } else { 
       // "composite" or "simple"
-      default:
-        this.isComplex = false;
-        // make span hoverable
-        span =
-          <span class="hover" contenteditable="false" id="inner">
-            <span class="hovercontent">
-              <button
-                class="button"
-                click={() => {
-                  this.setQuery(
-                    "And(" + this.textContent + ", " + this.textContent + ")")
-                }}>AND</button>
-              <button
-                class="button"
-                click={() => {
-                  this.setQuery(
-                    "Or(" + this.textContent + ", " + this.textContent + ")")
-                }}>OR</button>
-            </span>
-          </span>;
-        
-        subSpan = <span name="sub" draggable='true'></span>;
-        [object.attribute, object.comparator, object.value].forEach(value => {
-          subSpan.appendChild(<span class="queryPart" name="queryPart">{value} </span>)
-          subSpan.addEventListener('mouseover', (evt) => this.onMouseOver(evt));
-          subSpan.addEventListener('mouseout', (evt) => this.onMouseOut(evt));
-          subSpan.style.cursor = "grab" // on drag: grabbing
-        });
-        span.appendChild(subSpan);
-        var edit = <span id="edit" title="toggle edit mode" click={() => this.toggleEditing()}><i class="fa fa-pencil" aria-hidden="true"></i></span>;
-        edit.style.cursor = "pointer";
-        span.appendChild(edit);
-        break;
+      this.isComplex = false;
+      inner = this.buildSimpleQuery(object);
     }
-    span.setAttribute("type", object.type);
+    inner.setAttribute("type", object.type);
 
-    var queryElement = <div class="dropTarget"><b>{span}</b></div>;
+    var queryElement = <div class="dropTarget"><b>{inner}</b></div>;
 
     return queryElement;
   }