You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1178 lines
37 KiB
1178 lines
37 KiB
var Lobibox = Lobibox || {}; |
|
!(function () { |
|
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); |
|
} |
|
function LobiboxConfirm(options) { |
|
(this.$type = "confirm"), |
|
(this.$options = this._processInput(options)), |
|
this._init(), |
|
this.debug(this); |
|
} |
|
function LobiboxAlert(type, options) { |
|
(this.$type = type), |
|
(this.$options = this._processInput(options)), |
|
this._init(), |
|
this.debug(this); |
|
} |
|
function LobiboxProgress(options) { |
|
(this.$type = "progress"), |
|
(this.$progressBarElement = null), |
|
(this.$options = this._processInput(options)), |
|
(this.$progress = 0), |
|
this._init(), |
|
this.debug(this); |
|
} |
|
function LobiboxWindow(type, options) { |
|
(this.$type = type), |
|
(this.$options = this._processInput(options)), |
|
this._init(), |
|
this.debug(this); |
|
} |
|
(Lobibox.counter = 0), |
|
(Lobibox.prompt = function (type, options) { |
|
return new LobiboxPrompt(type, options); |
|
}), |
|
(Lobibox.confirm = function (options) { |
|
return new LobiboxConfirm(options); |
|
}), |
|
(Lobibox.progress = function (options) { |
|
return new LobiboxProgress(options); |
|
}), |
|
(Lobibox.error = {}), |
|
(Lobibox.success = {}), |
|
(Lobibox.warning = {}), |
|
(Lobibox.info = {}), |
|
(Lobibox.alert = function (type, options) { |
|
return ["success", "error", "warning", "info"].indexOf(type) > -1 |
|
? new LobiboxAlert(type, options) |
|
: void 0; |
|
}), |
|
(Lobibox.window = function (options) { |
|
return new LobiboxWindow("window", options); |
|
}); |
|
var LobiboxBase = { |
|
$type: null, |
|
$el: null, |
|
$options: null, |
|
debug: function () { |
|
this.$options.debug && |
|
window.console.debug.apply(window.console, arguments); |
|
}, |
|
_processInput: function (options) { |
|
if ($.isArray(options.buttons)) { |
|
for (var btns = {}, 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)), |
|
btn["class"] || (btn["class"] = options.customBtnClass), |
|
(options.buttons[i] = btn); |
|
} |
|
return ( |
|
(options = $.extend({}, Lobibox.base.DEFAULTS, options)), |
|
void 0 === options.showClass && |
|
(options.showClass = Lobibox.base.OPTIONS.showClass), |
|
void 0 === options.hideClass && |
|
(options.hideClass = Lobibox.base.OPTIONS.hideClass), |
|
void 0 === options.baseClass && |
|
(options.baseClass = Lobibox.base.OPTIONS.baseClass), |
|
void 0 === options.delayToRemove && |
|
(options.delayToRemove = Lobibox.base.OPTIONS.delayToRemove), |
|
options.iconClass || |
|
(options.iconClass = |
|
Lobibox.base.OPTIONS.icons[options.iconSource][this.$type]), |
|
options |
|
); |
|
}, |
|
_init: function () { |
|
var me = this; |
|
me._createMarkup(), |
|
me.setTitle(me.$options.title), |
|
me.$options.draggable && |
|
!me._isMobileScreen() && |
|
(me.$el.addClass("draggable"), me._enableDrag()), |
|
me.$options.closeButton && me._addCloseButton(), |
|
me.$options.closeOnEsc && |
|
$(document).on("keyup.lobibox", function (ev) { |
|
27 === ev.which && me.destroy(); |
|
}), |
|
me.$options.baseClass && me.$el.addClass(me.$options.baseClass), |
|
me.$options.showClass && |
|
(me.$el.removeClass(me.$options.hideClass), |
|
me.$el.addClass(me.$options.showClass)), |
|
me.$el.data("lobibox", me); |
|
}, |
|
_calculatePosition: function (position) { |
|
var top, |
|
me = this; |
|
top = |
|
"top" === position |
|
? 30 |
|
: "bottom" === position |
|
? $(window).outerHeight() - me.$el.outerHeight() - 30 |
|
: ($(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, |
|
btn = $("<button></button>") |
|
.addClass(op["class"]) |
|
.attr("data-type", type) |
|
.html(op.text); |
|
return ( |
|
me.$options.callback && |
|
"function" == typeof me.$options.callback && |
|
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); |
|
}), |
|
btn |
|
); |
|
}, |
|
_onButtonClick: function (buttonOptions, type) { |
|
var me = this; |
|
(("ok" === type && "prompt" === me.$type && me.isValid()) || |
|
"prompt" !== me.$type || |
|
"ok" !== type) && |
|
buttonOptions && |
|
buttonOptions.closeOnClick && |
|
me.destroy(); |
|
}, |
|
_generateButtons: function () { |
|
var me = this, |
|
btns = []; |
|
for (var i in me.$options.buttons) |
|
if (me.$options.buttons.hasOwnProperty(i)) { |
|
var op = me.$options.buttons[i], |
|
btn = me._createButton(i, op); |
|
btns.push(btn); |
|
} |
|
return btns; |
|
}, |
|
_createMarkup: function () { |
|
var me = this, |
|
lobibox = $('<div class="lobibox"></div>'); |
|
lobibox.attr("data-is-modal", me.$options.modal); |
|
var header = $('<div class="lobibox-header"></div>').append( |
|
'<span class="lobibox-title"></span>' |
|
), |
|
body = $('<div class="lobibox-body"></div>'); |
|
if ( |
|
(lobibox.append(header), |
|
lobibox.append(body), |
|
me.$options.buttons && !$.isEmptyObject(me.$options.buttons)) |
|
) { |
|
var footer = $('<div class="lobibox-footer"></div>'); |
|
footer.append(me._generateButtons()), |
|
lobibox.append(footer), |
|
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), |
|
me.setHeight( |
|
"auto" === me.$options.height |
|
? me.$el.outerHeight() |
|
: me.$options.height |
|
); |
|
}, |
|
_calculateBodyHeight: function (height) { |
|
var me = this, |
|
headerHeight = me.$el.find(".lobibox-header").outerHeight(), |
|
footerHeight = me.$el.find(".lobibox-footer").outerHeight(); |
|
return ( |
|
height - |
|
(headerHeight ? headerHeight : 0) - |
|
(footerHeight ? footerHeight : 0) |
|
); |
|
}, |
|
_addBackdrop: function () { |
|
0 === $(".lobibox-backdrop").length && |
|
$("body").append('<div class="lobibox-backdrop"></div>'); |
|
}, |
|
_triggerEvent: function (type) { |
|
var me = this; |
|
me.$options[type] && |
|
"function" == typeof me.$options[type] && |
|
me.$options[type](me); |
|
}, |
|
_calculateWidth: function (width) { |
|
var me = this; |
|
return ( |
|
(width = Math.min( |
|
Math.max(width, me.$options.width), |
|
$(window).outerWidth() |
|
)), |
|
width === $(window).outerWidth() && |
|
(width -= 2 * me.$options.horizontalOffset), |
|
width |
|
); |
|
}, |
|
_calculateHeight: function (height) { |
|
var me = this; |
|
return ( |
|
console.log(me.$options.height), |
|
(height = Math.min( |
|
Math.max(height, me.$options.height), |
|
$(window).outerHeight() |
|
)), |
|
height === $(window).outerHeight() && |
|
(height -= 2 * me.$options.verticalOffset), |
|
height |
|
); |
|
}, |
|
_addCloseButton: function () { |
|
var me = this, |
|
closeBtn = $('<span class="btn-close">×</span>'); |
|
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 ("true" === el.attr("allow-drag")) { |
|
var left = |
|
ev.clientX - |
|
parseInt(el.attr("offset-left"), 10) - |
|
parseInt(el.css("border-left-width"), 10), |
|
top = |
|
ev.clientY - |
|
parseInt(el.attr("offset-top"), 10) - |
|
parseInt(el.css("border-top-width"), 10); |
|
el.css({ left: left, top: top }); |
|
} |
|
}); |
|
}, |
|
_setContent: function (msg) { |
|
var me = this; |
|
return me.$el.find(".lobibox-body").html(msg), me; |
|
}, |
|
_beforeShow: function () { |
|
var me = this; |
|
me._triggerEvent("onShow"); |
|
}, |
|
_afterShow: function () { |
|
var me = this; |
|
Lobibox.counter++, |
|
me.$el.attr("data-nth", Lobibox.counter), |
|
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; |
|
me.$options.draggable || |
|
$(window).off("resize.lobibox-" + me.$el.attr("data-nth")), |
|
me._triggerEvent("closed"); |
|
}, |
|
hide: function () { |
|
function callback() { |
|
me.$el.addClass("lobibox-hidden"), |
|
0 === $(".lobibox[data-is-modal=true]:not(.lobibox-hidden)").length && |
|
($(".lobibox-backdrop").remove(), |
|
$("body").removeClass(Lobibox.base.OPTIONS.bodyClass)); |
|
} |
|
var me = this; |
|
return ( |
|
me.$options.hideClass |
|
? (me.$el.removeClass(me.$options.showClass), |
|
me.$el.addClass(me.$options.hideClass), |
|
setTimeout(function () { |
|
callback(); |
|
}, me.$options.delayToRemove)) |
|
: callback(), |
|
this |
|
); |
|
}, |
|
destroy: function () { |
|
function callback() { |
|
me.$el.remove(), |
|
0 === $(".lobibox[data-is-modal=true]").length && |
|
($(".lobibox-backdrop").remove(), |
|
$("body").removeClass(Lobibox.base.OPTIONS.bodyClass)), |
|
me._afterClose(); |
|
} |
|
var me = this; |
|
return ( |
|
me._beforeClose(), |
|
me.$options.hideClass |
|
? (me.$el |
|
.removeClass(me.$options.showClass) |
|
.addClass(me.$options.hideClass), |
|
setTimeout(function () { |
|
callback(); |
|
}, me.$options.delayToRemove)) |
|
: callback(), |
|
this |
|
); |
|
}, |
|
setWidth: function (width) { |
|
var me = this; |
|
return me.$el.css("width", me._calculateWidth(width)), me; |
|
}, |
|
refreshWidth: function () { |
|
this.setWidth(this.$el.width()); |
|
}, |
|
refreshHeight: function () { |
|
this.setHeight(this.$el.height()); |
|
}, |
|
setHeight: function (height) { |
|
var me = this; |
|
return ( |
|
me.$el |
|
.css("height", me._calculateHeight(height)) |
|
.find(".lobibox-body") |
|
.css("height", me._calculateBodyHeight(me.$el.innerHeight())), |
|
me |
|
); |
|
}, |
|
setSize: function (width, height) { |
|
var me = this; |
|
return me.setWidth(width), me.setHeight(height), me; |
|
}, |
|
setPosition: function (left, top) { |
|
var pos; |
|
return ( |
|
"number" == typeof left && "number" == typeof top |
|
? (pos = { left: left, top: top }) |
|
: "string" == typeof left && (pos = this._calculatePosition(left)), |
|
this.$el.css(pos), |
|
this |
|
); |
|
}, |
|
setTitle: function (title) { |
|
return this.$el.find(".lobibox-title").html(title); |
|
}, |
|
getTitle: function () { |
|
return this.$el.find(".lobibox-title").html(); |
|
}, |
|
show: function () { |
|
var me = this, |
|
$body = $("body"); |
|
if ( |
|
(me._beforeShow(), |
|
me.$el.removeClass("lobibox-hidden"), |
|
$body.append(me.$el), |
|
me.$options.buttons) |
|
) { |
|
var buttons = me.$el.find(".lobibox-footer").children(); |
|
buttons[0].focus(); |
|
} |
|
return ( |
|
me.$options.modal && |
|
($body.addClass(Lobibox.base.OPTIONS.bodyClass), me._addBackdrop()), |
|
me.$options.delay !== !1 && |
|
setTimeout(function () { |
|
me.destroy(); |
|
}, me.$options.delay), |
|
me._afterShow(), |
|
me |
|
); |
|
}, |
|
}; |
|
(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: !0, |
|
}, |
|
cancel: { |
|
class: "lobibox-btn lobibox-btn-cancel", |
|
text: "Cancel", |
|
closeOnClick: !0, |
|
}, |
|
yes: { |
|
class: "lobibox-btn lobibox-btn-yes", |
|
text: "Yes", |
|
closeOnClick: !0, |
|
}, |
|
no: { |
|
class: "lobibox-btn lobibox-btn-no", |
|
text: "No", |
|
closeOnClick: !0, |
|
}, |
|
}, |
|
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, |
|
verticalOffset: 5, |
|
width: 600, |
|
height: "auto", |
|
closeButton: !0, |
|
draggable: !1, |
|
customBtnClass: "lobibox-btn lobibox-btn-default", |
|
modal: !0, |
|
debug: !1, |
|
buttonsAlign: "center", |
|
closeOnEsc: !0, |
|
delayToRemove: 200, |
|
delay: !1, |
|
baseClass: "animated-super-fast", |
|
showClass: "zoomIn", |
|
hideClass: "zoomOut", |
|
iconSource: "bootstrap", |
|
onShow: null, |
|
shown: null, |
|
beforeClose: null, |
|
closed: null, |
|
}), |
|
(LobiboxPrompt.prototype = $.extend({}, LobiboxBase, { |
|
constructor: LobiboxPrompt, |
|
_processInput: function (options) { |
|
var me = this, |
|
mergedOptions = LobiboxBase._processInput.call(me, options); |
|
return ( |
|
(mergedOptions.buttons = { |
|
ok: Lobibox.base.OPTIONS.buttons.ok, |
|
cancel: Lobibox.base.OPTIONS.buttons.cancel, |
|
}), |
|
(options = $.extend( |
|
{}, |
|
mergedOptions, |
|
LobiboxPrompt.DEFAULT_OPTIONS, |
|
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 label, |
|
me = this; |
|
return ( |
|
(me.$input = me.$options.multiline |
|
? $("<textarea></textarea>").attr("rows", me.$options.lines) |
|
: $('<input type="' + me.$promptType + '"/>')), |
|
me.$input.addClass("lobibox-input").attr(me.$options.attrs), |
|
me.$options.value && me.setValue(me.$options.value), |
|
me.$options.label && |
|
(label = $("<label>" + me.$options.label + "</label>")), |
|
$("<div></div>").append(label, me.$input) |
|
); |
|
}, |
|
setValue: function (val) { |
|
return this.$input.val(val), this; |
|
}, |
|
getValue: function () { |
|
return this.$input.val(); |
|
}, |
|
isValid: function () { |
|
var me = this, |
|
$error = me.$el.find(".lobibox-input-error-message"); |
|
return me.$options.required && !me.getValue() |
|
? (me.$input.addClass("invalid"), |
|
0 === $error.length && |
|
(me.$el |
|
.find(".lobibox-body") |
|
.append( |
|
'<p class="lobibox-input-error-message">' + |
|
me.$options.errorMessage + |
|
"</p>" |
|
), |
|
me._position(), |
|
me.$input.focus()), |
|
!1) |
|
: (me.$input.removeClass("invalid"), |
|
$error.remove(), |
|
me._position(), |
|
me.$input.focus(), |
|
!0); |
|
}, |
|
})), |
|
(LobiboxPrompt.DEFAULT_OPTIONS = { |
|
width: 400, |
|
attrs: {}, |
|
value: "", |
|
multiline: !1, |
|
lines: 3, |
|
type: "text", |
|
label: "", |
|
required: !0, |
|
errorMessage: "The field is required", |
|
}), |
|
(LobiboxConfirm.prototype = $.extend({}, LobiboxBase, { |
|
constructor: LobiboxConfirm, |
|
_processInput: function (options) { |
|
var me = this, |
|
mergedOptions = LobiboxBase._processInput.call(me, options); |
|
return ( |
|
(mergedOptions.buttons = { |
|
yes: Lobibox.base.OPTIONS.buttons.yes, |
|
no: Lobibox.base.OPTIONS.buttons.no, |
|
}), |
|
(options = $.extend( |
|
{}, |
|
mergedOptions, |
|
Lobibox.confirm.DEFAULTS, |
|
options |
|
)) |
|
); |
|
}, |
|
_init: function () { |
|
var me = this; |
|
LobiboxBase._init.call(me), me.show(); |
|
}, |
|
_afterShow: function () { |
|
var me = this, |
|
d = $("<div></div>"); |
|
me.$options.iconClass && |
|
d.append( |
|
$('<div class="lobibox-icon-wrapper"></div>').append( |
|
'<i class="lobibox-icon ' + me.$options.iconClass + '"></i>' |
|
) |
|
), |
|
d.append( |
|
'<div class="lobibox-body-text-wrapper"><span class="lobibox-body-text">' + |
|
me.$options.msg + |
|
"</span></div>" |
|
), |
|
me._setContent(d.html()), |
|
me._position(), |
|
LobiboxBase._afterShow.call(me); |
|
}, |
|
})), |
|
(Lobibox.confirm.DEFAULTS = { title: "Question", width: 500 }), |
|
(LobiboxAlert.prototype = $.extend({}, LobiboxBase, { |
|
constructor: LobiboxAlert, |
|
_processInput: function (options) { |
|
var me = this, |
|
mergedOptions = LobiboxBase._processInput.call(me, options); |
|
return ( |
|
(mergedOptions.buttons = { ok: Lobibox.base.OPTIONS.buttons.ok }), |
|
(options = $.extend( |
|
{}, |
|
mergedOptions, |
|
Lobibox.alert.OPTIONS[me.$type], |
|
Lobibox.alert.DEFAULTS, |
|
options |
|
)) |
|
); |
|
}, |
|
_init: function () { |
|
var me = this; |
|
LobiboxBase._init.call(me), me.show(); |
|
}, |
|
_afterShow: function () { |
|
var me = this, |
|
d = $("<div></div>"); |
|
me.$options.iconClass && |
|
d.append( |
|
$('<div class="lobibox-icon-wrapper"></div>').append( |
|
'<i class="lobibox-icon ' + me.$options.iconClass + '"></i>' |
|
) |
|
), |
|
d.append( |
|
'<div class="lobibox-body-text-wrapper"><span class="lobibox-body-text">' + |
|
me.$options.msg + |
|
"</span></div>" |
|
), |
|
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" }, |
|
}), |
|
(Lobibox.alert.DEFAULTS = {}), |
|
(LobiboxProgress.prototype = $.extend({}, LobiboxBase, { |
|
constructor: LobiboxProgress, |
|
_processInput: function (options) { |
|
var me = this, |
|
mergedOptions = LobiboxBase._processInput.call(me, options); |
|
return (options = $.extend( |
|
{}, |
|
mergedOptions, |
|
Lobibox.progress.DEFAULTS, |
|
options |
|
)); |
|
}, |
|
_init: function () { |
|
var me = this; |
|
LobiboxBase._init.call(me), me.show(); |
|
}, |
|
_afterShow: function () { |
|
var me = this; |
|
me.$progressBarElement = me.$options.progressTpl |
|
? $(me.$options.progressTpl) |
|
: me._createProgressbar(); |
|
var label; |
|
me.$options.label && |
|
(label = $("<label>" + me.$options.label + "</label>")); |
|
var innerHTML = $("<div></div>").append(label, me.$progressBarElement); |
|
me._setContent(innerHTML), |
|
me._position(), |
|
LobiboxBase._afterShow.call(me); |
|
}, |
|
_createProgressbar: function () { |
|
var me = this, |
|
outer = $( |
|
'<div class="lobibox-progress-bar-wrapper lobibox-progress-outer"></div>' |
|
).append( |
|
'<div class="lobibox-progress-bar lobibox-progress-element"></div>' |
|
); |
|
return ( |
|
me.$options.showProgressLabel && |
|
outer.append( |
|
'<span class="lobibox-progress-text" data-role="progress-text"></span>' |
|
), |
|
outer |
|
); |
|
}, |
|
setProgress: function (progress) { |
|
var me = this; |
|
if (100 !== me.$progress) |
|
return ( |
|
(progress = Math.min(100, Math.max(0, progress))), |
|
(me.$progress = progress), |
|
me._triggerEvent("progressUpdated"), |
|
100 === me.$progress && 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) + "%"), |
|
me |
|
); |
|
}, |
|
getProgress: function () { |
|
return this.$progress; |
|
}, |
|
})), |
|
(Lobibox.progress.DEFAULTS = { |
|
width: 500, |
|
showProgressLabel: !0, |
|
label: "", |
|
progressTpl: !1, |
|
progressUpdated: null, |
|
progressCompleted: null, |
|
}), |
|
(LobiboxWindow.prototype = $.extend({}, LobiboxBase, { |
|
constructor: LobiboxWindow, |
|
_processInput: function (options) { |
|
var me = this, |
|
mergedOptions = LobiboxBase._processInput.call(me, options); |
|
return ( |
|
options.content && |
|
"function" == typeof options.content && |
|
(options.content = options.content()), |
|
options.content instanceof jQuery && |
|
(options.content = options.content.clone()), |
|
(options = $.extend( |
|
{}, |
|
mergedOptions, |
|
Lobibox.window.DEFAULTS, |
|
options |
|
)) |
|
); |
|
}, |
|
_init: function () { |
|
var me = this; |
|
LobiboxBase._init.call(me), |
|
me.setContent(me.$options.content), |
|
me.$options.url && me.$options.autoload |
|
? (me.$options.showAfterLoad || me.show(), |
|
me.load(function () { |
|
me.$options.showAfterLoad && me.show(); |
|
})) |
|
: me.show(); |
|
}, |
|
_afterShow: function () { |
|
var me = this; |
|
me._position(), LobiboxBase._afterShow.call(me); |
|
}, |
|
setParams: function (params) { |
|
var me = this; |
|
return (me.$options.params = params), me; |
|
}, |
|
getParams: function () { |
|
var me = this; |
|
return me.$options.params; |
|
}, |
|
setLoadMethod: function (method) { |
|
var me = this; |
|
return (me.$options.loadMethod = method), me; |
|
}, |
|
getLoadMethod: function () { |
|
var me = this; |
|
return me.$options.loadMethod; |
|
}, |
|
setContent: function (content) { |
|
var me = this; |
|
return ( |
|
(me.$options.content = content), |
|
me.$el.find(".lobibox-body").html("").append(content), |
|
me |
|
); |
|
}, |
|
getContent: function () { |
|
var me = this; |
|
return me.$options.content; |
|
}, |
|
setUrl: function (url) { |
|
return (this.$options.url = url), this; |
|
}, |
|
getUrl: function () { |
|
return this.$options.url; |
|
}, |
|
load: function (callback) { |
|
var me = this; |
|
return me.$options.url |
|
? ($.ajax(me.$options.url, { |
|
method: me.$options.loadMethod, |
|
data: me.$options.params, |
|
}).done(function (res) { |
|
me.setContent(res), |
|
callback && "function" == typeof callback && callback(res); |
|
}), |
|
me) |
|
: me; |
|
}, |
|
})), |
|
(Lobibox.window.DEFAULTS = { |
|
width: 480, |
|
height: 600, |
|
content: "", |
|
url: "", |
|
draggable: !0, |
|
autoload: !0, |
|
loadMethod: "GET", |
|
showAfterLoad: !0, |
|
params: {}, |
|
}); |
|
})(), |
|
(Math.randomString = function (n) { |
|
for ( |
|
var text = "", |
|
possible = |
|
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", |
|
i = 0; |
|
n > i; |
|
i++ |
|
) |
|
text += possible.charAt(Math.floor(Math.random() * possible.length)); |
|
return text; |
|
}); |
|
var Lobibox = Lobibox || {}; |
|
!(function () { |
|
var LobiboxNotify = function (type, options) { |
|
(this.$type = null), (this.$options = null), (this.$el = null); |
|
var me = this, |
|
_processInput = function (options) { |
|
return ( |
|
("mini" === options.size || "large" === options.size) && |
|
(options = $.extend( |
|
{}, |
|
Lobibox.notify.OPTIONS[options.size], |
|
options |
|
)), |
|
(options = $.extend( |
|
{}, |
|
Lobibox.notify.OPTIONS[me.$type], |
|
Lobibox.notify.DEFAULTS, |
|
options |
|
)), |
|
"mini" !== options.size && options.title === !0 |
|
? (options.title = Lobibox.notify.OPTIONS[me.$type].title) |
|
: "mini" === options.size && |
|
options.title === !0 && |
|
(options.title = !1), |
|
options.icon === !0 && |
|
(options.icon = |
|
Lobibox.notify.OPTIONS.icons[options.iconSource][me.$type]), |
|
options.sound === !0 && |
|
(options.sound = Lobibox.notify.OPTIONS[me.$type].sound), |
|
options.sound && |
|
(options.sound = |
|
options.soundPath + options.sound + options.soundExt), |
|
options |
|
); |
|
}, |
|
_init = function () { |
|
var $notify = _createNotify(); |
|
if ( |
|
("mini" === me.$options.size && $notify.addClass("notify-mini"), |
|
"string" == typeof me.$options.position) |
|
) { |
|
var $wrapper = _createNotifyWrapper(); |
|
_appendInWrapper($notify, $wrapper), |
|
$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, |
|
}); |
|
if (((me.$el = $notify), me.$options.sound)) { |
|
var snd = new Audio(me.$options.sound); |
|
snd.play(); |
|
} |
|
me.$options.rounded && me.$el.addClass("rounded"); |
|
}, |
|
_appendInWrapper = function ($el, $wrapper) { |
|
if ("normal" === me.$options.size) |
|
$wrapper.hasClass("bottom") |
|
? $wrapper.prepend($el) |
|
: $wrapper.append($el); |
|
else if ("mini" === me.$options.size) |
|
$wrapper.hasClass("bottom") |
|
? $wrapper.prepend($el) |
|
: $wrapper.append($el); |
|
else if ("large" === me.$options.size) { |
|
var tabPane = _createTabPane().append($el), |
|
$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); |
|
}); |
|
} |
|
}, |
|
_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"); |
|
}, |
|
_createTabControl = function (tabPaneId) { |
|
var $li = $("<li></li>", { |
|
class: Lobibox.notify.OPTIONS[me.$type]["class"], |
|
}); |
|
return ( |
|
$("<a></a>", { href: "#" + tabPaneId }) |
|
.append('<i class="tab-control-icon ' + me.$options.icon + '"></i>') |
|
.appendTo($li), |
|
$li |
|
); |
|
}, |
|
_createTabPane = function () { |
|
return $("<div></div>", { |
|
class: "lb-tab-pane", |
|
id: Math.randomString(10), |
|
}); |
|
}, |
|
_createNotifyWrapper = function () { |
|
var $wrapper, |
|
selector = |
|
("large" === me.$options.size |
|
? ".lobibox-notify-wrapper-large" |
|
: ".lobibox-notify-wrapper") + |
|
"." + |
|
me.$options.position.replace(/\s/gi, "."); |
|
return ( |
|
($wrapper = $(selector)), |
|
0 === $wrapper.length && |
|
(($wrapper = $("<div></div>") |
|
.addClass(selector.replace(/\./g, " ").trim()) |
|
.appendTo($("body"))), |
|
"large" === me.$options.size && |
|
$wrapper |
|
.append($('<ul class="lb-notify-tabs"></ul>')) |
|
.append($('<div class="lb-notify-wrapper"></div>'))), |
|
$wrapper |
|
); |
|
}, |
|
_createNotify = function () { |
|
var $iconEl, |
|
$innerIconEl, |
|
$iconWrapper, |
|
$body, |
|
$msg, |
|
OPTS = Lobibox.notify.OPTIONS, |
|
$notify = $("<div></div>", { |
|
class: |
|
"lobibox-notify " + |
|
OPTS[me.$type]["class"] + |
|
" " + |
|
OPTS["class"] + |
|
" " + |
|
me.$options.showClass, |
|
}); |
|
return ( |
|
($iconWrapper = $( |
|
'<div class="lobibox-notify-icon-wrapper"></div>' |
|
).appendTo($notify)), |
|
($iconEl = $('<div class="lobibox-notify-icon"></div>').appendTo( |
|
$iconWrapper |
|
)), |
|
($innerIconEl = $("<div></div>").appendTo($iconEl)), |
|
me.$options.img |
|
? $innerIconEl.append('<img src="' + me.$options.img + '"/>') |
|
: me.$options.icon |
|
? $innerIconEl.append( |
|
'<div class="icon-el"><i class="' + |
|
me.$options.icon + |
|
'"></i></div>' |
|
) |
|
: $notify.addClass("without-icon"), |
|
($msg = $( |
|
'<div class="lobibox-notify-msg">' + me.$options.msg + "</div>" |
|
)), |
|
me.$options.messageHeight !== !1 && |
|
$msg.css("max-height", me.$options.messageHeight), |
|
($body = $("<div></div>", { class: "lobibox-notify-body" }) |
|
.append($msg) |
|
.appendTo($notify)), |
|
me.$options.title && |
|
$body.prepend( |
|
'<div class="lobibox-notify-title">' + me.$options.title + "<div>" |
|
), |
|
_addCloseButton($notify), |
|
("normal" === me.$options.size || "mini" === me.$options.size) && |
|
(_addCloseOnClick($notify), _addDelay($notify)), |
|
me.$options.width && |
|
$notify.css("width", _calculateWidth(me.$options.width)), |
|
$notify |
|
); |
|
}, |
|
_addCloseButton = function ($el) { |
|
me.$options.closable && |
|
$('<span class="lobibox-close">×</span>') |
|
.click(function () { |
|
me.remove(); |
|
}) |
|
.appendTo($el); |
|
}, |
|
_addCloseOnClick = function ($el) { |
|
me.$options.closeOnClick && |
|
$el.click(function () { |
|
me.remove(); |
|
}); |
|
}, |
|
_addDelay = function ($el) { |
|
if (me.$options.delay) { |
|
if (me.$options.delayIndicator) { |
|
var delay = $( |
|
'<div class="lobibox-delay-indicator"><div></div></div>' |
|
); |
|
$el.append(delay); |
|
} |
|
var time = 0, |
|
interval = 1e3 / 30, |
|
timer = setInterval(function () { |
|
time += interval; |
|
var width = (100 * time) / me.$options.delay; |
|
width >= 100 && |
|
((width = 100), me.remove(), (timer = clearInterval(timer))), |
|
me.$options.delayIndicator && |
|
delay.find("div").css("width", width + "%"); |
|
}, interval); |
|
} |
|
}, |
|
_findTabToActivate = function ($li) { |
|
var $itemToActivate = $li.prev(); |
|
return ( |
|
0 === $itemToActivate.length && ($itemToActivate = $li.next()), |
|
0 === $itemToActivate.length ? null : $itemToActivate |
|
); |
|
}, |
|
_calculateWidth = function (width) { |
|
return (width = Math.min($(window).outerWidth(), width)); |
|
}; |
|
(this.remove = function () { |
|
me.$el.removeClass(me.$options.showClass).addClass(me.$options.hideClass); |
|
var parent = me.$el.parent(), |
|
wrapper = parent.closest(".lobibox-notify-wrapper-large"), |
|
href = "#" + parent.attr("id"), |
|
$li = wrapper.find('>.lb-notify-tabs>li:has(a[href="' + href + '"])'); |
|
return ( |
|
$li |
|
.addClass(Lobibox.notify.OPTIONS["class"]) |
|
.addClass(me.$options.hideClass), |
|
setTimeout(function () { |
|
if ("normal" === me.$options.size || "mini" === me.$options.size) |
|
me.$el.remove(); |
|
else if ("large" === me.$options.size) { |
|
var $newLi = _findTabToActivate($li); |
|
$newLi && _activateTab($newLi), $li.remove(), parent.remove(); |
|
} |
|
}, 500), |
|
me |
|
); |
|
}), |
|
(this.$type = type), |
|
(this.$options = _processInput(options)), |
|
_init(); |
|
}; |
|
(Lobibox.notify = function (type, options) { |
|
if (["default", "info", "warning", "error", "success"].indexOf(type) > -1) { |
|
var lobibox = new LobiboxNotify(type, options); |
|
return lobibox.$el.data("lobibox", lobibox), lobibox; |
|
} |
|
}), |
|
(Lobibox.notify.closeAll = function () { |
|
var ll = $(".lobibox-notify"); |
|
ll.each(function (ind, el) { |
|
$(el).data("lobibox").remove(); |
|
}); |
|
}), |
|
(Lobibox.notify.DEFAULTS = { |
|
title: !0, |
|
size: "normal", |
|
soundPath: "sounds/", |
|
soundExt: ".ogg", |
|
showClass: "fadeInDown", |
|
hideClass: "zoomOut", |
|
icon: !0, |
|
msg: "", |
|
img: null, |
|
closable: !0, |
|
hideCloseButton: !1, |
|
delay: 5e3, |
|
delayIndicator: !0, |
|
closeOnClick: !0, |
|
width: 400, |
|
sound: !0, |
|
position: "bottom right", |
|
iconSource: "bootstrap", |
|
rounded: !1, |
|
messageHeight: 60, |
|
}), |
|
(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: !1 }, |
|
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", |
|
}, |
|
}, |
|
}); |
|
})();
|
|
|