Merge pull request #202 from SwiftFiddle/balloon

Add editor balloon(tooltip)

Author: kishikawakatsumi

Public/css/balloon.css

@@ -0,0 +1,29 @@
+.balloon-content {
+  font-size: 70%;
+  white-space: nowrap;
+  border-radius: 5px;
+  background-color: #555;
+  color: #fff;
+  padding: 2px 8px;
+  position: absolute;
+  transform: translateX(-30%);
+}
+
+.balloon-content:before {
+  content: "";
+  position: absolute;
+  top: 34px;
+  left: calc(50% - 9px);
+  border: 9px solid transparent;
+  border-top: 9px solid #555;
+}
+
+.balloon-content .title {
+  color: #fff;
+  font-weight: bolder;
+}
+
+.balloon-content .range {
+  color: #dcdcdc;
+  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace;
+}

Public/js/app.js

@@ -2,6 +2,7 @@
 
 import { Tooltip } from "bootstrap";
 import { Editor } from "./editor.js";
+import { Balloon } from "./balloon.js";
 import { StructureView } from "./structure_view.js";
 import { SyntaxView } from "./syntax_view.js";
 import { StatisticsView } from "./statistics_view.js";
@@ -18,6 +19,7 @@ export class App {
 
   constructor() {
     this.editor = new Editor(document.getElementById("editor-container"));
+    this.balloon = new Balloon();
 
     this.structureView = new StructureView(
       document.getElementById("structure")
@@ -145,8 +147,19 @@ export class App {
 
   updateStructure(structureData) {
     this.structureView.update(structureData);
+
     this.structureView.onmouseover = (event, target, data) => {
-      this.editor.setSelection(data.range);
+      const title = data.token ? "Token" : `${data.text}`;
+      const range = data.range;
+
+      this.balloon.content = `<div class="title">${title}</div><div class="range">${range.startRow}:${range.startColumn} - ${range.endRow}:${range.endColumn}</div>`;
+      this.balloon.show(this.editor.charCoords(range));
+
+      this.editor.setSelection(range);
+    };
+    this.structureView.onmouseout = (event, target, data) => {
+      this.balloon.hide();
+      this.editor.clearSelection();
     };
   }
 

Public/js/balloon.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import "../css/balloon.css";
+
+export class Balloon {
+  set content(value) {
+    this.balloon.innerHTML = value;
+  }
+
+  constructor() {
+    this.balloon = document.createElement("div");
+
+    this.onmouseover = () => {};
+    this.onmouseout = () => {};
+
+    this.init();
+  }
+
+  init() {
+    this.balloon.classList.add("d-none", "balloon-content");
+    document.body.appendChild(this.balloon);
+
+    this.balloon.addEventListener("mouseenter", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.onmouseover(event);
+    });
+    this.balloon.addEventListener("mouseleave", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.onmouseout(event);
+    });
+  }
+
+  show(position) {
+    this.balloon.classList.remove("d-none");
+    const bounds = this.balloon.getBoundingClientRect();
+
+    this.balloon.style.top = `${position.top - bounds.height - 4}px`;
+    this.balloon.style.left = `${position.left + 10}px`;
+  }
+
+  hide() {
+    this.balloon.classList.add("d-none");
+  }
+}

Public/js/editor.js

@@ -1,18 +1,16 @@
 "use strict";
 
 import "codemirror/lib/codemirror.css";
+import "../css/editor.css";
 
 import CodeMirror from "codemirror";
 import "codemirror/mode/swift/swift";
 import "codemirror/addon/edit/matchbrackets";
 import "codemirror/addon/edit/closebrackets";
 
-import "../css/editor.css";
-
 export class Editor {
   constructor(container) {
     this.container = container;
-
     this.init();
   }
 
@@ -82,6 +80,13 @@ export class Editor {
     });
   }
 
+  charCoords(range) {
+    return this.editor.charCoords(
+      { ch: range.startColumn - 1, line: range.startRow - 1 },
+      "page"
+    );
+  }
+
   focus() {
     this.editor.focus();
   }

Public/js/structure_view.js

@@ -13,6 +13,7 @@ export class StructureView {
     this.popover = new Popover();
 
     this.onmouseover = () => {};
+    this.onmouseout = () => {};
 
     this.init();
   }
@@ -51,6 +52,8 @@ export class StructureView {
     };
 
     this.treeView.onmouseout = (event, target, data) => {
+      this.onmouseout(event, target, data);
+
       if (!event.relatedTarget) {
         return;
       }