domquery-com 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/pulling.js ADDED
@@ -0,0 +1,473 @@
1
+ (function() {
2
+ "undefined" !== typeof DomQuery && DomQuery.prototype && (DomQuery.prototype.pulling = function(I) {
3
+ function O(u) {
4
+ var v = document.createElement("canvas");
5
+ v.width = 1;
6
+ v.height = 1;
7
+ v = v.getContext("2d");
8
+ v.fillStyle = u;
9
+ v.fillRect(0, 0, 1, 1);
10
+ v = v.getImageData(0, 0, 1, 1).data;
11
+ let l = 1;
12
+ u.toLowerCase().startsWith("rgba") && (u = u.match(/rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i)) && u[1] && (l = parseFloat(u[1]));
13
+ return {
14
+ r: v[0],
15
+ g: v[1],
16
+ b: v[2],
17
+ a: l
18
+ }
19
+ }
20
+ "string" === typeof I && (I = {
21
+ pulling: I
22
+ });
23
+ const d = $.extend({}, {
24
+ shadowColor: "rgba(0, 0, 0, 0.2)",
25
+ circleColor: "rgba(0, 0, 0, 0.7)",
26
+ arrowColor: "white",
27
+ highlightColor: "rgba(255, 255, 255, 0.1)",
28
+ minSwipeDistance: 30,
29
+ maxScaleDistance: 150,
30
+ horizontalRatio: 2.5,
31
+ verticalRatio: 2.5,
32
+ onLeftPull: null,
33
+ onRightPull: null,
34
+ onUpPull: null,
35
+ onDownPull: null,
36
+ progress: null,
37
+ pulling: "left, right, up, down",
38
+ arrow: !0,
39
+ zIndex: 1,
40
+ cancelThreshold: .6,
41
+ preventNativeScroll: "auto",
42
+ touchAction: null
43
+ }, I),
44
+ A = d.pulling.split(",").map(u => u.trim()).filter(u => u);
45
+ return this.each(function() {
46
+ function u() {
47
+ w.width = l.width();
48
+ w.height = l.height()
49
+ }
50
+
51
+ function v() {
52
+ l[0].getBoundingClientRect();
53
+ var e = l.offset().top,
54
+ n = l.offset().left,
55
+ h = $(window).scrollTop();
56
+ const a = $(window).scrollLeft(),
57
+ b = $(window).height(),
58
+ f = $(window).width(),
59
+ g = l.outerHeight(),
60
+ x = l.outerWidth(),
61
+ m = Math.max(0, h - e);
62
+ e = Math.min(g, h + b - e);
63
+ h = Math.max(0, a - n);
64
+ n = Math.min(x, a + f - n);
65
+ return e <= m || n <= h ? {
66
+ top: 0,
67
+ bottom: g,
68
+ left: 0,
69
+ right: x,
70
+ centerX: x / 2,
71
+ centerY: g / 2
72
+ } : {
73
+ top: m,
74
+ bottom: e,
75
+ left: h,
76
+ right: n,
77
+ centerX: (h + n) / 2,
78
+ centerY: (m + e) / 2
79
+ }
80
+ }
81
+ const l = $(this);
82
+ if (!l.data("pullingInit")) {
83
+ "static" === l.css("position") && l.css("position", "relative");
84
+ "hidden" !== l.css("overflow") &&
85
+ l.css("overflow", "hidden");
86
+ var E = $('<div class="pulling-container"></div>').css({
87
+ position: "absolute",
88
+ top: 0,
89
+ left: 0,
90
+ width: "100%",
91
+ height: "100%",
92
+ zIndex: d.zIndex,
93
+ pointerEvents: "none",
94
+ opacity: 0
95
+ }).appendTo(l),
96
+ P = $('<div class="pulling-shadow"></div>').css({
97
+ position: "absolute",
98
+ top: 0,
99
+ left: 0,
100
+ width: "100%",
101
+ height: "100%",
102
+ backgroundColor: d.shadowColor,
103
+ opacity: 0,
104
+ transition: "opacity 0.3s",
105
+ pointerEvents: "none"
106
+ }).appendTo(E),
107
+ w = $('<canvas class="pulling-canvas"></canvas>').css({
108
+ position: "absolute",
109
+ top: 0,
110
+ left: 0,
111
+ width: "100%",
112
+ height: "100%",
113
+ pointerEvents: "none"
114
+ }).appendTo(E)[0];
115
+ if (w) {
116
+ var c = w.getContext("2d");
117
+ if (c) {
118
+ var q;
119
+ if (!1 !== d.arrow) {
120
+ var y = $('<div class="pulling-circle-container"></div>').css({
121
+ position: "absolute",
122
+ top: 0,
123
+ left: 0,
124
+ width: "100%",
125
+ height: "100%",
126
+ pointerEvents: "none",
127
+ zIndex: d.zIndex + 2,
128
+ overflow: "hidden",
129
+ opacity: 0
130
+ }).appendTo(l);
131
+ var z = $('<div class="pulling-circle"></div>').css({
132
+ position: "absolute",
133
+ width: "60px",
134
+ height: "60px",
135
+ borderRadius: "50%",
136
+ backgroundColor: d.circleColor,
137
+ opacity: 0,
138
+ transition: "opacity 0.3s",
139
+ pointerEvents: "none",
140
+ display: "flex",
141
+ alignItems: "center",
142
+ justifyContent: "center",
143
+ zIndex: d.zIndex + 1,
144
+ boxShadow: "inset 0 0 0px 0px rgba(255, 255, 255, 0)",
145
+ left: "50%",
146
+ top: "50%",
147
+ transform: "translate(-50%, -50%)"
148
+ }).appendTo(y);
149
+ !0 === d.arrow ? q = $('<div class="pulling-arrow"></div>').css({
150
+ position: "absolute",
151
+ width: 0,
152
+ height: 0,
153
+ borderStyle: "solid",
154
+ borderWidth: "8px 0 8px 12px",
155
+ borderColor: `transparent transparent transparent ${d.arrowColor}`,
156
+ transform: "translate(-50%, -50%) rotate(0deg)",
157
+ opacity: 0,
158
+ transition: "opacity 0.3s, transform 0.3s",
159
+ pointerEvents: "none",
160
+ left: "50%",
161
+ top: "50%"
162
+ }).appendTo(z) : "string" === typeof d.arrow && (q = $('<div class="pulling-text"></div>').css({
163
+ position: "absolute",
164
+ color: "white",
165
+ fontSize: "14px",
166
+ textAlign: "center",
167
+ transform: "translate(-50%, -50%)",
168
+ opacity: 0,
169
+ transition: "opacity 0.3s",
170
+ pointerEvents: "none",
171
+ left: "50%",
172
+ top: "50%",
173
+ width: "100%",
174
+ padding: "5px"
175
+ }).text(d.arrow).appendTo(z))
176
+ }
177
+ var L = {
178
+ arrow: function(e) {
179
+ if ("undefined" !== typeof e) {
180
+ d.arrow = e;
181
+ if (!z) return this;
182
+ q && q.remove();
183
+ !0 === e ? q = $('<div class="pulling-arrow"></div>').css({
184
+ position: "absolute",
185
+ width: 0,
186
+ height: 0,
187
+ borderStyle: "solid",
188
+ borderWidth: "8px 0 8px 12px",
189
+ borderColor: `transparent transparent transparent ${d.arrowColor}`,
190
+ transform: "translate(-50%, -50%) rotate(0deg)",
191
+ opacity: 0,
192
+ transition: "opacity 0.3s, transform 0.3s",
193
+ pointerEvents: "none",
194
+ left: "50%",
195
+ top: "50%"
196
+ }).appendTo(z) : "string" === typeof e && (q = $('<div class="pulling-text"></div>').css({
197
+ position: "absolute",
198
+ color: "white",
199
+ fontSize: "14px",
200
+ textAlign: "center",
201
+ transform: "translate(-50%, -50%)",
202
+ opacity: 0,
203
+ transition: "opacity 0.3s",
204
+ pointerEvents: "none",
205
+ left: "50%",
206
+ top: "50%",
207
+ width: "100%",
208
+ padding: "5px"
209
+ }).text(e).appendTo(z));
210
+ return this
211
+ }
212
+ return d.arrow
213
+ }
214
+ };
215
+ y = function(e) {
216
+ return "function" === typeof e ? function() {
217
+ return e.apply(L, arguments)
218
+ } : e
219
+ };
220
+ d.onLeftPull = y(d.onLeftPull);
221
+ d.onRightPull = y(d.onRightPull);
222
+ d.onUpPull = y(d.onUpPull);
223
+ d.onDownPull = y(d.onDownPull);
224
+ d.progress = y(d.progress);
225
+ setTimeout(u, 10);
226
+ $(window).on("resize", function() {
227
+ u()
228
+ });
229
+ var C = !1,
230
+ B = !1,
231
+ M = 0,
232
+ N = 0,
233
+ r = 0,
234
+ t = 0,
235
+ p = null,
236
+ J = null,
237
+ K = 0,
238
+ F = !1,
239
+ D = null,
240
+ G = 0,
241
+ Q = 0,
242
+ R = 0,
243
+ S = 0;
244
+ y = l.attr("id");
245
+ y || (y = "pulling-element-" + Math.floor(1E4 *
246
+ Math.random()), l.attr("id", y));
247
+ var T = function(e) {
248
+ if (C) {
249
+ e = Math.sqrt(r * r + t * t);
250
+ var n = e < K * d.cancelThreshold;
251
+ B && !n && A.includes(p) && e >= 1.5 * d.minSwipeDistance && !F && (e = {
252
+ left: d.onLeftPull,
253
+ right: d.onRightPull,
254
+ up: d.onUpPull,
255
+ down: d.onDownPull
256
+ } [p], "function" === typeof e && (F = !0, e.call(L)));
257
+ if (B && A.includes(p)) {
258
+ R = r;
259
+ S = t;
260
+ G = 0;
261
+ Q = performance.now();
262
+ D && cancelAnimationFrame(D);
263
+ var h = function(a) {
264
+ G = Math.min((a - Q) / 300, 1);
265
+ a = 1 - (1 - G) * (1 - G);
266
+ r = R * (1 - a);
267
+ t = S * (1 - a);
268
+ c.clearRect(0, 0, w.width, w.height);
269
+ if (1 > G) {
270
+ a = Math.min(Math.sqrt(r * r +
271
+ t * t) / d.maxScaleDistance, 1);
272
+ var b = v(),
273
+ f = l[0].getBoundingClientRect(),
274
+ g = M - f.left,
275
+ x = N - f.top;
276
+ f = Math.min(.5 * Math.sqrt(r * r + t * t), 100);
277
+ var m = O(d.shadowColor);
278
+ if ("left" === p || "right" === p) {
279
+ var k = Math.abs(r);
280
+ g = `rgba(${m.r}, ${m.g}, ${m.b}, ${m.a*Math.min(1,k/d.maxScaleDistance)})`;
281
+ m = `rgba(${m.r}, ${m.g}, ${m.b}, 0)`;
282
+ c.beginPath();
283
+ "right" === p ? (c.moveTo(b.left, b.top), c.lineTo(b.left + k - f, b.top), c.quadraticCurveTo(b.left + k, b.centerY, b.left + k, x), c.quadraticCurveTo(b.left + k, b.centerY, b.left + k - f, b.bottom), c.lineTo(b.left,
284
+ b.bottom), c.closePath(), f = c.createLinearGradient(b.left, 0, b.left + k, 0)) : (c.moveTo(b.right, b.top), c.lineTo(b.right - k + f, b.top), c.quadraticCurveTo(b.right - k, b.centerY, b.right - k, x), c.quadraticCurveTo(b.right - k, b.centerY, b.right - k + f, b.bottom), c.lineTo(b.right, b.bottom), c.closePath(), f = c.createLinearGradient(b.right, 0, b.right - k, 0));
285
+ f.addColorStop(0, g);
286
+ f.addColorStop(1, m);
287
+ c.fillStyle = f
288
+ } else k = Math.abs(t), x = `rgba(${m.r}, ${m.g}, ${m.b}, ${m.a*Math.min(1,k/d.maxScaleDistance)})`, m = `rgba(${m.r}, ${m.g}, ${m.b}, 0)`,
289
+ c.beginPath(), "down" === p ? (c.moveTo(b.left, b.top), c.lineTo(b.left, b.top + k - f), c.quadraticCurveTo(b.centerX, b.top + k, g, b.top + k), c.quadraticCurveTo(b.centerX, b.top + k, b.right, b.top + k - f), c.lineTo(b.right, b.top), c.closePath(), f = c.createLinearGradient(0, b.top, 0, b.top + k)) : (c.moveTo(b.left, b.bottom), c.lineTo(b.left, b.bottom - k + f), c.quadraticCurveTo(b.centerX, b.bottom - k, g, b.bottom - k), c.quadraticCurveTo(b.centerX, b.bottom - k, b.right, b.bottom - k + f), c.lineTo(b.right, b.bottom), c.closePath(), f = c.createLinearGradient(0,
290
+ b.bottom, 0, b.bottom - k)), f.addColorStop(0, x), f.addColorStop(1, m), c.fillStyle = f;
291
+ c.fill();
292
+ if (!1 !== d.arrow && (z.css({
293
+ opacity: a,
294
+ transform: `translate(-50%, -50%) scale(${.2+.8*a})`,
295
+ "box-shadow": `inset 0 0 ${15*a}px ${8*a}px rgba(255, 255, 255, ${.5*a})`,
296
+ left: `${b.centerX}px`,
297
+ top: `${b.centerY}px`
298
+ }), q))
299
+ if (q.hasClass("pulling-arrow")) {
300
+ b = 0;
301
+ switch (p) {
302
+ case "left":
303
+ b = 180;
304
+ break;
305
+ case "right":
306
+ b = 0;
307
+ break;
308
+ case "up":
309
+ b = -90;
310
+ break;
311
+ case "down":
312
+ b = 90
313
+ }
314
+ q.css({
315
+ opacity: a,
316
+ transform: `translate(-50%, -50%) rotate(${b}deg)`
317
+ })
318
+ } else q.hasClass("pulling-text") &&
319
+ q.css({
320
+ opacity: a,
321
+ transform: "translate(-50%, -50%)"
322
+ });
323
+ D = requestAnimationFrame(h)
324
+ } else !1 !== d.arrow && q && (z.css("opacity", "0"), q.css("opacity", "0")), E.css("opacity", "0"), !1 !== d.arrow && $(".pulling-circle-container").css("opacity", "0"), B = C = !1, J = null, F = !1
325
+ };
326
+ D = requestAnimationFrame(h)
327
+ } else {
328
+ D && (cancelAnimationFrame(D), D = null);
329
+ try {
330
+ c.clearRect(0, 0, w.width, w.height)
331
+ } catch (a) {}!1 !== d.arrow && q && (z.css("opacity", "0"), q.css("opacity", "0"));
332
+ E.css("opacity", "0");
333
+ !1 !== d.arrow && $(".pulling-circle-container").css("opacity",
334
+ "0");
335
+ B = C = !1;
336
+ J = null;
337
+ F = !1
338
+ }
339
+ }
340
+ };
341
+ l.on("touchstart mousedown", function(e) {
342
+ J = e.target;
343
+ C = !0;
344
+ B = !1;
345
+ p = null;
346
+ K = 0;
347
+ F = !1;
348
+ e = e.touches ? e.touches[0] : e;
349
+ M = e.clientX;
350
+ N = e.clientY;
351
+ t = r = 0;
352
+ E.css("opacity", "1");
353
+ !1 !== d.arrow && $(".pulling-circle-container").css("opacity", "1");
354
+ P.css("opacity", "0");
355
+ !1 !== d.arrow && (z.css("opacity", "0"), q.css("opacity", "0"));
356
+ u();
357
+ c.clearRect(0, 0, w.width, w.height)
358
+ });
359
+ $(document).on("touchmove mousemove", function(e) {
360
+ if (C && J && C) {
361
+ var n = e.touches ? e.touches[0] : e;
362
+ r = n.clientX - M;
363
+ t = n.clientY - N;
364
+ var h = Math.sqrt(r *
365
+ r + t * t);
366
+ K = Math.max(K, h);
367
+ if (0 !== h) {
368
+ e = Math.abs(r) / h;
369
+ var a = Math.abs(t) / h;
370
+ h > d.minSwipeDistance && !B && (p = null, .8 < e && .3 > a ? p = 0 < r ? "right" : "left" : .8 < a && .3 > e && (p = 0 < t ? "down" : "up"), A.includes(p) && (B = !0, "function" === typeof d.progress && d.progress.call(L, p)));
371
+ if (B && A.includes(p)) {
372
+ e = Math.min(h / d.maxScaleDistance, 1);
373
+ c.clearRect(0, 0, w.width, w.height);
374
+ a = v();
375
+ var b = l[0].getBoundingClientRect(),
376
+ f = n.clientX - b.left;
377
+ n = n.clientY - b.top;
378
+ h = Math.min(.5 * h, 100);
379
+ b = O(d.shadowColor);
380
+ if ("left" === p || "right" === p) {
381
+ var g = Math.abs(r);
382
+ f = `rgba(${b.r}, ${b.g}, ${b.b}, ${b.a*
383
+ Math.min(1,g/d.maxScaleDistance)})`;
384
+ b = `rgba(${b.r}, ${b.g}, ${b.b}, 0)`;
385
+ c.beginPath();
386
+ "right" === p ? (c.moveTo(a.left, a.top), c.lineTo(a.left + g - h, a.top), c.quadraticCurveTo(a.left + g, a.centerY, a.left + g, n), c.quadraticCurveTo(a.left + g, a.centerY, a.left + g - h, a.bottom), c.lineTo(a.left, a.bottom), c.closePath(), h = c.createLinearGradient(a.left, 0, a.left + g, 0)) : (c.moveTo(a.right, a.top), c.lineTo(a.right - g + h, a.top), c.quadraticCurveTo(a.right - g, a.centerY, a.right - g, n), c.quadraticCurveTo(a.right - g, a.centerY, a.right - g + h,
387
+ a.bottom), c.lineTo(a.right, a.bottom), c.closePath(), h = c.createLinearGradient(a.right, 0, a.right - g, 0));
388
+ h.addColorStop(0, f);
389
+ h.addColorStop(1, b);
390
+ c.fillStyle = h
391
+ } else g = Math.abs(t), n = `rgba(${b.r}, ${b.g}, ${b.b}, ${b.a*Math.min(1,g/d.maxScaleDistance)})`, b = `rgba(${b.r}, ${b.g}, ${b.b}, 0)`, c.beginPath(), "down" === p ? (c.moveTo(a.left, a.top), c.lineTo(a.left, a.top + g - h), c.quadraticCurveTo(a.centerX, a.top + g, f, a.top + g), c.quadraticCurveTo(a.centerX, a.top + g, a.right, a.top + g - h), c.lineTo(a.right, a.top), c.closePath(),
392
+ f = c.createLinearGradient(0, a.top, 0, a.top + g)) : (c.moveTo(a.left, a.bottom), c.lineTo(a.left, a.bottom - g + h), c.quadraticCurveTo(a.centerX, a.bottom - g, f, a.bottom - g), c.quadraticCurveTo(a.centerX, a.bottom - g, a.right, a.bottom - g + h), c.lineTo(a.right, a.bottom), c.closePath(), f = c.createLinearGradient(0, a.bottom, 0, a.bottom - g)), f.addColorStop(0, n), f.addColorStop(1, b), c.fillStyle = f;
393
+ c.fill();
394
+ P.css("opacity", "0");
395
+ if (!1 !== d.arrow)
396
+ if (z.css({
397
+ opacity: e,
398
+ transform: `translate(-50%, -50%) scale(${.2+.8*e})`,
399
+ "box-shadow": `inset 0 0 ${15*
400
+ e}px ${8*e}px rgba(255, 255, 255, ${.5*e})`,
401
+ left: `${a.centerX}px`,
402
+ top: `${a.centerY}px`
403
+ }), a = 0, q.hasClass("pulling-arrow")) {
404
+ switch (p) {
405
+ case "left":
406
+ a = 180;
407
+ break;
408
+ case "right":
409
+ a = 0;
410
+ break;
411
+ case "up":
412
+ a = -90;
413
+ break;
414
+ case "down":
415
+ a = 90
416
+ }
417
+ q.css({
418
+ opacity: e,
419
+ transform: `translate(-50%, -50%) rotate(${a}deg)`
420
+ })
421
+ } else q.hasClass("pulling-text") && q.css({
422
+ opacity: e,
423
+ transform: "translate(-50%, -50%)"
424
+ })
425
+ }
426
+ }
427
+ }
428
+ });
429
+ $(document).on("touchend mouseup touchcancel mouseleave", function(e) {
430
+ C && T(e)
431
+ });
432
+ try {
433
+ const e = 0 < A.length && A.every(a => "left" ===
434
+ a || "right" === a),
435
+ n = 0 < A.length && A.every(a => "up" === a || "down" === a);
436
+ var H = d.touchAction || "auto";
437
+ d.touchAction || (e ? H = "pan-x" : n && (H = "pan-y"));
438
+ l.css({
439
+ "touch-action": H,
440
+ "user-select": "none"
441
+ });
442
+ const h = d.preventNativeScroll;
443
+ if (!0 === h || "auto" === h) {
444
+ const a = l[0];
445
+ if (a && a.addEventListener) {
446
+ const b = !0 === h;
447
+ H = function(f) {
448
+ try {
449
+ if (f && "touchmove" === f.type && C)
450
+ if (b) f.cancelable && f.preventDefault();
451
+ else if (B && A.includes(p)) f.cancelable && f.preventDefault();
452
+ else {
453
+ var g = Math.abs(r || 0),
454
+ x = Math.abs(t || 0);
455
+ e && g > x && g > d.minSwipeDistance ?
456
+ f.cancelable && f.preventDefault() : n && x > g && x > d.minSwipeDistance && f.cancelable && f.preventDefault()
457
+ }
458
+ } catch (m) {}
459
+ };
460
+ a.__pullingTouchMoveAttached || (a.addEventListener("touchmove", H, {
461
+ passive: !1
462
+ }), a.__pullingTouchMoveAttached = !0)
463
+ }
464
+ }
465
+ } catch (e) {}
466
+ l.data("pullingInit", !0);
467
+ l.data("pullingSettings", d)
468
+ } else console.error("Canvas context could not be obtained")
469
+ } else console.error("Canvas element could not be created")
470
+ }
471
+ })
472
+ })
473
+ })();