feat: popup, build

dist/frappe-gantt.js

@@ -1192,6 +1192,30 @@ var Gantt = (function () {
     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 {
     constructor(wrapper, tasks, options) {
       this.setup_wrapper(wrapper);
@@ -1250,27 +1274,7 @@ var Gantt = (function () {
     }
 
     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 = {};
       for (let [key, value] of Object.entries(options.view_mode_padding)) {
         if (typeof value === "string") {
@@ -1510,8 +1514,7 @@ var Gantt = (function () {
       this.make_arrows();
       this.map_arrows_on_bars();
       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() {
@@ -1610,6 +1613,8 @@ var Gantt = (function () {
       $side_header.classList.add('side-header');
 
       // Create view mode change select
+      if (this.options.view_mode_select) {
+
         const $select = document.createElement("select");
         $select.classList.add('viewmode-select');
 
@@ -1630,13 +1635,16 @@ var Gantt = (function () {
           this.change_view_mode($select.value);
         }).bind(this));
         $side_header.appendChild($select);
+      }
 
       // Create today button
+      if (this.options.today_button) {
         let $today_button = document.createElement('button');
         $today_button.classList.add('today-button');
         $today_button.textContent = 'Today';
         $today_button.onclick = this.scroll_today.bind(this);
         $side_header.appendChild($today_button);
+      }
 
       this.$header.appendChild($side_header);
       const { left, y } = this.$header.getBoundingClientRect();
@@ -1914,8 +1922,8 @@ var Gantt = (function () {
         formatted_date: date_utils.format(date).replaceAll(' ', '_'),
         column_width,
         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_y: base_pos.upper_y,
         lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`],
@@ -1974,18 +1982,22 @@ var Gantt = (function () {
     }
 
     set_scroll_position(date) {
-      if (!date) {
+      if (!date || date === '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;
       if (!parent_element) return;
 
       const hours_before_first_task = date_utils.diff(
-        this.get_oldest_starting_date(),
         date,
+        this.gantt_start,
         "hour",
-      );
+      ) + 24;
 
       const scroll_pos =
         (hours_before_first_task / this.options.step) *
@@ -1995,9 +2007,7 @@ var Gantt = (function () {
     }
 
     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() {
@@ -2303,10 +2313,11 @@ var Gantt = (function () {
     }
 
     show_popup(options) {
+      if (this.options.popup === false) return
       if (!this.popup) {
         this.popup = new Popup(
           this.$popup_wrapper,
-          this.options.custom_popup_html,
+          this.options.popup,
         );
       }
       this.popup.show(options);

index.html

@@ -35,7 +35,7 @@
       let tasks = [
         {
         	start: '2024-04-01',
-        	end: '2024-04-08',
+        	end: '2024-04-01',
         	name: 'Redesign website',
         	id: "Task 0",
         	progress: 30
@@ -114,10 +114,15 @@
         //   console.log("Hover", x, y);
         // },
         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);
     </script>

src/index.js

@@ -26,6 +26,30 @@ const VIEW_MODE_PADDING = {
   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 {
   constructor(wrapper, tasks, options) {
     this.setup_wrapper(wrapper);
@@ -84,27 +108,7 @@ export default class Gantt {
   }
 
   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 = {}
     for (let [key, value] of Object.entries(options.view_mode_padding)) {
       if (typeof value === "string") {
@@ -344,8 +348,7 @@ export default class Gantt {
     this.make_arrows();
     this.map_arrows_on_bars();
     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() {
@@ -446,6 +449,8 @@ export default class Gantt {
     $side_header.classList.add('side-header')
 
     // Create view mode change select
+    if (this.options.view_mode_select) {
+
       const $select = document.createElement("select");
       $select.classList.add('viewmode-select')
 
@@ -466,13 +471,16 @@ export default class Gantt {
         this.change_view_mode($select.value)
       }).bind(this));
       $side_header.appendChild($select)
+    }
 
     // Create today button
+    if (this.options.today_button) {
       let $today_button = document.createElement('button')
       $today_button.classList.add('today-button')
       $today_button.textContent = 'Today'
       $today_button.onclick = this.scroll_today.bind(this)
       $side_header.appendChild($today_button)
+    }
 
     this.$header.appendChild($side_header)
     const { left, y } = this.$header.getBoundingClientRect();
@@ -750,8 +758,8 @@ export default class Gantt {
       formatted_date: date_utils.format(date).replaceAll(' ', '_'),
       column_width,
       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_y: base_pos.upper_y,
       lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`],
@@ -810,18 +818,22 @@ export default class Gantt {
   }
 
   set_scroll_position(date) {
-    if (!date) {
+    if (!date || date === '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;
     if (!parent_element) return;
 
     const hours_before_first_task = date_utils.diff(
-      this.get_oldest_starting_date(),
       date,
+      this.gantt_start,
       "hour",
-    );
+    ) + 24;
 
     const scroll_pos =
       (hours_before_first_task / this.options.step) *
@@ -831,9 +843,7 @@ export default class Gantt {
   }
 
   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() {
@@ -1139,10 +1149,11 @@ export default class Gantt {
   }
 
   show_popup(options) {
+    if (this.options.popup === false) return
     if (!this.popup) {
       this.popup = new Popup(
         this.$popup_wrapper,
-        this.options.custom_popup_html,
+        this.options.popup,
       );
     }
     this.popup.show(options);