Skip to content

Commit a15c1d1

Browse files
objectivehtmlobjectivehtml
committed
- (Refactor) Refactored the clock faces for leaky abstractions
- (Feature) Added ability to set the TwelveHourClock and TwentyFourHourClock faces to be able to use a custom date object passed upon instantiation or set after instantiation
1 parent a5ebd35 commit a15c1d1

5 files changed

Lines changed: 58 additions & 108 deletions

File tree

‎src/flipclock/js/faces/dailycounter.js‎

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -31,39 +31,32 @@
3131
* Build the clock face
3232
*/
3333

34-
build: function(excludeHours, time) {
35-
var t = this;
34+
build: function(time) {
35+
var t = this;
3636
var children = this.factory.$el.find('ul');
37-
var lists = [];
38-
var offset = 0;
37+
var offset = 0;
3938

40-
time = time ? time : this.factory.time.getDayCounter(this.showSeconds);
39+
time = time ? time : this.factory.time.getDayCounter(this.showSeconds);
4140

4241
if(time.length > children.length) {
4342
$.each(time, function(i, digit) {
44-
lists.push(t.createList(digit));
43+
t.createList(digit);
4544
});
4645
}
4746

48-
this.factory.lists = lists;
49-
5047
if(this.showSeconds) {
51-
$(this.createDivider('Seconds')).insertBefore(this.factory.lists[this.factory.lists.length - 2].$el);
48+
$(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
5249
}
5350
else
5451
{
5552
offset = 2;
5653
}
5754

58-
$(this.createDivider('Minutes')).insertBefore(this.factory.lists[this.factory.lists.length - 4 + offset].$el);
59-
$(this.createDivider('Hours')).insertBefore(this.factory.lists[this.factory.lists.length - 6 + offset].$el);
60-
$(this.createDivider('Days', true)).insertBefore(this.factory.lists[0].$el);
61-
62-
// this._clearExcessDigits();
55+
$(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4 + offset].$el);
56+
$(this.createDivider('Hours')).insertBefore(this.lists[this.lists.length - 6 + offset].$el);
57+
$(this.createDivider('Days', true)).insertBefore(this.lists[0].$el);
6358

64-
if(this.autoStart) {
65-
this.start();
66-
}
59+
this.base();
6760
},
6861

6962
/**
@@ -80,22 +73,6 @@
8073
this.base(time, doNotAddPlayClass);
8174
}
8275

83-
/**
84-
* Clear the excess digits from the tens columns for sec/min
85-
*/
86-
87-
/*
88-
_clearExcessDigits: function() {
89-
var tenSeconds = this.factory.lists[this.factory.lists.length - 2];
90-
var tenMinutes = this.factory.lists[this.factory.lists.length - 4];
91-
92-
for(var x = 6; x < 10; x++) {
93-
tenSeconds.$el.find('li:last-child').remove();
94-
tenMinutes.$el.find('li:last-child').remove();
95-
}
96-
}
97-
*/
98-
9976
});
10077

10178
}(jQuery));

‎src/flipclock/js/faces/hourlycounter.js‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,36 +32,25 @@
3232
*/
3333

3434
build: function(excludeHours, time) {
35-
var t = this;
35+
var t = this;
3636
var children = this.factory.$el.find('ul');
37-
var lists = [];
3837

39-
time = time ? time : this.factory.time.getHourCounter();
38+
time = time ? time : this.factory.time.getHourCounter();
4039

4140
if(time.length > children.length) {
4241
$.each(time, function(i, digit) {
43-
lists.push(t.createList(digit));
42+
t.createList(digit);
4443
});
4544
}
4645

47-
this.factory.lists = lists;
48-
49-
$(this.createDivider('Seconds')).insertBefore(this.factory.lists[this.factory.lists.length - 2].$el);
50-
$(this.createDivider('Minutes')).insertBefore(this.factory.lists[this.factory.lists.length - 4].$el);
46+
$(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
47+
$(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4].$el);
5148

5249
if(!excludeHours) {
53-
$(this.createDivider('Hours', true)).insertBefore(this.factory.lists[0].$el);
54-
}
55-
56-
/*
57-
if(this.clearExcessDigits) {
58-
this._clearExcessDigits();
50+
$(this.createDivider('Hours', true)).insertBefore(this.lists[0].$el);
5951
}
60-
*/
6152

62-
if(this.autoStart) {
63-
this.start();
64-
}
53+
this.base();
6554
},
6655

6756
/**

‎src/flipclock/js/faces/minutecounter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
*/
1313

