nestablejs - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

docs/api/methods/bind.html

docs/api/methods/collapseAll.html

docs/api/methods/expandAll.html

docs/api/methods/unbind.html

docs/api/options/classes.html

docs/api/options/collapseButtonContent.html

docs/api/options/expandButtonContent.html

docs/api/options/maxDepth.html

docs/api/options/nodes.html

docs/api/options/showPlaceholderOnMove.html

docs/api/options/threshold.html

docs/assets/css/getting-started.css

docs/assets/js/animation.js

1066

dist/nestable.js

		@@ -1,1027 +0,39 @@
		const DOM = {
		select: (selector, parent = document) => {
		return parent.querySelector(selector);
		},
		selectAll: (selector, parent = document) => {
		return parent.querySelectorAll(selector);
		},
		/**
		* Get an elements children that match the selector
		* @param {Node} elem The base element
		* @param {String} selector CSS3 selector string
		* @return {Array}
		*/
		children: (elem, selector) => {
		const arr = [];
		const children = elem.children;
		const l = children.length;
		for (let i = 0; i < l; ++i){
		const child = children[i];
		if (child.matches(selector)){
		arr.push(child);
		}
		}
		return arr;
		},
		/**
		* Get all DOM element up the tree that match the selector
		* @param {Node} elem The base element
		* @param {String} selector CSS3 selector string
		* @return {Array}
		*/
		parents: (elem, selector) => {
		// Set up a parent array
		var parents = [];

		// Push each parent element to the array
		for ( ; elem && elem !== document; elem = elem.parentNode ) {
		if (selector) {
		if (elem.matches(selector)) {
		parents.push(elem);
		}
		continue;
		}
		parents.push(elem);
		}

		// Return our parent array
		return parents;
		},
		/**
		* Get an element's DOMRect relative to the document instead of the viewport.
		* @param {Object} el HTMLElement
		* @return {Object} Formatted DOMRect copy
		*/
		rect(el) {
		var w = window,
		st = (w.pageYOffset !== undefined) ? w.pageYOffset : (document.documentElement \|\| document.body.parentNode \|\| document.body).scrollTop,
		o = el.getBoundingClientRect(),
		x = w.pageXOffset,
		y = st;
		return {
		left: o.left + x,
		top: o.top + y,
		height: o.height,
		width: o.width
		};
		}
		}

		class Emitter {

		/**
		* Add custom event listener
		* @param {String} event
		* @param {Function} callback
		* @return {Void}
		*/
		on(listener, fn, capture) {
		if (typeof listener === "string") {
		this.listeners = this.listeners \|\| {};
		this.listeners[listener] = this.listeners[listener] \|\| [];
		this.listeners[listener].push(fn);
		} else {
		arguments[0].addEventListener(arguments[1], arguments[2], false);
		}
		}

		/**
		* Remove custom listener listener
		* @param {String} listener
		* @param {Function} callback
		* @return {Void}
		*/
		off(listener, fn) {
		if (typeof listener === "string") {
		this.listeners = this.listeners \|\| {};
		if (listener in this.listeners === false) return;
		this.listeners[listener].splice(this.listeners[listener].indexOf(fn), 1);
		} else {
		arguments[0].removeEventListener(arguments[1], arguments[2]);
		}
		}

		/**
		* Fire custom listener
		* @param {String} listener
		* @return {Void}
		*/
		emit(listener) {
		this.listeners = this.listeners \|\| {};
		if (listener in this.listeners === false) return;
		for (var i = 0; i < this.listeners[listener].length; i++) {
		this.listeners[listener][i].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		}
		}

		class Nestable extends Emitter {
		constructor(list, options) {

		super();

		this.defaultConfig = {
		threshold: 40,
		animation: 0,
		collapseButtonContent: "–",
		expandButtonContent: "+",
		includeContent: false,
		maxDepth: 3,
		showPlaceholderOnMove: false,
		nodes: {
		list: "ol",
		item: "li"
		},
		classes: {
		list: "nst-list",
		item: "nst-item",
		content: "nst-content",
		parent: "nst-parent",
		dragging: "nst-dragging",
		handle: "nst-handle",
		placeholder: "nst-placeholder",
		container: "nst-container",
		button: "nst-button",
		collapsed: "nst-collapsed",
		disabled: "nst-disabled",
		error: "nst-error",
		moving: "nst-moving",
		},

		onInit: () => {},
		onChange: () => {},
		};

		this.config = Object.assign({}, this.defaultConfig, options);

		this.parent = typeof list === "string" ? DOM.select(list) : list;

		if ( !this.parent ) {
		return console.error(`Node (${list}) not found.`);
		}

		if ( this.parent._nestable ) {
		return console.error("There is already a Nestable instance active on this node.");
		}

		this.initialised = false;
		this.disabled = true;
		this.last = { x: 0, y: 0 };

		this.init();
		}

		init(options) {
		if ( !this.initialised ) {

		this.touch =
		"ontouchstart" in window \|\|
		(window.DocumentTouch && document instanceof DocumentTouch);

		if ( options ) {
		this.config = Object.assign({}, this.defaultConfig, options);
		}

		this.dragDepth = 0;

		this.parent.classList.add(this.config.classes.list);
		this.parent.classList.add(this.config.classes.parent);


		const items = DOM.children(this.parent, this.config.nodes.item);
		for ( const item of items ) {
		this._nest(item);
		}

		this.placeholder = document.createElement(this.config.nodes.item);
		this.placeholder.classList.add(this.config.classes.placeholder);

		this._getData();

		this.parent._nestable = this;

		if ( !window._nestableInstances ) {
		window._nestableInstances = 1;

		this.id = 1;
		} else {
		window._nestableInstances += 1;

		this.id = window._nestableInstances
		}

		this.enable();

		this._getData();

		setTimeout(() => {
		this.emit("init");
		}, 10);

		this.initialised = true;
		}
		}

		destroy() {

		if ( this.initialised ) {

		this.initialised = false;

		this.disable();

		this.parent.classList.remove(this.config.classes.list);
		this.parent.classList.remove(this.config.classes.parent);

		delete(this.parent._nestable);

		if ( window._nestableInstances ) {
		window._nestableInstances -= 1;
		}

		const destroyItem = (item) => {
		item.classList.remove(this.config.classes.item);
		item.classList.remove(this.config.classes.collapsed);

		const listEl = item.querySelector(this.config.nodes.list);
		const contentEl = item.querySelector(`.${this.config.classes.content}`);
		const handleEl = item.querySelector(`.${this.config.classes.handle}`);
		const buttonEl = item.querySelector(`.${this.config.classes.button}`);

		// default handle is also the content container
		const defaultHandle = contentEl.classList.contains(this.config.classes.handle);

		const div = document.createDocumentFragment();

		for (var i = contentEl.childNodes.length - 1; i >= 0; i--) {
		div.insertBefore(contentEl.childNodes[i], div.firstChild);
		}

		item.insertBefore(div, contentEl)
		item.removeChild(contentEl);

		if ( listEl ) {
		listEl.classList.remove(this.config.classes.list);
		item.removeChild(buttonEl);

		const items = DOM.children(listEl, this.config.nodes.item);

		for ( const item of items ) {
		destroyItem(item);
		}
		}
		};

		const items = DOM.children(this.parent, this.config.nodes.item);

		for ( const item of items ) {
		destroyItem(item);
		}

		this.emit("destroy", this.parent);
		}
		}

		bind() {
		this.events = {
		start: this._onMouseDown.bind(this),
		move: this._onMouseMove.bind(this),
		end: this._onMouseUp.bind(this),
		};

		if (this.touch) {
		this.parent.addEventListener("touchstart", this.events.start, false);
		document.addEventListener("touchmove", this.events.move, false);
		document.addEventListener("touchend", this.events.end, false);
		document.addEventListener("touchcancel", this.events.end, false);
		} else {
		this.parent.addEventListener("mousedown", this.events.start, false);
		document.addEventListener("mousemove", this.events.move, false);
		document.addEventListener("mouseup", this.events.end, false);
		}
		}

		unbind() {
		this.parent.removeEventListener("mousedown", this.events.start);
		document.removeEventListener("mousemove", this.events.move);
		document.removeEventListener("mouseup", this.events.end);
		}

		enable() {
		if ( this.disabled ) {
		this.bind();

		this.parent.classList.remove(this.config.classes.disabled);

		this.disabled = false;
		}
		}

		disable() {
		if ( !this.disabled ) {
		this.unbind();

		this.parent.classList.add(this.config.classes.disabled);

		this.disabled = true;
		}
		}

		serialise() {
		this.serialize();
		}

		serialize() {
		return this._getData("data");
		}

		collapseAll() {
		const items = DOM.selectAll(`.${this.config.classes.item}`, this.parent);
		for ( const item of items ) {
		if ( !item.classList.contains(this.config.classes.collapsed) ) {
		const btn = item.querySelector(`.${this.config.classes.button}`);

		if ( btn ) {
		this._collapseList(item, btn);
		}
		}
		}
		}

		expandAll() {
		const items = DOM.selectAll(`.${this.config.classes.item}`, this.parent);
		for ( const item of items ) {
		if ( item.classList.contains(this.config.classes.collapsed) ) {
		const btn = item.querySelector(`.${this.config.classes.button}`);

		if ( btn ) {
		this._expandList(item, btn);
		}
		}
		}
		}

		add(element, parent) {

		if ( !parent ) {
		parent = this.parent;
		}

		this._nest(element);

		if ( parent !== this.parent ) {
		const listEl = DOM.select(this.config.nodes.list, parent);

		if ( !listEl ) {
		parent = this._makeParent(parent);
		} else {
		parent = listEl;
		}
		}

		parent.appendChild(element);

		this.update();
		}

		remove(element, removeChildElements = true) {

		const parentEl = element.closest(this.config.nodes.list);

		if ( !removeChildElements ) {
		const childList = element.querySelector(`.${this.config.classes.list}`);

		if ( childList ) {

		const childElements = DOM.children(childList, this.config.nodes.item);

		if ( childElements.length ) {
		const frag = document.createDocumentFragment();

		for (var i = childElements.length - 1; i >= 0; i--) {
		const childElement = childElements[i];
		frag.insertBefore(childElement, frag.firstElementChild);
		}
		parentEl.replaceChild(frag, element);
		}
		}
		} else {
		parentEl.removeChild(element);
		}

		this.update();
		}

		update() {
		this._getData("nodes");

		this.emit("update");
		}

		_nest(el) {
		const handle = el.querySelector(`.${this.config.classes.handle}`);

		const content = document.createElement("div");
		content.classList.add(this.config.classes.content);

		const nodes = el.childNodes;

		if ( !handle ) {
		content.classList.add(this.config.classes.handle);

		for (var i = nodes.length - 1; i >= 0; i--) {
		const node = nodes[i];
		if ( node.nodeName.toLowerCase() !== this.config.nodes.list ) {
		content.insertBefore(node, content.firstChild);
		}
		}
		} else {
		for (var i = nodes.length - 1; i >= 0; i--) {
		const node = nodes[i];
		if ( node !== handle && node.nodeName.toLowerCase() !== this.config.nodes.list ) {
		content.insertBefore(node, content.firstChild);
		}
		}
		}

		el.classList.add(this.config.classes.item);

		const list = el.querySelector(this.config.nodes.list);

		if ( list ) {
		el.insertBefore(content, list);
		const parent = this._makeParent(el);
		const items = DOM.children(parent, this.config.nodes.item);

		if ( el.classList.contains(this.config.classes.collapsed) ) {
		this._collapseList(el);
		}

		for ( const i of items ) {
		this._nest(i);
		}
		} else {
		el.appendChild(content);
		}
		}

		_isDisabled(item) {
		let disabled = false;

		if ( item.classList.contains(this.config.classes.disabled) ) {
		disabled = true;
		}

		const listEls = DOM.parents(item, `.${this.config.classes.disabled}`);

		if ( listEls.length ) {
		disabled = true;
		}

		return disabled;
		}

		/**
		* Get event
		* @return {Object}
		*/
		_getEvent(e) {
		if (this.touch) {
		if (e.type === "touchend") {
		return e.changedTouches[0];
		}
		return e.touches[0];
		}
		return e;
		}

		_onMouseDown(e) {

		const evt = this._getEvent(e);

		const button = e.target.closest(`.${this.config.classes.button}`);
		const item = e.target.closest(`.${this.config.classes.item}`);

		if ( button ) {
		return this._toggleList(item, button);
		}

		const handle = e.target.closest(`.${this.config.classes.handle}`);

		if ( !handle ) {
		return false;
		}

		if ( item ) {
		if ( this._isDisabled(item) ) {
		return false;
		}

		e.preventDefault();

		this.parent.classList.add(this.config.classes.moving);

		item.classList.add(this.config.classes.dragging);

		const rect = DOM.rect(item);

		this.origin = {
		x: evt.pageX, y: evt.pageY,
		original: { x: evt.pageX, y: evt.pageY, }
		};

		this.active = {
		maxDepth: false,
		collapsedParent: false,
		disabledParent: false,
		confinedParent: false,
		node: item, rect: rect,
		parent: false,
		};


		if ( "nestableParent" in item.dataset ) {
		const parent = document.getElementById(item.dataset.nestableParent);

		if ( parent ) {
		this.active.parent = parent;
		}
		}

		this.placeholder.style.height = `${rect.height}px`;
		// this.placeholder.style.width = `${rect.width}px`;

		if ( this.config.showPlaceholderOnMove ) {
		this.placeholder.style.opacity = 0;
		}

		if ( !this.container ) {
		this.container = document.createElement(this.config.nodes.list);
		this.container.classList.add(this.config.classes.list);
		this.container.classList.add(this.config.classes.container);
		this.container.id = `nestable_${this.id}`;
		}

		this.container.style.left = `${rect.left}px`;
		this.container.style.top = `${rect.top}px`;
		this.container.style.height = `${rect.height}px`;
		this.container.style.width = `${rect.width}px`;

		item.parentNode.insertBefore(this.placeholder, item);

		document.body.appendChild(this.container);
		this.container.appendChild(item);

		this.newParent = false;

		this.dragDepth = 0;

		// total depth of dragging item
		const items = DOM.selectAll(this.config.nodes.item, item);
		for (let i = 0; i < items.length; i++) {
		const depth = DOM.parents(items[i], this.config.nodes.list).length - 1;
		if (depth > this.dragDepth) {
		this.dragDepth = depth;
		}
		}

		// console.log(DOM.parents(item, this.config.nodes.list))
		}
		}

		_onMouseMove(e) {
		if ( this.active ) {

		if ( this.config.showPlaceholderOnMove ) {
		this.placeholder.style.opacity = 1;
		}

		e = this._getEvent(e);

		let x = e.pageX - this.origin.x;
		let y = e.pageY - this.origin.y;

		if ( e.pageY > this.last.y ) {
		this.last.dirY = 1;
		} else if ( e.pageY < this.last.y ) {
		this.last.dirY = -1;
		}

		if ( e.pageX > this.last.x ) {
		this.last.dirX = 1;
		} else if ( e.pageX < this.last.x ) {
		this.last.dirX = -1;
		}

		let movement = false;

		if ( Math.abs(x) > Math.abs(y) ) {
		movement = "x";
		} else if ( Math.abs(x) < Math.abs(y) ) {
		movement = "y";
		}

		var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement \|\| document.body.parentNode \|\| document.body).scrollTop;
		const elements = document.elementsFromPoint(e.pageX, e.pageY - scrollTop);

		if ( movement === "x" ) {
		if ( this.last.dirX > 0 && x > this.config.threshold ) { // moving right

		const prevEl = this.placeholder.previousElementSibling;

		if ( prevEl ) {

		if ( prevEl.classList.contains(this.config.classes.collapsed) ) {
		if ( !this.active.collapsedParent ) {
		this.emit("move.collapsed", this.active.node, prevEl);

		this.active.collapsedParent = true;
		}
		} else {
		const disabled = this._isDisabled(prevEl);

		if ( !disabled ) {
		const depth = DOM.parents(this.placeholder, this.config.nodes.list).length;
		let allowNesting = depth + this.dragDepth <= this.config.maxDepth;
		let parentEl = prevEl.querySelector(this.config.nodes.list);

		if ( allowNesting ) {
		this.active.maxDepth = false;
		if ( !parentEl ) {
		parentEl = this._makeParent(prevEl);
		}

		this._moveElement(this.placeholder, {
		parent: parentEl,
		type: "appendChild",
		});

		this.origin.x = e.pageX;
		} else {
		if ( !this.active.maxDepth ) {
		this.emit("move.maxdepth", this.active.node, this.config.maxDepth);

		this.active.maxDepth = true;
		}
		}
		} else {
		if ( !this.active.disabledParent ) {
		this.emit("move.disabled");

		this.active.disabledParent = true;
		}
		}
		}
		}

		} else if ( this.last.dirX < 0 && x < -this.config.threshold ) { // moving left

		this.active.maxDepth = false;
		this.active.disabledParent = false;
		this.active.collapsedParent = false;
		// this.active.confinedParent = false;

		const listEl = this.placeholder.closest(this.config.nodes.list);
		const parentEl = listEl.closest(this.config.nodes.item);

		if ( parentEl &&
		((listEl.childElementCount > 1 && this.placeholder !== listEl.firstElementChild) \|\| listEl.childElementCount < 2 && this.placeholder === listEl.firstElementChild) ) {
		const nextEl = parentEl.nextElementSibling;

		if ( nextEl ) {
		const list = nextEl.closest(this.config.nodes.list);
		this._moveElement(this.placeholder, {
		parent: list,
		type: "insertBefore",
		sibling: nextEl
		});

		this.origin.x = e.pageX;
		} else {
		this._moveElement(this.placeholder, {
		parent: parentEl.closest(this.config.nodes.list),
		type: "appendChild",
		});

		this.origin.x = e.pageX;
		}
		}
		}
		} else {
		// check if we're over a valid item
		for ( const element of elements ) {
		if ( element !== this.active.node &&
		!this.active.node.contains(element) &&
		element.classList.contains(this.config.classes.content) ) {
		const item = element.closest(`.${this.config.classes.item}`);

		if ( item ) {
		if ( movement === "y" ) {
		const childListEl = item.querySelector(this.config.nodes.list);
		if ( childListEl && !item.classList.contains(this.config.classes.collapsed) ) { // item is parent
		if ( this.last.dirY > 0 ) { // moving item down
		this._moveElement(this.placeholder, {
		parent: item.lastElementChild,
		type: "insertBefore",
		sibling: item.lastElementChild.firstElementChild,
		animatable: item.querySelector(`.${this.config.classes.content}`)
		});
		} else if ( this.last.dirY < 0 ) { // moving item up
		this._moveElement(this.placeholder, {
		parent: item.parentNode,
		type: "insertBefore",
		sibling: item,
		animatable: item.querySelector(`.${this.config.classes.content}`)
		});
		}
		} else { // item is not a parent
		if ( this.last.dirY > 0 ) { // moving item down
		const nextEl = item.nextElementSibling;

		if ( nextEl ) { // item has an item below it
		this._moveElement(this.placeholder, {
		parent: item.parentNode,
		type: "insertBefore",
		sibling: nextEl,
		animatable: item.querySelector(`.${this.config.classes.content}`)
		});
		} else { // item is last in list
		this._moveElement(this.placeholder, {
		parent: item.closest(this.config.nodes.list),
		type: "appendChild",
		animatable: item.querySelector(`.${this.config.classes.content}`)
		});
		}
		} else if ( this.last.dirY < 0 ) { // moving item up
		this._moveElement(this.placeholder, {
		parent: item.parentNode,
		type: "insertBefore",
		sibling: item,
		animatable: item.querySelector(`.${this.config.classes.content}`)
		});
		}
		}
		}
		}

		const parentEl = item.closest(`.${this.config.classes.parent}`);

		if ( parentEl ) {
		if ( parentEl !== this.parent ) {
		if ( parentEl._nestable ) {
		this.newParent = parentEl;
		}
		}
		}
		}
		}
		}

		this.placeholder.classList.toggle(this.config.classes.error,
		this.active.disabledParent \|\|
		this.active.maxDepth \|\|
		this.active.collapsedParent \|\|
		this.active.confinedParent);

		this.container.style.transform = `translate3d(${e.pageX - this.origin.original.x}px, ${e.pageY - this.origin.original.y}px, 0)`;

		this.lastParent = this.placeholder.parentNode;
		}

		this.last = {
		x: e.pageX,
		y: e.pageY
		};
		}

		_moveElement(el, type) {
		let ppos = false;
		let ipos = false;

		// prevent moving if item has disabled parents
		if ( this._isDisabled(type.parent) ) {
		return false;
		}

		// prevent moving if item is confined to parent with data-nestable-parent
		if ( this.active.parent ) {
		if ( !DOM.parents(type.parent, `#${this.active.parent.id}`).includes(this.active.parent) ) {
		if ( !this.active.confinedParent ) {

		this.emit("move.confined", el, this.active.parent, type.parent);
		this.active.confinedParent = true;
		}

		return false;
		}
		}

		let listEl = el.closest(this.config.nodes.list);

		// if animation is enabled, we need to get the original position of the element first
		if ( this.config.animation > 0 ) {
		ppos = DOM.rect(this.placeholder);
		if ( type.animatable ) {
		ipos = DOM.rect(type.animatable)
		}
		}

		if ( type.type === "insertBefore" ) {
		type.parent.insertBefore(el, type.sibling);
		} else if ( type.type === "appendChild" ) {
		type.parent.appendChild(el);
		}

		if ( !listEl.childElementCount ) {
		this._unmakeParent(listEl.parentNode);
		}

		this.emit("order.change", this.active.node, type.parent, listEl);

		// animate the elements
		if ( this.config.animation > 0 ) {
		this._animateElement(this.placeholder, ppos);

		if ( type.animatable && ipos ) {
		this._animateElement(type.animatable, ipos);
		}
		}
		}

		_animateElement(el, obj) {
		// Animate an element's change in position
		// caused by a change in the DOM order
		let css = el.style;

		// Get the node's positon AFTER the change
		let r = DOM.rect(el);

		// Calculate the difference in position
		let x = obj.left - r.left;
		let y = obj.top - r.top;

		// Move the node to it's original position before the DOM change
		css.transform = `translate3d(${x}px, ${y}px, 0px)`;
		// css.zIndex = 10000;

		// Trigger a repaint so the next bit works
		el.offsetHeight;

		// Reset the transform, but add a transition so it's smooth
		css.transform = `translate3d(0px, 0px, 0px)`;
		css.transition = `transform ${this.config.animation}ms`;

		// Reset the style
		setTimeout(function() {
		// console.log("foo")
		// css.zIndex = "";
		css.transform = "";
		css.transition = "";
		}, this.config.animation);
		}

		_onMouseUp(e) {
		if ( this.active ) {

		if ( this.config.showPlaceholderOnMove ) {
		this.placeholder.style.opacity = 0;
		}

		e = this._getEvent(e);

		const prect = DOM.rect(this.active.node);

		// this.active.node.removeAttribute("style");
		this.container.removeAttribute("style");

		this.parent.classList.remove(this.config.classes.moving);

		this.placeholder.parentNode.replaceChild(this.active.node, this.placeholder);

		this._animateElement(this.active.node, prect);

		this.placeholder.classList.remove(this.config.classes.error);
		this.active.node.classList.remove(this.config.classes.dragging);

		this.active = false;

		document.body.removeChild(this.container);

		this._getData();

		if ( this.newParent ) {
		this.newParent._nestable._getData();
		}

		this.emit("stop", this.data);

		this.update();
		}
		}

		_toggleList(item, btn) {
		if ( !item.classList.contains(this.config.classes.collapsed) ) {
		this._collapseList(item, btn);
		} else {
		this._expandList(item, btn);
		}
		}

		_collapseList(item, btn) {
		if ( !btn ) {
		btn = item.querySelector(`.${this.config.classes.button}`)
		}

		btn.textContent = this.config.expandButtonContent;
		item.classList.add(this.config.classes.collapsed);
		}

		_expandList(item, btn) {
		if ( !btn ) {
		btn = item.querySelector(`.${this.config.classes.button}`)
		}

		btn.textContent = this.config.collapseButtonContent;
		item.classList.remove(this.config.classes.collapsed);
		}

		_makeParent(el) {
		let parentEl = el.querySelector(this.config.nodes.list);

		if ( !parentEl ) {
		parentEl = document.createElement(this.config.nodes.list);
		parentEl.classList.add(this.config.classes.list);
		el.appendChild(parentEl);
		} else {
		parentEl.classList.add(this.config.classes.list);
		}

		const button = document.createElement("button");
		button.classList.add(this.config.classes.button);
		button.type = "button";
		button.textContent = this.config.collapseButtonContent;
		el.insertBefore(button, el.firstElementChild);

		return parentEl;
		}

		_unmakeParent(el) {
		const list = el.querySelector(this.config.nodes.list);
		const btn = el.querySelector("button");

		if ( list ) {
		el.removeChild(list);
		}

		if ( btn ) {
		el.removeChild(btn);
		}

		return
		}

		_getData(type = "nodes") {
		let data = [];

		const step = (level) => {
		const array = [];
		const items = DOM.children(level, this.config.nodes.item);

		items.forEach((li) => {
		const item = {};

		if ( type === "nodes" ) {
		item.node = li;
		} else {
		item.data = Object.assign({}, li.dataset);

		if (this.config.includeContent) {
		const content = li.querySelector(`.${this.config.classes.content}`);

		if (content) {
		item.content = content.innerHTML;
		}
		}
		}

		const sub = li.querySelector(this.config.nodes.list);

		if (sub) {
		item.children = step(sub);
		}

		array.push(item);
		});

		return array;
		};

		data = step(this.parent);

		if ( type === "nodes" ) {
		this.data = data;
		}

		return data;
		}
		}
		var $jscomp=$jscomp\|\|{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}};$jscomp.arrayIterator=function(a){return{next:$jscomp.arrayIteratorImpl(a)}};$jscomp.makeIterator=function(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];return b?b.call(a):$jscomp.arrayIterator(a)};
		var DOM={select:function(a,b){b=void 0===b?document:b;return b.querySelector(a)},selectAll:function(a,b){b=void 0===b?document:b;return b.querySelectorAll(a)},children:function(a,b){for(var c=[],d=a.children,e=d.length,f=0;f<e;++f){var k=d[f];k.matches(b)&&c.push(k)}return c},parents:function(a,b){for(var c=[];a&&a!==document;a=a.parentNode)b?a.matches(b)&&c.push(a):c.push(a);return c},rect:function(a){var b=window,c=void 0!==b.pageYOffset?b.pageYOffset:(document.documentElement\|\|document.body.parentNode\|\|
		document.body).scrollTop;a=a.getBoundingClientRect();return{left:a.left+b.pageXOffset,top:a.top+c,height:a.height,width:a.width}}},Nestable=function(a,b){this.defaultConfig={threshold:40,animation:0,collapseButtonContent:"\u2013",expandButtonContent:"+",includeContent:!1,maxDepth:3,showPlaceholderOnMove:!1,nodes:{list:"ol",item:"li"},classes:{list:"nst-list",item:"nst-item",content:"nst-content",parent:"nst-parent",dragging:"nst-dragging",handle:"nst-handle",placeholder:"nst-placeholder",container:"nst-container",
		button:"nst-button",collapsed:"nst-collapsed",disabled:"nst-disabled",error:"nst-error",moving:"nst-moving"},onInit:function(){},onChange:function(){}};this.config=Object.assign({},this.defaultConfig,b);this.parent="string"===typeof a?DOM.select(a):a;if(!this.parent)return console.error("Node ("+a+") not found.");if(this.parent._nestable)return console.error("There is already a Nestable instance active on this node.");this.initialised=!1;this.disabled=!0;this.last={x:0,y:0};this.init()};
		Nestable.prototype.init=function(a){var b=this;if(!this.initialised){this.touch="ontouchstart"in window\|\|window.DocumentTouch&&document instanceof DocumentTouch;a&&(this.config=Object.assign({},this.defaultConfig,a));this.dragDepth=0;this.parent.classList.add(this.config.classes.list);this.parent.classList.add(this.config.classes.parent);a=DOM.children(this.parent,this.config.nodes.item);a=$jscomp.makeIterator(a);for(var c=a.next();!c.done;c=a.next())this._nest(c.value);this.placeholder=document.createElement(this.config.nodes.item);
		this.placeholder.classList.add(this.config.classes.placeholder);this._getData();this.parent._nestable=this;window._nestableInstances?(window._nestableInstances+=1,this.id=window._nestableInstances):this.id=window._nestableInstances=1;this.enable();this._getData();setTimeout(function(){b.emit("init")},10);this.initialised=!0}};
		Nestable.prototype.destroy=function(){var a=this;if(this.initialised){this.initialised=!1;this.disable();this.parent.classList.remove(this.config.classes.list);this.parent.classList.remove(this.config.classes.parent);delete this.parent._nestable;window._nestableInstances&&--window._nestableInstances;var b=function(c){c.classList.remove(a.config.classes.item);c.classList.remove(a.config.classes.collapsed);var d=c.querySelector(a.config.nodes.list),e=c.querySelector("."+a.config.classes.content);c.querySelector("."+
		a.config.classes.handle);var l=c.querySelector("."+a.config.classes.button);e.classList.contains(a.config.classes.handle);for(var g=document.createDocumentFragment(),h=e.childNodes.length-1;0<=h;h--)g.insertBefore(e.childNodes[h],g.firstChild);c.insertBefore(g,e);c.removeChild(e);if(d)for(d.classList.remove(a.config.classes.list),c.removeChild(l),c=DOM.children(d,a.config.nodes.item),c=$jscomp.makeIterator(c),d=c.next();!d.done;d=c.next())b(d.value)},c=DOM.children(this.parent,this.config.nodes.item);
		c=$jscomp.makeIterator(c);for(var d=c.next();!d.done;d=c.next())b(d.value);this.emit("destroy",this.parent)}};
		Nestable.prototype.bind=function(){this.events={start:this._onMouseDown.bind(this),move:this._onMouseMove.bind(this),end:this._onMouseUp.bind(this)};this.touch?(this.parent.addEventListener("touchstart",this.events.start,!1),document.addEventListener("touchmove",this.events.move,!1),document.addEventListener("touchend",this.events.end,!1),document.addEventListener("touchcancel",this.events.end,!1)):(this.parent.addEventListener("mousedown",this.events.start,!1),document.addEventListener("mousemove",
		this.events.move,!1),document.addEventListener("mouseup",this.events.end,!1))};Nestable.prototype.unbind=function(){this.parent.removeEventListener("mousedown",this.events.start);document.removeEventListener("mousemove",this.events.move);document.removeEventListener("mouseup",this.events.end)};Nestable.prototype.on=function(a,b,c){"string"===typeof a?(this.listeners=this.listeners\|\|{},this.listeners[a]=this.listeners[a]\|\|[],this.listeners[a].push(b)):a.addEventListener(b,c,!1)};
		Nestable.prototype.off=function(a,b,c){"string"===typeof a?(this.listeners=this.listeners\|\|{},!1!==a in this.listeners&&this.listeners[a].splice(this.listeners[a].indexOf(b),1)):a.removeEventListener(b,c)};Nestable.prototype.emit=function(a){this.listeners=this.listeners\|\|{};if(!1!==a in this.listeners)for(var b=0;b<this.listeners[a].length;b++)this.listeners[a][b].apply(this,Array.prototype.slice.call(arguments,1))};
		Nestable.prototype.enable=function(){this.disabled&&(this.bind(),this.parent.classList.remove(this.config.classes.disabled),this.disabled=!1)};Nestable.prototype.disable=function(){this.disabled\|\|(this.unbind(),this.parent.classList.add(this.config.classes.disabled),this.disabled=!0)};Nestable.prototype.serialise=function(){this.serialize()};Nestable.prototype.serialize=function(){return this._getData("data")};
		Nestable.prototype.collapseAll=function(){var a=DOM.selectAll("."+this.config.classes.item,this.parent);a=$jscomp.makeIterator(a);for(var b=a.next();!b.done;b=a.next())if(b=b.value,!b.classList.contains(this.config.classes.collapsed)){var c=b.querySelector("."+this.config.classes.button);c&&this._collapseList(b,c)}};
		Nestable.prototype.expandAll=function(){var a=DOM.selectAll("."+this.config.classes.item,this.parent);a=$jscomp.makeIterator(a);for(var b=a.next();!b.done;b=a.next())if(b=b.value,b.classList.contains(this.config.classes.collapsed)){var c=b.querySelector("."+this.config.classes.button);c&&this._expandList(b,c)}};Nestable.prototype.add=function(a,b){b\|\|(b=this.parent);this._nest(a);if(b!==this.parent){var c=DOM.select(this.config.nodes.list,b);b=c?c:this._makeParent(b)}b.appendChild(a);this.update()};
		Nestable.prototype.remove=function(a,b){b=void 0===b?!0:b;var c=a.closest(this.config.nodes.list);if(b)c.removeChild(a);else{var d=a.querySelector("."+this.config.classes.list);if(d&&(d=DOM.children(d,this.config.nodes.item),d.length)){for(var e=document.createDocumentFragment(),f=d.length-1;0<=f;f--)e.insertBefore(d[f],e.firstElementChild);c.replaceChild(e,a)}}this.update()};Nestable.prototype.update=function(){this._getData("nodes");this.emit("update")};
		Nestable.prototype._nest=function(a){var b=a.querySelector("."+this.config.classes.handle),c=document.createElement("div");c.classList.add(this.config.classes.content);var d=a.childNodes;if(b)for(f=d.length-1;0<=f;f--){var e=d[f];e!==b&&e.nodeName.toLowerCase()!==this.config.nodes.list&&c.insertBefore(e,c.firstChild)}else{c.classList.add(this.config.classes.handle);for(var f=d.length-1;0<=f;f--)b=d[f],b.nodeName.toLowerCase()!==this.config.nodes.list&&c.insertBefore(b,c.firstChild)}a.classList.add(this.config.classes.item);
		if(d=a.querySelector(this.config.nodes.list))for(a.insertBefore(c,d),c=this._makeParent(a),c=DOM.children(c,this.config.nodes.item),a.classList.contains(this.config.classes.collapsed)&&this._collapseList(a),a=$jscomp.makeIterator(c),c=a.next();!c.done;c=a.next())this._nest(c.value);else a.appendChild(c)};Nestable.prototype._isDisabled=function(a){var b=!1;a.classList.contains(this.config.classes.disabled)&&(b=!0);DOM.parents(a,"."+this.config.classes.disabled).length&&(b=!0);return b};
		Nestable.prototype._getEvent=function(a){return this.touch?"touchend"===a.type?a.changedTouches[0]:a.touches[0]:a};
		Nestable.prototype._onMouseDown=function(a){var b=this._getEvent(a),c=a.target.closest("."+this.config.classes.button),d=a.target.closest("."+this.config.classes.item);if(c)return this._toggleList(d,c);if(!a.target.closest("."+this.config.classes.handle))return!1;if(d){if(this._isDisabled(d))return!1;a.preventDefault();this.parent.classList.add(this.config.classes.moving);d.classList.add(this.config.classes.dragging);a=DOM.rect(d);this.origin={x:b.pageX,y:b.pageY,original:{x:b.pageX,y:b.pageY}};this.active=
		{maxDepth:!1,collapsedParent:!1,disabledParent:!1,confinedParent:!1,node:d,rect:a,parent:!1};"nestableParent"in d.dataset&&(b=document.getElementById(d.dataset.nestableParent))&&(this.active.parent=b);this.placeholder.style.height=a.height+"px";this.config.showPlaceholderOnMove&&(this.placeholder.style.opacity=0);this.container\|\|(this.container=document.createElement(this.config.nodes.list),this.container.classList.add(this.config.classes.list),this.container.classList.add(this.config.classes.container),
		this.container.id="nestable_"+this.id);this.container.style.left=a.left+"px";this.container.style.top=a.top+"px";this.container.style.height=a.height+"px";this.container.style.width=a.width+"px";d.parentNode.insertBefore(this.placeholder,d);document.body.appendChild(this.container);this.container.appendChild(d);this.newParent=!1;this.dragDepth=0;d=DOM.selectAll(this.config.nodes.item,d);for(b=0;b<d.length;b++)a=DOM.parents(d[b],this.config.nodes.list).length-1,a>this.dragDepth&&(this.dragDepth=a)}};
		Nestable.prototype._onMouseMove=function(a){if(this.active){this.config.showPlaceholderOnMove&&(this.placeholder.style.opacity=1);a=this._getEvent(a);var b=a.pageX-this.origin.x,c=a.pageY-this.origin.y;a.pageY>this.last.y?this.last.dirY=1:a.pageY<this.last.y&&(this.last.dirY=-1);a.pageX>this.last.x?this.last.dirX=1:a.pageX<this.last.x&&(this.last.dirX=-1);var d=!1;Math.abs(b)>Math.abs(c)?d="x":Math.abs(b)<Math.abs(c)&&(d="y");c=document.elementsFromPoint(a.pageX,a.pageY-(void 0!==window.pageYOffset?
		window.pageYOffset:(document.documentElement\|\|document.body.parentNode\|\|document.body).scrollTop));if("x"===d)if(0<this.last.dirX&&b>this.config.threshold){if(d=this.placeholder.previousElementSibling)d.classList.contains(this.config.classes.collapsed)?this.active.collapsedParent\|\|(this.emit("error.collapsed",this.active.node,d),this.active.collapsedParent=!0):this._isDisabled(d)?this.active.disabledParent\|\|(this.emit("error.disabled"),this.active.disabledParent=!0):(b=DOM.parents(this.placeholder,
		this.config.nodes.list).length+this.dragDepth<=this.config.maxDepth,c=d.querySelector(this.config.nodes.list),b?(this.active.maxDepth=!1,c\|\|(c=this._makeParent(d)),this._moveElement(this.placeholder,{parent:c,type:"appendChild"}),this.origin.x=a.pageX):this.active.maxDepth\|\|(this.emit("error.maxdepth",this.active.node,this.config.maxDepth),this.active.maxDepth=!0))}else 0>this.last.dirX&&b<-this.config.threshold&&(this.active.maxDepth=!1,this.active.disabledParent=!1,this.active.collapsedParent=!1,
		b=this.placeholder.closest(this.config.nodes.list),(d=b.closest(this.config.nodes.item))&&(1<b.childElementCount&&this.placeholder!==b.firstElementChild\|\|2>b.childElementCount&&this.placeholder===b.firstElementChild)&&((b=d.nextElementSibling)?(d=b.closest(this.config.nodes.list),this._moveElement(this.placeholder,{parent:d,type:"insertBefore",sibling:b})):this._moveElement(this.placeholder,{parent:d.closest(this.config.nodes.list),type:"appendChild"}),this.origin.x=a.pageX));else for(b=$jscomp.makeIterator(c),
		c=b.next();!c.done;c=b.next())if(c=c.value,c!==this.active.node&&!this.active.node.contains(c)&&c.classList.contains(this.config.classes.content)){if((c=c.closest("."+this.config.classes.item))&&"y"===d)if(c.querySelector(this.config.nodes.list)&&!c.classList.contains(this.config.classes.collapsed))0<this.last.dirY?this._moveElement(this.placeholder,{parent:c.lastElementChild,type:"insertBefore",sibling:c.lastElementChild.firstElementChild,animatable:c.querySelector("."+this.config.classes.content)}):
		0>this.last.dirY&&this._moveElement(this.placeholder,{parent:c.parentNode,type:"insertBefore",sibling:c,animatable:c.querySelector("."+this.config.classes.content)});else if(0<this.last.dirY){var e=c.nextElementSibling;e?this._moveElement(this.placeholder,{parent:c.parentNode,type:"insertBefore",sibling:e,animatable:c.querySelector("."+this.config.classes.content)}):this._moveElement(this.placeholder,{parent:c.closest(this.config.nodes.list),type:"appendChild",animatable:c.querySelector("."+this.config.classes.content)})}else 0>
		this.last.dirY&&this._moveElement(this.placeholder,{parent:c.parentNode,type:"insertBefore",sibling:c,animatable:c.querySelector("."+this.config.classes.content)});(c=c.closest("."+this.config.classes.parent))&&c!==this.parent&&c._nestable&&(this.newParent=c)}this.placeholder.classList.toggle(this.config.classes.error,this.active.disabledParent\|\|this.active.maxDepth\|\|this.active.collapsedParent\|\|this.active.confinedParent);this.container.style.transform="translate3d("+(a.pageX-this.origin.original.x)+
		"px, "+(a.pageY-this.origin.original.y)+"px, 0)";this.lastParent=this.placeholder.parentNode}this.last={x:a.pageX,y:a.pageY}};
		Nestable.prototype._moveElement=function(a,b){var c=!1,d=!1;if(this._isDisabled(b.parent))return!1;if(this.active.parent&&!DOM.parents(b.parent,"#"+this.active.parent.id).includes(this.active.parent))return this.active.confinedParent\|\|(this.emit("error.confined",a,this.active.parent,b.parent),this.active.confinedParent=!0),!1;var e=a.closest(this.config.nodes.list);0<this.config.animation&&(c=DOM.rect(this.placeholder),b.animatable&&(d=DOM.rect(b.animatable)));"insertBefore"===b.type?b.parent.insertBefore(a,
		b.sibling):"appendChild"===b.type&&b.parent.appendChild(a);e.childElementCount\|\|this._unmakeParent(e.parentNode);this.emit("order.change",this.active.node,b.parent,e);0<this.config.animation&&(this._animateElement(this.placeholder,c),b.animatable&&d&&this._animateElement(b.animatable,d))};
		Nestable.prototype._animateElement=function(a,b){var c=a.style,d=DOM.rect(a);c.transform="translate3d("+(b.left-d.left)+"px, "+(b.top-d.top)+"px, 0px)";c.transform="translate3d(0px, 0px, 0px)";c.transition="transform "+this.config.animation+"ms";setTimeout(function(){c.transform="";c.transition=""},this.config.animation)};
		Nestable.prototype._onMouseUp=function(a){this.active&&(this.config.showPlaceholderOnMove&&(this.placeholder.style.opacity=0),this._getEvent(a),a=DOM.rect(this.active.node),this.container.removeAttribute("style"),this.parent.classList.remove(this.config.classes.moving),this.placeholder.parentNode.replaceChild(this.active.node,this.placeholder),this._animateElement(this.active.node,a),this.placeholder.classList.remove(this.config.classes.error),this.active.node.classList.remove(this.config.classes.dragging),
		this.active=!1,document.body.removeChild(this.container),this._getData(),this.newParent&&this.newParent._nestable._getData(),this.emit("stop",this.data),this.update())};Nestable.prototype._toggleList=function(a,b){a.classList.contains(this.config.classes.collapsed)?this._expandList(a,b):this._collapseList(a,b)};Nestable.prototype._collapseList=function(a,b){b\|\|(b=a.querySelector("."+this.config.classes.button));b.textContent=this.config.expandButtonContent;a.classList.add(this.config.classes.collapsed)};
		Nestable.prototype._expandList=function(a,b){b\|\|(b=a.querySelector("."+this.config.classes.button));b.textContent=this.config.collapseButtonContent;a.classList.remove(this.config.classes.collapsed)};
		Nestable.prototype._makeParent=function(a){var b=a.querySelector(this.config.nodes.list);b?b.classList.add(this.config.classes.list):(b=document.createElement(this.config.nodes.list),b.classList.add(this.config.classes.list),a.appendChild(b));var c=document.createElement("button");c.classList.add(this.config.classes.button);c.type="button";c.textContent=this.config.collapseButtonContent;a.insertBefore(c,a.firstElementChild);return b};
		Nestable.prototype._unmakeParent=function(a){var b=a.querySelector(this.config.nodes.list),c=a.querySelector("button");b&&a.removeChild(b);c&&a.removeChild(c)};
		Nestable.prototype._getData=function(a){var b=this;a=void 0===a?"nodes":a;var c=[],d=function(c){var e=[];DOM.children(c,b.config.nodes.item).forEach(function(c){var f={};if("nodes"===a)f.node=c;else if(f.data=Object.assign({},c.dataset),b.config.includeContent){var g=c.querySelector("."+b.config.classes.content);g&&(f.content=g.innerHTML)}if(c=c.querySelector(b.config.nodes.list))f.children=d(c);e.push(f)});return e};c=d(this.parent);"nodes"===a&&(this.data=c);return c};

