blob: 5f4af9c78946154f4937f11a8e2373317e941cd3 [file] [log] [blame]
(function(root, factory) {
if (typeof exports === "object") {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define([ "./spin" ], factory);
} else {
root.Ladda = factory(root.Spinner);
}
})(this, function(Spinner) {
"use strict";
var ALL_INSTANCES = [];
function create(button) {
if (typeof button === "undefined") {
console.warn("Ladda button target must be defined.");
return;
}
if (!button.querySelector(".ladda-label")) {
button.innerHTML = '<span class="ladda-label">' + button.innerHTML + "</span>";
}
var spinner = createSpinner(button);
var spinnerWrapper = document.createElement("span");
spinnerWrapper.className = "ladda-spinner";
button.appendChild(spinnerWrapper);
var timer;
var instance = {
start: function() {
button.setAttribute("disabled", "");
button.setAttribute("data-loading", "");
clearTimeout(timer);
spinner.spin(spinnerWrapper);
this.setProgress(0);
return this;
},
startAfter: function(delay) {
clearTimeout(timer);
timer = setTimeout(function() {
instance.start();
}, delay);
return this;
},
stop: function() {
button.removeAttribute("disabled");
button.removeAttribute("data-loading");
clearTimeout(timer);
timer = setTimeout(function() {
spinner.stop();
}, 1e3);
return this;
},
toggle: function() {
if (this.isLoading()) {
this.stop();
} else {
this.start();
}
return this;
},
setProgress: function(progress) {
progress = Math.max(Math.min(progress, 1), 0);
var progressElement = button.querySelector(".ladda-progress");
if (progress === 0 && progressElement && progressElement.parentNode) {
progressElement.parentNode.removeChild(progressElement);
} else {
if (!progressElement) {
progressElement = document.createElement("div");
progressElement.className = "ladda-progress";
button.appendChild(progressElement);
}
progressElement.style.width = (progress || 0) * button.offsetWidth + "px";
}
},
enable: function() {
this.stop();
return this;
},
disable: function() {
this.stop();
button.setAttribute("disabled", "");
return this;
},
isLoading: function() {
return button.hasAttribute("data-loading");
},
getTarget: function() {
return button;
}
};
ALL_INSTANCES.push(instance);
return instance;
}
function bind(target, options) {
options = options || {};
var targets = [];
if (typeof target === "string") {
targets = toArray(document.querySelectorAll(target));
} else if (typeof target === "object" && typeof target.nodeName === "string") {
targets = [ target ];
}
for (var i = 0, len = targets.length; i < len; i++) {
(function() {
var element = targets[i];
if (typeof element.addEventListener === "function") {
var instance = create(element);
var timeout = -1;
element.addEventListener("click", function() {
instance.startAfter(1);
if (typeof options.timeout === "number") {
clearTimeout(timeout);
timeout = setTimeout(instance.stop, options.timeout);
}
if (typeof options.callback === "function") {
options.callback.apply(null, [ instance ]);
}
}, false);
}
})();
}
}
function stopAll() {
for (var i = 0, len = ALL_INSTANCES.length; i < len; i++) {
ALL_INSTANCES[i].stop();
}
}
function createSpinner(button) {
var height = button.offsetHeight, spinnerColor;
if (height > 32) {
height *= .8;
}
if (button.hasAttribute("data-spinner-size")) {
height = parseInt(button.getAttribute("data-spinner-size"), 10);
}
if (button.hasAttribute("data-spinner-color")) {
spinnerColor = button.getAttribute("data-spinner-color");
}
var lines = 12, radius = height * .2, length = radius * .6, width = radius < 7 ? 2 : 3;
return new Spinner({
color: spinnerColor || "#fff",
lines: lines,
radius: radius,
length: length,
width: width,
zIndex: "auto",
top: "50%",
left: "50%",
className: ""
});
}
function toArray(nodes) {
var a = [];
for (var i = 0; i < nodes.length; i++) {
a.push(nodes[i]);
}
return a;
}
return {
bind: bind,
create: create,
stopAll: stopAll
};
});