[fix] custom_html_popup

- fixes #60

src/bar.js

@@ -205,7 +205,8 @@ export default class Bar {
         this.gantt.show_popup({
             target_element: this.$bar,
             title: this.task.name,
-            subtitle: subtitle
+            subtitle: subtitle,
+            task: this.task
         });
     }
 

src/index.js

@@ -813,7 +813,10 @@ export default class Gantt {
 
     show_popup(options) {
         if (!this.popup) {
-            this.popup = new Popup(this.popup_wrapper);
+            this.popup = new Popup(
+                this.popup_wrapper,
+                this.options.custom_popup_html
+            );
         }
         this.popup.show(options);
     }

src/popup.js

@@ -1,6 +1,7 @@
 export default class Popup {
-    constructor(parent) {
+    constructor(parent, custom_html) {
         this.parent = parent;
+        this.custom_html = custom_html;
         this.make();
     }
 
@@ -27,11 +28,17 @@ export default class Popup {
         }
         const target_element = options.target_element;
 
-        // set data
-        this.title.innerHTML = options.title;
-        this.subtitle.innerHTML = options.subtitle;
-
-        this.parent.style.width = this.parent.clientWidth + 'px';
+        if (this.custom_html) {
+            let html = this.custom_html(options.task);
+            html += '<div class="pointer"></div>';
+            this.parent.innerHTML = html;
+            this.pointer = this.parent.querySelector('.pointer');
+        } else {
+            // set data
+            this.title.innerHTML = options.title;
+            this.subtitle.innerHTML = options.subtitle;
+            this.parent.style.width = this.parent.clientWidth + 'px';
+        }
 
         // set position
         let position_meta;
@@ -44,19 +51,11 @@ export default class Popup {
         if (options.position === 'left') {
             this.parent.style.left =
                 position_meta.x + (position_meta.width + 10) + 'px';
-            this.parent.style.top =
-                position_meta.y -
-                this.title.clientHeight / 2 +
-                position_meta.height / 2 +
-                'px';
+            this.parent.style.top = position_meta.y + 'px';
 
             this.pointer.style.transform = 'rotateZ(90deg)';
             this.pointer.style.left = '-7px';
-            this.pointer.style.top =
-                this.title.clientHeight / 2 -
-                this.pointer.getBoundingClientRect().height +
-                2 +
-                'px';
+            this.pointer.style.top = '2px';
         }
 
         // show