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 |
20×
20×
22×
20×
20×
22×
22×
20×
20×
20×
20×
13×
13×
20×
20×
20×
20×
20×
540×
370×
20×
| import Ember from "ember";
import layout from "../templates/components/em-flickity";
const { computed, get, getProperties, set } = Ember;
export default Ember.Component.extend({
layout,
classNames: ["flickity-wrapper"],
eventHandlers: [],
showSlides: false,
widget: null,
// some default flickity settings
cellAlign: "center",
contain: true,
friction: 0.8,
pageDots: false,
selectedAttraction: 0.125,
setGallerySize: false,
optionKeys: computed(function getOptionKeys() {
return [
"accessibility",
"adaptiveHeight",
"arrowShape",
"asNavFor",
"autoPlay",
"bgLazyLoad",
"draggable",
"gragThreshold",
"cellAlign",
"cellSelector",
"contain",
"freeScroll",
"freeScrollFriction",
"friction",
"groupCells",
"imagesLoaded",
"initialIndex",
"lazyLoad",
"pageDots",
"percentPosition",
"prevNextButtons",
"resize",
"rightToLeft",
"selectedAttraction",
"setGallerySize",
"watchCSS",
"wrapAround"
];
}),
eventKeys: computed(function getEventKeys() {
return [
"cellSelect",
"select",
"settle",
"scroll",
"dragStart",
"dragMove",
"dragEnd",
"pointerDown",
"pointerMove",
"pointerUp",
"staticClick",
"lazyLoad",
"bgLazyLoad"
];
}),
didInsertElement() {
if (get(this, "showSlides")) {
set(this, "widget", this.$().flickity(this._getOptions()));
this._setupEvents();
}
},
willDestroyElement() {
const $widget = get(this, "widget");
if ($widget) {
get(this, "eventHandlers").forEach(evt => evt.off());
$widget.flickity("destroy");
}
},
_setupEvents() {
const $widget = get(this, "widget");
const handler = key => (event, pointer, cellElement, cellIndex) => {
Eif (this.attrs[key]) {
this.attrs[key](
cellIndex || $widget.data("flickity").selectedIndex,
$widget.data("flickity")
);
}
};
const eventHandlers = get(this, "eventKeys")
.map(key => $widget.on(`${key}.flickity`, handler(key)));
set(this, "eventHandlers", eventHandlers);
},
_getOptions() {
const propKeys = get(this, "optionKeys");
const props = getProperties(this, ...propKeys);
Object.keys(props).forEach(prop => {
if (!props[prop] && typeof props[prop] !== "boolean") {
delete props[prop];
}
});
return props;
}
});
|