Skip to content

Commit bbef782

Browse files
sbstjnsbstjn
committed
Working RC
1 parent 5a7c939 commit bbef782

File tree

5 files changed

+103
-37
lines changed

5 files changed

+103
-37
lines changed

‎source/index.haml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
#box
22
#box-inner
3-
#timeline
3+
#timesheet

‎source/javascripts/main.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
//= require_tree .
22

3-
/* global Lib, Timeline */
3+
/* global Lib, Timesheet */
44

55
(function(){
66
'use strict';
77

88
Lib.ready(function() {
99
/* jshint -W031 */
10-
new Timeline('timeline', [
10+
new Timesheet('timesheet', [
11+
['2002', 'Lorem ipsum dolor sit amet #1', 'lorem'],
12+
['05/2002', 'Lorem ipsum dolor sit amet #1', 'lorem'],
13+
['05/2002', '2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
14+
['2002', '04/2002', 'Lorem ipsum dolor sit amet #1', 'lorem'],
15+
['2002', '2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
16+
['2002', '01/2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
17+
['2002', '02/2003', 'Lorem ipsum dolor sit amet #1', 'lorem'],
18+
['2002', '2004', 'Lorem ipsum dolor sit amet #1', 'lorem'],
1119
['2002', '05/2007', 'Lorem ipsum dolor sit amet #1', 'lorem'],
1220
['2002', '06/2006', 'Lorem ipsum dolor sit amet #2', 'lorem'],
13-
['05/2004', '07/2004', 'Lorem ipsum dolor sit amet #3', 'ipsum'],
21+
['01/2005', '07/2006', 'Lorem ipsum dolor sit amet #3', 'ipsum'],
1422
['06/2007', 'Lorem ipsum dolor sit amet #4'],
1523
['11/2007', '03/2009', 'Lorem ipsum dolor sit amet #5', 'dolor'],
1624
['07/2008', '07/2009', 'Lorem ipsum dolor sit amet #6', 'lorem'],
17-
['01/2009', '03/2012', 'Lorem ipsum dolor sit amet #7', 'sit'],
25+
['02/2009', '012/2009', 'Lorem ipsum dolor sit amet #7', 'sit'],
1826
['2010', '10/2011', 'Lorem ipsum dolor sit amet #8', 'ipsum']
1927
]);
2028

‎source/javascripts/timesheet.bubble.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(function() {
2+
'use strict';
3+
4+
var Bubble = function(wMonth, min, start, end) {
5+
this.min = min;
6+
this.start = start;
7+
this.end = end;
8+
this.widthMonth = wMonth;
9+
};
10+
11+
Bubble.prototype.formatMonth = function(num) {
12+
num = parseInt(num, 10);
13+
14+
return num >= 10 ? num : '0' + num;
15+
};
16+
17+
Bubble.prototype.getStartOffset = function() {
18+
return (this.widthMonth/12) * (12 * (this.start.getFullYear() - this.min) + this.start.getMonth());
19+
};
20+
21+
Bubble.prototype.getFullYears = function() {
22+
return ((this.end && this.end.getFullYear()) || this.start.getFullYear()) - this.start.getFullYear();
23+
};
24+
25+
Bubble.prototype.getMonths = function() {
26+
var fullYears = this.getFullYears();
27+
var months = 0;
28+
29+
if (!this.end) {
30+
months += !this.start.hasMonth ? 12 : 1;
31+
} else {
32+
if (!this.end.hasMonth) {
33+
months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
34+
months += 12 * (fullYears-1 > 0 ? fullYears-1 : 0);
35+
} else {
36+
months += this.end.getMonth() + 1;
37+
months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
38+
months += 12 *(fullYears-1 > 0 ? fullYears-1 : 0);
39+
}
40+
}
41+
42+
return months;
43+
};
44+
45+
Bubble.prototype.getWidth = function() {
46+
return (this.widthMonth/12) * this.getMonths();
47+
};
48+
49+
Bubble.prototype.getDateLabel = function() {
50+
return [
51+
(this.start.hasMonth ? this.formatMonth(this.start.getMonth() + 1) + '/' : '' ) + this.start.getFullYear(),
52+
(this.end ? '-' + ((this.end.hasMonth ? this.formatMonth(this.end.getMonth() + 1) + '/' : '' ) + this.end.getFullYear()) : '')
53+
].join('');
54+
};
55+
56+
window.TimesheetBubble = Bubble;
57+
})();

‎source/javascripts/timesheet.js

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
// require 'timesheet.bubble'
2+
3+
/* global TimesheetBubble */
4+
15
(function() {
26
'use strict';
37

4-
var Timeline = function(container, data) {
8+
var Timesheet = function(container, data) {
59
this.container = '#' + container;
610
this.data = [];
711
this.year = {
@@ -14,28 +18,18 @@
1418
this.insertData();
1519
};
1620

17-
Timeline.prototype.formatMonth = function(num) {
18-
num = parseInt(num, 10);
19-
20-
return num >= 10 ? num : '0' + num;
21-
};
22-
23-
Timeline.prototype.insertData = function() {
24-
// document.querySelector(this.container).innerHTML += this.data.join('');
21+
Timesheet.prototype.insertData = function() {
2522
var html = [];
23+
var widthMonth = document.querySelector(this.container + ' .scale section').offsetWidth;
2624

2725
for (var n = 0, m = this.data.length; n < m; n++) {
2826
var cur = this.data[n];
27+
var bubble = new TimesheetBubble(widthMonth, this.year.min, cur.start, cur.end);
2928

3029
var line = [
31-
'<span class="bubble bubble-' + (cur.type || 'default') + '" data-duration="' + (cur.end ? Math.round((cur.end-cur.start)/1000/60/60/24/39) : '') + '"></span>',
32-
'<span class="date">',
33-
(cur.start.hasMonth ? this.formatMonth(cur.start.getMonth() + 1) + '/' : '' ) + cur.start.getFullYear(),
34-
(cur.end ? '-' + ((cur.end.hasMonth ? this.formatMonth(cur.end.getMonth() + 1) + '/' : '' ) + cur.end.getFullYear()) : ''),
35-
'</span> ',
36-
'<span class="label">',
37-
cur.label,
38-
'</span>'
30+
'<span style="margin-left: ' + bubble.getStartOffset() + 'px; width: ' + bubble.getWidth() + 'px;" class="bubble bubble-' + (cur.type || 'default') + '" data-duration="' + (cur.end ? Math.round((cur.end-cur.start)/1000/60/60/24/39) : '') + '"></span>',
31+
'<span class="date">' + bubble.getDateLabel() + '</span> ',
32+
'<span class="label">' + cur.label + '</span>'
3933
].join('');
4034

4135
html.push('<li>' + line + '</li>');
@@ -44,18 +38,18 @@
4438
document.querySelector(this.container).innerHTML += '<ul class="data">' + html.join('') + '</ul>';
4539
};
4640

47-
Timeline.prototype.drawSections = function() {
41+
Timesheet.prototype.drawSections = function() {
4842
var html = [];
4943

5044
for (var c = this.year.min; c <= this.year.max; c++) {
5145
html.push('<section>' + c + '</section>');
5246
}
5347

54-
document.querySelector(this.container).className = 'timeline';
48+
document.querySelector(this.container).className = 'timesheet';
5549
document.querySelector(this.container).innerHTML = '<div class="scale">' + html.join('') + '</div>';
5650
};
5751

58-
Timeline.prototype.parseDate = function(date) {
52+
Timesheet.prototype.parseDate = function(date) {
5953
if (date.indexOf('/') === -1) {
6054
date = new Date(parseInt(date, 10), 0, 1);
6155
date.hasMonth = false;
@@ -68,7 +62,7 @@
6862
return date;
6963
};
7064

71-
Timeline.prototype.parse = function(data) {
65+
Timesheet.prototype.parse = function(data) {
7266
for (var n = 0, m = data.length; n<m; n++) {
7367
var beg = this.parseDate(data[n][0]);
7468
var end = data[n].length === 4 ? this.parseDate(data[n][1]) : null;
@@ -89,5 +83,5 @@
8983
}
9084
};
9185

92-
window.Timeline = Timeline;
86+
window.Timesheet = Timesheet;
9387
})();

‎source/stylesheets/all.css.sass

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ html, body
2121
text-align: center
2222
vertical-align: middle
2323

24-
#timeline
24+
#timesheet
2525
width: 800px
2626
height: 600px
2727
margin: 0 auto
2828

29-
.timeline
29+
.timesheet
3030
border-top: 1px solid rgba(250, 250, 250, 0.5)
3131
background-color: rgba(51, 51, 51, 1)
3232
position: relative
@@ -40,7 +40,7 @@ html, body
4040

4141
section
4242
float: left
43-
width: 50px
43+
width: 59px
4444
text-align: center
4545
color: rgba(250, 250, 250, 0.8)
4646
font-family: 'Signika Negative'
@@ -64,25 +64,32 @@ html, body
6464
overflow: hidden
6565

6666
li
67-
background-color: rgba(251, 251, 251, 0.1)
68-
margin: 0 0 3px -3px
69-
line-height: 21px
67+
// background-color: rgba(251, 251, 251, 0.1)
68+
margin: 0 0 3px 0
69+
line-height: 22px
7070
height: 21px
7171
display: block
7272
cursor: pointer
7373
clear: both
7474
position: relative
75+
white-space: nowrap
7576

7677
&:hover
7778
// background-color: rgba(251, 251, 251, 0.1)
7879
.bubble
7980
opacity: 1
8081

81-
.data
82-
font-weight: bold
82+
.date
83+
color: rgba(181, 181, 181, 1)
84+
font-size: 14px
85+
8386
.label
8487
font-weight: lighter
85-
font-size: 12px
88+
font-size: 14px
89+
padding-left: 5px
90+
line-height: 21px
91+
color: rgba(151, 151, 150, 1)
92+
white-space: nowrap
8693

8794
.bubble
8895
width: 24px
@@ -92,7 +99,7 @@ html, body
9299
float: left
93100
position: relative
94101
top: 7px
95-
border-radius: 3px
102+
border-radius: 4px
96103
margin: 0 10px 0 0
97104
opacity: 0.7
98105

0 commit comments

Comments
 (0)