events working
This commit is contained in:
parent
6169f11053
commit
414ebae75a
29
index.html
29
index.html
@ -44,24 +44,21 @@
|
||||
date_format: "YYYY-MM-DD",
|
||||
bar: {
|
||||
height: 20
|
||||
}
|
||||
// events: {
|
||||
// bar_on_click: function (task) {
|
||||
// console.log(task);
|
||||
// },
|
||||
// bar_on_date_change: function(task, start, end) {
|
||||
// console.log(task, start, end);
|
||||
// },
|
||||
// bar_on_progress_change: function(task, progress) {
|
||||
// console.log(task, progress);
|
||||
// },
|
||||
// on_viewmode_change: function(mode) {
|
||||
// console.log(mode);
|
||||
// }
|
||||
// }
|
||||
},
|
||||
on_click: function (task) {
|
||||
console.log(task);
|
||||
},
|
||||
on_date_change: function(task, start, end) {
|
||||
console.log(task, start, end);
|
||||
},
|
||||
on_progress_change: function(task, progress) {
|
||||
console.log(task, progress);
|
||||
},
|
||||
on_view_change: function(mode) {
|
||||
console.log(mode);
|
||||
}
|
||||
});
|
||||
console.log(gantt_chart);
|
||||
// gantt.render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
87
lib/gantt.js
87
lib/gantt.js
@ -114,6 +114,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
set_scale(mode);
|
||||
prepare();
|
||||
render();
|
||||
// fire viewmode_change event
|
||||
trigger_event('view_change', [mode]);
|
||||
}
|
||||
|
||||
function prepare() {
|
||||
@ -268,7 +270,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
make_bars();
|
||||
make_arrows();
|
||||
map_arrows_on_bars();
|
||||
setup_events();
|
||||
set_width();
|
||||
set_scroll_position();
|
||||
bind_grid_click();
|
||||
@ -342,10 +343,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
function set_scale(scale) {
|
||||
self.config.view_mode = scale;
|
||||
|
||||
// fire viewmode_change event
|
||||
// self.events.on_viewmode_change(scale);
|
||||
// trigger("view_mode_change");
|
||||
|
||||
if (scale === 'Day') {
|
||||
self.config.step = 24;
|
||||
self.config.column_width = 38;
|
||||
@ -700,14 +697,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
}
|
||||
}
|
||||
|
||||
function setup_events() {
|
||||
// this._bars.forEach(function(bar) {
|
||||
// bar.events.on_date_change = me.events.bar_on_date_change;
|
||||
// bar.events.on_progress_change = me.events.bar_on_progress_change;
|
||||
// bar.click(me.events.bar_on_click);
|
||||
// });
|
||||
}
|
||||
|
||||
function bind_grid_click() {
|
||||
self.element_groups.grid.click(function () {
|
||||
self.canvas.selectAll('.bar-wrapper').forEach(function (el) {
|
||||
@ -763,6 +752,13 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
}
|
||||
self.get_bar = get_bar; // required in Bar
|
||||
|
||||
function trigger_event(event, args) {
|
||||
if (self.config['on_' + event]) {
|
||||
self.config['on_' + event].apply(null, args);
|
||||
}
|
||||
}
|
||||
self.trigger_event = trigger_event;
|
||||
|
||||
init();
|
||||
|
||||
return self;
|
||||
@ -1240,30 +1236,13 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
}
|
||||
}
|
||||
|
||||
// function draw_invalid_bar() {
|
||||
// const x = moment().startOf('day').diff(gt.gantt_start, 'hours') /
|
||||
// gt.config.step * gt.config.column_width;
|
||||
|
||||
// gt.canvas.rect(x, self.y,
|
||||
// gt.config.column_width * 2, self.height,
|
||||
// self.corner_radius, self.corner_radius)
|
||||
// .addClass('bar-invalid')
|
||||
// .appendTo(self.bar_group);
|
||||
|
||||
// gt.canvas.text(
|
||||
// x + gt.config.column_width,
|
||||
// self.y + self.height / 2,
|
||||
// 'Dates not set')
|
||||
// .addClass('bar-label big')
|
||||
// .appendTo(self.bar_group);
|
||||
// }
|
||||
|
||||
function bind() {
|
||||
if (self.invalid) return;
|
||||
show_details();
|
||||
bind_resize();
|
||||
bind_drag();
|
||||
bind_resize_progress();
|
||||
setup_click_event();
|
||||
}
|
||||
|
||||
function show_details() {
|
||||
@ -1478,26 +1457,26 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
update_details_position();
|
||||
}
|
||||
|
||||
// function click(callback) {
|
||||
// self.group.click(function () {
|
||||
// if (self.action_completed) {
|
||||
// // just finished a move action, wait for a few seconds
|
||||
// return;
|
||||
// }
|
||||
// if (self.group.hasClass('active')) {
|
||||
// callback(self.task);
|
||||
// }
|
||||
// unselect_all();
|
||||
// self.group.toggleClass('active');
|
||||
// });
|
||||
// }
|
||||
function setup_click_event() {
|
||||
self.group.click(function () {
|
||||
if (self.action_completed) {
|
||||
// just finished a move action, wait for a few seconds
|
||||
return;
|
||||
}
|
||||
if (self.group.hasClass('active')) {
|
||||
gt.trigger_event('click', [self.task]);
|
||||
}
|
||||
unselect_all();
|
||||
self.group.toggleClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
function date_changed() {
|
||||
self.events.on_date_change && self.events.on_date_change(self.task, compute_start_date(), compute_end_date());
|
||||
gt.trigger_event('date_change', [self.task, compute_start_date(), compute_end_date()]);
|
||||
}
|
||||
|
||||
function progress_changed() {
|
||||
self.events.on_progress_change && self.events.on_progress_change(self.task, compute_progress());
|
||||
gt.trigger_event('progress_change', [self.task, compute_progress()]);
|
||||
}
|
||||
|
||||
function set_action_completed() {
|
||||
@ -1507,12 +1486,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// function compute_date(x) {
|
||||
// const shift = (x - compute_x()) / gt.config.column_width;
|
||||
// const date = self.task._start.clone().add(gt.config.step * shift, 'hours');
|
||||
// return date;
|
||||
// }
|
||||
|
||||
function compute_start_date() {
|
||||
var bar = self.$bar,
|
||||
shift = (bar.getX() - compute_x()) / gt.config.column_width,
|
||||
@ -1630,11 +1603,11 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
details_box && details_box.transform('t' + pos.x + ',' + pos.y);
|
||||
}
|
||||
|
||||
// function unselect_all() {
|
||||
// gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
|
||||
// el.removeClass('active');
|
||||
// });
|
||||
// }
|
||||
function unselect_all() {
|
||||
gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
|
||||
el.removeClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
76
src/Bar.js
76
src/Bar.js
@ -128,30 +128,13 @@ export default function Bar(gt, task) {
|
||||
}
|
||||
}
|
||||
|
||||
// function draw_invalid_bar() {
|
||||
// const x = moment().startOf('day').diff(gt.gantt_start, 'hours') /
|
||||
// gt.config.step * gt.config.column_width;
|
||||
|
||||
// gt.canvas.rect(x, self.y,
|
||||
// gt.config.column_width * 2, self.height,
|
||||
// self.corner_radius, self.corner_radius)
|
||||
// .addClass('bar-invalid')
|
||||
// .appendTo(self.bar_group);
|
||||
|
||||
// gt.canvas.text(
|
||||
// x + gt.config.column_width,
|
||||
// self.y + self.height / 2,
|
||||
// 'Dates not set')
|
||||
// .addClass('bar-label big')
|
||||
// .appendTo(self.bar_group);
|
||||
// }
|
||||
|
||||
function bind() {
|
||||
if (self.invalid) return;
|
||||
show_details();
|
||||
bind_resize();
|
||||
bind_drag();
|
||||
bind_resize_progress();
|
||||
setup_click_event();
|
||||
}
|
||||
|
||||
function show_details() {
|
||||
@ -358,35 +341,28 @@ export default function Bar(gt, task) {
|
||||
update_details_position();
|
||||
}
|
||||
|
||||
// function click(callback) {
|
||||
// self.group.click(function () {
|
||||
// if (self.action_completed) {
|
||||
// // just finished a move action, wait for a few seconds
|
||||
// return;
|
||||
// }
|
||||
// if (self.group.hasClass('active')) {
|
||||
// callback(self.task);
|
||||
// }
|
||||
// unselect_all();
|
||||
// self.group.toggleClass('active');
|
||||
// });
|
||||
// }
|
||||
function setup_click_event() {
|
||||
self.group.click(function () {
|
||||
if (self.action_completed) {
|
||||
// just finished a move action, wait for a few seconds
|
||||
return;
|
||||
}
|
||||
if (self.group.hasClass('active')) {
|
||||
gt.trigger_event('click', [self.task]);
|
||||
}
|
||||
unselect_all();
|
||||
self.group.toggleClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
function date_changed() {
|
||||
self.events.on_date_change &&
|
||||
self.events.on_date_change(
|
||||
self.task,
|
||||
compute_start_date(),
|
||||
compute_end_date()
|
||||
);
|
||||
gt.trigger_event('date_change',
|
||||
[self.task, compute_start_date(), compute_end_date()]);
|
||||
}
|
||||
|
||||
function progress_changed() {
|
||||
self.events.on_progress_change &&
|
||||
self.events.on_progress_change(
|
||||
self.task,
|
||||
compute_progress()
|
||||
);
|
||||
gt.trigger_event('progress_change',
|
||||
[self.task, compute_progress()]);
|
||||
}
|
||||
|
||||
function set_action_completed() {
|
||||
@ -394,12 +370,6 @@ export default function Bar(gt, task) {
|
||||
setTimeout(() => self.action_completed = false, 2000);
|
||||
}
|
||||
|
||||
// function compute_date(x) {
|
||||
// const shift = (x - compute_x()) / gt.config.column_width;
|
||||
// const date = self.task._start.clone().add(gt.config.step * shift, 'hours');
|
||||
// return date;
|
||||
// }
|
||||
|
||||
function compute_start_date() {
|
||||
const bar = self.$bar,
|
||||
shift = (bar.getX() - compute_x()) / gt.config.column_width,
|
||||
@ -500,11 +470,11 @@ export default function Bar(gt, task) {
|
||||
details_box && details_box.transform(`t${pos.x},${pos.y}`);
|
||||
}
|
||||
|
||||
// function unselect_all() {
|
||||
// gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
|
||||
// el.removeClass('active');
|
||||
// });
|
||||
// }
|
||||
function unselect_all() {
|
||||
gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
|
||||
el.removeClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
|
||||
22
src/Gantt.js
22
src/Gantt.js
@ -58,6 +58,8 @@ export default function Gantt(element, tasks, config) {
|
||||
set_scale(mode);
|
||||
prepare();
|
||||
render();
|
||||
// fire viewmode_change event
|
||||
trigger_event('view_change', [mode]);
|
||||
}
|
||||
|
||||
function prepare() {
|
||||
@ -148,7 +150,6 @@ export default function Gantt(element, tasks, config) {
|
||||
make_bars();
|
||||
make_arrows();
|
||||
map_arrows_on_bars();
|
||||
setup_events();
|
||||
set_width();
|
||||
set_scroll_position();
|
||||
bind_grid_click();
|
||||
@ -203,10 +204,6 @@ export default function Gantt(element, tasks, config) {
|
||||
function set_scale(scale) {
|
||||
self.config.view_mode = scale;
|
||||
|
||||
// fire viewmode_change event
|
||||
// self.events.on_viewmode_change(scale);
|
||||
// trigger("view_mode_change");
|
||||
|
||||
if(scale === 'Day') {
|
||||
self.config.step = 24;
|
||||
self.config.column_width = 38;
|
||||
@ -470,14 +467,6 @@ export default function Gantt(element, tasks, config) {
|
||||
}
|
||||
}
|
||||
|
||||
function setup_events() {
|
||||
// this._bars.forEach(function(bar) {
|
||||
// bar.events.on_date_change = me.events.bar_on_date_change;
|
||||
// bar.events.on_progress_change = me.events.bar_on_progress_change;
|
||||
// bar.click(me.events.bar_on_click);
|
||||
// });
|
||||
}
|
||||
|
||||
function bind_grid_click() {
|
||||
self.element_groups.grid.click(() => {
|
||||
self.canvas.selectAll('.bar-wrapper').forEach(el => {
|
||||
@ -511,6 +500,13 @@ export default function Gantt(element, tasks, config) {
|
||||
}
|
||||
self.get_bar = get_bar; // required in Bar
|
||||
|
||||
function trigger_event(event, args) {
|
||||
if(self.config['on_' + event]) {
|
||||
self.config['on_' + event].apply(null, args);
|
||||
}
|
||||
}
|
||||
self.trigger_event = trigger_event;
|
||||
|
||||
init();
|
||||
|
||||
return self;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user