Skip to content

Commit c25ea78

Browse files
thegrubbsianthegrubbsian
committed
some more work on dragging and resizing...getting there but a few layout issues exist in scrolled positions
1 parent e85cc1b commit c25ea78

File tree

3 files changed

+64
-44
lines changed

3 files changed

+64
-44
lines changed

‎example/data.js

+25-25
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
var ganttData = [
22
{
3-
id: 1, name: "Feature 1", series: [
4-
{ name: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
5-
{ name: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
3+
id: 1, itemName: "Feature 1", series: [
4+
{ seriesName: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
5+
{ seriesName: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
66
]
77
},
88
{
9-
id: 2, name: "Feature 2", series: [
10-
{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
11-
{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
12-
{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
9+
id: 2, itemName: "Feature 2", series: [
10+
{ seriesName: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
11+
{ seriesName: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
12+
{ seriesName: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
1313
]
1414
},
1515
{
16-
id: 3, name: "Feature 3", series: [
17-
{ name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) },
18-
{ name: "Actual", start: new Date(2010,00,15), end: new Date(2010,01,03), color: "#f0f0f0" }
16+
id: 3, itemName: "Feature 3", series: [
17+
{ seriesName: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) },
18+
{ seriesName: "Actual", start: new Date(2010,00,15), end: new Date(2010,01,03), color: "#f0f0f0" }
1919
]
2020
},
2121
{
22-
id: 4, name: "Feature 4", series: [
23-
{ name: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
24-
{ name: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
22+
id: 4, itemName: "Feature 4", series: [
23+
{ seriesName: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
24+
{ seriesName: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
2525
]
2626
},
2727
{
28-
id: 5, name: "Feature 5", series: [
29-
{ name: "Planned", start: new Date(2010,02,01), end: new Date(2010,03,20) },
30-
{ name: "Actual", start: new Date(2010,02,01), end: new Date(2010,03,26), color: "#f0f0f0" }
28+
id: 5, itemName: "Feature 5", series: [
29+
{ seriesName: "Planned", start: new Date(2010,02,01), end: new Date(2010,03,20) },
30+
{ seriesName: "Actual", start: new Date(2010,02,01), end: new Date(2010,03,26), color: "#f0f0f0" }
3131
]
3232
},
3333
{
34-
id: 6, name: "Feature 6", series: [
35-
{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
36-
{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
37-
{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,20), color: "#e0e0e0" }
34+
id: 6, itemName: "Feature 6", series: [
35+
{ seriesName: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
36+
{ seriesName: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
37+
{ seriesName: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,20), color: "#e0e0e0" }
3838
]
3939
},
4040
{
41-
id: 7, name: "Feature 7", series: [
42-
{ name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) }
41+
id: 7, itemName: "Feature 7", series: [
42+
{ seriesName: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) }
4343
]
4444
},
4545
{
46-
id: 8, name: "Feature 8", series: [
47-
{ name: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
48-
{ name: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
46+
id: 8, itemName: "Feature 8", series: [
47+
{ seriesName: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
48+
{ seriesName: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
4949
]
5050
}
5151
];

‎jquery.ganttView.css

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ div.ganttview-vtheader {
5555
margin-top: 41px;
5656
width: 240px;
5757
overflow: hidden;
58+
background-color: #fff;
5859
}
5960

6061
div.ganttview-vtheader-item {

‎jquery.ganttView.js

+38-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
jQuery.ganttView v.0.8.0
2+
jQuery.ganttView v.0.8.2
33
Copyright (c) 2010 JC Grubbs - [email protected]
44
MIT License Applies
55
*/
@@ -72,9 +72,17 @@ behavior: {
7272

7373
Chart.applyLastClass(container);
7474

75-
if (opts.behavior.clickable) { Behavior.bindBlockClick(container, opts.behavior.onClick); }
76-
if (opts.behavior.resizable) { Behavior.bindBlockResize(container, opts.cellWidth, opts.start, opts.behavior.onResize); }
77-
if (opts.behavior.draggable) { Behavior.bindBlockDrag(container, opts.cellWidth, opts.start, opts.behavior.onDrag); }
75+
if (opts.behavior.clickable) {
76+
Behavior.bindBlockClick(container, opts.behavior.onClick);
77+
}
78+
79+
if (opts.behavior.resizable) {
80+
Behavior.bindBlockResize(container, opts.cellWidth, opts.start, opts.behavior.onResize);
81+
}
82+
83+
if (opts.behavior.draggable) {
84+
Behavior.bindBlockDrag(container, opts.cellWidth, opts.start, opts.behavior.onDrag);
85+
}
7886
});
7987
};
8088

@@ -103,11 +111,11 @@ behavior: {
103111
itemDiv.append(jQuery("<div>", {
104112
"class": "ganttview-vtheader-item-name",
105113
"css": { "height": (data[i].series.length * cellHeight) + "px" }
106-
}).append(data[i].name));
114+
}).append(data[i].itemName));
107115
var seriesDiv = jQuery("<div>", { "class": "ganttview-vtheader-series" });
108116
for (var j = 0; j < data[i].series.length; j++) {
109117
seriesDiv.append(jQuery("<div>", { "class": "ganttview-vtheader-series-name" })
110-
.append(data[i].series[j].name));
118+
.append(data[i].series[j].seriesName));
111119
}
112120
itemDiv.append(seriesDiv);
113121
headerDiv.append(itemDiv);
@@ -183,31 +191,33 @@ behavior: {
183191
if (size && size > 0) {
184192
if (size > 365) { size = 365; } // Keep blocks from overflowing a year
185193
var offset = DateUtils.daysBetween(start, series.start);
186-
var blockDiv = jQuery("<div>", {
194+
var block = jQuery("<div>", {
187195
"class": "ganttview-block",
188-
"title": series.name + ", " + size + " days",
196+
"title": series.seriesName + ", " + size + " days",
189197
"css": {
190198
"width": ((size * cellWidth) - 9) + "px",
191199
"margin-left": ((offset * cellWidth) + 3) + "px"
192200
}
193-
}).data("block-data", {
194-
id: data[i].id,
195-
itemName: data[i].name,
196-
seriesName: series.name,
197-
start: Date.parse(series.start),
198-
end: Date.parse(series.end),
199-
color: series.color
200201
});
202+
Chart.addBlockData(block, data[i], series);
201203
if (data[i].series[j].color) {
202-
blockDiv.css("background-color", data[i].series[j].color);
204+
block.css("background-color", data[i].series[j].color);
203205
}
204-
blockDiv.append(jQuery("<div>", { "class": "ganttview-block-text" }).text(size));
205-
jQuery(rows[rowIdx]).append(blockDiv);
206+
block.append(jQuery("<div>", { "class": "ganttview-block-text" }).text(size));
207+
jQuery(rows[rowIdx]).append(block);
206208
}
207209
rowIdx = rowIdx + 1;
208210
}
209211
}
210212
},
213+
214+
addBlockData: function (block, data, series) {
215+
// This allows custom attributes to be added to the series data objects
216+
// and makes them available to the 'data' argument of click, resize, and drag handlers
217+
var blockData = { id: data.id, itemName: data.itemName };
218+
jQuery.extend(blockData, series);
219+
block.data("block-data", blockData);
220+
},
211221

212222
applyLastClass: function (div) {
213223
jQuery("div.ganttview-grid-row div.ganttview-grid-row-cell:last-child", div).addClass("last");
@@ -218,11 +228,13 @@ behavior: {
218228
};
219229

220230
var Behavior = {
231+
221232
bindBlockClick: function (div, callback) {
222233
jQuery("div.ganttview-block", div).live("click", function () {
223234
if (callback) { callback(jQuery(this).data("block-data")); }
224235
});
225236
},
237+
226238
bindBlockResize: function (div, cellWidth, startDate, callback) {
227239
jQuery("div.ganttview-block", div).resizable({
228240
grid: cellWidth,
@@ -234,16 +246,19 @@ behavior: {
234246
}
235247
});
236248
},
249+
237250
bindBlockDrag: function (div, cellWidth, startDate, callback) {
238251
jQuery("div.ganttview-block", div).draggable({
239-
axis: "x", grid: [cellWidth, cellWidth],
252+
axis: "x",
253+
grid: [cellWidth, cellWidth],
240254
stop: function () {
241255
var block = jQuery(this);
242256
Behavior.updateDataAndPosition(div, block, cellWidth, startDate);
243257
if (callback) { callback(block.data("block-data")); }
244258
}
245259
});
246260
},
261+
247262
updateDataAndPosition: function (div, block, cellWidth, startDate) {
248263
var container = jQuery("div.ganttview-slide-container", div);
249264
var scroll = container.scrollLeft();
@@ -258,6 +273,7 @@ behavior: {
258273
var width = block.outerWidth();
259274
var numberOfDays = Math.round(width / cellWidth) - 1;
260275
block.data("block-data").end = newStart.clone().addDays(numberOfDays);
276+
$("div.ganttview-block-text", block).text(numberOfDays + 1);
261277

262278
// Remove top and left properties to avoid incorrect block positioning,
263279
// set position to relative to keep blocks relative to scrollbar when scrolling
@@ -267,6 +283,7 @@ behavior: {
267283
};
268284

269285
var ArrayUtils = {
286+
270287
contains: function (arr, obj) {
271288
var has = false;
272289
for (var i = 0; i < arr.length; i++) { if (arr[i] == obj) { has = true; } }
@@ -275,6 +292,7 @@ behavior: {
275292
};
276293

277294
var DateUtils = {
295+
278296
daysBetween: function (start, end) {
279297
if (!start || !end) { return 0; }
280298
start = Date.parse(start); end = Date.parse(end);
@@ -283,6 +301,7 @@ behavior: {
283301
while (date.compareTo(end) == -1) { count = count + 1; date.addDays(1); }
284302
return count;
285303
},
304+
286305
isWeekend: function (date) {
287306
return date.getDay() % 6 == 0;
288307
}

0 commit comments

Comments
 (0)