<|start_filename|>docs/assets/js/demos/checkboxes.js<|end_filename|>
const SELECTABLE = new Selectable({
	filter: ".item",
	ignore: "input",
	appendTo: "#items",
	toggle: true
});

const inputs = [...document.querySelectorAll("input")];

for ( const input of inputs ) {
	const item = input.closest(".item");
	
	// trigger selection / deselection on checkbox change
	input.onchange = e => {
		input.checked ? SELECTABLE.select(item) : SELECTABLE.deselect(item);
	}
	
	// select items already checked
	if ( input.checked ) {
		SELECTABLE.select(item);
	}
}

// check the checkbox when item is selected
SELECTABLE.on("selecteditem", (item) => {
	item.node.querySelector("input").checked = true;
});

// uncheck the checkbox when item is deselected
SELECTABLE.on("deselecteditem", (item) => {
	item.node.querySelector("input").checked = false;
});

<|start_filename|>docs/assets/css/lassoSelect.css<|end_filename|>
#calendar ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1em;
  margin: 0 auto;
  max-width: 64em;
  padding: 0;
	cursor: crosshair;
}

#calendar li {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin-left: 0;
  font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
}

#calendar ul.weekdays {
  margin-bottom: 1em;
}

#calendar ul.weekdays li {
  height: 4vw;
}

#calendar ul.day-grid li {
  background-color: #eaeaea;
  border: 1px solid #eaeaea;
  height: 12vw;
  max-height: 125px;
}

#calendar ul.day-grid li.prev, #calendar ul.day-grid li.next {
  cursor: not-allowed;
}

#calendar ul.day-grid li.ui-selecting {
  background-color: rgb(181, 210, 253);
}

#calendar ul.day-grid li.ui-selected {
  background-color: #0054D1;
  color: #fff;
}

#calendar ul.weekdays abbr[title] {
  border: none;
  font-weight: 800;
  text-decoration: none;
}

#calendar ul.day-grid li:nth-child(1),
#calendar ul.day-grid li:nth-child(2),
#calendar ul.day-grid li:nth-child(3),
#calendar ul.day-grid li:nth-child(34),
#calendar ul.day-grid li:nth-child(35) {
  background-color: #fff;
}

@media all and (max-width: 800px) {
  #calendar ul {
    grid-gap: .25em;
  }
  
  #calendar ul.weekdays li {
    font-size: 0;
  }
  
  #calendar ul.weekdays > li abbr:after {
      content: attr(title);
      font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
    text-align: center;
    }
}

<|start_filename|>docs/assets/js/ignore.js<|end_filename|>
const container = document.getElementById("demo-ignore");
const ul = container.firstElementChild;

const selectable = new Selectable({
	appendTo: ul,
	ignore: ".form-control",
	lasso: {
		borderColor: "#0054D1",
		backgroundColor: "rgba(0, 84, 209, 0.2)"
	}
});


const frag = document.createDocumentFragment();
for ( let i = 0; i < 4; i++ ) {
	const li = document.createElement("li");

	li.innerHTML = `<p>All elements below will NOT trigger selection. I will, though.</p>
					<input type="text" class="form-control form-control-sm" placeholder="Start typing...">
					<input type="range" class="form-control form-control-sm">
					<label class="form-control form-control-sm" for="check-${i+1}"><input type="checkbox" id="check-${i+1}"/> Check me</label>
					<select class="form-control form-control-sm">
						<option value="">Select me</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
					<button type="button" class="btn btn-light btn-sm form-control form-control-sm">Click me</button>`;

	frag.appendChild(li);
}
ul.appendChild(frag);

selectable.add(ul.children);

<|start_filename|>docs/assets/css/demos/sortable.css<|end_filename|>
#container {
  text-align: center;
}
#demo-title {
  letter-spacing: -2px;
  font-size: 60px;
  color: #666;
  text-align: center;
  font-weight: 800;
}
#demo-title .dz {
  margin-right: 30px;
  position: relative;
}
#demo-title .sl, #demo-title .js {
  font-weight: 300;
}
#demo-title small {
  top: 18px;
  right: -24px;
  font-size: 24px;
  position: absolute;
  font-weight: 800;
}
#items {
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 30vw;
}
.item {
  list-style: none;
  width: 100%;
  height: 50px;
  background-color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px 5px 0;
  color: #fff;
  position: relative;
}
.item.ui-selecting {
  background-color: #009688;
}
.item.ui-selected {
  background-color: #673AB7;
}
.item .handle {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 0;
  top: 0;
  cursor: move;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<|start_filename|>docs/assets/css/get.css<|end_filename|>
#container-demo {
	width: 100%;
}

