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