(function ($, window, document, undefined) {
"use strict";
var pluginName = "loadingModal",
defaults = {
position: "auto",
text: "",
color: "#fff",
opacity: "0.7",
backgroundColor: "rgb(0,0,0)",
animation: "doubleBounce",
};
// The actual plugin constructor
function Plugin(element, options) {
var $that = this;
this.element = element;
this.animations = {
doubleBounce: {
html: '',
},
rotatingPlane: {
html: '',
setBackground: function (color) {
$that.animationBox.find("*").each(function (k, e) {
if (
$(e).css("background-color") &&
$(e).css("background-color") != "rgba(0, 0, 0, 0)"
) {
$(e).css("background-color", color);
}
});
},
},
wave: {
html: '',
},
wanderingCubes: {
html: '',
},
spinner: { html: '' },
chasingDots: {
html: '',
},
threeBounce: {
html: '',
},
circle: {
html: '',
setBackground: function (color) {
$that.animationBox
.children()
.find("*")
.each(function (k, e) {
if (
window
.getComputedStyle(e, ":before")
.getPropertyValue("background-color") !== "rgba(0, 0, 0, 0)"
) {
$("body").append(
$(
""
)
);
}
});
},
},
cubeGrid: {
html: '',
},
fadingCircle: {
html: '',
setBackground: function (color) {
$that.animationBox
.children()
.find("*")
.each(function (k, e) {
if (
window
.getComputedStyle(e, ":before")
.getPropertyValue("background-color") !== "rgba(0, 0, 0, 0)"
) {
$("body").append(
$(
""
)
);
}
});
},
},
foldingCube: {
html: '',
setBackground: function (color) {
$that.animationBox.find("*").each(function (k, e) {
if (
window
.getComputedStyle(e, ":before")
.getPropertyValue("background-color") !== "rgba(0, 0, 0, 0)"
) {
$("body").append(
$(
""
)
);
}
});
},
},
};
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
this.modal = null;
this.modalText = null;
this.animationBox = null;
this.modalBg = null;
this.currenAnimation = null;
this.init();
return this;
}
// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
init: function () {
// Create all elements
var $modal = $(
''
);
var $modalBg = $('');
var $animationBox = $(
''
);
var $infoBox = $('');
var $text = $('');
// Hide text element if no text available
if (this.settings.text !== "") {
$text.html(this.settings.text);
} else {
$text.hide();
}
// Add selected animation loader element
this.currenAnimation = this.animations[this.settings.animation];
$animationBox.append(this.currenAnimation.html);
$infoBox.append($animationBox).append($text);
$modal.append($modalBg);
$modal.append($infoBox);
if (
this.settings.position === "auto" &&
this.element.tagName.toLowerCase() !== "body"
) {
$modal.css("position", "absolute");
$(this.element).css("position", "relative");
} else if (this.settings.position !== "auto") {
$(this.element).css("position", this.settings.position);
}
$(this.element).append($modal);
this.modalBg = $modalBg;
this.modal = $modal;
this.modalText = $text;
this.animationBox = $animationBox;
this.color(this.settings.color);
this.backgroundColor(this.settings.backgroundColor);
this.opacity(this.settings.opacity);
},
hide: function () {
var modal = this.modal;
modal
.removeClass("jquery-loading-modal--visible")
.addClass("jquery-loading-modal--hidden");
setTimeout(function () {
modal.hide();
}, 1000);
},
backgroundColor: function (color) {
this.modalBg.css({ "background-color": color });
},
color: function (color) {
$("[data-custom-style]").remove();
this.modalText.css("color", color);
if (this.currenAnimation.setBackground) {
this.currenAnimation.setBackground(color);
} else {
this.animationBox
.children()
.find("*")
.each(function (k, e) {
if (
$(e).css("background-color") &&
$(e).css("background-color") != "rgba(0, 0, 0, 0)"
) {
$(e).css("background-color", color);
}
if (
window
.getComputedStyle(e, ":before")
.getPropertyValue("background-color") !== "rgba(0, 0, 0, 0)"
) {
$("body").append(
$(
""
)
);
}
});
}
},
opacity: function (opacity) {
this.modalBg.css({ opacity: opacity });
},
show: function () {
this.modal
.show()
.removeClass("jquery-loading-modal--hidden")
.addClass("jquery-loading-modal--visible");
},
animation: function (animation) {
this.animationBox.html("");
this.currenAnimation = this.animations[animation];
this.animationBox.append(this.currenAnimation.html);
},
destroy: function () {
$("[data-custom-style]").remove();
this.modal.remove();
},
text: function (text) {
this.modalText.html(text);
},
});
// You don't need to change something below:
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations and allowing any
// public function (ie. a function whose name doesn't start
// with an underscore) to be called via the jQuery plugin,
// e.g. $(element).defaultPluginName('functionName', arg1, arg2)
$.fn[pluginName] = function (options) {
var args = arguments;
// Is the first parameter an object (options), or was omitted,
// instantiate a new instance of the plugin.
if (options === undefined || typeof options === "object") {
return this.each(function () {
// Only allow the plugin to be instantiated once,
// so we check that the element has no plugin instantiation yet
if (!$.data(this, "plugin_" + pluginName)) {
// if it has no instance, create a new one,
// pass options to our plugin constructor,
// and store the plugin instance
// in the elements jQuery data object.
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
// If the first parameter is a string and it doesn't start
// with an underscore or "contains" the `init`-function,
// treat this as a call to a public method.
} else if (
typeof options === "string" &&
options[0] !== "_" &&
options !== "init"
) {
// Cache the method call
// to make it possible
// to return a value
var returns;
this.each(function () {
var instance = $.data(this, "plugin_" + pluginName);
// Tests that there's already a plugin-instance
// and checks that the requested public method exists
if (
instance instanceof Plugin &&
typeof instance[options] === "function"
) {
// Call the method of our plugin instance,
// and pass it the supplied arguments.
returns = instance[options].apply(
instance,
Array.prototype.slice.call(args, 1)
);
}
// Allow instances to be destroyed via the 'destroy' method
if (options === "destroy") {
$.data(this, "plugin_" + pluginName, null);
}
});
// If the earlier cached method
// gives a value back return the value,
// otherwise return this to preserve chainability.
return returns !== undefined ? returns : this;
}
};
})(jQuery, window, document);