jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

support popup on click

Browse Source
This commit is contained in:
safwansamsudeen 2024-11-28 16:25:30 +05:30
parent 75bf77ed5d
commit 45f02df52d
6 changed files with 252 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

401
dist/frappe-gantt.es.js vendored
View File

@ -36,54 +36,54 @@ const k = "year", D = "month", $ = "day", E = "hour", Y = "minute", A = "second"
return n; return n;
if (typeof n == "string") { if (typeof n == "string") {
let s, i; let s, i;
const r = n.split(" "); const o = n.split(" ");
s = r[0].split(t).map((a) => parseInt(a, 10)), i = r[1] && r[1].split(e), s[1] = s[1] ? s[1] - 1 : 0; s = o[0].split(t).map((a) => parseInt(a, 10)), i = o[1] && o[1].split(e), s[1] = s[1] ? s[1] - 1 : 0;
let o = s; let r = s;
return i && i.length && (i.length === 4 && (i[3] = "0." + i[3], i[3] = parseFloat(i[3]) * 1e3), o = o.concat(i)), new Date(...o); return i && i.length && (i.length === 4 && (i[3] = "0." + i[3], i[3] = parseFloat(i[3]) * 1e3), r = r.concat(i)), new Date(...r);
} }
}, },
to_string(n, t = !1) { to_string(n, t = !1) {
if (!(n instanceof Date)) if (!(n instanceof Date))
throw new TypeError("Invalid argument type"); throw new TypeError("Invalid argument type");
const e = this.get_date_values(n).map((r, o) => (o === 1 && (r = r + 1), o === 6 ? v(r + "", 3, "0") : v(r + "", 2, "0"))), s = `${e[0]}-${e[1]}-${e[2]}`, i = `${e[3]}:${e[4]}:${e[5]}.${e[6]}`; const e = this.get_date_values(n).map((o, r) => (r === 1 && (o = o + 1), r === 6 ? v(o + "", 3, "0") : v(o + "", 2, "0"))), s = `${e[0]}-${e[1]}-${e[2]}`, i = `${e[3]}:${e[4]}:${e[5]}.${e[6]}`;
return s + (t ? " " + i : ""); return s + (t ? " " + i : "");
}, },
format(n, t = "YYYY-MM-DD HH:mm:ss.SSS", e = "en") { format(n, t = "YYYY-MM-DD HH:mm:ss.SSS", e = "en") {
const i = new Intl.DateTimeFormat(e, { const i = new Intl.DateTimeFormat(e, {
month: "long" month: "long"
}).format(n), r = i.charAt(0).toUpperCase() + i.slice(1), o = this.get_date_values(n).map((g) => v(g, 2, 0)), a = { }).format(n), o = i.charAt(0).toUpperCase() + i.slice(1), r = this.get_date_values(n).map((g) => v(g, 2, 0)), a = {
YYYY: o[0], YYYY: r[0],
MM: v(+o[1] + 1, 2, 0), MM: v(+r[1] + 1, 2, 0),
DD: o[2], DD: r[2],
HH: o[3], HH: r[3],
mm: o[4], mm: r[4],
ss: o[5], ss: r[5],
SSS: o[6], SSS: r[6],
D: o[2], D: r[2],
MMMM: r, MMMM: o,
MMM: S[r] MMM: S[o]
}; };
let d = t; let p = t;
const p = []; const d = [];
return Object.keys(a).sort((g, c) => c.length - g.length).forEach((g) => { return Object.keys(a).sort((g, c) => c.length - g.length).forEach((g) => {
d.includes(g) && (d = d.replaceAll(g, `$${p.length}`), p.push(a[g])); p.includes(g) && (p = p.replaceAll(g, `$${d.length}`), d.push(a[g]));
}), p.forEach((g, c) => { }), d.forEach((g, c) => {
d = d.replaceAll(`$${c}`, g); p = p.replaceAll(`$${c}`, g);
}), d; }), p;
}, },
diff(n, t, e = $) { diff(n, t, e = $) {
let s, i, r, o, a, d, p; let s, i, o, r, a, p, d;
s = n - t, i = s / 1e3, o = i / 60, r = o / 60, a = r / 24; s = n - t, i = s / 1e3, r = i / 60, o = r / 60, a = o / 24;
const g = n.getFullYear() - t.getFullYear(), c = n.getMonth() - t.getMonth(); const g = n.getFullYear() - t.getFullYear(), c = n.getMonth() - t.getMonth();
return d = g * 12 + c, n.getDate() < t.getDate() && d--, p = d / 12, e.endsWith("s") || (e += "s"), Math.floor( return p = g * 12 + c, n.getDate() < t.getDate() && p--, d = p / 12, e.endsWith("s") || (e += "s"), Math.floor(
{ {
milliseconds: s, milliseconds: s,
seconds: i, seconds: i,
minutes: o, minutes: r,
hours: r, hours: o,
days: a, days: a,
months: d, months: p,
years: p years: d
}[e] }[e]
); );
}, },
@ -117,9 +117,9 @@ const k = "year", D = "month", $ = "day", E = "hour", Y = "minute", A = "second"
[A]: 1, [A]: 1,
[L]: 0 [L]: 0
}; };
function s(r) { function s(o) {
const o = e[t]; const r = e[t];
return e[r] <= o; return e[o] <= r;
} }
const i = [ const i = [
n.getFullYear(), n.getFullYear(),
@ -169,19 +169,19 @@ function u(n, t) {
function H(n, t, e, s) { function H(n, t, e, s) {
const i = W(n, t, e, s); const i = W(n, t, e, s);
if (i === n) { if (i === n) {
const r = document.createEvent("HTMLEvents"); const o = document.createEvent("HTMLEvents");
r.initEvent("click", !0, !0), r.eventName = "click", i.dispatchEvent(r); o.initEvent("click", !0, !0), o.eventName = "click", i.dispatchEvent(o);
} }
} }
function W(n, t, e, s, i = "0.4s", r = "0.1s") { function W(n, t, e, s, i = "0.4s", o = "0.1s") {
const o = n.querySelector("animate"); const r = n.querySelector("animate");
if (o) if (r)
return _.attr(o, { return _.attr(r, {
attributeName: t, attributeName: t,
from: e, from: e,
to: s, to: s,
dur: i, dur: i,
begin: "click + " + r begin: "click + " + o
// artificial click // artificial click
}), n; }), n;
const a = u("animate", { const a = u("animate", {
@ -189,7 +189,7 @@ function W(n, t, e, s, i = "0.4s", r = "0.1s") {
from: e, from: e,
to: s, to: s,
dur: i, dur: i,
begin: r, begin: o,
calcMode: "spline", calcMode: "spline",
values: e + ";" + s, values: e + ";" + s,
keyTimes: "0; 1", keyTimes: "0; 1",
@ -219,8 +219,8 @@ _.bind = (n, t, e) => {
}; };
_.delegate = (n, t, e, s) => { _.delegate = (n, t, e, s) => {
n.addEventListener(t, function(i) { n.addEventListener(t, function(i) {
const r = i.target.closest(e); const o = i.target.closest(e);
r && (i.delegatedTarget = r, s.call(this, i, r)); o && (i.delegatedTarget = o, s.call(this, i, o));
}); });
}; };
_.closest = (n, t) => t ? t.matches(n) ? t : _.closest(n, t.parentNode) : null; _.closest = (n, t) => t ? t.matches(n) ? t : _.closest(n, t.parentNode) : null;
@ -399,29 +399,38 @@ class O {
} }
setup_click_event() { setup_click_event() {
let t = this.task.id; let t = this.task.id;
_.on(this.group, "mouseover", (s) => { if (_.on(this.group, "mouseover", (e) => {
this.gantt.trigger_event("hover", [ this.gantt.trigger_event("hover", [
this.task, this.task,
s.screenX, e.screenX,
s.screenY, e.screenY,
s e
]); ]);
}); }), this.gantt.options.popup_on === "click") {
let e; let e = !1;
_.on( _.on(this.group, "click", (s) => {
this.group, console.log(e), e ? this.gantt.hide_popup() : (this.show_popup(s.offsetX || s.layerX), document.getElementById(
"mouseenter",
(s) => e = setTimeout(() => {
this.show_popup(s.offsetX || s.layerX), document.getElementById(
`${t}-highlight` `${t}-highlight`
).style.display = "block"; ).style.display = "block"), e = !e;
}, 200) });
), _.on(this.group, "mouseleave", () => { } else {
var s, i; let e;
clearTimeout(e), (i = (s = this.gantt.popup) == null ? void 0 : s.hide) == null || i.call(s), document.getElementById(`${t}-highlight`).style.display = "none"; _.on(
}), _.on(this.group, "click", () => { this.group,
"mouseenter",
(s) => e = setTimeout(() => {
this.show_popup(s.offsetX || s.layerX), document.getElementById(
`${t}-highlight`
).style.display = "block";
}, 200)
), _.on(this.group, "mouseleave", () => {
var s, i;
clearTimeout(e), (i = (s = this.gantt.popup) == null ? void 0 : s.hide) == null || i.call(s), document.getElementById(`${t}-highlight`).style.display = "none";
});
}
_.on(this.group, "click", () => {
this.gantt.trigger_event("click", [this.task]); this.gantt.trigger_event("click", [this.task]);
}), _.on(this.group, "dblclick", (s) => { }), _.on(this.group, "dblclick", (e) => {
this.action_completed || (this.group.classList.remove("active"), this.gantt.popup && this.gantt.popup.parent.classList.remove("hidden"), this.gantt.trigger_event("double_click", [this.task])); this.action_completed || (this.group.classList.remove("active"), this.gantt.popup && this.gantt.popup.parent.classList.remove("hidden"), this.gantt.trigger_event("double_click", [this.task]));
}); });
} }
@ -448,7 +457,7 @@ class O {
update_bar_position({ x: t = null, width: e = null }) { update_bar_position({ x: t = null, width: e = null }) {
const s = this.$bar; const s = this.$bar;
if (t) { if (t) {
if (!this.task.dependencies.map((o) => this.gantt.get_bar(o).$bar.getX()).reduce((o, a) => t >= a, t)) { if (!this.task.dependencies.map((r) => this.gantt.get_bar(r).$bar.getX()).reduce((r, a) => t >= a, t)) {
e = null; e = null;
return; return;
} }
@ -457,9 +466,9 @@ class O {
e && (this.update_attr(s, "width", e), this.$date_highlight.style.width = e + "px"), this.update_label_position(), this.update_handle_position(), this.gantt.options.show_expected_progress && (this.date_changed(), this.compute_duration(), this.update_expected_progressbar_position()), this.update_progressbar_position(), this.update_arrow_position(); e && (this.update_attr(s, "width", e), this.$date_highlight.style.width = e + "px"), this.update_label_position(), this.update_handle_position(), this.gantt.options.show_expected_progress && (this.date_changed(), this.compute_duration(), this.update_expected_progressbar_position()), this.update_progressbar_position(), this.update_arrow_position();
} }
update_label_position_on_horizontal_scroll({ x: t, sx: e }) { update_label_position_on_horizontal_scroll({ x: t, sx: e }) {
const s = document.querySelector(".gantt-container"), i = this.group.querySelector(".bar-label"), r = this.group.querySelector(".bar-img") || "", o = this.bar_group.querySelector(".img_mask") || ""; const s = document.querySelector(".gantt-container"), i = this.group.querySelector(".bar-label"), o = this.group.querySelector(".bar-img") || "", r = this.bar_group.querySelector(".img_mask") || "";
let a = this.$bar.getX() + this.$bar.getWidth(), d = i.getX() + t, p = r && r.getX() + t || 0, g = r && r.getBBox().width + 7 || 7, c = d + i.getBBox().width + 7, f = e + s.clientWidth / 2; let a = this.$bar.getX() + this.$bar.getWidth(), p = i.getX() + t, d = o && o.getX() + t || 0, g = o && o.getBBox().width + 7 || 7, c = p + i.getBBox().width + 7, f = e + s.clientWidth / 2;
i.classList.contains("big") || (c < a && t > 0 && c < f || d - g > this.$bar.getX() && t < 0 && c > f) && (i.setAttribute("x", d), r && (r.setAttribute("x", p), o.setAttribute("x", p))); i.classList.contains("big") || (c < a && t > 0 && c < f || p - g > this.$bar.getX() && t < 0 && c > f) && (i.setAttribute("x", p), o && (o.setAttribute("x", d), r.setAttribute("x", d)));
} }
date_changed() { date_changed() {
let t = !1; let t = !1;
@ -490,12 +499,12 @@ class O {
i, i,
"minute" "minute"
)); ));
const r = t.getWidth() / this.gantt.options.column_width, o = h.add( const o = t.getWidth() / this.gantt.options.column_width, r = h.add(
s, s,
r * this.gantt.options.step, o * this.gantt.options.step,
"hour" "hour"
); );
return { new_start_date: s, new_end_date: o }; return { new_start_date: s, new_end_date: r };
} }
compute_progress() { compute_progress() {
const t = this.$bar_progress.getWidth() / this.$bar.getWidth() * 100; const t = this.$bar_progress.getWidth() / this.$bar.getWidth() * 100;
@ -506,15 +515,15 @@ class O {
} }
compute_x() { compute_x() {
const { step: t, column_width: e } = this.gantt.options, s = this.task._start, i = this.gantt.gantt_start; const { step: t, column_width: e } = this.gantt.options, s = this.task._start, i = this.gantt.gantt_start;
let o = h.diff(s, i, "hour") / t * e; let r = h.diff(s, i, "hour") / t * e;
if (this.gantt.view_is("Month")) { if (this.gantt.view_is("Month")) {
const a = h.diff(s, i, "month") * 30, d = Math.min( const a = h.diff(s, i, "month") * 30, p = Math.min(
29, 29,
h.format(s, "DD") h.format(s, "DD")
); );
o = (a + d) * e / 30; r = (a + p) * e / 30;
} }
this.x = o; this.x = r;
} }
compute_y() { compute_y() {
this.y = this.gantt.options.header_height + this.gantt.options.padding + this.task._index * (this.height + this.gantt.options.padding); this.y = this.gantt.options.header_height + this.gantt.options.padding + this.task._index * (this.height + this.gantt.options.padding);
@ -543,20 +552,20 @@ class O {
} }
update_label_position() { update_label_position() {
const t = this.bar_group.querySelector(".img_mask") || "", e = this.$bar, s = this.group.querySelector(".bar-label"), i = this.group.querySelector(".bar-img"); const t = this.bar_group.querySelector(".img_mask") || "", e = this.$bar, s = this.group.querySelector(".bar-label"), i = this.group.querySelector(".bar-img");
let r = 5, o = this.image_size + 10; let o = 5, r = this.image_size + 10;
const a = s.getBBox().width, d = e.getWidth(); const a = s.getBBox().width, p = e.getWidth();
a > d ? (s.classList.add("big"), i ? (i.setAttribute("x", e.getX() + e.getWidth() + r), t.setAttribute( a > p ? (s.classList.add("big"), i ? (i.setAttribute("x", e.getX() + e.getWidth() + o), t.setAttribute(
"x",
e.getX() + e.getWidth() + r
), s.setAttribute(
"x", "x",
e.getX() + e.getWidth() + o e.getX() + e.getWidth() + o
)) : s.setAttribute("x", e.getX() + e.getWidth() + r)) : (s.classList.remove("big"), i ? (i.setAttribute("x", e.getX() + r), t.setAttribute("x", e.getX() + r), s.setAttribute( ), s.setAttribute(
"x", "x",
e.getX() + d / 2 + o e.getX() + e.getWidth() + r
)) : s.setAttribute("x", e.getX() + e.getWidth() + o)) : (s.classList.remove("big"), i ? (i.setAttribute("x", e.getX() + o), t.setAttribute("x", e.getX() + o), s.setAttribute(
"x",
e.getX() + p / 2 + r
)) : s.setAttribute( )) : s.setAttribute(
"x", "x",
e.getX() + d / 2 - a / 2 e.getX() + p / 2 - a / 2
)); ));
} }
update_handle_position() { update_handle_position() {
@ -582,25 +591,25 @@ class C {
const e = () => this.to_task.$bar.getX() < t + this.gantt.options.padding && t > this.from_task.$bar.getX() + this.gantt.options.padding; const e = () => this.to_task.$bar.getX() < t + this.gantt.options.padding && t > this.from_task.$bar.getX() + this.gantt.options.padding;
for (; e(); ) for (; e(); )
t -= 10; t -= 10;
const s = this.gantt.options.header_height + this.gantt.options.bar_height + (this.gantt.options.padding + this.gantt.options.bar_height) * this.from_task.task._index + this.gantt.options.padding, i = this.to_task.$bar.getX() - this.gantt.options.padding / 2 - 7, r = this.gantt.options.header_height + this.gantt.options.bar_height / 2 + (this.gantt.options.padding + this.gantt.options.bar_height) * this.to_task.task._index + this.gantt.options.padding, o = this.from_task.task._index > this.to_task.task._index, a = this.gantt.options.arrow_curve, d = o ? 1 : 0, p = o ? -a : a, g = o ? r + this.gantt.options.arrow_curve : r - this.gantt.options.arrow_curve; const s = this.gantt.options.header_height + this.gantt.options.bar_height + (this.gantt.options.padding + this.gantt.options.bar_height) * this.from_task.task._index + this.gantt.options.padding, i = this.to_task.$bar.getX() - this.gantt.options.padding / 2 - 7, o = this.gantt.options.header_height + this.gantt.options.bar_height / 2 + (this.gantt.options.padding + this.gantt.options.bar_height) * this.to_task.task._index + this.gantt.options.padding, r = this.from_task.task._index > this.to_task.task._index, a = this.gantt.options.arrow_curve, p = r ? 1 : 0, d = r ? -a : a, g = r ? o + this.gantt.options.arrow_curve : o - this.gantt.options.arrow_curve;
if (this.path = ` if (this.path = `
M ${t} ${s} M ${t} ${s}
V ${g} V ${g}
a ${a} ${a} 0 0 ${d} ${a} ${p} a ${a} ${a} 0 0 ${p} ${a} ${d}
L ${i} ${r} L ${i} ${o}
m -5 -5 m -5 -5
l 5 5 l 5 5
l -5 5`, this.to_task.$bar.getX() < this.from_task.$bar.getX() + this.gantt.options.padding) { l -5 5`, this.to_task.$bar.getX() < this.from_task.$bar.getX() + this.gantt.options.padding) {
const c = this.gantt.options.padding / 2 - a, f = this.to_task.$bar.getY() + this.to_task.$bar.getHeight() / 2 - p, w = this.to_task.$bar.getX() - this.gantt.options.padding; const c = this.gantt.options.padding / 2 - a, f = this.to_task.$bar.getY() + this.to_task.$bar.getHeight() / 2 - d, w = this.to_task.$bar.getX() - this.gantt.options.padding;
this.path = ` this.path = `
M ${t} ${s} M ${t} ${s}
v ${c} v ${c}
a ${a} ${a} 0 0 1 -${a} ${a} a ${a} ${a} 0 0 1 -${a} ${a}
H ${w} H ${w}
a ${a} ${a} 0 0 ${d} -${a} ${p} a ${a} ${a} 0 0 ${p} -${a} ${d}
V ${f} V ${f}
a ${a} ${a} 0 0 ${d} ${a} ${p} a ${a} ${a} 0 0 ${p} ${a} ${d}
L ${i} ${r} L ${i} ${o}
m -5 -5 m -5 -5
l 5 5 l 5 5
l -5 5`; l -5 5`;
@ -637,8 +646,9 @@ class N {
i += '<div class="pointer"></div>', this.parent.innerHTML = i, this.pointer = this.parent.querySelector(".pointer"); i += '<div class="pointer"></div>', this.parent.innerHTML = i, this.pointer = this.parent.querySelector(".pointer");
} else } else
this.title.innerHTML = t.title, this.subtitle.innerHTML = t.subtitle; this.title.innerHTML = t.title, this.subtitle.innerHTML = t.subtitle;
console.log("hey in");
let s; let s;
e instanceof HTMLElement ? s = e.getBoundingClientRect() : e instanceof SVGElement && (s = t.target_element.getBBox()), this.parent.style.left = t.x - this.parent.clientWidth / 2 + "px", this.parent.style.top = s.y + s.height + 10 + "px", this.pointer.style.left = this.parent.clientWidth / 2 + "px", this.pointer.style.top = "-15px", this.parent.style.opacity = 1; e instanceof HTMLElement ? s = e.getBoundingClientRect() : e instanceof SVGElement && (s = t.target_element.getBBox()), this.parent.style.left = t.x - this.parent.clientWidth / 2 + "px", this.parent.style.top = s.y + s.height + 10 + "px", this.parent.classList.remove("hidden"), this.pointer.style.left = this.parent.clientWidth / 2 + "px", this.pointer.style.top = "-15px", this.parent.style.opacity = 1;
} }
hide() { hide() {
this.parent.style.opacity = 0, this.parent.style.left = 0; this.parent.style.opacity = 0, this.parent.style.left = 0;
@ -672,6 +682,7 @@ const l = {
date_format: "YYYY-MM-DD", date_format: "YYYY-MM-DD",
show_expected_progress: !1, show_expected_progress: !1,
popup: null, popup: null,
popup_on: "hover",
language: "en", language: "en",
readonly: !1, readonly: !1,
progress_readonly: !1, progress_readonly: !1,
@ -714,19 +725,19 @@ class B {
setup_tasks(t) { setup_tasks(t) {
this.tasks = t.map((e, s) => { this.tasks = t.map((e, s) => {
if (e._start = h.parse(e.start), e.end === void 0 && e.duration !== void 0 && (e.end = e._start, e.duration.split(" ").forEach((a) => { if (e._start = h.parse(e.start), e.end === void 0 && e.duration !== void 0 && (e.end = e._start, e.duration.split(" ").forEach((a) => {
let { duration: d, scale: p } = h.parse_duration(a); let { duration: p, scale: d } = h.parse_duration(a);
e.end = h.add(e.end, d, p); e.end = h.add(e.end, p, d);
})), e._end = h.parse(e.end), h.diff(e._end, e._start, "year") < 0) })), e._end = h.parse(e.end), h.diff(e._end, e._start, "year") < 0)
throw Error( throw Error(
"start of task can't be after end of task: in task #, " + (s + 1) "start of task can't be after end of task: in task #, " + (s + 1)
); );
if (h.diff(e._end, e._start, "year") > 10 && (e.end = null), e._index = s, !e.start && !e.end) { if (h.diff(e._end, e._start, "year") > 10 && (e.end = null), e._index = s, !e.start && !e.end) {
const o = h.today(); const r = h.today();
e._start = o, e._end = h.add(o, 2, "day"); e._start = r, e._end = h.add(r, 2, "day");
} }
if (!e.start && e.end && (e._start = h.add(e._end, -2, "day")), e.start && !e.end && (e._end = h.add(e._start, 2, "day")), h.get_date_values(e._end).slice(3).every((o) => o === 0) && (e._end = h.add(e._end, 24, "hour")), (!e.start || !e.end) && (e.invalid = !0), typeof e.dependencies == "string" || !e.dependencies) { if (!e.start && e.end && (e._start = h.add(e._end, -2, "day")), e.start && !e.end && (e._end = h.add(e._start, 2, "day")), h.get_date_values(e._end).slice(3).every((r) => r === 0) && (e._end = h.add(e._end, 24, "hour")), (!e.start || !e.end) && (e.invalid = !0), typeof e.dependencies == "string" || !e.dependencies) {
let o = []; let r = [];
e.dependencies && (o = e.dependencies.split(",").map((a) => a.trim().replaceAll(" ", "_")).filter((a) => a)), e.dependencies = o; e.dependencies && (r = e.dependencies.split(",").map((a) => a.trim().replaceAll(" ", "_")).filter((a) => a)), e.dependencies = r;
} }
return e.id ? typeof e.id == "string" ? e.id = e.id.replaceAll(" ", "_") : e.id = `${e.id}` : e.id = F(e), e; return e.id ? typeof e.id == "string" ? e.id = e.id.replaceAll(" ", "_") : e.id = `${e.id}` : e.id = F(e), e;
}), this.setup_dependencies(); }), this.setup_dependencies();
@ -756,21 +767,21 @@ class B {
let t, e; let t, e;
this.gantt_start ? t = h.start_of(this.gantt_start, "day") : t = /* @__PURE__ */ new Date(), this.gantt_end ? e = h.start_of(this.gantt_end, "day") : e = /* @__PURE__ */ new Date(); this.gantt_start ? t = h.start_of(this.gantt_start, "day") : t = /* @__PURE__ */ new Date(), this.gantt_end ? e = h.start_of(this.gantt_end, "day") : e = /* @__PURE__ */ new Date();
let s; let s;
for (let [a, d] of Object.entries(l)) for (let [a, p] of Object.entries(l))
d === this.options.view_mode && (s = a); p === this.options.view_mode && (s = a);
const [i, r] = this.options.view_mode_padding[s].map(h.parse_duration); const [i, o] = this.options.view_mode_padding[s].map(h.parse_duration);
t = h.add( t = h.add(
t, t,
-i.duration, -i.duration,
i.scale i.scale
); );
let o; let r;
this.view_is(l.YEAR) ? o = "YYYY" : this.view_is(l.MONTH) ? o = "YYYY-MM" : this.view_is(l.DAY) ? o = "YYYY-MM-DD" : o = "YYYY-MM-DD HH", this.gantt_start = h.parse( this.view_is(l.YEAR) ? r = "YYYY" : this.view_is(l.MONTH) ? r = "YYYY-MM" : this.view_is(l.DAY) ? r = "YYYY-MM-DD" : r = "YYYY-MM-DD HH", this.gantt_start = h.parse(
h.format(t, o) h.format(t, r)
), this.gantt_start.setHours(0, 0, 0, 0), this.gantt_end = h.add( ), this.gantt_start.setHours(0, 0, 0, 0), this.gantt_end = h.add(
e, e,
r.duration, o.duration,
r.scale o.scale
); );
} }
setup_date_values() { setup_date_values() {
@ -821,7 +832,7 @@ class B {
make_grid_rows() { make_grid_rows() {
const t = u("g", { append_to: this.layers.grid }), e = this.dates.length * this.options.column_width, s = this.options.bar_height + this.options.padding; const t = u("g", { append_to: this.layers.grid }), e = this.dates.length * this.options.column_width, s = this.options.bar_height + this.options.padding;
let i = this.options.header_height + this.options.padding / 2; let i = this.options.header_height + this.options.padding / 2;
for (let r of this.tasks) for (let o of this.tasks)
u("rect", { u("rect", {
x: 0, x: 0,
y: i, y: i,
@ -847,8 +858,8 @@ class B {
const s = document.createElement("option"); const s = document.createElement("option");
s.selected = !0, s.disabled = !0, s.textContent = "Mode", e.appendChild(s); s.selected = !0, s.disabled = !0, s.textContent = "Mode", e.appendChild(s);
for (const i in l) { for (const i in l) {
const r = document.createElement("option"); const o = document.createElement("option");
r.value = l[i], r.textContent = l[i], e.appendChild(r); o.value = l[i], o.textContent = l[i], e.appendChild(o);
} }
e.addEventListener( e.addEventListener(
"change", "change",
@ -872,11 +883,11 @@ class B {
update_button_position() { update_button_position() {
const t = this.$container.getBoundingClientRect(), e = this.$side_header.getBoundingClientRect(), { left: s, y: i } = this.$header.getBoundingClientRect(); const t = this.$container.getBoundingClientRect(), e = this.$side_header.getBoundingClientRect(), { left: s, y: i } = this.$header.getBoundingClientRect();
e.top < t.top || e.bottom > t.bottom ? (this.$side_header.style.position = "absolute", this.$side_header.style.top = `${t.scrollTop + e.top}px`) : (this.$side_header.style.position = "fixed", this.$side_header.style.top = i + 10 + "px"); e.top < t.top || e.bottom > t.bottom ? (this.$side_header.style.position = "absolute", this.$side_header.style.top = `${t.scrollTop + e.top}px`) : (this.$side_header.style.position = "fixed", this.$side_header.style.top = i + 10 + "px");
const r = Math.min( const o = Math.min(
this.$header.clientWidth, this.$header.clientWidth,
this.$container.clientWidth this.$container.clientWidth
); );
this.$side_header.style.left = s + this.$container.scrollLeft + r - this.$side_header.clientWidth + "px", this.$today_button && (this.$today_button.style.left = `${t.left + 20}px`); this.$side_header.style.left = s + this.$container.scrollLeft + o - this.$side_header.clientWidth + "px", this.$today_button && (this.$today_button.style.left = `${t.left + 20}px`);
} }
make_grid_ticks() { make_grid_ticks() {
if (!["both", "vertical", "horizontal"].includes(this.options.lines)) if (!["both", "vertical", "horizontal"].includes(this.options.lines))
@ -884,26 +895,26 @@ class B {
let t = 0, e = this.options.header_height + this.options.padding / 2, s = (this.options.bar_height + this.options.padding) * this.tasks.length, i = u("g", { let t = 0, e = this.options.header_height + this.options.padding / 2, s = (this.options.bar_height + this.options.padding) * this.tasks.length, i = u("g", {
class: "lines_layer", class: "lines_layer",
append_to: this.layers.grid append_to: this.layers.grid
}), r = this.options.header_height + this.options.padding / 2; }), o = this.options.header_height + this.options.padding / 2;
const o = this.dates.length * this.options.column_width, a = this.options.bar_height + this.options.padding; const r = this.dates.length * this.options.column_width, a = this.options.bar_height + this.options.padding;
if (this.options.lines !== "vertical") if (this.options.lines !== "vertical")
for (let d of this.tasks) for (let p of this.tasks)
u("line", { u("line", {
x1: 0, x1: 0,
y1: r + a, y1: o + a,
x2: o, x2: r,
y2: r + a, y2: o + a,
class: "row-line", class: "row-line",
append_to: i append_to: i
}), r += a; }), o += a;
if (this.options.lines !== "horizontal") if (this.options.lines !== "horizontal")
for (let d of this.dates) { for (let p of this.dates) {
let p = "tick"; let d = "tick";
this.view_is(l.DAY) && d.getDate() === 1 && (p += " thick"), this.view_is(l.WEEK) && d.getDate() >= 1 && d.getDate() < 8 && (p += " thick"), this.view_is(l.MONTH) && d.getMonth() % 3 === 0 && (p += " thick"), u("path", { this.view_is(l.DAY) && p.getDate() === 1 && (d += " thick"), this.view_is(l.WEEK) && p.getDate() >= 1 && p.getDate() < 8 && (d += " thick"), this.view_is(l.MONTH) && p.getMonth() % 3 === 0 && (d += " thick"), u("path", {
d: `M ${t} ${e} v ${s}`, d: `M ${t} ${e} v ${s}`,
class: p, class: d,
append_to: this.layers.grid append_to: this.layers.grid
}), this.view_is(l.MONTH) ? t += h.get_days_in_month(d) * this.options.column_width / 30 : t += this.options.column_width; }), this.view_is(l.MONTH) ? t += h.get_days_in_month(p) * this.options.column_width / 30 : t += this.options.column_width;
} }
} }
highlightWeekends() { highlightWeekends() {
@ -933,20 +944,20 @@ class B {
}; };
} }
for (let s of this.dates) { for (let s of this.dates) {
const i = /* @__PURE__ */ new Date(), r = new Date(s), o = new Date(s); const i = /* @__PURE__ */ new Date(), o = new Date(s), r = new Date(s);
switch (t) { switch (t) {
case l.WEEK: case l.WEEK:
o.setDate(s.getDate() + 7); r.setDate(s.getDate() + 7);
break; break;
case l.MONTH: case l.MONTH:
o.setMonth(s.getMonth() + 1); r.setMonth(s.getMonth() + 1);
break; break;
case l.YEAR: case l.YEAR:
o.setFullYear(s.getFullYear() + 1); r.setFullYear(s.getFullYear() + 1);
break; break;
} }
if (i >= r && i <= o) if (i >= o && i <= r)
return { x: e, date: r }; return { x: e, date: o };
e += this.options.column_width; e += this.options.column_width;
} }
return { x: e }; return { x: e };
@ -956,7 +967,7 @@ class B {
const { x: t, date: e } = this.computeGridHighlightDimensions( const { x: t, date: e } = this.computeGridHighlightDimensions(
this.options.view_mode this.options.view_mode
); );
if (!e || !this.dates.find((o) => o.getTime() == e.getTime())) if (!e || !this.dates.find((r) => r.getTime() == e.getTime()))
return; return;
const s = this.options.header_height + this.options.padding / 2, i = (this.options.bar_height + this.options.padding) * this.tasks.length; const s = this.options.header_height + this.options.padding / 2, i = (this.options.bar_height + this.options.padding) * this.tasks.length;
this.$current_highlight = this.create_el({ this.$current_highlight = this.create_el({
@ -966,15 +977,15 @@ class B {
classes: "current-highlight", classes: "current-highlight",
append_to: this.$container append_to: this.$container
}); });
let r = document.getElementById( let o = document.getElementById(
h.format(e).replaceAll(" ", "_") h.format(e).replaceAll(" ", "_")
); );
r && (r.classList.add("current-date-highlight"), r.style.top = +r.style.top.slice(0, -2) - 4 + "px", r.style.left = +r.style.left.slice(0, -2) - 8 + "px"); o && (o.classList.add("current-date-highlight"), o.style.top = +o.style.top.slice(0, -2) - 4 + "px", o.style.left = +o.style.left.slice(0, -2) - 8 + "px");
} }
} }
create_el({ left: t, top: e, width: s, height: i, id: r, classes: o, append_to: a }) { create_el({ left: t, top: e, width: s, height: i, id: o, classes: r, append_to: a }) {
let d = document.createElement("div"); let p = document.createElement("div");
return d.classList.add(o), d.style.top = e + "px", d.style.left = t + "px", r && (d.id = r), s && (d.style.width = i + "px"), i && (d.style.height = i + "px"), a.appendChild(d), d; return p.classList.add(r), p.style.top = e + "px", p.style.left = t + "px", o && (p.id = o), s && (p.style.width = i + "px"), i && (p.style.height = i + "px"), a.appendChild(p), p;
} }
make_dates() { make_dates() {
this.upper_texts_x = {}, this.get_dates_to_draw().forEach((t, e) => { this.upper_texts_x = {}, this.get_dates_to_draw().forEach((t, e) => {
@ -995,8 +1006,8 @@ class B {
get_dates_to_draw() { get_dates_to_draw() {
let t = null; let t = null;
return this.dates.map((s, i) => { return this.dates.map((s, i) => {
const r = this.get_date_info(s, t, i); const o = this.get_date_info(s, t, i);
return t = r, r; return t = o, o;
}); });
} }
get_date_info(t, e) { get_date_info(t, e) {
@ -1029,32 +1040,32 @@ class B {
Month_upper: t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : "", Month_upper: t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : "",
Year_upper: t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : "" Year_upper: t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : ""
}; };
let r = this.view_is(l.MONTH) ? h.get_days_in_month(t) * this.options.column_width / 30 : this.options.column_width; let o = this.view_is(l.MONTH) ? h.get_days_in_month(t) * this.options.column_width / 30 : this.options.column_width;
const o = { const r = {
x: e ? e.base_pos_x + e.column_width : 0, x: e ? e.base_pos_x + e.column_width : 0,
lower_y: this.options.header_height - 20, lower_y: this.options.header_height - 20,
upper_y: this.options.header_height - 50 upper_y: this.options.header_height - 50
}, a = { }, a = {
Hour_lower: r / 2, Hour_lower: o / 2,
Hour_upper: r * 12, Hour_upper: o * 12,
"Quarter Day_lower": r / 2, "Quarter Day_lower": o / 2,
"Quarter Day_upper": r * 2, "Quarter Day_upper": o * 2,
"Half Day_lower": r / 2, "Half Day_lower": o / 2,
"Half Day_upper": r, "Half Day_upper": o,
Day_lower: r / 2, Day_lower: o / 2,
Day_upper: r / 2, Day_upper: o / 2,
Week_lower: r / 2, Week_lower: o / 2,
Week_upper: r * 4 / 2, Week_upper: o * 4 / 2,
Month_lower: r / 2, Month_lower: o / 2,
Month_upper: r / 2, Month_upper: o / 2,
Year_lower: r / 2, Year_lower: o / 2,
Year_upper: r * 30 / 2 Year_upper: o * 30 / 2
}; };
return { return {
date: t, date: t,
formatted_date: h.format(t).replaceAll(" ", "_"), formatted_date: h.format(t).replaceAll(" ", "_"),
column_width: r, column_width: o,
base_pos_x: o.x, base_pos_x: r.x,
upper_text: this.options.lower_text ? this.options.upper_text( upper_text: this.options.lower_text ? this.options.upper_text(
t, t,
this.options.view_mode, this.options.view_mode,
@ -1065,10 +1076,10 @@ class B {
this.options.view_mode, this.options.view_mode,
i[`${this.options.view_mode}_lower`] i[`${this.options.view_mode}_lower`]
) : i[`${this.options.view_mode}_lower`], ) : i[`${this.options.view_mode}_lower`],
upper_x: o.x + a[`${this.options.view_mode}_upper`], upper_x: r.x + a[`${this.options.view_mode}_upper`],
upper_y: o.upper_y, upper_y: r.upper_y,
lower_x: o.x + a[`${this.options.view_mode}_lower`], lower_x: r.x + a[`${this.options.view_mode}_lower`],
lower_y: o.lower_y lower_y: r.lower_y
}; };
} }
make_bars() { make_bars() {
@ -1085,14 +1096,14 @@ class B {
const i = this.get_task(s); const i = this.get_task(s);
if (!i) if (!i)
return; return;
const r = new C( const o = new C(
this, this,
this.bars[i._index], this.bars[i._index],
// from_task // from_task
this.bars[t._index] this.bars[t._index]
// to_task // to_task
); );
return this.layers.arrow.appendChild(r.element), r; return this.layers.arrow.appendChild(o.element), o;
}).filter(Boolean), this.arrows = this.arrows.concat(e); }).filter(Boolean), this.arrows = this.arrows.concat(e);
} }
} }
@ -1127,28 +1138,28 @@ class B {
}); });
} }
bind_bar_events() { bind_bar_events() {
let t = !1, e = 0, s = 0, i = !1, r = !1, o = null, a = []; let t = !1, e = 0, s = 0, i = !1, o = !1, r = null, a = [];
this.bar_being_dragged = null; this.bar_being_dragged = null;
function d() { function p() {
return t || i || r; return t || i || o;
} }
this.$svg.onclick = (p) => { this.$svg.onclick = (d) => {
p.target.classList.contains("grid-row") && this.unselect_all(); d.target.classList.contains("grid-row") && this.unselect_all();
}, _.on(this.$svg, "mousedown", ".bar-wrapper, .handle", (p, g) => { }, _.on(this.$svg, "mousedown", ".bar-wrapper, .handle", (d, g) => {
const c = _.closest(".bar-wrapper", g); const c = _.closest(".bar-wrapper", g);
a.forEach((w) => w.group.classList.remove("active")), g.classList.contains("left") ? i = !0 : g.classList.contains("right") ? r = !0 : g.classList.contains("bar-wrapper") && (t = !0), c.classList.add("active"), this.popup && this.popup.parent.classList.add("hidden"), this.popup && this.popup.parent.classList.add("hidden"), e = p.offsetX || p.layerX, p.offsetY || p.layerY, o = c.getAttribute("data-id"), a = [ a.forEach((w) => w.group.classList.remove("active")), g.classList.contains("left") ? i = !0 : g.classList.contains("right") ? o = !0 : g.classList.contains("bar-wrapper") && (t = !0), c.classList.add("active"), this.popup && this.popup.parent.classList.add("hidden"), this.popup && this.popup.parent.classList.add("hidden"), e = d.offsetX || d.layerX, d.offsetY || d.layerY, r = c.getAttribute("data-id"), a = [
o, r,
...this.get_all_dependent_tasks(o) ...this.get_all_dependent_tasks(r)
].map((w) => this.get_bar(w)), this.bar_being_dragged = o, a.forEach((w) => { ].map((w) => this.get_bar(w)), this.bar_being_dragged = r, a.forEach((w) => {
const b = w.$bar; const b = w.$bar;
b.ox = b.getX(), b.oy = b.getY(), b.owidth = b.getWidth(), b.finaldx = 0; b.ox = b.getX(), b.oy = b.getY(), b.owidth = b.getWidth(), b.finaldx = 0;
}); });
}), _.on(this.$container, "scroll", (p) => { }), _.on(this.$container, "scroll", (d) => {
let g = document.querySelectorAll(".bar-wrapper"), c = []; let g = document.querySelectorAll(".bar-wrapper"), c = [];
const f = []; const f = [];
let w; let w;
s && (w = p.currentTarget.scrollLeft - s); s && (w = d.currentTarget.scrollLeft - s);
const b = p.currentTarget.scrollLeft / this.options.column_width * this.options.step / 24; const b = d.currentTarget.scrollLeft / this.options.column_width * this.options.step / 24;
let y = "D MMM"; let y = "D MMM";
["Year", "Month"].includes(this.options.view_mode) ? y = "YYYY" : ["Day", "Week"].includes(this.options.view_mode) ? y = "MMMM" : this.view_is("Half Day") ? y = "D" : this.view_is("Hour") && (y = "D MMMM"); ["Year", "Month"].includes(this.options.view_mode) ? y = "YYYY" : ["Day", "Week"].includes(this.options.view_mode) ? y = "MMMM" : this.view_is("Half Day") ? y = "D" : this.view_is("Hour") && (y = "D MMMM");
let T = h.format( let T = h.format(
@ -1171,54 +1182,54 @@ class B {
}), w && (c = f.map((m) => this.get_bar(m)), this.options.auto_move_label && c.forEach((m) => { }), w && (c = f.map((m) => this.get_bar(m)), this.options.auto_move_label && c.forEach((m) => {
m.update_label_position_on_horizontal_scroll({ m.update_label_position_on_horizontal_scroll({
x: w, x: w,
sx: p.currentTarget.scrollLeft sx: d.currentTarget.scrollLeft
}); });
})), s = p.currentTarget.scrollLeft; })), s = d.currentTarget.scrollLeft;
}), _.on(this.$svg, "mousemove", (p) => { }), _.on(this.$svg, "mousemove", (d) => {
if (!d()) if (!p())
return; return;
const g = (p.offsetX || p.layerX) - e; const g = (d.offsetX || d.layerX) - e;
a.forEach((c) => { a.forEach((c) => {
const f = c.$bar; const f = c.$bar;
f.finaldx = this.get_snap_position(g), this.hide_popup(), i ? o === c.task.id ? c.update_bar_position({ f.finaldx = this.get_snap_position(g), this.hide_popup(), i ? r === c.task.id ? c.update_bar_position({
x: f.ox + f.finaldx, x: f.ox + f.finaldx,
width: f.owidth - f.finaldx width: f.owidth - f.finaldx
}) : c.update_bar_position({ }) : c.update_bar_position({
x: f.ox + f.finaldx x: f.ox + f.finaldx
}) : r ? o === c.task.id && c.update_bar_position({ }) : o ? r === c.task.id && c.update_bar_position({
width: f.owidth + f.finaldx width: f.owidth + f.finaldx
}) : t && !this.options.readonly && !this.options.dates_readonly && c.update_bar_position({ x: f.ox + f.finaldx }); }) : t && !this.options.readonly && !this.options.dates_readonly && c.update_bar_position({ x: f.ox + f.finaldx });
}); });
}), document.addEventListener("mouseup", (p) => { }), document.addEventListener("mouseup", (d) => {
t = !1, i = !1, r = !1; t = !1, i = !1, o = !1;
}), _.on(this.$svg, "mouseup", (p) => { }), _.on(this.$svg, "mouseup", (d) => {
this.bar_being_dragged = null, a.forEach((g) => { this.bar_being_dragged = null, a.forEach((g) => {
g.$bar.finaldx && (g.date_changed(), g.set_action_completed()); g.$bar.finaldx && (g.date_changed(), g.set_action_completed());
}); });
}), this.bind_bar_progress(); }), this.bind_bar_progress();
} }
bind_bar_progress() { bind_bar_progress() {
let t = 0, e = null, s = null, i = null, r = null; let t = 0, e = null, s = null, i = null, o = null;
_.on(this.$svg, "mousedown", ".handle.progress", (o, a) => { _.on(this.$svg, "mousedown", ".handle.progress", (r, a) => {
e = !0, t = o.offsetX || o.layerX, o.offsetY || o.layerY; e = !0, t = r.offsetX || r.layerX, r.offsetY || r.layerY;
const p = _.closest(".bar-wrapper", a).getAttribute("data-id"); const d = _.closest(".bar-wrapper", a).getAttribute("data-id");
s = this.get_bar(p), i = s.$bar_progress, r = s.$bar, i.finaldx = 0, i.owidth = i.getWidth(), i.min_dx = -i.getWidth(), i.max_dx = r.getWidth() - i.getWidth(); s = this.get_bar(d), i = s.$bar_progress, o = s.$bar, i.finaldx = 0, i.owidth = i.getWidth(), i.min_dx = -i.getWidth(), i.max_dx = o.getWidth() - i.getWidth();
}), _.on(this.$svg, "mousemove", (o) => { }), _.on(this.$svg, "mousemove", (r) => {
if (!e) if (!e)
return; return;
let a = (o.offsetX || o.layerX) - t; let a = (r.offsetX || r.layerX) - t;
a > i.max_dx && (a = i.max_dx), a < i.min_dx && (a = i.min_dx); a > i.max_dx && (a = i.max_dx), a < i.min_dx && (a = i.min_dx);
const d = s.$handle_progress; const p = s.$handle_progress;
_.attr(i, "width", i.owidth + a), _.attr(d, "cx", i.getEndX()), i.finaldx = a; _.attr(i, "width", i.owidth + a), _.attr(p, "cx", i.getEndX()), i.finaldx = a;
}), _.on(this.$svg, "mouseup", () => { }), _.on(this.$svg, "mouseup", () => {
e = !1, i && i.finaldx && (i.finaldx = 0, s.progress_changed(), s.set_action_completed(), s = null, i = null, r = null); e = !1, i && i.finaldx && (i.finaldx = 0, s.progress_changed(), s.set_action_completed(), s = null, i = null, o = null);
}); });
} }
get_all_dependent_tasks(t) { get_all_dependent_tasks(t) {
let e = [], s = [t]; let e = [], s = [t];
for (; s.length; ) { for (; s.length; ) {
const i = s.reduce((r, o) => (r = r.concat(this.dependency_map[o]), r), []); const i = s.reduce((o, r) => (o = o.concat(this.dependency_map[r]), o), []);
e = e.concat(i), s = i.filter((r) => !s.includes(r)); e = e.concat(i), s = i.filter((o) => !s.includes(o));
} }
return e.filter(Boolean); return e.filter(Boolean);
} }
@ -1266,8 +1277,8 @@ class B {
* @memberof Gantt * @memberof Gantt
*/ */
clear() { clear() {
var t, e, s, i, r, o; var t, e, s, i, o, r;
this.$svg.innerHTML = "", (e = (t = this.$header) == null ? void 0 : t.remove) == null || e.call(t), (i = (s = this.$current_highlight) == null ? void 0 : s.remove) == null || i.call(s), (o = (r = this.popup) == null ? void 0 : r.hide) == null || o.call(r); this.$svg.innerHTML = "", (e = (t = this.$header) == null ? void 0 : t.remove) == null || e.call(t), (i = (s = this.$current_highlight) == null ? void 0 : s.remove) == null || i.call(s), (r = (o = this.popup) == null ? void 0 : o.hide) == null || r.call(o);
} }
} }
B.VIEW_MODE = l; B.VIEW_MODE = l;

8
dist/frappe-gantt.umd.js vendored
View File

File diff suppressed because one or more lines are too long

18
index.html
View File

@ -94,16 +94,16 @@
]; ];
// Uncomment to test fixed header // Uncomment to test fixed header
// tasks = [ tasks = [
// ...tasks, ...tasks,
// ...Array.from({ length: tasks.length * 3 }, (_, i) => ({ ...Array.from({ length: tasks.length * 3 }, (_, i) => ({
// ...tasks[i % 3], ...tasks[i % 3],
// id: i, id: i,
// })), })),
// ]; ];
let gantt_chart = new Gantt('.gantt-target', tasks, { let gantt_chart = new Gantt('.gantt-target', tasks, {
on_click (task) { on_click(task) {
console.log('Click', task); console.log('Click', task);
}, },
// on_hover (task, x, y) { // on_hover (task, x, y) {
@ -111,7 +111,7 @@
// }, // },
view_mode: 'Day', view_mode: 'Day',
view_mode_padding: { DAY: '3d' }, view_mode_padding: { DAY: '3d' },
// popup: false, // popup_on: 'click',
// scroll_to: 'today', // scroll_to: 'today',
// view_mode_select: true, // view_mode_select: true,
// dates_readonly: true, // dates_readonly: true,

45
src/bar.js
View File

@ -282,25 +282,41 @@ export default class Bar {
]); ]);
}); });
let timeout; if (this.gantt.options.popup_on === 'click') {
$.on( let opened = false;
this.group, $.on(this.group, 'click', (e) => {
'mouseenter', console.log(opened);
(e) => if (!opened) {
(timeout = setTimeout(() => {
this.show_popup(e.offsetX || e.layerX); this.show_popup(e.offsetX || e.layerX);
document.getElementById( document.getElementById(
`${task_id}-highlight`, `${task_id}-highlight`,
).style.display = 'block'; ).style.display = 'block';
}, 200)), } else {
); this.gantt.hide_popup();
}
opened = !opened;
});
} else {
let timeout;
$.on(
this.group,
'mouseenter',
(e) =>
(timeout = setTimeout(() => {
this.show_popup(e.offsetX || e.layerX);
document.getElementById(
`${task_id}-highlight`,
).style.display = 'block';
}, 200)),
);
$.on(this.group, 'mouseleave', () => { $.on(this.group, 'mouseleave', () => {
clearTimeout(timeout); clearTimeout(timeout);
this.gantt.popup?.hide?.(); this.gantt.popup?.hide?.();
document.getElementById(`${task_id}-highlight`).style.display = document.getElementById(`${task_id}-highlight`).style.display =
'none'; 'none';
}); });
}
$.on(this.group, 'click', () => { $.on(this.group, 'click', () => {
this.gantt.trigger_event('click', [this.task]); this.gantt.trigger_event('click', [this.task]);
@ -333,7 +349,6 @@ export default class Bar {
this.gantt.options.language, this.gantt.options.language,
); );
const subtitle = `${start_date} - ${end_date}<br/>Progress: ${this.task.progress}`; const subtitle = `${start_date} - ${end_date}<br/>Progress: ${this.task.progress}`;
this.gantt.show_popup({ this.gantt.show_popup({
x, x,
target_element: this.$bar, target_element: this.$bar,

1
src/index.js
View File

@ -38,6 +38,7 @@ const DEFAULT_OPTIONS = {
date_format: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
show_expected_progress: false, show_expected_progress: false,
popup: null, popup: null,
popup_on: 'hover',
language: 'en', language: 'en',
readonly: false, readonly: false,
progress_readonly: false, progress_readonly: false,

3
src/popup.js
View File

@ -35,7 +35,7 @@ export default class Popup {
this.title.innerHTML = options.title; this.title.innerHTML = options.title;
this.subtitle.innerHTML = options.subtitle; this.subtitle.innerHTML = options.subtitle;
} }
console.log('hey in');
// set position // set position
let position_meta; let position_meta;
if (target_element instanceof HTMLElement) { if (target_element instanceof HTMLElement) {
@ -48,6 +48,7 @@ export default class Popup {
this.parent.style.top = this.parent.style.top =
position_meta.y + position_meta.height + 10 + 'px'; position_meta.y + position_meta.height + 10 + 'px';
this.parent.classList.remove('hidden');
this.pointer.style.left = this.parent.clientWidth / 2 + 'px'; this.pointer.style.left = this.parent.clientWidth / 2 + 'px';
this.pointer.style.top = '-15px'; this.pointer.style.top = '-15px';