diff --git a/docs/index.html b/docs/index.html index e25c46e..1198dbb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -508,6 +508,14 @@

Example

}) +

You can also include an object as a third argument to prevent the card component from flipping when clicked. If this argument is not specified, the default behavior is to flip when clicked.

+ +
+	    
+    var card = ui.card('<p>I will not flip when clicked</p>', '<p>You must have clicked another element</p>', {self_flip: false});
+    card.el.appendTo('#card');
+            
+	  
@@ -626,4 +634,4 @@

Example

- \ No newline at end of file + diff --git a/lib/components/card/card.js b/lib/components/card/card.js index 1ea5eb6..7b9f93c 100644 --- a/lib/components/card/card.js +++ b/lib/components/card/card.js @@ -10,12 +10,13 @@ exports.Card = Card; * * @param {Mixed} front * @param {Mixed} back + * @param {Object} options * @return {Card} * @api public */ -exports.card = function(front, back){ - return new Card(front, back); +exports.card = function(front, back, options){ + return new Card(front, back, options); }; /** @@ -26,15 +27,17 @@ exports.card = function(front, back){ * * @param {Mixed} front * @param {Mixed} back + * @param {Object} options * @api public */ -function Card(front, back) { +function Card(front, back, options) { ui.Emitter.call(this); this._front = front || $('

front

'); this._back = back || $('

back

'); this.template = html; - this.render(); + this.options = options || {self_flip: true}; + this.render(this.options); }; /** @@ -110,6 +113,8 @@ Card.prototype.render = function(options){ 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(); + if (options.self_flip === true) { + self.flip(); + } }); -}; \ No newline at end of file +};