Diff: STRATO-apps/wordpress_03/app/wp-content/plugins/bdthemes-element-pack/assets/vendor/js/slinky.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
/*
2
+
* Slinky
3
+
* Rather sweet menus
4
+
* @author Ali Zahid <ali.zahid@live.com>
5
+
* @license MIT
6
+
*/
7
+
8
+
class Slinky {
9
+
// default options
10
+
get options() {
11
+
return {
12
+
resize: true,
13
+
speed: 300,
14
+
theme: "slinky-theme-default",
15
+
title: false,
16
+
};
17
+
}
18
+
19
+
constructor(element, options = {}) {
20
+
// save settings
21
+
this.settings = {
22
+
...this.options,
23
+
...options,
24
+
};
25
+
26
+
// let's go!
27
+
this._init(element);
28
+
}
29
+
30
+
// setup the DOM just for us
31
+
_init(element) {
32
+
// the two elements of water and moisture
33
+
this.menu = jQuery(element);
34
+
this.base = this.menu.children().first();
35
+
36
+
const { menu, settings } = this;
37
+
38
+
// set theme
39
+
menu.addClass("slinky-menu").addClass(settings.theme);
40
+
41
+
// set transition speed
42
+
this._transition(settings.speed);
43
+
44
+
// add arrows to links with children
45
+
jQuery("a + ul", menu).prev().addClass("next");
46
+
47
+
// wrap link text with <span>
48
+
// mostly for styling
49
+
jQuery("li > a", menu).wrapInner("<span>");
50
+
51
+
// create header item
52
+
const header = jQuery("<li>").addClass("header");
53
+
54
+
// prepend it to the list
55
+
jQuery("li > ul", menu).prepend(header);
56
+
57
+
// create back buttons
58
+
const back = jQuery("<a>").prop("href", "#").addClass("back");
59
+
60
+
// prepend them to the headers
61
+
jQuery(".header", menu).prepend(back);
62
+
63
+
// do we need to add titles?
64
+
if (settings.title) {
65
+
// loop through each child list
66
+
jQuery("li > ul", menu).each((index, element) => {
67
+
// get the label from the parent link
68
+
const label = jQuery(element).parent().find("a").first().text();
69
+
70
+
// if it's not empty, create the title
71
+
if (label) {
72
+
const title = jQuery("<header>").addClass("title").text(label);
73
+
74
+
// append it to the immediate header
75
+
jQuery("> .header", element).append(title);
76
+
}
77
+
});
78
+
}
79
+
80
+
// add click listeners
81
+
this._addListeners();
82
+
83
+
// jump to initial active
84
+
this._jumpToInitial();
85
+
}
86
+
87
+
// click listeners
88
+
_addListeners() {
89
+
const { menu, settings } = this;
90
+
91
+
jQuery("a", menu).on("click", (e) => {
92
+
// prevent broken/half transitions
93
+
if (this._clicked + settings.speed > Date.now()) {
94
+
return false;
95
+
}
96
+
97
+
// cache click time to check on next click
98
+
this._clicked = Date.now();
99
+
100
+
// get the link
101
+
const link = jQuery(e.currentTarget);
102
+
103
+
// prevent default if it's a hash
104
+
// or a Slinky button
105
+
// if (
106
+
// link.attr("href").indexOf("#") === 0 ||
107
+
// link.hasClass("next") ||
108
+
// link.hasClass("back")
109
+
// ) {
110
+
// e.preventDefault();
111
+
// }
112
+
113
+
114
+
// BdThemes Override | To Hash Link fixing
115
+
// Prevent only 'next' and 'back' links from default behavior
116
+
if (link.hasClass("next") || link.hasClass("back")) {
117
+
e.preventDefault();
118
+
} else if (link.attr("href").indexOf("#") === 0) {
119
+
// Allow hash links to scroll without interfering
120
+
return true;
121
+
}
122
+
123
+
124
+
// time to move
125
+
if (link.hasClass("next")) {
126
+
// one step forward
127
+
128
+
// remove the current active
129
+
menu.find(".active").removeClass("active");
130
+
131
+
// set the new active
132
+
link.next().show().addClass("active");
133
+
134
+
// make the chess move
135
+
this._move(1);
136
+
137
+
// resize the menu if need be
138
+
if (settings.resize) {
139
+
this._resize(link.next());
140
+
}
141
+
} else if (link.hasClass("back")) {
142
+
// and two steps back
143
+
// just one step back, actually
144
+
145
+
// make the move
146
+
this._move(-1, () => {
147
+
// remove the current active
148
+
menu.find(".active").removeClass("active");
149
+
150
+
// set the new active
151
+
link
152
+
.parent()
153
+
.parent()
154
+
.hide()
155
+
.parentsUntil(menu, "ul")
156
+
.first()
157
+
.addClass("active");
158
+
});
159
+
160
+
// resize the menu if need be
161
+
if (settings.resize) {
162
+
this._resize(link.parent().parent().parentsUntil(menu, "ul"));
163
+
}
164
+
}
165
+
});
166
+
}
167
+
168
+
// jump to initial active on init
169
+
_jumpToInitial() {
170
+
const { menu, settings } = this;
171
+
172
+
// get initial active
173
+
const active = menu.find(".active");
174
+
175
+
if (active.length > 0) {
176
+
// remove initial active
177
+
active.removeClass("active");
178
+
179
+
// jump without animation
180
+
this.jump(active, false);
181
+
}
182
+
183
+
// set initial height on the menu
184
+
// to fix the first transition resize bug
185
+
//setTimeout(() => menu.height(menu.outerHeight()), settings.speed);
186
+
}
187
+
188
+
// slide the menu
189
+
_move(depth = 0, callback = () => {}) {
190
+
// don't bother packing if we're not going anywhere
191
+
if (depth === 0) {
192
+
return;
193
+
}
194
+
195
+
const { settings, base } = this;
196
+
197
+
// get current position from the left
198
+
const left = Math.round(parseInt(base.get(0).style.left)) || 0;
199
+
200
+
// set the new position from the left
201
+
base.css("left", `${left - depth * 100}%`);
202
+
203
+
// callback after the animation
204
+
if (typeof callback === "function") {
205
+
setTimeout(callback, settings.speed);
206
+
}
207
+
}
208
+
209
+
// resize the menu
210
+
// to match content height
211
+
_resize(content) {
212
+
const { menu } = this;
213
+
214
+
menu.height(content.outerHeight());
215
+
}
216
+
217
+
// set the transition speed
218
+
_transition(speed = 300) {
219
+
const { menu, base } = this;
220
+
221
+
menu.css("transition-duration", `${speed}ms`);
222
+
base.css("transition-duration", `${speed}ms`);
223
+
}
224
+
225
+
// jump to an element
226
+
jump(target, animate = true) {
227
+
if (!target) {
228
+
return;
229
+
}
230
+
231
+
const { menu, settings } = this;
232
+
233
+
const to = jQuery(target);
234
+
235
+
// get all current active
236
+
const active = menu.find(".active");
237
+
238
+
// how many moves must we jump?
239
+
let count = 0;
240
+
241
+
// this many
242
+
// until we reach the parent list
243
+
if (active.length > 0) {
244
+
count = active.parentsUntil(menu, "ul").length;
245
+
}
246
+
247
+
// remove current active
248
+
// hide all lists
249
+
menu.find("ul").removeClass("active").hide();
250
+
251
+
// get parent list
252
+
const menus = to.parentsUntil(menu, "ul");
253
+
254
+
// show parent list
255
+
menus.show();
256
+
257
+
// show target
258
+
to.show().addClass("active");
259
+
260
+
// set transition speed to 0 if no animation
261
+
if (!animate) {
262
+
this._transition(0);
263
+
}
264
+
265
+
// make the checkers move
266
+
this._move(menus.length - count);
267
+
268
+
// resize menu if need be
269
+
if (settings.resize) {
270
+
this._resize(to);
271
+
}
272
+
273
+
// set transition speed to default after transition
274
+
if (!animate) {
275
+
this._transition(settings.speed);
276
+
}
277
+
}
278
+
279
+
// go big or go home
280
+
// just go home
281
+
home(animate = true) {
282
+
const { base, menu, settings } = this;
283
+
284
+
// set transition speed to 0 if no animation
285
+
if (!animate) {
286
+
this._transition(0);
287
+
}
288
+
289
+
// get current active
290
+
const active = menu.find(".active");
291
+
292
+
// get all parent lists
293
+
const parents = active.parentsUntil(menu, "ul");
294
+
295
+
// make the move
296
+
this._move(-parents.length, () => {
297
+
// remove the current active
298
+
active.removeClass("active").hide();
299
+
300
+
// hide all parents except base
301
+
parents.not(base).hide();
302
+
});
303
+
304
+
// resize if need be
305
+
if (settings.resize) {
306
+
this._resize(base);
307
+
}
308
+
309
+
// set transition speed back to default
310
+
if (animate === false) {
311
+
this._transition(settings.speed);
312
+
}
313
+
}
314
+
315
+
// crush, kill, destroy
316
+
destroy() {
317
+
const { base, menu } = this;
318
+
319
+
// remove all headers
320
+
jQuery(".header", menu).remove();
321
+
322
+
// remove Slinky links
323
+
// and click listeners
324
+
jQuery("a", menu).removeClass("next").off("click");
325
+
326
+
// remove inline styles
327
+
menu.css({
328
+
height: "",
329
+
"transition-duration": "",
330
+
});
331
+
332
+
base.css({
333
+
left: "",
334
+
"transition-duration": "",
335
+
});
336
+
337
+
// remove Slinky HTML
338
+
jQuery("li > a > span", menu).contents().unwrap();
339
+
340
+
// remove any current active
341
+
menu.find(".active").removeClass("active");
342
+
343
+
// remove any Slinky style classes
344
+
const styles = menu.attr("class").split(" ");
345
+
346
+
styles.forEach((style) => {
347
+
if (style.indexOf("slinky") === 0) {
348
+
menu.removeClass(style);
349
+
}
350
+
});
351
+
352
+
// reset fields
353
+
const fields = ["settings", "menu", "base"];
354
+
355
+
fields.forEach((field) => delete this[field]);
356
+
}
357
+
}
358
+
359
+
// jQuery plugin
360
+
(($) => {
361
+
$.fn.slinky = function (options) {
362
+
const menu = new Slinky(this, options);
363
+
364
+
return menu;
365
+
};
366
+
})(jQuery);
367
+