[academic_query] make query element draggable and add event handlers, but beware, I might have broke something_ WIP

SQUASHED: AUTO-COMMIT-src-components-widgets-academic-query.js,AUTO-COMMIT-src-components-widgets-academic-subquery.html,AUTO-COMMIT-src-components-widgets-academic-subquery.js,AUTO-COMMIT-src-components-widgets-lively-bibtex-entry.js,

Author: s4pu

src/components/widgets/academic-query.js

@@ -76,7 +76,7 @@ export default class AcademicQuery extends Morph {
   }
 
   async livelyExample() {
-    this.setQuery("And(Or(Y='1985', Y='2008'), Ti='disordered electronic systems')")
+    this.setQuery("And(Or(Y = '1985', Y = '2008'), Ti = 'disordered electronic systems')")
     //this.setQuery("And(O='abc', Y='1000')")
     //this.setQuery("Y='1000'")
   }

src/components/widgets/academic-subquery.html

@@ -27,7 +27,7 @@
   position: absolute;
   bottom: 125%;
   left: 50%;
-  margin-bottom: -4px;
+  margin-bottom: -3px;
 
   /* Fade in hover */
   opacity: 0;

src/components/widgets/academic-subquery.js

@@ -190,8 +190,46 @@ export default class AcademicSubquery extends Morph {
     // TODO: Why are we switching focus after editing
     // once we start observing?
     observer.observe(this.get('#pane'), config);
+    
+    // TODO: falls ich das umbaue, sodass eine subquery einfach als
+    // html Element in updateView erstellt wird, muss das hier auch da rein
+    this.addEventListener('dragstart', (evt) => this.onDragStart(evt))
+    this.addEventListener('dragend', (evt) => this.onDragEnd(evt))
+    this.addEventListener('dragover', (evt) => this.onDragOver(evt))
+    this.addEventListener('drop', (evt) => this.onDrop(evt))
+    
+    this.style.draggable = 'true';
+  //   "drag",
+  // "dragend",
+  // "dragenter",
+  // "dragleave",
+  // "dragover",
+  // "dragstart",
+  // "drop",
+  }
+  
+  onDragStart(event) {
+    event.dataTransfer.setData("element", event.target.id);
+  }
+  
+  onDragEnd(event) {
+    event.dataTransfer.setData("element", event.target.id);
+  }
+  
+  onDragOver(event) {
+    event.dataTransfer.setData("element", event.target.id);
+  }
+  
+  onDrop(event) {
+    event.preventDefault();
+    var data = event.dataTransfer.getData("element");
+    event.target.appendChild(lively.query(this, '#'+data))
   }
 
+  
+  
+  
+  
   async setQuery(q) {
     this.textContent = q;
 
@@ -211,21 +249,25 @@ export default class AcademicSubquery extends Morph {
     this.ui = await this.queryToView(o);
 
     this.updateView();
-    
-    return this;
   }
 
   async updateView() {
     var pane = this.get("#pane")
     pane.innerHTML = ""
 
     if(this.ui) {
+      this.ui.style.draggable = 'true'
+      this.ui.style.userSelect = 'none'
+      this.ui.addEventListener('dragstart', (evt) => this.onDragStart(evt))
+      this.ui.addEventListener('dragend', (evt) => this.onDragEnd(evt))
+      this.ui.addEventListener('dragover', (evt) => this.onDragOver(evt))
+      this.ui.addEventListener('drop', (evt) => this.onDrop(evt))
       pane.appendChild(this.ui)
     }
   }
 
   async viewToQuery() {
-    var query = "... parsed from ui"
+    var query = this.textContent;
 
     if (this.isComplex) {
       // TODO: Why is this neccessary?
@@ -242,12 +284,6 @@ 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
   }
 
@@ -271,13 +307,14 @@ export default class AcademicSubquery extends Morph {
 
   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;
-        var subSpan = <span id="conjunction" contenteditable="true" style="font-size: 150%">{object.conjunction}</span>;
+        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
@@ -305,15 +342,20 @@ export default class AcademicSubquery extends Morph {
         // make span hoverable
         span =
           <span class="hover" contenteditable="false" id="inner">
-            <span class="hovercontent"><button class="button">AND</button><button class="button">OR</button></span>
+            <span class="hovercontent">
+              <button class="button">AND</button>
+              <button class="button">OR</button>
+            </span>
           </span>;
+        
+        subSpan = <span name="sub" draggable='true'></span>;
         [object.attribute, object.comparator, object.value].forEach(value => {
-          var subSpan = <span name="sub">{value} </span>;
-          span.appendChild(subSpan)
-          span.addEventListener('mouseover', (evt) => this.onMouseOver(evt));
-          span.addEventListener('mouseout', (evt) => this.onMouseOut(evt));
+          subSpan.appendChild(<span>{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="edit query" click={() => this.enableEditing()}><i class="fa fa-pencil" aria-hidden="true"></i></span>;
         edit.style.cursor = "pointer";
         span.appendChild(edit);

src/components/widgets/lively-bibtex-entry.js

@@ -116,9 +116,9 @@ export default class LivelyBibtexEntry extends Morph {
     this.pane.innerHTML = ""
 
     try {
-      var authoText = this.parseAuthors(latexconv.convertLaTeXToUnicode(this.author)).join(", ");
+      var authorText = this.parseAuthors(latexconv.convertLaTeXToUnicode(this.author)).join(", ");
     } catch (e) {
-      authoText = this.author;
+      authorText = this.author;
     }
     try {
       var titleText = latexconv.convertLaTeXToUnicode(this.title);
@@ -134,7 +134,7 @@ export default class LivelyBibtexEntry extends Morph {
     }    
     var entry = <div id="entry">
       <div id="draghandle" draggable="true"></div>
-      [{key}] <span id="author">{authoText}</span>. <span id="year">{this.year}</span>.
+      [{key}] <span id="author">{authorText}</span>. <span id="year">{this.year}</span>.
       <span id="title">{titleText}</span>
       {misc}
       <span id="edit" title="edit entry" click={() => this.enableEditing()}><i class="fa fa-pencil" aria-hidden="true"></i></span>