#demo-items {
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
	border: 2px dashed #999;
	background-color: #fff;
	padding: 10px;
}

#demo-items li.ui-selectable {
	width: 250px;
	height: 30px;
	list-style: none;
	background-color: #fff;
	margin: 0 5px 5px 0;
	cursor: not-allowed;
	border: 2px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	position: relative;
}


#demo-items li.highlight::before {
    position: absolute;
    right: -30px;
    font-size: 21px;
    color: #999;
    font-family: "Material Design Icons";
    content: "\F730";
}

#demo-items li::after {
    position: absolute;
    content: "unselectable";
}

#demo-items li.ui-selectable {
/*	background-color: #0054D1;
	border-color: #0054D1;*/
	cursor: pointer;
	/*color: #fff;*/
}

#demo-items li.ui-selectable::after {
    content: "selectable";
}
#demo-items li.ui-selecting::after {
    content: "selecting";
}
#demo-items li.ui-selected::after {
    content: "selected";
}
#demo-items li.ui-unselecting::after {
    content: "unselecting";
}

#demo-items li.ui-selecting {
	border-color: rgb(40, 167, 69);
	background-color:  rgb(40, 167, 69);
	color: #fff;	
}
#demo-items li.ui-selected {
	border-color: #0054D1;
	background-color:  #0054D1;
	color: #fff;	
}
#demo-items li.ui-unselecting {
	border-color: rgb(220, 53, 69);
	background-color:  rgb(220, 53, 69);
	color: #fff;	
}


.output {
	font-size: 13px;
	margin: 0 0 10px 0;
	background-color: #333;
	padding: 0;
	height: 402px;
}

.mb-track-y {
	/*background-color: #999;*/
	right: 5px;
	top: 5px;
	height: calc(100% - 10px);	
}

.mb-track-y .mb-bar {
	border-radius: 3px;
}

.output .mb-bar {
	background-color: rgba(204, 204, 204, 0.6);
	transition-property: background-color, height;
	transition-duration: 400ms, 250ms;
	transition-timing-function: ease;
}

.output.mb-hover-y .mb-bar, .output:hover .mb-bar  {
	background-color: rgba(204, 204, 204, 1);
}


#output {
	padding: 10px;
	/*min-height: 350px;*/
}

#output code[class*="language-"], #output pre[class*="language-"] {
	text-shadow: none;
}
#output .token.selector,
#output .token.attr-name,
#output .token.string,
#output .token.char,
#output .token.builtin,
#output .token.inserted {
    color: rgb(114, 200, 0);
}
#output .token.punctuation {
	color: #fff;
}

#output .token.quotes {
	color: #ccc;
}

#output .token.boolean {
    color: rgb(138, 100, 226);
}
#output .token.number {
	color: rgb(232, 62, 140);
}


.btn code {

    color: #fff;
    font-weight: bold;

}

.buttons {
	display: flex;
	flex-direction: column;	
}

.buttons div {
	display: flex;
	justify-content: space-between;	
	margin: 0 0 10px 0;
}

<|start_filename|>docs/assets/js/select.js<|end_filename|>
const container = document.getElementById("container-demo");
const ul = container.firstElementChild;

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



ul.innerHTML = `<li class="ui-selectable">1</li>
    <li class="ui-selectable alt">2</li>
    <li class="ui-selectable">3</li>
    <li class="ui-selectable alt">4</li>
    <li class="ui-selectable">5</li>
    <li class="ui-selectable alt">6</li>
    <li class="ui-selectable">7</li>
    <li class="ui-selectable alt">8</li>`;

selectable.add(ul.children);

// demo 2
const container2 = document.getElementById("container-demo2");
const ul2 = container2.firstElementChild;

const selectable2 = new Selectable({
	appendTo: ul2,
	lasso: {
		borderColor: "#fff",
		backgroundColor: "rgba(255, 255, 255, 0.2)"
	}
});



ul2.innerHTML = `
	<li class="ui-selectable">1</li>
    <li></li>
    <li></li>
    <li class="ui-selectable">2</li>
    <li class="ui-selectable">3</li>
    <li class="ui-selectable">4</li>
    <li></li>
    <li class="ui-selectable">5</li>`;

selectable2.add(ul2.querySelectorAll('.ui-selectable'));

