Initial Commit after switching from SVN to git
This commit is contained in:
@@ -0,0 +1,288 @@
|
||||
|
||||
if (!Element.prototype.matches) {
|
||||
Element.prototype.matches =
|
||||
Element.prototype.msMatchesSelector ||
|
||||
Element.prototype.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
if (!Element.prototype.closest) {
|
||||
Element.prototype.closest = function (s) {
|
||||
var el = this;
|
||||
|
||||
do {
|
||||
if (Element.prototype.matches.call(el, s)) return el;
|
||||
el = el.parentElement || el.parentNode;
|
||||
} while (el !== null && el.nodeType === 1);
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
||||
(function (name, factory) {
|
||||
|
||||
if (typeof window === "object") {
|
||||
|
||||
// add to window
|
||||
window[name] = factory();
|
||||
|
||||
// add jquery plugin, if available
|
||||
if (typeof jQuery === "function") {
|
||||
jQuery.fn[name] = function (options) {
|
||||
return this.each(function () {
|
||||
new window[name](this, options);
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
})("Sortable", function () {
|
||||
|
||||
// get position of mouse/touch in relation to viewport
|
||||
var getPoint = function (e) {
|
||||
var _w = window,
|
||||
_b = document.body,
|
||||
_d = document.documentElement;
|
||||
var scrollX = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
|
||||
scrollY = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0),
|
||||
pointX = e ? (Math.max(0, e.pageX || e.clientX || 0) - scrollX) : 0,
|
||||
pointY = e ? (Math.max(0, e.pageY || e.clientY || 0) - scrollY) : 0;
|
||||
|
||||
return { x: pointX, y: pointY };
|
||||
};
|
||||
|
||||
// class constructor
|
||||
var Factory = function (container, options) {
|
||||
if (container && container instanceof Element) {
|
||||
this._container = container;
|
||||
this._options = options || {}; /* nothing atm */
|
||||
this._clickItem = null;
|
||||
this._dragItem = null;
|
||||
this._showDragItem = (typeof this._options.dragItem === 'boolean' && this._options.dragItem === false) ? false : true;
|
||||
this._hovItem = null;
|
||||
this._sortLists = [];
|
||||
this._click = {};
|
||||
this._dragging = false;
|
||||
this._dragHandleClass = this._options.dragHandleClass || '';
|
||||
this._parentident = this._options.parentident || '';
|
||||
this._swapdone = typeof this._options.swapdone === "function" ? this._options._swapdone : null;
|
||||
|
||||
this._container.setAttribute("data-is-sortable", 1);
|
||||
this._container.classList.add("sortable");
|
||||
this._container.style["position"] = "static";
|
||||
|
||||
window.addEventListener("mousedown", this._onPress.bind(this), true);
|
||||
window.addEventListener("touchstart", this._onPress.bind(this), true);
|
||||
window.addEventListener("mouseup", this._onRelease.bind(this), true);
|
||||
window.addEventListener("touchend", this._onRelease.bind(this), true);
|
||||
window.addEventListener("mousemove", this._onMove.bind(this), true);
|
||||
window.addEventListener("touchmove", this._onMove.bind(this), true);
|
||||
}
|
||||
};
|
||||
|
||||
// class prototype
|
||||
Factory.prototype = {
|
||||
constructor: Factory,
|
||||
|
||||
// serialize order into array list
|
||||
toArray: function (attr) {
|
||||
attr = attr || "id";
|
||||
|
||||
var data = [],
|
||||
item = null,
|
||||
uniq = "";
|
||||
|
||||
for (var i = 0; i < this._container.children.length; ++i) {
|
||||
item = this._container.children[i],
|
||||
uniq = item.getAttribute(attr) || "";
|
||||
uniq = uniq.replace(/[^0-9]+/gi, "");
|
||||
data.push(uniq);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
|
||||
// serialize order array into a string
|
||||
toString: function (attr, delimiter) {
|
||||
delimiter = delimiter || ":";
|
||||
return this.toArray(attr).join(delimiter);
|
||||
},
|
||||
|
||||
// checks if mouse x/y is on top of an item
|
||||
_isOnTop: function (item, x, y) {
|
||||
var box = item.getBoundingClientRect(),
|
||||
isx = (x > box.left && x < (box.left + box.width)),
|
||||
isy = (y > box.top && y < (box.top + box.height));
|
||||
return (isx && isy);
|
||||
},
|
||||
|
||||
// manipulate the className of an item (for browsers that lack classList support)
|
||||
_itemClass: function (item, task, cls) {
|
||||
var list = item.className.split(/\s+/),
|
||||
index = list.indexOf(cls);
|
||||
|
||||
if (task === "add" && index == -1) {
|
||||
list.push(cls);
|
||||
item.className = list.join(" ");
|
||||
}
|
||||
else if (task === "remove" && index != -1) {
|
||||
list.splice(index, 1);
|
||||
item.className = list.join(" ");
|
||||
}
|
||||
},
|
||||
|
||||
// swap position of two item in sortable list container
|
||||
_swapItems: function (item1, item2) {
|
||||
var parent1 = item1.parentNode,
|
||||
parent2 = item2.parentNode;
|
||||
if (item2.className.indexOf('nosort') < 0) {
|
||||
if (parent1 !== parent2) {
|
||||
// move to new list
|
||||
parent2.insertBefore(item1, item2);
|
||||
}
|
||||
else {
|
||||
// sort is same list
|
||||
var temp = document.createElement("div");
|
||||
parent1.insertBefore(temp, item1);
|
||||
parent2.insertBefore(item1, item2);
|
||||
parent1.insertBefore(item2, temp);
|
||||
parent1.removeChild(temp);
|
||||
}
|
||||
if (typeof this._swapdone === 'function') {
|
||||
this._swapdone(parent1, parent2, item1, item2);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// update item position
|
||||
_moveItem: function (item, x, y) {
|
||||
item.style["-webkit-transform"] = "translateX( " + x + "px ) translateY( " + y + "px )";
|
||||
item.style["-moz-transform"] = "translateX( " + x + "px ) translateY( " + y + "px )";
|
||||
item.style["-ms-transform"] = "translateX( " + x + "px ) translateY( " + y + "px )";
|
||||
item.style["transform"] = "translateX( " + x + "px ) translateY( " + y + "px )";
|
||||
},
|
||||
|
||||
// make a temp fake item for dragging and add to container
|
||||
_makeDragItem: function (item) {
|
||||
this._trashDragItem();
|
||||
this._sortLists = document.querySelectorAll("[data-is-sortable]");
|
||||
|
||||
this._clickItem = item;
|
||||
this._itemClass(this._clickItem, "add", "sortactive");
|
||||
this._dragItem = document.createElement(item.tagName);
|
||||
this._dragItem.className = "dragging";
|
||||
this._dragItem.innerHTML = item.innerHTML;
|
||||
this._dragItem.style["position"] = "absolute";
|
||||
this._dragItem.style["z-index"] = "999";
|
||||
this._dragItem.style["left"] = (item.offsetLeft || 0) + "px";
|
||||
this._dragItem.style["top"] = (item.offsetTop || 0) + "px";
|
||||
this._dragItem.style["width"] = (item.offsetWidth || 0) + "px";
|
||||
|
||||
if (this._showDragItem === true) {
|
||||
this._container.appendChild(this._dragItem);
|
||||
}
|
||||
},
|
||||
|
||||
// remove drag item that was added to container
|
||||
_trashDragItem: function () {
|
||||
if (this._dragItem && this._clickItem) {
|
||||
this._itemClass(this._clickItem, "remove", "sortactive");
|
||||
this._clickItem = null;
|
||||
|
||||
if (this._showDragItem === true) {
|
||||
this._container.removeChild(this._dragItem);
|
||||
}
|
||||
this._dragItem = null;
|
||||
}
|
||||
},
|
||||
|
||||
// on item press/drag
|
||||
_onPress: function (e) {
|
||||
if (!e) { return; }
|
||||
function op(tgt) {
|
||||
if (tgt && tgt.parentNode === this._container && (this._dragHandleClass === '' || e.target.className.indexOf(this._dragHandleClass) > -1) && tgt.className.indexOf("nosort") < 0) {
|
||||
e.preventDefault();
|
||||
this._dragging = true;
|
||||
this._click = getPoint(e);
|
||||
this._makeDragItem(tgt);
|
||||
this._onMove(e);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (op.call(this, e.target) === false && this._parentident !== '' && e.target.closest(this._parentident)) {
|
||||
op.call(this, e.target.closest(this._parentident))
|
||||
}
|
||||
},
|
||||
|
||||
// on item release/drop
|
||||
_onRelease: function (e) {
|
||||
this._dragging = false;
|
||||
this._trashDragItem();
|
||||
},
|
||||
|
||||
// on item drag/move
|
||||
_onMove: function (e) {
|
||||
if (this._dragItem && this._dragging) {
|
||||
e.preventDefault();
|
||||
|
||||
var point = getPoint(e);
|
||||
var container = this._container;
|
||||
|
||||
// drag fake item
|
||||
if (this._showDragItem === true) {
|
||||
this._moveItem(this._dragItem, (point.x - this._click.x), (point.y - this._click.y));
|
||||
}
|
||||
|
||||
// keep an eye for other sortable lists and switch over to it on hover
|
||||
for (var a = 0; a < this._sortLists.length; ++a) {
|
||||
var subContainer = this._sortLists[a];
|
||||
|
||||
if (this._isOnTop(subContainer, point.x, point.y)) {
|
||||
container = subContainer;
|
||||
}
|
||||
}
|
||||
|
||||
// container is empty, move clicked item over to it on hover
|
||||
if (this._isOnTop(container, point.x, point.y) && container.children.length === 0) {
|
||||
container.appendChild(this._clickItem);
|
||||
return;
|
||||
}
|
||||
|
||||
// check if current drag item is over another item and swap places
|
||||
for (var b = 0; b < container.children.length; ++b) {
|
||||
var subItem = container.children[b];
|
||||
|
||||
if (subItem === this._clickItem || subItem === this._dragItem) {
|
||||
continue;
|
||||
}
|
||||
if (this._isOnTop(subItem, point.x, point.y)) {
|
||||
this._hovItem = subItem;
|
||||
if (subItem.className.indexOf('nosort') < 0) {
|
||||
this._dragItem.className = this._dragItem.className.replace(/\bnotgt\b/g, '');
|
||||
this._swapItems(this._clickItem, subItem);
|
||||
} else {
|
||||
var arr = this._dragItem.className.split(' ');
|
||||
if (arr.indexOf('notgt') === -1) {
|
||||
this._dragItem.className += ' notgt';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
// export
|
||||
return Factory;
|
||||
});
|
||||
|
||||
|
||||
//// helper init function
|
||||
//initSortable(list) {
|
||||
// var listObj = $(list);
|
||||
// var sortable = [];
|
||||
// listObj.each(function (i, d) {
|
||||
// sortable.push(new Sortable(d));
|
||||
// });
|
||||
//}
|
||||
|
||||
Reference in New Issue
Block a user