joomla/Demo-Component
joomla/Demo-Component
32
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
16c0b2af69
Demo-Component/media/uikit-v2/js/components/sortable.js

701 lines
24 KiB
JavaScript
Raw Normal View History

Updated with JCB v2.9.15
2019-04-23 20:37:57 +00:00
/*! UIkit 2.27.5 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
fixed the router
2017-04-08 18:35:55 +00:00
/*
* Based on nativesortable - Copyright (c) Brian Grinstead - https://github.com/bgrins/nativesortable
*/
(function(addon) {
var component;
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if (window.UIkit2) {
component = addon(UIkit2);
fixed the router
2017-04-08 18:35:55 +00:00
}
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if (typeof define == 'function' && define.amd) {
define('uikit-sortable', ['uikit'], function(){
return component || addon(UIkit2);
fixed the router
2017-04-08 18:35:55 +00:00
});
}
})(function(UI){
"use strict";
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
var supportsTouch = ('ontouchstart' in window || 'MSGesture' in window) || (window.DocumentTouch && document instanceof DocumentTouch),
draggingPlaceholder, currentlyDraggingElement, currentlyDraggingTarget, dragging, moving, clickedlink, delayIdle, touchedlists, moved, overElement, startEvent;
Updated with JCB v2.9.15
2019-04-23 20:37:57 +00:00
var POINTER_DOWN = supportsTouch ? ('MSGesture' in window || window.PointerEvent ? 'pointerdown':'touchstart') : 'mousedown',
POINTER_MOVE = supportsTouch ? ('MSGesture' in window || window.PointerEvent ? 'pointermove':'touchmove') : 'mousemove',
POINTER_UP = supportsTouch ? ('MSGesture' in window || window.PointerEvent ? 'pointerup':'touchend') : 'mouseup';
fixed the router
2017-04-08 18:35:55 +00:00
function closestSortable(ele) {
ele = UI.$(ele);
do {
if (ele.data('sortable')) {
return ele;
}
ele = UI.$(ele).parent();
} while(ele.length);
return ele;
}
UI.component('sortable', {
defaults: {
animation : 150,
threshold : 10,
childClass : 'uk-sortable-item',
placeholderClass : 'uk-sortable-placeholder',
overClass : 'uk-sortable-over',
draggingClass : 'uk-sortable-dragged',
dragMovingClass : 'uk-sortable-moving',
baseClass : 'uk-sortable',
noDragClass : 'uk-sortable-nodrag',
emptyClass : 'uk-sortable-empty',
dragCustomClass : '',
handleClass : false,
group : false,
stop : function() {},
start : function() {},
change : function() {}
},
boot: function() {
// auto init
UI.ready(function(context) {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
UI.$('[data-uk-sortable]', context).each(function(){
fixed the router
2017-04-08 18:35:55 +00:00
var ele = UI.$(this);
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if(!ele.data('sortable')) {
UI.sortable(ele, UI.Utils.options(ele.attr('data-uk-sortable')));
fixed the router
2017-04-08 18:35:55 +00:00
}
});
});
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
UI.$html.on(POINTER_MOVE, function(e) {
fixed the router
2017-04-08 18:35:55 +00:00
if (delayIdle) {
var src = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0] : e;
if (Math.abs(src.pageX - delayIdle.pos.x) > delayIdle.threshold || Math.abs(src.pageY - delayIdle.pos.y) > delayIdle.threshold) {
delayIdle.apply(src);
}
}
if (draggingPlaceholder) {
if (!moving) {
moving = true;
draggingPlaceholder.show();
draggingPlaceholder.$current.addClass(draggingPlaceholder.$sortable.options.placeholderClass);
draggingPlaceholder.$sortable.element.children().addClass(draggingPlaceholder.$sortable.options.childClass);
UI.$html.addClass(draggingPlaceholder.$sortable.options.dragMovingClass);
}
var offset = draggingPlaceholder.data('mouse-offset'),
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
ev = e.originalEvent.touches && e.originalEvent.touches[0] || e.originalEvent,
left = parseInt(ev.pageX, 10) + offset.left,
top = parseInt(ev.pageY, 10) + offset.top;
fixed the router
2017-04-08 18:35:55 +00:00
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
draggingPlaceholder.css({left: left, top: top });
fixed the router
2017-04-08 18:35:55 +00:00
// adjust document scrolling
if (top + (draggingPlaceholder.height()/3) > document.body.offsetHeight) {
return;
}
if (top < UI.$win.scrollTop()) {
UI.$win.scrollTop(UI.$win.scrollTop() - Math.ceil(draggingPlaceholder.height()/3));
} else if ( (top + (draggingPlaceholder.height()/3)) > (window.innerHeight + UI.$win.scrollTop()) ) {
UI.$win.scrollTop(UI.$win.scrollTop() + Math.ceil(draggingPlaceholder.height()/3));
}
}
});
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
UI.$html.on(POINTER_UP, function(e) {
fixed the router
2017-04-08 18:35:55 +00:00
delayIdle = clickedlink = false;
// dragging?
if (!currentlyDraggingElement || !draggingPlaceholder) {
// completely reset dragging attempt. will cause weird delay behavior elsewise
currentlyDraggingElement = draggingPlaceholder = null;
return;
}
// inside or outside of sortable?
var sortable = closestSortable(currentlyDraggingElement),
component = draggingPlaceholder.$sortable,
ev = { type: e.type };
if (sortable[0]) {
component.dragDrop(ev, component.element);
}
component.dragEnd(ev, component.element);
});
},
init: function() {
var $this = this,
element = this.element[0];
touchedlists = [];
this.checkEmptyList();
this.element.data('sortable-group', this.options.group ? this.options.group : UI.Utils.uid('sortable-group'));
var handleDragStart = delegate(function(e) {
if (e.data && e.data.sortable) {
return;
}
var $target = UI.$(e.target),
$link = $target.is('a[href]') ? $target:$target.parents('a[href]');
if ($target.is(':input')) {
return;
}
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if ($this.options.handleClass) {
var handle = $target.hasClass($this.options.handleClass) ? $target : $target.closest('.'+$this.options.handleClass, $this.element);
if (!handle.length) return;
}
fixed the router
2017-04-08 18:35:55 +00:00
e.preventDefault();
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if ($link.length) {
fixed the router
2017-04-08 18:35:55 +00:00
$link.one('click', function(e){
e.preventDefault();
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
}).one(POINTER_UP, function(){
if (!moved) {
$link.trigger('click');
if (supportsTouch && $link.attr('href').trim()) {
location.href = $link.attr('href');
}
}
fixed the router
2017-04-08 18:35:55 +00:00
});
}
e.data = e.data || {};
e.data.sortable = element;
return $this.dragStart(e, this);
});
var handleDragEnter = delegate(UI.Utils.debounce(function(e) {
return $this.dragEnter(e, this);
}), 40);
var handleDragLeave = delegate(function(e) {
// Prevent dragenter on a child from allowing a dragleave on the container
var previousCounter = $this.dragenterData(this);
$this.dragenterData(this, previousCounter - 1);
// This is a fix for child elements firing dragenter before the parent fires dragleave
if (!$this.dragenterData(this)) {
UI.$(this).removeClass($this.options.overClass);
$this.dragenterData(this, false);
}
});
var handleTouchMove = delegate(function(e) {
if (!currentlyDraggingElement ||
currentlyDraggingElement === this ||
currentlyDraggingTarget === this) {
return true;
}
$this.element.children().removeClass($this.options.overClass);
currentlyDraggingTarget = this;
$this.moveElementNextTo(currentlyDraggingElement, this);
return prevent(e);
});
// Bind/unbind standard mouse/touch events as a polyfill.
function addDragHandlers() {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if (supportsTouch && startEvent.touches && startEvent.touches.length) {
element.addEventListener(POINTER_MOVE, handleTouchMove, false);
fixed the router
2017-04-08 18:35:55 +00:00
} else {
element.addEventListener('mouseover', handleDragEnter, false);
element.addEventListener('mouseout', handleDragLeave, false);
}
// document.addEventListener("selectstart", prevent, false);
}
function removeDragHandlers() {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if (supportsTouch && startEvent.touches && startEvent.touches.length) {
element.removeEventListener(POINTER_MOVE, handleTouchMove, false);
fixed the router
2017-04-08 18:35:55 +00:00
} else {
element.removeEventListener('mouseover', handleDragEnter, false);
element.removeEventListener('mouseout', handleDragLeave, false);
}
// document.removeEventListener("selectstart", prevent, false);
}
this.addDragHandlers = addDragHandlers;
this.removeDragHandlers = removeDragHandlers;
function handleDragMove(e) {
if (!currentlyDraggingElement) {
return;
}
$this.dragMove(e, $this);
}
function delegate(fn) {
return function(e) {
var touch, target, context;
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
startEvent = e;
fixed the router
2017-04-08 18:35:55 +00:00
if (e) {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
touch = e.touches && e.touches[0] || e;
fixed the router
2017-04-08 18:35:55 +00:00
target = touch.target || e.target;
// Fix event.target for a touch event
if (supportsTouch && document.elementFromPoint) {
Updated with JCB v2.9.15
2019-04-23 20:37:57 +00:00
var _target = document.elementFromPoint(touch.pageX - document.body.scrollLeft, touch.pageY - document.body.scrollTop);
if (_target) {
target = _target;
}
fixed the router
2017-04-08 18:35:55 +00:00
}
overElement = UI.$(target);
}
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
if (UI.$(target).hasClass('.'+$this.options.childClass)) {
fixed the router
2017-04-08 18:35:55 +00:00
fn.apply(target, [e]);
} else if (target !== element) {
// If a child is initiating the event or ending it, then use the container as context for the callback.
context = moveUpToChildNode(element, target);
if (context) {
fn.apply(context, [e]);
}
}
};
}
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
window.addEventListener(POINTER_MOVE, handleDragMove, false);
element.addEventListener(POINTER_DOWN, handleDragStart, false);
fixed the router
2017-04-08 18:35:55 +00:00
},
dragStart: function(e, elem) {
moved = false;
moving = false;
dragging = false;
var $this = this,
target = UI.$(e.target);
if (!supportsTouch && e.button==2) {
return;
}
Updated with JCB v2.9.15
2019-04-23 20:37:57 +00:00
if (target.is('.'+$this.options.noDragClass)) {
return;
}
var noDragParent = target.closest('.'+$this.options.noDragClass);
if (noDragParent.length && this.element.find(noDragParent[0]).length) {
fixed the router
2017-04-08 18:35:55 +00:00
return;
}
// prevent dragging if taget is a form field
if (target.is(':input')) {
return;
}
currentlyDraggingElement = elem;
// init drag placeholder
if (draggingPlaceholder) {
draggingPlaceholder.remove();
}
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
var $current = UI.$(currentlyDraggingElement), offset = $current.offset(), ev = e.touches && e.touches[0] || e;
fixed the router
2017-04-08 18:35:55 +00:00
delayIdle = {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
pos : { x:ev.pageX, y:ev.pageY },
threshold : $this.options.handleClass ? 1 : $this.options.threshold,
fixed the router
2017-04-08 18:35:55 +00:00
apply : function(evt) {
draggingPlaceholder = UI.$('<div class="'+([$this.options.draggingClass, $this.options.dragCustomClass].join(' '))+'"></div>').css({
display : 'none',
top : offset.top,
left : offset.left,
width : $current.width(),
height : $current.height(),
padding : $current.css('padding')
}).data({
'mouse-offset': {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
left : offset.left - parseInt(ev.pageX, 10),
top : offset.top - parseInt(ev.pageY, 10)
fixed the router
2017-04-08 18:35:55 +00:00
},
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
origin : $this.element,
index : $current.index()
fixed the router
2017-04-08 18:35:55 +00:00
}).append($current.html()).appendTo('body');
draggingPlaceholder.$current = $current;
draggingPlaceholder.$sortable = $this;
$current.data({
'start-list': $current.parent(),
'start-index': $current.index(),
'sortable-group': $this.options.group
});
$this.addDragHandlers();
$this.options.start(this, currentlyDraggingElement);
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
$this.trigger('start.uk.sortable', [$this, currentlyDraggingElement, draggingPlaceholder]);
fixed the router
2017-04-08 18:35:55 +00:00
moved = true;
delayIdle = false;
}
};
},
dragMove: function(e, elem) {
overElement = UI.$(document.elementFromPoint(e.pageX - (document.body.scrollLeft || document.scrollLeft || 0), e.pageY - (document.body.scrollTop || document.documentElement.scrollTop || 0)));
var overRoot = overElement.closest('.'+this.options.baseClass),
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
groupOver = overRoot.data('sortable-group'),
fixed the router
2017-04-08 18:35:55 +00:00
$current = UI.$(currentlyDraggingElement),
currentRoot = $current.parent(),
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
groupCurrent = $current.data('sortable-group'),
fixed the router
2017-04-08 18:35:55 +00:00
overChild;
if (overRoot[0] !== currentRoot[0] && groupCurrent !== undefined && groupOver === groupCurrent) {
overRoot.data('sortable').addDragHandlers();
touchedlists.push(overRoot);
overRoot.children().addClass(this.options.childClass);
// swap root
if (overRoot.children().length > 0) {
overChild = overElement.closest('.'+this.options.childClass);
if (overChild.length) {
overChild.before($current);
} else {
overRoot.append($current);
}
} else { // empty list
overElement.append($current);
}
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
UI.$doc.trigger('mouseover');
fixed the router
2017-04-08 18:35:55 +00:00
}
this.checkEmptyList();
this.checkEmptyList(currentRoot);
},
dragEnter: function(e, elem) {
if (!currentlyDraggingElement || currentlyDraggingElement === elem) {
return true;
}
var previousCounter = this.dragenterData(elem);
this.dragenterData(elem, previousCounter + 1);
// Prevent dragenter on a child from allowing a dragleave on the container
if (previousCounter === 0) {
var currentlist = UI.$(elem).parent(),
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
startlist = UI.$(currentlyDraggingElement).data('start-list');
fixed the router
2017-04-08 18:35:55 +00:00
if (currentlist[0] !== startlist[0]) {
var groupOver = currentlist.data('sortable-group'),
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
groupCurrent = UI.$(currentlyDraggingElement).data('sortable-group');
fixed the router
2017-04-08 18:35:55 +00:00
if ((groupOver || groupCurrent) && (groupOver != groupCurrent)) {
return false;
}
}
UI.$(elem).addClass(this.options.overClass);
this.moveElementNextTo(currentlyDraggingElement, elem);
}
return false;
},
dragEnd: function(e, elem) {
var $this = this;
// avoid triggering event twice
if (currentlyDraggingElement) {
// TODO: trigger on right element?
this.options.stop(elem);
this.trigger('stop.uk.sortable', [this]);
}
currentlyDraggingElement = null;
currentlyDraggingTarget = null;
touchedlists.push(this.element);
touchedlists.forEach(function(el, i) {
UI.$(el).children().each(function() {
if (this.nodeType === 1) {
UI.$(this).removeClass($this.options.overClass)
.removeClass($this.options.placeholderClass)
.removeClass($this.options.childClass);
$this.dragenterData(this, false);
}
});
});
touchedlists = [];
UI.$html.removeClass(this.options.dragMovingClass);
this.removeDragHandlers();
if (draggingPlaceholder) {
draggingPlaceholder.remove();
draggingPlaceholder = null;
}
},
dragDrop: function(e, elem) {
if (e.type === 'drop') {
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
}
}
this.triggerChangeEvents();
},
triggerChangeEvents: function() {
// trigger events once
if (!currentlyDraggingElement) return;
var $current = UI.$(currentlyDraggingElement),
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
oldRoot = draggingPlaceholder.data('origin'),
fixed the router
2017-04-08 18:35:55 +00:00
newRoot = $current.closest('.'+this.options.baseClass),
triggers = [],
el = UI.$(currentlyDraggingElement);
// events depending on move inside lists or across lists
if (oldRoot[0] === newRoot[0] && draggingPlaceholder.data('index') != $current.index() ) {
triggers.push({sortable: this, mode: 'moved'});
} else if (oldRoot[0] != newRoot[0]) {
triggers.push({sortable: UI.$(newRoot).data('sortable'), mode: 'added'}, {sortable: UI.$(oldRoot).data('sortable'), mode: 'removed'});
}
triggers.forEach(function (trigger, i) {
if (trigger.sortable) {
trigger.sortable.element.trigger('change.uk.sortable', [trigger.sortable, el, trigger.mode]);
}
});
},
dragenterData: function(element, val) {
element = UI.$(element);
if (arguments.length == 1) {
return parseInt(element.data('child-dragenter'), 10) || 0;
} else if (!val) {
element.removeData('child-dragenter');
} else {
element.data('child-dragenter', Math.max(0, val));
}
},
moveElementNextTo: function(element, elementToMoveNextTo) {
dragging = true;
var $this = this,
list = UI.$(element).parent().css('min-height', ''),
next = isBelow(element, elementToMoveNextTo) ? elementToMoveNextTo : elementToMoveNextTo.nextSibling,
children = list.children(),
count = children.length;
if (!$this.options.animation) {
elementToMoveNextTo.parentNode.insertBefore(element, next);
UI.Utils.checkDisplay($this.element.parent());
return;
}
list.css('min-height', list.height());
children.stop().each(function(){
var ele = UI.$(this),
offset = ele.position();
offset.width = ele.width();
ele.data('offset-before', offset);
});
elementToMoveNextTo.parentNode.insertBefore(element, next);
UI.Utils.checkDisplay($this.element.parent());
children = list.children().each(function() {
var ele = UI.$(this);
ele.data('offset-after', ele.position());
}).each(function() {
var ele = UI.$(this),
before = ele.data('offset-before');
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
ele.css({position:'absolute', top:before.top, left:before.left, minWidth:before.width });
fixed the router
2017-04-08 18:35:55 +00:00
});
children.each(function(){
var ele = UI.$(this),
before = ele.data('offset-before'),
offset = ele.data('offset-after');
ele.css('pointer-events', 'none').width();
setTimeout(function(){
ele.animate({'top':offset.top, 'left':offset.left}, $this.options.animation, function() {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
ele.css({position:'',top:'', left:'', minWidth: '', 'pointer-events':''}).removeClass($this.options.overClass).removeData('child-dragenter');
fixed the router
2017-04-08 18:35:55 +00:00
count--;
if (!count) {
list.css('min-height', '');
UI.Utils.checkDisplay($this.element.parent());
}
});
}, 0);
});
},
serialize: function() {
var data = [], item, attribute;
this.element.children().each(function(j, child) {
item = {};
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
for (var i = 0, attr, val; i < child.attributes.length; i++) {
fixed the router
2017-04-08 18:35:55 +00:00
attribute = child.attributes[i];
if (attribute.name.indexOf('data-') === 0) {
Update for version 2.7.7
2018-05-05 01:16:22 +00:00
attr = attribute.name.substr(5);
val = UI.Utils.str2json(attribute.value);
item[attr] = (val || attribute.value=='false' || attribute.value=='0') ? val:attribute.value;
fixed the router
2017-04-08 18:35:55 +00:00
}
}
data.push(item);
});
return data;
},
checkEmptyList: function(list) {
list = list ? UI.$(list) : this.element;
if (this.options.emptyClass) {
list[!list.children().length ? 'addClass':'removeClass'](this.options.emptyClass);
}
}
});
// helpers
function isBelow(el1, el2) {
var parent = el1.parentNode;
if (el2.parentNode != parent) {
return false;
}
var cur = el1.previousSibling;
while (cur && cur.nodeType !== 9) {
if (cur === el2) {
return true;
}
cur = cur.previousSibling;
}
return false;
}
function moveUpToChildNode(parent, child) {
var cur = child;
if (cur == parent) { return null; }
while (cur) {
if (cur.parentNode === parent) {
return cur;
}
cur = cur.parentNode;
if ( !cur || !cur.ownerDocument || cur.nodeType === 11 ) {
break;
}
}
return null;
}
function prevent(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
}
return UI.sortable;
});
Reference in New Issue Copy Permalink