<|start_filename|>docs/assets/js/search.js<|end_filename|>
const div = document.getElementById("results");
const params = window.location.search.substring(1).split("&");
const obj = {};

const list = [
	"events.html",
	"index.html",
	"api/options/throttle.html",
	"api/options/appendTo.html",
	"api/options/ignore.html",
	"api/options/classes.html",
	"api/options/filter.html",
	"api/options/autoScroll.html",
	"api/options/autoRefresh.html",
	"api/options/toggle.html",
	"api/options/tolerance.html",
	"api/options/lasso.html",
	"api/options/lassoSelect.html",
	"api/options/maxSelectable.html",
	"api/methods/add.html",
	"api/methods/clear.html",
	"api/methods/destroy.html",
	"api/methods/disable.html",
	"api/methods/enable.html",
	"api/methods/get.html",
	"api/methods/getItems.html",
	"api/methods/getNodes.html",
	"api/methods/getSelectedItems.html",
	"api/methods/getSelectedNodes.html",
	"api/methods/init.html",
	"api/methods/invert.html",
	"api/methods/off.html",
	"api/methods/on.html",
	"api/methods/recalculate.html",
	"api/methods/remove.html",
	"api/methods/select.html",
	"api/methods/selectAll.html",
	"api/methods/setContainer.html",
	"api/methods/unselect.html",
	"api/methods/update.html",
 	"api/events/selectable.drag.html",
	"api/events/selectable.end.html",
	"api/events/selectable.init.html",
	"api/events/selectable.select.html",
	"api/events/selectable.start.html",
	"api/events/selectable.unselect.html",
	"getting-started.html",
	"public-methods.html",
	"options.html"
];


params.forEach(str => {
	const items = str.split("=");
	obj[items[0]] = items[1];
});

const results = [];

list.forEach(item => {
	if ( item.includes(obj["q"]) ) {
		results.push(item);
	}
});

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

	results.forEach(item => {
		const li = document.createElement("li");
		const link = document.createElement("a");
		link.href = `https://mobius1.github.io/Selectable/${item}`;
		link.textContent = item.replace(/api\/([\w]+)\//g, "").replace(/\.html/g, "");

		li.appendChild(link);

		frag.appendChild(li);
	})

	div.innerHTML = "";
	div.appendChild(frag);

} else {
	div.innerHTML = "No results";
}

<|start_filename|>docs/assets/js/demos/sortable.js<|end_filename|>
const items = document.getElementById('items');

const SELECTABLE = new Selectable({
	filter: ".item",
	appendTo: items,
	ignore: ".handle" // ignore the handle used for sorting
});


const SORTABLE = Sortable.create(items, {
	animation: 200,
	handle: ".handle",
	onUpdate: function (evt) {
        // Selecting will still work, but shift + select will be broken due to the order difference.
        // So update the Selctable instance to reflect the new order.
		SELECTABLE.update();
	}
});

<|start_filename|>docs/assets/js/lasso.js<|end_filename|>
const container = document.getElementById("container-demo");
const ul = container.firstElementChild;

const selectable = new Selectable({
	appendTo: ul,
    lasso: {
        border: "2px dashed rgba(219, 10, 91, 1)",
        borderRadius: "10px",
        backgroundColor: "rgba(219, 10, 91, 0.4)"
    }
});


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);

<|start_filename|>docs/assets/js/state.js<|end_filename|>
const container = document.getElementById("container-demo");
const ul = container.firstElementChild;

const selectable = new Selectable({
    appendTo: ul,
    saveState: 10,
	lasso: {
		borderColor: "#fff",
		backgroundColor: "rgba(255, 255, 255, 0.2)"
	}
});



ul.innerHTML = `<li class="ui-selectable">1</li>
    <li class="ui-selectable alt">2</li>
    <li class="ui-selectable">3</li>
    <li class="ui-selectable alt">4</li>
    <li class="ui-selectable">5</li>
    <li class="ui-selectable alt">6</li>
    <li class="ui-selectable">7</li>
    <li class="ui-selectable alt">8</li>`;

selectable.add(ul.children);

<|start_filename|>docs/assets/css/ignore.css<|end_filename|>
#demo-ignore ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	cursor: crosshair;
	border: 2px dashed #aaa;
	padding: 10px;
	border-radius: 5px;
}

