refactor: move tooltip functionality to class (#53)

Author: themustafaomar

src/js/core/createTooltip.js

@@ -15,4 +15,4 @@ class Line extends MapElement {
   }
 }
 
-export default Line
+export default Line

src/js/elements/line.js

@@ -0,0 +1,76 @@
+import {
+  createElement,
+  findElement
+} from "../util"
+import EventHandler from "../eventHandler"
+
+/**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+class Tooltip {
+  constructor(map) {
+    const tooltip = createElement('div', 'jvm-tooltip')
+
+    this._map = map
+    this._tooltip = document.body.appendChild(tooltip)
+
+    this._bindEventListeners()
+
+    return this
+  }
+
+  _bindEventListeners() {
+    EventHandler.on(this._map.container, 'mousemove', event => {
+      if (!this._tooltip.classList.contains('active')) {
+        return
+      }
+
+      const container = findElement(this._map.container, '#jvm-regions-group').getBoundingClientRect()
+      const space = 5 // Space between the cursor and tooltip element
+
+      // Tooltip
+      const { height, width } = this._tooltip.getBoundingClientRect()
+      const topIsPassed = event.clientY <= (container.top + height + space)
+      let top = event.pageY - height - space
+      let left = event.pageX - width - space
+
+      // Ensure the tooltip will never cross outside the canvas area(map)
+      if (topIsPassed) { // Top:
+        top += height + space
+
+        // The cursor is a bit larger from left side
+        left -= space * 2
+      }
+
+      if (event.clientX < (container.left + width + space)) { // Left:
+        left = event.pageX + space + 2
+
+        if (topIsPassed) {
+          left += space * 2
+        }
+      }
+
+      this._tooltip.style.cssText = `top: ${top}px; left: ${left}px`
+    })
+  }
+
+  show() {
+    this._tooltip.classList.add('active')
+  }
+
+  hide() {
+    this._tooltip.classList.remove('active')
+  }
+
+  text(string) {
+    if (!string) {
+      return this._tooltip.textContent
+    }
+
+    this._tooltip.textContent = string
+  }
+}
+
+export default Tooltip

src/js/elements/tooltip.js

@@ -9,6 +9,7 @@ import SVGCanvasElement from './svg/canvasElement'
 import MapPrototypes from './core/index'
 import Events from './defaults/events'
 import EventHandler from './eventHandler'
+import Tooltip from './elements/tooltip'
 
 /**
  * ------------------------------------------------------------------------
@@ -97,7 +98,7 @@ class Map {
 
     // Create toolip
     if (options.showTooltip) {
-      this.createTooltip()
+      this.tooltip = new Tooltip(this)
     }
 
     // Create zoom buttons if `zoomButtons` is set to true

src/js/map.js

@@ -64,6 +64,9 @@ image, text, .#{$classPrefix}zoomin, .#{$classPrefix}zoomout { user-select: none
   position: absolute;
   display: none;
   color: #FFF;
+  &.active {
+    display: block;
+  }
 }
 
 // Zoom buttons