Add new options to hide leading zeros for hours, minutes and seconds - …

…Fix #11

README.md

@@ -1,6 +1,8 @@
 # [jQuery Countdown](https://github.com/kemar/jquery.countdown)
 
-Unobtrusive and easily skinable [countdown jQuery plugin](http://kemar.github.io/jquery.countdown/) generating a `<time>` tag.
+Unobtrusive and easily skinable countdown jQuery plugin generating a `<time>` tag.
+
+[Live demo](https://kemar.github.io/jquery.countdown/).
 
 
 ## Supported browsers
@@ -10,7 +12,7 @@ To use the countdown jQuery plugin you need an [up-to-date web browser supportin
 
 ## Installation
 
-Get the plugin from `npm`:
+Get the plugin [from `npm`](https://www.npmjs.com/package/jquery.countdown):
 
 ```sh
 $ npm install jquery.countdown
@@ -103,6 +105,9 @@ $('div, h1, time').countDown();
 - `with_labels`: display or hide labels (default: `true`).
 - `with_seconds`: display or hide seconds (default: `true`).
 - `with_separators`: display or hide separators between days, hours, minutes and seconds (default: `true`).
+- `with_hh_leading_zero`: always display hours in 2 digit format with a leading zero when appropriate (default: `true`).
+- `with_mm_leading_zero`: always display minutes in 2 digit format with a leading zero when appropriate (default: `true`).
+- `with_ss_leading_zero`: always display seconds in 2 digit format with a leading zero when appropriate (default: `true`).
 - `label_dd`: label's text for days (default: `days`).
 - `label_hh`: label's text for hours (default: `hours`).
 - `label_mm`: label's text for minutes (default: `minutes`).

jquery.countdown.js

@@ -98,17 +98,20 @@
     var pluginName = 'countDown';
 
     var defaults = {
-        css_class:        'countdown',
+        css_class: 'countdown',
         always_show_days: false,
-        with_labels:      true,
-        with_seconds:     true,
-        with_separators:  true,
-        label_dd:         'days',
-        label_hh:         'hours',
-        label_mm:         'minutes',
-        label_ss:         'seconds',
-        separator:        ':',
-        separator_days:   ','
+        with_labels: true,
+        with_seconds: true,
+        with_separators: true,
+        with_hh_leading_zero: true,
+        with_mm_leading_zero: true,
+        with_ss_leading_zero: true,
+        label_dd: 'days',
+        label_hh: 'hours',
+        label_mm: 'minutes',
+        label_ss: 'seconds',
+        separator: ':',
+        separator_days: ','
     };
 
     function CountDown(element, options) {
@@ -416,9 +419,15 @@
             }
             // Update display.
             this.displayRemainingTime({
-                'ss': ss < 10 ? '0' + ss.toString() : ss.toString(),
-                'mm': mm < 10 ? '0' + mm.toString() : mm.toString(),
-                'hh': hh < 10 ? '0' + hh.toString() : hh.toString(),
+                'ss': this.options.with_ss_leading_zero ?
+                        (ss < 10 ? '0' + ss.toString() : ss.toString()) :
+                        ss.toString(),
+                'mm': this.options.with_mm_leading_zero ?
+                        (mm < 10 ? '0' + mm.toString() : mm.toString()) :
+                        mm.toString(),
+                'hh': this.options.with_hh_leading_zero ?
+                        (hh < 10 ? '0' + hh.toString() : hh.toString()) :
+                        hh.toString(),
                 'dd': dd.toString()
             });
             // If seconds are hidden, stop the counter as soon as there is no minute left.
@@ -459,11 +468,11 @@
             // Update countdown values.
             this.remaining_dd.text(remaining.dd);
             this.remaining_hh1.text(remaining.hh[0]);
-            this.remaining_hh2.text(remaining.hh[1]);
+            this.remaining_hh2.text(remaining.hh[1] || '');
             this.remaining_mm1.text(remaining.mm[0]);
-            this.remaining_mm2.text(remaining.mm[1]);
+            this.remaining_mm2.text(remaining.mm[1] || '');
             this.remaining_ss1.text(remaining.ss[0]);
-            this.remaining_ss2.text(remaining.ss[1]);
+            this.remaining_ss2.text(remaining.ss[1] || '');
         }
 
     });

test/unit/countdown_options.js

@@ -82,3 +82,40 @@ QUnit.test("Option separators", function (assert) {
     assert.equal(c.find('.separator').eq(2).text(), '-', "Correct separator for hours");
 
 });
+
+QUnit.test("Option with_hh_leading_zero", function (assert) {
+
+    var c = $('<div>09:30:00</div>').countDown({with_hh_leading_zero: true});
+    assert.equal(c.find('.hh-1').text(), '0', "Leading 0 for hours");
+    assert.equal(c.find('.hh-2').text(), '9', "Correct value for hours");
+
+    var c = $('<div>09:30:00</div>').countDown({with_hh_leading_zero: false});
+    assert.equal(c.find('.hh-1').text(), '9', "Correct value for hours");
+    assert.equal(c.find('.hh-2').text(), '', "No leading 0 for hours");
+
+});
+
+QUnit.test("Option with_mm_leading_zero", function (assert) {
+
+    var c = $('<div>00:05:30</div>').countDown({with_mm_leading_zero: true});
+    assert.equal(c.find('.mm-1').text(), '0', "Leading 0 for hours");
+    assert.equal(c.find('.mm-2').text(), '5', "Correct value for hours");
+
+    var c = $('<div>00:05:30</div>').countDown({with_mm_leading_zero: false});
+    assert.equal(c.find('.mm-1').text(), '5', "Correct value for minutes");
+    assert.equal(c.find('.mm-2').text(), '', "No leading 0 for minutes");
+
+});
+
+QUnit.test("Option with_ss_leading_zero", function (assert) {
+
+    // Don't test the second's value itself because the test suite is sometimes
+    // too slow and will fail expecting 8 seconds but displaying 7.
+
+    var c = $('<div>00:00:08</div>').countDown({with_ss_leading_zero: true});
+    assert.equal(c.find('.ss-1').text(), '0', "Leading 0 for seconds");
+
+    var c = $('<div>00:00:08</div>').countDown({with_ss_leading_zero: false});
+    assert.equal(c.find('.ss-2').text(), '', "No leading 0 for seconds");
+
+});