Permalink
Browse files

adding initial (and buggy) support for dragging and resizing of gantt…

… blocks
  • Loading branch information...
1 parent 747aded commit 47b2c8a327d0e2eb6f78cb46a60702819b69679e @thegrubbsian committed Aug 12, 2010
Showing with 511 additions and 8 deletions.
  1. +5 −1 example/index.html
  2. +44 −7 jquery.ganttView.js
  3. +316 −0 lib/jquery-ui-1.8.4.css
  4. +146 −0 lib/jquery-ui-1.8.4.js
View
@@ -3,6 +3,7 @@
<html lang="en">
<head>
+ <link rel="stylesheet" type="text/css" href="../lib/jquery-ui-1.8.4.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="../jquery.ganttView.css" />
<style type="text/css">
@@ -20,6 +21,7 @@
<script type="text/javascript" src="../lib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../lib/date.js"></script>
+ <script type="text/javascript" src="../lib/jquery-ui-1.8.4.js"></script>
<script type="text/javascript" src="../jquery.ganttView.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
@@ -29,7 +31,9 @@
start: new Date(2010,00,01),
end: new Date(2010,04,15),
slideWidth: 900,
- blockClick: function (data) { alert("You clicked a block!"); }
+ behavior: {
+ onClick: function (data) { alert("You clicked a block!"); },
+ }
});
});
</script>
View
@@ -14,7 +14,14 @@ end: date
cellWidth: number
cellHeight: number
slideWidth: number
-blockClick: function
+behavior: {
+ clickable: boolean,
+ draggable: boolean,
+ resizable: boolean,
+ onClick: function,
+ onDrag: function,
+ onResize: function
+}
*/
(function (jQuery) {
@@ -27,9 +34,16 @@ blockClick: function
cellHeight: 31,
slideWidth: 400,
vHeaderWidth: 100,
- blockClick: null
+ behavior: {
+ clickable: true,
+ draggable: true,
+ resizable: true,
+ onClick: null,
+ onDrag: null,
+ onResize: null
+ }
};
- var opts = jQuery.extend(defaults, options);
+ var opts = jQuery.extend(true, defaults, options);
var months = Chart.getMonths(opts.start, opts.end);
els.each(function () {
@@ -58,13 +72,16 @@ blockClick: function
Chart.applyLastClass(container);
- Events.bindBlockClick(container, opts.blockClick);
+ if (opts.behavior.clickable) { Behavior.bindBlockClick(container, opts.behavior.onClick); }
+ if (opts.behavior.resizable) { Behavior.bindBlockResize(container, opts.cellWidth, opts.cellHeight, opts.behavior.onResize); }
+ if (opts.behavior.draggable) { Behavior.bindBlockDrag(container, opts.cellWidth, opts.behavior.onDrag); }
});
};
var Chart = {
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+ dayNames: ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
getMonths: function (start, end) {
start = Date.parse(start); end = Date.parse(end);
@@ -200,12 +217,32 @@ blockClick: function
};
- var Events = {
-
+ var Behavior = {
bindBlockClick: function (div, callback) {
- $("div.ganttview-block").live("click", function () {
+ $("div.ganttview-block", div).live("click", function () {
if (callback) { callback($(this).data("block-data")); }
});
+ },
+ bindBlockResize: function (div, cellWidth, cellHeight, callback) {
+ $("div.ganttview-block", div).resizable({
+ grid: cellWidth,
+ maxHeight: cellHeight,
+ stop: function () {
+ // 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")); }
+ }
+ });
+ },
+ bindBlockDrag: function (div, cellWidth, callback) {
+ $("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")); }
+ }
+ });
}
};
Oops, something went wrong.

0 comments on commit 47b2c8a

Please sign in to comment.