Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

more work to enable resizable and draggable blocks

  • Loading branch information...
commit 3d4c6b48e4fa42101b81b9a0ae68e6d407d45ad0 1 parent 47b2c8a
@thegrubbsian authored
View
26 README.markdown
@@ -3,4 +3,28 @@ jQuery.ganttView
The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain HTML...no vector graphics or images required.
-![Sample Gantt](http://github.com/thegrubbsian/jquery.ganttView/raw/master/example/jquery-ganttview.png)
+![Sample Gantt](http://github.com/thegrubbsian/jquery.ganttView/raw/master/example/jquery-ganttview.png)
+
+
+Browser Compatibility
+---------------------
+Currently the plugin has been tested, and is working in: FF 3.5+, Chrome 5+, Safari 4+, IE8+. There are minor issues in IE7 and I haven't even attempted to use it in IE6. If you encounter any issues with any version of Internet Explorer and would like to contribute CSS fixes please do so, several people have asked for IE6 support.
+
+
+Dependencies
+------------
+The plugin depends on the following libraries:
+
+- jQuery 1.4 or higher (obviously)
+- jQuery-UI 1.8 or higher
+- date.js
+
+
+Documentation
+-------------
+
+
+
+Contribution
+------------
+Many people have been asking for more advanced features such as variable time-span for the blocks (hours, weeks, etc.) as well as support for hierarchical items and multiple items per line. While I would love to be able to add all of these features I just don't have the time and it's often not within the scope of why I created the plugin. However, I would be extremely happy to accept any pull requests from anyone interested in adding these features. If you like the plugin, feel free to fork it and submit your patches back.
View
2  example/data.js
@@ -13,7 +13,7 @@ var ganttData = [
]
},
{
- id: 3, name: "Feature 3 - Here is a really long name to blow up the CSS", series: [
+ id: 3, name: "Feature 3", series: [
{ name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) },
{ name: "Actual", start: new Date(2010,00,15), end: new Date(2010,01,03), color: "#f0f0f0" }
]
View
4 example/index.html
@@ -32,7 +32,9 @@
end: new Date(2010,04,15),
slideWidth: 900,
behavior: {
- onClick: function (data) { alert("You clicked a block!"); },
+ onClick: function (data) { alert(uneval(data)); },
+ onResize: function (data) { alert(uneval(data)); },
+ onDrag: function (data) { alert(uneval(data)); }
}
});
});
View
9 jquery.ganttView.css
@@ -1,5 +1,5 @@
/*
-jQuery.ganttView v.0.7.2
+jQuery.ganttView v.0.8.0
Copyright (c) 2010 JC Grubbs - jc.grubbs@devmynd.com
MIT License Applies
*/
@@ -127,4 +127,11 @@ div.ganttview-block-text {
font-size: 0.8em;
color: #999;
padding: 2px 3px;
+}
+
+
+/* Adjustments for jQuery UI Styling */
+
+div.ganttview-block div.ui-resizable-handle.ui-resizable-s {
+ bottom: -0;
}
View
30 jquery.ganttView.js
@@ -1,5 +1,5 @@
/*
-jQuery.ganttView v.0.7.2
+jQuery.ganttView v.0.8.0
Copyright (c) 2010 JC Grubbs - jc.grubbs@devmynd.com
MIT License Applies
*/
@@ -201,7 +201,7 @@ behavior: {
if (data[i].series[j].color) {
blockDiv.css("background-color", data[i].series[j].color);
}
- blockDiv.append($("<div>", { "class": "ganttview-block-text" }).text(size));
+ blockDiv.append(jQuery("<div>", { "class": "ganttview-block-text" }).text(size));
jQuery(rows[rowIdx]).append(blockDiv);
}
rowIdx = rowIdx + 1;
@@ -219,28 +219,38 @@ behavior: {
var Behavior = {
bindBlockClick: function (div, callback) {
- $("div.ganttview-block", div).live("click", function () {
- if (callback) { callback($(this).data("block-data")); }
+ jQuery("div.ganttview-block", div).live("click", function () {
+ if (callback) { callback(jQuery(this).data("block-data")); }
});
},
bindBlockResize: function (div, cellWidth, cellHeight, callback) {
- $("div.ganttview-block", div).resizable({
+ jQuery("div.ganttview-block", div).resizable({
grid: cellWidth,
maxHeight: cellHeight,
stop: function () {
+ var block = jQuery(this);
+ var start = block.data("block-data").start;
+ var days = Math.round(block.outerWidth() / cellWidth);
+ block.data("block-data").end = start.addDays(days);
// Remove top and left properties to avoid incorrect block positioning,
// set position to relative to keep blocks relative to scrollbar when scrolling
- $(this).css("top", "").css("left", "").css("position", "relative");
- if (callback) { callback($(this).data("block-data")); }
+ block.css("top", "").css("left", "").css("position", "relative");
+ if (callback) { callback(block.data("block-data")); }
}
});
},
bindBlockDrag: function (div, cellWidth, callback) {
- $("div.ganttview-block", div).draggable({
+ jQuery("div.ganttview-block", div).draggable({
axis: "x", grid: [cellWidth, cellWidth],
stop: function () {
- $(this).css("top", "").css("position", "relative");
- if (callback) { callback($(this).data("block-data")); }
+ var block = jQuery(this);
+ // The math here is to transfer the relative left property to the margin-left
+ // property which avoids a conflict between dragging and resizing
+ var l = parseInt(block.css("left").replace("px", ""));
+ var m = parseInt(block.css("margin-left").replace("px", ""));
+ block.css("margin-left", (m + l) + "px")
+ .css("top", "").css("left", "").css("position", "relative");
+ if (callback) { callback(block.data("block-data")); }
}
});
}
Please sign in to comment.
Something went wrong with that request. Please try again.