summaryrefslogtreecommitdiff
path: root/js/components/sortable.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/sortable.js')
-rwxr-xr-xjs/components/sortable.js688
1 files changed, 0 insertions, 688 deletions
diff --git a/js/components/sortable.js b/js/components/sortable.js
deleted file mode 100755
index de378d9..0000000
--- a/js/components/sortable.js
+++ /dev/null
@@ -1,688 +0,0 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2/*
3 * Based on nativesortable - Copyright (c) Brian Grinstead - https://github.com/bgrins/nativesortable
4 */
5(function(addon) {
6
7 var component;
8
9 if (window.UIkit) {
10 component = addon(UIkit);
11 }
12
13 if (typeof define == "function" && define.amd) {
14 define("uikit-sortable", ["uikit"], function(){
15 return component || addon(UIkit);
16 });
17 }
18
19})(function(UI){
20
21 "use strict";
22
23 var supportsTouch = ('ontouchstart' in window || 'MSGesture' in window) || (window.DocumentTouch && document instanceof DocumentTouch),
24 draggingPlaceholder, currentlyDraggingElement, currentlyDraggingTarget, dragging, moving, clickedlink, delayIdle, touchedlists, moved, overElement, startEvent;
25
26 var POINTER_DOWN = supportsTouch ? ('MSGesture' in window ? 'pointerdown':'touchstart') : 'mousedown',
27 POINTER_MOVE = supportsTouch ? ('MSGesture' in window ? 'pointermove':'touchmove') : 'mousemove',
28 POINTER_UP = supportsTouch ? ('MSGesture' in window ? 'pointerup':'touchend') : 'mouseup';
29
30 function closestSortable(ele) {
31
32 ele = UI.$(ele);
33
34 do {
35 if (ele.data('sortable')) {
36 return ele;
37 }
38 ele = UI.$(ele).parent();
39 } while(ele.length);
40
41 return ele;
42 }
43
44 UI.component('sortable', {
45
46 defaults: {
47
48 animation : 150,
49 threshold : 10,
50
51 childClass : 'uk-sortable-item',
52 placeholderClass : 'uk-sortable-placeholder',
53 overClass : 'uk-sortable-over',
54 draggingClass : 'uk-sortable-dragged',
55 dragMovingClass : 'uk-sortable-moving',
56 baseClass : 'uk-sortable',
57 noDragClass : 'uk-sortable-nodrag',
58 emptyClass : 'uk-sortable-empty',
59 dragCustomClass : '',
60 handleClass : false,
61 group : false,
62
63 stop : function() {},
64 start : function() {},
65 change : function() {}
66 },
67
68 boot: function() {
69
70 // auto init
71 UI.ready(function(context) {
72
73 UI.$("[data-uk-sortable]", context).each(function(){
74
75 var ele = UI.$(this);
76
77 if(!ele.data("sortable")) {
78 UI.sortable(ele, UI.Utils.options(ele.attr("data-uk-sortable")));
79 }
80 });
81 });
82
83 UI.$html.on(POINTER_MOVE, function(e) {
84
85 if (delayIdle) {
86
87 var src = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0] : e;
88
89 if (Math.abs(src.pageX - delayIdle.pos.x) > delayIdle.threshold || Math.abs(src.pageY - delayIdle.pos.y) > delayIdle.threshold) {
90 delayIdle.apply(src);
91 }
92 }
93
94 if (draggingPlaceholder) {
95
96 if (!moving) {
97 moving = true;
98 draggingPlaceholder.show();
99
100 draggingPlaceholder.$current.addClass(draggingPlaceholder.$sortable.options.placeholderClass);
101 draggingPlaceholder.$sortable.element.children().addClass(draggingPlaceholder.$sortable.options.childClass);
102
103 UI.$html.addClass(draggingPlaceholder.$sortable.options.dragMovingClass);
104 }
105
106 var offset = draggingPlaceholder.data('mouse-offset'),
107 ev = e.originalEvent.touches && e.originalEvent.touches[0] || e.originalEvent,
108 left = parseInt(ev.pageX, 10) + offset.left,
109 top = parseInt(ev.pageY, 10) + offset.top;
110
111 draggingPlaceholder.css({'left': left, 'top': top });
112
113 // adjust document scrolling
114
115 if (top + (draggingPlaceholder.height()/3) > document.body.offsetHeight) {
116 return;
117 }
118
119 if (top < UI.$win.scrollTop()) {
120 UI.$win.scrollTop(UI.$win.scrollTop() - Math.ceil(draggingPlaceholder.height()/3));
121 } else if ( (top + (draggingPlaceholder.height()/3)) > (window.innerHeight + UI.$win.scrollTop()) ) {
122 UI.$win.scrollTop(UI.$win.scrollTop() + Math.ceil(draggingPlaceholder.height()/3));
123 }
124 }
125 });
126
127 UI.$html.on(POINTER_UP, function(e) {
128
129 delayIdle = clickedlink = false;
130
131 // dragging?
132 if (!currentlyDraggingElement || !draggingPlaceholder) {
133 // completely reset dragging attempt. will cause weird delay behavior elsewise
134 currentlyDraggingElement = draggingPlaceholder = null;
135 return;
136 }
137
138 // inside or outside of sortable?
139 var sortable = closestSortable(currentlyDraggingElement),
140 component = draggingPlaceholder.$sortable,
141 ev = { type: e.type };
142
143 if (sortable[0]) {
144 component.dragDrop(ev, component.element);
145 }
146 component.dragEnd(ev, component.element);
147 });
148 },
149
150 init: function() {
151
152 var $this = this,
153 element = this.element[0];
154
155 touchedlists = [];
156
157 this.checkEmptyList();
158
159 this.element.data('sortable-group', this.options.group ? this.options.group : UI.Utils.uid('sortable-group'));
160
161 var handleDragStart = delegate(function(e) {
162
163 if (e.data && e.data.sortable) {
164 return;
165 }
166
167 var $target = UI.$(e.target),
168 $link = $target.is('a[href]') ? $target:$target.parents('a[href]');
169
170 if ($target.is(':input')) {
171 return;
172 }
173
174 if ($this.options.handleClass) {
175 var handle = $target.hasClass($this.options.handleClass) ? $target : $target.closest('.'+$this.options.handleClass, $this.element);
176 if (!handle.length) return;
177 }
178
179 e.preventDefault();
180
181 if ($link.length) {
182
183 $link.one('click', function(e){
184 e.preventDefault();
185 }).one(POINTER_UP, function(){
186
187 if (!moved) {
188 $link.trigger('click');
189 if (supportsTouch && $link.attr('href').trim()) {
190 location.href = $link.attr('href');
191 }
192 }
193 });
194 }
195
196 e.data = e.data || {};
197
198 e.data.sortable = element;
199
200 return $this.dragStart(e, this);
201 });
202
203 var handleDragEnter = delegate(UI.Utils.debounce(function(e) {
204 return $this.dragEnter(e, this);
205 }), 40);
206
207 var handleDragLeave = delegate(function(e) {
208
209 // Prevent dragenter on a child from allowing a dragleave on the container
210 var previousCounter = $this.dragenterData(this);
211 $this.dragenterData(this, previousCounter - 1);
212
213 // This is a fix for child elements firing dragenter before the parent fires dragleave
214 if (!$this.dragenterData(this)) {
215 UI.$(this).removeClass($this.options.overClass);
216 $this.dragenterData(this, false);
217 }
218 });
219
220 var handleTouchMove = delegate(function(e) {
221
222 if (!currentlyDraggingElement ||
223 currentlyDraggingElement === this ||
224 currentlyDraggingTarget === this) {
225 return true;
226 }
227
228 $this.element.children().removeClass($this.options.overClass);
229 currentlyDraggingTarget = this;
230
231 $this.moveElementNextTo(currentlyDraggingElement, this);
232
233 return prevent(e);
234 });
235
236 // Bind/unbind standard mouse/touch events as a polyfill.
237 function addDragHandlers() {
238
239 if (supportsTouch && startEvent.touches && startEvent.touches.length) {
240 element.addEventListener(POINTER_MOVE, handleTouchMove, false);
241 } else {
242 element.addEventListener('mouseover', handleDragEnter, false);
243 element.addEventListener('mouseout', handleDragLeave, false);
244 }
245
246 // document.addEventListener("selectstart", prevent, false);
247 }
248
249 function removeDragHandlers() {
250 if (supportsTouch && startEvent.touches && startEvent.touches.length) {
251 element.removeEventListener(POINTER_MOVE, handleTouchMove, false);
252 } else {
253 element.removeEventListener('mouseover', handleDragEnter, false);
254 element.removeEventListener('mouseout', handleDragLeave, false);
255 }
256
257 // document.removeEventListener("selectstart", prevent, false);
258 }
259
260 this.addDragHandlers = addDragHandlers;
261 this.removeDragHandlers = removeDragHandlers;
262
263 function handleDragMove(e) {
264
265 if (!currentlyDraggingElement) {
266 return;
267 }
268
269 $this.dragMove(e, $this);
270 }
271
272 function delegate(fn) {
273
274 return function(e) {
275
276 var touch, target, context;
277
278 startEvent = e;
279
280 if (e) {
281 touch = e.touches && e.touches[0] || e;
282 target = touch.target || e.target;
283
284 // Fix event.target for a touch event
285 if (supportsTouch && document.elementFromPoint) {
286 target = document.elementFromPoint(touch.pageX - document.body.scrollLeft, touch.pageY - document.body.scrollTop);
287 }
288
289 overElement = UI.$(target);
290 }
291
292 if (UI.$(target).hasClass('.'+$this.options.childClass)) {
293 fn.apply(target, [e]);
294 } else if (target !== element) {
295
296 // If a child is initiating the event or ending it, then use the container as context for the callback.
297 context = moveUpToChildNode(element, target);
298
299 if (context) {
300 fn.apply(context, [e]);
301 }
302 }
303 };
304 }
305
306 window.addEventListener(POINTER_MOVE, handleDragMove, false);
307 element.addEventListener(POINTER_DOWN, handleDragStart, false);
308 },
309
310 dragStart: function(e, elem) {
311
312 moved = false;
313 moving = false;
314 dragging = false;
315
316 var $this = this,
317 target = UI.$(e.target);
318
319 if (!supportsTouch && e.button==2) {
320 return;
321 }
322
323 if (target.is('.'+$this.options.noDragClass) || target.closest('.'+$this.options.noDragClass).length) {
324 return;
325 }
326
327 // prevent dragging if taget is a form field
328 if (target.is(':input')) {
329 return;
330 }
331
332 currentlyDraggingElement = elem;
333
334 // init drag placeholder
335 if (draggingPlaceholder) {
336 draggingPlaceholder.remove();
337 }
338
339 var $current = UI.$(currentlyDraggingElement), offset = $current.offset(), ev = e.touches && e.touches[0] || e;
340
341 delayIdle = {
342
343 pos : { x:ev.pageX, y:ev.pageY },
344 threshold : $this.options.handleClass ? 1 : $this.options.threshold,
345 apply : function(evt) {
346
347 draggingPlaceholder = UI.$('<div class="'+([$this.options.draggingClass, $this.options.dragCustomClass].join(' '))+'"></div>').css({
348 display : 'none',
349 top : offset.top,
350 left : offset.left,
351 width : $current.width(),
352 height : $current.height(),
353 padding : $current.css('padding')
354 }).data({
355 'mouse-offset': {
356 'left' : offset.left - parseInt(ev.pageX, 10),
357 'top' : offset.top - parseInt(ev.pageY, 10)
358 },
359 'origin' : $this.element,
360 'index' : $current.index()
361 }).append($current.html()).appendTo('body');
362
363 draggingPlaceholder.$current = $current;
364 draggingPlaceholder.$sortable = $this;
365
366 $current.data({
367 'start-list': $current.parent(),
368 'start-index': $current.index(),
369 'sortable-group': $this.options.group
370 });
371
372 $this.addDragHandlers();
373
374 $this.options.start(this, currentlyDraggingElement);
375 $this.trigger('start.uk.sortable', [$this, currentlyDraggingElement, draggingPlaceholder]);
376
377 moved = true;
378 delayIdle = false;
379 }
380 };
381 },
382
383 dragMove: function(e, elem) {
384
385 overElement = UI.$(document.elementFromPoint(e.pageX - (document.body.scrollLeft || document.scrollLeft || 0), e.pageY - (document.body.scrollTop || document.documentElement.scrollTop || 0)));
386
387 var overRoot = overElement.closest('.'+this.options.baseClass),
388 groupOver = overRoot.data("sortable-group"),
389 $current = UI.$(currentlyDraggingElement),
390 currentRoot = $current.parent(),
391 groupCurrent = $current.data("sortable-group"),
392 overChild;
393
394 if (overRoot[0] !== currentRoot[0] && groupCurrent !== undefined && groupOver === groupCurrent) {
395
396 overRoot.data('sortable').addDragHandlers();
397
398 touchedlists.push(overRoot);
399 overRoot.children().addClass(this.options.childClass);
400
401 // swap root
402 if (overRoot.children().length > 0) {
403 overChild = overElement.closest('.'+this.options.childClass);
404
405 if (overChild.length) {
406 overChild.before($current);
407 } else {
408 overRoot.append($current);
409 }
410
411 } else { // empty list
412 overElement.append($current);
413 }
414
415 UIkit.$doc.trigger('mouseover');
416 }
417
418 this.checkEmptyList();
419 this.checkEmptyList(currentRoot);
420 },
421
422 dragEnter: function(e, elem) {
423
424 if (!currentlyDraggingElement || currentlyDraggingElement === elem) {
425 return true;
426 }
427
428 var previousCounter = this.dragenterData(elem);
429
430 this.dragenterData(elem, previousCounter + 1);
431
432 // Prevent dragenter on a child from allowing a dragleave on the container
433 if (previousCounter === 0) {
434
435 var currentlist = UI.$(elem).parent(),
436 startlist = UI.$(currentlyDraggingElement).data("start-list");
437
438 if (currentlist[0] !== startlist[0]) {
439
440 var groupOver = currentlist.data('sortable-group'),
441 groupCurrent = UI.$(currentlyDraggingElement).data("sortable-group");
442
443 if ((groupOver || groupCurrent) && (groupOver != groupCurrent)) {
444 return false;
445 }
446 }
447
448 UI.$(elem).addClass(this.options.overClass);
449 this.moveElementNextTo(currentlyDraggingElement, elem);
450 }
451
452 return false;
453 },
454
455 dragEnd: function(e, elem) {
456
457 var $this = this;
458
459 // avoid triggering event twice
460 if (currentlyDraggingElement) {
461 // TODO: trigger on right element?
462 this.options.stop(elem);
463 this.trigger('stop.uk.sortable', [this]);
464 }
465
466 currentlyDraggingElement = null;
467 currentlyDraggingTarget = null;
468
469 touchedlists.push(this.element);
470 touchedlists.forEach(function(el, i) {
471 UI.$(el).children().each(function() {
472 if (this.nodeType === 1) {
473 UI.$(this).removeClass($this.options.overClass)
474 .removeClass($this.options.placeholderClass)
475 .removeClass($this.options.childClass);
476 $this.dragenterData(this, false);
477 }
478 });
479 });
480
481 touchedlists = [];
482
483 UI.$html.removeClass(this.options.dragMovingClass);
484
485 this.removeDragHandlers();
486
487 if (draggingPlaceholder) {
488 draggingPlaceholder.remove();
489 draggingPlaceholder = null;
490 }
491 },
492
493 dragDrop: function(e, elem) {
494
495 if (e.type === 'drop') {
496
497 if (e.stopPropagation) {
498 e.stopPropagation();
499 }
500
501 if (e.preventDefault) {
502 e.preventDefault();
503 }
504 }
505
506 this.triggerChangeEvents();
507 },
508
509 triggerChangeEvents: function() {
510
511 // trigger events once
512 if (!currentlyDraggingElement) return;
513
514 var $current = UI.$(currentlyDraggingElement),
515 oldRoot = draggingPlaceholder.data("origin"),
516 newRoot = $current.closest('.'+this.options.baseClass),
517 triggers = [],
518 el = UI.$(currentlyDraggingElement);
519
520 // events depending on move inside lists or across lists
521 if (oldRoot[0] === newRoot[0] && draggingPlaceholder.data('index') != $current.index() ) {
522 triggers.push({sortable: this, mode: 'moved'});
523 } else if (oldRoot[0] != newRoot[0]) {
524 triggers.push({sortable: UI.$(newRoot).data('sortable'), mode: 'added'}, {sortable: UI.$(oldRoot).data('sortable'), mode: 'removed'});
525 }
526
527 triggers.forEach(function (trigger, i) {
528 if (trigger.sortable) {
529 trigger.sortable.element.trigger('change.uk.sortable', [trigger.sortable, el, trigger.mode]);
530 }
531 });
532 },
533
534 dragenterData: function(element, val) {
535
536 element = UI.$(element);
537
538 if (arguments.length == 1) {
539 return parseInt(element.data('child-dragenter'), 10) || 0;
540 } else if (!val) {
541 element.removeData('child-dragenter');
542 } else {
543 element.data('child-dragenter', Math.max(0, val));
544 }
545 },
546
547 moveElementNextTo: function(element, elementToMoveNextTo) {
548
549 dragging = true;
550
551 var $this = this,
552 list = UI.$(element).parent().css('min-height', ''),
553 next = isBelow(element, elementToMoveNextTo) ? elementToMoveNextTo : elementToMoveNextTo.nextSibling,
554 children = list.children(),
555 count = children.length;
556
557 if (!$this.options.animation) {
558 elementToMoveNextTo.parentNode.insertBefore(element, next);
559 UI.Utils.checkDisplay($this.element.parent());
560 return;
561 }
562
563 list.css('min-height', list.height());
564
565 children.stop().each(function(){
566 var ele = UI.$(this),
567 offset = ele.position();
568
569 offset.width = ele.width();
570
571 ele.data('offset-before', offset);
572 });
573
574 elementToMoveNextTo.parentNode.insertBefore(element, next);
575
576 UI.Utils.checkDisplay($this.element.parent());
577
578 children = list.children().each(function() {
579 var ele = UI.$(this);
580 ele.data('offset-after', ele.position());
581 }).each(function() {
582 var ele = UI.$(this),
583 before = ele.data('offset-before');
584 ele.css({'position':'absolute', 'top':before.top, 'left':before.left, 'min-width':before.width });
585 });
586
587 children.each(function(){
588
589 var ele = UI.$(this),
590 before = ele.data('offset-before'),
591 offset = ele.data('offset-after');
592
593 ele.css('pointer-events', 'none').width();
594
595 setTimeout(function(){
596 ele.animate({'top':offset.top, 'left':offset.left}, $this.options.animation, function() {
597 ele.css({'position':'','top':'', 'left':'', 'min-width': '', 'pointer-events':''}).removeClass($this.options.overClass).removeData('child-dragenter');
598 count--;
599 if (!count) {
600 list.css('min-height', '');
601 UI.Utils.checkDisplay($this.element.parent());
602 }
603 });
604 }, 0);
605 });
606 },
607
608 serialize: function() {
609
610 var data = [], item, attribute;
611
612 this.element.children().each(function(j, child) {
613 item = {};
614 for (var i = 0, attr, val; i < child.attributes.length; i++) {
615 attribute = child.attributes[i];
616 if (attribute.name.indexOf('data-') === 0) {
617 attr = attribute.name.substr(5);
618 val = UI.Utils.str2json(attribute.value);
619 item[attr] = (val || attribute.value=='false' || attribute.value=='0') ? val:attribute.value;
620 }
621 }
622 data.push(item);
623 });
624
625 return data;
626 },
627
628 checkEmptyList: function(list) {
629
630 list = list ? UI.$(list) : this.element;
631
632 if (this.options.emptyClass) {
633 list[!list.children().length ? 'addClass':'removeClass'](this.options.emptyClass);
634 }
635 }
636 });
637
638 // helpers
639
640 function isBelow(el1, el2) {
641
642 var parent = el1.parentNode;
643
644 if (el2.parentNode != parent) {
645 return false;
646 }
647
648 var cur = el1.previousSibling;
649
650 while (cur && cur.nodeType !== 9) {
651 if (cur === el2) {
652 return true;
653 }
654 cur = cur.previousSibling;
655 }
656
657 return false;
658 }
659
660 function moveUpToChildNode(parent, child) {
661 var cur = child;
662 if (cur == parent) { return null; }
663
664 while (cur) {
665 if (cur.parentNode === parent) {
666 return cur;
667 }
668
669 cur = cur.parentNode;
670 if ( !cur || !cur.ownerDocument || cur.nodeType === 11 ) {
671 break;
672 }
673 }
674 return null;
675 }
676
677 function prevent(e) {
678 if (e.stopPropagation) {
679 e.stopPropagation();
680 }
681 if (e.preventDefault) {
682 e.preventDefault();
683 }
684 e.returnValue = false;
685 }
686
687 return UI.sortable;
688});
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-26 09:09:59 +0000