jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

feat: popup, build

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-04-28 18:53:42 +05:30
parent 55be33cfa9
commit 1403f2e581
6 changed files with 143 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
dist/frappe-gantt.js vendored
View File

@ -1192,6 +1192,30 @@ var Gantt = (function () {
YEAR: ["2y", "2y"], YEAR: ["2y", "2y"],
}; };
const DEFAULT_OPTIONS = {
header_height: 65,
column_width: 30,
step: 24,
view_modes: [...Object.values(VIEW_MODE)],
bar_height: 30,
bar_corner_radius: 3,
arrow_curve: 5,
padding: 18,
view_mode: "Day",
date_format: "YYYY-MM-DD",
popup_trigger: "click",
show_expected_progress: false,
popup: null,
language: "en",
readonly: false,
highlight_weekend: true,
scroll_to: 'start',
lines: 'both',
auto_move_label: true,
today_button: true,
view_mode_select: false,
};
class Gantt { class Gantt {
constructor(wrapper, tasks, options) { constructor(wrapper, tasks, options) {
this.setup_wrapper(wrapper); this.setup_wrapper(wrapper);
@ -1250,27 +1274,7 @@ var Gantt = (function () {
} }
setup_options(options) { setup_options(options) {
const default_options = { this.options = { ...DEFAULT_OPTIONS, ...options };
header_height: 65,
column_width: 30,
step: 24,
view_modes: [...Object.values(VIEW_MODE)],
bar_height: 30,
bar_corner_radius: 3,
arrow_curve: 5,
padding: 18,
view_mode: "Day",
date_format: "YYYY-MM-DD",
popup_trigger: "click",
custom_popup_html: null,
language: "en",
readonly: false,
highlight_weekend: true,
scroll_today: true,
lines: 'both',
auto_move_label: true,
};
this.options = Object.assign({}, default_options, options);
if (!options.view_mode_padding) options.view_mode_padding = {}; if (!options.view_mode_padding) options.view_mode_padding = {};
for (let [key, value] of Object.entries(options.view_mode_padding)) { for (let [key, value] of Object.entries(options.view_mode_padding)) {
if (typeof value === "string") { if (typeof value === "string") {
@ -1510,8 +1514,7 @@ var Gantt = (function () {
this.make_arrows(); this.make_arrows();
this.map_arrows_on_bars(); this.map_arrows_on_bars();
this.set_width(); this.set_width();
this.set_scroll_position(); this.set_scroll_position(this.options.scroll_to);
if (this.options.scroll_today) this.scroll_today();
} }
setup_layers() { setup_layers() {
@ -1610,33 +1613,38 @@ var Gantt = (function () {
$side_header.classList.add('side-header'); $side_header.classList.add('side-header');
// Create view mode change select // Create view mode change select
const $select = document.createElement("select"); if (this.options.view_mode_select) {
$select.classList.add('viewmode-select');
const $el = document.createElement("option"); const $select = document.createElement("select");
$el.selected = true; $select.classList.add('viewmode-select');
$el.disabled = true;
$el.textContent = 'Mode';
$select.appendChild($el);
for (const key in VIEW_MODE) { const $el = document.createElement("option");
const $option = document.createElement("option"); $el.selected = true;
$option.value = VIEW_MODE[key]; $el.disabled = true;
$option.textContent = VIEW_MODE[key]; $el.textContent = 'Mode';
$select.appendChild($option); $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.addEventListener("change", (function () {
this.change_view_mode($select.value);
}).bind(this));
$side_header.appendChild($select);
} }
// $select.value = this.options.view_mode
$select.addEventListener("change", (function () {
this.change_view_mode($select.value);
}).bind(this));
$side_header.appendChild($select);
// Create today button // Create today button
let $today_button = document.createElement('button'); if (this.options.today_button) {
$today_button.classList.add('today-button'); let $today_button = document.createElement('button');
$today_button.textContent = 'Today'; $today_button.classList.add('today-button');
$today_button.onclick = this.scroll_today.bind(this); $today_button.textContent = 'Today';
$side_header.appendChild($today_button); $today_button.onclick = this.scroll_today.bind(this);
$side_header.appendChild($today_button);
}
this.$header.appendChild($side_header); this.$header.appendChild($side_header);
const { left, y } = this.$header.getBoundingClientRect(); const { left, y } = this.$header.getBoundingClientRect();
@ -1914,8 +1922,8 @@ var Gantt = (function () {
formatted_date: date_utils.format(date).replaceAll(' ', '_'), formatted_date: date_utils.format(date).replaceAll(' ', '_'),
column_width, column_width,
base_pos_x: base_pos.x, base_pos_x: base_pos.x,
upper_text: date_text[`${this.options.view_mode}_upper`], upper_text: this.options.lower_text ? this.options.upper_text(date, this.options.view_mode, date_text[`${this.options.view_mode}_upper`]) : date_text[`${this.options.view_mode}_upper`],
lower_text: this.options.lower_text ? this.options.lower_text(date, this.options.view_mode) : date_text[`${this.options.view_mode}_lower`], lower_text: this.options.lower_text ? this.options.lower_text(date, this.options.view_mode, date_text[`${this.options.view_mode}_lower`]) : date_text[`${this.options.view_mode}_lower`],
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`],
@ -1974,18 +1982,22 @@ var Gantt = (function () {
} }
set_scroll_position(date) { set_scroll_position(date) {
if (!date) { if (!date || date === 'start') {
date = this.gantt_start; date = this.gantt_start;
} else if (date === 'today') {
return this.scroll_today()
} else if (typeof date === 'string') {
date = date_utils.parse(date);
} }
const parent_element = this.$svg.parentElement; const parent_element = this.$svg.parentElement;
if (!parent_element) return; if (!parent_element) return;
const hours_before_first_task = date_utils.diff( const hours_before_first_task = date_utils.diff(
this.get_oldest_starting_date(),
date, date,
this.gantt_start,
"hour", "hour",
); ) + 24;
const scroll_pos = const scroll_pos =
(hours_before_first_task / this.options.step) * (hours_before_first_task / this.options.step) *
@ -1995,9 +2007,7 @@ var Gantt = (function () {
} }
scroll_today() { scroll_today() {
const oldest = this.get_oldest_starting_date().getTime(); this.set_scroll_position(new Date());
const t = new Date() - oldest;
this.set_scroll_position(new Date(this.gantt_start.getTime() - t));
} }
bind_grid_click() { bind_grid_click() {
@ -2303,10 +2313,11 @@ var Gantt = (function () {
} }
show_popup(options) { show_popup(options) {
if (this.options.popup === false) return
if (!this.popup) { if (!this.popup) {
this.popup = new Popup( this.popup = new Popup(
this.$popup_wrapper, this.$popup_wrapper,
this.options.custom_popup_html, this.options.popup,
); );
} }
this.popup.show(options); this.popup.show(options);

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

15
index.html
View File

@ -35,7 +35,7 @@
let tasks = [ let tasks = [
{ {
start: '2024-04-01', start: '2024-04-01',
end: '2024-04-08', end: '2024-04-01',
name: 'Redesign website', name: 'Redesign website',
id: "Task 0", id: "Task 0",
progress: 30 progress: 30
@ -114,10 +114,15 @@
// console.log("Hover", x, y); // console.log("Hover", x, y);
// }, // },
view_mode: "Day", view_mode: "Day",
view_mode_padding: { DAY: "7d" }, view_mode_padding: { DAY: "3d" },
language: "en", popup: false,
scroll_today: false, // scroll_to: 'today',
// readonly: true // view_mode_select: true,
// today_button: false,
// readonly: true,
// lines: 'vertical',
// lower_text: (date) => date.getDay(),
// upper_text: (date, view_mode, def) => def,
}); });
console.log(gantt_chart); console.log(gantt_chart);
</script> </script>

119
src/index.js
View File

@ -26,6 +26,30 @@ const VIEW_MODE_PADDING = {
YEAR: ["2y", "2y"], YEAR: ["2y", "2y"],
}; };
const DEFAULT_OPTIONS = {
header_height: 65,
column_width: 30,
step: 24,
view_modes: [...Object.values(VIEW_MODE)],
bar_height: 30,
bar_corner_radius: 3,
arrow_curve: 5,
padding: 18,
view_mode: "Day",
date_format: "YYYY-MM-DD",
popup_trigger: "click",
show_expected_progress: false,
popup: null,
language: "en",
readonly: false,
highlight_weekend: true,
scroll_to: 'start',
lines: 'both',
auto_move_label: true,
today_button: true,
view_mode_select: false,
};
export default class Gantt { export default class Gantt {
constructor(wrapper, tasks, options) { constructor(wrapper, tasks, options) {
this.setup_wrapper(wrapper); this.setup_wrapper(wrapper);
@ -84,27 +108,7 @@ export default class Gantt {
} }
setup_options(options) { setup_options(options) {
const default_options = { this.options = { ...DEFAULT_OPTIONS, ...options }
header_height: 65,
column_width: 30,
step: 24,
view_modes: [...Object.values(VIEW_MODE)],
bar_height: 30,
bar_corner_radius: 3,
arrow_curve: 5,
padding: 18,
view_mode: "Day",
date_format: "YYYY-MM-DD",
popup_trigger: "click",
custom_popup_html: null,
language: "en",
readonly: false,
highlight_weekend: true,
scroll_today: true,
lines: 'both',
auto_move_label: true,
};
this.options = Object.assign({}, default_options, options);
if (!options.view_mode_padding) options.view_mode_padding = {} if (!options.view_mode_padding) options.view_mode_padding = {}
for (let [key, value] of Object.entries(options.view_mode_padding)) { for (let [key, value] of Object.entries(options.view_mode_padding)) {
if (typeof value === "string") { if (typeof value === "string") {
@ -344,8 +348,7 @@ export default class Gantt {
this.make_arrows(); this.make_arrows();
this.map_arrows_on_bars(); this.map_arrows_on_bars();
this.set_width(); this.set_width();
this.set_scroll_position(); this.set_scroll_position(this.options.scroll_to);
if (this.options.scroll_today) this.scroll_today()
} }
setup_layers() { setup_layers() {
@ -446,33 +449,38 @@ export default class Gantt {
$side_header.classList.add('side-header') $side_header.classList.add('side-header')
// Create view mode change select // Create view mode change select
const $select = document.createElement("select"); if (this.options.view_mode_select) {
$select.classList.add('viewmode-select')
const $el = document.createElement("option"); const $select = document.createElement("select");
$el.selected = true $select.classList.add('viewmode-select')
$el.disabled = true
$el.textContent = 'Mode'
$select.appendChild($el)
for (const key in VIEW_MODE) { const $el = document.createElement("option");
const $option = document.createElement("option"); $el.selected = true
$option.value = VIEW_MODE[key]; $el.disabled = true
$option.textContent = VIEW_MODE[key]; $el.textContent = 'Mode'
$select.appendChild($option); $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.addEventListener("change", (function () {
this.change_view_mode($select.value)
}).bind(this));
$side_header.appendChild($select)
} }
// $select.value = this.options.view_mode
$select.addEventListener("change", (function () {
this.change_view_mode($select.value)
}).bind(this));
$side_header.appendChild($select)
// Create today button // Create today button
let $today_button = document.createElement('button') if (this.options.today_button) {
$today_button.classList.add('today-button') let $today_button = document.createElement('button')
$today_button.textContent = 'Today' $today_button.classList.add('today-button')
$today_button.onclick = this.scroll_today.bind(this) $today_button.textContent = 'Today'
$side_header.appendChild($today_button) $today_button.onclick = this.scroll_today.bind(this)
$side_header.appendChild($today_button)
}
this.$header.appendChild($side_header) this.$header.appendChild($side_header)
const { left, y } = this.$header.getBoundingClientRect(); const { left, y } = this.$header.getBoundingClientRect();
@ -750,8 +758,8 @@ export default class Gantt {
formatted_date: date_utils.format(date).replaceAll(' ', '_'), formatted_date: date_utils.format(date).replaceAll(' ', '_'),
column_width, column_width,
base_pos_x: base_pos.x, base_pos_x: base_pos.x,
upper_text: date_text[`${this.options.view_mode}_upper`], upper_text: this.options.lower_text ? this.options.upper_text(date, this.options.view_mode, date_text[`${this.options.view_mode}_upper`]) : date_text[`${this.options.view_mode}_upper`],
lower_text: this.options.lower_text ? this.options.lower_text(date, this.options.view_mode) : date_text[`${this.options.view_mode}_lower`], lower_text: this.options.lower_text ? this.options.lower_text(date, this.options.view_mode, date_text[`${this.options.view_mode}_lower`]) : date_text[`${this.options.view_mode}_lower`],
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`],
@ -810,18 +818,22 @@ export default class Gantt {
} }
set_scroll_position(date) { set_scroll_position(date) {
if (!date) { if (!date || date === 'start') {
date = this.gantt_start date = this.gantt_start
} else if (date === 'today') {
return this.scroll_today()
} else if (typeof date === 'string') {
date = date_utils.parse(date)
} }
const parent_element = this.$svg.parentElement; const parent_element = this.$svg.parentElement;
if (!parent_element) return; if (!parent_element) return;
const hours_before_first_task = date_utils.diff( const hours_before_first_task = date_utils.diff(
this.get_oldest_starting_date(),
date, date,
this.gantt_start,
"hour", "hour",
); ) + 24;
const scroll_pos = const scroll_pos =
(hours_before_first_task / this.options.step) * (hours_before_first_task / this.options.step) *
@ -831,9 +843,7 @@ export default class Gantt {
} }
scroll_today() { scroll_today() {
const oldest = this.get_oldest_starting_date().getTime() this.set_scroll_position(new Date())
const t = new Date() - oldest
this.set_scroll_position(new Date(this.gantt_start.getTime() - t))
} }
bind_grid_click() { bind_grid_click() {
@ -1139,10 +1149,11 @@ export default class Gantt {
} }
show_popup(options) { show_popup(options) {
if (this.options.popup === false) return
if (!this.popup) { if (!this.popup) {
this.popup = new Popup( this.popup = new Popup(
this.$popup_wrapper, this.$popup_wrapper,
this.options.custom_popup_html, this.options.popup,
); );
} }
this.popup.show(options); this.popup.show(options);