Skip to content

Commit 2286d35

Browse files
objectivehtmlobjectivehtml
committed
Updates
- (Bug Fix) Fixed an issue with the HourlyCounter and MinuteCounter faces not working properly when new digits are added - (Refactor) Add new `appendDigitToClock` to clock method to the `FlipClock.Face` class that will append the new digits to the DOM. This method can be inherted by the class face to change the default behavior
1 parent a7a4862 commit 2286d35

10 files changed

Lines changed: 92 additions & 238 deletions

File tree

‎CHANGE LOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# FlipClock.js
22

3+
#### 0.6.2
4+
##### 9/1/2014
5+
6+
- (Bug Fix) Fixed an issue with the HourlyCounter and MinuteCounter faces not working properly when new digits are added
7+
- (Refactor) Add new `appendDigitToClock` to clock method to the `FlipClock.Face` class that will append the new digits to the DOM. This method can be inherted by the class face to change the default behavior
8+
39
#### 0.6.1
410
##### 8/8/2014
511

‎compiled/flipclock.js‎

Lines changed: 26 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,11 @@ var FlipClock;
405405
'</span>'
406406
];
407407

408-
return $(html.join(''));
408+
var $html = $(html.join(''));
409+
410+
this.dividers.push($html);
411+
412+
return $html;
409413
},
410414

411415
/**
@@ -441,16 +445,15 @@ var FlipClock;
441445
},
442446

443447
/**
444-
* Sets the clock time (deprecated, duplicate method)
445-
*
448+
* Append a newly created list to the clock
449+
*/
446450

447-
setTime: function(time) {
448-
this.flip();
451+
appendDigitToClock: function(obj) {
452+
obj.$el.append(false);
449453
},
450-
*/
451-
454+
452455
/**
453-
* Sets the clock time
456+
* Add a digit to the clock face
454457
*/
455458

456459
addDigit: function(digit) {
@@ -461,10 +464,8 @@ var FlipClock;
461464
flip: this.factory.classes.flip
462465
}
463466
});
464-
465-
obj.$el.append(this.factory.lists[this.factory.lists.length - 1].$obj);
466-
467-
//this.factory.lists.unshift(obj);
467+
468+
this.appendDigitToClock(obj);
468469
},
469470

470471
/**
@@ -522,17 +523,6 @@ var FlipClock;
522523
flip: function(time, doNotAddPlayClass) {
523524
var t = this;
524525

525-
/*
526-
if (!(this.factory.time.time instanceof Date)) {
527-
if(!this.factory.countdown) {
528-
this.increment();
529-
}
530-
else {
531-
this.decrement();
532-
}
533-
}
534-
*/
535-
536526
$.each(time, function(i, digit) {
537527
var list = t.lists[i];
538528

@@ -547,42 +537,6 @@ var FlipClock;
547537
t.addDigit(digit);
548538
}
549539
});
550-
551-
/*
552-
DELETE PENDING - Legacy flip code that was replaced with the
553-
much more simple logic above.
554-
555-
var offset = t.factory.lists.length - time.length;
556-
557-
if(offset < 0) {
558-
offset = 0;
559-
}
560-
561-
$.each(time, function(i, digit) {
562-
i += offset;
563-
564-
var list = t.factory.lists[i];
565-
566-
console.log()
567-
568-
if(list) {
569-
list.select(digit);
570-
571-
if(!doNotAddPlayClass) {
572-
list.play();
573-
}
574-
}
575-
else {
576-
t.addDigit(digit);
577-
}
578-
});
579-
580-
for(var x = 0; x < time.length; x++) {
581-
if(x >= offset && t.factory.lists[x].digit != time[x]) {
582-
t.factory.lists[x].select(time[x]);
583-
}
584-
}
585-
*/
586540
}
587541

588542
});
@@ -938,7 +892,7 @@ var FlipClock;
938892
*
939893
* @param array An array of digits
940894
*/
941-
flip: function(doNotAddPlayClass) {
895+
flip: function(doNotAddPlayClass) {
942896
this.face.flip(false, doNotAddPlayClass);
943897
}
944898

@@ -1036,7 +990,7 @@ var FlipClock;
1036990
this.$el = this.createList();
1037991

1038992
// Depcrated support of the $obj property.
1039-
this.$wrapper = this.$el;
993+
this.$obj = this.$el;
1040994

1041995
if(digit > 0) {
1042996
this.select(digit);
@@ -1161,33 +1115,7 @@ var FlipClock;
11611115
this.createListItem(this.classes.active, this.digit),
11621116
'</ul>'
11631117
].join(''));
1164-
1165-
/*
1166-
DELETE PENDING - Replace with the more simple logic above.
1167-
This should reduce the load on the some GPU's by having
1168-
signifantly fewing DOM nodes in memory.
1169-
1170-
for(var x = 0; x < 2; x++) {
1171-
var item = $([
1172-
'<li data-digit="'+x+'">',
1173-
'<a href="#">',
1174-
'<div class="up">',
1175-
'<div class="shadow"></div>',
1176-
'<div class="inn">'+x+'</div>',
1177-
'</div>',
1178-
'<div class="down">',
1179-
'<div class="shadow"></div>',
1180-
'<div class="inn">'+x+'</div>',
1181-
'</div>',
1182-
'</a>',
1183-
'</li>'].join(''));
1184-
1185-
this.items.push(item);
1186-
1187-
html.append(item);
1188-
}
1189-
*/
1190-
1118+
11911119
return html;
11921120
},
11931121

