//Author : @arboshiki //create lobibox object var Lobibox = Lobibox || {}; (function () { Lobibox.counter = 0; //------------------------------------------------------------------------------ //------------------------------------------------------------------------------ //User can set default properties for prompt in the following way //Lobibox.prompt.DEFAULT_OPTIONS = object; Lobibox.prompt = function (type, options) { return new LobiboxPrompt(type, options); }; //User can set default properties for confirm in the following way //Lobibox.confirm.DEFAULT_OPTIONS = object; Lobibox.confirm = function (options) { return new LobiboxConfirm(options); }; //User can set default properties for progress in the following way //Lobibox.progress.DEFAULT_OPTIONS = object; Lobibox.progress = function (options) { return new LobiboxProgress(options); }; //Create empty objects in order user to be able to set default options in the following way //Lobibox.error.DEFAULT_OPTIONS = object; //Lobibox.success.DEFAULT_OPTIONS = object; //Lobibox.warning.DEFAULT_OPTIONS = object; //Lobibox.info.DEFAULT_OPTIONS = object; Lobibox.error = {}; Lobibox.success = {}; Lobibox.warning = {}; Lobibox.info = {}; //User can set default properties for alert in the following way //Lobibox.alert.DEFAULT_OPTIONS = object; Lobibox.alert = function (type, options) { if (["success", "error", "warning", "info"].indexOf(type) > -1) { return new LobiboxAlert(type, options); } }; //User can set default properties for window in the following way //Lobibox.window.DEFAULT_OPTIONS = object; Lobibox.window = function (options) { return new LobiboxWindow('window', options); }; /** * Base prototype for all messageboxes and window */ var LobiboxBase = { $type: null, $el: null, $options: null, debug: function () { if (this.$options.debug) { window.console.debug.apply(window.console, arguments); } }, _processInput: function (options) { if ($.isArray(options.buttons)) { var btns = {}; for (var i = 0; i < options.buttons.length; i++) { btns[options.buttons[i]] = Lobibox.base.OPTIONS.buttons[options.buttons[i]]; } options.buttons = btns; } options.customBtnClass = options.customBtnClass ? options.customBtnClass : Lobibox.base.DEFAULTS.customBtnClass; for (var i in options.buttons) { if (options.buttons.hasOwnProperty(i)) { var btn = options.buttons[i]; btn = $.extend({}, Lobibox.base.OPTIONS.buttons[i], btn); if (!btn['class']) { btn['class'] = options.customBtnClass; } options.buttons[i] = btn; } } options = $.extend({}, Lobibox.base.DEFAULTS, options); if (options.showClass === undefined) { options.showClass = Lobibox.base.OPTIONS.showClass; } if (options.hideClass === undefined) { options.hideClass = Lobibox.base.OPTIONS.hideClass; } if (options.baseClass === undefined) { options.baseClass = Lobibox.base.OPTIONS.baseClass; } if (options.delayToRemove === undefined) { options.delayToRemove = Lobibox.base.OPTIONS.delayToRemove; } if (!options.iconClass) { options.iconClass = Lobibox.base.OPTIONS.icons[options.iconSource][this.$type]; } return options; }, _init: function () { var me = this; me._createMarkup(); me.setTitle(me.$options.title); if (me.$options.draggable && !me._isMobileScreen()) { me.$el.addClass('draggable'); me._enableDrag(); } if (me.$options.closeButton) { me._addCloseButton(); } if (me.$options.closeOnEsc) { $(document).on('keyup.lobibox', function (ev) { if (ev.which === 27) { me.destroy(); } }); } if (me.$options.baseClass) { me.$el.addClass(me.$options.baseClass); } if (me.$options.showClass) { me.$el.removeClass(me.$options.hideClass); me.$el.addClass(me.$options.showClass); } me.$el.data('lobibox', me); }, /** * Calculate top, left position based on string keyword * * @param {string} position "'top', 'center', 'bottom'" * @returns {{left: number, top: number}} * @private */ _calculatePosition: function (position) { var me = this; var top; if (position === 'top') { top = 30; } else if (position === 'bottom') { top = $(window).outerHeight() - me.$el.outerHeight() - 30; } else { top = ($(window).outerHeight() - me.$el.outerHeight()) / 2; } var left = ($(window).outerWidth() - me.$el.outerWidth()) / 2; return { left: left, top: top }; }, _createButton: function (type, op) { var me = this; var btn = $('') .addClass(op['class']) .attr('data-type', type) .html(op.text); if (me.$options.callback && typeof me.$options.callback === 'function') { btn.on('click.lobibox', function (ev) { var bt = $(this); me._onButtonClick(me.$options.buttons[type], type); me.$options.callback(me, bt.data('type'), ev); }); } btn.click(function () { me._onButtonClick(me.$options.buttons[type], type); }); return btn; }, _onButtonClick: function (buttonOptions, type) { var me = this; if ((type === 'ok' && me.$type === 'prompt' && me.isValid() || me.$type !== 'prompt' || type !== 'ok') && buttonOptions && buttonOptions.closeOnClick) { me.destroy(); } }, _generateButtons: function () { var me = this; var btns = []; for (var i in me.$options.buttons) { if (me.$options.buttons.hasOwnProperty(i)) { var op = me.$options.buttons[i]; var btn = me._createButton(i, op); btns.push(btn); } } return btns; }, _createMarkup: function () { var me = this; var lobibox = $('
'); lobibox.attr('data-is-modal', me.$options.modal); var header = $('
') .append('') ; var body = $('
'); lobibox.append(header); lobibox.append(body); if (me.$options.buttons && !$.isEmptyObject(me.$options.buttons)) { var footer = $(''); footer.append(me._generateButtons()); lobibox.append(footer); if (Lobibox.base.OPTIONS.buttonsAlign.indexOf(me.$options.buttonsAlign) > -1) { footer.addClass('text-' + me.$options.buttonsAlign); } } me.$el = lobibox .addClass(Lobibox.base.OPTIONS.modalClasses[me.$type]) ; }, _setSize: function () { var me = this; me.setWidth(me.$options.width); if (me.$options.height === 'auto') { me.setHeight(me.$el.outerHeight()); } else { me.setHeight(me.$options.height); } }, _calculateBodyHeight: function (height) { var me = this; var headerHeight = me.$el.find('.lobibox-header').outerHeight(); var footerHeight = me.$el.find('.lobibox-footer').outerHeight(); return height - (headerHeight ? headerHeight : 0) - (footerHeight ? footerHeight : 0); }, /** * Add backdrop in case if backdrop does not exist * * @private */ _addBackdrop: function () { if ($('.lobibox-backdrop').length === 0) { $('body').append('
'); } }, _triggerEvent: function (type) { var me = this; if (me.$options[type] && typeof me.$options[type] === 'function') { me.$options[type](me); } }, _calculateWidth: function (width) { var me = this; width = Math.min(Math.max(width, me.$options.width), $(window).outerWidth()); if (width === $(window).outerWidth()) { width -= 2 * me.$options.horizontalOffset; } return width; }, _calculateHeight: function (height) { var me = this; console.log(me.$options.height); height = Math.min(Math.max(height, me.$options.height), $(window).outerHeight()); if (height === $(window).outerHeight()) { height -= 2 * me.$options.verticalOffset; } return height; }, _addCloseButton: function () { var me = this; var closeBtn = $('×'); me.$el.find('.lobibox-header').append(closeBtn); closeBtn.on('mousedown', function (ev) { ev.stopPropagation(); }); closeBtn.on('click.lobibox', function () { me.destroy(); }); }, _position: function () { var me = this; me._setSize(); var pos = me._calculatePosition(); me.setPosition(pos.left, pos.top); }, _isMobileScreen: function () { return $(window).outerWidth() < 768; }, _enableDrag: function () { var el = this.$el, heading = el.find('.lobibox-header'); heading.on('mousedown.lobibox', function (ev) { el.attr('offset-left', ev.offsetX); el.attr('offset-top', ev.offsetY); el.attr('allow-drag', 'true'); }); $(document).on('mouseup.lobibox', function () { el.attr('allow-drag', 'false'); }); $(document).on('mousemove.lobibox', function (ev) { if (el.attr('allow-drag') === 'true') { var left = ev.clientX - parseInt(el.attr('offset-left'), 10) - parseInt(el.css('border-left-width'), 10); var top = ev.clientY - parseInt(el.attr('offset-top'), 10) - parseInt(el.css('border-top-width'), 10); el.css({ left: left, top: top }); } }); }, /** * Set the message of messagebox * * @param {string} msg "new message of messagebox" * @returns {LobiboxBase} * @private */ _setContent: function (msg) { var me = this; me.$el.find('.lobibox-body').html(msg); return me; }, _beforeShow: function () { var me = this; me._triggerEvent('onShow'); }, _afterShow: function () { var me = this; Lobibox.counter++; me.$el.attr('data-nth', Lobibox.counter); if (!me.$options.draggable){ $(window).on('resize.lobibox-'+me.$el.attr('data-nth'), function(){ me.refreshWidth(); me.refreshHeight(); me.$el.css('left', '50%').css('margin-left', '-'+(me.$el.width()/2)+'px'); me.$el.css('top', '50%').css('margin-top', '-'+(me.$el.height()/2)+'px'); }); } me._triggerEvent('shown'); }, _beforeClose: function () { var me = this; me._triggerEvent('beforeClose'); }, _afterClose: function () { var me = this; if (!me.$options.draggable){ $(window).off('resize.lobibox-'+me.$el.attr('data-nth')); } me._triggerEvent('closed'); }, //------------------------------------------------------------------------------ //--------------------------PUBLIC METHODS-------------------------------------- //------------------------------------------------------------------------------ /** * Hide the messagebox * * @returns {LobiboxBase} */ hide: function () { var me = this; if (me.$options.hideClass) { me.$el.removeClass(me.$options.showClass); me.$el.addClass(me.$options.hideClass); setTimeout(function () { callback(); }, me.$options.delayToRemove); } else { callback(); } function callback() { me.$el.addClass('lobibox-hidden'); if ($('.lobibox[data-is-modal=true]:not(.lobibox-hidden)').length === 0) { $('.lobibox-backdrop').remove(); $('body').removeClass(Lobibox.base.OPTIONS.bodyClass); } } return this; }, /** * Removes the messagebox from document * * @returns {LobiboxBase} */ destroy: function () { var me = this; me._beforeClose(); if (me.$options.hideClass) { me.$el.removeClass(me.$options.showClass).addClass(me.$options.hideClass); setTimeout(function () { callback(); }, me.$options.delayToRemove); } else { callback(); } function callback() { me.$el.remove(); if ($('.lobibox[data-is-modal=true]').length === 0) { $('.lobibox-backdrop').remove(); $('body').removeClass(Lobibox.base.OPTIONS.bodyClass); } me._afterClose(); } return this; }, /** * Set the width of messagebox * * @param {number} width "new width of messagebox" * @returns {LobiboxBase} */ setWidth: function (width) { var me = this; me.$el.css('width', me._calculateWidth(width)); return me; }, refreshWidth: function(){ this.setWidth(this.$el.width()); }, refreshHeight: function(){ this.setHeight(this.$el.height()); }, /** * Set the height of messagebox * * @param {number} height "new height of messagebox" * @returns {LobiboxBase} */ setHeight: function (height) { var me = this; me.$el.css('height', me._calculateHeight(height)) .find('.lobibox-body') .css('height', me._calculateBodyHeight(me.$el.innerHeight())); return me; }, /** * Set the width and height of messagebox * * @param {number} width "new width of messagebox" * @param {number} height "new height of messagebox" * @returns {LobiboxBase} */ setSize: function (width, height) { var me = this; me.setWidth(width); me.setHeight(height); return me; }, /** * Set position of messagebox * * @param {number|String} left "left coordinate of messsagebox or string representaing position. Available: ('top', 'center', 'bottom')" * @param {number} top * @returns {LobiboxBase} */ setPosition: function (left, top) { var pos; if (typeof left === 'number' && typeof top === 'number') { pos = { left: left, top: top }; } else if (typeof left === 'string') { pos = this._calculatePosition(left); } this.$el.css(pos); return this; }, /** * Set the title of messagebox * * @param {string} title "new title of messagebox" * @returns {LobiboxBase} */ setTitle: function (title) { return this.$el.find('.lobibox-title').html(title); }, /** * Get the title of messagebox * * @returns {string} */ getTitle: function () { return this.$el.find('.lobibox-title').html(); }, /** * Show messagebox * * @returns {LobiboxBase} */ show: function () { var me = this, $body = $('body'); me._beforeShow(); me.$el.removeClass('lobibox-hidden'); $body.append(me.$el); if (me.$options.buttons) { var buttons = me.$el.find('.lobibox-footer').children(); buttons[0].focus(); } if (me.$options.modal) { $body.addClass(Lobibox.base.OPTIONS.bodyClass); me._addBackdrop(); } if (me.$options.delay !== false) { setTimeout(function () { me.destroy(); }, me.$options.delay); } me._afterShow(); return me; } }; //User can set default options by this variable Lobibox.base = {}; Lobibox.base.OPTIONS = { bodyClass: 'lobibox-open', modalClasses: { 'error': 'lobibox-error', 'success': 'lobibox-success', 'info': 'lobibox-info', 'warning': 'lobibox-warning', 'confirm': 'lobibox-confirm', 'progress': 'lobibox-progress', 'prompt': 'lobibox-prompt', 'default': 'lobibox-default', 'window': 'lobibox-window' }, buttonsAlign: ['left', 'center', 'right'], buttons: { ok: { 'class': 'lobibox-btn lobibox-btn-default', text: 'OK', closeOnClick: true }, cancel: { 'class': 'lobibox-btn lobibox-btn-cancel', text: 'Cancel', closeOnClick: true }, yes: { 'class': 'lobibox-btn lobibox-btn-yes', text: 'Yes', closeOnClick: true }, no: { 'class': 'lobibox-btn lobibox-btn-no', text: 'No', closeOnClick: true } }, icons: { bootstrap: { confirm: 'glyphicon glyphicon-question-sign', success: 'glyphicon glyphicon-ok-sign', error: 'glyphicon glyphicon-remove-sign', warning: 'glyphicon glyphicon-exclamation-sign', info: 'glyphicon glyphicon-info-sign' }, fontAwesome: { confirm: 'fa fa-question-circle', success: 'fa fa-check-circle', error: 'fa fa-times-circle', warning: 'fa fa-exclamation-circle', info: 'fa fa-info-circle' } } }; Lobibox.base.DEFAULTS = { horizontalOffset: 5, //If the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset verticalOffset: 5, //If the messagebox is larger (in height) than window's height. The messagebox's height is reduced to window height - 2 * verticalOffset width: 600, height: 'auto', // Height is automatically calculated by width closeButton: true, // Show close button or not draggable: false, // Make messagebox draggable customBtnClass: 'lobibox-btn lobibox-btn-default', // Class for custom buttons modal: true, debug: false, buttonsAlign: 'center', // Position where buttons should be aligned closeOnEsc: true, // Close messagebox on Esc press delayToRemove: 200, // Time after which lobibox will be removed after remove call. (This option is for hide animation to finish) delay: false, // Time to remove lobibox after shown baseClass: 'animated-super-fast', // Base class to add all messageboxes showClass: 'zoomIn', // Show animation class hideClass: 'zoomOut', // Hide animation class iconSource: 'bootstrap', // "bootstrap" or "fontAwesome" the library which will be used for icons //events //When messagebox show is called but before it is actually shown onShow: null, //After messagebox is shown shown: null, //When messagebox remove method is called but before it is actually hidden beforeClose: null, //After messagebox is hidden closed: null }; //------------------------------------------------------------------------------ //-------------------------LobiboxPrompt---------------------------------------- //------------------------------------------------------------------------------ function LobiboxPrompt(type, options) { this.$input = null; this.$type = 'prompt'; this.$promptType = type; options = $.extend({}, Lobibox.prompt.DEFAULT_OPTIONS, options); this.$options = this._processInput(options); this._init(); this.debug(this); } LobiboxPrompt.prototype = $.extend({}, LobiboxBase, { constructor: LobiboxPrompt, _processInput: function (options) { var me = this; var mergedOptions = LobiboxBase._processInput.call(me, options); mergedOptions.buttons = { ok: Lobibox.base.OPTIONS.buttons.ok, cancel: Lobibox.base.OPTIONS.buttons.cancel }; options = $.extend({}, mergedOptions, LobiboxPrompt.DEFAULT_OPTIONS, options); return options; }, _init: function () { var me = this; LobiboxBase._init.call(me); me.show(); }, _afterShow: function () { var me = this; me._setContent(me._createInput())._position(); me.$input.focus(); LobiboxBase._afterShow.call(me); }, _createInput: function () { var me = this, label; if (me.$options.multiline) { me.$input = $('').attr('rows', me.$options.lines); } else { me.$input = $(''); } me.$input.addClass('lobibox-input').attr(me.$options.attrs); if (me.$options.value) { me.setValue(me.$options.value); } if (me.$options.label) { label = $(''); } return $('
').append(label, me.$input); }, /** * Set value of input * * @param {string} val "value of input" * @returns {LobiboxPrompt} */ setValue: function (val) { this.$input.val(val); return this; }, /** * Get value of input * * @returns {String} */ getValue: function () { return this.$input.val(); }, isValid: function () { var me = this, $error = me.$el.find('.lobibox-input-error-message'); if (me.$options.required && !me.getValue()){ me.$input.addClass('invalid'); if ($error.length === 0){ me.$el.find('.lobibox-body').append('

