Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 642f2d4b0f2c26d2210ab8ed67acc123889b2989 @tj tj committed Aug 13, 2012
Showing with 255 additions and 0 deletions.
  1. +5 −0 .gitignore
  2. +1 −0 .npmignore
  3. 0 History.md
  4. +14 −0 Makefile
  5. +18 −0 Readme.md
  6. +11 −0 component.json
  7. +60 −0 counter.css
  8. +5 −0 digit.html
  9. +1 −0 digit.js
  10. +113 −0 index.js
  11. +27 −0 test/index.html
@@ -0,0 +1,5 @@
+node_modules
+test/*.js
+test/*.css
+components
+build
@@ -0,0 +1 @@
+test
No changes.
@@ -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
@@ -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
@@ -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": "*"
+ }
+}
@@ -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;
+}
@@ -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>
Oops, something went wrong.
@@ -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;
+};
@@ -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>

0 comments on commit 642f2d4

Please sign in to comment.