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

imrpoved

Browse Source
This commit is contained in:
Jaime Pillora committed 2013-04-04 14:02:55 +11:00
1 parent 6316e52e4f
commit 9fb4096d67
3 files changed
+31 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

dist/notify.js
Vendored
+13 -11
View File
@@ -20,12 +20,12 @@ arrowDirs = {
styles = { styles = {
core: { core: {
html: "<div class=\"" + className + "Wrapper\"></div>", 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 + "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}"
}, },
user: { user: {
"default": { "default": {
html: "<div>\n <div class=\"" + className + "Default\" data-notify=\"text\"></div>\n</div>", html: "<div class=\"" + className + "Default\" data-notify-style=\"color: {{COLOR}}; border-color: {{COLOR}};\">\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}" 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: { bootstrap: {
@@ -97,7 +97,8 @@ Prompt = (function() {
this.loadCSS(); this.loadCSS();
this.loadHTML(); this.loadHTML();
this.wrapper = $(styles.core.html); this.wrapper = $(styles.core.html);
this.wrapper.append(this.container); this.container = this.wrapper.find("." + className + "Container");
this.container.append(this.userContainer);
this.elem.before(this.wrapper); this.elem.before(this.wrapper);
this.container.css(this.calculateCSS()); this.container.css(this.calculateCSS());
this.run(node); this.run(node);
@@ -119,9 +120,8 @@ Prompt = (function() {
Prompt.prototype.loadHTML = function(style) { Prompt.prototype.loadHTML = function(style) {
style = this.getStyle(name); style = this.getStyle(name);
this.container = $(style.html); this.userContainer = $(style.html);
this.container.addClass("" + className + "Container"); this.text = this.userContainer.find('[data-notify=text]');
this.text = this.container.find('[data-notify=text]');
if (this.text.length === 0) { if (this.text.length === 0) {
throw "style: " + name + " HTML is missing the: data-notify='text' attribute"; throw "style: " + name + " HTML is missing the: data-notify='text' attribute";
} }
@@ -204,7 +204,7 @@ Prompt = (function() {
}; };
Prompt.prototype.run = function(node, options) { Prompt.prototype.run = function(node, options) {
var t; var color, t;
if ($.isPlainObject(options)) { if ($.isPlainObject(options)) {
$.extend(this.options, options); $.extend(this.options, options);
} else if ($.type(options) === 'string') { } else if ($.type(options) === 'string') {
@@ -221,15 +221,17 @@ Prompt = (function() {
} else { } else {
this.text.empty().append(node); this.text.empty().append(node);
} }
this.text.css({ color = this.getColor();
'color': this.getColor(), this.container.find('[data-notify-style]').each(function() {
'border-color': this.getColor() var s;
s = $(this).attr('data-notify-style');
return $(this).attr('style', s.replace(/\{\{\s*COLOR\s*\}\}/ig, color));
}); });
if (this.arrow) { if (this.arrow) {
this.arrow.remove(); this.arrow.remove();
} }
this.buildArrow(); this.buildArrow();
this.text.before(this.arrow); this.container.prepend(this.arrow);
this.showMain(true); this.showMain(true);
if (this.options.autoHidePrompt) { if (this.options.autoHidePrompt) {
clearTimeout(this.elem.data('mainTimer')); clearTimeout(this.elem.data('mainTimer'));
dist/notify.min.js
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/** Notify.js - v0.0.1 - 2013/04/04 /** Notify.js - v0.0.1 - 2013/04/04
* http://notifyjs.com/ * http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT * Copyright (c) 2013 Jaime Pillora - MIT
*/(function(t,i){"use strict";var n,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"></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>\n <div class="'+r+'Default" data-notify="text"></div>\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 $(i.createElement(t))},n=function(t){return $.extend(this,t)},n.prototype=p,a=function(t){var i,n;return t.is("[type=radio]")&&(n=t.parents("form:first").find("[type=radio]").filter(function(i,n){return $(n).attr("name")===t.attr("name")}),t=n.first()),i=t.prev(),i.is("span.styled,span.OBS_checkbox")&&(t=i),t},e=function(){function t(t,i,e){"string"===$.type(e)&&(e={color:e}),this.options=new n($.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.wrapper.append(this.container),this.elem.before(this.wrapper),this.container.css(this.calculateCSS()),this.run(i)}return t.prototype.loadCSS=function(t){var i,n;return n=this.options.style,t=this.getStyle(n),i=t.cssElem,i?i.html(t.css):(i=s("style").attr("id",""+n+"-styles").html(t.css),$("head").append(i),t.cssElem=i)},t.prototype.loadHTML=function(t){if(t=this.getStyle(name),this.container=$(t.html),this.container.addClass(""+r+"Container"),this.text=this.container.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,n,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===i.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(n in o)n!==e&&n!==t&&this.arrow.css("border-"+n,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 i;return i=this.container.parent().parents(":hidden").length>0,i&&t&&this.container.show(),i&&!t&&this.container.hide(),!i&&t&&this.container[this.options.showAnimation](this.options.showDuration),i||t?undefined:this.container[this.options.hideAnimation](this.options.hideDuration)},t.prototype.calculateCSS=function(){var t,i,n,e;return t=this.elem.position(),e=this.container.parent().position(),i=this.elem.outerHeight(),n=t.left-e.left,navigator.userAgent.match(/MSIE/)||(i+=t.top-e.top),{top:i+this.options.gap,left:n}},t.prototype.getColor=function(){return this.options.colors[this.options.color]||this.options.color},t.prototype.getStyle=function(t){var i;if(t||(t=this.options.style),i=d.user[t],!i)throw"Missing style: "+t;return i},t.prototype.run=function(t,i){var n;return $.isPlainObject(i)?$.extend(this.options,i):"string"===$.type(i)&&(this.options.color=i),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),this.text.css({color:this.getColor(),"border-color":this.getColor()}),this.arrow&&this.arrow.remove(),this.buildArrow(),this.text.before(this.arrow),this.showMain(!0),this.options.autoHidePrompt?(clearTimeout(this.elem.data("mainTimer")),n=setTimeout(function(){return this.showMain(!1)},this.options.autoHideDelay),this.elem.data("mainTimer",n)):undefined):undefined},t}(),$(function(){return $("head").append(s("style").html(d.core.css)),$(i).on("click","."+r,function(){var t;return t=a($(this)).data(h),null!=t?t.showMain(!1):undefined})}),$[h]=function(t,i,n){return $(t)[h](i,n)},$[h].options=function(t){return $.extend(p,t)},$[h].addStyle=function(t){return $.extend(!0,d.user,t)},$.fn[h]=function(t,i){return $(this).each(function(){var n;return n=a($(this)).data(h),null!=n?n.run(t,i):new e($(this),t,i)})}})(window,document); */(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
src/notify.coffee
+17 -11
View File
@@ -14,7 +14,10 @@ arrowDirs =
styles = styles =
core: core:
html: """ html: """
<div class="#{className}Wrapper"></div> <div class="#{className}Wrapper">
<div class="#{className}Container">
</div>
</div>
""" """
css: """ css: """
.#{className}Wrapper { .#{className}Wrapper {
@@ -39,8 +42,8 @@ styles =
user: user:
default: default:
html: """ html: """
<div> <div class="#{className}Default" data-notify-style="color: {{COLOR}}; border-color: {{COLOR}};">
<div class="#{className}Default" data-notify="text"></div> <span data-notify="text"></span>
</div> </div>
""" """
css: """ css: """
@@ -135,7 +138,9 @@ class Prompt
@loadHTML() @loadHTML()
@wrapper = $(styles.core.html) @wrapper = $(styles.core.html)
@wrapper.append @container @container = @wrapper.find ".#{className}Container"
@container.append @userContainer
# add into dom # add into dom
@elem.before @wrapper @elem.before @wrapper
@@ -156,9 +161,8 @@ class Prompt
loadHTML: (style) -> loadHTML: (style) ->
style = @getStyle(name) style = @getStyle(name)
@container = $(style.html) @userContainer = $(style.html)
@container.addClass "#{className}Container" @text = @userContainer.find '[data-notify=text]'
@text = @container.find '[data-notify=text]'
if @text.length is 0 if @text.length is 0
throw "style: #{name} HTML is missing the: data-notify='text' attribute" throw "style: #{name} HTML is missing the: data-notify='text' attribute"
@text.addClass "#{className}Text" @text.addClass "#{className}Text"
@@ -232,13 +236,15 @@ class Prompt
else else
@text.empty().append(node) @text.empty().append(node)
@text.css
'color': @getColor() color = @getColor()
'border-color': @getColor() @container.find('[data-notify-style]').each ->
s = $(@).attr 'data-notify-style'
$(@).attr 'style', s.replace /\{\{\s*COLOR\s*\}\}/ig, color
@arrow.remove() if @arrow @arrow.remove() if @arrow
@buildArrow() @buildArrow()
@text.before @arrow @container.prepend @arrow
@showMain true @showMain true