@@ -1197,20 +1125,7 @@ var FlipClock;
11971125

11981126
getPrevDigit: function() {
11991127
return this.digit == 0 ? 9 : this.digit - 1;
1200-
},
1201-
1202-
/*
1203-
setActiveDigit: function(digit) {
1204-
var $obj = this.$el.find('.'+this.classes.active);
1205-
1206-
$obj.find('.inn').html(digit);
1207-
$obj.removeClass(this.classes.active).addClass(this.classes.active);
1208-
},
1209-
1210-
setActiveDigit: function(digit) {
1211-
this.$el.find('.'+this.classes.before).find('.inn').html(digit);
12121128
}
1213-
*/
12141129

12151130
});
12161131

@@ -2274,23 +2189,17 @@ var FlipClock;
22742189
this.autoIncrement();
22752190

22762191
this.base(time, doNotAddPlayClass);
2277-
}
2278-
2192+
},
2193+
22792194
/**
2280-
* Clear the excess digits from the tens columns for sec/min
2195+
* Append a newly created list to the clock
22812196
*/
2282-
2283-
/*
2284-
_clearExcessDigits: function() {
2285-
var tenSeconds = this.factory.lists[this.factory.lists.length - 2];
2286-
var tenMinutes = this.factory.lists[this.factory.lists.length - 4];
2287-
2288-
for(var x = 6; x < 10; x++) {
2289-
tenSeconds.$el.find('li:last-child').remove();
2290-
tenMinutes.$el.find('li:last-child').remove();
2291-
}
2197+
2198+
appendDigitToClock: function(obj) {
2199+
this.base(obj);
2200+
2201+
this.dividers[0].insertAfter(this.dividers[0].next());
22922202
}
2293-
*/
22942203

22952204
});
22962205

@@ -2495,8 +2404,8 @@ var FlipClock;
24952404

24962405
/* Create various aliases for convenience */
24972406

2498-
FlipClock.Lang['da'] = FlipClock.Lang.Danish;
2499-
FlipClock.Lang['da-dk'] = FlipClock.Lang.Danish;
2407+
FlipClock.Lang['da'] = FlipClock.Lang.Danish;
2408+
FlipClock.Lang['da-dk'] = FlipClock.Lang.Danish;
25002409
FlipClock.Lang['danish'] = FlipClock.Lang.Danish;
25012410

25022411
}(jQuery));

‎compiled/flipclock.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/base.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,19 @@
1616
$(document).ready(function() {
1717
var clock;
1818

19-
clock = $('.clock').FlipClock(10, {
20-
clockFace: 'MinuteCounter',
21-
countdown: true,
19+
clock = $('.clock').FlipClock({
20+
clockFace: 'DailyCounter',
21+
autoStart: false,
2222
callbacks: {
2323
stop: function() {
2424
$('.message').html('The clock has stopped!')
2525
}
2626
}
2727
});
28+
29+
clock.setTime(220880);
30+
clock.setCountdown(true);
31+
clock.start();
2832

2933
});
3034
</script>

‎examples/minute-counter-overflow.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="../compiled/flipclock.css">
4+
5+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
6+
7+
<script src="../compiled/flipclock.js"></script>
8+
</head>
9+
<body>
10+
<div class="clock" style="margin:2em;"></div>
11+
12+
<script type="text/javascript">
13+
var clock;
14+
15+
$(document).ready(function() {
16+
17+
clock = $('.clock').FlipClock({
18+
clockFace: 'MinuteCounter'
19+
});
20+
21+
clock.setTime(60*100-5);
22+
});
23+
</script>
24+
25+
</body>
26+
</html>

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

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -76,23 +76,17 @@
7676
this.autoIncrement();
7777

7878
this.base(time, doNotAddPlayClass);
79-
}
80-
79+
},
80+
8181
/**
82-
* Clear the excess digits from the tens columns for sec/min
82+
* Append a newly created list to the clock
8383
*/
84-
85-
/*
86-
_clearExcessDigits: function() {
87-
var tenSeconds = this.factory.lists[this.factory.lists.length - 2];
88-
var tenMinutes = this.factory.lists[this.factory.lists.length - 4];
89-
90-
for(var x = 6; x < 10; x++) {
91-
tenSeconds.$el.find('li:last-child').remove();
92-
tenMinutes.$el.find('li:last-child').remove();
93-
}
84+
85+
appendDigitToClock: function(obj) {
86+
this.base(obj);
87+
88+
this.dividers[0].insertAfter(this.dividers[0].next());
9489
}
95-
*/
9690

9791
});
9892

‎src/flipclock/js/lang/da-dk.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020

2121
/* Create various aliases for convenience */
2222

23-
FlipClock.Lang['da'] = FlipClock.Lang.Danish;
24-
FlipClock.Lang['da-dk'] = FlipClock.Lang.Danish;
23+
FlipClock.Lang['da'] = FlipClock.Lang.Danish;
24+
FlipClock.Lang['da-dk'] = FlipClock.Lang.Danish;
2525
FlipClock.Lang['danish'] = FlipClock.Lang.Danish;
2626

2727
}(jQuery));

0 commit comments

Comments
 (0)