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

user styles working

Browse Source
This commit is contained in:
Jaime Pillora
2013-04-04 13:48:42 +11:00
parent 8c0917498f
commit 6316e52e4f
3 changed files with 183 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+72 -34
View File
@@ -5,7 +5,7 @@
(function(window,document,undefined) {
'use strict';
var Options, Prompt, arrowDirs, className, coreStyle, create, getAnchorElement, pluginName, pluginOptions, userStyles;
var Options, Prompt, arrowDirs, className, create, getAnchorElement, pluginName, pluginOptions, styles;
pluginName = 'notify';
@@ -18,19 +18,20 @@ arrowDirs = {
right: 'left'
};
coreStyle = {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Main\">\n <div class=\"" + className + "Content\">\n </div>\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 + "Main {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + className + "Content {\n background: #fff;\n position: relative;\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}"
};
userStyles = {
"default": {
html: "<span>test</span>",
css: "body {\n test: 42\n}"
styles = {
core: {
html: "<div class=\"" + className + "Wrapper\"></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}"
},
bootstrap: {
html: "<span>test</span>",
css: "body {\n test: 42\n}"
user: {
"default": {
html: "<div>\n <div class=\"" + className + "Default\" data-notify=\"text\"></div>\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}"
}
}
};
@@ -40,6 +41,7 @@ pluginOptions = {
arrowShow: true,
arrowSize: 5,
arrowPosition: 'top',
style: 'default',
color: 'red',
colors: {
red: '#ee0101',
@@ -59,9 +61,7 @@ create = function(tag) {
};
Options = function(options) {
if ($.isPlainObject(options)) {
return $.extend(this, options);
}
return $.extend(this, options);
};
Options.prototype = pluginOptions;
@@ -94,14 +94,40 @@ Prompt = (function() {
this.originalElement = elem;
this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this);
this.wrapper = $(coreStyle.html);
this.main = this.wrapper.find("." + className + "Main");
this.content = this.main.find("." + className + "Content");
this.loadCSS();
this.loadHTML();
this.wrapper = $(styles.core.html);
this.wrapper.append(this.container);
this.elem.before(this.wrapper);
this.main.css(this.calculateCSS());
this.container.css(this.calculateCSS());
this.run(node);
}
Prompt.prototype.loadCSS = function(style) {
var elem, name;
name = this.options.style;
style = this.getStyle(name);
elem = style.cssElem;
if (elem) {
return elem.html(style.css);
} else {
elem = create("style").attr('id', "" + name + "-styles").html(style.css);
$("head").append(elem);
return style.cssElem = elem;
}
};
Prompt.prototype.loadHTML = function(style) {
style = this.getStyle(name);
this.container = $(style.html);
this.container.addClass("" + className + "Container");
this.text = this.container.find('[data-notify=text]');
if (this.text.length === 0) {
throw "style: " + name + " HTML is missing the: data-notify='text' attribute";
}
return this.text.addClass("" + className + "Text");
};
Prompt.prototype.buildArrow = function() {
var alt, d, dir, showArrow, size;
dir = this.options.arrowPosition;
@@ -131,25 +157,25 @@ Prompt = (function() {
Prompt.prototype.showMain = function(show) {
var hidden;
hidden = this.main.parent().parents(':hidden').length > 0;
hidden = this.container.parent().parents(':hidden').length > 0;
if (hidden && show) {
this.main.show();
this.container.show();
}
if (hidden && !show) {
this.main.hide();
this.container.hide();
}
if (!hidden && show) {
this.main[this.options.showAnimation](this.options.showDuration);
this.container[this.options.showAnimation](this.options.showDuration);
}
if (!hidden && !show) {
return this.main[this.options.hideAnimation](this.options.hideDuration);
return this.container[this.options.hideAnimation](this.options.hideDuration);
}
};
Prompt.prototype.calculateCSS = function() {
var elementPosition, height, left, mainPosition;
elementPosition = this.elem.position();
mainPosition = this.main.parent().position();
mainPosition = this.container.parent().position();
height = this.elem.outerHeight();
left = elementPosition.left - mainPosition.left;
if (!navigator.userAgent.match(/MSIE/)) {
@@ -165,6 +191,18 @@ Prompt = (function() {
return this.options.colors[this.options.color] || this.options.color;
};
Prompt.prototype.getStyle = function(name) {
var style;
if (!name) {
name = this.options.style;
}
style = styles.user[name];
if (!style) {
throw "Missing style: " + name;
}
return style;
};
Prompt.prototype.run = function(node, options) {
var t;
if ($.isPlainObject(options)) {
@@ -172,18 +210,18 @@ Prompt = (function() {
} else if ($.type(options) === 'string') {
this.options.color = options;
}
if (this.main && !node) {
if (this.container && !node) {
this.showMain(false);
return;
} else if (!this.main && !node) {
} else if (!this.container && !node) {
return;
}
if ($.type(node) === 'string') {
this.content.html(node.replace('\n', '<br/>'));
this.text.html(node.replace('\n', '<br/>'));
} else {
this.content.empty().append(node);
this.text.empty().append(node);
}
this.content.css({
this.text.css({
'color': this.getColor(),
'border-color': this.getColor()
});
@@ -191,7 +229,7 @@ Prompt = (function() {
this.arrow.remove();
}
this.buildArrow();
this.content.before(this.arrow);
this.text.before(this.arrow);
this.showMain(true);
if (this.options.autoHidePrompt) {
clearTimeout(this.elem.data('mainTimer'));
@@ -207,7 +245,7 @@ Prompt = (function() {
})();
$(function() {
$("head").append(create("style").html(coreStyle.css));
$("head").append(create("style").html(styles.core.css));
return $(document).on('click', "." + className, function() {
var inst;
inst = getAnchorElement($(this)).data(pluginName);
@@ -226,7 +264,7 @@ $[pluginName].options = function(options) {
};
$[pluginName].addStyle = function(s) {
return $.extend(true, userStyles, s);
return $.extend(true, styles.user, s);
};
$.fn[pluginName] = function(node, 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,o,e,r,s,a,h,p,d,l;p="notify",r="__notify",e={top:"bottom",bottom:"top",left:"right",right:"left"},s={html:'<div class="'+r+'Wrapper">\n <div class="'+r+'Main">\n <div class="'+r+'Content">\n </div>\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+"Main {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+r+"Content {\n background: #fff;\n position: relative;\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}"},l={"default":{html:"<span>test</span>",css:"body {\n test: 42\n}"},bootstrap:{html:"<span>test</span>",css:"body {\n test: 42\n}"}},d={autoHidePrompt:!1,autoHideDelay:1e4,arrowShow:!0,arrowSize:5,arrowPosition:"top",color:"red",colors:{red:"#ee0101",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"fadeIn",showDuration:200,hideAnimation:"fadeOut",hideDuration:600,gap:2},a=function(t){return $(n.createElement(t))},i=function(t){return $.isPlainObject(t)?$.extend(this,t):undefined},i.prototype=d,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},o=function(){function t(t,n,o){"string"===$.type(o)&&(o={color:o}),this.options=new i($.isPlainObject(o)?o:{}),this.elementType=t.attr("type"),this.originalElement=t,this.elem=h(t),this.elem.data(p,this),this.wrapper=$(s.html),this.main=this.wrapper.find("."+r+"Main"),this.content=this.main.find("."+r+"Content"),this.elem.before(this.wrapper),this.main.css(this.calculateCSS()),this.run(n)}return t.prototype.buildArrow=function(){var t,i,o,s,h;o=this.options.arrowPosition,h=this.options.arrowSize,t=e[o],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 e)i!==o&&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.showMain=function(t){var n;return n=this.main.parent().parents(":hidden").length>0,n&&t&&this.main.show(),n&&!t&&this.main.hide(),!n&&t&&this.main[this.options.showAnimation](this.options.showDuration),n||t?undefined:this.main[this.options.hideAnimation](this.options.hideDuration)},t.prototype.calculateCSS=function(){var t,n,i,o;return t=this.elem.position(),o=this.main.parent().position(),n=this.elem.outerHeight(),i=t.left-o.left,navigator.userAgent.match(/MSIE/)||(n+=t.top-o.top),{top:n+this.options.gap,left:i}},t.prototype.getColor=function(){return this.options.colors[this.options.color]||this.options.color},t.prototype.run=function(t,n){var i;return $.isPlainObject(n)?$.extend(this.options,n):"string"===$.type(n)&&(this.options.color=n),this.main&&!t?(this.showMain(!1),undefined):this.main||t?("string"===$.type(t)?this.content.html(t.replace("\n","<br/>")):this.content.empty().append(t),this.content.css({color:this.getColor(),"border-color":this.getColor()}),this.arrow&&this.arrow.remove(),this.buildArrow(),this.content.before(this.arrow),this.showMain(!0),this.options.autoHidePrompt?(clearTimeout(this.elem.data("mainTimer")),i=setTimeout(function(){return this.showMain(!1)},this.options.autoHideDelay),this.elem.data("mainTimer",i)):undefined):undefined},t}(),$(function(){return $("head").append(a("style").html(s.css)),$(n).on("click","."+r,function(){var t;return t=h($(this)).data(p),null!=t?t.showMain(!1):undefined})}),$[p]=function(t,n,i){return $(t)[p](n,i)},$[p].options=function(t){return $.extend(d,t)},$[p].addStyle=function(t){return $.extend(!0,l,t)},$.fn[p]=function(t,n){return $(this).each(function(){var i;return i=h($(this)).data(p),null!=i?i.run(t,n):new o($(this),t,n)})}})(window,document);
*/(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);