1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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<ContentClass>. 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;
}
});
|
