Team:UCL/Template:SCJpnotify.js
From 2014.igem.org
(function (factory) {
if (typeof define === 'function' && define.amd) { // AMD. Register as a module. define('pnotify', ['jquery'], factory); } else { // Browser globals factory(jQuery); }
}(function($){ var default_stack = { dir1: "down", dir2: "left", push: "bottom", spacing1: 25, spacing2: 25, context: $("body") }; var timer, // Position all timer. body, jwindow = $(window); // Set global variables. var do_when_ready = function(){ body = $("body"); PNotify.prototype.options.stack.context = body; jwindow = $(window); // Reposition the notices when the window resizes. jwindow.bind('resize', function(){ if (timer) clearTimeout(timer); timer = setTimeout(function(){ PNotify.positionAll(true) }, 10); }); }; PNotify = function(options){ this.parseOptions(options); this.init(); }; $.extend(PNotify.prototype, { // The current version of PNotify. version: "2.0.1",
// === Options ===
// Options defaults. options: { // The notice's title. title: false, // Whether to escape the content of the title. (Not allow HTML.) title_escape: false, // The notice's text. text: false, // Whether to escape the content of the text. (Not allow HTML.) text_escape: false, // What styling classes to use. (Can be either jqueryui or bootstrap.) styling: "bootstrap3", // Additional classes to be added to the notice. (For custom styling.) addclass: "", // Class to be added to the notice for corner styling. cornerclass: "", // Display the notice when it is created. auto_display: true, // Width of the notice. width: "300px", // Minimum height of the notice. It will expand to fit content. min_height: "16px", // Type of the notice. "notice", "info", "success", or "error". type: "notice", // Set icon to true to use the default icon for the selected // style/type, false for no icon, or a string for your own icon class. icon: true, // Opacity of the notice. opacity: 1, // The animation to use when displaying and hiding the notice. "none", // "show", "fade", and "slide" are built in to jQuery. Others require jQuery // UI. Use an object with effect_in and effect_out to use different effects. animation: "fade", // Speed at which the notice animates in and out. "slow", "def" or "normal", // "fast" or number of milliseconds. animate_speed: "slow", // Specify a specific duration of position animation position_animate_speed: 500, // Display a drop shadow. shadow: true, // After a delay, remove the notice. hide: true, // Delay in milliseconds before the notice is removed. delay: 8000, // Reset the hide timer if the mouse moves over the notice. mouse_reset: true, // Remove the notice's elements from the DOM after it is removed. remove: true, // Change new lines to br tags. insert_brs: true, // Whether to remove notices from the global array. destroy: true, // The stack on which the notices will be placed. Also controls the // direction the notices stack. stack: default_stack },
// === Modules ===
// This object holds all the PNotify modules. They are used to provide // additional functionality. modules: {}, // This runs an event on all the modules. runModules: function(event, arg){ var curArg; for (var module in this.modules) { curArg = ((typeof arg === "object" && module in arg) ? arg[module] : arg); if (typeof this.modules[module][event] === 'function') this.modules[module][event](this, typeof this.options[module] === 'object' ? this.options[module] : {}, curArg); } },
// === Class Variables ===
state: "initializing", // The state can be "initializing", "opening", "open", "closing", and "closed". timer: null, // Auto close timer. styles: null, elem: null, container: null, title_container: null, text_container: null, animating: false, // Stores what is currently being animated (in or out). timerHide: false, // Stores whether the notice was hidden by a timer.
// === Events ===
init: function(){ var that = this;
// First and foremost, we don't want our module objects all referencing the prototype. this.modules = {}; $.extend(true, this.modules, PNotify.prototype.modules);
// Get our styling object. if (typeof this.options.styling === "object") { this.styles = this.options.styling; } else { this.styles = PNotify.styling[this.options.styling]; }
// Create our widget. // Stop animation, reset the removal timer when the user mouses over. this.elem = $("<div />", { "class": "ui-pnotify "+this.options.addclass, "css": {"display": "none"}, "mouseenter": function(e){ if (that.options.mouse_reset && that.animating === "out") { if (!that.timerHide) return; that.cancelRemove(); } // Stop the close timer. if (that.options.hide && that.options.mouse_reset) that.cancelRemove(); }, "mouseleave": function(e){ // Start the close timer. if (that.options.hide && that.options.mouse_reset) that.queueRemove(); PNotify.positionAll(); } }); // Create a container for the notice contents. this.container = $("<div />", {"class": this.styles.container+" ui-pnotify-container "+(this.options.type === "error" ? this.styles.error : (this.options.type === "info" ? this.styles.info : (this.options.type === "success" ? this.styles.success : this.styles.notice)))}) .appendTo(this.elem); if (this.options.cornerclass !== "") this.container.removeClass("ui-corner-all").addClass(this.options.cornerclass); // Create a drop shadow. if (this.options.shadow) this.container.addClass("ui-pnotify-shadow");
// Add the appropriate icon.
if (this.options.icon !== false) {
$("<div />", {"class": "ui-pnotify-icon"})
.append($("<span />", {"class": this.options.icon === true ? (this.options.type === "error" ? this.styles.error_icon : (this.options.type === "info" ? this.styles.info_icon : (this.options.type === "success" ? this.styles.success_icon : this.styles.notice_icon))) : this.options.icon}))
.prependTo(this.container);
}
// Add a title. this.title_container = $("<h4 />", { "class": "ui-pnotify-title" }) .appendTo(this.container); if (this.options.title === false) this.title_container.hide(); else if (this.options.title_escape) this.title_container.text(this.options.title); else this.title_container.html(this.options.title);
// Add text.
this.text_container = $("<div />", {
"class": "ui-pnotify-text"
})
.appendTo(this.container);
if (this.options.text === false)
this.text_container.hide();
else if (this.options.text_escape)
this.text_container.text(this.options.text);
else
this.text_container.html(this.options.insert_brs ? String(this.options.text).replace(/\n/g, "
") : this.options.text);
// Set width and min height. if (typeof this.options.width === "string") this.elem.css("width", this.options.width); if (typeof this.options.min_height === "string") this.container.css("min-height", this.options.min_height);
// Add the notice to the notice array.
if (this.options.stack.push === "top")
PNotify.notices = $.merge([this], PNotify.notices);
else
PNotify.notices = $.merge(PNotify.notices, [this]);
// Now position all the notices if they are to push to the top.
if (this.options.stack.push === "top")
this.queuePosition(false, 1);
// Mark the stack so it won't animate the new notice.
this.options.stack.animation = false;
// Run the modules. this.runModules('init');
// Display the notice. if (this.options.auto_display) this.open(); return this; },
// This function is for updating the notice.
update: function(options){
// Save old options.
var oldOpts = this.options;
// Then update to the new options.
this.parseOptions(oldOpts, options);
// Update the corner class.
if (this.options.cornerclass !== oldOpts.cornerclass)
this.container.removeClass("ui-corner-all "+oldOpts.cornerclass).addClass(this.options.cornerclass);
// Update the shadow.
if (this.options.shadow !== oldOpts.shadow) {
if (this.options.shadow)
this.container.addClass("ui-pnotify-shadow");
else
this.container.removeClass("ui-pnotify-shadow");
}
// Update the additional classes.
if (this.options.addclass === false)
this.elem.removeClass(oldOpts.addclass);
else if (this.options.addclass !== oldOpts.addclass)
this.elem.removeClass(oldOpts.addclass).addClass(this.options.addclass);
// Update the title.
if (this.options.title === false)
this.title_container.slideUp("fast");
else if (this.options.title !== oldOpts.title) {
if (this.options.title_escape)
this.title_container.text(this.options.title);
else
this.title_container.html(this.options.title);
if (oldOpts.title === false)
this.title_container.slideDown(200)
}
// Update the text.
if (this.options.text === false) {
this.text_container.slideUp("fast");
} else if (this.options.text !== oldOpts.text) {
if (this.options.text_escape)
this.text_container.text(this.options.text);
else
this.text_container.html(this.options.insert_brs ? String(this.options.text).replace(/\n/g, "
") : this.options.text);
if (oldOpts.text === false)
this.text_container.slideDown(200)
}
// Change the notice type.
if (this.options.type !== oldOpts.type)
this.container.removeClass(
this.styles.error+" "+this.styles.notice+" "+this.styles.success+" "+this.styles.info
).addClass(this.options.type === "error" ?
this.styles.error :
(this.options.type === "info" ?
this.styles.info :
(this.options.type === "success" ?
this.styles.success :
this.styles.notice
)
)
);
if (this.options.icon !== oldOpts.icon || (this.options.icon === true && this.options.type !== oldOpts.type)) {
// Remove any old icon.
this.container.find("div.ui-pnotify-icon").remove();
if (this.options.icon !== false) {
// Build the new icon.
$("<div />", {"class": "ui-pnotify-icon"})
.append($("<span />", {"class": this.options.icon === true ? (this.options.type === "error" ? this.styles.error_icon : (this.options.type === "info" ? this.styles.info_icon : (this.options.type === "success" ? this.styles.success_icon : this.styles.notice_icon))) : this.options.icon}))
.prependTo(this.container);
}
}
// Update the width.
if (this.options.width !== oldOpts.width)
this.elem.animate({width: this.options.width});
// Update the minimum height.
if (this.options.min_height !== oldOpts.min_height)
this.container.animate({minHeight: this.options.min_height});
// Update the opacity.
if (this.options.opacity !== oldOpts.opacity)
this.elem.fadeTo(this.options.animate_speed, this.options.opacity);
// Update the timed hiding.
if (!this.options.hide)
this.cancelRemove();
else if (!oldOpts.hide)
this.queueRemove();
this.queuePosition(true);
// Run the modules. this.runModules('update', oldOpts); return this; },
// Display the notice. open: function(){ this.state = "opening"; // Run the modules. this.runModules('beforeOpen');
var that = this; // If the notice is not in the DOM, append it. if (!this.elem.parent().length) this.elem.appendTo(this.options.stack.context ? this.options.stack.context : body); // Try to put it in the right position. if (this.options.stack.push !== "top") this.position(true); // First show it, then set its opacity, then hide it. if (this.options.animation === "fade" || this.options.animation.effect_in === "fade") { // If it's fading in, it should start at 0. this.elem.show().fadeTo(0, 0).hide(); } else { // Or else it should be set to the opacity. if (this.options.opacity !== 1) this.elem.show().fadeTo(0, this.options.opacity).hide(); } this.animateIn(function(){ that.queuePosition(true);
// Now set it to hide. if (that.options.hide) that.queueRemove();
that.state = "open";
// Run the modules. that.runModules('afterOpen'); });
return this; },
// Remove the notice. remove: function(timer_hide) { this.state = "closing"; this.timerHide = !!timer_hide; // Make sure it's a boolean. // Run the modules. this.runModules('beforeClose');
var that = this; if (this.timer) { window.clearTimeout(this.timer); this.timer = null; } this.animateOut(function(){ that.state = "closed"; // Run the modules. that.runModules('afterClose'); that.queuePosition(true); // If we're supposed to remove the notice from the DOM, do it. if (that.options.remove) that.elem.detach(); // Run the modules. that.runModules('beforeDestroy'); // Remove object from PNotify.notices to prevent memory leak (issue #49) // unless destroy is off if (that.options.destroy) { if (PNotify.notices !== null) { var idx = $.inArray(that,PNotify.notices); if (idx !== -1) { PNotify.notices.splice(idx,1); } } } // Run the modules. that.runModules('afterDestroy'); });
return this; },
// === Class Methods ===
// Get the DOM element. get: function(){ return this.elem; },
// Put all the options in the right places. parseOptions: function(options, moreOptions){ this.options = $.extend(true, {}, PNotify.prototype.options); // This is the only thing that *should* be copied by reference. this.options.stack = PNotify.prototype.options.stack; var optArray = [options, moreOptions], curOpts; for (var curIndex in optArray) { curOpts = optArray[curIndex]; if (typeof curOpts == "undefined") break; if (typeof curOpts !== 'object') { this.options.text = curOpts; } else { for (var option in curOpts) { if (this.modules[option]) { // Avoid overwriting module defaults. $.extend(true, this.options[option], curOpts[option]); } else { this.options[option] = curOpts[option]; } } } } },
// Animate the notice in. animateIn: function(callback){ // Declare that the notice is animating in. (Or has completed animating in.) this.animating = "in"; var animation; if (typeof this.options.animation.effect_in !== "undefined") animation = this.options.animation.effect_in; else animation = this.options.animation; if (animation === "none") { this.elem.show(); callback(); } else if (animation === "show") this.elem.show(this.options.animate_speed, callback); else if (animation === "fade") this.elem.show().fadeTo(this.options.animate_speed, this.options.opacity, callback); else if (animation === "slide") this.elem.slideDown(this.options.animate_speed, callback); else if (typeof animation === "function") animation("in", callback, this.elem); else this.elem.show(animation, (typeof this.options.animation.options_in === "object" ? this.options.animation.options_in : {}), this.options.animate_speed, callback); if (this.elem.parent().hasClass('ui-effects-wrapper')) this.elem.parent().css({"position": "fixed", "overflow": "visible"}); if (animation !== "slide") this.elem.css("overflow", "visible"); this.container.css("overflow", "hidden"); },
// Animate the notice out. animateOut: function(callback){ // Declare that the notice is animating out. (Or has completed animating out.) this.animating = "out"; var animation; if (typeof this.options.animation.effect_out !== "undefined") animation = this.options.animation.effect_out; else animation = this.options.animation; if (animation === "none") { this.elem.hide(); callback(); } else if (animation === "show") this.elem.hide(this.options.animate_speed, callback); else if (animation === "fade") this.elem.fadeOut(this.options.animate_speed, callback); else if (animation === "slide") this.elem.slideUp(this.options.animate_speed, callback); else if (typeof animation === "function") animation("out", callback, this.elem); else this.elem.hide(animation, (typeof this.options.animation.options_out === "object" ? this.options.animation.options_out : {}), this.options.animate_speed, callback); if (this.elem.parent().hasClass('ui-effects-wrapper')) this.elem.parent().css({"position": "fixed", "overflow": "visible"}); if (animation !== "slide") this.elem.css("overflow", "visible"); this.container.css("overflow", "hidden"); },
// Position the notice. dont_skip_hidden causes the notice to // position even if it's not visible. position: function(dontSkipHidden){ // Get the notice's stack. var s = this.options.stack, e = this.elem; if (e.parent().hasClass('ui-effects-wrapper')) e = this.elem.css({"left": "0", "top": "0", "right": "0", "bottom": "0"}).parent(); if (typeof s.context === "undefined") s.context = body; if (!s) return; if (typeof s.nextpos1 !== "number") s.nextpos1 = s.firstpos1; if (typeof s.nextpos2 !== "number") s.nextpos2 = s.firstpos2; if (typeof s.addpos2 !== "number") s.addpos2 = 0; var hidden = e.css("display") === "none"; // Skip this notice if it's not shown. if (!hidden || dontSkipHidden) { var curpos1, curpos2; // Store what will need to be animated. var animate = {}; // Calculate the current pos1 value. var csspos1; switch (s.dir1) { case "down": csspos1 = "top"; break; case "up": csspos1 = "bottom"; break; case "left": csspos1 = "right"; break; case "right": csspos1 = "left"; break; } curpos1 = parseInt(e.css(csspos1).replace(/(?:\..*|[^0-9.])/g, )); if (isNaN(curpos1)) curpos1 = 0; // Remember the first pos1, so the first visible notice goes there. if (typeof s.firstpos1 === "undefined" && !hidden) { s.firstpos1 = curpos1; s.nextpos1 = s.firstpos1; } // Calculate the current pos2 value. var csspos2; switch (s.dir2) { case "down": csspos2 = "top"; break; case "up": csspos2 = "bottom"; break; case "left": csspos2 = "right"; break; case "right": csspos2 = "left"; break; } curpos2 = parseInt(e.css(csspos2).replace(/(?:\..*|[^0-9.])/g, )); if (isNaN(curpos2)) curpos2 = 0; // Remember the first pos2, so the first visible notice goes there. if (typeof s.firstpos2 === "undefined" && !hidden) { s.firstpos2 = curpos2; s.nextpos2 = s.firstpos2; } // Check that it's not beyond the viewport edge. if ((s.dir1 === "down" && s.nextpos1 + e.height() > (s.context.is(body) ? jwindow.height() : s.context.prop('scrollHeight')) ) || (s.dir1 === "up" && s.nextpos1 + e.height() > (s.context.is(body) ? jwindow.height() : s.context.prop('scrollHeight')) ) || (s.dir1 === "left" && s.nextpos1 + e.width() > (s.context.is(body) ? jwindow.width() : s.context.prop('scrollWidth')) ) || (s.dir1 === "right" && s.nextpos1 + e.width() > (s.context.is(body) ? jwindow.width() : s.context.prop('scrollWidth')) ) ) { // If it is, it needs to go back to the first pos1, and over on pos2. s.nextpos1 = s.firstpos1; s.nextpos2 += s.addpos2 + (typeof s.spacing2 === "undefined" ? 25 : s.spacing2); s.addpos2 = 0; } // Animate if we're moving on dir2. if (s.animation && s.nextpos2 < curpos2) { switch (s.dir2) { case "down": animate.top = s.nextpos2+"px"; break; case "up": animate.bottom = s.nextpos2+"px"; break; case "left": animate.right = s.nextpos2+"px"; break; case "right": animate.left = s.nextpos2+"px"; break; } } else { if(typeof s.nextpos2 === "number") e.css(csspos2, s.nextpos2+"px"); } // Keep track of the widest/tallest notice in the column/row, so we can push the next column/row. switch (s.dir2) { case "down": case "up": if (e.outerHeight(true) > s.addpos2) s.addpos2 = e.height(); break; case "left": case "right": if (e.outerWidth(true) > s.addpos2) s.addpos2 = e.width(); break; } // Move the notice on dir1. if (typeof s.nextpos1 === "number") { // Animate if we're moving toward the first pos. if (s.animation && (curpos1 > s.nextpos1 || animate.top || animate.bottom || animate.right || animate.left)) { switch (s.dir1) { case "down": animate.top = s.nextpos1+"px"; break; case "up": animate.bottom = s.nextpos1+"px"; break; case "left": animate.right = s.nextpos1+"px"; break; case "right": animate.left = s.nextpos1+"px"; break; } } else e.css(csspos1, s.nextpos1+"px"); } // Run the animation. if (animate.top || animate.bottom || animate.right || animate.left) e.animate(animate, {duration: this.options.position_animate_speed, queue: false}); // Calculate the next dir1 position. switch (s.dir1) { case "down": case "up": s.nextpos1 += e.height() + (typeof s.spacing1 === "undefined" ? 25 : s.spacing1); break; case "left": case "right": s.nextpos1 += e.width() + (typeof s.spacing1 === "undefined" ? 25 : s.spacing1); break; } } return this; }, // Queue the position all function so it doesn't run repeatedly and // use up resources. queuePosition: function(animate, milliseconds){ if (timer) clearTimeout(timer); if (!milliseconds) milliseconds = 10; timer = setTimeout(function(){ PNotify.positionAll(animate) }, milliseconds); return this; },
// Cancel any pending removal timer.
cancelRemove: function(){
if (this.timer)
window.clearTimeout(this.timer);
if (this.state === "closing") {
// If it's animating out, animate back in really quickly.
this.elem.stop(true);
this.state = "open";
this.animating = "in";
this.elem.css("height", "auto").animate({"width": this.options.width, "opacity": this.options.opacity}, "fast");
}
return this;
},
// Queue a removal timer.
queueRemove: function(){
var that = this;
// Cancel any current removal timer.
this.cancelRemove();
this.timer = window.setTimeout(function(){
that.remove(true);
}, (isNaN(this.options.delay) ? 0 : this.options.delay));
return this;
}
});
// These functions affect all notices.
$.extend(PNotify, {
// This holds all the notices.
notices: [],
removeAll: function () {
$.each(PNotify.notices, function(){
if (this.remove)
this.remove();
});
},
positionAll: function (animate) {
// This timer is used for queueing this function so it doesn't run
// repeatedly.
if (timer)
clearTimeout(timer);
timer = null;
// Reset the next position data.
$.each(PNotify.notices, function(){
var s = this.options.stack;
if (!s) return;
s.nextpos1 = s.firstpos1;
s.nextpos2 = s.firstpos2;
s.addpos2 = 0;
s.animation = animate;
});
$.each(PNotify.notices, function(){
this.position();
});
},
styling: {
jqueryui: {
container: "ui-widget ui-widget-content ui-corner-all",
notice: "ui-state-highlight",
// (The actual jQUI notice icon looks terrible.)
notice_icon: "ui-icon ui-icon-info",
info: "",
info_icon: "ui-icon ui-icon-info",
success: "ui-state-default",
success_icon: "ui-icon ui-icon-circle-check",
error: "ui-state-error",
error_icon: "ui-icon ui-icon-alert"
},
bootstrap2: {
container: "alert",
notice: "",
notice_icon: "icon-exclamation-sign",
info: "alert-info",
info_icon: "icon-info-sign",
success: "alert-success",
success_icon: "icon-ok-sign",
error: "alert-error",
error_icon: "icon-warning-sign"
},
bootstrap3: {
container: "alert",
notice: "alert-warning",
notice_icon: "glyphicon glyphicon-exclamation-sign",
info: "alert-info",
info_icon: "glyphicon glyphicon-info-sign",
success: "alert-success",
success_icon: "glyphicon glyphicon-ok-sign",
error: "alert-danger",
error_icon: "glyphicon glyphicon-warning-sign"
}
}
});
/*
* uses icons from http://fontawesome.io/
* version 4.0.3
*/
PNotify.styling.fontawesome = $.extend({}, PNotify.styling.bootstrap3);
$.extend(PNotify.styling.fontawesome, {
notice_icon: "fa fa-exclamation-circle",
info_icon: "fa fa-info",
success_icon: "fa fa-check",
error_icon: "fa fa-warning"
});
if (document.body) do_when_ready(); else $(do_when_ready); return PNotify; })); // Buttons // Uses AMD or browser globals for jQuery. (function (factory) {
if (typeof define === 'function' && define.amd) { // AMD. Register as a module. define('pnotify.buttons', ['jquery', 'pnotify'], factory); } else { // Browser globals factory(jQuery, PNotify); }
}(function($, PNotify){ PNotify.prototype.options.buttons = { // Provide a button for the user to manually close the notice. closer: true, // Only show the closer button on hover. closer_hover: true, // Provide a button for the user to manually stick the notice. sticker: true, // Only show the sticker button on hover. sticker_hover: true, // The various displayed text, helps facilitating internationalization. labels: { close: "Close", stick: "Stick" } }; PNotify.prototype.modules.buttons = { // This lets us update the options available in the closures. myOptions: null,
closer: null, sticker: null,
init: function(notice, options){ var that = this; this.myOptions = options; notice.elem.on({ "mouseenter": function(e){ // Show the buttons. if (that.myOptions.sticker && !(notice.options.nonblock && notice.options.nonblock.nonblock)) that.sticker.trigger("pnotify_icon").css("visibility", "visible"); if (that.myOptions.closer && !(notice.options.nonblock && notice.options.nonblock.nonblock)) that.closer.css("visibility", "visible"); }, "mouseleave": function(e){ // Hide the buttons. if (that.myOptions.sticker_hover) that.sticker.css("visibility", "hidden"); if (that.myOptions.closer_hover) that.closer.css("visibility", "hidden"); } });
// Provide a button to stick the notice. this.sticker = $("<div />", { "class": "ui-pnotify-sticker", "css": {"cursor": "pointer", "visibility": options.sticker_hover ? "hidden" : "visible"}, "click": function(){ notice.options.hide = !notice.options.hide; if (notice.options.hide) notice.queueRemove(); else notice.cancelRemove(); $(this).trigger("pnotify_icon"); } }) .bind("pnotify_icon", function(){ $(this).children().removeClass(notice.styles.pin_up+" "+notice.styles.pin_down).addClass(notice.options.hide ? notice.styles.pin_up : notice.styles.pin_down); }) .append($("<span />", {"class": notice.styles.pin_up, "title": options.labels.stick})) .prependTo(notice.container); if (!options.sticker || (notice.options.nonblock && notice.options.nonblock.nonblock)) this.sticker.css("display", "none");
// Provide a button to close the notice. this.closer = $("<div />", { "class": "ui-pnotify-closer", "css": {"cursor": "pointer", "visibility": options.closer_hover ? "hidden" : "visible"}, "click": function(){ notice.remove(false); that.sticker.css("visibility", "hidden"); that.closer.css("visibility", "hidden"); } }) .append($("<span />", {"class": notice.styles.closer, "title": options.labels.close})) .prependTo(notice.container); if (!options.closer || (notice.options.nonblock && notice.options.nonblock.nonblock)) this.closer.css("display", "none"); }, update: function(notice, options){ this.myOptions = options; // Update the sticker and closer buttons. if (!options.closer || (notice.options.nonblock && notice.options.nonblock.nonblock)) this.closer.css("display", "none"); else if (options.closer) this.closer.css("display", "block"); if (!options.sticker || (notice.options.nonblock && notice.options.nonblock.nonblock)) this.sticker.css("display", "none"); else if (options.sticker) this.sticker.css("display", "block"); // Update the sticker icon. this.sticker.trigger("pnotify_icon"); // Update the hover status of the buttons. if (options.sticker_hover) this.sticker.css("visibility", "hidden"); else if (!(notice.options.nonblock && notice.options.nonblock.nonblock)) this.sticker.css("visibility", "visible"); if (options.closer_hover) this.closer.css("visibility", "hidden"); else if (!(notice.options.nonblock && notice.options.nonblock.nonblock)) this.closer.css("visibility", "visible"); } }; $.extend(PNotify.styling.jqueryui, { closer: "ui-icon ui-icon-close", pin_up: "ui-icon ui-icon-pin-w", pin_down: "ui-icon ui-icon-pin-s" }); $.extend(PNotify.styling.bootstrap2, { closer: "icon-remove", pin_up: "icon-pause", pin_down: "icon-play" }); $.extend(PNotify.styling.bootstrap3, { closer: "glyphicon glyphicon-remove", pin_up: "glyphicon glyphicon-pause", pin_down: "glyphicon glyphicon-play" }); $.extend(PNotify.styling.fontawesome, { closer: "fa fa-times", pin_up: "fa fa-pause", pin_down: "fa fa-play" }); })); // Nonblock // Uses AMD or browser globals for jQuery. (function (factory) {
if (typeof define === 'function' && define.amd) { // AMD. Register as a module. define('pnotify.nonblock', ['jquery', 'pnotify'], factory); } else { // Browser globals factory(jQuery, PNotify); }
}(function($, PNotify){ // Some useful regexes. var re_on = /^on/, re_mouse_events = /^(dbl)?click$|^mouse(move|down|up|over|out|enter|leave)$|^contextmenu$/, re_ui_events = /^(focus|blur|select|change|reset)$|^key(press|down|up)$/, re_html_events = /^(scroll|resize|(un)?load|abort|error)$/; // Fire a DOM event. var dom_event = function(e, orig_e){ var event_object; e = e.toLowerCase(); if (document.createEvent && this.dispatchEvent) { // FireFox, Opera, Safari, Chrome e = e.replace(re_on, ); if (e.match(re_mouse_events)) { // This allows the click event to fire on the notice. There is // probably a much better way to do it. $(this).offset(); event_object = document.createEvent("MouseEvents"); event_object.initMouseEvent( e, orig_e.bubbles, orig_e.cancelable, orig_e.view, orig_e.detail, orig_e.screenX, orig_e.screenY, orig_e.clientX, orig_e.clientY, orig_e.ctrlKey, orig_e.altKey, orig_e.shiftKey, orig_e.metaKey, orig_e.button, orig_e.relatedTarget ); } else if (e.match(re_ui_events)) { event_object = document.createEvent("UIEvents"); event_object.initUIEvent(e, orig_e.bubbles, orig_e.cancelable, orig_e.view, orig_e.detail); } else if (e.match(re_html_events)) { event_object = document.createEvent("HTMLEvents"); event_object.initEvent(e, orig_e.bubbles, orig_e.cancelable); } if (!event_object) return; this.dispatchEvent(event_object); } else { // Internet Explorer if (!e.match(re_on)) e = "on"+e; event_object = document.createEventObject(orig_e); this.fireEvent(e, event_object); } };
// This keeps track of the last element the mouse was over, so
// mouseleave, mouseenter, etc can be called.
var nonblock_last_elem;
// This is used to pass events through the notice if it is non-blocking.
var nonblock_pass = function(notice, e, e_name){
notice.elem.css("display", "none");
var element_below = document.elementFromPoint(e.clientX, e.clientY);
notice.elem.css("display", "block");
var jelement_below = $(element_below);
var cursor_style = jelement_below.css("cursor");
notice.elem.css("cursor", cursor_style !== "auto" ? cursor_style : "default");
// If the element changed, call mouseenter, mouseleave, etc.
if (!nonblock_last_elem || nonblock_last_elem.get(0) != element_below) {
if (nonblock_last_elem) {
dom_event.call(nonblock_last_elem.get(0), "mouseleave", e.originalEvent);
dom_event.call(nonblock_last_elem.get(0), "mouseout", e.originalEvent);
}
dom_event.call(element_below, "mouseenter", e.originalEvent);
dom_event.call(element_below, "mouseover", e.originalEvent);
}
dom_event.call(element_below, e_name, e.originalEvent);
// Remember the latest element the mouse was over.
nonblock_last_elem = jelement_below;
};
PNotify.prototype.options.nonblock = {
// Create a non-blocking notice. It lets the user click elements underneath it.
nonblock: false,
// The opacity of the notice (if it's non-blocking) when the mouse is over it.
nonblock_opacity: .2
};
PNotify.prototype.modules.nonblock = {
// This lets us update the options available in the closures.
myOptions: null,
init: function(notice, options){ var that = this; this.myOptions = options; notice.elem.on({ "mouseenter": function(e){ if (that.myOptions.nonblock) e.stopPropagation(); if (that.myOptions.nonblock) { // If it's non-blocking, animate to the other opacity. notice.elem.stop().animate({"opacity": that.myOptions.nonblock_opacity}, "fast"); } }, "mouseleave": function(e){ if (that.myOptions.nonblock) e.stopPropagation(); nonblock_last_elem = null; notice.elem.css("cursor", "auto"); // Animate back to the normal opacity. if (that.myOptions.nonblock && notice.animating !== "out") notice.elem.stop().animate({"opacity": notice.options.opacity}, "fast"); }, "mouseover": function(e){ if (that.myOptions.nonblock) e.stopPropagation(); }, "mouseout": function(e){ if (that.myOptions.nonblock) e.stopPropagation(); }, "mousemove": function(e){ if (that.myOptions.nonblock) { e.stopPropagation(); nonblock_pass(notice, e, "onmousemove"); } }, "mousedown": function(e){ if (that.myOptions.nonblock) { e.stopPropagation(); e.preventDefault(); nonblock_pass(notice, e, "onmousedown"); } }, "mouseup": function(e){ if (that.myOptions.nonblock) { e.stopPropagation(); e.preventDefault(); nonblock_pass(notice, e, "onmouseup"); } }, "click": function(e){ if (that.myOptions.nonblock) { e.stopPropagation(); nonblock_pass(notice, e, "onclick"); } }, "dblclick": function(e){ if (that.myOptions.nonblock) { e.stopPropagation(); nonblock_pass(notice, e, "ondblclick"); } } }); }, update: function(notice, options){ this.myOptions = options; } }; }));