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