From 937f6a8eddc5406abb7d1e8ef959207a4efab3c2 Mon Sep 17 00:00:00 2001 From: Jaime Pillora Date: Thu, 4 Apr 2013 16:58:22 +1100 Subject: [PATCH] global notifications working --- dist/notify.js | 139 ++++++++++++++++++++++++---------------- dist/notify.min.js | 2 +- src/notify.coffee | 154 +++++++++++++++++++++++++++++---------------- 3 files changed, 187 insertions(+), 108 deletions(-) diff --git a/dist/notify.js b/dist/notify.js index f8219f8..d1e5203 100644 --- a/dist/notify.js +++ b/dist/notify.js @@ -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: "
\n
\n
\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}" + 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: "
\n \n
", + html: "
\n \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: { - html: "test", - css: "body {\n test: 42\n}" + html: "
\n Warning! \n
", + 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', '
')); + if ($.type(data) === 'string') { + this.text.html(data.replace('\n', '
')); } 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); } }); }; diff --git a/dist/notify.min.js b/dist/notify.min.js index 8b7a28d..b260ea1 100644 --- a/dist/notify.min.js +++ b/dist/notify.min.js @@ -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:'
\n
\n
\n
',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:'
\n \n
',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:"test",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","
")):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){return $(this).each(function(){var i;return i=a($(this)).data(h),null!=i?i.run(t,n):new e($(this),t,n)})}})(window,document); \ No newline at end of file + */(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:'
\n
\n
\n
',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:'
\n \n
',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:'
\n Warning! \n
',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","
")):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&&this.arrow.remove(),this.buildArrow(),this.container.prepend(this.arrow),this.show(!0),this.options.autoHide?(clearTimeout(this.autohideTimer),i=setTimeout(function(){return o.show(!1)},this.options.autoHideDelay)):undefined):undefined},t}(),$(function(){return $("body").append(s),$("link").each(function(){var t;return t=$(this).attr("href"),t.match(/bootstrap[^\/]*\.css/)?($[p].options({style:"bootstrap"}),!1):undefined}),$("head").append(a("style").html(l.core.css)),$(n).on("click","."+r+"Wrapper",function(){var t;return t=$(this).data(p),t?t.show(!1):undefined})}),$[p]=function(t,n,e){return t instanceof HTMLElement||t.jquery?$(t)[p](n,e):(e=n,n=t,new i(null,n,e))},$[p].options=function(t){return $.extend(d,t)},$[p].addStyle=function(t){return $.extend(!0,l.user,t)},$.fn[p]=function(t,n){return $(this).each(function(){var e;return e=h($(this)).data(p),e?e.run(t,n):new i($(this),t,n)})}})(window,document); \ No newline at end of file diff --git a/src/notify.coffee b/src/notify.coffee index 90d6e5e..fc713e0 100644 --- a/src/notify.coffee +++ b/src/notify.coffee @@ -3,7 +3,7 @@ #plugin constants pluginName = 'notify' -className = '__notify' +className = '__'+pluginName arrowDirs = top: 'bottom' @@ -20,12 +20,30 @@ styles = """ css: """ + .#{className}Corner { + position: fixed; + top: 0; + right: 0; + margin: 5px; + z-index: 1050; + } + + .#{className}Corner .#{className}Wrapper, + .#{className}Corner .#{className}Container { + position: relative; + display: block; + height: inherit; + width: inherit; + + } + .#{className}Wrapper { z-index: 1; position: absolute; display: inline-block; height: 0; width: 0; + opacity: 0.85; } .#{className}Container { @@ -42,7 +60,11 @@ styles = user: default: html: """ -
+
""" @@ -65,18 +87,22 @@ styles = bootstrap: html: """ - test +
+ Warning! +
""" css: """ - body { - test: 42 + .#{className}Bootstrap { + white-space: nowrap; } """ + colors: + red: '#eed3d7' #overridable options pluginOptions = - autoHidePrompt: false - autoHideDelay: 10000 + autoHide: false + autoHideDelay: 2000 arrowShow: true arrowSize: 5 arrowPosition: 'top' @@ -86,13 +112,13 @@ pluginOptions = color: 'red' # Color mappings colors: - red: '#ee0101' + red: '#b94a48' green: '#33be40' black: '#393939' blue: '#00f' - showAnimation: 'fadeIn' + showAnimation: 'slideDown' showDuration: 200 - hideAnimation: 'fadeOut' + hideAnimation: 'slideUp' hideDuration: 600 # Gap between main and element gap: 2 @@ -107,7 +133,10 @@ create = (tag) -> Options = (options) -> $.extend @, options Options:: = pluginOptions - #gets first on n radios, and gets the fancy stylised input for hidden inputs +# container for element-less notifications +cornerElem = create("div").addClass("#{className}Corner") + +#gets first on n radios, and gets the fancy stylised input for hidden inputs getAnchorElement = (element) -> #choose the first of n radios if element.is('[type=radio]') @@ -120,33 +149,38 @@ getAnchorElement = (element) -> element #define plugin -class Prompt +class Notification #setup instance variables - constructor: (elem, node, options) -> + constructor: (elem, data, options) -> options = {color: options} if $.type(options) is 'string' @options = new Options if $.isPlainObject(options) then options else {} - @elementType = elem.attr('type') - @originalElement = elem - @elem = getAnchorElement(elem) - @elem.data pluginName, @ - #load user css into dom @loadCSS() - #load user html into @container + #load user html into @userContainer @loadHTML() @wrapper = $(styles.core.html) + @wrapper.data pluginName, @ @container = @wrapper.find ".#{className}Container" - @container.append @userContainer - # add into dom - @elem.before @wrapper - @container.css @calculateCSS() + if elem and elem.length + @elementType = elem.attr('type') + @originalElement = elem + @elem = getAnchorElement(elem) + @elem.data pluginName, @ + # add into dom above elem + @elem.before @wrapper + @container.css @calculateCSS() + else + # @options.autoHide = true + @options.arrowShow = false + cornerElem.prepend @wrapper - @run(node) + @container.hide() + @run(data) loadCSS: (style) -> name = @options.style @@ -188,7 +222,7 @@ class Prompt showArrow = @options.arrowShow and @elementType isnt 'radio' if showArrow then @arrow.show() else @arrow.hide() - showMain: (show) -> + show: (show) -> hidden = @container.parent().parents(':hidden').length > 0 @container.show() if hidden and show @container.hide() if hidden and not show @@ -207,7 +241,11 @@ class Prompt } getColor: -> - @options.colors[@options.color] or @options.color + styleColors = @getStyle().colors + return (styleColors and + styleColors[@options.color]) or + @options.colors[@options.color] or + @options.color getStyle: (name) -> name = @options.style unless name @@ -216,7 +254,7 @@ class Prompt style #run plugin - run: (node, options) -> + run: (data, options) -> #update options if $.isPlainObject(options) $.extend @options, options @@ -224,52 +262,64 @@ class Prompt else if $.type(options) is 'string' @options.color = options - if @container and not node - @showMain false #hide + if @container and not data + @show false #hide return - else if not @container and not node + else if not @container and not data return #update content - if $.type(node) is 'string' - @text.html node.replace('\n', '
') + if $.type(data) is 'string' + @text.html data.replace('\n', '
') else - @text.empty().append(node) - + @text.empty().append(data) color = @getColor() @container.find('[data-notify-style]').each -> s = $(@).attr 'data-notify-style' - $(@).attr 'style', s.replace /\{\{\s*COLOR\s*\}\}/ig, color + $(@).attr 'style', s.replace /\{\{\s*color\s*\}\}/ig, color @arrow.remove() if @arrow @buildArrow() @container.prepend @arrow - @showMain true + @show true #autohide - if @options.autoHidePrompt - clearTimeout @elem.data 'mainTimer' - t = setTimeout -> - @showMain false + if @options.autoHide + clearTimeout @autohideTimer + autohideTimer = setTimeout => + @show false , @options.autoHideDelay - @elem.data 'mainTimer', t #when ready, bind permanent hide listener $ -> + $("body").append cornerElem + + #auto-detect bootstrap + $("link").each -> + src = $(@).attr 'href' + if src.match /bootstrap[^\/]*\.css/ + $[pluginName].options {style:'bootstrap'} + return false #add core styles $("head").append(create("style").html(styles.core.css)) - - $(document).on 'click', ".#{className}", -> - inst = getAnchorElement($(@)).data pluginName - inst.showMain false if inst? + #watch all notifications clicks + $(document).on 'click', ".#{className}Wrapper", -> + inst = $(@).data pluginName + inst.show false if inst # publicise jquery plugin # return alert "$.#{pluginName} already defined" if $[pluginName]? # $.pluginName( { ... } ) changes options for all instances -$[pluginName] = (elem, node, options) -> - $(elem)[pluginName](node, options) +$[pluginName] = (elem, data, options) -> + if elem instanceof HTMLElement or + elem.jquery + $(elem)[pluginName](data, options) + else + options = data + data = elem + new Notification null, data, options # publicise options method $[pluginName].options = (options) -> @@ -281,13 +331,11 @@ $[pluginName].addStyle = (s) -> # $( ... ).pluginName( { .. } ) creates a cached instance on each # selected item with custom options for just that instance # return alert "$.fn#{pluginName} already defined" if $.fn[pluginName]? -$.fn[pluginName] = (node, options) -> +$.fn[pluginName] = (data, options) -> $(@).each -> inst = getAnchorElement($(@)).data pluginName - if inst? - inst.run node, options + if inst + inst.run data, options else - new Prompt $(@), node, options - -#ps. alex is gay. + new Notification $(@), data, options