Permalink
Browse files

Added `Card` component

  • Loading branch information...
1 parent 6e61011 commit d1975cd778b8b03f09bd9bbd9177c1cf7861b379 @tj tj committed Oct 10, 2011
Showing with 366 additions and 4 deletions.
  1. +2 −1 Makefile
  2. +47 −0 build/ui.css
  3. +119 −2 build/ui.js
  4. +47 −0 lib/components/card/card.css
  5. +6 −0 lib/components/card/card.html
  6. +115 −0 lib/components/card/card.js
  7. +1 −1 lib/components/dialog/dialog.js
  8. +2 −0 support/build.js
  9. +27 −0 test/index.html
View
@@ -3,7 +3,8 @@ COMPONENTS = emitter \
dialog \
overlay \
confirmation \
- color-picker
+ color-picker \
+ card
ui:
@rm -fr build
View
@@ -118,3 +118,50 @@
border: 1px solid #888;
cursor: crosshair;
}
+
+/* from: http://desandro.github.com/3d-webkit-transforms */
+
+.card {
+ width: 200px;
+ height: 260px;
+ position: relative;
+ -webkit-perspective: 800;
+}
+
+.card .wrapper {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ -webkit-transform-style: preserve-3d;
+ -webkit-transition: -webkit-transform 500ms ease-in-out;
+ border: 1px solid #eee;
+ border-bottom-color: #cacaca;
+ -webkit-border-radius: 3px;
+ -webkit-box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
+}
+
+.card .face {
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden;
+}
+
+.card .back {
+ -webkit-transform: rotateY(180deg);
+}
+
+.card.flipped .wrapper {
+ -webkit-transform: rotateY(180deg);
+}
+
+/* sideflip effect */
+
+.card.sideflip .wrapper {
+ -webkit-transform-origin: right center;
+}
+
+.card.sideflip.flipped .wrapper {
+ -webkit-transform: translateX(-100%) rotateY(180deg);
+}
View
@@ -88,7 +88,7 @@ exports.dialog = function(title, msg){
};
/**
- * Initialize a new `Dialog` dialog.
+ * Initialize a new `Dialog`.
*
* Options:
*
@@ -781,4 +781,121 @@ ColorPicker.prototype.renderMain = function(options){
ctx.beginPath();
ctx.restore();
};
-})(ui, "<div class=\"color-picker\">\n <canvas class=\"main\"></canvas>\n <canvas class=\"spectrum\"></canvas>\n</div>");
+})(ui, "<div class=\"color-picker\">\n <canvas class=\"main\"></canvas>\n <canvas class=\"spectrum\"></canvas>\n</div>");
+;(function(exports, html){
+
+/**
+ * Expose `Card`.
+ */
+
+exports.Card = Card;
+
+/**
+ * Create a new `Card`.
+ *
+ * @param {Mixed} front
+ * @param {Mixed} back
+ * @return {Card}
+ * @api public
+ */
+
+exports.card = function(front, back){
+ return new Card(front, back);
+};
+
+/**
+ * Initialize a new `Card` with content
+ * for face `front` and `back`.
+ *
+ * Emits "flip" event.
+ *
+ * @param {Mixed} front
+ * @param {Mixed} back
+ * @api public
+ */
+
+function Card(front, back) {
+ ui.Emitter.call(this);
+ this._front = front || $('<p>front</p>');
+ this._back = back || $('<p>back</p>');
+ this.template = html;
+ this.render();
+};
+
+/**
+ * Inherit from `Emitter.prototype`.
+ */
+
+Card.prototype = new ui.Emitter;
+
+/**
+ * Set front face `val`.
+ *
+ * @param {Mixed} val
+ * @return {Card}
+ * @api public
+ */
+
+Card.prototype.front = function(val){
+ this._front = val;
+ this.render();
+ return this;
+};
+
+/**
+ * Set back face `val`.
+ *
+ * @param {Mixed} val
+ * @return {Card}
+ * @api public
+ */
+
+Card.prototype.back = function(val){
+ this._back = val;
+ this.render();
+ return this;
+};
+
+/**
+ * Flip the card.
+ *
+ * @return {Card} for chaining
+ * @api public
+ */
+
+Card.prototype.flip = function(){
+ this.emit('flip');
+ this.el.toggleClass('flipped');
+ return this;
+};
+
+/**
+ * Set the effect to `type`.
+ *
+ * @param {String} type
+ * @return {Dialog} for chaining
+ * @api public
+ */
+
+Card.prototype.effect = function(type){
+ this.el.addClass(type);
+ return this;
+};
+
+/**
+ * Render with the given `options`.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Card.prototype.render = function(options){
+ var self = this
+ , el = this.el = $(this.template);
+ el.find('.front').empty().append(this._front.el || $(this._front));
+ el.find('.back').empty().append(this._back.el || $(this._back));
+ el.click(function(){
+ self.flip();
+ });
+};
+})(ui, "<div class=\"card\">\n <div class=\"wrapper\">\n <div class=\"face front\">1</div>\n <div class=\"face back\">2</div>\n </div>\n</div>");
@@ -0,0 +1,47 @@
+
+/* from: http://desandro.github.com/3dtransforms */
+
+.card {
+ width: 200px;
+ height: 260px;
+ position: relative;
+ perspective: 800;
+}
+
+.card .wrapper {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ transform-style: preserve-3d;
+ transition: transform 500ms ease-in-out;
+ border: 1px solid #eee;
+ border-bottom-color: #cacaca;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
+}
+
+.card .face {
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+}
+
+.card .back {
+ transform: rotateY(180deg);
+}
+
+.card.flipped .wrapper {
+ transform: rotateY(180deg);
+}
+
+/* sideflip effect */
+
+.card.sideflip .wrapper {
+ transform-origin: right center;
+}
+
+.card.sideflip.flipped .wrapper {
+ transform: translateX(-100%) rotateY(180deg);
+}
@@ -0,0 +1,6 @@
+<div class="card">
+ <div class="wrapper">
+ <div class="face front">1</div>
+ <div class="face back">2</div>
+ </div>
+</div>
@@ -0,0 +1,115 @@
+
+/**
+ * Expose `Card`.
+ */
+
+exports.Card = Card;
+
+/**
+ * Create a new `Card`.
+ *
+ * @param {Mixed} front
+ * @param {Mixed} back
+ * @return {Card}
+ * @api public
+ */
+
+exports.card = function(front, back){
+ return new Card(front, back);
+};
+
+/**
+ * Initialize a new `Card` with content
+ * for face `front` and `back`.
+ *
+ * Emits "flip" event.
+ *
+ * @param {Mixed} front
+ * @param {Mixed} back
+ * @api public
+ */
+
+function Card(front, back) {
+ ui.Emitter.call(this);
+ this._front = front || $('<p>front</p>');
+ this._back = back || $('<p>back</p>');
+ this.template = html;
+ this.render();
+};
+
+/**
+ * Inherit from `Emitter.prototype`.
+ */
+
+Card.prototype = new ui.Emitter;
+
+/**
+ * Set front face `val`.
+ *
+ * @param {Mixed} val
+ * @return {Card}
+ * @api public
+ */
+
+Card.prototype.front = function(val){
+ this._front = val;
+ this.render();
+ return this;
+};
+
+/**
+ * Set back face `val`.
+ *
+ * @param {Mixed} val
+ * @return {Card}
+ * @api public
+ */
+
+Card.prototype.back = function(val){
+ this._back = val;
+ this.render();
+ return this;
+};
+
+/**
+ * Flip the card.
+ *
+ * @return {Card} for chaining
+ * @api public
+ */
+
+Card.prototype.flip = function(){
+ this.emit('flip');
+ this.el.toggleClass('flipped');
+ return this;
+};
+
+/**
+ * Set the effect to `type`.
+ *
+ * @param {String} type
+ * @return {Dialog} for chaining
+ * @api public
+ */
+
+Card.prototype.effect = function(type){
+ this.el.addClass(type);
+ return this;
+};
+
+/**
+ * Render with the given `options`.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Card.prototype.render = function(options){
+ var self = this
+ , el = this.el = $(this.template);
+ el.find('.front').empty().append(this._front.el || $(this._front));
+ el.find('.back').empty().append(this._back.el || $(this._back));
+ el.click(function(){
+ self.flip();
+ });
+};
@@ -31,7 +31,7 @@ exports.dialog = function(title, msg){
};
/**
- * Initialize a new `Dialog` dialog.
+ * Initialize a new `Dialog`.
*
* Options:
*
View
@@ -75,10 +75,12 @@ function build(name, fn) {
if (path.existsSync(css)) {
read(css, function(css){
css = css
+ .replace(/perspective/g, '-webkit-perspective')
.replace(/transform/g, '-webkit-transform')
.replace(/transition/g, '-webkit-transition')
.replace(/box-shadow/g, '-webkit-box-shadow')
.replace(/border-radius/g, '-webkit-border-radius')
+ .replace(/backface-visibility/g, '-webkit-backface-visibility')
.replace(/linear-gradient/g, '-webkit-linear-gradient');
append('build/ui.css', css);
});
Oops, something went wrong.

0 comments on commit d1975cd

Please sign in to comment.