feat: popup after delay
chore: build
This commit is contained in:
Safwan Samsudeen
parent
e9931bde24
commit
99261dfe1a
109
dist/frappe-gantt.css
vendored
109
dist/frappe-gantt.css
vendored
@ -66,25 +66,37 @@
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
.gantt-container {
|
||||
line-height: 14.5px;
|
||||
}
|
||||
.gantt-container .grid-header {
|
||||
background-color: #ffffff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.gantt-container .lower-text,
|
||||
.gantt-container .upper-text {
|
||||
font-size: 14px;
|
||||
text-anchor: middle;
|
||||
color: #666;
|
||||
color: #111;
|
||||
}
|
||||
.gantt-container .upper-header {
|
||||
height: 40px;
|
||||
}
|
||||
.gantt-container .lower-header {
|
||||
height: 30px;
|
||||
}
|
||||
.gantt-container .lower-text {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
}
|
||||
.gantt-container .upper-text {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
.gantt-container .current-upper {
|
||||
position: fixed;
|
||||
@ -92,29 +104,50 @@
|
||||
.gantt-container .side-header {
|
||||
position: fixed;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
background: white;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.gantt-container .today-button,
|
||||
.gantt-container .viewmode-select {
|
||||
background-color: #fff;
|
||||
border: 1px solid black;
|
||||
background: #F4F5F6;
|
||||
text-align: -webkit-center;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: #111;
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
height: 25px;
|
||||
}
|
||||
.gantt-container .viewmode-select {
|
||||
padding: 3px 5px;
|
||||
outline: none !important;
|
||||
padding: 4px 8px;
|
||||
margin-right: 4px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
text-indent: 1px;
|
||||
text-overflow: "";
|
||||
}
|
||||
.gantt-container .date-highlight {
|
||||
border: 2px dotted black;
|
||||
background-color: #EBEEF0;
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
display: none;
|
||||
}
|
||||
.gantt-container .current-highlight {
|
||||
position: absolute;
|
||||
background: #2c94ec;
|
||||
width: 1px;
|
||||
}
|
||||
.gantt-container .current-date-highlight {
|
||||
background: #2c94ec;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 200px;
|
||||
}
|
||||
|
||||
.gantt {
|
||||
user-select: none;
|
||||
@ -131,37 +164,20 @@
|
||||
stroke: #ebeff2;
|
||||
}
|
||||
.gantt .tick {
|
||||
stroke: #e0e0e0;
|
||||
stroke-width: 0.2;
|
||||
stroke: #EBEEF0;
|
||||
stroke-width: 0.4;
|
||||
}
|
||||
.gantt .tick.thick {
|
||||
stroke: #000;
|
||||
stroke-width: 0.5;
|
||||
}
|
||||
.gantt .today-highlight {
|
||||
fill: #f6e796;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.gantt .week-highlight {
|
||||
fill: #f6e796;
|
||||
opacity: 0.5;
|
||||
stroke: #e0e0e0;
|
||||
stroke-width: 0.7;
|
||||
}
|
||||
.gantt .holiday-highlight {
|
||||
fill: #f3f4f7;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.gantt .month-highlight {
|
||||
fill: #f6e796;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.gantt .year-highlight {
|
||||
fill: #f6e796;
|
||||
opacity: 0.5;
|
||||
fill: #F9FAFA;
|
||||
}
|
||||
.gantt .arrow {
|
||||
fill: none;
|
||||
stroke: #666;
|
||||
stroke-width: 1.4;
|
||||
stroke: #9FA9B1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.gantt .bar-wrapper .bar {
|
||||
fill: #fff;
|
||||
@ -170,7 +186,7 @@
|
||||
transition: stroke-width 0.3s ease;
|
||||
}
|
||||
.gantt .bar-progress {
|
||||
fill: #dedfe0;
|
||||
fill: #EBEEF0;
|
||||
}
|
||||
.gantt .bar-expected-progress {
|
||||
fill: #c4c4e9;
|
||||
@ -188,7 +204,7 @@
|
||||
fill: #111;
|
||||
dominant-baseline: central;
|
||||
font-family: Helvetica;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.gantt .bar-label.big {
|
||||
@ -207,6 +223,9 @@
|
||||
.gantt .bar-wrapper.important .handle {
|
||||
fill: #94c4f4;
|
||||
}
|
||||
.gantt .bar-wrapper.important .handle.progress {
|
||||
fill: #fff;
|
||||
}
|
||||
.gantt .handle {
|
||||
fill: #dcdce4;
|
||||
cursor: ew-resize;
|
||||
@ -214,6 +233,9 @@
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.gantt .handle.progress {
|
||||
fill: #666;
|
||||
}
|
||||
.gantt .bar-wrapper {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
@ -247,25 +269,22 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgb(0, 0, 0);
|
||||
padding: 0;
|
||||
color: #959da5;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
background: #171B1F;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
width: max-content;
|
||||
}
|
||||
.gantt-container .popup-wrapper.hidden {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.gantt-container .popup-wrapper .title {
|
||||
border-bottom: 1px solid #dedfe0;
|
||||
padding: 10px;
|
||||
margin-bottom: 5px;
|
||||
text-align: -webkit-center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.gantt-container .popup-wrapper .subtitle {
|
||||
padding: 10px;
|
||||
color: #dfe2e5;
|
||||
color: #98A1A9;
|
||||
}
|
||||
.gantt-container .popup-wrapper .pointer {
|
||||
position: absolute;
|
||||
|
||||
219
dist/frappe-gantt.js
vendored
219
dist/frappe-gantt.js
vendored
@ -552,10 +552,10 @@ var Gantt = (function () {
|
||||
$date_highlight.classList.add('date-highlight');
|
||||
$date_highlight.style.height = this.height * 0.8 + 'px';
|
||||
$date_highlight.style.width = this.width + 'px';
|
||||
$date_highlight.style.top = this.gantt.options.header_height - 21 + 'px';
|
||||
$date_highlight.style.top = this.gantt.options.header_height - 25 + 'px';
|
||||
$date_highlight.style.left = x + 'px';
|
||||
this.$date_highlight = $date_highlight;
|
||||
this.gantt.$lower_header.appendChild($date_highlight);
|
||||
this.gantt.$lower_header.prepend($date_highlight);
|
||||
|
||||
|
||||
|
||||
@ -657,13 +657,24 @@ var Gantt = (function () {
|
||||
|
||||
get_progress_polygon_points() {
|
||||
const bar_progress = this.$bar_progress;
|
||||
let icon_width = 10;
|
||||
let icon_height = 15;
|
||||
|
||||
return [
|
||||
bar_progress.getEndX() - 6,
|
||||
bar_progress.getY() + bar_progress.getHeight() + 8,
|
||||
bar_progress.getEndX() + 6,
|
||||
bar_progress.getY() + bar_progress.getHeight() + 8,
|
||||
bar_progress.getEndX() - icon_width / 2,
|
||||
bar_progress.getY() + bar_progress.getHeight() / 2,
|
||||
|
||||
bar_progress.getEndX(),
|
||||
bar_progress.getY() + bar_progress.getHeight() + 0.5,
|
||||
bar_progress.getY() + bar_progress.getHeight() / 2 - icon_height / 2,
|
||||
|
||||
bar_progress.getEndX() + icon_width / 2,
|
||||
bar_progress.getY() + bar_progress.getHeight() / 2,
|
||||
|
||||
bar_progress.getEndX(),
|
||||
bar_progress.getY() + bar_progress.getHeight() / 2 + icon_height / 2,
|
||||
|
||||
bar_progress.getEndX() - icon_width / 2,
|
||||
bar_progress.getY() + bar_progress.getHeight() / 2,
|
||||
];
|
||||
}
|
||||
|
||||
@ -676,13 +687,22 @@ var Gantt = (function () {
|
||||
let task_id = this.task.id;
|
||||
$.on(this.group, "mouseover", (e) => {
|
||||
this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e]);
|
||||
document.querySelector(`#${task_id}-highlight`).style.display = 'block';
|
||||
});
|
||||
$.on(this.group, "mouseenter", (e) => this.show_popup(e.offsetX));
|
||||
$.on(this.group, "mouseleave", () => document.querySelector(`#${task_id}-highlight`).style.display = 'none');
|
||||
|
||||
let timeout;
|
||||
$.on(this.group, "mouseenter", (e) => timeout = setTimeout(() => {
|
||||
this.show_popup(e.offsetX);
|
||||
document.querySelector(`#${task_id}-highlight`).style.display = 'block';
|
||||
}, 200));
|
||||
|
||||
$.on(this.group, "mouseleave", () => {
|
||||
clearTimeout(timeout);
|
||||
this.gantt.popup?.hide?.();
|
||||
document.querySelector(`#${task_id}-highlight`).style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
$.on(this.group, "focus " + this.gantt.options.popup_trigger, () => {
|
||||
$.on(this.group, this.gantt.options.popup_trigger, () => {
|
||||
this.gantt.trigger_event("click", [this.task]);
|
||||
});
|
||||
|
||||
@ -728,7 +748,7 @@ var Gantt = (function () {
|
||||
return this.gantt.get_bar(dep).$bar.getX();
|
||||
});
|
||||
// child task must not go before parent
|
||||
const valid_x = xs.reduce((prev, curr) => {
|
||||
const valid_x = xs.reduce((_, curr) => {
|
||||
return x >= curr;
|
||||
}, x);
|
||||
if (!valid_x) {
|
||||
@ -736,11 +756,11 @@ var Gantt = (function () {
|
||||
return;
|
||||
}
|
||||
this.update_attr(bar, "x", x);
|
||||
this.update_attr(this.$date_highlight, "x", x);
|
||||
this.$date_highlight.style.left = x + 'px';
|
||||
}
|
||||
if (width) {
|
||||
this.update_attr(bar, "width", width);
|
||||
this.update_attr(this.$date_highlight, "width", width);
|
||||
this.$date_highlight.style.width = width + 'px';
|
||||
}
|
||||
this.update_label_position();
|
||||
this.update_handle_position();
|
||||
@ -1224,14 +1244,14 @@ var Gantt = (function () {
|
||||
this.$container.appendChild(this.$svg);
|
||||
|
||||
// popup wrapper
|
||||
this.popup_wrapper = document.createElement("div");
|
||||
this.popup_wrapper.classList.add("popup-wrapper");
|
||||
this.$container.appendChild(this.popup_wrapper);
|
||||
this.$popup_wrapper = document.createElement("div");
|
||||
this.$popup_wrapper.classList.add("popup-wrapper");
|
||||
this.$container.appendChild(this.$popup_wrapper);
|
||||
}
|
||||
|
||||
setup_options(options) {
|
||||
const default_options = {
|
||||
header_height: 50,
|
||||
header_height: 65,
|
||||
column_width: 30,
|
||||
step: 24,
|
||||
view_modes: [...Object.values(VIEW_MODE)],
|
||||
@ -1486,6 +1506,7 @@ var Gantt = (function () {
|
||||
this.make_grid();
|
||||
this.make_dates();
|
||||
this.make_bars();
|
||||
this.make_grid_extras();
|
||||
this.make_arrows();
|
||||
this.map_arrows_on_bars();
|
||||
this.set_width();
|
||||
@ -1509,8 +1530,11 @@ var Gantt = (function () {
|
||||
this.make_grid_background();
|
||||
this.make_grid_rows();
|
||||
this.make_grid_header();
|
||||
this.make_grid_ticks();
|
||||
}
|
||||
|
||||
make_grid_extras() {
|
||||
this.make_grid_highlights();
|
||||
this.make_grid_ticks();
|
||||
}
|
||||
|
||||
make_grid_background() {
|
||||
@ -1537,14 +1561,13 @@ var Gantt = (function () {
|
||||
|
||||
make_grid_rows() {
|
||||
const rows_layer = createSVG("g", { append_to: this.layers.grid });
|
||||
const lines_layer = createSVG("g", { append_to: this.layers.grid });
|
||||
|
||||
const row_width = this.dates.length * this.options.column_width;
|
||||
const row_height = this.options.bar_height + this.options.padding;
|
||||
|
||||
let row_y = this.options.header_height + this.options.padding / 2;
|
||||
|
||||
for (let task of this.tasks) {
|
||||
for (let _ of this.tasks) {
|
||||
createSVG("rect", {
|
||||
x: 0,
|
||||
y: row_y,
|
||||
@ -1553,26 +1576,15 @@ var Gantt = (function () {
|
||||
class: "grid-row",
|
||||
append_to: rows_layer,
|
||||
});
|
||||
if (this.options.lines === 'both' || this.options.lines === 'horizontal') {
|
||||
createSVG("line", {
|
||||
x1: 0,
|
||||
y1: row_y + row_height,
|
||||
x2: row_width,
|
||||
y2: row_y + row_height,
|
||||
class: "row-line",
|
||||
append_to: lines_layer,
|
||||
});
|
||||
}
|
||||
if (this.options.lines === 'both' || this.options.lines === 'horizontal') ;
|
||||
|
||||
row_y += this.options.bar_height + this.options.padding;
|
||||
}
|
||||
}
|
||||
|
||||
make_grid_header() {
|
||||
const curHeader = document.querySelector('.grid-header');
|
||||
if (curHeader) {
|
||||
curHeader.remove();
|
||||
}
|
||||
document.querySelector('.grid-header');
|
||||
|
||||
let $header = document.createElement("div");
|
||||
$header.style.height = this.options.header_height + 10 + "px";
|
||||
$header.style.width = this.dates.length * this.options.column_width + "px";
|
||||
@ -1590,21 +1602,30 @@ var Gantt = (function () {
|
||||
this.$lower_header = $lower_header;
|
||||
this.$header.appendChild($lower_header);
|
||||
|
||||
this.make_side_header();
|
||||
}
|
||||
|
||||
make_side_header() {
|
||||
let $side_header = document.createElement('div');
|
||||
$side_header.classList.add('side-header');
|
||||
|
||||
|
||||
// Create view mode change select
|
||||
const $select = document.createElement("select");
|
||||
$select.classList.add('viewmode-select');
|
||||
|
||||
const $el = document.createElement("option");
|
||||
$el.selected = true;
|
||||
$el.disabled = true;
|
||||
$el.textContent = 'Mode';
|
||||
$select.appendChild($el);
|
||||
|
||||
for (const key in VIEW_MODE) {
|
||||
const $option = document.createElement("option");
|
||||
$option.value = VIEW_MODE[key];
|
||||
$option.textContent = VIEW_MODE[key];
|
||||
$select.appendChild($option);
|
||||
}
|
||||
$select.value = this.options.view_mode;
|
||||
// $select.value = this.options.view_mode
|
||||
$select.addEventListener("change", (function () {
|
||||
this.change_view_mode($select.value);
|
||||
}).bind(this));
|
||||
@ -1618,19 +1639,40 @@ var Gantt = (function () {
|
||||
$side_header.appendChild($today_button);
|
||||
|
||||
this.$header.appendChild($side_header);
|
||||
const { left, y } = $header.getBoundingClientRect();
|
||||
const { left, y } = this.$header.getBoundingClientRect();
|
||||
const width = Math.min(this.$header.clientWidth, this.$container.clientWidth);
|
||||
$side_header.style.left = left + this.$container.scrollLeft + width - $side_header.clientWidth + 'px';
|
||||
$side_header.style.top = y + 5 + 'px';
|
||||
$side_header.style.top = y + 10 + 'px';
|
||||
}
|
||||
|
||||
make_grid_ticks() {
|
||||
if (this.options.lines !== 'both' && this.options.lines !== 'vertical') return
|
||||
if (!['both', 'vertical', 'horizontal'].includes(this.options.lines)) return
|
||||
let tick_x = 0;
|
||||
let tick_y = this.options.header_height + this.options.padding / 2;
|
||||
let tick_height =
|
||||
(this.options.bar_height + this.options.padding) * this.tasks.length;
|
||||
|
||||
let $lines_layer = createSVG("g", { class: 'lines_layer', append_to: this.layers.grid });
|
||||
|
||||
|
||||
let row_y = this.options.header_height + this.options.padding / 2;
|
||||
|
||||
const row_width = this.dates.length * this.options.column_width;
|
||||
const row_height = this.options.bar_height + this.options.padding;
|
||||
if (this.options.lines !== 'vertical') {
|
||||
for (let _ of this.tasks) {
|
||||
createSVG("line", {
|
||||
x1: 0,
|
||||
y1: row_y + row_height,
|
||||
x2: row_width,
|
||||
y2: row_y + row_height,
|
||||
class: "row-line",
|
||||
append_to: $lines_layer,
|
||||
});
|
||||
row_y += row_height;
|
||||
}
|
||||
}
|
||||
if (this.options.lines === 'horizontal') return;
|
||||
for (let date of this.dates) {
|
||||
let tick_class = "tick";
|
||||
// thick tick for monday
|
||||
@ -1687,14 +1729,16 @@ var Gantt = (function () {
|
||||
|
||||
//compute the horizontal x distance
|
||||
computeGridHighlightDimensions(view_mode) {
|
||||
let xDist = 0;
|
||||
let x = this.options.column_width / 2;
|
||||
|
||||
if (this.view_is(VIEW_MODE.DAY)) {
|
||||
return (
|
||||
(date_utils.diff(date_utils.today(), this.gantt_start, "hour") /
|
||||
this.options.step) *
|
||||
this.options.column_width
|
||||
);
|
||||
let today = date_utils.today();
|
||||
return {
|
||||
x: x +
|
||||
(date_utils.diff(today, this.gantt_start, "hour") / this.options.step) *
|
||||
this.options.column_width,
|
||||
date: today
|
||||
}
|
||||
}
|
||||
|
||||
for (let date of this.dates) {
|
||||
@ -1713,12 +1757,11 @@ var Gantt = (function () {
|
||||
break;
|
||||
}
|
||||
if (todayDate >= startDate && todayDate <= endDate) {
|
||||
break;
|
||||
return { x, date: startDate }
|
||||
} else {
|
||||
xDist += this.options.column_width;
|
||||
x += this.options.column_width;
|
||||
}
|
||||
}
|
||||
return xDist;
|
||||
}
|
||||
|
||||
make_grid_highlights() {
|
||||
@ -1730,49 +1773,43 @@ var Gantt = (function () {
|
||||
this.view_is(VIEW_MODE.MONTH) ||
|
||||
this.view_is(VIEW_MODE.YEAR)
|
||||
) {
|
||||
const x = this.computeGridHighlightDimensions(this.options.view_mode);
|
||||
const y = 0;
|
||||
const width = this.options.column_width;
|
||||
const height =
|
||||
(this.options.bar_height + this.options.padding) * this.tasks.length +
|
||||
this.options.header_height +
|
||||
this.options.padding / 2;
|
||||
// Used as we must find the _end_ of session if view is not Day
|
||||
const { x: left, date } = this.computeGridHighlightDimensions(this.options.view_mode);
|
||||
const top = this.options.header_height + this.options.padding / 2;
|
||||
const height = (this.options.bar_height + this.options.padding) * this.tasks.length;
|
||||
this.$current_highlight = this.create_el({ top, left, height, classes: 'current-highlight', append_to: this.$container });
|
||||
let $today = document.getElementById(date_utils.format(date).replaceAll(' ', '_'));
|
||||
|
||||
let className = "";
|
||||
switch (this.options.view_mode) {
|
||||
case VIEW_MODE.DAY:
|
||||
className = "today-highlight";
|
||||
break;
|
||||
case VIEW_MODE.WEEK:
|
||||
className = "week-highlight";
|
||||
break;
|
||||
case VIEW_MODE.MONTH:
|
||||
className = "month-highlight";
|
||||
break;
|
||||
case VIEW_MODE.YEAR:
|
||||
className = "year-highlight";
|
||||
break;
|
||||
}
|
||||
createSVG("rect", {
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
class: className,
|
||||
append_to: this.layers.grid,
|
||||
});
|
||||
$today.classList.add('current-date-highlight');
|
||||
$today.style.top = +$today.style.top.slice(0, -2) - 4 + 'px';
|
||||
$today.style.left = +$today.style.left.slice(0, -2) - 8 + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
create_el({ left, top, width, height, id, classes, append_to }) {
|
||||
let $el = document.createElement("div");
|
||||
$el.classList.add(classes);
|
||||
$el.style.top = top + 'px';
|
||||
$el.style.left = left + 'px';
|
||||
if (id) $el.id = id;
|
||||
if (width) $el.style.width = height + 'px';
|
||||
if (height) $el.style.height = height + 'px';
|
||||
append_to.appendChild($el);
|
||||
return $el
|
||||
}
|
||||
|
||||
make_dates() {
|
||||
this.upper_texts_x = {};
|
||||
this.get_dates_to_draw().forEach((date, i) => {
|
||||
let $lower_text = document.createElement('div');
|
||||
$lower_text.classList.add('lower-text');
|
||||
let $lower_text = this.create_el({
|
||||
left: date.lower_x,
|
||||
top: date.lower_y,
|
||||
id: date.formatted_date,
|
||||
classes: 'lower-text',
|
||||
append_to: this.$lower_header
|
||||
});
|
||||
$lower_text.innerText = date.lower_text;
|
||||
this.$lower_header.appendChild($lower_text);
|
||||
$lower_text.style.left = date.lower_x - ($lower_text.clientWidth / 2 ) + 'px';
|
||||
$lower_text.style.top = date.lower_y + 'px';
|
||||
$lower_text.style.left = +$lower_text.style.left.slice(0, -2) - $lower_text.clientWidth / 2 + 'px';
|
||||
|
||||
if (date.upper_text) {
|
||||
this.upper_texts_x[date.upper_text] = date.upper_x;
|
||||
@ -1853,8 +1890,8 @@ var Gantt = (function () {
|
||||
x: last_date_info
|
||||
? last_date_info.base_pos_x + last_date_info.column_width
|
||||
: 0,
|
||||
lower_y: this.options.header_height - 15,
|
||||
upper_y: this.options.header_height - 40,
|
||||
lower_y: this.options.header_height - 20,
|
||||
upper_y: this.options.header_height - 50,
|
||||
};
|
||||
const x_pos = {
|
||||
Hour_lower: column_width / 2,
|
||||
@ -1874,6 +1911,7 @@ var Gantt = (function () {
|
||||
};
|
||||
return {
|
||||
date,
|
||||
formatted_date: date_utils.format(date).replaceAll(' ', '_'),
|
||||
column_width,
|
||||
base_pos_x: base_pos.x,
|
||||
upper_text: date_text[`${this.options.view_mode}_upper`],
|
||||
@ -2052,13 +2090,13 @@ var Gantt = (function () {
|
||||
if ($current) {
|
||||
$current.classList.remove('current-upper');
|
||||
$current.style.left = this.upper_texts_x[$current.textContent] + 'px';
|
||||
$current.style.top = this.options.header_height - 40 + 'px';
|
||||
$current.style.top = this.options.header_height - 50 + 'px';
|
||||
}
|
||||
|
||||
$el.classList.add('current-upper');
|
||||
let dimensions = this.$svg.getBoundingClientRect();
|
||||
$el.style.left = dimensions.x + this.$container.scrollLeft + 10 + 'px';
|
||||
$el.style.top = dimensions.y + this.options.header_height - 40 + 'px';
|
||||
$el.style.top = dimensions.y + this.options.header_height - 50 + 'px';
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(elements, function (el, i) {
|
||||
@ -2267,7 +2305,7 @@ var Gantt = (function () {
|
||||
show_popup(options) {
|
||||
if (!this.popup) {
|
||||
this.popup = new Popup(
|
||||
this.popup_wrapper,
|
||||
this.$popup_wrapper,
|
||||
this.options.custom_popup_html,
|
||||
);
|
||||
}
|
||||
@ -2306,6 +2344,9 @@ var Gantt = (function () {
|
||||
*/
|
||||
clear() {
|
||||
this.$svg.innerHTML = "";
|
||||
this.$header?.remove?.();
|
||||
this.$current_highlight?.remove?.();
|
||||
this.popup?.hide?.();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
2
dist/frappe-gantt.js.map
vendored
2
dist/frappe-gantt.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-gantt.min.css
vendored
2
dist/frappe-gantt.min.css
vendored
@ -1 +1 @@
|
||||
.dark>.gantt-container .gantt .grid-header{fill:#252525;stroke:#616161}.dark>.gantt-container .gantt .grid-row{fill:#252525}.dark>.gantt-container .gantt .grid-row:nth-child(even){fill:#3e3e3e}.dark>.gantt-container .gantt .row-line{stroke:#3e3e3e}.dark>.gantt-container .gantt .tick{stroke:#616161}.dark>.gantt-container .gantt .today-highlight{opacity:.2}.dark>.gantt-container .gantt .arrow{stroke:#eee}.dark>.gantt-container .gantt .bar{fill:#616161;stroke:none}.dark>.gantt-container .gantt .bar-progress{fill:#8a8aff}.dark>.gantt-container .gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#c6ccd2}.dark>.gantt-container .gantt .bar-invalid~.bar-label{fill:#ececec}.dark>.gantt-container .gantt .bar-label.big{fill:#ececec}.dark>.gantt-container .gantt .bar-wrapper:hover .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper:hover .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .bar-wrapper.active .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper.active .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .upper-text{fill:#a2a2a2}.dark>.gantt-container .gantt .lower-text{fill:#f7f7f7}.dark>.gantt-container .popup-wrapper{background-color:#333}.dark>.gantt-container .popup-wrapper .title{border-color:#a4a4ff}.dark>.gantt-container .popup-wrapper .pointer{border-top-color:#333}.gantt-container .grid-header{background-color:#fff;position:sticky;top:0;left:0}.gantt-container .lower-text,.gantt-container .upper-text{font-size:14px;text-anchor:middle;color:#666}.gantt-container .lower-text{position:absolute;width:fit-content}.gantt-container .upper-text{position:absolute;width:fit-content}.gantt-container .current-upper{position:fixed}.gantt-container .side-header{position:fixed;padding:0 10px;background:#fff}.gantt-container .today-button,.gantt-container .viewmode-select{background-color:#fff;border:1px solid #000;color:#111;padding:4px 10px;font-size:14px;border-radius:5px}.gantt-container .viewmode-select{padding:3px 5px;margin-right:4px}.gantt-container .date-highlight{border:2px dotted #000;border-radius:12px;z-index:1;position:absolute;opacity:.4;display:none}.gantt{user-select:none;-webkit-user-select:none;position:absolute}.gantt .grid-background{fill:none}.gantt .grid-row{fill:#fff}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke:#000;stroke-width:.5}.gantt .today-highlight{fill:#f6e796;opacity:.5}.gantt .week-highlight{fill:#f6e796;opacity:.5}.gantt .holiday-highlight{fill:#f3f4f7;opacity:.5}.gantt .month-highlight{fill:#f6e796;opacity:.5}.gantt .year-highlight{fill:#f6e796;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar-wrapper .bar{fill:#fff;stroke:#fff;stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-progress{fill:#dedfe0}.gantt .bar-expected-progress{fill:#c4c4e9}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#fff;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#fff}.gantt .bar-label{fill:#111;dominant-baseline:central;font-family:Helvetica;font-size:14px;font-weight:400}.gantt .bar-label.big{fill:#111;text-anchor:start}.gantt .bar-wrapper.important .bar{fill:#94c4f4}.gantt .bar-wrapper.important .bar-progress{fill:#2c94ec}.gantt .bar-wrapper.important .bar-label{fill:#fff}.gantt .bar-wrapper.important .handle{fill:#94c4f4}.gantt .handle{fill:#dcdce4;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper.active .handle{visibility:visible;opacity:1}.gantt .bar-wrapper .bar{-webkit-filter:drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));filter:drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-highlight{display:block}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px;height:500px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#000;padding:0;color:#959da5;border-radius:3px;border:1px solid #000;width:max-content}.gantt-container .popup-wrapper.hidden{opacity:0 !important}.gantt-container .popup-wrapper .title{border-bottom:1px solid #dedfe0;padding:10px;text-align:center;color:#fff}.gantt-container .popup-wrapper .subtitle{padding:10px;color:#dfe2e5}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,.8)}
|
||||
.dark>.gantt-container .gantt .grid-header{fill:#252525;stroke:#616161}.dark>.gantt-container .gantt .grid-row{fill:#252525}.dark>.gantt-container .gantt .grid-row:nth-child(even){fill:#3e3e3e}.dark>.gantt-container .gantt .row-line{stroke:#3e3e3e}.dark>.gantt-container .gantt .tick{stroke:#616161}.dark>.gantt-container .gantt .today-highlight{opacity:.2}.dark>.gantt-container .gantt .arrow{stroke:#eee}.dark>.gantt-container .gantt .bar{fill:#616161;stroke:none}.dark>.gantt-container .gantt .bar-progress{fill:#8a8aff}.dark>.gantt-container .gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#c6ccd2}.dark>.gantt-container .gantt .bar-invalid~.bar-label{fill:#ececec}.dark>.gantt-container .gantt .bar-label.big{fill:#ececec}.dark>.gantt-container .gantt .bar-wrapper:hover .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper:hover .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .bar-wrapper.active .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper.active .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .upper-text{fill:#a2a2a2}.dark>.gantt-container .gantt .lower-text{fill:#f7f7f7}.dark>.gantt-container .popup-wrapper{background-color:#333}.dark>.gantt-container .popup-wrapper .title{border-color:#a4a4ff}.dark>.gantt-container .popup-wrapper .pointer{border-top-color:#333}.gantt-container{line-height:14.5px}.gantt-container .grid-header{background-color:#fff;position:sticky;top:0;left:0;z-index:10}.gantt-container .lower-text,.gantt-container .upper-text{text-anchor:middle;color:#111}.gantt-container .upper-header{height:40px}.gantt-container .lower-header{height:30px}.gantt-container .lower-text{font-size:14px;position:absolute;width:fit-content}.gantt-container .upper-text{position:absolute;width:fit-content;font-weight:500;font-size:16px}.gantt-container .current-upper{position:fixed}.gantt-container .side-header{position:fixed;padding:0 10px;margin-right:10px;background:#fff;line-height:20px;font-weight:400}.gantt-container .today-button,.gantt-container .viewmode-select{background:#f4f5f6;text-align:-webkit-center;text-align:center;height:25px;border-radius:8px;border:none;color:#111;padding:4px 10px;border-radius:8px;height:25px}.gantt-container .viewmode-select{outline:none !important;padding:4px 8px;margin-right:4px;-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:""}.gantt-container .date-highlight{background-color:#ebeef0;border-radius:12px;position:absolute;display:none}.gantt-container .current-highlight{position:absolute;background:#2c94ec;width:1px}.gantt-container .current-date-highlight{background:#2c94ec;color:#fff;padding:4px 8px;border-radius:200px}.gantt{user-select:none;-webkit-user-select:none;position:absolute}.gantt .grid-background{fill:none}.gantt .grid-row{fill:#fff}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#ebeef0;stroke-width:.4}.gantt .tick.thick{stroke:#e0e0e0;stroke-width:.7}.gantt .holiday-highlight{fill:#f9fafa}.gantt .arrow{fill:none;stroke:#9fa9b1;stroke-width:1}.gantt .bar-wrapper .bar{fill:#fff;stroke:#fff;stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-progress{fill:#ebeef0}.gantt .bar-expected-progress{fill:#c4c4e9}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#fff;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#fff}.gantt .bar-label{fill:#111;dominant-baseline:central;font-family:Helvetica;font-size:13px;font-weight:400}.gantt .bar-label.big{fill:#111;text-anchor:start}.gantt .bar-wrapper.important .bar{fill:#94c4f4}.gantt .bar-wrapper.important .bar-progress{fill:#2c94ec}.gantt .bar-wrapper.important .bar-label{fill:#fff}.gantt .bar-wrapper.important .handle{fill:#94c4f4}.gantt .bar-wrapper.important .handle.progress{fill:#fff}.gantt .handle{fill:#dcdce4;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .handle.progress{fill:#666}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper.active .handle{visibility:visible;opacity:1}.gantt .bar-wrapper .bar{-webkit-filter:drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));filter:drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-highlight{display:block}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px;height:500px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#171b1f;padding:10px;border-radius:5px;width:max-content}.gantt-container .popup-wrapper.hidden{opacity:0 !important}.gantt-container .popup-wrapper .title{margin-bottom:5px;text-align:-webkit-center;text-align:center;color:#fff}.gantt-container .popup-wrapper .subtitle{color:#98a1a9}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,.8)}
|
||||
2
dist/frappe-gantt.min.js
vendored
2
dist/frappe-gantt.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-gantt.min.js.map
vendored
2
dist/frappe-gantt.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -92,12 +92,12 @@
|
||||
];
|
||||
|
||||
// Uncomment to test fixed header
|
||||
// tasks = [...tasks, ...Array.from({length: tasks.length * 3}, (_, i) => ({...tasks[i % 3], id: i}))]
|
||||
tasks = [...tasks, ...Array.from({length: tasks.length * 3}, (_, i) => ({...tasks[i % 3], id: i}))]
|
||||
|
||||
let gantt_chart = new Gantt(".gantt-target", tasks, {
|
||||
// on_click: (task) => {
|
||||
// console.log("Double Click", task);
|
||||
// },
|
||||
on_click: (task) => {
|
||||
console.log("Click", task);
|
||||
},
|
||||
// on_double_click: (task) => {
|
||||
// console.log("Double Click", task);
|
||||
// },
|
||||
|
||||
20
src/bar.js
20
src/bar.js
@ -281,17 +281,25 @@ export default class Bar {
|
||||
}
|
||||
|
||||
setup_click_event() {
|
||||
let in_action = false;
|
||||
let task_id = this.task.id;
|
||||
$.on(this.group, "mouseover", (e) => {
|
||||
this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e])
|
||||
document.querySelector(`#${task_id}-highlight`).style.display = 'block'
|
||||
})
|
||||
$.on(this.group, "mouseenter", (e) => this.show_popup(e.offsetX))
|
||||
$.on(this.group, "mouseleave", () => document.querySelector(`#${task_id}-highlight`).style.display = 'none')
|
||||
|
||||
let timeout;
|
||||
$.on(this.group, "mouseenter", (e) => timeout = setTimeout(() => {
|
||||
this.show_popup(e.offsetX)
|
||||
document.querySelector(`#${task_id}-highlight`).style.display = 'block'
|
||||
}, 200))
|
||||
|
||||
$.on(this.group, "mouseleave", () => {
|
||||
clearTimeout(timeout)
|
||||
this.gantt.popup?.hide?.()
|
||||
document.querySelector(`#${task_id}-highlight`).style.display = 'none'
|
||||
})
|
||||
|
||||
|
||||
$.on(this.group, "focus " + this.gantt.options.popup_trigger, () => {
|
||||
$.on(this.group, this.gantt.options.popup_trigger, () => {
|
||||
this.gantt.trigger_event("click", [this.task]);
|
||||
});
|
||||
|
||||
@ -337,7 +345,7 @@ export default class Bar {
|
||||
return this.gantt.get_bar(dep).$bar.getX();
|
||||
});
|
||||
// child task must not go before parent
|
||||
const valid_x = xs.reduce((prev, curr) => {
|
||||
const valid_x = xs.reduce((_, curr) => {
|
||||
return x >= curr;
|
||||
}, x);
|
||||
if (!valid_x) {
|
||||
|
||||
@ -29,6 +29,7 @@ $dark-blue: #2c94ec !default;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lower-text,
|
||||
@ -74,6 +75,7 @@ $dark-blue: #2c94ec !default;
|
||||
.today-button,
|
||||
.viewmode-select {
|
||||
background: #F4F5F6;
|
||||
text-align: -webkit-center;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
border-radius: 8px;
|
||||
@ -158,8 +160,8 @@ $dark-blue: #2c94ec !default;
|
||||
|
||||
.arrow {
|
||||
fill: none;
|
||||
stroke: $text-muted;
|
||||
stroke-width: 1.4;
|
||||
stroke: #9FA9B1;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.bar-wrapper .bar {
|
||||
@ -294,6 +296,7 @@ $dark-blue: #2c94ec !default;
|
||||
|
||||
.title {
|
||||
margin-bottom: 5px;
|
||||
text-align: -webkit-center;
|
||||
text-align: center;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
@ -1182,7 +1182,7 @@ export default class Gantt {
|
||||
this.$svg.innerHTML = "";
|
||||
this.$header?.remove?.()
|
||||
this.$current_highlight?.remove?.()
|
||||
this.$popup_wrapper.innerHTML = ''
|
||||
this.popup?.hide?.()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user