#demo-ignore li {
	list-style: none;
	width: 250px;
	padding: 40px 20px;
	border: 2px solid #aaa;
	border-radius: 5px;
	margin: 0 5px 5px 0;
	flex-grow: 1;
}

#demo-ignore .ui-selected {
	border-color: #0054D1;
	background-color:  #0054D1;
	color: #fff;
}

#demo-ignore .ui-unselecting {
	border-color: #dc3545;
	background-color:  #dc3545;
	color: #fff;	
}

#demo-ignore .ui-selecting {
	border-color: #28a745;
	background-color:  #28a745;
	color: #fff;	
}

#demo-ignore div {
	padding: 10px;
}

#demo-ignore select, #demo-ignore input[type="text"], #demo-ignore input[type="range"] {
	margin-bottom: 10px;
}

<|start_filename|>docs/assets/css/demos/dropzone.css<|end_filename|>
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,600,800");

#container {
    text-align: center;
}
#demo-title {
  letter-spacing: -2px;
  font-size: 60px;
  color: #666;
  text-align: center;
  font-weight: 800;
}
#demo-title .dz {
  margin-right: 30px;
  position: relative;
}
#demo-title .sl, #demo-title .js {
  font-weight: 300;
}
#demo-title small {
  top: 18px;
  right: -24px;
  font-size: 24px;
  position: absolute;
  font-weight: 800;
}

.file {
  background-color: #607d8b;
  border-radius: 5px;
  padding: 5px 15px;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.file.ui-selecting {
  background-color: #4CAF50;
}
.file.ui-selecting svg {
  background-color: #3d8b40;
}
.file.ui-selected {
  background-color: #2196F3;
}
.file.ui-selected svg {
  background-color: #0c7cd5;
}
.file:last-child {
  margin-bottom: 0;
}
.file .file-name {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  font-family: "Roboto Mono";
  font-weight: 300;
}
.file .file-size {
  font-family: "Roboto Mono";
  font-weight: 300;
}
.file .file-remove {
  width: 5%;
}
.file .file-remove button {
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}
.file .file-remove button:hover {
  color: #fff;
}
.file .file-data {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-flow: column;
  width: 40%;
}
.file .file-info {
  display: flex;
  align-items: end;
  justify-content: center;
  flex-flow: column;
  width: 45%;
}
.file .file-progress {
  width: 10%;
  display: flex;
  align-items: end;
  justify-content: center;
  flex-flow: column;
  position: relative;
}
.file .file-progress .mdi {
  position: absolute;
  z-index: 1000;
  right: 12px;
  top: 8px;
}
.file.dz-complete .file-progress .mdi {
  display: block;
}
.file .file-progress-text {
  text-align: right;
}
.file svg {
  background-color: #4b626d;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.file .radial-fill {
  stroke: #fff;
  fill: transparent;
  stroke-dasharray: 87.9645943005 87.9645943005;
  stroke-dashoffset: 87.9645943005;
}
.file.uploading svg {
  -webkit-animation: none;
          animation: none;
}
.file.uploading .radial-fill {
  stroke-dashoffset: 87.9645943005;
  -webkit-animation: 2000ms linear 0ms 1 forwards load;
          animation: 2000ms linear 0ms 1 forwards load;
}
.file.loading svg {
  -webkit-animation: 1000ms linear 0ms infinite forwards spin;
          animation: 1000ms linear 0ms infinite forwards spin;
}
.file.loading .radial-fill {
  stroke-dashoffset: 35.1858377202;
}

#removeFiles {
  display: none;
}
#removeFiles.active {
  display: inline-block;
}

.faded {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

@-webkit-keyframes load {
  0% {
    stroke-dashoffset: 87.9645943005;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes load {
  0% {
    stroke-dashoffset: 87.9645943005;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
#template {
  display: none;
}

#dropzone {
  min-height: 400px;
  border: 3px dashed #607d8b;
  background: #fff;
  padding: 20px 20px;
  border-radius: 5px;
  width: 600px;
  margin-top: 20px;
  position: relative;
  margin: 20px auto;
}
#dropzone::after, #dropzone.dz-drag-hover::after, #dropzone.dz-started.dz-drag-hover::after {
  content: "Drop files here";
  background-color: rgba(255, 255, 255, 0.6);
}
#dropzone.dz-started::after {
    content: "";
    background-color: rgba(255, 255, 255, 0);
  }
#dropzone::after {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Raleway";
  font-weight: 700;
  font-size: 50px;
  color: #607d8b;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.animated {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
}


