From ca3ad6305ec0655ad8475a12ac2228b61cdd9ba0 Mon Sep 17 00:00:00 2001 From: Lionel LASKE Date: Sat, 25 Aug 2012 20:23:36 +0000 Subject: Init commit --- (limited to 'html/lib/onyx/source/SwipeableItem.js') diff --git a/html/lib/onyx/source/SwipeableItem.js b/html/lib/onyx/source/SwipeableItem.js new file mode 100644 index 0000000..efa8811 --- /dev/null +++ b/html/lib/onyx/source/SwipeableItem.js @@ -0,0 +1,142 @@ +/** + An item that slides to the left to reveal Delete and Cancel buttons. Pressing the Cancel button will slide the item back into place and generate + an onCancel event. Pressing the Delete button will immediately position the content back in place and generate an onDelete event. + + A SwipeableItem contains methods for styling its content and these should be used to effect styling on the row content. Add css classes via + the contentClasses property and the methods add|remove|has|addRemove. Alter css styles via the applyContentStyle method. + + {kind: "onyx.SwipeableItem", onCancel: "canceled", onDelete: "deleted"} + +*/ +enyo.kind({ + name: "onyx.SwipeableItem", + kind: "onyx.Item", + classes: "onyx-swipeable-item", + published: { + //* Add custom CSS classes via the contentClasses property to style the SwipeableItem's content + contentClasses: "", + //* Set to true to prevent a drag from bubbling beyond the SwipeableItem. + preventDragPropagation: false + }, + defaultContentClasses: "onyx-swipeable-item-content", + handlers: { + ondown: "down" + }, + events: { + /** + Fires when a SwipeableItem's delete button has been triggered + This event does not fire when programatically deleting a SwipeableItem instance + */ + onDelete: "", + /** + Fires when a SwipeableItem's cancel button has been triggered + This event does not fire when selecting a second SwipeableItem, causing the first to cancel itself programatically + */ + onCancel: "" + }, + components: [ + {name: "client", kind: "Slideable", min: -100, unit: "%", ondragstart: "clientDragStart"}, + {name: "confirm", kind: "onyx.Toolbar", canGenerate: false, classes: "onyx-swipeable-item-confirm enyo-fit", style: "text-align: center;", ontap: "confirmTap", components: [ + {kind: "onyx.Button", content: "Delete", ontap: "deleteTap"}, + {kind: "onyx.Button", content: "Cancel", ontap: "cancelTap"} + ]} + ], + //* @protected + swiping: -1, + create: function() { + this.inherited(arguments); + this.contentClassesChanged(); + }, + //* @public + //* Resets the sliding position of the SwipeableItem currently displaying confirmation options + reset: function() { + this.applyStyle("position", null); + this.$.confirm.setShowing(false); + // stop animating if we reset. + this.$.client.getAnimator().stop(); + this.$.client.setValue(0); + }, + //* @protected + contentClassesChanged: function() { + this.$.client.setClasses(this.defaultContentClasses + " " + this.contentClasses); + }, + //* @public + //* Applies a single style value to the SwipeableItem + applyContentStyle: function(inStyle, inValue) { + this.$.client.applyStyle(inStyle, inValue); + }, + //* Applies a CSS class to the SwipeableItem's contentClasses + addContentClass: function(inClass) { + this.$.client.addClass(inClass); + }, + //* Removes a CSS class to the SwipeableItem's contentClasses + removeContentClass: function(inClass) { + this.$.client.removeClass(inClass); + }, + //* Returns true if the _class_ attribute contains a substring matching _inClass_ + hasContentClass: function(inClass) { + return this.$.client.hasClass(inClass); + }, + /** + Adds or removes substring _inClass_ from the _class_ attribute of this object based + on the value of _inTrueToAdd_. + + If _inTrueToAdd_ is truthy, then _inClass_ is added; otherwise, _inClass_ is removed. + */ + addRemoveContentClass: function(inClass, inAdd) { + this.$.client.addRemoveClass(inClass, inAdd); + }, + //* @protected + generateHtml: function() { + this.reset(); + return this.inherited(arguments); + }, + contentChanged: function() { + this.$.client.setContent(this.content); + }, + confirmTap: function() { + return true; + }, + deleteTap: function(inSender, inEvent) { + this.reset(); + this.doDelete(); + return true; + }, + cancelTap: function(inSender, inEvent) { + this.$.client.animateToMax(); + this.doCancel(); + return true; + }, + down: function(inSender, inEvent) { + // on down, remove swiping state + var last = this.swiping; + this.swiping = inEvent.index; + var flyweight = inEvent.flyweight; + if (this.swiping != last && last >= 0 && flyweight) { + flyweight.performOnRow(last, enyo.bind(this, function() { + this.reset(); + })); + } + }, + clientDragStart: function(inSender, inEvent) { + if (inSender.dragging) { + var flyweight = inEvent.flyweight; + if (flyweight) { + flyweight.prepareRow(inEvent.index); + // if needed, render confirm. + // NOTE: position relative so can enyo-fit confirm; apply only when confirm needed + // because it's a known rendering slowdown. + this.applyStyle("position", "relative"); + this.$.confirm.setShowing(true); + if (!this.$.confirm.hasNode()) { + // NOTE: prepend so Slideable will be on top. + this.$.confirm.prepend = true; + this.$.confirm.render(); + this.$.confirm.prepend = false; + } + // note: can't teardown. + } + } + return this.preventDragPropagation; + } +}); \ No newline at end of file -- cgit v0.9.1