jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

generate id if not given, custom popup html

Browse Source
This commit is contained in:
Faris Ansari 2017-02-14 17:14:57 +05:30
parent ac37400390
commit b33216274c
5 changed files with 124 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
dist/frappe-gantt.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

77
src/Bar.js
View File

@ -148,21 +148,9 @@ export default function Bar(gt, task) {
.addClass('details-wrapper hide')
.attr('data-task', self.task.id)
.appendTo(popover_group);
gt.canvas.rect(0, 0, 0, 110, 2, 2)
.addClass('details-container')
.appendTo(self.details_box);
gt.canvas.text(0, 0, '')
.attr({ dx: 10, dy: 30 })
.addClass('details-heading')
.appendTo(self.details_box);
gt.canvas.text(0, 0, '')
.attr({ dx: 10, dy: 65 })
.addClass('details-body')
.appendTo(self.details_box);
gt.canvas.text(0, 0, '')
.attr({ dx: 10, dy: 90 })
.addClass('details-body')
.appendTo(self.details_box);
render_details();
const f = gt.canvas.filter(
Snap.filter.shadow(0, 1, 1, '#666', 0.6));
self.details_box.attr({
@ -177,7 +165,6 @@ export default function Bar(gt, task) {
}
popover_group.selectAll('.details-wrapper')
.forEach(el => el.addClass('hide'));
render_details();
self.details_box.removeClass('hide');
});
}
@ -185,27 +172,48 @@ export default function Bar(gt, task) {
function render_details() {
const {x, y} = get_details_position();
self.details_box.transform(`t${x},${y}`);
self.details_box.clear();
const start_date = self.task._start.format('MMM D'),
end_date = self.task._end.format('MMM D'),
heading = `${self.task.name}: ${start_date} - ${end_date}`;
const html = get_details_html();
const foreign_object =
Snap.parse(`<foreignObject width="5000" height="2000">
<body xmlns="http://www.w3.org/1999/xhtml">
${html}
</body>
</foreignObject>`);
self.details_box.append(foreign_object);
}
const $heading = self.details_box
.select('.details-heading')
.attr('text', heading);
function get_details_html() {
const bbox = $heading.getBBox();
self.details_box.select('.details-container')
.attr({ width: bbox.width + 20 });
// custom html in config
if(gt.config.custom_popup_html) {
const html = gt.config.custom_popup_html;
if(typeof html === 'string') {
return html;
}
if(isFunction(html)) {
return html(task);
}
}
const duration = self.task._end.diff(self.task._start, 'days'),
body1 = `Duration: ${duration + 1} days`,
body2 = self.task.progress ?
`Progress: ${self.task.progress}` : '';
const start_date = self.task._start.format('MMM D');
const end_date = self.task._end.format('MMM D');
const heading = `${self.task.name}: ${start_date} - ${end_date}`;
const $body = self.details_box.selectAll('.details-body');
$body[0].attr('text', body1);
$body[1].attr('text', body2);
const line_1 = `Duration: ${self.duration} days`;
const line_2 = self.task.progress ? `Progress: ${self.task.progress}` : null;
const html = `
<div class="details-container">
<h5>${heading}</h5>
<p>${line_1}</p>
${
line_2 ? `<p>${line_2}</p>` : ''
}
</div>
`;
return html;
}
function get_details_position() {
@ -504,6 +512,11 @@ export default function Bar(gt, task) {
self.details_box && self.details_box.transform(`t${x},${y}`);
}
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
init();
return self;

13
src/Gantt.js
View File

@ -51,7 +51,8 @@ export default function Gantt(element, tasks, config) {
},
padding: 18,
view_mode: 'Day',
date_format: 'YYYY-MM-DD'
date_format: 'YYYY-MM-DD',
custom_popup_html: null
};
self.config = Object.assign({}, defaults, config);
@ -128,6 +129,12 @@ export default function Gantt(element, tasks, config) {
}
task.dependencies = deps;
}
// uids
if(!task.id) {
task.id = generate_id(task);
}
return task;
});
}
@ -530,6 +537,10 @@ export default function Gantt(element, tasks, config) {
});
}
function generate_id(task) {
return task.name + '_' + Math.random().toString(36).slice(2, 12);
}
function trigger_event(event, args) {
if(self.config['on_' + event]) {
self.config['on_' + event].apply(null, args);

32
src/gantt.scss
View File

@ -120,20 +120,30 @@ $handle-color: #ddd;
fill: $text-color;
}
#details {
font-size: 14;
#details .details-container {
background: #fff;
display: inline-block;
padding: 12px;
.details-container {
stroke: $border-color;
stroke-width: 1.1;
fill: #fff;
h5, p {
margin: 0;
}
.details-heading {
fill: $text-color;
font-weight: 500;
h5 {
font-size: 12px;
font-weight: bold;
margin-bottom: 10px;
color: $text-light;
}
.details-body {
fill: $text-light;
p {
font-size: 12px;
margin-bottom: 6px;
color: $text-muted;
}
p:last-child {
margin-bottom: 0;
}
}