nightmare/jquery-notify
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

global notifications working

Browse Source
This commit is contained in:
Jaime Pillora committed 2013-04-04 16:58:22 +11:00
1 parent 9fb4096d67
commit 937f6a8edd
3 files changed
+187 -108
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

dist/notify.js
Vendored
+85 -54
View File
@@ -5,11 +5,11 @@
(function(window,document,undefined) {
'use strict';
var Options, Prompt, arrowDirs, className, create, getAnchorElement, pluginName, pluginOptions, styles;
var Notification, Options, arrowDirs, className, cornerElem, create, getAnchorElement, pluginName, pluginOptions, styles;
pluginName = 'notify';
className = '__notify';
className = '__' + pluginName;
arrowDirs = {
top: 'bottom',
@@ -21,37 +21,40 @@ arrowDirs = {
styles = {
core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Container\">\n </div>\n</div>",
css: "." + 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}"
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\n." + className + "Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n opacity: 0.85;\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}"
},
user: {
"default": {
html: "<div class=\"" + className + "Default\" data-notify-style=\"color: {{COLOR}}; border-color: {{COLOR}};\">\n <span data-notify=\"text\"></span>\n </div>",
html: "<div class=\"" + className + "Default\" \n data-notify-style=\"\n color: {{color}}; \n border-color: {{color}};\n \">\n <span data-notify=\"text\"></span>\n </div>",
css: "." + className + "Default {\n background: #fff;\n font-size: 11px;\n box-shadow: 0 0 6px #000;\n -moz-box-shadow: 0 0 6px #000;\n -webkit-box-shadow: 0 0 6px #000;\n padding: 4px 10px 4px 8px;\n border-radius: 6px;\n border-style: solid;\n border-width: 2px;\n -moz-border-radius: 6px;\n -webkit-border-radius: 6px;\n white-space: nowrap;\n}"
},
bootstrap: {
html: "<span>test</span>",
css: "body {\n test: 42\n}"
html: "<div class=\"alert alert-error " + className + "Bootstrap\">\n <strong>Warning!</strong> <span data-notify=\"text\"></span>\n</div>",
css: "." + className + "Bootstrap {\n white-space: nowrap;\n}",
colors: {
red: '#eed3d7'
}
}
}
};
pluginOptions = {
autoHidePrompt: false,
autoHideDelay: 10000,
autoHide: false,
autoHideDelay: 2000,
arrowShow: true,
arrowSize: 5,
arrowPosition: 'top',
style: 'default',
color: 'red',
colors: {
red: '#ee0101',
red: '#b94a48',
green: '#33be40',
black: '#393939',
blue: '#00f'
},
showAnimation: 'fadeIn',
showAnimation: 'slideDown',
showDuration: 200,
hideAnimation: 'fadeOut',
hideAnimation: 'slideUp',
hideDuration: 600,
gap: 2
};
@@ -66,6 +69,8 @@ Options = function(options) {
Options.prototype = pluginOptions;
cornerElem = create("div").addClass("" + className + "Corner");
getAnchorElement = function(element) {
var fBefore, radios;
if (element.is('[type=radio]')) {
@@ -81,30 +86,37 @@ getAnchorElement = function(element) {
return element;
};
Prompt = (function() {
Notification = (function() {
function Prompt(elem, node, options) {
function Notification(elem, data, options) {
if ($.type(options) === 'string') {
options = {
color: options
};
}
this.options = new Options($.isPlainObject(options) ? options : {});
this.elementType = elem.attr('type');
this.originalElement = elem;
this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this);
this.loadCSS();
this.loadHTML();
this.wrapper = $(styles.core.html);
this.wrapper.data(pluginName, this);
this.container = this.wrapper.find("." + className + "Container");
this.container.append(this.userContainer);
this.elem.before(this.wrapper);
this.container.css(this.calculateCSS());
this.run(node);
if (elem && elem.length) {
this.elementType = elem.attr('type');
this.originalElement = elem;
this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this);
this.elem.before(this.wrapper);
this.container.css(this.calculateCSS());
} else {
this.options.arrowShow = false;
cornerElem.prepend(this.wrapper);
}
this.container.hide();
this.run(data);
}
Prompt.prototype.loadCSS = function(style) {
Notification.prototype.loadCSS = function(style) {
var elem, name;
name = this.options.style;
style = this.getStyle(name);
@@ -118,7 +130,7 @@ Prompt = (function() {
}
};
Prompt.prototype.loadHTML = function(style) {
Notification.prototype.loadHTML = function(style) {
style = this.getStyle(name);
this.userContainer = $(style.html);
this.text = this.userContainer.find('[data-notify=text]');
@@ -128,7 +140,7 @@ Prompt = (function() {
return this.text.addClass("" + className + "Text");
};
Prompt.prototype.buildArrow = function() {
Notification.prototype.buildArrow = function() {
var alt, d, dir, showArrow, size;
dir = this.options.arrowPosition;
size = this.options.arrowSize;
@@ -155,7 +167,7 @@ Prompt = (function() {
}
};
Prompt.prototype.showMain = function(show) {
Notification.prototype.show = function(show) {
var hidden;
hidden = this.container.parent().parents(':hidden').length > 0;
if (hidden && show) {
@@ -172,7 +184,7 @@ Prompt = (function() {
}
};
Prompt.prototype.calculateCSS = function() {
Notification.prototype.calculateCSS = function() {
var elementPosition, height, left, mainPosition;
elementPosition = this.elem.position();
mainPosition = this.container.parent().position();
@@ -187,11 +199,13 @@ Prompt = (function() {
};
};
Prompt.prototype.getColor = function() {
return this.options.colors[this.options.color] || this.options.color;
Notification.prototype.getColor = function() {
var styleColors;
styleColors = this.getStyle().colors;
return (styleColors && styleColors[this.options.color]) || this.options.colors[this.options.color] || this.options.color;
};
Prompt.prototype.getStyle = function(name) {
Notification.prototype.getStyle = function(name) {
var style;
if (!name) {
name = this.options.style;
@@ -203,62 +217,79 @@ Prompt = (function() {
return style;
};
Prompt.prototype.run = function(node, options) {
var color, t;
Notification.prototype.run = function(data, options) {
var autohideTimer, color,
_this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
this.options.color = options;
}
if (this.container && !node) {
this.showMain(false);
if (this.container && !data) {
this.show(false);
return;
} else if (!this.container && !node) {
} else if (!this.container && !data) {
return;
}
if ($.type(node) === 'string') {
this.text.html(node.replace('\n', '<br/>'));
if ($.type(data) === 'string') {
this.text.html(data.replace('\n', '<br/>'));
} else {
this.text.empty().append(node);
this.text.empty().append(data);
}
color = this.getColor();
this.container.find('[data-notify-style]').each(function() {
var s;
s = $(this).attr('data-notify-style');
return $(this).attr('style', s.replace(/\{\{\s*COLOR\s*\}\}/ig, color));
return $(this).attr('style', s.replace(/\{\{\s*color\s*\}\}/ig, color));
});
if (this.arrow) {
this.arrow.remove();
}
this.buildArrow();
this.container.prepend(this.arrow);
this.showMain(true);
if (this.options.autoHidePrompt) {
clearTimeout(this.elem.data('mainTimer'));
t = setTimeout(function() {
return this.showMain(false);
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
return autohideTimer = setTimeout(function() {
return _this.show(false);
}, this.options.autoHideDelay);
return this.elem.data('mainTimer', t);
}
};
return Prompt;
return Notification;
})();
$(function() {
$("body").append(cornerElem);
$("link").each(function() {
var src;
src = $(this).attr('href');
if (src.match(/bootstrap[^\/]*\.css/)) {
$[pluginName].options({
style: 'bootstrap'
});
return false;
}
});
$("head").append(create("style").html(styles.core.css));
return $(document).on('click', "." + className, function() {
return $(document).on('click', "." + className + "Wrapper", function() {
var inst;
inst = getAnchorElement($(this)).data(pluginName);
if (inst != null) {
return inst.showMain(false);
inst = $(this).data(pluginName);
if (inst) {
return inst.show(false);
}
});
});
$[pluginName] = function(elem, node, options) {
return $(elem)[pluginName](node, options);
$[pluginName] = function(elem, data, options) {
if (elem instanceof HTMLElement || elem.jquery) {
return $(elem)[pluginName](data, options);
} else {
options = data;
data = elem;
return new Notification(null, data, options);
}
};
$[pluginName].options = function(options) {
@@ -269,14 +300,14 @@ $[pluginName].addStyle = function(s) {
return $.extend(true, styles.user, s);
};
$.fn[pluginName] = function(node, options) {
$.fn[pluginName] = function(data, options) {
return $(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(pluginName);
if (inst != null) {
return inst.run(node, options);
if (inst) {
return inst.run(data, options);
} else {
return new Prompt($(this), node, options);
return new Notification($(this), data, options);
}
});
};
dist/notify.min.js
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/** Notify.js - v0.0.1 - 2013/04/04
* http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT
*/(function(t,n){"use strict";var i,e,o,r,s,a,h,p,d;h="notify",r="__notify",o={top:"bottom",bottom:"top",left:"right",right:"left"},d={core:{html:'<div class="'+r+'Wrapper">\n <div class="'+r+'Container">\n </div>\n</div>',css:"."+r+"Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n."+r+"Container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+r+"Text {\n position: relative;\n}"},user:{"default":{html:'<div class="'+r+'Default" data-notify-style="color: {{COLOR}}; border-color: {{COLOR}};">\n <span data-notify="text"></span>\n </div>',css:"."+r+"Default {\n background: #fff;\n font-size: 11px;\n box-shadow: 0 0 6px #000;\n -moz-box-shadow: 0 0 6px #000;\n -webkit-box-shadow: 0 0 6px #000;\n padding: 4px 10px 4px 8px;\n border-radius: 6px;\n border-style: solid;\n border-width: 2px;\n -moz-border-radius: 6px;\n -webkit-border-radius: 6px;\n white-space: nowrap;\n}"},bootstrap:{html:"<span>test</span>",css:"body {\n test: 42\n}"}}},p={autoHidePrompt:!1,autoHideDelay:1e4,arrowShow:!0,arrowSize:5,arrowPosition:"top",style:"default",color:"red",colors:{red:"#ee0101",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"fadeIn",showDuration:200,hideAnimation:"fadeOut",hideDuration:600,gap:2},s=function(t){return $(n.createElement(t))},i=function(t){return $.extend(this,t)},i.prototype=p,a=function(t){var n,i;return t.is("[type=radio]")&&(i=t.parents("form:first").find("[type=radio]").filter(function(n,i){return $(i).attr("name")===t.attr("name")}),t=i.first()),n=t.prev(),n.is("span.styled,span.OBS_checkbox")&&(t=n),t},e=function(){function t(t,n,e){"string"===$.type(e)&&(e={color:e}),this.options=new i($.isPlainObject(e)?e:{}),this.elementType=t.attr("type"),this.originalElement=t,this.elem=a(t),this.elem.data(h,this),this.loadCSS(),this.loadHTML(),this.wrapper=$(d.core.html),this.container=this.wrapper.find("."+r+"Container"),this.container.append(this.userContainer),this.elem.before(this.wrapper),this.container.css(this.calculateCSS()),this.run(n)}return t.prototype.loadCSS=function(t){var n,i;return i=this.options.style,t=this.getStyle(i),n=t.cssElem,n?n.html(t.css):(n=s("style").attr("id",""+i+"-styles").html(t.css),$("head").append(n),t.cssElem=n)},t.prototype.loadHTML=function(t){if(t=this.getStyle(name),this.userContainer=$(t.html),this.text=this.userContainer.find("[data-notify=text]"),0===this.text.length)throw"style: "+name+" HTML is missing the: data-notify='text' attribute";return this.text.addClass(""+r+"Text")},t.prototype.buildArrow=function(){var t,i,e,a,h;e=this.options.arrowPosition,h=this.options.arrowSize,t=o[e],this.arrow=s("div"),this.arrow.addClass(r+"Arrow").css({"margin-top":2+(5===n.documentMode?-4*h:0),position:"relative","z-index":"2","margin-left":10,width:0,height:0}).css("border-"+t,h+"px solid "+this.getColor());for(i in o)i!==e&&i!==t&&this.arrow.css("border-"+i,h+"px solid transparent");return a=this.options.arrowShow&&"radio"!==this.elementType,a?this.arrow.show():this.arrow.hide()},t.prototype.showMain=function(t){var n;return n=this.container.parent().parents(":hidden").length>0,n&&t&&this.container.show(),n&&!t&&this.container.hide(),!n&&t&&this.container[this.options.showAnimation](this.options.showDuration),n||t?undefined:this.container[this.options.hideAnimation](this.options.hideDuration)},t.prototype.calculateCSS=function(){var t,n,i,e;return t=this.elem.position(),e=this.container.parent().position(),n=this.elem.outerHeight(),i=t.left-e.left,navigator.userAgent.match(/MSIE/)||(n+=t.top-e.top),{top:n+this.options.gap,left:i}},t.prototype.getColor=function(){return this.options.colors[this.options.color]||this.options.color},t.prototype.getStyle=function(t){var n;if(t||(t=this.options.style),n=d.user[t],!n)throw"Missing style: "+t;return n},t.prototype.run=function(t,n){var i,e;return $.isPlainObject(n)?$.extend(this.options,n):"string"===$.type(n)&&(this.options.color=n),this.container&&!t?(this.showMain(!1),undefined):this.container||t?("string"===$.type(t)?this.text.html(t.replace("\n","<br/>")):this.text.empty().append(t),i=this.getColor(),this.container.find("[data-notify-style]").each(function(){var t;return t=$(this).attr("data-notify-style"),$(this).attr("style",t.replace(/\{\{\s*COLOR\s*\}\}/gi,i))}),this.arrow&&this.arrow.remove(),this.buildArrow(),this.container.prepend(this.arrow),this.showMain(!0),this.options.autoHidePrompt?(clearTimeout(this.elem.data("mainTimer")),e=setTimeout(function(){return this.showMain(!1)},this.options.autoHideDelay),this.elem.data("mainTimer",e)):undefined):undefined},t}(),$(function(){return $("head").append(s("style").html(d.core.css)),$(n).on("click","."+r,function(){var t;return t=a($(this)).data(h),null!=t?t.showMain(!1):undefined})}),$[h]=function(t,n,i){return $(t)[h](n,i)},$[h].options=function(t){return $.extend(p,t)},$[h].addStyle=function(t){return $.extend(!0,d.user,t)},$.fn[h]=function(t,n){returnLine truncated
*/(function(t,n){"use strict";var i,e,o,r,s,a,h,p,d,l;p="notify",r="__"+p,o={top:"bottom",bottom:"top",left:"right",right:"left"},l={core:{html:'<div class="'+r+'Wrapper">\n <div class="'+r+'Container">\n </div>\n</div>',css:"."+r+"Corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n."+r+"Corner ."+r+"Wrapper,\n."+r+"Corner ."+r+"Container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n\n}\n\n."+r+"Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n opacity: 0.85;\n}\n\n."+r+"Container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+r+"Text {\n position: relative;\n}"},user:{"default":{html:'<div class="'+r+'Default" \n data-notify-style="\n color: {{color}}; \n border-color: {{color}};\n ">\n <span data-notify="text"></span>\n </div>',css:"."+r+"Default {\n background: #fff;\n font-size: 11px;\n box-shadow: 0 0 6px #000;\n -moz-box-shadow: 0 0 6px #000;\n -webkit-box-shadow: 0 0 6px #000;\n padding: 4px 10px 4px 8px;\n border-radius: 6px;\n border-style: solid;\n border-width: 2px;\n -moz-border-radius: 6px;\n -webkit-border-radius: 6px;\n white-space: nowrap;\n}"},bootstrap:{html:'<div class="alert alert-error '+r+'Bootstrap">\n <strong>Warning!</strong> <span data-notify="text"></span>\n</div>',css:"."+r+"Bootstrap {\n white-space: nowrap;\n}",colors:{red:"#eed3d7"}}}},d={autoHide:!1,autoHideDelay:2e3,arrowShow:!0,arrowSize:5,arrowPosition:"top",style:"default",color:"red",colors:{red:"#b94a48",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"slideDown",showDuration:200,hideAnimation:"slideUp",hideDuration:600,gap:2},a=function(t){return $(n.createElement(t))},e=function(t){return $.extend(this,t)},e.prototype=d,s=a("div").addClass(""+r+"Corner"),h=function(t){var n,i;return t.is("[type=radio]")&&(i=t.parents("form:first").find("[type=radio]").filter(function(n,i){return $(i).attr("name")===t.attr("name")}),t=i.first()),n=t.prev(),n.is("span.styled,span.OBS_checkbox")&&(t=n),t},i=function(){function t(t,n,i){"string"===$.type(i)&&(i={color:i}),this.options=new e($.isPlainObject(i)?i:{}),this.loadCSS(),this.loadHTML(),this.wrapper=$(l.core.html),this.wrapper.data(p,this),this.container=this.wrapper.find("."+r+"Container"),this.container.append(this.userContainer),t&&t.length?(this.elementType=t.attr("type"),this.originalElement=t,this.elem=h(t),this.elem.data(p,this),this.elem.before(this.wrapper),this.container.css(this.calculateCSS())):(this.options.arrowShow=!1,s.prepend(this.wrapper)),this.container.hide(),this.run(n)}return t.prototype.loadCSS=function(t){var n,i;return i=this.options.style,t=this.getStyle(i),n=t.cssElem,n?n.html(t.css):(n=a("style").attr("id",""+i+"-styles").html(t.css),$("head").append(n),t.cssElem=n)},t.prototype.loadHTML=function(t){if(t=this.getStyle(name),this.userContainer=$(t.html),this.text=this.userContainer.find("[data-notify=text]"),0===this.text.length)throw"style: "+name+" HTML is missing the: data-notify='text' attribute";return this.text.addClass(""+r+"Text")},t.prototype.buildArrow=function(){var t,i,e,s,h;e=this.options.arrowPosition,h=this.options.arrowSize,t=o[e],this.arrow=a("div"),this.arrow.addClass(r+"Arrow").css({"margin-top":2+(5===n.documentMode?-4*h:0),position:"relative","z-index":"2","margin-left":10,width:0,height:0}).css("border-"+t,h+"px solid "+this.getColor());for(i in o)i!==e&&i!==t&&this.arrow.css("border-"+i,h+"px solid transparent");return s=this.options.arrowShow&&"radio"!==this.elementType,s?this.arrow.show():this.arrow.hide()},t.prototype.show=function(t){var n;return n=this.container.parent().parents(":hidden").length>0,n&&t&&this.container.show(),n&&!t&&this.container.hide(),!n&&t&&this.container[this.options.showAnimation](this.options.showDuration),n||t?undefined:this.container[this.options.hideAnimation](this.options.hideDuration)},t.prototype.calculateCSS=function(){var t,n,i,e;return t=this.elem.position(),e=this.container.parent().position(),n=this.elem.outerHeight(),i=t.left-e.left,navigator.userAgent.match(/MSIE/)||(n+=t.top-e.top),{top:n+this.options.gap,left:i}},t.prototype.getColor=function(){var t;return t=this.getStyle().colors,t&&t[this.options.color]||this.options.colors[this.options.color]||this.options.color},t.prototype.getStyle=function(t){var n;if(t||(t=this.options.style),n=l.user[t],!n)throw"Missing style: "+t;return n},t.prototype.run=function(t,n){var i,e,o=this;return $.isPlainObject(n)?$.extend(this.options,n):"string"===$.type(n)&&(this.options.color=n),this.container&&!t?(this.show(!1),undefined):this.container||t?("string"===$.type(t)?this.text.html(t.replace("\n","<br/>")):this.text.empty().append(t),e=this.getColor(),this.container.find("[data-notify-style]").each(function(){var t;return t=$(this).attr("data-notify-style"),$(this).attr("style",t.replace(/\{\{\s*color\s*\}\}/gi,e))}),this.arrow&&Line truncated