Merge pull request #164 from zhihuahuang/feat-language-zh-and-view-mode-constant

Feat language zh and view mode constant

src/date_utils.js

@@ -90,6 +90,20 @@ const month_names = {
         'Ekim',
         'Kasım',
         'Aralık'
+    ],
+    zh: [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月'
     ]
 };
 

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: [
+            view_modes: [...Object.values(VIEW_MODE)],
-                'Quarter Day',
-                'Half Day',
-                'Day',
-                'Week',
-                'Month',
-                'Year'
-            ],
             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 +