Files
jquery-notify/dist/notify.js
T

476 lines
14 KiB
JavaScript
Raw Normal View History

2013-06-03 09:15:58 +10:00
/** Notify.js - v0.0.1 - 2013/06/03
2013-04-04 13:13:08 +11:00
* http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT
*/
(function(window,document,undefined) {
'use strict';
2013-06-03 12:28:03 +10:00
var Notification, addStyle, className, coreStyle, cornerElem, createElem, defaultStyle, defaultStyleName, getAnchorElement, hAligns, incr, inherit, insertCSS, mainPositions, opposites, options, parsePosition, pluginName, pluginOptions, positions, realign, styles, vAligns,
2013-05-31 13:18:43 +10:00
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
2013-04-04 13:13:08 +11:00
pluginName = 'notify';
2013-06-03 12:28:03 +10:00
className = pluginName + 'js';
2013-04-04 13:13:08 +11:00
2013-05-30 16:35:16 +10:00
positions = {
t: 'top',
m: 'middle',
b: 'bottom',
l: 'left',
c: 'center',
r: 'right'
2013-05-29 16:59:19 +10:00
};
2013-06-03 09:15:58 +10:00
hAligns = ['l', 'c', 'r'];
2013-05-31 13:18:43 +10:00
2013-06-03 09:15:58 +10:00
vAligns = ['t', 'm', 'b'];
2013-05-31 13:18:43 +10:00
mainPositions = ['t', 'b', 'l', 'r'];
2013-05-30 16:35:16 +10:00
opposites = {
t: 'b',
m: null,
b: 't',
2013-05-29 16:59:19 +10:00
l: 'r',
c: null,
r: 'l'
};
parsePosition = function(str) {
var pos;
pos = [];
$.each(str.split(/\W+/), function(i, word) {
var w;
2013-05-30 16:35:16 +10:00
w = word.toLowerCase().charAt(0);
if (positions[w]) {
2013-05-29 16:59:19 +10:00
return pos.push(w);
}
});
return pos;
2013-04-04 13:13:08 +11:00
};
2013-06-03 12:28:03 +10:00
styles = {};
coreStyle = {
name: 'core',
html: "<div class=\"" + className + "-wrapper\">\n <div class=\"" + className + "-arrow\"></div>\n <div class=\"" + className + "-container\"></div>\n</div>",
css: "." + className + "-corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n." + className + "-corner ." + className + "-wrapper,\n." + className + "-corner ." + className + "-container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n}\n\n." + className + "-wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n." + className + "-container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + className + "-text {\n position: relative;\n}\n\n." + className + "-arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}"
};
defaultStyleName = "bootstrap";
defaultStyle = {
html: "<div>\n <span data-notify-text></span>\n</div>",
classes: {
base: "padding: 8px 35px 8px 14px;\ntext-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\nbackground-color: #fcf8e3;\nborder: 1px solid #fbeed5;\n-webkit-border-radius: 4px;\n-moz-border-radius: 4px;\nborder-radius: 4px;\nwhite-space: nowrap;",
error: "color: #B94A48;\nbackground-color: #F2DEDE;\nborder-color: #EED3D7;\npadding-left: 25px;\nbackground-repeat: no-repeat;\nbackground-position: 3px 7px;\nbackground-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=);",
info: "",
warn: ""
2013-04-04 13:13:08 +11:00
}
};
2013-06-03 12:28:03 +10:00
addStyle = function(name, def) {
var cssText;
if (styles[name]) {
alert("" + pluginName + ": style '" + name + "' already defined");
return;
}
def.name = name;
styles[name] = def;
if (def.cssElem) {
return;
}
cssText = "";
if (def.classes) {
$.each(def.classes, function(subClassName, css) {
return cssText += "." + className + "-" + def.name + "-" + subClassName + " {\n " + css + "\n}\n";
});
}
if (def.css) {
cssText += "/* styles for " + def.name + " */\n" + def.css;
}
if (!cssText) {
return;
}
def.cssElem = insertCSS(cssText);
return def.cssElem.attr('data-notify-style', def.name);
};
insertCSS = function(cssText) {
var elem;
elem = createElem("style");
$("head").append(elem);
try {
elem.html(cssText);
} catch (e) {
elem[0].styleSheet.cssText = cssText;
}
return elem;
};
2013-04-04 13:13:08 +11:00
pluginOptions = {
2013-04-04 16:58:22 +11:00
autoHide: false,
autoHideDelay: 2000,
2013-05-31 13:18:43 +10:00
arrowShow: true,
2013-04-04 13:13:08 +11:00
arrowSize: 5,
2013-06-03 12:28:03 +10:00
arrowColor: 'border',
2013-04-05 15:09:44 +11:00
position: 'bottom',
2013-06-03 12:28:03 +10:00
style: 'bootstrap',
cls: 'error',
2013-04-04 16:58:22 +11:00
showAnimation: 'slideDown',
2013-04-05 11:53:48 +11:00
showDuration: 400,
2013-04-04 16:58:22 +11:00
hideAnimation: 'slideUp',
2013-04-05 11:53:48 +11:00
hideDuration: 200,
2013-05-31 13:18:43 +10:00
offsetY: 0,
2013-04-05 11:53:48 +11:00
offsetX: 0
2013-04-04 13:13:08 +11:00
};
2013-04-05 11:53:48 +11:00
inherit = function(a, b) {
var F;
F = function() {};
F.prototype = a;
return $.extend(true, new F(), b);
2013-04-04 13:13:08 +11:00
};
2013-06-03 12:28:03 +10:00
options = function(opts) {
return $.extend(pluginOptions, opts);
};
createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
cornerElem = createElem("div").addClass("" + className + "-corner");
2013-04-04 16:58:22 +11:00
2013-04-04 13:13:08 +11:00
getAnchorElement = function(element) {
2013-04-16 15:57:38 +10:00
var radios;
2013-04-04 13:13:08 +11:00
if (element.is('[type=radio]')) {
radios = element.parents('form:first').find('[type=radio]').filter(function(i, e) {
return $(e).attr('name') === element.attr('name');
});
element = radios.first();
}
return element;
};
2013-05-31 13:18:43 +10:00
incr = function(obj, pos, val) {
2013-05-30 16:35:16 +10:00
var opp, temp;
if (typeof val === 'string') {
val = parseInt(val, 10);
} else if (typeof val !== 'number') {
return;
}
if (isNaN(val)) {
return;
}
opp = positions[opposites[pos.charAt(0)]];
temp = pos;
if (obj[opp] !== undefined) {
pos = positions[opp.charAt(0)];
val *= -1;
}
if (obj[pos] === undefined) {
obj[pos] = val;
} else {
obj[pos] += val;
}
return null;
};
2013-05-31 13:18:43 +10:00
realign = function(alignment, inner, outer) {
if (alignment === 'l' || alignment === 't') {
return 0;
} else if (alignment === 'c' || alignment === 'm') {
return outer / 2 - inner / 2;
} else if (alignment === 'r' || alignment === 'b') {
return outer - inner;
}
throw "Invalid alignment";
};
2013-04-04 16:58:22 +11:00
Notification = (function() {
2013-04-04 13:13:08 +11:00
2013-04-04 16:58:22 +11:00
function Notification(elem, data, options) {
2013-04-05 11:53:48 +11:00
if (typeof options === 'string') {
2013-04-04 13:13:08 +11:00
options = {
color: options
};
}
2013-04-05 11:53:48 +11:00
this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {});
2013-04-04 13:48:42 +11:00
this.loadHTML();
2013-06-03 12:28:03 +10:00
this.wrapper = $(coreStyle.html);
2013-04-05 12:26:27 +11:00
this.wrapper.data(className, this);
2013-06-03 12:28:03 +10:00
this.arrow = this.wrapper.find("." + className + "-arrow");
this.container = this.wrapper.find("." + className + "-container");
2013-04-04 14:02:55 +11:00
this.container.append(this.userContainer);
2013-04-04 16:58:22 +11:00
if (elem && elem.length) {
this.elementType = elem.attr('type');
this.originalElement = elem;
this.elem = getAnchorElement(elem);
2013-04-05 12:26:27 +11:00
this.elem.data(className, this);
2013-04-04 16:58:22 +11:00
this.elem.before(this.wrapper);
} else {
this.options.arrowShow = false;
cornerElem.prepend(this.wrapper);
}
this.container.hide();
this.run(data);
2013-04-04 13:13:08 +11:00
}
2013-04-11 17:22:27 +10:00
Notification.prototype.loadHTML = function() {
var style;
style = this.getStyle();
2013-04-04 14:02:55 +11:00
this.userContainer = $(style.html);
2013-05-30 16:35:16 +10:00
this.text = this.userContainer.find('[data-notify-text]');
2013-04-04 13:48:42 +11:00
if (this.text.length === 0) {
2013-05-30 16:35:16 +10:00
throw "style: " + name + " HTML is missing the: 'data-notify-text' attribute";
2013-04-04 13:48:42 +11:00
}
2013-06-03 12:28:03 +10:00
return this.text.addClass("" + className + "-text");
2013-04-04 13:48:42 +11:00
};
2013-04-05 15:34:55 +11:00
Notification.prototype.show = function(show, callback) {
var args, elems, fn, hidden;
if (callback == null) {
callback = $.noop;
}
2013-04-04 13:48:42 +11:00
hidden = this.container.parent().parents(':hidden').length > 0;
2013-04-05 12:26:27 +11:00
elems = this.container.add(this.arrow);
2013-04-05 15:34:55 +11:00
args = [];
2013-04-04 13:13:08 +11:00
if (hidden && show) {
2013-04-05 15:34:55 +11:00
fn = 'show';
} else if (hidden && !show) {
fn = 'hide';
} else if (!hidden && show) {
fn = this.options.showAnimation;
args.push(this.options.showDuration);
} else if (!hidden && !show) {
fn = this.options.hideAnimation;
args.push(this.options.hideDuration);
2013-05-31 13:18:43 +10:00
} else {
return callback();
2013-04-04 13:13:08 +11:00
}
2013-04-05 15:34:55 +11:00
args.push(callback);
2013-04-16 15:57:38 +10:00
return elems[fn].apply(elems, args);
2013-04-04 13:13:08 +11:00
};
2013-04-05 11:53:48 +11:00
Notification.prototype.updatePosition = function() {
2013-06-03 12:28:03 +10:00
var arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, style, wrapPos, _i, _len;
2013-04-05 11:53:48 +11:00
if (!this.elem) {
return;
}
2013-05-31 13:18:43 +10:00
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth();
2013-06-03 09:15:58 +10:00
elemIH = this.elem.innerHeight();
elemIW = this.elem.innerWidth();
2013-05-31 13:18:43 +10:00
wrapPos = this.wrapper.position();
contH = this.container.height();
contW = this.container.width();
2013-04-05 11:53:48 +11:00
position = this.getPosition();
2013-06-03 12:28:03 +10:00
console.log(position);
2013-05-31 13:18:43 +10:00
pMain = position[0];
pAlign = position[1];
pArrow = position[2] || pAlign;
mainFull = positions[pMain];
opp = opposites[pMain];
oppFull = positions[opp];
css = {};
css[oppFull] = pMain === 'b' ? elemH : pMain === 'r' ? elemW : 0;
incr(css, 'left', elemPos.left - wrapPos.left);
margin = parseInt(this.elem.css("margin-left"), 10);
if (margin) {
incr(css, 'left', margin);
2013-04-05 11:53:48 +11:00
}
2013-05-31 13:18:43 +10:00
if (/^inline/.test(this.elem.css('display'))) {
padding = parseInt(this.elem.css("padding-top"), 10);
if (padding) {
incr(css, 'top', -padding);
2013-04-05 11:53:48 +11:00
}
}
2013-05-31 13:18:43 +10:00
incr(css, 'top', this.options.offsetY);
incr(css, 'left', this.options.offsetX);
2013-06-03 12:28:03 +10:00
style = this.getStyle();
2013-05-31 13:18:43 +10:00
if (!this.options.arrowShow) {
this.arrow.hide();
} else {
2013-06-03 09:15:58 +10:00
arrowSize = this.options.arrowSize;
2013-05-31 13:18:43 +10:00
arrowCss = $.extend({}, css);
for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
pos = mainPositions[_i];
posFull = positions[pos];
if (pos === opp) {
continue;
}
2013-06-03 12:28:03 +10:00
color = posFull === mainFull ? 'black' : 'transparent';
2013-06-03 09:15:58 +10:00
arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color;
}
incr(css, positions[opp], arrowSize);
if (__indexOf.call(mainPositions, pAlign) >= 0) {
incr(arrowCss, positions[pAlign], arrowSize * 2);
2013-05-31 13:18:43 +10:00
}
2013-04-05 12:26:27 +11:00
}
2013-06-03 09:15:58 +10:00
if (__indexOf.call(vAligns, pMain) >= 0) {
2013-05-31 13:18:43 +10:00
incr(css, 'left', realign(pAlign, contW, elemW));
2013-06-03 09:15:58 +10:00
if (arrowCss) {
incr(arrowCss, 'left', realign(pAlign, arrowSize, elemIW));
}
} else if (__indexOf.call(hAligns, pMain) >= 0) {
2013-05-31 13:18:43 +10:00
incr(css, 'top', realign(pAlign, contH, elemH));
2013-06-03 09:15:58 +10:00
if (arrowCss) {
incr(arrowCss, 'top', realign(pAlign, arrowSize, elemIH));
}
2013-05-31 13:18:43 +10:00
}
if (this.container.is(":visible")) {
css.display = 'block';
}
2013-06-03 09:15:58 +10:00
this.container.removeAttr('style').css(css);
if (arrowCss) {
return this.arrow.removeAttr('style').css(arrowCss);
}
2013-04-05 11:53:48 +11:00
};
Notification.prototype.getPosition = function() {
2013-05-31 13:18:43 +10:00
var pos, text, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
2013-05-29 16:59:19 +10:00
text = this.options.position;
pos = parsePosition(text);
if (pos.length === 0) {
2013-05-31 13:18:43 +10:00
pos[0] = 'b';
2013-04-05 11:53:48 +11:00
}
2013-05-31 13:18:43 +10:00
if (_ref = pos[0], __indexOf.call(mainPositions, _ref) < 0) {
throw "Must be one of [" + mainPositions + "]";
2013-04-05 11:53:48 +11:00
}
2013-06-03 09:15:58 +10:00
if (pos.length === 1 || ((_ref1 = pos[0], __indexOf.call(vAligns, _ref1) >= 0) && (_ref2 = pos[1], __indexOf.call(hAligns, _ref2) < 0)) || ((_ref3 = pos[0], __indexOf.call(hAligns, _ref3) >= 0) && (_ref4 = pos[1], __indexOf.call(vAligns, _ref4) < 0))) {
pos[1] = (_ref5 = pos[0], __indexOf.call(hAligns, _ref5) >= 0) ? 'm' : 'l';
2013-05-29 16:59:19 +10:00
}
if (!this.options.autoReposition) {
return pos;
}
throw "Not implemented";
2013-04-04 13:13:08 +11:00
};
2013-04-04 16:58:22 +11:00
Notification.prototype.getStyle = function(name) {
2013-04-04 13:48:42 +11:00
var style;
if (!name) {
name = this.options.style;
}
2013-04-05 11:53:48 +11:00
if (!name) {
name = 'default';
}
2013-06-03 12:28:03 +10:00
style = styles[name];
2013-04-04 13:48:42 +11:00
if (!style) {
throw "Missing style: " + name;
}
return style;
};
2013-06-03 12:28:03 +10:00
Notification.prototype.updateStyleClasses = function() {
var cls, style;
cls = ['base'];
if ($.isArray(this.options.cls)) {
cls = cls.concat(this.options.cls);
} else if (this.options.cls) {
cls.push(this.options.cls);
}
style = this.getStyle();
cls = $.map(cls, function(n) {
return "" + className + "-" + style.name + "-" + n;
}).join(' ');
return this.userContainer.attr('class', cls);
2013-04-05 11:53:48 +11:00
};
2013-04-04 16:58:22 +11:00
Notification.prototype.run = function(data, options) {
2013-05-31 13:18:43 +10:00
var _this = this;
2013-04-04 13:13:08 +11:00
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
this.options.color = options;
}
2013-04-04 16:58:22 +11:00
if (this.container && !data) {
this.show(false);
2013-04-04 13:13:08 +11:00
return;
2013-04-04 16:58:22 +11:00
} else if (!this.container && !data) {
2013-04-04 13:13:08 +11:00
return;
}
2013-04-04 16:58:22 +11:00
if ($.type(data) === 'string') {
this.text.html(data.replace('\n', '<br/>'));
2013-04-04 13:13:08 +11:00
} else {
2013-04-04 16:58:22 +11:00
this.text.empty().append(data);
2013-04-04 13:13:08 +11:00
}
2013-06-03 12:28:03 +10:00
this.updateStyleClasses();
2013-04-05 11:53:48 +11:00
this.updatePosition();
2013-04-04 16:58:22 +11:00
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
2013-05-31 13:18:43 +10:00
return this.autohideTimer = setTimeout(function() {
2013-04-04 16:58:22 +11:00
return _this.show(false);
2013-04-04 13:13:08 +11:00
}, this.options.autoHideDelay);
}
};
2013-04-05 15:34:55 +11:00
Notification.prototype.destroy = function() {
var _this = this;
return this.show(false, function() {
return _this.wrapper.remove();
});
};
2013-04-04 16:58:22 +11:00
return Notification;
2013-04-04 13:13:08 +11:00
})();
2013-04-04 16:58:22 +11:00
$[pluginName] = function(elem, data, options) {
2013-04-16 15:57:38 +10:00
if ((elem && elem.nodeName) || elem.jquery) {
2013-05-29 16:59:19 +10:00
$(elem)[pluginName](data, options);
2013-04-04 16:58:22 +11:00
} else {
options = data;
data = elem;
2013-05-29 16:59:19 +10:00
new Notification(null, data, options);
2013-04-04 16:58:22 +11:00
}
2013-05-29 16:59:19 +10:00
return elem;
2013-04-04 13:13:08 +11:00
};
2013-04-04 16:58:22 +11:00
$.fn[pluginName] = function(data, options) {
2013-05-29 16:59:19 +10:00
$(this).each(function() {
2013-04-04 13:13:08 +11:00
var inst;
2013-04-05 12:26:27 +11:00
inst = getAnchorElement($(this)).data(className);
2013-04-04 16:58:22 +11:00
if (inst) {
return inst.run(data, options);
2013-04-04 13:13:08 +11:00
} else {
2013-04-04 16:58:22 +11:00
return new Notification($(this), data, options);
2013-04-04 13:13:08 +11:00
}
});
2013-05-29 16:59:19 +10:00
return this;
2013-04-04 13:13:08 +11:00
};
2013-06-03 12:28:03 +10:00
$.extend($[pluginName], {
options: options,
addStyle: addStyle
});
$(function() {
$("body").append(cornerElem);
$("link").each(function() {
var bootstrapDetected, src;
src = $(this).attr('href');
if (src.match(/bootstrap/)) {
bootstrapDetected = true;
return false;
}
});
insertCSS(coreStyle.css).attr('data-notify-style', 'core');
$[pluginName].addStyle(defaultStyleName, defaultStyle);
return $(document).on('click', "." + className + "-wrapper", function() {
var inst;
inst = $(this).data(className);
if (!inst) {
return;
}
if (inst.elem) {
return inst.show(false);
} else {
return inst.destroy();
}
});
});
2013-04-04 13:13:08 +11:00
}(window,document));