feat: improved popup, switch handle and popup

src/bar.js

@@ -271,23 +271,12 @@ export default class Bar {
   setup_click_event() {
     let in_action = false;
     $.on(this.group, "mouseover", (e) => this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e]))
+    $.on(this.group, "mouseenter", (e) => this.show_popup(e.offsetX))
+    $.on(this.group, "mouseleave", () => this.gantt.hide_popup())
+
 
     $.on(this.group, "focus " + this.gantt.options.popup_trigger, (e) => {
       this.gantt.trigger_event("click", [this.task]);
-      if (this.action_completed) {
-        // just finished a move action, wait for a few seconds
-        return;
-      }
-      if (in_action) {
-        this.gantt.hide_popup();
-        this.group.classList.remove("active");
-      } else {
-        this.show_popup(e.offsetX);
-        this.gantt.unselect_all();
-        this.group.classList.add("active");
-      }
-
-      in_action = !in_action
     });
 
     $.on(this.group, "dblclick", (e) => {
@@ -313,7 +302,7 @@ export default class Bar {
       "MMM D",
       this.gantt.options.language,
     );
-    const subtitle = start_date + " - " + end_date;
+    const subtitle = `${start_date} -  ${end_date}<br/>Progress: ${this.task.progress}`;
 
     this.gantt.show_popup({
       x,

src/gantt.scss

@@ -158,17 +158,17 @@ $light-blue: #c4c4e9 !default;
     transition: opacity 0.3s ease;
   }
 
-  &:hover {
-    .handle {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
   .bar-wrapper {
     cursor: pointer;
     outline: none;
 
+    &.active {
+      & .handle {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
     .bar {
       -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
       filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .7));
@@ -186,6 +186,7 @@ $light-blue: #c4c4e9 !default;
       }
     }
 
+
   }
 
   .lower-text,
@@ -220,6 +221,11 @@ $light-blue: #c4c4e9 !default;
     color: #959da5;
     border-radius: 3px;
     border: 1px solid rgba(0, 0, 0);
+    width: max-content;
+
+    &.hidden {
+      opacity: 0 !important;
+    }
 
     .title {
       border-bottom: 1px solid $progress;

src/index.js

@@ -807,6 +807,7 @@ export default class Gantt {
 
     $.on(this.$svg, "mousedown", ".bar-wrapper, .handle", (e, element) => {
       const bar_wrapper = $.closest(".bar-wrapper", element);
+      bars.forEach((bar) => bar.group.classList.remove("active"));
 
       if (element.classList.contains("left")) {
         is_resizing_left = true;
@@ -817,6 +818,7 @@ export default class Gantt {
       }
 
       bar_wrapper.classList.add("active");
+      this.popup.parent.classList.add('hidden')
 
       x_on_start = e.offsetX;
       y_on_start = e.offsetY;
@@ -898,9 +900,6 @@ export default class Gantt {
     });
 
     document.addEventListener("mouseup", (e) => {
-      if (is_dragging || is_resizing_left || is_resizing_right) {
-        bars.forEach((bar) => bar.group.classList.remove("active"));
-      }
 
       is_dragging = false;
       is_resizing_left = false;
@@ -1028,6 +1027,7 @@ export default class Gantt {
     [...this.$svg.querySelectorAll(".bar-wrapper")].forEach((el) => {
       el.classList.remove("active");
     });
+    this.popup.parent.classList.remove('hidden')
   }
 
   view_is(modes) {

src/popup.js

@@ -34,7 +34,6 @@ export default class Popup {
       // set data
       this.title.innerHTML = options.title;
       this.subtitle.innerHTML = options.subtitle;
-      this.parent.style.width = this.parent.clientWidth + "px";
     }
 
     // set position