From 99781a82747a0a756c778a8a7e8c0517c817ec54 Mon Sep 17 00:00:00 2001 From: huangzhihua Date: Wed, 8 Jan 2020 21:58:32 +0800 Subject: [PATCH 1/2] feat: Add zh month language --- src/date_utils.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/date_utils.js b/src/date_utils.js index a4f38d4..a51feca 100644 --- a/src/date_utils.js +++ b/src/date_utils.js @@ -90,6 +90,20 @@ const month_names = { 'Ekim', 'Kasım', 'Aralık' + ], + zh: [ + '一月', + '二月', + '三月', + '四月', + '五月', + '六月', + '七月', + '八月', + '九月', + '十月', + '十一月', + '十二月' ] }; From fa22dc789537f5767aaf25a23acf0716d9e3f77c Mon Sep 17 00:00:00 2001 From: huangzhihua Date: Thu, 9 Jan 2020 11:25:40 +0800 Subject: [PATCH 2/2] feat: Add VIEW_MODE constant --- src/index.js | 56 ++++++++++++++++++++++++++++------------------------ 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/src/index.js b/src/index.js index 209b3f0..9777096 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,15 @@ import Popup from './popup'; import './gantt.scss'; +const VIEW_MODE = { + QUARTER_DAY: 'Quarter Day', + HALF_DAY: 'Half Day', + DAY: 'Day', + WEEK: 'Week', + MONTH: 'Month', + YEAR: 'Year' +}; + export default class Gantt { constructor(wrapper, tasks, options) { this.setup_wrapper(wrapper); @@ -68,14 +77,7 @@ export default class Gantt { header_height: 50, column_width: 30, step: 24, - view_modes: [ - 'Quarter Day', - 'Half Day', - 'Day', - 'Week', - 'Month', - 'Year' - ], + view_modes: [...Object.values(VIEW_MODE)], bar_height: 20, bar_corner_radius: 3, arrow_curve: 5, @@ -180,22 +182,22 @@ export default class Gantt { update_view_scale(view_mode) { this.options.view_mode = view_mode; - if (view_mode === 'Day') { + if (view_mode === VIEW_MODE.DAY) { this.options.step = 24; this.options.column_width = 38; - } else if (view_mode === 'Half Day') { + } else if (view_mode === VIEW_MODE.HALF_DAY) { this.options.step = 24 / 2; this.options.column_width = 38; - } else if (view_mode === 'Quarter Day') { + } else if (view_mode === VIEW_MODE.QUARTER_DAY) { this.options.step = 24 / 4; this.options.column_width = 38; - } else if (view_mode === 'Week') { + } else if (view_mode === VIEW_MODE.WEEK) { this.options.step = 24 * 7; this.options.column_width = 140; - } else if (view_mode === 'Month') { + } else if (view_mode === VIEW_MODE.MONTH) { this.options.step = 24 * 30; this.options.column_width = 120; - } else if (view_mode === 'Year') { + } else if (view_mode === VIEW_MODE.YEAR) { this.options.step = 24 * 365; this.options.column_width = 120; } @@ -223,13 +225,13 @@ export default class Gantt { this.gantt_end = date_utils.start_of(this.gantt_end, 'day'); // add date padding on both sides - if (this.view_is(['Quarter Day', 'Half Day'])) { + if (this.view_is([VIEW_MODE.QUARTER_DAY, VIEW_MODE.HALF_DAY])) { this.gantt_start = date_utils.add(this.gantt_start, -7, 'day'); this.gantt_end = date_utils.add(this.gantt_end, 7, 'day'); - } else if (this.view_is('Month')) { + } else if (this.view_is(VIEW_MODE.MONTH)) { this.gantt_start = date_utils.start_of(this.gantt_start, 'year'); this.gantt_end = date_utils.add(this.gantt_end, 1, 'year'); - } else if (this.view_is('Year')) { + } else if (this.view_is(VIEW_MODE.YEAR)) { this.gantt_start = date_utils.add(this.gantt_start, -2, 'year'); this.gantt_end = date_utils.add(this.gantt_end, 2, 'year'); } else { @@ -246,9 +248,9 @@ export default class Gantt { if (!cur_date) { cur_date = date_utils.clone(this.gantt_start); } else { - if (this.view_is('Year')) { + if (this.view_is(VIEW_MODE.YEAR)) { cur_date = date_utils.add(cur_date, 1, 'year'); - } else if (this.view_is('Month')) { + } else if (this.view_is(VIEW_MODE.MONTH)) { cur_date = date_utils.add(cur_date, 1, 'month'); } else { cur_date = date_utils.add( @@ -377,19 +379,19 @@ export default class Gantt { for (let date of this.dates) { let tick_class = 'tick'; // thick tick for monday - if (this.view_is('Day') && date.getDate() === 1) { + if (this.view_is(VIEW_MODE.DAY) && date.getDate() === 1) { tick_class += ' thick'; } // thick tick for first week if ( - this.view_is('Week') && + this.view_is(VIEW_MODE.WEEK) && date.getDate() >= 1 && date.getDate() < 8 ) { tick_class += ' thick'; } // thick ticks for quarters - if (this.view_is('Month') && (date.getMonth() + 1) % 3 === 0) { + if (this.view_is(VIEW_MODE.MONTH) && (date.getMonth() + 1) % 3 === 0) { tick_class += ' thick'; } @@ -399,7 +401,7 @@ export default class Gantt { append_to: this.layers.grid }); - if (this.view_is('Month')) { + if (this.view_is(VIEW_MODE.MONTH)) { tick_x += date_utils.get_days_in_month(date) * this.options.column_width / @@ -412,7 +414,7 @@ export default class Gantt { make_grid_highlights() { // highlight today's date - if (this.view_is('Day')) { + if (this.view_is(VIEW_MODE.DAY)) { const x = date_utils.diff(date_utils.today(), this.gantt_start, 'hour') / this.options.step * @@ -817,7 +819,7 @@ export default class Gantt { rem, position; - if (this.view_is('Week')) { + if (this.view_is(VIEW_MODE.WEEK)) { rem = dx % (this.options.column_width / 7); position = odx - @@ -825,7 +827,7 @@ export default class Gantt { (rem < this.options.column_width / 14 ? 0 : this.options.column_width / 7); - } else if (this.view_is('Month')) { + } else if (this.view_is(VIEW_MODE.MONTH)) { rem = dx % (this.options.column_width / 30); position = odx - @@ -920,6 +922,8 @@ export default class Gantt { } } +Gantt.VIEW_MODE = VIEW_MODE; + function generate_id(task) { return ( task.name +