[bibtex] bibtex entry ux... get rid of double click

SQUASHED: AUTO-COMMIT-src-client-lively.js,AUTO-COMMIT-src-components-widgets-lively-bibtex-entry.html,AUTO-COMMIT-src-components-widgets-lively-bibtex-entry.js,AUTO-COMMIT-src-components-widgets-lively-morph.js,

Author: JensLincke

src/client/lively.js

@@ -1516,7 +1516,7 @@ export default class Lively {
       }
       return pos.subPt(lively.getGlobalPosition(worldContext))
   }
-
+  
   // lively.openBrowser("https://lively4/etc/mounts", true, "Github")
   static async openBrowser(url, edit, patternOrPostion, replaceExisting, worldContext) {
     worldContext = worldContext || document.body

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

@@ -3,57 +3,106 @@
   <style data-src="/templates/livelystyle.css"></style>
   <style>
     :host {
-        width: fill-available;
-      }
-      :host(.selected) #root  {
-        background-color: rgba(150,150,255,0.1);
-        outline: 1px solid rgba(150,150,255,0.3);
-      }
-      #content {
-        display: none
-      }
-      #title {
-        font-style: italic
-      }
-      #entry {
-        text-indent: -20px;
-        margin-left: 20px;
-        padding: 3px;
-      }
-      #key {
-        font-weight: bold
-      }
-      
-      :host([mode="edit"]) #content {
-        display: block;
-        white-space: pre;
-        font-family: courier;
-        font-size: 9pt;
-        overflow: scroll;
-        width: 600px;
-      }
-    
-      :host([mode="edit"]) #entry {
-        display: none;
-      }
-    
-      #filename {
-        /* display: none; */
-      }
-    
-      :host([mode="edit"]) #filename {
-        display: block;
-      }
+      width: fill-available;
+    }
+    :host(.selected) #root  {
+      background-color: rgba(150,150,255,0.1);
+      outline: 1px solid rgba(150,150,255,0.3);
+    }
+    #root {
+      position: relative;
+    }
+    
+    #content {
+      display: none
+    }
+    
+    #title {
+      font-style: italic
+    }
+    
+    #entry {
+      text-indent: -20px;
+      margin-left: 20px;
+      padding: 3px;
+    }
+
+    #entry > * {
+      text-indent: 0px;
+      margin-left: 0px;
+      margin: 0px
+    }
+
+    #key {
+      font-weight: bold
+    }
+
+    :host([mode="edit"]) #content {
+      display: block;
+      white-space: pre;
+      font-family: courier;
+      font-size: 9pt;
+      overflow: scroll;
+      width: 100%;
+      background: white;
+    }
+
+    :host([mode="edit"]) #entry {
+      display: none;
+    }
+    
+    :host([mode="readonly"]) #edit {
+      display: none;
+    }
+
+    #cancel {
+      display: none;
+    }
+    
+    :host([mode="edit"]) #cancel {
+      display: block;
+    }
+    
+    #edit {
+      color: lightgray;
+    }
+    
+    #key:hover, .academic:hover, #edit:hover, #cancel:hover {
+      color: darkblue;
+      text-decoration: underline currentcolor; 
+    }
+    
+   
+    #cancel {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+    
+    
+    #draghandle {
+      width: 6px;
+      height: 6px;
+      background: darkblue;
+      display: inline-block;
+      border-radius: 4px;
+      border: 1px solid darkblue;
+
+    }
+
+    #draghandle:hover {
+      border: 1px solid orange;
+    }
   </style>
   <div id="root">
     <div id="entry">
+      <div id="draghandle"></div>
       [<span id="key"></span>] <span id="author"></span>. <span id="year"></span>.
       <span id="title"></span>
       <span id="misc"></span>
+      <span id="edit" title="edit entry"><i class="fa fa-pencil" aria-hidden="true"></i></span>
     </div>
-    <div id="content">
-      <div id="filename"></div>
-      <slot></slot>
-    </div>
+    <div id="cancel" title="cancel editing"><i class="fa fa-ban" aria-hidden="true"></i></div>
+    <div id="content"><slot></slot></div>
   </div>
 </template>

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

@@ -19,15 +19,12 @@ export default class LivelyBibtexEntry extends Morph {
     } catch(e) {
       console.warn("[lively-bibtex-entry] initialize failed, could not parse ", this.textContent)
     }
-    this.addEventListener("dblclick", evt => this.onDblClick(evt));
-
     this.get("#entry").addEventListener("dragstart", evt => this.onDragStart(evt));
 
-    this.get("#entry").draggable = true;
+    this.get("#draghandle").draggable = true;
   }
 
-  async onDragStart(evt) {
-    
+  async onDragStart(evt) { 
     evt.dataTransfer.setData("application/lively4id", lively.ensureID(this));
 
     if (evt.ctrlKey) {
@@ -37,10 +34,9 @@ export default class LivelyBibtexEntry extends Morph {
     }
   }
 
-  onDblClick(evt) {
-    if (this.getAttribute("mode") == "readonly") return
-    if (this.getAttribute("mode") == "edit") {
-      var newvalue;
+  
+  disableEditing() {
+    var newvalue;
       try {
         newvalue = Parser.toJSON(this.textContent);
       } catch (e) {
@@ -51,10 +47,10 @@ export default class LivelyBibtexEntry extends Morph {
         this.setAttribute("mode", "view");
         this.removeAttribute("contenteditable");
       }
-    } else {
-      this.setAttribute("mode", "edit");
-      this.setAttribute("contenteditable", "true");
-    }
+  }
+  enableEditing() {
+    this.setAttribute("mode", "edit");
+    this.setAttribute("contenteditable", "true");
   }
 
   get value() {
@@ -82,7 +78,9 @@ export default class LivelyBibtexEntry extends Morph {
   updateView() {
     if (!this.value || !this.value.entryTags) return;
     this.get("#key").textContent = this.key;
-    this.get("#key").addEventListener("click", () => lively.openBrowser("bib://" + this.key))
+    this.followURLonClick(this.get("#key"), "bib://" + this.key)
+    this.get("#edit").addEventListener("click", () => this.enableEditing())
+    this.get("#cancel").addEventListener("click", () => this.disableEditing())
     try {
       this.get("#author").textContent = this.parseAuthors(latexconv.convertLaTeXToUnicode(this.author)).join(", ");
     } catch (e) {
@@ -101,10 +99,6 @@ export default class LivelyBibtexEntry extends Morph {
       this.get("#misc").appendChild(<span class="academic"
             click={() => lively.openBrowser(url)}>[academic]</span>)
     }
-
-    
-    
-    this.get("#filename").textContent = "// " + this.generateFilename() + "";
   }
 
   generateFilename() {

src/components/widgets/lively-morph.js

@@ -89,6 +89,17 @@ export default class Morph extends HTMLElement {
     return "[" + this.constructor.name + "]"
   }
 
+  followURLonClick(element, url) {
+    lively.removeEventListener("followurl", element, "click")
+    lively.addEventListener("followurl", element, "click", (evt) => {
+      // distinguish between clicking and selecting text
+      if(window.getSelection().toString().length == 0) {
+        lively.openBrowser(url)
+       }
+    })
+  }
+  
+  
   // another option is 'inplace'
   get livelyUpdateStrategy() { return 'migrate'; }
 }