chore: update rollup config
- minify css - sourcemap - github action to auto-publish on npm
This commit is contained in:
Faris Ansari
parent
aba84bd715
commit
6233b6cd4b
19
.github/workflows/publish.yml
vendored
Normal file
19
.github/workflows/publish.yml
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
name: Publish on NPM
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ master ]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
publish:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v1
|
||||||
|
- uses: actions/setup-node@v1
|
||||||
|
with:
|
||||||
|
node-version: 14
|
||||||
|
- run: yarn install
|
||||||
|
- run: yarn prettier-check
|
||||||
|
- run: yarn test
|
||||||
|
- uses: JS-DevTools/npm-publish@v1
|
||||||
|
with:
|
||||||
|
token: ${{ secrets.NPM_TOKEN }}
|
||||||
112
dist/frappe-gantt.css
vendored
112
dist/frappe-gantt.css
vendored
@ -1,102 +1,112 @@
|
|||||||
.gantt .grid-background {
|
.gantt .grid-background {
|
||||||
fill: none; }
|
fill: none;
|
||||||
|
}
|
||||||
.gantt .grid-header {
|
.gantt .grid-header {
|
||||||
fill: #ffffff;
|
fill: #ffffff;
|
||||||
stroke: #e0e0e0;
|
stroke: #e0e0e0;
|
||||||
stroke-width: 1.4; }
|
stroke-width: 1.4;
|
||||||
|
}
|
||||||
.gantt .grid-row {
|
.gantt .grid-row {
|
||||||
fill: #ffffff; }
|
fill: #ffffff;
|
||||||
|
}
|
||||||
.gantt .grid-row:nth-child(even) {
|
.gantt .grid-row:nth-child(even) {
|
||||||
fill: #f5f5f5; }
|
fill: #f5f5f5;
|
||||||
|
}
|
||||||
.gantt .row-line {
|
.gantt .row-line {
|
||||||
stroke: #ebeff2; }
|
stroke: #ebeff2;
|
||||||
|
}
|
||||||
.gantt .tick {
|
.gantt .tick {
|
||||||
stroke: #e0e0e0;
|
stroke: #e0e0e0;
|
||||||
stroke-width: 0.2; }
|
stroke-width: 0.2;
|
||||||
|
}
|
||||||
.gantt .tick.thick {
|
.gantt .tick.thick {
|
||||||
stroke-width: 0.4; }
|
stroke-width: 0.4;
|
||||||
|
}
|
||||||
.gantt .today-highlight {
|
.gantt .today-highlight {
|
||||||
fill: #fcf8e3;
|
fill: #fcf8e3;
|
||||||
opacity: 0.5; }
|
opacity: 0.5;
|
||||||
|
}
|
||||||
.gantt .arrow {
|
.gantt .arrow {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: #666;
|
stroke: #666;
|
||||||
stroke-width: 1.4; }
|
stroke-width: 1.4;
|
||||||
|
}
|
||||||
.gantt .bar {
|
.gantt .bar {
|
||||||
fill: #b8c2cc;
|
fill: #b8c2cc;
|
||||||
stroke: #8D99A6;
|
stroke: #8D99A6;
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
transition: stroke-width .3s ease;
|
transition: stroke-width 0.3s ease;
|
||||||
user-select: none; }
|
user-select: none;
|
||||||
|
}
|
||||||
.gantt .bar-progress {
|
.gantt .bar-progress {
|
||||||
fill: #a3a3ff; }
|
fill: #a3a3ff;
|
||||||
|
}
|
||||||
.gantt .bar-invalid {
|
.gantt .bar-invalid {
|
||||||
fill: transparent;
|
fill: transparent;
|
||||||
stroke: #8D99A6;
|
stroke: #8D99A6;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
stroke-dasharray: 5; }
|
stroke-dasharray: 5;
|
||||||
|
}
|
||||||
.gantt .bar-invalid ~ .bar-label {
|
.gantt .bar-invalid ~ .bar-label {
|
||||||
fill: #555; }
|
fill: #555;
|
||||||
|
}
|
||||||
.gantt .bar-label {
|
.gantt .bar-label {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
dominant-baseline: central;
|
dominant-baseline: central;
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: lighter; }
|
font-weight: lighter;
|
||||||
|
}
|
||||||
.gantt .bar-label.big {
|
.gantt .bar-label.big {
|
||||||
fill: #555;
|
fill: #555;
|
||||||
text-anchor: start; }
|
text-anchor: start;
|
||||||
|
}
|
||||||
.gantt .handle {
|
.gantt .handle {
|
||||||
fill: #ddd;
|
fill: #ddd;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: opacity .3s ease; }
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
.gantt .bar-wrapper {
|
.gantt .bar-wrapper {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none; }
|
outline: none;
|
||||||
|
}
|
||||||
.gantt .bar-wrapper:hover .bar {
|
.gantt .bar-wrapper:hover .bar {
|
||||||
fill: #a9b5c1; }
|
fill: #a9b5c1;
|
||||||
|
}
|
||||||
.gantt .bar-wrapper:hover .bar-progress {
|
.gantt .bar-wrapper:hover .bar-progress {
|
||||||
fill: #8a8aff; }
|
fill: #8a8aff;
|
||||||
|
}
|
||||||
.gantt .bar-wrapper:hover .handle {
|
.gantt .bar-wrapper:hover .handle {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1; }
|
opacity: 1;
|
||||||
|
}
|
||||||
.gantt .bar-wrapper.active .bar {
|
.gantt .bar-wrapper.active .bar {
|
||||||
fill: #a9b5c1; }
|
fill: #a9b5c1;
|
||||||
|
}
|
||||||
.gantt .bar-wrapper.active .bar-progress {
|
.gantt .bar-wrapper.active .bar-progress {
|
||||||
fill: #8a8aff; }
|
fill: #8a8aff;
|
||||||
|
}
|
||||||
.gantt .lower-text, .gantt .upper-text {
|
.gantt .lower-text, .gantt .upper-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-anchor: middle; }
|
text-anchor: middle;
|
||||||
|
}
|
||||||
.gantt .upper-text {
|
.gantt .upper-text {
|
||||||
fill: #555; }
|
fill: #555;
|
||||||
|
}
|
||||||
.gantt .lower-text {
|
.gantt .lower-text {
|
||||||
fill: #333; }
|
fill: #333;
|
||||||
|
}
|
||||||
.gantt .hide {
|
.gantt .hide {
|
||||||
display: none; }
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.gantt-container {
|
.gantt-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
font-size: 12px; }
|
font-size: 12px;
|
||||||
|
}
|
||||||
.gantt-container .popup-wrapper {
|
.gantt-container .popup-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -104,16 +114,20 @@
|
|||||||
background: rgba(0, 0, 0, 0.8);
|
background: rgba(0, 0, 0, 0.8);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #959da5;
|
color: #959da5;
|
||||||
border-radius: 3px; }
|
border-radius: 3px;
|
||||||
|
}
|
||||||
.gantt-container .popup-wrapper .title {
|
.gantt-container .popup-wrapper .title {
|
||||||
border-bottom: 3px solid #a3a3ff;
|
border-bottom: 3px solid #a3a3ff;
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
|
}
|
||||||
.gantt-container .popup-wrapper .subtitle {
|
.gantt-container .popup-wrapper .subtitle {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
color: #dfe2e5; }
|
color: #dfe2e5;
|
||||||
|
}
|
||||||
.gantt-container .popup-wrapper .pointer {
|
.gantt-container .popup-wrapper .pointer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
margin: 0 0 0 -5px;
|
margin: 0 0 0 -5px;
|
||||||
border: 5px solid transparent;
|
border: 5px solid transparent;
|
||||||
border-top-color: rgba(0, 0, 0, 0.8); }
|
border-top-color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
218
dist/frappe-gantt.js
vendored
218
dist/frappe-gantt.js
vendored
@ -22,7 +22,7 @@ const month_names = {
|
|||||||
'September',
|
'September',
|
||||||
'October',
|
'October',
|
||||||
'November',
|
'November',
|
||||||
'December'
|
'December',
|
||||||
],
|
],
|
||||||
es: [
|
es: [
|
||||||
'Enero',
|
'Enero',
|
||||||
@ -36,7 +36,7 @@ const month_names = {
|
|||||||
'Septiembre',
|
'Septiembre',
|
||||||
'Octubre',
|
'Octubre',
|
||||||
'Noviembre',
|
'Noviembre',
|
||||||
'Diciembre'
|
'Diciembre',
|
||||||
],
|
],
|
||||||
ru: [
|
ru: [
|
||||||
'Январь',
|
'Январь',
|
||||||
@ -50,7 +50,7 @@ const month_names = {
|
|||||||
'Сентябрь',
|
'Сентябрь',
|
||||||
'Октябрь',
|
'Октябрь',
|
||||||
'Ноябрь',
|
'Ноябрь',
|
||||||
'Декабрь'
|
'Декабрь',
|
||||||
],
|
],
|
||||||
ptBr: [
|
ptBr: [
|
||||||
'Janeiro',
|
'Janeiro',
|
||||||
@ -64,7 +64,7 @@ const month_names = {
|
|||||||
'Setembro',
|
'Setembro',
|
||||||
'Outubro',
|
'Outubro',
|
||||||
'Novembro',
|
'Novembro',
|
||||||
'Dezembro'
|
'Dezembro',
|
||||||
],
|
],
|
||||||
fr: [
|
fr: [
|
||||||
'Janvier',
|
'Janvier',
|
||||||
@ -78,7 +78,7 @@ const month_names = {
|
|||||||
'Septembre',
|
'Septembre',
|
||||||
'Octobre',
|
'Octobre',
|
||||||
'Novembre',
|
'Novembre',
|
||||||
'Décembre'
|
'Décembre',
|
||||||
],
|
],
|
||||||
tr: [
|
tr: [
|
||||||
'Ocak',
|
'Ocak',
|
||||||
@ -92,7 +92,7 @@ const month_names = {
|
|||||||
'Eylül',
|
'Eylül',
|
||||||
'Ekim',
|
'Ekim',
|
||||||
'Kasım',
|
'Kasım',
|
||||||
'Aralık'
|
'Aralık',
|
||||||
],
|
],
|
||||||
zh: [
|
zh: [
|
||||||
'一月',
|
'一月',
|
||||||
@ -106,8 +106,8 @@ const month_names = {
|
|||||||
'九月',
|
'九月',
|
||||||
'十月',
|
'十月',
|
||||||
'十一月',
|
'十一月',
|
||||||
'十二月'
|
'十二月',
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
var date_utils = {
|
var date_utils = {
|
||||||
@ -121,7 +121,7 @@ var date_utils = {
|
|||||||
|
|
||||||
date_parts = parts[0]
|
date_parts = parts[0]
|
||||||
.split(date_separator)
|
.split(date_separator)
|
||||||
.map(val => parseInt(val, 10));
|
.map((val) => parseInt(val, 10));
|
||||||
time_parts = parts[1] && parts[1].split(time_separator);
|
time_parts = parts[1] && parts[1].split(time_separator);
|
||||||
|
|
||||||
// month is 0 indexed
|
// month is 0 indexed
|
||||||
@ -164,7 +164,7 @@ var date_utils = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
|
format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
|
||||||
const values = this.get_date_values(date).map(d => padStart(d, 2, 0));
|
const values = this.get_date_values(date).map((d) => padStart(d, 2, 0));
|
||||||
const format_map = {
|
const format_map = {
|
||||||
YYYY: values[0],
|
YYYY: values[0],
|
||||||
MM: padStart(+values[1] + 1, 2, 0),
|
MM: padStart(+values[1] + 1, 2, 0),
|
||||||
@ -175,7 +175,7 @@ var date_utils = {
|
|||||||
SSS: values[6],
|
SSS: values[6],
|
||||||
D: values[2],
|
D: values[2],
|
||||||
MMMM: month_names[lang][+values[1]],
|
MMMM: month_names[lang][+values[1]],
|
||||||
MMM: month_names[lang][+values[1]]
|
MMM: month_names[lang][+values[1]],
|
||||||
};
|
};
|
||||||
|
|
||||||
let str = format_string;
|
let str = format_string;
|
||||||
@ -183,7 +183,7 @@ var date_utils = {
|
|||||||
|
|
||||||
Object.keys(format_map)
|
Object.keys(format_map)
|
||||||
.sort((a, b) => b.length - a.length) // big string first
|
.sort((a, b) => b.length - a.length) // big string first
|
||||||
.forEach(key => {
|
.forEach((key) => {
|
||||||
if (str.includes(key)) {
|
if (str.includes(key)) {
|
||||||
str = str.replace(key, `$${formatted_values.length}`);
|
str = str.replace(key, `$${formatted_values.length}`);
|
||||||
formatted_values.push(format_map[key]);
|
formatted_values.push(format_map[key]);
|
||||||
@ -220,7 +220,7 @@ var date_utils = {
|
|||||||
hours,
|
hours,
|
||||||
days,
|
days,
|
||||||
months,
|
months,
|
||||||
years
|
years,
|
||||||
}[scale]
|
}[scale]
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@ -243,7 +243,7 @@ var date_utils = {
|
|||||||
date.getHours() + (scale === HOUR ? qty : 0),
|
date.getHours() + (scale === HOUR ? qty : 0),
|
||||||
date.getMinutes() + (scale === MINUTE ? qty : 0),
|
date.getMinutes() + (scale === MINUTE ? qty : 0),
|
||||||
date.getSeconds() + (scale === SECOND ? qty : 0),
|
date.getSeconds() + (scale === SECOND ? qty : 0),
|
||||||
date.getMilliseconds() + (scale === MILLISECOND ? qty : 0)
|
date.getMilliseconds() + (scale === MILLISECOND ? qty : 0),
|
||||||
];
|
];
|
||||||
return new Date(...vals);
|
return new Date(...vals);
|
||||||
},
|
},
|
||||||
@ -256,7 +256,7 @@ var date_utils = {
|
|||||||
[HOUR]: 3,
|
[HOUR]: 3,
|
||||||
[MINUTE]: 2,
|
[MINUTE]: 2,
|
||||||
[SECOND]: 1,
|
[SECOND]: 1,
|
||||||
[MILLISECOND]: 0
|
[MILLISECOND]: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
function should_reset(_scale) {
|
function should_reset(_scale) {
|
||||||
@ -271,7 +271,7 @@ var date_utils = {
|
|||||||
should_reset(DAY) ? 0 : date.getHours(),
|
should_reset(DAY) ? 0 : date.getHours(),
|
||||||
should_reset(HOUR) ? 0 : date.getMinutes(),
|
should_reset(HOUR) ? 0 : date.getMinutes(),
|
||||||
should_reset(MINUTE) ? 0 : date.getSeconds(),
|
should_reset(MINUTE) ? 0 : date.getSeconds(),
|
||||||
should_reset(SECOND) ? 0 : date.getMilliseconds()
|
should_reset(SECOND) ? 0 : date.getMilliseconds(),
|
||||||
];
|
];
|
||||||
|
|
||||||
return new Date(...vals);
|
return new Date(...vals);
|
||||||
@ -289,7 +289,7 @@ var date_utils = {
|
|||||||
date.getHours(),
|
date.getHours(),
|
||||||
date.getMinutes(),
|
date.getMinutes(),
|
||||||
date.getSeconds(),
|
date.getSeconds(),
|
||||||
date.getMilliseconds()
|
date.getMilliseconds(),
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -308,7 +308,7 @@ var date_utils = {
|
|||||||
return 29;
|
return 29;
|
||||||
}
|
}
|
||||||
return 28;
|
return 28;
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
|
||||||
@ -376,7 +376,7 @@ function getAnimationElement(
|
|||||||
from,
|
from,
|
||||||
to,
|
to,
|
||||||
dur,
|
dur,
|
||||||
begin: 'click + ' + begin // artificial click
|
begin: 'click + ' + begin, // artificial click
|
||||||
});
|
});
|
||||||
return svgElement;
|
return svgElement;
|
||||||
}
|
}
|
||||||
@ -390,7 +390,7 @@ function getAnimationElement(
|
|||||||
calcMode: 'spline',
|
calcMode: 'spline',
|
||||||
values: from + ';' + to,
|
values: from + ';' + to,
|
||||||
keyTimes: '0; 1',
|
keyTimes: '0; 1',
|
||||||
keySplines: cubic_bezier('ease-out')
|
keySplines: cubic_bezier('ease-out'),
|
||||||
});
|
});
|
||||||
svgElement.appendChild(animateElement);
|
svgElement.appendChild(animateElement);
|
||||||
|
|
||||||
@ -403,7 +403,7 @@ function cubic_bezier(name) {
|
|||||||
linear: '0 0 1 1',
|
linear: '0 0 1 1',
|
||||||
'ease-in': '.42 0 1 1',
|
'ease-in': '.42 0 1 1',
|
||||||
'ease-out': '0 0 .58 1',
|
'ease-out': '0 0 .58 1',
|
||||||
'ease-in-out': '.42 0 .58 1'
|
'ease-in-out': '.42 0 .58 1',
|
||||||
}[name];
|
}[name];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -496,15 +496,15 @@ class Bar {
|
|||||||
(this.task.progress / 100) || 0;
|
(this.task.progress / 100) || 0;
|
||||||
this.group = createSVG('g', {
|
this.group = createSVG('g', {
|
||||||
class: 'bar-wrapper ' + (this.task.custom_class || ''),
|
class: 'bar-wrapper ' + (this.task.custom_class || ''),
|
||||||
'data-id': this.task.id
|
'data-id': this.task.id,
|
||||||
});
|
});
|
||||||
this.bar_group = createSVG('g', {
|
this.bar_group = createSVG('g', {
|
||||||
class: 'bar-group',
|
class: 'bar-group',
|
||||||
append_to: this.group
|
append_to: this.group,
|
||||||
});
|
});
|
||||||
this.handle_group = createSVG('g', {
|
this.handle_group = createSVG('g', {
|
||||||
class: 'handle-group',
|
class: 'handle-group',
|
||||||
append_to: this.group
|
append_to: this.group,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -542,7 +542,7 @@ class Bar {
|
|||||||
rx: this.corner_radius,
|
rx: this.corner_radius,
|
||||||
ry: this.corner_radius,
|
ry: this.corner_radius,
|
||||||
class: 'bar',
|
class: 'bar',
|
||||||
append_to: this.bar_group
|
append_to: this.bar_group,
|
||||||
});
|
});
|
||||||
|
|
||||||
animateSVG(this.$bar, 'width', 0, this.width);
|
animateSVG(this.$bar, 'width', 0, this.width);
|
||||||
@ -562,7 +562,7 @@ class Bar {
|
|||||||
rx: this.corner_radius,
|
rx: this.corner_radius,
|
||||||
ry: this.corner_radius,
|
ry: this.corner_radius,
|
||||||
class: 'bar-progress',
|
class: 'bar-progress',
|
||||||
append_to: this.bar_group
|
append_to: this.bar_group,
|
||||||
});
|
});
|
||||||
|
|
||||||
animateSVG(this.$bar_progress, 'width', 0, this.progress_width);
|
animateSVG(this.$bar_progress, 'width', 0, this.progress_width);
|
||||||
@ -574,7 +574,7 @@ class Bar {
|
|||||||
y: this.y + this.height / 2,
|
y: this.y + this.height / 2,
|
||||||
innerHTML: this.task.name,
|
innerHTML: this.task.name,
|
||||||
class: 'bar-label',
|
class: 'bar-label',
|
||||||
append_to: this.bar_group
|
append_to: this.bar_group,
|
||||||
});
|
});
|
||||||
// labels get BBox in the next tick
|
// labels get BBox in the next tick
|
||||||
requestAnimationFrame(() => this.update_label_position());
|
requestAnimationFrame(() => this.update_label_position());
|
||||||
@ -594,7 +594,7 @@ class Bar {
|
|||||||
rx: this.corner_radius,
|
rx: this.corner_radius,
|
||||||
ry: this.corner_radius,
|
ry: this.corner_radius,
|
||||||
class: 'handle right',
|
class: 'handle right',
|
||||||
append_to: this.handle_group
|
append_to: this.handle_group,
|
||||||
});
|
});
|
||||||
|
|
||||||
createSVG('rect', {
|
createSVG('rect', {
|
||||||
@ -605,14 +605,14 @@ class Bar {
|
|||||||
rx: this.corner_radius,
|
rx: this.corner_radius,
|
||||||
ry: this.corner_radius,
|
ry: this.corner_radius,
|
||||||
class: 'handle left',
|
class: 'handle left',
|
||||||
append_to: this.handle_group
|
append_to: this.handle_group,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (this.task.progress && this.task.progress < 100) {
|
if (this.task.progress && this.task.progress < 100) {
|
||||||
this.$handle_progress = createSVG('polygon', {
|
this.$handle_progress = createSVG('polygon', {
|
||||||
points: this.get_progress_polygon_points().join(','),
|
points: this.get_progress_polygon_points().join(','),
|
||||||
class: 'handle progress',
|
class: 'handle progress',
|
||||||
append_to: this.handle_group
|
append_to: this.handle_group,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -625,7 +625,7 @@ class Bar {
|
|||||||
bar_progress.getEndX() + 5,
|
bar_progress.getEndX() + 5,
|
||||||
bar_progress.getY() + bar_progress.getHeight(),
|
bar_progress.getY() + bar_progress.getHeight(),
|
||||||
bar_progress.getEndX(),
|
bar_progress.getEndX(),
|
||||||
bar_progress.getY() + bar_progress.getHeight() - 8.66
|
bar_progress.getY() + bar_progress.getHeight() - 8.66,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -635,7 +635,7 @@ class Bar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setup_click_event() {
|
setup_click_event() {
|
||||||
$.on(this.group, 'focus ' + this.gantt.options.popup_trigger, e => {
|
$.on(this.group, 'focus ' + this.gantt.options.popup_trigger, (e) => {
|
||||||
if (this.action_completed) {
|
if (this.action_completed) {
|
||||||
// just finished a move action, wait for a few seconds
|
// just finished a move action, wait for a few seconds
|
||||||
return;
|
return;
|
||||||
@ -646,7 +646,7 @@ class Bar {
|
|||||||
this.group.classList.add('active');
|
this.group.classList.add('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
$.on(this.group, 'dblclick', e => {
|
$.on(this.group, 'dblclick', (e) => {
|
||||||
if (this.action_completed) {
|
if (this.action_completed) {
|
||||||
// just finished a move action, wait for a few seconds
|
// just finished a move action, wait for a few seconds
|
||||||
return;
|
return;
|
||||||
@ -659,7 +659,11 @@ class Bar {
|
|||||||
show_popup() {
|
show_popup() {
|
||||||
if (this.gantt.bar_being_dragged) return;
|
if (this.gantt.bar_being_dragged) return;
|
||||||
|
|
||||||
const start_date = date_utils.format(this.task._start, 'MMM D', this.gantt.options.language);
|
const start_date = date_utils.format(
|
||||||
|
this.task._start,
|
||||||
|
'MMM D',
|
||||||
|
this.gantt.options.language
|
||||||
|
);
|
||||||
const end_date = date_utils.format(
|
const end_date = date_utils.format(
|
||||||
date_utils.add(this.task._end, -1, 'second'),
|
date_utils.add(this.task._end, -1, 'second'),
|
||||||
'MMM D',
|
'MMM D',
|
||||||
@ -679,7 +683,7 @@ class Bar {
|
|||||||
const bar = this.$bar;
|
const bar = this.$bar;
|
||||||
if (x) {
|
if (x) {
|
||||||
// get all x values of parent task
|
// get all x values of parent task
|
||||||
const xs = this.task.dependencies.map(dep => {
|
const xs = this.task.dependencies.map((dep) => {
|
||||||
return this.gantt.get_bar(dep).$bar.getX();
|
return this.gantt.get_bar(dep).$bar.getX();
|
||||||
});
|
});
|
||||||
// child task must not go before parent
|
// child task must not go before parent
|
||||||
@ -720,7 +724,7 @@ class Bar {
|
|||||||
this.gantt.trigger_event('date_change', [
|
this.gantt.trigger_event('date_change', [
|
||||||
this.task,
|
this.task,
|
||||||
new_start_date,
|
new_start_date,
|
||||||
date_utils.add(new_end_date, -1, 'second')
|
date_utils.add(new_end_date, -1, 'second'),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -755,7 +759,7 @@ class Bar {
|
|||||||
|
|
||||||
compute_progress() {
|
compute_progress() {
|
||||||
const progress =
|
const progress =
|
||||||
this.$bar_progress.getWidth() / this.$bar.getWidth() * 100;
|
(this.$bar_progress.getWidth() / this.$bar.getWidth()) * 100;
|
||||||
return parseInt(progress, 10);
|
return parseInt(progress, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -765,11 +769,11 @@ class Bar {
|
|||||||
const gantt_start = this.gantt.gantt_start;
|
const gantt_start = this.gantt.gantt_start;
|
||||||
|
|
||||||
const diff = date_utils.diff(task_start, gantt_start, 'hour');
|
const diff = date_utils.diff(task_start, gantt_start, 'hour');
|
||||||
let x = diff / step * column_width;
|
let x = (diff / step) * column_width;
|
||||||
|
|
||||||
if (this.gantt.view_is('Month')) {
|
if (this.gantt.view_is('Month')) {
|
||||||
const diff = date_utils.diff(task_start, gantt_start, 'day');
|
const diff = date_utils.diff(task_start, gantt_start, 'day');
|
||||||
x = diff * column_width / 30;
|
x = (diff * column_width) / 30;
|
||||||
}
|
}
|
||||||
return x;
|
return x;
|
||||||
}
|
}
|
||||||
@ -950,7 +954,7 @@ class Arrow {
|
|||||||
this.element = createSVG('path', {
|
this.element = createSVG('path', {
|
||||||
d: this.path,
|
d: this.path,
|
||||||
'data-from': this.from_task.task.id,
|
'data-from': this.from_task.task.id,
|
||||||
'data-to': this.to_task.task.id
|
'data-to': this.to_task.task.id,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1036,7 +1040,7 @@ const VIEW_MODE = {
|
|||||||
DAY: 'Day',
|
DAY: 'Day',
|
||||||
WEEK: 'Week',
|
WEEK: 'Week',
|
||||||
MONTH: 'Month',
|
MONTH: 'Month',
|
||||||
YEAR: 'Year'
|
YEAR: 'Year',
|
||||||
};
|
};
|
||||||
|
|
||||||
class Gantt {
|
class Gantt {
|
||||||
@ -1075,7 +1079,7 @@ class Gantt {
|
|||||||
// create it
|
// create it
|
||||||
this.$svg = createSVG('svg', {
|
this.$svg = createSVG('svg', {
|
||||||
append_to: wrapper_element,
|
append_to: wrapper_element,
|
||||||
class: 'gantt'
|
class: 'gantt',
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.$svg = svg_element;
|
this.$svg = svg_element;
|
||||||
@ -1110,7 +1114,7 @@ class Gantt {
|
|||||||
date_format: 'YYYY-MM-DD',
|
date_format: 'YYYY-MM-DD',
|
||||||
popup_trigger: 'click',
|
popup_trigger: 'click',
|
||||||
custom_popup_html: null,
|
custom_popup_html: null,
|
||||||
language: 'en'
|
language: 'en',
|
||||||
};
|
};
|
||||||
this.options = Object.assign({}, default_options, options);
|
this.options = Object.assign({}, default_options, options);
|
||||||
}
|
}
|
||||||
@ -1148,7 +1152,7 @@ class Gantt {
|
|||||||
// if hours is not set, assume the last day is full day
|
// if hours is not set, assume the last day is full day
|
||||||
// e.g: 2018-09-09 becomes 2018-09-09 23:59:59
|
// e.g: 2018-09-09 becomes 2018-09-09 23:59:59
|
||||||
const task_end_values = date_utils.get_date_values(task._end);
|
const task_end_values = date_utils.get_date_values(task._end);
|
||||||
if (task_end_values.slice(3).every(d => d === 0)) {
|
if (task_end_values.slice(3).every((d) => d === 0)) {
|
||||||
task._end = date_utils.add(task._end, 24, 'hour');
|
task._end = date_utils.add(task._end, 24, 'hour');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1163,8 +1167,8 @@ class Gantt {
|
|||||||
if (task.dependencies) {
|
if (task.dependencies) {
|
||||||
deps = task.dependencies
|
deps = task.dependencies
|
||||||
.split(',')
|
.split(',')
|
||||||
.map(d => d.trim())
|
.map((d) => d.trim())
|
||||||
.filter(d => d);
|
.filter((d) => d);
|
||||||
}
|
}
|
||||||
task.dependencies = deps;
|
task.dependencies = deps;
|
||||||
}
|
}
|
||||||
@ -1312,7 +1316,7 @@ class Gantt {
|
|||||||
for (let layer of layers) {
|
for (let layer of layers) {
|
||||||
this.layers[layer] = createSVG('g', {
|
this.layers[layer] = createSVG('g', {
|
||||||
class: layer,
|
class: layer,
|
||||||
append_to: this.$svg
|
append_to: this.$svg,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1339,12 +1343,12 @@ class Gantt {
|
|||||||
width: grid_width,
|
width: grid_width,
|
||||||
height: grid_height,
|
height: grid_height,
|
||||||
class: 'grid-background',
|
class: 'grid-background',
|
||||||
append_to: this.layers.grid
|
append_to: this.layers.grid,
|
||||||
});
|
});
|
||||||
|
|
||||||
$.attr(this.$svg, {
|
$.attr(this.$svg, {
|
||||||
height: grid_height + this.options.padding + 100,
|
height: grid_height + this.options.padding + 100,
|
||||||
width: '100%'
|
width: '100%',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1364,7 +1368,7 @@ class Gantt {
|
|||||||
width: row_width,
|
width: row_width,
|
||||||
height: row_height,
|
height: row_height,
|
||||||
class: 'grid-row',
|
class: 'grid-row',
|
||||||
append_to: rows_layer
|
append_to: rows_layer,
|
||||||
});
|
});
|
||||||
|
|
||||||
createSVG('line', {
|
createSVG('line', {
|
||||||
@ -1373,7 +1377,7 @@ class Gantt {
|
|||||||
x2: row_width,
|
x2: row_width,
|
||||||
y2: row_y + row_height,
|
y2: row_y + row_height,
|
||||||
class: 'row-line',
|
class: 'row-line',
|
||||||
append_to: lines_layer
|
append_to: lines_layer,
|
||||||
});
|
});
|
||||||
|
|
||||||
row_y += this.options.bar_height + this.options.padding;
|
row_y += this.options.bar_height + this.options.padding;
|
||||||
@ -1389,7 +1393,7 @@ class Gantt {
|
|||||||
width: header_width,
|
width: header_width,
|
||||||
height: header_height,
|
height: header_height,
|
||||||
class: 'grid-header',
|
class: 'grid-header',
|
||||||
append_to: this.layers.grid
|
append_to: this.layers.grid,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1415,20 +1419,23 @@ class Gantt {
|
|||||||
tick_class += ' thick';
|
tick_class += ' thick';
|
||||||
}
|
}
|
||||||
// thick ticks for quarters
|
// thick ticks for quarters
|
||||||
if (this.view_is(VIEW_MODE.MONTH) && (date.getMonth() + 1) % 3 === 0) {
|
if (
|
||||||
|
this.view_is(VIEW_MODE.MONTH) &&
|
||||||
|
(date.getMonth() + 1) % 3 === 0
|
||||||
|
) {
|
||||||
tick_class += ' thick';
|
tick_class += ' thick';
|
||||||
}
|
}
|
||||||
|
|
||||||
createSVG('path', {
|
createSVG('path', {
|
||||||
d: `M ${tick_x} ${tick_y} v ${tick_height}`,
|
d: `M ${tick_x} ${tick_y} v ${tick_height}`,
|
||||||
class: tick_class,
|
class: tick_class,
|
||||||
append_to: this.layers.grid
|
append_to: this.layers.grid,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (this.view_is(VIEW_MODE.MONTH)) {
|
if (this.view_is(VIEW_MODE.MONTH)) {
|
||||||
tick_x +=
|
tick_x +=
|
||||||
date_utils.get_days_in_month(date) *
|
(date_utils.get_days_in_month(date) *
|
||||||
this.options.column_width /
|
this.options.column_width) /
|
||||||
30;
|
30;
|
||||||
} else {
|
} else {
|
||||||
tick_x += this.options.column_width;
|
tick_x += this.options.column_width;
|
||||||
@ -1440,8 +1447,8 @@ class Gantt {
|
|||||||
// highlight today's date
|
// highlight today's date
|
||||||
if (this.view_is(VIEW_MODE.DAY)) {
|
if (this.view_is(VIEW_MODE.DAY)) {
|
||||||
const x =
|
const x =
|
||||||
date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
|
(date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
|
||||||
this.options.step *
|
this.options.step) *
|
||||||
this.options.column_width;
|
this.options.column_width;
|
||||||
const y = 0;
|
const y = 0;
|
||||||
|
|
||||||
@ -1458,7 +1465,7 @@ class Gantt {
|
|||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
class: 'today-highlight',
|
class: 'today-highlight',
|
||||||
append_to: this.layers.grid
|
append_to: this.layers.grid,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1470,7 +1477,7 @@ class Gantt {
|
|||||||
y: date.lower_y,
|
y: date.lower_y,
|
||||||
innerHTML: date.lower_text,
|
innerHTML: date.lower_text,
|
||||||
class: 'lower-text',
|
class: 'lower-text',
|
||||||
append_to: this.layers.date
|
append_to: this.layers.date,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (date.upper_text) {
|
if (date.upper_text) {
|
||||||
@ -1479,7 +1486,7 @@ class Gantt {
|
|||||||
y: date.upper_y,
|
y: date.upper_y,
|
||||||
innerHTML: date.upper_text,
|
innerHTML: date.upper_text,
|
||||||
class: 'upper-text',
|
class: 'upper-text',
|
||||||
append_to: this.layers.date
|
append_to: this.layers.date,
|
||||||
});
|
});
|
||||||
|
|
||||||
// remove out-of-bound dates
|
// remove out-of-bound dates
|
||||||
@ -1534,7 +1541,11 @@ class Gantt {
|
|||||||
'Half Day_upper':
|
'Half Day_upper':
|
||||||
date.getDate() !== last_date.getDate()
|
date.getDate() !== last_date.getDate()
|
||||||
? date.getMonth() !== last_date.getMonth()
|
? date.getMonth() !== last_date.getMonth()
|
||||||
? date_utils.format(date, 'D MMM', this.options.language)
|
? date_utils.format(
|
||||||
|
date,
|
||||||
|
'D MMM',
|
||||||
|
this.options.language
|
||||||
|
)
|
||||||
: date_utils.format(date, 'D', this.options.language)
|
: date_utils.format(date, 'D', this.options.language)
|
||||||
: '',
|
: '',
|
||||||
Day_upper:
|
Day_upper:
|
||||||
@ -1552,28 +1563,28 @@ class Gantt {
|
|||||||
Year_upper:
|
Year_upper:
|
||||||
date.getFullYear() !== last_date.getFullYear()
|
date.getFullYear() !== last_date.getFullYear()
|
||||||
? date_utils.format(date, 'YYYY', this.options.language)
|
? date_utils.format(date, 'YYYY', this.options.language)
|
||||||
: ''
|
: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
const base_pos = {
|
const base_pos = {
|
||||||
x: i * this.options.column_width,
|
x: i * this.options.column_width,
|
||||||
lower_y: this.options.header_height,
|
lower_y: this.options.header_height,
|
||||||
upper_y: this.options.header_height - 25
|
upper_y: this.options.header_height - 25,
|
||||||
};
|
};
|
||||||
|
|
||||||
const x_pos = {
|
const x_pos = {
|
||||||
'Quarter Day_lower': this.options.column_width * 4 / 2,
|
'Quarter Day_lower': (this.options.column_width * 4) / 2,
|
||||||
'Quarter Day_upper': 0,
|
'Quarter Day_upper': 0,
|
||||||
'Half Day_lower': this.options.column_width * 2 / 2,
|
'Half Day_lower': (this.options.column_width * 2) / 2,
|
||||||
'Half Day_upper': 0,
|
'Half Day_upper': 0,
|
||||||
Day_lower: this.options.column_width / 2,
|
Day_lower: this.options.column_width / 2,
|
||||||
Day_upper: this.options.column_width * 30 / 2,
|
Day_upper: (this.options.column_width * 30) / 2,
|
||||||
Week_lower: 0,
|
Week_lower: 0,
|
||||||
Week_upper: this.options.column_width * 4 / 2,
|
Week_upper: (this.options.column_width * 4) / 2,
|
||||||
Month_lower: this.options.column_width / 2,
|
Month_lower: this.options.column_width / 2,
|
||||||
Month_upper: this.options.column_width * 12 / 2,
|
Month_upper: (this.options.column_width * 12) / 2,
|
||||||
Year_lower: this.options.column_width / 2,
|
Year_lower: this.options.column_width / 2,
|
||||||
Year_upper: this.options.column_width * 30 / 2
|
Year_upper: (this.options.column_width * 30) / 2,
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -1582,12 +1593,12 @@ class Gantt {
|
|||||||
upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],
|
upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],
|
||||||
upper_y: base_pos.upper_y,
|
upper_y: base_pos.upper_y,
|
||||||
lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`],
|
lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`],
|
||||||
lower_y: base_pos.lower_y
|
lower_y: base_pos.lower_y,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
make_bars() {
|
make_bars() {
|
||||||
this.bars = this.tasks.map(task => {
|
this.bars = this.tasks.map((task) => {
|
||||||
const bar = new Bar(this, task);
|
const bar = new Bar(this, task);
|
||||||
this.layers.bar.appendChild(bar.group);
|
this.layers.bar.appendChild(bar.group);
|
||||||
return bar;
|
return bar;
|
||||||
@ -1599,7 +1610,7 @@ class Gantt {
|
|||||||
for (let task of this.tasks) {
|
for (let task of this.tasks) {
|
||||||
let arrows = [];
|
let arrows = [];
|
||||||
arrows = task.dependencies
|
arrows = task.dependencies
|
||||||
.map(task_id => {
|
.map((task_id) => {
|
||||||
const dependency = this.get_task(task_id);
|
const dependency = this.get_task(task_id);
|
||||||
if (!dependency) return;
|
if (!dependency) return;
|
||||||
const arrow = new Arrow(
|
const arrow = new Arrow(
|
||||||
@ -1617,7 +1628,7 @@ class Gantt {
|
|||||||
|
|
||||||
map_arrows_on_bars() {
|
map_arrows_on_bars() {
|
||||||
for (let bar of this.bars) {
|
for (let bar of this.bars) {
|
||||||
bar.arrows = this.arrows.filter(arrow => {
|
bar.arrows = this.arrows.filter((arrow) => {
|
||||||
return (
|
return (
|
||||||
arrow.from_task.task.id === bar.task.id ||
|
arrow.from_task.task.id === bar.task.id ||
|
||||||
arrow.to_task.task.id === bar.task.id
|
arrow.to_task.task.id === bar.task.id
|
||||||
@ -1647,8 +1658,7 @@ class Gantt {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const scroll_pos =
|
const scroll_pos =
|
||||||
hours_before_first_task /
|
(hours_before_first_task / this.options.step) *
|
||||||
this.options.step *
|
|
||||||
this.options.column_width -
|
this.options.column_width -
|
||||||
this.options.column_width;
|
this.options.column_width;
|
||||||
|
|
||||||
@ -1700,13 +1710,13 @@ class Gantt {
|
|||||||
parent_bar_id = bar_wrapper.getAttribute('data-id');
|
parent_bar_id = bar_wrapper.getAttribute('data-id');
|
||||||
const ids = [
|
const ids = [
|
||||||
parent_bar_id,
|
parent_bar_id,
|
||||||
...this.get_all_dependent_tasks(parent_bar_id)
|
...this.get_all_dependent_tasks(parent_bar_id),
|
||||||
];
|
];
|
||||||
bars = ids.map(id => this.get_bar(id));
|
bars = ids.map((id) => this.get_bar(id));
|
||||||
|
|
||||||
this.bar_being_dragged = parent_bar_id;
|
this.bar_being_dragged = parent_bar_id;
|
||||||
|
|
||||||
bars.forEach(bar => {
|
bars.forEach((bar) => {
|
||||||
const $bar = bar.$bar;
|
const $bar = bar.$bar;
|
||||||
$bar.ox = $bar.getX();
|
$bar.ox = $bar.getX();
|
||||||
$bar.oy = $bar.getY();
|
$bar.oy = $bar.getY();
|
||||||
@ -1715,12 +1725,12 @@ class Gantt {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$.on(this.$svg, 'mousemove', e => {
|
$.on(this.$svg, 'mousemove', (e) => {
|
||||||
if (!action_in_progress()) return;
|
if (!action_in_progress()) return;
|
||||||
const dx = e.offsetX - x_on_start;
|
const dx = e.offsetX - x_on_start;
|
||||||
const dy = e.offsetY - y_on_start;
|
e.offsetY - y_on_start;
|
||||||
|
|
||||||
bars.forEach(bar => {
|
bars.forEach((bar) => {
|
||||||
const $bar = bar.$bar;
|
const $bar = bar.$bar;
|
||||||
$bar.finaldx = this.get_snap_position(dx);
|
$bar.finaldx = this.get_snap_position(dx);
|
||||||
this.hide_popup();
|
this.hide_popup();
|
||||||
@ -1728,17 +1738,17 @@ class Gantt {
|
|||||||
if (parent_bar_id === bar.task.id) {
|
if (parent_bar_id === bar.task.id) {
|
||||||
bar.update_bar_position({
|
bar.update_bar_position({
|
||||||
x: $bar.ox + $bar.finaldx,
|
x: $bar.ox + $bar.finaldx,
|
||||||
width: $bar.owidth - $bar.finaldx
|
width: $bar.owidth - $bar.finaldx,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
bar.update_bar_position({
|
bar.update_bar_position({
|
||||||
x: $bar.ox + $bar.finaldx
|
x: $bar.ox + $bar.finaldx,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else if (is_resizing_right) {
|
} else if (is_resizing_right) {
|
||||||
if (parent_bar_id === bar.task.id) {
|
if (parent_bar_id === bar.task.id) {
|
||||||
bar.update_bar_position({
|
bar.update_bar_position({
|
||||||
width: $bar.owidth + $bar.finaldx
|
width: $bar.owidth + $bar.finaldx,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else if (is_dragging) {
|
} else if (is_dragging) {
|
||||||
@ -1747,9 +1757,9 @@ class Gantt {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('mouseup', e => {
|
document.addEventListener('mouseup', (e) => {
|
||||||
if (is_dragging || is_resizing_left || is_resizing_right) {
|
if (is_dragging || is_resizing_left || is_resizing_right) {
|
||||||
bars.forEach(bar => bar.group.classList.remove('active'));
|
bars.forEach((bar) => bar.group.classList.remove('active'));
|
||||||
}
|
}
|
||||||
|
|
||||||
is_dragging = false;
|
is_dragging = false;
|
||||||
@ -1757,9 +1767,9 @@ class Gantt {
|
|||||||
is_resizing_right = false;
|
is_resizing_right = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
$.on(this.$svg, 'mouseup', e => {
|
$.on(this.$svg, 'mouseup', (e) => {
|
||||||
this.bar_being_dragged = null;
|
this.bar_being_dragged = null;
|
||||||
bars.forEach(bar => {
|
bars.forEach((bar) => {
|
||||||
const $bar = bar.$bar;
|
const $bar = bar.$bar;
|
||||||
if (!$bar.finaldx) return;
|
if (!$bar.finaldx) return;
|
||||||
bar.date_changed();
|
bar.date_changed();
|
||||||
@ -1796,10 +1806,10 @@ class Gantt {
|
|||||||
$bar_progress.max_dx = $bar.getWidth() - $bar_progress.getWidth();
|
$bar_progress.max_dx = $bar.getWidth() - $bar_progress.getWidth();
|
||||||
});
|
});
|
||||||
|
|
||||||
$.on(this.$svg, 'mousemove', e => {
|
$.on(this.$svg, 'mousemove', (e) => {
|
||||||
if (!is_resizing) return;
|
if (!is_resizing) return;
|
||||||
let dx = e.offsetX - x_on_start;
|
let dx = e.offsetX - x_on_start;
|
||||||
let dy = e.offsetY - y_on_start;
|
e.offsetY - y_on_start;
|
||||||
|
|
||||||
if (dx > $bar_progress.max_dx) {
|
if (dx > $bar_progress.max_dx) {
|
||||||
dx = $bar_progress.max_dx;
|
dx = $bar_progress.max_dx;
|
||||||
@ -1832,7 +1842,7 @@ class Gantt {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
out = out.concat(deps);
|
out = out.concat(deps);
|
||||||
to_process = deps.filter(d => !to_process.includes(d));
|
to_process = deps.filter((d) => !to_process.includes(d));
|
||||||
}
|
}
|
||||||
|
|
||||||
return out.filter(Boolean);
|
return out.filter(Boolean);
|
||||||
@ -1872,7 +1882,7 @@ class Gantt {
|
|||||||
}
|
}
|
||||||
|
|
||||||
unselect_all() {
|
unselect_all() {
|
||||||
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach(el => {
|
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
|
||||||
el.classList.remove('active');
|
el.classList.remove('active');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -1883,20 +1893,20 @@ class Gantt {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (Array.isArray(modes)) {
|
if (Array.isArray(modes)) {
|
||||||
return modes.some(mode => this.options.view_mode === mode);
|
return modes.some((mode) => this.options.view_mode === mode);
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
get_task(id) {
|
get_task(id) {
|
||||||
return this.tasks.find(task => {
|
return this.tasks.find((task) => {
|
||||||
return task.id === id;
|
return task.id === id;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
get_bar(id) {
|
get_bar(id) {
|
||||||
return this.bars.find(bar => {
|
return this.bars.find((bar) => {
|
||||||
return bar.task.id === id;
|
return bar.task.id === id;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -1929,9 +1939,8 @@ class Gantt {
|
|||||||
*/
|
*/
|
||||||
get_oldest_starting_date() {
|
get_oldest_starting_date() {
|
||||||
return this.tasks
|
return this.tasks
|
||||||
.map(task => task._start)
|
.map((task) => task._start)
|
||||||
.reduce(
|
.reduce((prev_date, cur_date) =>
|
||||||
(prev_date, cur_date) =>
|
|
||||||
cur_date <= prev_date ? cur_date : prev_date
|
cur_date <= prev_date ? cur_date : prev_date
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1949,15 +1958,10 @@ class Gantt {
|
|||||||
Gantt.VIEW_MODE = VIEW_MODE;
|
Gantt.VIEW_MODE = VIEW_MODE;
|
||||||
|
|
||||||
function generate_id(task) {
|
function generate_id(task) {
|
||||||
return (
|
return task.name + '_' + Math.random().toString(36).slice(2, 12);
|
||||||
task.name +
|
|
||||||
'_' +
|
|
||||||
Math.random()
|
|
||||||
.toString(36)
|
|
||||||
.slice(2, 12)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return Gantt;
|
return Gantt;
|
||||||
|
|
||||||
}());
|
})();
|
||||||
|
//# sourceMappingURL=frappe-gantt.js.map
|
||||||
|
|||||||
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
1
dist/frappe-gantt.min.css
vendored
Normal file
1
dist/frappe-gantt.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.gantt .grid-background{fill:none}.gantt .grid-header{fill:#fff;stroke:#e0e0e0;stroke-width:1.4}.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke-width:.4}.gantt .today-highlight{fill:#fcf8e3;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{fill:#b8c2cc;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s ease;user-select:none}.gantt .bar-progress{fill:#a3a3ff}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#8d99a6;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;dominant-baseline:central;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .handle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper:hover .bar{fill:#a9b5c1}.gantt .bar-wrapper:hover .bar-progress{fill:#8a8aff}.gantt .bar-wrapper:hover .handle{visibility:visible;opacity:1}.gantt .bar-wrapper.active .bar{fill:#a9b5c1}.gantt .bar-wrapper.active .bar-progress{fill:#8a8aff}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:rgba(0,0,0,.8);padding:0;color:#959da5;border-radius:3px}.gantt-container .popup-wrapper .title{border-bottom:3px solid #a3a3ff;padding:10px}.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-top-color:rgba(0,0,0,.8)}
|
||||||
3
dist/frappe-gantt.min.js
vendored
3
dist/frappe-gantt.min.js
vendored
File diff suppressed because one or more lines are too long
6
dist/frappe-gantt.min.js.map
vendored
6
dist/frappe-gantt.min.js.map
vendored
File diff suppressed because one or more lines are too long
17
package.json
17
package.json
@ -9,12 +9,18 @@
|
|||||||
"dev": "rollup -c -w",
|
"dev": "rollup -c -w",
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
"test:watch": "jest --watch",
|
"test:watch": "jest --watch",
|
||||||
"prettier": "prettier es6 --write \"{src/*,tests/*,rollup.config}.js\""
|
"prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"",
|
||||||
|
"prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\""
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/frappe/gantt.git"
|
"url": "https://github.com/frappe/gantt.git"
|
||||||
},
|
},
|
||||||
|
"files": [
|
||||||
|
"src",
|
||||||
|
"dist",
|
||||||
|
"README.md"
|
||||||
|
],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"gantt",
|
"gantt",
|
||||||
"svg",
|
"svg",
|
||||||
@ -31,15 +37,14 @@
|
|||||||
"homepage": "https://github.com/frappe/gantt",
|
"homepage": "https://github.com/frappe/gantt",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.6.1",
|
||||||
"deepmerge": "^2.0.1",
|
|
||||||
"eslint": "^4.17.0",
|
"eslint": "^4.17.0",
|
||||||
"eslint-config-prettier": "^2.9.0",
|
"eslint-config-prettier": "^2.9.0",
|
||||||
"eslint-plugin-prettier": "^2.6.0",
|
"eslint-plugin-prettier": "^2.6.0",
|
||||||
"jest": "^22.2.1",
|
"jest": "^22.2.1",
|
||||||
"prettier": "1.10.2",
|
"prettier": "^2.6.2",
|
||||||
"rollup": "^0.55.3",
|
"rollup": "^2.70.2",
|
||||||
"rollup-plugin-sass": "^1.2.2",
|
"rollup-plugin-sass": "^1.2.12",
|
||||||
"rollup-plugin-uglify": "^3.0.0"
|
"rollup-plugin-terser": "^7.0.2"
|
||||||
},
|
},
|
||||||
"eslintIgnore": [
|
"eslintIgnore": [
|
||||||
"dist"
|
"dist"
|
||||||
|
|||||||
@ -1,25 +1,37 @@
|
|||||||
import sass from 'rollup-plugin-sass';
|
import sass from 'rollup-plugin-sass';
|
||||||
import uglify from 'rollup-plugin-uglify';
|
import { terser } from 'rollup-plugin-terser';
|
||||||
import merge from 'deepmerge';
|
|
||||||
|
|
||||||
const dev = {
|
const dev = {
|
||||||
input: 'src/index.js',
|
input: 'src/index.js',
|
||||||
output: {
|
output: {
|
||||||
name: 'Gantt',
|
name: 'Gantt',
|
||||||
file: 'dist/frappe-gantt.js',
|
file: 'dist/frappe-gantt.js',
|
||||||
format: 'iife'
|
sourcemap: true,
|
||||||
|
format: 'iife',
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
sass({
|
sass({
|
||||||
output: 'dist/frappe-gantt.css'
|
output: true,
|
||||||
})
|
}),
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
const prod = merge(dev, {
|
const prod = {
|
||||||
|
input: 'src/index.js',
|
||||||
output: {
|
output: {
|
||||||
file: 'dist/frappe-gantt.min.js'
|
name: 'Gantt',
|
||||||
|
file: 'dist/frappe-gantt.min.js',
|
||||||
|
sourcemap: true,
|
||||||
|
format: 'iife',
|
||||||
},
|
},
|
||||||
plugins: [uglify()]
|
plugins: [
|
||||||
});
|
sass({
|
||||||
|
output: true,
|
||||||
|
options: {
|
||||||
|
outputStyle: 'compressed',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
terser(),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
export default [dev, prod];
|
export default [dev, prod];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user