1414
FlipClock.MinuteCounterFace = FlipClock.HourlyCounterFace.extend({
15-
15+
1616
clearExcessDigits: false,
1717

1818
/**

‎src/flipclock/js/faces/twelvehourclock.js‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929
* @param object Pass the time that should be used to display on the clock.
3030
*/
3131

32-
build: function(time) {
33-
var t = this;
34-
35-
time = time ? time : (this.factory.time.time ? this.factory.time.time : this.factory.time.getTime());
36-
32+
build: function() {
33+
var t = this;
34+
35+
var time = this.factory.time.getTime();
36+
3737
this.base(time);
38-
this.meridiumText = this._isPM() ? 'PM' : 'AM';
38+
this.meridiumText = this.getMeridium();
3939
this.meridium = $([
4040
'<ul class="flip-clock-meridium">',
4141
'<li>',
@@ -44,16 +44,16 @@
4444
'</ul>'
4545
].join(''));
4646

47-
this.meridium.insertAfter(this.factory.lists[this.factory.lists.length-1].$el);
47+
this.meridium.insertAfter(this.lists[this.lists.length-1].$el);
4848
},
4949

5050
/**
5151
* Flip the clock face
5252
*/
5353

5454
flip: function(time, doNotAddPlayClass) {
55-
if(this.meridiumText != this._getMeridium()) {
56-
this.meridiumText = this._getMeridium();
55+
if(this.meridiumText != this.getMeridium()) {
56+
this.meridiumText = this.getMeridium();
5757
this.meridium.find('a').html(this.meridiumText);
5858
}
5959
this.base(this.factory.time.getTime(), doNotAddPlayClass);
@@ -65,7 +65,7 @@
6565
* @return string Returns the meridium (AM|PM)
6666
*/
6767

68-
_getMeridium: function() {
68+
getMeridium: function() {
6969
return new Date().getHours() >= 12 ? 'PM' : 'AM';
7070
},
7171

@@ -75,25 +75,19 @@
7575
* @return bool Returns true or false
7676
*/
7777

78-
_isPM: function() {
79-
return this._getMeridium() == 'PM' ? true : false;
80-
}
81-
78+
isPM: function() {
79+
return this.getMeridium() == 'PM' ? true : false;
80+
},
81+
8282
/**
83-
* Clear the excess digits from the tens columns for sec/min
83+
* Is it currently before the post-medirium?
84+
*
85+
* @return bool Returns true or false
8486
*/
8587

86-
/*
87-
_clearExcessDigits: function() {
88-
var tenSeconds = this.factory.lists[this.factory.lists.length - 2];
89-
var tenMinutes = this.factory.lists[this.factory.lists.length - 4];
90-
91-
for(var x = 6; x < 10; x++) {
92-
tenSeconds.$el.find('li:last-child').remove();
93-
tenMinutes.$el.find('li:last-child').remove();
94-
}
88+
isAM: function() {
89+
return this.getMeridium() == 'AM' ? true : false;
9590
}
96-
*/
9791

9892
});
9993

‎src/flipclock/js/faces/twentyfourhourclock.js‎

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
*/
2020

2121
constructor: function(factory, options) {
22-
factory.countdown = false;
2322
this.base(factory, options);
2423
},
2524

@@ -29,56 +28,47 @@
2928
* @param object Pass the time that should be used to display on the clock.
3029
*/
3130

32-
build: function(time) {
31+
build: function() {
3332
var t = this;
3433
var children = this.factory.$el.find('ul');
3534

36-
time = time ? time : (this.factory.time.time || this.factory.time.getMilitaryTime());
37-
35+
if(!this.factory.time.time) {
36+
this.factory.original = new Date();
37+
38+
this.factory.time = new FlipClock.Time(this.factory, this.factory.original, {
39+
minimumDigits: this.factory.time.minimumDigits ? this.factory.time.minimumDigits : 0,
40+
animationRate: this.factory.time.animationRate ? this.factory.time.animationRate : 1000
41+
});
42+
}
43+
44+
var time = this.factory.time.getMilitaryTime();
45+
3846
if(time.length > children.length) {
3947
$.each(time, function(i, digit) {
40-
t.factory.lists.push(t.createList(digit));
48+
t.createList(digit);
4149
});
4250
}
4351

44-
this.dividers.push(this.createDivider());
45-
this.dividers.push(this.createDivider());
46-
47-
$(this.dividers[0]).insertBefore(this.factory.lists[this.factory.lists.length - 2].$el);
48-
$(this.dividers[1]).insertBefore(this.factory.lists[this.factory.lists.length - 4].$el);
49-
50-
// this._clearExcessDigits();
52+
this.createDivider();
53+
this.createDivider();
54+
55+
$(this.dividers[0]).insertBefore(this.lists[this.lists.length - 2].$el);
56+
$(this.dividers[1]).insertBefore(this.lists[this.lists.length - 4].$el);
5157

52-
if(this.autoStart) {
53-
this.start();
54-
}
58+
this.base();
5559
},
5660

5761
/**
5862
* Flip the clock face
5963
*/
6064

6165
flip: function(time, doNotAddPlayClass) {
66+
this.autoIncrement();
67+
6268
time = time ? time : this.factory.time.getMilitaryTime();
6369

6470
this.base(time, doNotAddPlayClass);
6571
}
66-
67-
/**
68-
* Clear the excess digits from the tens columns for sec/min
69-
*/
70-
71-
/*
72-
_clearExcessDigits: function() {
73-
var tenSeconds = this.factory.lists[this.factory.lists.length - 2];
74-
var tenMinutes = this.factory.lists[this.factory.lists.length - 4];
75-
76-
for(var x = 6; x < 10; x++) {
77-
tenSeconds.$el.find('li:last-child').remove();
78-
tenMinutes.$el.find('li:last-child').remove();
79-
}
80-
}
81-
*/
8272

8373
});
8474

0 commit comments

Comments
 (0)