Packages
nitro
5.1.2
11.4.16
11.4.15
11.4.14
9.9.7
9.9.6
8.2.4
8.2.3
8.2.2
8.2.1
8.2.0
7.12.1
7.10.0
7.9.3
7.9.2
7.9.1
7.9.0
7.8.3
7.8.2
7.8.0
7.7.1
7.7.0
7.6.2
7.6.1
7.6.0
7.5.0
7.4.2
7.4.1
7.4.0
7.2.1
7.2.0
7.1.1
7.1.0
6.12.0
6.11.11
6.11.10
6.11.9
6.11.8
6.11.7
6.11.6
6.11.4
6.11.2
6.11.1
6.10.9
6.10.8
6.10.7
6.10.6
6.10.5
6.10.4
6.10.3
6.10.2
6.10.1
6.9.1
6.6.1
6.5.0
6.4.4
6.4.3
6.4.2
6.4.1
6.4.0
5.12.4
5.12.3
5.12.2
5.12.1
5.12.0
5.11.1
5.11.0
5.9.2
5.9.1
5.8.5
5.8.4
5.8.3
5.8.1
5.8.0
5.6.1
5.5.1
5.4.3
5.4.2
5.4.1
5.3.1
5.3.0
5.2.1
5.1.7
5.1.6
5.1.5
5.1.4
5.1.3
5.1.2
5.1.1
4.12.11
4.12.10
4.12.9
4.12.8
4.12.7
4.12.6
4.12.5
4.12.4
4.12.3
4.12.2
4.12.1
4.12.0
4.11.13
4.11.12
4.11.11
4.11.10
4.11.9
4.11.8
4.11.7
4.11.6
4.11.5
4.11.4
4.11.3
4.11.2
4.11.1
4.11.0
4.10.9
4.10.8
4.10.7
4.10.6
4.10.5
4.10.4
4.10.3
4.10.2
4.10.1
4.10.0
4.7.7
4.7.4
4.7.3
4.7.2
4.7.1
4.7.0
4.4.1
4.4.0
1.4.0
NITRO Nitrogen Web Framework
Current section
Files
Jump to
Current section
Files
priv/js/sortable.js
"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
window.addEventListener('touchmove', function () {});
var Sortable =
/*#__PURE__*/
function () {
function Sortable(list, options) {
_classCallCheck(this, Sortable);
this.list = typeof list === 'string' ? document.querySelector(list) : list;
this.items = Array.from(this.list.children);
this.animation = false;
this.options = Object.assign({
animationSpeed: 200,
animationEasing: 'ease-out'
}, options || {});
this.dragStart = this.dragStart.bind(this);
this.dragMove = this.dragMove.bind(this);
this.dragEnd = this.dragEnd.bind(this);
this.list.addEventListener('touchstart', this.dragStart, false);
this.list.addEventListener('mousedown', this.dragStart, false);
}
_createClass(Sortable, [{
key: "dragStart",
value: function dragStart(e) {
var _this = this;
if (this.animation) return;
if (e.type === 'mousedown' && e.which !== 1) return;
if (e.type === 'touchstart' && e.touches.length > 1) return;
this.handle = null;
var el = e.target;
while (el) {
if (el.hasAttribute('data-sortable-handle')) this.handle = el;
if (el.hasAttribute('data-sortable-item')) this.item = el;
if (el.hasAttribute('data-sortable-list')) break;
el = el.parentElement;
}
if (!this.handle) return;
this.list.style.position = 'relative';
this.list.style.height = this.list.offsetHeight + 'px';
this.item.classList.add('is-dragging');
this.itemHeight = this.items[1].offsetTop;
this.listHeight = this.list.offsetHeight;
this.startTouchY = this.getDragY(e);
this.startTop = this.item.offsetTop;
var offsetsTop = this.items.map(function (item) {
return item.offsetTop;
});
this.items.forEach(function (item, index) {
item.style.position = 'absolute';
item.style.top = 0;
item.style.left = 0;
item.style.width = '100%';
item.style.transform = "translateY(".concat(offsetsTop[index], "px)");
item.style.zIndex = item == _this.item ? 2 : 1;
});
setTimeout(function () {
_this.items.forEach(function (item) {
if (_this.item == item) return;
item.style.transition = "transform ".concat(_this.options.animationSpeed, "ms ").concat(_this.options.animationEasing);
});
});
this.positions = this.items.map(function (item, index) {
return index;
});
this.position = Math.round(this.startTop / this.listHeight * this.items.length);
this.touch = e.type == 'touchstart';
window.addEventListener(this.touch ? 'touchmove' : 'mousemove', this.dragMove, {
passive: false
});
window.addEventListener(this.touch ? 'touchend' : 'mouseup', this.dragEnd, false);
}
}, {
key: "dragMove",
value: function dragMove(e) {
var _this2 = this;
if (this.animation) return;
var top = this.startTop + this.getDragY(e) - this.startTouchY;
var newPosition = Math.round(top / this.listHeight * this.items.length);
this.item.style.transform = "translateY(".concat(top, "px)");
this.positions.forEach(function (index) {
if (index == _this2.position || index != newPosition) return;
_this2.swapElements(_this2.positions, _this2.position, index);
_this2.position = index;
});
this.items.forEach(function (item, index) {
if (item == _this2.item) return;
item.style.transform = "translateY(".concat(_this2.positions.indexOf(index) * _this2.itemHeight, "px)");
});
e.preventDefault();
}
}, {
key: "dragEnd",
value: function dragEnd(e) {
var _this3 = this;
this.animation = true;
this.item.style.transition = "all ".concat(this.options.animationSpeed, "ms ").concat(this.options.animationEasing);
this.item.style.transform = "translateY(".concat(this.position * this.itemHeight, "px)");
this.item.classList.remove('is-dragging');
setTimeout(function () {
_this3.list.style.position = '';
_this3.list.style.height = '';
_this3.items.forEach(function (item) {
item.style.top = '';
item.style.left = '';
item.style.right = '';
item.style.position = '';
item.style.transform = '';
item.style.transition = '';
item.style.width = '';
item.style.zIndex = '';
});
_this3.positions.map(function (i) {
return _this3.list.appendChild(_this3.items[i]);
});
_this3.items = Array.from(_this3.list.children);
_this3.animation = false;
}, this.options.animationSpeed);
window.removeEventListener(this.touch ? 'touchmove' : 'mousemove', this.dragMove, {
passive: false
});
window.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.dragEnd, false);
}
}, {
key: "swapElements",
value: function swapElements(array, a, b) {
var temp = array[a];
array[a] = array[b];
array[b] = temp;
}
}, {
key: "getDragY",
value: function getDragY(e) {
return e.touches ? (e.touches[0] || e.changedTouches[0]).pageY : e.pageY;
}
}, {
key: "removeItem",
value: function removeItem(item) {
this.items.splice(this.items.indexOf(item),1);
item.remove();
}
}, {
key: "addItemFrom",
value: function addItemFrom(input) {
var value = querySourceRaw(input);
var inputElement = document.getElementById(input);
if (inputElement) inputElement.value = '';
var template = document.createElement('template');
template.innerHTML =
'<div class="list__item" data-sortable-item="data-sortable-item" style="">'+
'<div class="list__item-close" onclick="removeSortableItem(\'#' + this.list.id + '\', this.parentNode);"></div>'+
'<div class="list__item-content">'+
'<div class="list__item-title">' + value + '</div>'+
'</div>'+
'<div class="list__item-handle" data-sortable-handle="data-sortable-handle"></div>'+
'</div>'
var new_item = template.content.firstChild;
this.list.appendChild(new_item);
this.items.push(new_item);
}
}, {
key: "getValues",
value: function getValues() {
return Array.from(this.items.map(function(item) { return item.children[1].firstChild.innerHTML; }));
}
}]);
return Sortable;
}();
var SortableMap = new Map([]);
function createSortable(list) {
SortableMap.set(list, new Sortable(list));
}
function removeSortableItem(list, item) {
SortableMap.get(list).removeItem(item);
}
function addSortableItemFrom(list, input) {
SortableMap.get(list).addItemFrom(input);
}
function getSortableValues(list) {
console.log('getSortableValues',list)
let sortable = SortableMap.get(list)
if(sortable) {
return sortable.getValues();
} else {
return Array.from([]);
}
}