'+me.$options.errorMessage+'

'); me._position(); me.$input.focus(); } return false; } me.$input.removeClass('invalid'); $error.remove(); me._position(); me.$input.focus(); return true; } }); LobiboxPrompt.DEFAULT_OPTIONS = { width: 400, attrs: {}, // Object of any valid attribute of input field value: '', // Value which is given to textfield when messagebox is created multiline: false, // Set this true for multiline prompt lines: 3, // This works only for multiline prompt. Number of lines type: 'text', // Prompt type. Available types (text|number|color) label: '', // Set some text which will be shown exactly on top of textfield required: true, errorMessage: 'The field is required' }; //------------------------------------------------------------------------------ //-------------------------LobiboxConfirm--------------------------------------- //------------------------------------------------------------------------------ function LobiboxConfirm(options) { this.$type = 'confirm'; // options = $.extend({}, Lobibox.confirm.DEFAULT_OPTIONS, options); this.$options = this._processInput(options); this._init(); this.debug(this); } LobiboxConfirm.prototype = $.extend({}, LobiboxBase, { constructor: LobiboxConfirm, _processInput: function (options) { var me = this; var mergedOptions = LobiboxBase._processInput.call(me, options); mergedOptions.buttons = { yes: Lobibox.base.OPTIONS.buttons.yes, no: Lobibox.base.OPTIONS.buttons.no }; options = $.extend({}, mergedOptions, Lobibox.confirm.DEFAULTS, options); return options; }, _init: function () { var me = this; LobiboxBase._init.call(me); me.show(); }, _afterShow: function () { var me = this; var d = $('
'); if (me.$options.iconClass) { d.append($('
') .append('')) ; } d.append('
' + me.$options.msg + '
'); me._setContent(d.html()); me._position(); LobiboxBase._afterShow.call(me); } }); Lobibox.confirm.DEFAULTS = { title: 'Question', width: 500 }; //------------------------------------------------------------------------------ //-------------------------LobiboxAlert------------------------------------------ //------------------------------------------------------------------------------ function LobiboxAlert(type, options) { this.$type = type; // options = $.extend({}, Lobibox.alert.DEFAULT_OPTIONS, Lobibox[type].DEFAULT_OPTIONS, options); this.$options = this._processInput(options); this._init(); this.debug(this); } LobiboxAlert.prototype = $.extend({}, LobiboxBase, { constructor: LobiboxAlert, _processInput: function (options) { // ALERT_OPTIONS = $.extend({}, LobiboxAlert.OPTIONS, Lobibox.alert.DEFAULTS); var me = this; var mergedOptions = LobiboxBase._processInput.call(me, options); mergedOptions.buttons = { ok: Lobibox.base.OPTIONS.buttons.ok }; options = $.extend({}, mergedOptions, Lobibox.alert.OPTIONS[me.$type], Lobibox.alert.DEFAULTS, options); return options; }, _init: function () { var me = this; LobiboxBase._init.call(me); me.show(); }, _afterShow: function () { var me = this; var d = $('
'); if (me.$options.iconClass) { d.append($('
') .append('')) ; } d.append('
' + me.$options.msg + '
'); me._setContent(d.html()); me._position(); LobiboxBase._afterShow.call(me); } }); Lobibox.alert.OPTIONS = { warning: { title: 'Warning' }, info: { title: 'Information' }, success: { title: 'Success' }, error: { title: 'Error' } }; //User can set default options by this variable Lobibox.alert.DEFAULTS = {}; //------------------------------------------------------------------------------ //-------------------------LobiboxProgress-------------------------------------- //------------------------------------------------------------------------------ function LobiboxProgress(options) { this.$type = 'progress'; this.$progressBarElement = null; this.$options = this._processInput(options); this.$progress = 0; this._init(); this.debug(this); } LobiboxProgress.prototype = $.extend({}, LobiboxBase, { constructor: LobiboxProgress, _processInput: function (options) { var me = this; var mergedOptions = LobiboxBase._processInput.call(me, options); options = $.extend({}, mergedOptions, Lobibox.progress.DEFAULTS, options); return options; }, _init: function () { var me = this; LobiboxBase._init.call(me); me.show(); }, _afterShow: function () { var me = this; if (me.$options.progressTpl) { me.$progressBarElement = $(me.$options.progressTpl); } else { me.$progressBarElement = me._createProgressbar(); } var label; if (me.$options.label) { label = $(''); } var innerHTML = $('
').append(label, me.$progressBarElement); me._setContent(innerHTML); me._position(); LobiboxBase._afterShow.call(me); }, _createProgressbar: function () { var me = this; var outer = $('
') .append('
') ; if (me.$options.showProgressLabel) { outer.append(''); } return outer; }, /** * Set progress value * * @param {number} progress "progress value" * @returns {LobiboxProgress} */ setProgress: function (progress) { var me = this; if (me.$progress === 100) { return; } progress = Math.min(100, Math.max(0, progress)); me.$progress = progress; me._triggerEvent('progressUpdated'); if (me.$progress === 100) { me._triggerEvent('progressCompleted'); } me.$el.find('.lobibox-progress-element').css('width', progress.toFixed(1) + "%"); me.$el.find('[data-role="progress-text"]').html(progress.toFixed(1) + "%"); return me; }, /** * Get progress value * * @returns {number} */ getProgress: function () { return this.$progress; } }); Lobibox.progress.DEFAULTS = { width: 500, showProgressLabel: true, // Show percentage of progress label: '', // Show progress label progressTpl: false, //Template of progress bar //Events progressUpdated: null, progressCompleted: null }; //------------------------------------------------------------------------------ //-------------------------LobiboxWindow---------------------------------------- //------------------------------------------------------------------------------ function LobiboxWindow(type, options) { this.$type = type; this.$options = this._processInput(options); this._init(); this.debug(this); } LobiboxWindow.prototype = $.extend({}, LobiboxBase, { constructor: LobiboxWindow, _processInput: function (options) { var me = this; var mergedOptions = LobiboxBase._processInput.call(me, options); if (options.content && typeof options.content === 'function') { options.content = options.content(); } if (options.content instanceof jQuery) { options.content = options.content.clone(); } options = $.extend({}, mergedOptions, Lobibox.window.DEFAULTS, options); return options; }, _init: function () { var me = this; LobiboxBase._init.call(me); me.setContent(me.$options.content); if (me.$options.url && me.$options.autoload) { if (!me.$options.showAfterLoad) { me.show(); } me.load(function () { if (me.$options.showAfterLoad) { me.show(); } }); } else { me.show(); } }, _afterShow: function () { var me = this; me._position(); LobiboxBase._afterShow.call(me); }, /** * Setter method for params option * * @param {object} params "new params" * @returns {LobiboxWindow} */ setParams: function (params) { var me = this; me.$options.params = params; return me; }, /** * Getter method for params * * @returns {object} */ getParams: function () { var me = this; return me.$options.params; }, /** * Setter method of loadMethod option * * @param {string} method "new method" * @returns {LobiboxWindow} */ setLoadMethod: function (method) { var me = this; me.$options.loadMethod = method; return me; }, /** * Getter method for loadMethod option * * @returns {string} */ getLoadMethod: function () { var me = this; return me.$options.loadMethod; }, /** * Setter method of content option. * Change the content of window * * @param {string} content "new content" * @returns {LobiboxWindow} */ setContent: function (content) { var me = this; me.$options.content = content; me.$el.find('.lobibox-body').html('').append(content); return me; }, /** * Getter method of content option * * @returns {string} */ getContent: function () { var me = this; return me.$options.content; }, /** * Setter method of url option * * @param {string} url "new url" * @returns {LobiboxWindow} */ setUrl: function (url) { this.$options.url = url; return this; }, /** * Getter method of url option * * @returns {String} */ getUrl: function () { return this.$options.url; }, /** * Loads content to window by ajax from specific url * * @param {Function} callback "callback function" * @returns {LobiboxWindow} */ load: function (callback) { var me = this; if (!me.$options.url) { return me; } $.ajax(me.$options.url, { method: me.$options.loadMethod, data: me.$options.params }).done(function (res) { me.setContent(res); if (callback && typeof callback === 'function') { callback(res); } }); return me; } }); Lobibox.window.DEFAULTS = { width: 480, height: 600, content: '', // HTML Content of window url: '', // URL which will be used to load content draggable: true, // Override default option autoload: true, // Auto load from given url when window is created loadMethod: 'GET', // Ajax method to load content showAfterLoad: true, // Show window after content is loaded or show and then load content params: {} // Parameters which will be send by ajax for loading content }; })(); //Author : @arboshiki /** * Generates random string of n length. * String contains only letters and numbers * * @param {int} n * @returns {String} */ Math.randomString = function (n) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i < n; i++) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; }; var Lobibox = Lobibox || {}; (function () { var LobiboxNotify = function (type, options) { //------------------------------------------------------------------------------ //----------------PROTOTYPE VARIABLES------------------------------------------- //------------------------------------------------------------------------------ this.$type = null; this.$options = null; this.$el = null; //------------------------------------------------------------------------------ //-----------------PRIVATE VARIABLES-------------------------------------------- //------------------------------------------------------------------------------ var me = this; //------------------------------------------------------------------------------ //-----------------PRIVATE FUNCTIONS-------------------------------------------- //------------------------------------------------------------------------------ var _processInput = function (options) { if (options.size === 'mini' || options.size === 'large') { options = $.extend({}, Lobibox.notify.OPTIONS[options.size], options); } options = $.extend({}, Lobibox.notify.OPTIONS[me.$type], Lobibox.notify.DEFAULTS, options); if (options.size !== 'mini' && options.title === true) { options.title = Lobibox.notify.OPTIONS[me.$type].title; } else if (options.size === 'mini' && options.title === true) { options.title = false; } if (options.icon === true) { options.icon = Lobibox.notify.OPTIONS.icons[options.iconSource][me.$type]; } if (options.sound === true) { options.sound = Lobibox.notify.OPTIONS[me.$type].sound; } if (options.sound) { options.sound = options.soundPath + options.sound + options.soundExt; } return options; }; var _appendInWrapper = function ($el, $wrapper) { if (me.$options.size === 'normal') { if ($wrapper.hasClass('bottom')) { $wrapper.prepend($el); } else { $wrapper.append($el); } } else if (me.$options.size === 'mini') { if ($wrapper.hasClass('bottom')) { $wrapper.prepend($el); } else { $wrapper.append($el); } } else if (me.$options.size === 'large') { var tabPane = _createTabPane().append($el); var $li = _createTabControl(tabPane.attr('id')); $wrapper.find('.lb-notify-wrapper').append(tabPane); $wrapper.find('.lb-notify-tabs').append($li); _activateTab($li); $li.find('>a').click(function () { _activateTab($li); }); } }; var _activateTab = function ($li) { $li.closest('.lb-notify-tabs').find('>li').removeClass('active'); $li.addClass('active'); var $current = $($li.find('>a').attr('href')); $current.closest('.lb-notify-wrapper').find('>.lb-tab-pane').removeClass('active'); $current.addClass('active') }; var _createTabControl = function (tabPaneId) { var $li = $('
  • ', { 'class': Lobibox.notify.OPTIONS[me.$type]['class'] }); $('', { 'href': '#' + tabPaneId }).append('') .appendTo($li); return $li; }; var _createTabPane = function () { return $('
    ', { 'class': 'lb-tab-pane', 'id': Math.randomString(10) }) }; var _createNotifyWrapper = function () { var selector = (me.$options.size === 'large' ? '.lobibox-notify-wrapper-large' : '.lobibox-notify-wrapper') + "." + me.$options.position.replace(/\s/gi, '.'), $wrapper; //var classes = me.$options.position.split(" "); $wrapper = $(selector); if ($wrapper.length === 0) { $wrapper = $('
    ') .addClass(selector.replace(/\./g, ' ').trim()) .appendTo($('body')); if (me.$options.size === 'large') { $wrapper.append($('')) .append($('
    ')); } } return $wrapper; }; var _createNotify = function () { var OPTS = Lobibox.notify.OPTIONS, $iconEl, $innerIconEl, $iconWrapper, $body, $msg, $notify = $('
    ', { 'class': 'lobibox-notify ' + OPTS[me.$type]['class'] + ' ' + OPTS['class'] + ' ' + me.$options.showClass }); $iconWrapper = $('
    ').appendTo($notify); $iconEl = $('
    ').appendTo($iconWrapper); $innerIconEl = $('
    ').appendTo($iconEl); // Add image or icon depending on given parameters if (me.$options.img) { $innerIconEl.append(''); } else if (me.$options.icon) { $innerIconEl.append('
    '); } else { $notify.addClass('without-icon'); } // Create body, append title and message in body and append body in notification $msg = $('
    ' + me.$options.msg + '
    '); if (me.$options.messageHeight !== false) { $msg.css('max-height', me.$options.messageHeight); } $body = $('
    ', { 'class': 'lobibox-notify-body' }).append($msg).appendTo($notify); if (me.$options.title) { $body.prepend('
    ' + me.$options.title + '
    '); } _addCloseButton($notify); if (me.$options.size === 'normal' || me.$options.size === 'mini') { _addCloseOnClick($notify); _addDelay($notify); } // Give width to notification if (me.$options.width) { $notify.css('width', _calculateWidth(me.$options.width)); } return $notify; }; var _addCloseButton = function ($el) { if (!me.$options.closable) { return; } $('×') .click(function (ev) { ev.preventDefault(); ev.stopPropagation(); me.remove(); }).appendTo($el); }; var _addCloseOnClick = function ($el) { if (!me.$options.closeOnClick) { return; } $el.click(function () { me.remove(); }); }; var _addDelay = function ($el) { if (!me.$options.delay) { return; } if (me.$options.delayIndicator) { var delay = $('
    '); $el.append(delay); } var time = 0; var interval = 1000 / 30; var currentTime = new Date().getTime(); var timer = setInterval(function () { if (me.$options.continueDelayOnInactiveTab) { time = new Date().getTime() - currentTime; } else { time += interval; } var width = 100 * time / me.$options.delay; if (width >= 100) { width = 100; me.remove(); timer = clearInterval(timer); } if (me.$options.delayIndicator) { delay.find('div').css('width', width + "%"); } }, interval); if (me.$options.pauseDelayOnHover) { $el.on('mouseenter.lobibox', function () { interval = 0; }).on('mouseleave.lobibox', function () { interval = 1000 / 30; }); } }; var _findTabToActivate = function ($li) { var $itemToActivate = $li.prev(); if ($itemToActivate.length === 0) { $itemToActivate = $li.next(); } if ($itemToActivate.length === 0) { return null; } return $itemToActivate; }; var _calculateWidth = function (width) { width = Math.min($(window).outerWidth(), width); return width; }; //------------------------------------------------------------------------------ //----------------PROTOTYPE FUNCTIONS------------------------------------------- //------------------------------------------------------------------------------ /** * Delete the notification * * @returns {LobiboxNotify} */ this.remove = function () { me.$el.removeClass(me.$options.showClass) .addClass(me.$options.hideClass); var parent = me.$el.parent(); var wrapper = parent.closest('.lobibox-notify-wrapper-large'); var href = '#' + parent.attr('id'); var $li = wrapper.find('>.lb-notify-tabs>li:has(a[href="' + href + '"])'); $li.addClass(Lobibox.notify.OPTIONS['class']) .addClass(me.$options.hideClass); setTimeout(function () { if (me.$options.size === 'normal' || me.$options.size === 'mini') { me.$el.remove(); } else if (me.$options.size === 'large') { var $newLi = _findTabToActivate($li); if ($newLi) { _activateTab($newLi); } $li.remove(); parent.remove(); } var list = Lobibox.notify.list; var ind = list.indexOf(me); list.splice(ind, 1); var next = list[ind]; if (next && next.$options.showAfterPrevious) { next._init(); } }, 500); return me; }; me._init = function () { // Create notification var $notify = _createNotify(); if (me.$options.size === 'mini') { $notify.addClass('notify-mini'); } if (typeof me.$options.position === 'string') { var $wrapper = _createNotifyWrapper(); _appendInWrapper($notify, $wrapper); if ($wrapper.hasClass('center')) { $wrapper.css('margin-left', '-' + ($wrapper.width() / 2) + "px"); } } else { $('body').append($notify); $notify.css({ 'position': 'fixed', left: me.$options.position.left, top: me.$options.position.top }) } me.$el = $notify; if (me.$options.sound) { var snd = new Audio(me.$options.sound); // buffers automatically when created snd.play(); } if (me.$options.rounded) { me.$el.addClass('rounded'); } me.$el.on('click.lobibox', function (ev) { if (me.$options.onClickUrl) { window.location.href = me.$options.onClickUrl; } if (me.$options.onClick && typeof me.$options.onClick === 'function') { me.$options.onClick.call(me, ev); } }); me.$el.data('lobibox', me); }; //------------------------------------------------------------------------------ //------------------------------------------------------------------------------ //------------------------------------------------------------------------------ this.$type = type; this.$options = _processInput(options); if (!me.$options.showAfterPrevious || Lobibox.notify.list.length === 0) { this._init(); } }; Lobibox.notify = function (type, options) { if (["default", "info", "warning", "error", "success"].indexOf(type) > -1) { var lobibox = new LobiboxNotify(type, options); Lobibox.notify.list.push(lobibox); return lobibox; } }; Lobibox.notify.list = []; Lobibox.notify.closeAll = function () { var list = Lobibox.notify.list; for (var i in list) { list[i].remove(); } }; //User can set default options to this variable Lobibox.notify.DEFAULTS = { title: true, // Title of notification. If you do not include the title in options it will automatically takes its value //from Lobibox.notify.OPTIONS object depending of the type of the notifications or set custom string. Set this false to disable title size: 'normal', // normal, mini, large soundPath: 'sounds/', // The folder path where sounds are located soundExt: '.ogg', // Default extension for all sounds showClass: 'fadeInDown', // Show animation class. hideClass: 'zoomOut', // Hide animation class. icon: true, // Icon of notification. Leave as is for default icon or set custom string msg: '', // Message of notification img: null, // Image source string closable: true, // Make notifications closable hideCloseButton: false, // Notification may be closable but you can hide close button and it will be closed by clicking on notification itsef delay: 5000, // Hide notification after this time (in miliseconds) delayIndicator: true, // Show timer indicator closeOnClick: true, // Close notifications by clicking on them width: 400, // Width of notification box sound: true, // Sound of notification. Set this false to disable sound. Leave as is for default sound or set custom soud path // Place to show notification. Available options: "top left", "top right", "bottom left", "bottom right", "center top", "center bottom" // It can also be object {left: number, top: number} to position notification at any place position: "bottom right", iconSource: 'bootstrap', // "bootstrap" or "fontAwesome" the library which will be used for icons rounded: false, // Whether to make notification corners rounded messageHeight: 60, // Notification message maximum height. This is not for notification itself, this is for .lobibox-notify-msg pauseDelayOnHover: true, // When you mouse over on notification delay (if it is enabled) will be paused. onClickUrl: null, // The url which will be opened when notification is clicked showAfterPrevious: false, // Set this to true if you want notification not to be shown until previous notification is closed. This is useful for notification queues continueDelayOnInactiveTab: true, // Continue delay when browser tab is inactive // Events onClick: null }; //This variable is necessary. Lobibox.notify.OPTIONS = { 'class': 'animated-fast', large: { width: 500, messageHeight: 96 }, mini: { 'class': 'notify-mini', messageHeight: 32 }, default: { 'class': 'lobibox-notify-default', 'title': 'Default', sound: false }, success: { 'class': 'lobibox-notify-success', 'title': 'Success', sound: 'sound2' }, error: { 'class': 'lobibox-notify-error', 'title': 'Error', sound: 'sound4' }, warning: { 'class': 'lobibox-notify-warning', 'title': 'Warning', sound: 'sound5' }, info: { 'class': 'lobibox-notify-info', 'title': 'Information', sound: 'sound6' }, icons: { bootstrap: { success: 'glyphicon glyphicon-ok-sign', error: 'glyphicon glyphicon-remove-sign', warning: 'glyphicon glyphicon-exclamation-sign', info: 'glyphicon glyphicon-info-sign' }, fontAwesome: { success: 'fa fa-check-circle', error: 'fa fa-times-circle', warning: 'fa fa-exclamation-circle', info: 'fa fa-info-circle' } } }; })();