<|start_filename|>docs/assets/js/getItems.js<|end_filename|>
const container = document.getElementById("container-demo");
const ul = document.getElementById("demo-items");
const output = document.getElementById("output");

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


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

	frag.appendChild(li);
}
ul.appendChild(frag);

selectable.add(ul.children);

selectable.select([0,1,2,3]);

function setOutput(obj, clear) {
	console.log(obj)
	const tmp = document.createElement("div");
	tmp.appendChild(obj.node.cloneNode());

	obj.node = tmp.innerHTML.replace(/\"/g, "'");

	if ( clear ) {
		output.innerHTML = "";
	}

	const code = Prism.highlight(JSON.stringify(obj, null, 4), Prism.languages.javascript, 'javascript');
	//.replace(/<span class=\"token string\">"([^\"]+)"<\/span>/g, "<span class='token string'><span class='token quotes'>\"</span>$1<span class='token quotes'>\"</span></span>")

	output.innerHTML += `<pre><code class="language-js">${code}</code></pre>`;
}


document.getElementById("getItems").addEventListener("click", e => {
	const items = selectable.getItems();

	output.innerHTML = "";

	items.forEach(item => {
		const obj = JSON.parse(JSON.stringify(item));
		obj.node = item.node;
		setOutput(obj);
	});
}, false);

<|start_filename|>docs/assets/js/demos/dropzone.js<|end_filename|>
/* --------- DROPZONE INSTANCE --------- */
const DROPZONE = new Dropzone("#dropzone", {
	autoProcessQueue: false,
	clickable: '#addFiles',
	parallelUploads: 5,
	previewTemplate: document.getElementById("template").innerHTML
});

/* --------- SELECTABLE INSTANCE --------- */
const SELECTABLE = new Selectable({
	appendTo: "#dropzone",
	ignore: "[data-dz-remove]", // stop remove button triggering selection
	lasso: {
		border: "1px solid rgba(155, 155, 155,1.0)",
		backgroundColor: "rgba(255, 255, 255,0.4)"
	}
});

/* --------- BUTTONS --------- */
const removeFiles = document.getElementById("removeFiles");

removeFiles.addEventListener("click", e => {
	// get files
	const files = DROPZONE.files;
	
	if ( files.length ) {
		for ( const file of files ) {
			// get the item instance from Selectable
			const el = SELECTABLE.get(file.previewElement);
			
			// if it's selected, then remove it.
			// Dropzone is set to listen to "removedfile" and 
			// will remove it from the Selectable instance
			if ( el.selected ) {
				DROPZONE.removeFile(file);
				
				// hide the button
				removeFiles.classList.remove("active");
			}
		}
	}
});

/* --------- SELECTABLE EVENTS --------- */
SELECTABLE.on("selectable.end", (e, selected) => {
	// show the "removeFiles" button if we have selected files
	removeFiles.classList.toggle("active", selected.length);
});

/* --------- DROPZONE EVENTS --------- */
DROPZONE.on("addedfile", function(file) {
	const el = file.previewElement;
	
	// add element to Selectable instance when added by Dropzone
	SELECTABLE.add(el);
	
	file.previewElement.querySelector(".file-progress-text").textContent = "Ready";
	file.previewElement.querySelector(".file-text").textContent = "Waiting";
	
	// bounce animation
	el.classList.add("animated", "bounceIn");
	setTimeout(() => {
		el.classList.remove("animated", "bounceIn");
	}, 550);	
});

DROPZONE.on("removedfile", function(file) {
	const el = file.previewElement;
	
	// remove element from Selectable instance when removed by Dropzone
	SELECTABLE.remove(el);
});

// this is just for the upload progress indicator
DROPZONE.on("uploadprogress", (file, progress) => {
		const el = file.previewElement;
		const circle = el.querySelector("circle");
		const r = circle.getAttribute("r");
		const circ = 2 * Math.PI * r;	
		const p = Math.round(progress);
		
		circle.style.strokeDashoffset = circ - (circ * (progress / 100));
		
		el.classList.remove("loading");
		el.querySelector(".mdi").classList.add("mdi-upload");
		el.querySelector(".file-progress-text").textContent = file.mock ? `Done` : `Processing`;	
		el.querySelector(".file-text").textContent = p === 100 ? `Uploaded` : `Uploading ${p}%`;	
});

DROPZONE.on("success", function(file) {
	const el = file.previewElement;
	const mdi = el.querySelector(".mdi");
	
	mdi.classList.remove("mdi-upload");
	mdi.classList.add("mdi-check");
	el.querySelector(".file-progress-text").textContent = `Upload complete`;
});

DROPZONE.on("error", function(file, message, xhr) {
	const el = file.previewElement;
	const mdi = el.querySelector(".mdi");
	
	console.log(arguments)
	
	mdi.classList.remove("mdi-upload");
	mdi.classList.add("mdi-close");
	el.querySelector(".file-progress-text").textContent = `ERROR`;
	el.querySelector(".file-text").textContent = xhr.statusText;
});


/* ---------- MOCK FILES ---------- */
for ( let i = 0; i < 3; i++ ) {
	// Create the mock file:
	var mockFile = { name: makeid(8), size: randSize(100, 10000000), mock: true };

	// Call the default addedfile event handler
	DROPZONE.emit("addedfile", mockFile);

	// And optionally show the thumbnail of the file:
	DROPZONE.emit("thumbnail", mockFile, "/image/url");

	// Make sure that there is no progress bar, etc...
	DROPZONE.emit("uploadprogress", mockFile, 100);
	DROPZONE.emit("complete", mockFile);
	
	DROPZONE.files.push(mockFile);
	
	SELECTABLE.add(mockFile.previewElement);
}

/* ---------- HELPER FUNCTIONS ---------- */

function randSize(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function makeid(n) {
  var text = "";
  var possible = "abcdefghijklmnopqrstuvwxyz0123456789";
	const extensions = [".jpg", ".png", ".mp3", ".zip"];
	const ext = extensions[Math.floor(Math.random()*extensions.length)];

  for (var i = 0; i < n; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
	}

  return `${text}${ext}`;
}

<|start_filename|>docs/assets/js/lassoSelect.js<|end_filename|>
const selectable = new Selectable({
	lassoSelect: "sequential",
	appendTo: "#calendar",
	filter: ".day",
	lasso: {
		border: "2px dashed rgba(255, 255, 255, 0)",
		backgroundColor: "rgba(255, 255, 255, 0)"
	},
});

<|start_filename|>docs/assets/css/select.css<|end_filename|>
#container-demo {
	width: 100%;
}

#container-demo ul {
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
}