docs/assets/js/add.js

		@@ -1,25 +0,35 @@
		const container = document.getElementById("container-demo");
		const ul = container.firstElementChild;
		const frag = document.createDocumentFragment();
		const instance = new Nestable("#myList");

		DOM.select("#add_item").addEventListener("click", addItem, false);

		for ( let i = 0; i < 8; i++ ) {
		function addItem(e) {

		let max = 0;

		const items = DOM.selectAll(".item");

		for ( const item of items ) {
		const num = parseInt(item.dataset.id, 10);

		if ( num > max ) {
		max = num;
		}
		}

		const li = document.createElement("li");
		li.className = "ui-selectable";

		if ( i > 3 ) {
		li.className = "orphan";
		}

		frag.appendChild(li);
		li.dataset.id = max + 1;
		li.className = "item";
		li.innerHTML = `Item ${max + 1}`;

		instance.add(li);
		}

		ul.appendChild(frag);

		const selectable = new Selectable({
		appendTo: ul,
		lasso: {
		borderColor: "#fff",
		backgroundColor: "rgba(255, 255, 255, 0.2)"
		function getItemById(id) {
		const items = DOM.selectAll(".item");

		for ( const item of items ) {
		if ( parseInt(item.dataset.id, 10) === parseInt(id, 10) ) {
		return item;
		}
		}
		});
		}

docs/assets/js/changelog.js


		fetch("https://api.github.com/repos/Mobius1/NestaJS/releases").then(resp => resp.json()).then(render);
		fetch("https://api.github.com/repos/Mobius1/NestableJS/releases").then(resp => resp.json()).then(render);

		@@ -32,3 +32,3 @@ function render(json) {
		<li>
		<a href="https://github.com/Mobius1/NestaJS/archive/${item.tag_name}.zip" rel="nofollow">
		<a href="https://github.com/Mobius1/NestableJS/archive/${item.tag_name}.zip" rel="nofollow">
		<svg class="octicon octicon-file-zip" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.5 1H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4.5L8.5 1zM11 14H1V2h3v1h1V2h3l3 3v9zM5 4V3h1v1H5zM4 4h1v1H4V4zm1 2V5h1v1H5zM4 6h1v1H4V6zm1 2V7h1v1H5zM4 9.28A2 2 0 0 0 3 11v1h4v-1a2 2 0 0 0-2-2V8H4v1.28zM6 10v1H4v-1h2z"></path></svg>
		@@ -39,3 +39,3 @@ zip
		<li>
		<a href="https://github.com/Mobius1/NestaJS/archive/${item.tag_name}.tar.gz" rel="nofollow">
		<a href="https://github.com/Mobius1/NestableJS/archive/${item.tag_name}.tar.gz" rel="nofollow">
		<svg class="octicon octicon-file-zip" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.5 1H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4.5L8.5 1zM11 14H1V2h3v1h1V2h3l3 3v9zM5 4V3h1v1H5zM4 4h1v1H4V4zm1 2V5h1v1H5zM4 6h1v1H4V6zm1 2V7h1v1H5zM4 9.28A2 2 0 0 0 3 11v1h4v-1a2 2 0 0 0-2-2V8H4v1.28zM6 10v1H4v-1h2z"></path></svg>
		@@ -42,0 +42,0 @@ tar.gz

docs/assets/js/script.js

		@@ -93,3 +93,3 @@ /* global hljs */

		fetch("https://api.github.com/repos/Mobius1/NestaJS/releases").then(resp => resp.json()).then(json => {
		fetch("https://api.github.com/repos/Mobius1/NestableJS/releases").then(resp => resp.json()).then(json => {

		@@ -121,27 +121,43 @@ let latest = json[0].name;

		menuOverview.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestaJS/index.html">Introduction</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/getting-started.html">Getting Started</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/using-states.html">Using States</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/options.html">Options</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/public-methods.html">Public Methods</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/events.html">Events</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/changelog.html">Changelog</a></li>`;
		menuOverview.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestableJS/index.html">Introduction</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/getting-started.html">Getting Started</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/options.html">Options</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/public-methods.html">Public Methods</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/events.html">Events</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/changelog.html">Changelog</a></li>`;

		menuOptions.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestaJS/api/options/threshold.html">threshold</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/options/animation.html">animation</a></li>`;
		menuOptions.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestableJS/api/options/threshold.html">threshold</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/animation.html">animation</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/collapseButtonContent.html">collapseButtonContent</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/expandButtonContent.html">expandButtonContent</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/maxDepth.html">maxDepth</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/showPlaceholderOnMove.html">showPlaceholderOnMove</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/nodes.html">nodes</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/options/classes.html">classes</a></li>`;

		propsMenu.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestaJS/api/properties/config.html">config</a></li>`;
		propsMenu.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestableJS/api/properties/config.html">config</a></li>`;


		menuMethods.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestaJS/api/methods/add.html">add()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/destroy.html">destroy()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/disable.html">disable()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/enable.html">enable()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/init.html">init()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/off.html">off()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/on.html">on()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/remove.html">remove()</a></li>
		<li><a href="https://mobius1.github.io/NestaJS/api/methods/update.html">update()</a></li>`;
		menuMethods.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestableJS/api/methods/add.html">add()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/bind.html">bind()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/collapseAll.html">collapseAll()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/expandAll.html">expandAll()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/destroy.html">destroy()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/disable.html">disable()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/enable.html">enable()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/init.html">init()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/off.html">off()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/on.html">on()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/remove.html">remove()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/unbind.html">unbind()</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/methods/update.html">update()</a></li>`;

		menuEvents.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestaJS/api/events/init.html">init</a></li>`;
		menuEvents.lastElementChild.innerHTML = `<li><a href="https://mobius1.github.io/NestableJS/api/events/init.html">init</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/start.html">start</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/move.html">move</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/stop.html">stop</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/error.maxdepth.html">error.maxdepth</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/error.disabled.html">error.disabled</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/error.collapsed.html">error.collapsed</a></li>
		<li><a href="https://mobius1.github.io/NestableJS/api/events/error.confined.html">error.confined</a></li>`;

		@@ -175,3 +191,3 @@ demosMenu.lastElementChild.innerHTML = ``;
		if (match) {
		document.head.getElementsByTagName("title")[0].textContent = `NestaJS - ${link.textContent}`;
		document.head.getElementsByTagName("title")[0].textContent = `NestableJS - ${link.textContent}`;

		@@ -379,3 +395,3 @@ items.forEach(el => {
		const old = document.querySelector(".has-search");
		const template = `<form class="form-group has-search" action="https://mobius1.github.io/NestaJS/search.html">
		const template = `<form class="form-group has-search" action="https://mobius1.github.io/NestableJS/search.html">
		<span class="ti-search form-control-feedback"></span>
		@@ -382,0 +398,0 @@ <input type="text" class="form-control" placeholder="Search docs ..." name="q">

docs/assets/js/toggle.js

		@@ -1,22 +0,12 @@
		const container = document.getElementById("container-demo");
		const ul = container.firstElementChild;
		const expand = document.getElementById("expand");
		const collapse = document.getElementById("collapse");

		const selectable = new Selectable({
		appendTo: ul,
		toggle: true,
		lasso: {
		borderColor: "#fff",
		backgroundColor: "rgba(255, 255, 255, 0.2)"
		}
		const instance = new Nestable("#myList");

		expand.addEventListener("click", e => {
		instance.expandAll();
		});


		const frag = document.createDocumentFragment();
		for ( let i = 0; i < 32; i++ ) {
		const li = document.createElement("li");
		li.classList.add("ui-selectable");
		frag.appendChild(li);
		}
		ul.appendChild(frag);

		selectable.add(ul.children);
		collapse.addEventListener("click", e => {
		instance.collapseAll();
		});

docs/README.md

		@@ -1,1 +0,1 @@
		Documentation for Mobius1/NestaJS.
		Documentation for Mobius1/NestableJS.

package.json

		{
		"name": "nestablejs",
		"version": "0.0.1",
		"version": "0.0.2",
		"description": "NestableJS is a javascript library for creating drag & drop heirarchical lists.",
		@@ -5,0 +5,0 @@ "main": "dist/nestable.js",

README.md

		@@ -1,2 +0,23 @@
		# NestaJS
		Drag & drop hierarchical list with mouse and touch compatibility
		# NestableJS
		Drag & drop hierarchical list with mouse and touch compatibility.

		[![Maintenance](https://img.shields.io/maintenance/yes/2019.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/NestableJS/)
		![](http://img.badgesize.io/Mobius1/NestableJS/master/dist/nestable.js?style=?style=flat-square&logo=appveyor)
		![](http://img.badgesize.io/Mobius1/NestableJS/master/dist/nestable.js?compression=gzip&label=gzipped&style=?style=flat-square&logo=appveyor)
		[![npm](https://img.shields.io/npm/dt/nestablejs.svg?style=?style=flat-square&logo=appveyor)](https://www.npmjs.com/package/nestablejs)
		[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/NestableJS/blob/master/LICENSE)
		[![GitHub release](https://img.shields.io/github/release/Mobius1/NestableJS.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/NestableJS/releases)
		[![npm](https://img.shields.io/npm/v/nestablejs.svg?style=?style=flat-square&logo=appveyor)](https://www.npmjs.com/package/nestablejs)
		[![GitHub issues](https://img.shields.io/github/issues-raw/Mobius1/NestableJS.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/NestableJS)
		[![GitHub issues](https://img.shields.io/github/issues-closed-raw/Mobius1/NestableJS.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/NestableJS)

		## Still under active development.

		## [Demo](https://codepen.io/Mobius1/pen/dybwVOw) \| [Documentation](https://mobius1.github.io/NestableJS) \| [Changelog](https://github.com/Mobius1/NestableJS/releases)

		* No dependencies.
		* Written in modern ES6 javascript.
		* Lightweight - less than 5kB gzipped!
		* Touch enabled for use with mobile devices such as tablets and smartphones.
		* Customizable.
		* Fluent API.

src/index.js

		@@ -522,3 +522,3 @@ import DOM from "./utils/DOM.js";
		if ( !this.active.collapsedParent ) {
		this.emit("move.collapsed", this.active.node, prevEl);
		this.emit("error.collapsed", this.active.node, prevEl);

		@@ -549,3 +549,3 @@ this.active.collapsedParent = true;
		if ( !this.active.maxDepth ) {
		this.emit("move.maxdepth", this.active.node, this.config.maxDepth);
		this.emit("error.maxdepth", this.active.node, this.config.maxDepth);

		@@ -557,3 +557,3 @@ this.active.maxDepth = true;
		if ( !this.active.disabledParent ) {
		this.emit("move.disabled");
		this.emit("error.disabled");

		@@ -700,3 +700,3 @@ this.active.disabledParent = true;

		this.emit("move.confined", el, this.active.parent, type.parent);
		this.emit("error.confined", el, this.active.parent, type.parent);
		this.active.confinedParent = true;
		@@ -703,0 +703,0 @@ }

docs/api/options/tolerance.html

docs/api/events/init.html