Initial commit

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+test/*.js
+test/*.css
+components
+build

.npmignore

@@ -0,0 +1 @@
+test

Makefile

@@ -0,0 +1,14 @@
+
+build: counter.css digit.js index.js components
+	@component build
+
+components:
+	@component install
+
+digit.js: digit.html
+	@component convert $<
+
+clean:
+	rm -fr build components
+
+.PHONY: clean

Readme.md

@@ -0,0 +1,18 @@
+
+# Counter
+
+  Counter component.
+
+  ![js apple style countdown counter component](http://f.cl.ly/items/2z262b1p0o2O08381N25/Screen%20Shot%202012-08-12%20at%205.42.56%20PM.png)
+
+## Installation
+
+```
+$ component install component/counter
+```
+
+   ... finish me ...
+
+## License
+
+  MIT

component.json

@@ -0,0 +1,11 @@
+{
+  "name": "counter",
+  "description": "Apple style countdown thingy",
+  "version": "0.0.1",
+  "keywords": ["apple", "counter", "count", "ui"],
+  "scripts": ["index.js", "digit.js"],
+  "styles": ["counter.css"],
+  "dependencies": {
+    "component/domify": "*"
+  }
+}

counter.css

@@ -0,0 +1,60 @@
+
+.counter-digit {
+  width: 22px;
+  display: inline-block;
+  position: relative;
+}
+
+.flip .counter-top {
+  -webkit-transform: rotateX(180deg);
+}
+
+.flip .counter-bottom {
+  background: #3c3c3c;
+}
+
+.counter-top,
+.counter-bottom,
+.counter-next {
+  height: 10px;
+  overflow: hidden;
+  position: absolute;
+  display: inline-block;
+  font-size: 16px;
+  padding: 5px;
+  color: white;
+}
+
+.counter-next,
+.counter-top {
+  padding-bottom: 0;
+  -webkit-border-radius: 3px 3px 0 0;
+  background: -webkit-linear-gradient(#3c3c3c, #636363);
+  -webkit-box-shadow: 0 0 0 1px #636363;
+}
+
+.counter-next {
+  background: #636363;
+}
+
+.counter-top {
+  -webkit-transform-origin: bottom;
+  -webkit-transition: -webkit-transform 200ms ease-out;
+}
+
+.counter-bottom {
+  padding-top: 0;
+  -webkit-border-radius: 0 0 3px 3px;
+  background: blue;
+  margin-top: 15px;
+  background: -webkit-linear-gradient(#636363, #3c3c3c);
+  border-bottom: 1px solid #7b7b7b;
+  -webkit-box-shadow: 0 0 0 1px #636363, 0 2px 5px #888;
+  top: 0;
+  left: 0;
+}
+
+.counter-bottom span {
+  position: relative;
+  top: -10px;
+}

digit.html

@@ -0,0 +1,5 @@
+<div class="counter-digit">
+  <div class="counter-next"><span>0</span></div>
+  <div class="counter-top"><span>0</span></div>
+  <div class="counter-bottom"><span>0</span></div>
+</div>

index.js

@@ -0,0 +1,113 @@
+
+/**
+ * Module dependencies.
+ */
+
+var domify = require('domify')
+  , digit = require('./digit');
+
+/**
+ * Expose `Counter`.
+ */
+
+module.exports = Counter;
+
+/**
+ * Initialize a new `Counter`.
+ *
+ * @api public
+ */
+
+function Counter() {
+  this.el = domify('<div class="counter"></div>');
+  this._digits = [];
+  this.n = 0;
+  this.digits(2);
+}
+
+/**
+ * Set the total number of digits to `n`.
+ *
+ * @param {Number} n
+ * @return {Counter}
+ * @api public
+ */
+
+Counter.prototype.digits = function(n){
+  this.total = n;
+  this.ensureDigits(n);
+  return this;
+};
+
+/**
+ * Add a digit element.
+ *
+ * @api private
+ */
+
+Counter.prototype.addDigit = function(){
+  var el = domify(digit);
+  this._digits.push(el);
+  this.el.appendChild(el);
+};
+
+/**
+ * Ensure at least `n` digits are available.
+ *
+ * @param {Number} n
+ * @api private
+ */
+
+Counter.prototype.ensureDigits = function(n){
+  while (this._digits.length < n) {
+    this.addDigit();
+  }
+};
+
+/**
+ * Update digit `i` with `val`.
+ *
+ * @param {Number} i
+ * @param {String} val
+ * @api private
+ */
+
+Counter.prototype.updateDigit = function(i, val){
+  var el = this._digits[i];
+  var n = parseInt(val, 10) + 1;
+  if (n > 9) n = 0;
+
+  var curr = el.querySelector('.counter-top span').textContent;
+  el.querySelector('.counter-next span').textContent = n;
+  el.querySelector('.counter-top span').textContent = val;
+  el.querySelector('.counter-bottom span').textContent = val;
+
+  if (val == curr) return;
+  el.classList.add('flip');
+  setTimeout(function(){
+    el.classList.remove('flip');
+  }, 200);
+};
+
+/**
+ * Update count to `n`.
+ *
+ * @param {Number} n
+ * @return {Counter}
+ * @api public
+ */
+
+Counter.prototype.update = function(n){
+  this.n = n;
+  var digits = this.total;
+  var str = n.toString();
+  var len = str.length;
+
+  this.ensureDigits(len);
+
+  for (var i = 0; i < len; ++i) {
+    this.updateDigit(digits - i - 1, str[i]);
+  }
+
+  return this;
+};

test/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE 5>
+<html>
+  <head>
+    <title>Counter</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" href="../build/build.css" />
+    <style>
+      body {
+        padding: 150px;
+        font: 14px "Helvetica Neue", Helvetica, Arial;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="../build/build.js"></script>
+    <script>
+      var Counter = require('counter');
+      var counter = new Counter;
+      counter.digits(5);
+      document.body.appendChild(counter.el);
+      var n = 1;
+      setInterval(function(){
+        counter.update(n++);
+      }, 800);
+    </script>
+  </body>
+</html>