Skip to content

Commit 0911469

Browse files
smiller393smiller393
committed
Have event accuracy change mostly working in Test02
Working on the remake of.. taitems#117
1 parent bb8b70b commit 0911469

File tree

4 files changed

+142
-12
lines changed

4 files changed

+142
-12
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
.DS_Store
2+
.idea/
3+
*.iml

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ <h2>
436436
</div>
437437

438438
<script src="js/jquery.min.js"></script>
439-
<script src="js/jquery.fn.gantt.min2.js"></script>
439+
<script src="js/jquery.fn.gantt.js"></script>
440440
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
441441
<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
442442
<script>

‎js/jquery.fn.gantt.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
onAddClick: function (data) { return; },
4848
onRender: function() { return; },
4949
onDataLoadFailed: function(data) { return; },
50-
scrollToToday: true
50+
scrollToToday: true,
51+
showFractionalHours: true
5152
};
5253

5354
/**
@@ -501,7 +502,7 @@
501502

502503
var day_class2 = (today - day === 0) ? ' today' : (holidays.indexOf(getTime) > -1) ? "holiday" : dowClass[getDay];
503504

504-
dayArr.push('<div class="row date ' + day_class2 + '" '
505+
dayArr.push('<div class="row date dh ' + day_class2 + '" '
505506
+ ' style="width: ' + tools.getCellSize() * hoursInDay + 'px;"> '
506507
+ ' <div class="fn-label">' + day.getDate() + '</div></div>');
507508
dowArr.push('<div class="row day ' + day_class2 + '" '
@@ -513,7 +514,7 @@
513514
}
514515
hoursInDay++;
515516

516-
horArr.push('<div class="row day '
517+
horArr.push('<div class="row day dh '
517518
+ day_class
518519
+ '" id="dh-'
519520
+ rday.getTime()
@@ -541,7 +542,7 @@
541542
day_class = "holiday";
542543
}
543544

544-
dayArr.push('<div class="row date ' + day_class + '" '
545+
dayArr.push('<div class="row date dh" ' + day_class + '" '
545546
+ ' style="width: ' + tools.getCellSize() * hoursInDay + 'px;"> '
546547
+ ' <div class="fn-label">' + day.getDate() + '</div></div>');
547548

@@ -649,7 +650,7 @@
649650
daysInYear = 0;
650651
}
651652
daysInYear++;
652-
monthArr.push('<div class="row day wd" id="dh-' + tools.genId(rday.getTime()) + '" offset="' + i * tools.getCellSize() + '" repdate="' + rday.getRepDate() + '">' + (1 + rday.getMonth()) + '</div>');
653+
monthArr.push('<div class="row day wd dh" id="dh-' + tools.genId(rday.getTime()) + '" offset="' + i * tools.getCellSize() + '" repdate="' + rday.getRepDate() + '">' + (1 + rday.getMonth()) + '</div>');
653654
}
654655

655656

@@ -1034,21 +1035,29 @@
10341035
switch (settings.scale) {
10351036
// **Hourly data**
10361037
case "hours":
1038+
// In fractional hour aware charts, this determines the pixel delta of d_from and d_to relative to the hour tick-mark
1039+
var pixelOffsetFactor = tools.getCellSize() / (3600000.0*element.scaleStep);
1040+
10371041
var dFrom = tools.genId(tools.dateDeserialize(day.from).getTime(), element.scaleStep);
1042+
var dFromDelta = settings.showFractionalHours ?
1043+
(tools.dateDeserialize(day.from).getTime() - dFrom) * pixelOffsetFactor :
1044+
0;
10381045
var from = $(element).find('#dh-' + dFrom);
10391046

10401047
var dTo = tools.genId(tools.dateDeserialize(day.to).getTime(), element.scaleStep);
1048+
var dToDelta = settings.showFractionalHours ?
1049+
(tools.dateDeserialize(day.to).getTime() - dTo) * pixelOffsetFactor :
1050+
0;
10411051
var to = $(element).find('#dh-' + dTo);
10421052

10431053
console.log(dFrom, dTo);
10441054

1045-
var cFrom = from.attr("offset");
1046-
var cTo = to.attr("offset");
1055+
var cFrom = parseInt(from.attr("offset")) + dFromDelta;
1056+
var cTo = parseInt(to.attr("offset")) + dToDelta;
10471057
var dl = Math.floor((cTo - cFrom) / tools.getCellSize()) + 1;
10481058

10491059
_bar = core.createProgressBar(
10501060
dl,
1051-
day.id ? day.id : "",
10521061
day.customClass ? day.customClass : "",
10531062
day.desc ? day.desc : "",
10541063
day.label ? day.label : "",
@@ -1092,7 +1101,6 @@
10921101

10931102
_bar = core.createProgressBar(
10941103
dl,
1095-
day.id ? day.id : "",
10961104
day.customClass ? day.customClass : "",
10971105
day.desc ? day.desc : "",
10981106
day.label ? day.label : "",
@@ -1133,7 +1141,6 @@
11331141

11341142
_bar = core.createProgressBar(
11351143
dl,
1136-
day.id ? day.id : "",
11371144
day.customClass ? day.customClass : "",
11381145
day.desc ? day.desc : "",
11391146
day.label ? day.label : "",
@@ -1160,7 +1167,6 @@
11601167
var dl = Math.floor(((dTo / 1000) - (dFrom / 1000)) / 86400) + 1;
11611168
_bar = core.createProgressBar(
11621169
dl,
1163-
day.id ? day.id : "",
11641170
day.customClass ? day.customClass : "",
11651171
day.desc ? day.desc : "",
11661172
day.label ? day.label : "",
@@ -1506,6 +1512,9 @@
15061512
case "hours":
15071513
minDate.setHours(Math.floor((minDate.getHours()) / element.scaleStep) * element.scaleStep);
15081514
minDate.setHours(minDate.getHours() - element.scaleStep * 3);
1515+
minDate.setMinutes(0);
1516+
minDate.setSeconds(0);
1517+
minDate.setMilliseconds(0);
15091518
break;
15101519
case "weeks":
15111520
var bd = new Date(minDate.getTime());
@@ -1640,6 +1649,8 @@
16401649
},
16411650

16421651
// Generate an id for a date
1652+
// Using the value for the current scale (zoom level) "arguments[1]", the start/end columns are determined by tructating the given time
1653+
// down to beginning of the proper column
16431654
genId: function (ticks) {
16441655
var t = new Date(ticks);
16451656
switch (settings.scale) {

‎tests/test02.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!doctype html>
2+
<html lang="en-au">
3+
<head>
4+
<title>jQuery.Gantt - Test Suite 02</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
7+
<link rel="stylesheet" href="../css/style.css" />
8+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
10+
<style type="text/css">
11+
body {
12+
font-family: Helvetica, Arial, sans-serif;
13+
font-size: 13px;
14+
padding: 0 0 50px 0;
15+
}
16+
.contain {
17+
width: 800px;
18+
margin: 0 auto;
19+
}
20+
h1 {
21+
margin: 40px 0 20px 0;
22+
}
23+
h2 {
24+
font-size: 1.5em;
25+
padding-bottom: 3px;
26+
border-bottom: 1px solid #DDD;
27+
margin-top: 50px;
28+
margin-bottom: 25px;
29+
}
30+
table th:first-child {
31+
width: 150px;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
37+
<div class="contain">
38+
39+
<h1>
40+
jQuery.Gantt
41+
<small>&mdash; Test Suite 02</small>
42+
</h1>
43+
44+
<p>
45+
<strong>Expected behaviour:</strong> Gantt bar should run from "now" until 2 hours 20 minutes from now. Both bars should be offset from the hour mark according to the number of minutes past. It fails when all the bars are docked left at the hour view.
46+
</p>
47+
48+
<p>
49+
<strong>Manual validation:</strong>
50+
<ul>
51+
<li>Passing</li>
52+
</ul>
53+
</p>
54+
55+
<div class="gantt"></div>
56+
57+
58+
</body>
59+
<script src="../js/jquery.min.js"></script>
60+
<script src="../js/jquery.fn.gantt.js"></script>
61+
<script src="../tests/moment.min.js"></script>
62+
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
63+
<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
64+
<script>
65+
66+
$(function() {
67+
68+
"use strict";
69+
70+
var today = moment();
71+
var andTwoHoursTwenty = moment();
72+
73+
var today2 = moment().add("hours",3);
74+
var andTwoHoursTwenty2 = moment().add("hours",4);;
75+
76+
var today_friendly = "/Date(" + today.valueOf() + ")/";
77+
var next_friendly = "/Date(" + andTwoHoursTwenty.valueOf() + ")/";
78+
79+
var today_friendly2 = "/Date(" + today2.valueOf() + ")/";
80+
var next_friendly2 = "/Date(" + andTwoHoursTwenty2.valueOf() + ")/";
81+
82+
$(".gantt").gantt({
83+
source: [{
84+
name: "Testing",
85+
desc: " ",
86+
values: [{
87+
from: today_friendly,
88+
to: next_friendly,
89+
label: "Test",
90+
desc: "TEST POP!",
91+
customClass: "ganttGreen"
92+
},
93+
{
94+
from: today_friendly2,
95+
to: next_friendly2,
96+
label: "Test",
97+
desc: "TEST POP!",
98+
customClass: "ganttOrange"
99+
}]
100+
}],
101+
scale: "hours",
102+
minScale: "hours",
103+
navigate: "scroll",
104+
showFractionalHours: true
105+
});
106+
107+
$(".gantt").popover({
108+
selector: ".bar",
109+
title: "I'm a popover",
110+
content: "And I'm the content of said popover.",
111+
trigger: "hover"
112+
});
113+
114+
});
115+
116+
</script>
117+
</html>

0 commit comments

Comments
 (0)