#container-demo li {
	width: 250px;
	height: 40px;
	list-style: none;
	background-color: #fff;
	margin: 0 5px 5px 0;
	cursor: not-allowed;
	border: 2px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

#container-demo li.ui-selectable {
	background-color: #999;
	cursor: pointer;
}

#container-demo li.ui-selected, #container-demo li.ui-selecting {
	border-color: #0054D1;
	background-color:  #0054D1;
	color: #fff;	
}

#container-demo2 {
	width: 100%;
}

#container-demo2 ul {
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
}

#container-demo2 li {
	width: 250px;
	height: 40px;
	list-style: none;
	background-color: #fff;
	margin: 0 5px 5px 0;
	cursor: not-allowed;
	border: 2px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;	
}

#container-demo2 li.ui-selectable {
	background-color: #999;
	cursor: pointer;
}

#container-demo2 li.ui-selected, #container-demo2 li.ui-selecting {
	border-color: #0054D1;
	background-color:  #0054D1;
	color: #fff;	
}

<|start_filename|>docs/assets/css/demos/checkboxes.css<|end_filename|>
#items {
  padding: 0;
  margin: 0;
}
#items li {
  list-style: none;
}

#items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
}
#items .item {
  display: flex;
  align-items: center;
  width: 250px;
  padding: 6px;
  background: #514d6a;
  margin: 0 0 5px 0;
  border-radius: 3px;
  color: #fff;
}
#items .item:hover {
  background: #5c5879;
}
#items .item label {
  margin: 0 20px 0 0;
}
#items .item.ui-selecting {
  background: #827da0;
  color: #fff;
}
#items .item.ui-selected {
  background-color: #009688;
  color: #fff;
}


<|start_filename|>docs/assets/css/autoScroll.css<|end_filename|>
#container-demo {
	width: 50vh;
}

#container-demo ul {
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-wrap: wrap;
	height: 300px;
	overflow: auto;	
}

#container-demo li {
	width: 50px;
	height: 50px;
	list-style: none;
	background-color: #999;
	margin: 0 5px 5px 0;
	cursor: pointer;
}

#container-demo li.ui-selected, #container-demo li.ui-selecting {
	border-color: #0054D1;
	background-color:  #0054D1;
	color: #fff;	
}