File: js\jquery.moedal.js
/*!
* jQuery.Moedal v1.1 - A quick drop in replacement for native javascript dialogs.
* https://github.com/KazeFlame/jQuery.Moedal
*
* Copyright 2015 by KazeFlame
* Released under the MIT license
* https://github.com/KazeFlame/jQuery.Moedal/blob/master/LICENSE
*/
(function($) {
'use strict';
/**
* Count of MoedalObject instances.
*
* @type {number}
*/
var count = 1;
/**
* Default template for creating modals.
*
* @type {string}
*/
var template = '<div id="moedalBackdrop" data-modal="@attr.uniqueId@" class="@attr.backdropClass@" style="display: none;"></div><div id="moedal" data-modal="@attr.uniqueId@" class="@attr.modalClass@" style="display: none;"><div class="m-wrapper"><div class="m-caption"><h1 class="m-title">@data.title@</h1><span id="moedalClose" class="m-close">×</span></div><div class="m-content">@data.content@</div></div></div>';
/**
* Main class of the plugin.
* Use $.moedal when doing jQuery.
*
* @class Moedal
* @constructor
*/
function Moedal() {
/**
* Settings container.
*
* @property settings
* @type {array}
*/
this.settings = null;
this.config();
}
Moedal.prototype = {
//////////////////// CLASS FUNCTIONS ////////////////////
/**
* Configures the plugin with default or with user options.
*
* @method config
* @param {array} options
* @returns {Moedal}
*/
config: function(options) {
this.settings = $.extend({
modalClass: 'moedal',
backdropClass: 'moedalBackdrop',
closable: true,
closeOnEscape: true,
closeOnBackdropClick: true
}, options);
return this;
},
/**
* Re-creates the template for creating modals.
*
* @method template
* @param {string} re
* @returns {Moedal}
*/
tempate: function(re) {
template = re;
return this;
},
/**
* Creates a new MoedalObject instance.
*
* @method create
* @param {array} options
* @returns {MoedalObject}
*/
create: function(options) {
options = $.extend({
'title': 'Untitled',
'content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sit amet metus varius semper. Phasellus imperdiet lacus sit amet lorem porta varius. Duis ultricies euismod ligula at laoreet. Vestibulum porttitor purus ac tortor euismod consequat. Phasellus lacinia sed urna eu egestas.'
}, options);
var modal = new MoedalObject();
modal.uniqueId = count.toString();
modal.backdropClass = this.settings['backdropClass'];
modal.modalClass = this.settings['modalClass'];
modal.title = options['title'];
modal.content = options['content'];
modal.pack();
count++;
return modal;
},
/**
* Adds function to this class.
*
* Useful when presetting a modal function.
*
* @method addFunction
* @param {string} name
* @param {function} fn
* @returns {Moedal}
*/
addFunction: function(name, fn) {
return this;
},
//////////////////// MODAL FUNCTIONS ////////////////////
/**
* Creates alert modal.
*
* @method alert
* @param {string} title
* @param {string} message
* @returns {MoedalObject}
*/
alert: function(title, message) {
},
/**
* Creates prompt modal.
*
* @method prompt
* @param {string} title
* @param {string} message
* @param {string} defaultValue
* @returns {MoedalObject}
*/
prompt: function(title, message, defaultValue) {
},
/**
* Creates confirm modal.
*
* @method confirm
* @param {string} title
* @param {string} message
* @returns {MoedalObject}
*/
confirm: function(title, message) {
}
};
/**
* Class used by any modal instances.
*
* @class MoedalObject
* @constructor
*/
function MoedalObject() {
/**
* Self container.
*
* @property self
* @type {object}
*/
this.self = null;
/**
* A unique id of MoedalObject instance.
*
* @property uniqueId
* @type {string}
*/
this.uniqueId = null;
/**
* CSS class of backdrop.
*
* @property backdropClass
* @type {string}
*/
this.backdropClass = null;
/**
* CSS class of modal.
*
* @property modalClass
* @type {string}
*/
this.modalClass = null;
/**
* Title of modal.
*
* @property title
* @type {string}
*/
this.title = null;
/**
* Content of modal.
*
* @property content
* @type {string}
*/
this.content = null;
}
MoedalObject.prototype = {
/**
* Packs the modal.
*
* @method pack
* @returns {MoedalObject}
*/
pack: function() {
var modal = template
.replace(/@attr.uniqueId@/g, this.uniqueId)
.replace(/@attr.backdropClass@/g, this.backdropClass)
.replace(/@attr.modalClass@/g, this.modalClass)
.replace(/@data.title@/, this.title)
.replace(/@data.content@/, this.content);
this.self = $(modal).appendTo('body');
return this;
},
/**
* Displays the modal in the screen.
*
* @method show
* @param {string} animation
* @returns {MoedalObject}
*/
show: function(animation) {
this.self.show();
return this;
},
/**
* Closes the modal.
*
* @method close
* @returns {MoedalObject}
*/
close: function() {
this.self.hide();
return this;
},
/**
* Animates the modal.
*
* @method animate
* @param {string} animation
* @returns {MoedalObject}
*/
animate: function(animation) {
return this;
}
};
/**
* Makes getPrototypeOf works in major browsers.
*/
if(typeof(Object.getPrototypeOf) === 'undefined') {
if(({}).__proto__ === Object.prototype && ([]).__proto__ === Array.prototype) {
Object.getPrototypeOf = function getPrototypeOf(object) {
return object.__proto__;
};
} else {
Object.getPrototypeOf = function getPrototypeOf(object) {
return object.constructor ? object.constructor.prototype:void 0;
};
}
}
/**
* Instantiate the Moedal class.
*
* @type {Moedal}
*/
if(typeof($.moedal) === 'undefined') {
$.moedal = new Moedal();
} else {
throw('Seems like jQuery.Moedal is already defined.');
}
})(jQuery);
