diff --git a/dist/notify.js b/dist/notify.js index 1252f7f..b7162c5 100644 --- a/dist/notify.js +++ b/dist/notify.js @@ -1,23 +1,29 @@ -/** Notify.js - v0.0.1 - 2013/05/29 +/** Notify.js - v0.0.1 - 2013/05/30 * http://notifyjs.com/ * Copyright (c) 2013 Jaime Pillora - MIT */ (function(window,document,undefined) { 'use strict'; -var Notification, className, cornerElem, createElem, getAnchorElement, hPositions, inherit, insertCSS, parsePosition, pluginName, pluginOptions, styles, vPositions; +var Notification, className, cornerElem, createElem, getAnchorElement, incr, inherit, insertCSS, opposites, parsePosition, pluginName, pluginOptions, positions, styles; pluginName = 'notify'; className = '__' + pluginName; -vPositions = { - t: 'b', - m: null, - b: 't' +positions = { + t: 'top', + m: 'middle', + b: 'bottom', + l: 'left', + c: 'center', + r: 'right' }; -hPositions = { +opposites = { + t: 'b', + m: null, + b: 't', l: 'r', c: null, r: 'l' @@ -28,11 +34,8 @@ parsePosition = function(str) { pos = []; $.each(str.split(/\W+/), function(i, word) { var w; - w = word.toLowerCase()[0]; - if (vPositions[w]) { - pos.push(w); - } - if (hPositions[w]) { + w = word.toLowerCase().charAt(0); + if (positions[w]) { return pos.push(w); } }); @@ -42,11 +45,11 @@ parsePosition = function(str) { styles = { core: { html: "
\n
\n
\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." + 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}\n\n." + className + "Arrow {\n margin-top: 2px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\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." + className + "Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n border: thin solid red;\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 margin-top: 2px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\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: { @@ -65,7 +68,7 @@ pluginOptions = { arrowShow: false, arrowSize: 5, position: 'bottom', - style: null, + style: 'default', color: 'red', colors: { red: '#b94a48', @@ -105,17 +108,49 @@ getAnchorElement = function(element) { return element; }; +incr = function(obj, pos, val, useOpposite) { + var opp, temp; + if (useOpposite == null) { + useOpposite = true; + } + 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) { + if (!useOpposite) { + return; + } + pos = positions[opp.charAt(0)]; + val *= -1; + } + if (obj[pos] === undefined) { + obj[pos] = val; + } else { + obj[pos] += val; + } + console.log("incr (" + opp + ">>" + temp + ") " + pos + " by " + val); + return null; +}; + insertCSS = function(style) { var elem; if (!(style && style.css)) { return; } elem = style.cssElem; - if (!elem) { - elem = createElem("style"); - $("head").append(elem); - style.cssElem = elem; + if (elem) { + return; } + elem = createElem("style"); + $("head").append(elem); + style.cssElem = elem; try { return elem.html(style.css); } catch (e) { @@ -166,9 +201,9 @@ Notification = (function() { var style; style = this.getStyle(); this.userContainer = $(style.html); - this.text = this.userContainer.find('[data-notify=text]'); + this.text = this.userContainer.find('[data-notify-text]'); 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"; } return this.text.addClass("" + className + "Text"); }; @@ -197,34 +232,36 @@ Notification = (function() { }; Notification.prototype.updatePosition = function() { - var elementPosition, mainPosition, p, position; + var elementPosition, p, position, wrapperPosition; if (!this.elem) { return; } elementPosition = this.elem.position(); - mainPosition = this.wrapper.position(); + wrapperPosition = this.wrapper.position(); position = this.getPosition(); - p = { - top: 0, - left: 0 - }; - switch (position) { - case 'bottom': - p.top += this.elem.outerHeight(); + console.log(this.elem[0]); + console.log("update position", position, " elem ", elementPosition, " main ", wrapperPosition); + p = {}; + switch (position[0]) { + case 'b': + incr(p, 'top', this.elem.outerHeight()); break; - case 'right': - p.left += this.elem.width(); + case 't': + incr(p, 'bottom', 0); + break; + case 'l': + incr(p, 'right', 0); + break; + case 'r': + incr(p, 'left', this.elem.outerWidth()); break; default: throw "Unknown position: " + position; } if (!navigator.userAgent.match(/MSIE/)) { - p.top += elementPosition.top - mainPosition.top; + incr(p, 'top', elementPosition.top - wrapperPosition.top); } - p.left += elementPosition.left - mainPosition.left; - p.top += this.options.offsetY; - p.left += this.options.offsetX; - this.updateArrow(p, position); + incr(p, 'left', elementPosition.left - wrapperPosition.left); return this.container.css(p); }; @@ -283,9 +320,6 @@ Notification = (function() { if (!name) { name = this.options.style; } - if (bootstrapDetected && !name) { - name = 'bootstrap'; - } if (!name) { name = 'default'; } @@ -387,6 +421,8 @@ $[pluginName].styles = function(s) { return $.extend(true, styles.user, s); }; +$[pluginName].insertCSS = insertCSS; + $.fn[pluginName] = function(data, options) { $(this).each(function() { var inst; diff --git a/dist/notify.min.js b/dist/notify.min.js index 649a6c1..122a72b 100644 --- a/dist/notify.min.js +++ b/dist/notify.min.js @@ -1,4 +1,4 @@ -/** Notify.js - v0.0.1 - 2013/05/29 +/** Notify.js - v0.0.1 - 2013/05/30 * http://notifyjs.com/ * Copyright (c) 2013 Jaime Pillora - MIT - */(function(t,n){"use strict";var o,e,i,r,s,a,p,h,l,d,u,c,f;d="notify",e="__"+d,f={t:"b",m:null,b:"t"},a={l:"r",c:null,r:"l"},l=function(t){var n;return n=[],$.each(t.split(/\W+/),function(t,o){var e;return e=o.toLowerCase()[0],f[e]&&n.push(e),a[e]?n.push(e):undefined}),n},c={core:{html:'
\n
\n
\n
',css:"."+e+"Corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n."+e+"Corner ."+e+"Wrapper,\n."+e+"Corner ."+e+"Container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n}\n\n."+e+"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."+e+"Container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+e+"Text {\n position: relative;\n}\n\n."+e+"Arrow {\n margin-top: 2px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\n"},user:{"default":{html:'
\n \n
',css:"."+e+"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 \n
',css:"."+e+"Bootstrap {\n white-space: nowrap;\n margin: 5px !important;\n padding-left: 25px !important;\n background-repeat: no-repeat;\n background-position: 3px 7px;\n background-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=);\n}",colors:{red:"#eed3d7"}}}},u={autoHide:!1,autoHideDelay:2e3,arrowShow:!1,arrowSize:5,position:"bottom",style:null,color:"red",colors:{red:"#b94a48",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"slideDown",showDuration:400,hideAnimation:"slideUp",hideDuration:200,offsetY:2,offsetX:0},r=function(t){return $("<"+t+">")},p=function(t,n){var o;return o=function(){},o.prototype=t,$.extend(!0,new o,n)},i=r("div").addClass(""+e+"Corner"),s=function(t){var n;return t.is("[type=radio]")&&(n=t.parents("form:first").find("[type=radio]").filter(function(n,o){return $(o).attr("name")===t.attr("name")}),t=n.first()),t},h=function(t){var n;if(t&&t.css){n=t.cssElem,n||(n=r("style"),$("head").append(n),t.cssElem=n);try{return n.html(t.css)}catch(o){return n[0].styleSheet.cssText=t.css}}},o=function(){function t(t,n,o){"string"==typeof o&&(o={color:o}),this.options=p(u,$.isPlainObject(o)?o:{}),this.loadCSS(),this.loadHTML(),this.wrapper=$(c.core.html),this.wrapper.data(e,this),this.arrow=this.wrapper.find("."+e+"Arrow"),this.container=this.wrapper.find("."+e+"Container"),this.container.append(this.userContainer),t&&t.length?(this.elementType=t.attr("type"),this.originalElement=t,this.elem=s(t),this.elem.data(e,this),this.elem.before(this.wrapper)):(this.options.arrowShow=!1,i.prepend(this.wrapper)),this.container.hide(),this.run(n)}return t.prototype.loadCSS=function(t){var n;return t||(n=this.options.style,t=this.getStyle(n)),h(t)},t.prototype.loadHTML=function(){var t;if(t=this.getStyle(),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(""+e+"Text")},t.prototype.show=function(t,n){var o,e,i,r;return null==n&&(n=$.noop),r=this.container.parent().parents(":hidden").length>0,e=this.container.add(this.arrow),o=[],r&&t?i="show":r&&!t?i="hide":!r&&t?(i=this.options.showAnimation,o.push(this.options.showDuration)):r||t||(i=this.options.hideAnimation,o.push(this.options.hideDuration)),o.push(n),e[i].apply(e,o)},t.prototype.updatePosition=function(){var t,n,o,e;if(this.elem){switch(t=this.elem.position(),n=this.wrapper.position(),e=this.getPosition(),o={top:0,left:0},e){case"bottom":o.top+=this.elem.outerHeight();break;case"right":o.left+=this.elem.width();break;default:throw"Unknown position: "+e}return navigator.userAgent.match(/MSIE/)||(o.top+=t.top-n.top),o.left+=t.left-n.left,o.top+=this.options.offsetY,o.left+=this.options.offsetX,this.updateArrow(o,e),this.container.css(o)}},t.prototype.updateArrow=function(t,n){var o,e,i;if(!this.options.arrowShow||"radio"===this.elementType)return this.arrow.hide(),undefined;e=arrowDirs[n],i=this.options.arrowSize,this.arrow.css("border-"+n,i+"px solid "+this.getColor()),this.arrow.css(t);for(o in arrowDirs)o!==e&&o!==n&&this.arrow.css("border-"+o,i+"px solid transparent");switch(n){case"bottom":t.top+=i;break;case"right":t.left+=i}return this.arrow.show()},t.prototype.getPosition=function(){var t,n;if(n=this.options.position,t=l(n),0===t.length&&t.push("b"),(1===t.length&&"l"===t[0]||"r"===t[0])&&t.push("m"),1===t.length&&t.push("l"),!this.options.autoReposition)return t;throw"Not implemented"},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),bootstrapDetected&&!t&&(t="bootstrap"),t||(t="default"),n=c.user[t],!n)throw"Missing style: "+t;return n},t.prototype.updateStyle=function(){var t=this;return this.wrapper.find("[data-notify-style]").each(function(n,o){return $(o).attr("style",$(o).attr("data-notify-style").replace(/\{\{\s*color\s*\}\}/gi,t.getColor()))})},t.prototype.run=function(t,n){var o,e=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),this.updatePosition(),this.show(!0),this.options.autoHide?(clearTimeout(this.autohideTimer),o=setTimeout(function(){return e.show(!1)},this.options.autoHideDelay)):undefined):undefined},t.prototype.destroy=function(){var t=this;return this.show(!1,function(){return t.wrapper.remove()})},t}(),$(function(){return $("body").append(i),$("link").each(function(){var t,n;return n=$(this).attr("href"),n.match(/bootstrap/)?(t=!0,!1):undefined}),h(c.core),$(n).on("click","."+e+"Wrapper",function(){var t;return(t=$(this).data(e))?t.elem?t.show(!1):t.destroy():undefined})}),$[d]=function(t,n,e){return t&&t.nodeName||t.jquery?$(t)[d](n,e):(e=n,n=t,new o(null,n,e)),t},$[d].options=function(t){return $.extend(u,t)},$[d].styles=function(t){return $.extend(!0,c.user,t)},$.fn[d]=function(t,n){return $(this).each(function(){var i;return i=s($(this)).data(e),i?i.run(t,n):new o($(this),t,n)}),this}})(window,document); \ No newline at end of file + */(function(t,n,o){"use strict";var e,i,r,s,a,p,h,l,u,d,c,f,w,y;c="notify",i="__"+c,w={t:"top",m:"middle",b:"bottom",l:"left",c:"center",r:"right"},u={t:"b",m:null,b:"t",l:"r",c:null,r:"l"},d=function(t){var n;return n=[],$.each(t.split(/\W+/),function(t,e){var i;return i=e.toLowerCase().charAt(0),w[i]?n.push(i):o}),n},y={core:{html:'
\n
\n
\n
',css:"."+i+"Corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n."+i+"Corner ."+i+"Wrapper,\n."+i+"Corner ."+i+"Container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n}\n\n."+i+"Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n border: thin solid red;\n}\n\n."+i+"Container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+i+"Text {\n position: relative;\n}\n\n."+i+"Arrow {\n margin-top: 2px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\n"},user:{"default":{html:'
\n \n
',css:"."+i+"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 \n
',css:"."+i+"Bootstrap {\n white-space: nowrap;\n margin: 5px !important;\n padding-left: 25px !important;\n background-repeat: no-repeat;\n background-position: 3px 7px;\n background-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=);\n}",colors:{red:"#eed3d7"}}}},f={autoHide:!1,autoHideDelay:2e3,arrowShow:!1,arrowSize:5,position:"bottom",style:"default",color:"red",colors:{red:"#b94a48",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"slideDown",showDuration:400,hideAnimation:"slideUp",hideDuration:200,offsetY:2,offsetX:0},s=function(t){return $("<"+t+">")},h=function(t,n){var o;return o=function(){},o.prototype=t,$.extend(!0,new o,n)},r=s("div").addClass(""+i+"Corner"),a=function(t){var n;return t.is("[type=radio]")&&(n=t.parents("form:first").find("[type=radio]").filter(function(n,o){return $(o).attr("name")===t.attr("name")}),t=n.first()),t},p=function(t,n,e,i){var r,s;if(null==i&&(i=!0),"string"==typeof e)e=parseInt(e,10);else if("number"!=typeof e)return;if(!isNaN(e)){if(r=w[u[n.charAt(0)]],s=n,t[r]!==o){if(!i)return;n=w[r.charAt(0)],e*=-1}return t[n]===o?t[n]=e:t[n]+=e,console.log("incr ("+r+">>"+s+") "+n+" by "+e),null}},l=function(t){var n;if(t&&t.css&&(n=t.cssElem,!n)){n=s("style"),$("head").append(n),t.cssElem=n;try{return n.html(t.css)}catch(o){return n[0].styleSheet.cssText=t.css}}},e=function(){function t(t,n,o){"string"==typeof o&&(o={color:o}),this.options=h(f,$.isPlainObject(o)?o:{}),this.loadCSS(),this.loadHTML(),this.wrapper=$(y.core.html),this.wrapper.data(i,this),this.arrow=this.wrapper.find("."+i+"Arrow"),this.container=this.wrapper.find("."+i+"Container"),this.container.append(this.userContainer),t&&t.length?(this.elementType=t.attr("type"),this.originalElement=t,this.elem=a(t),this.elem.data(i,this),this.elem.before(this.wrapper)):(this.options.arrowShow=!1,r.prepend(this.wrapper)),this.container.hide(),this.run(n)}return t.prototype.loadCSS=function(t){var n;return t||(n=this.options.style,t=this.getStyle(n)),l(t)},t.prototype.loadHTML=function(){var t;if(t=this.getStyle(),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(""+i+"Text")},t.prototype.show=function(t,n){var o,e,i,r;return null==n&&(n=$.noop),r=this.container.parent().parents(":hidden").length>0,e=this.container.add(this.arrow),o=[],r&&t?i="show":r&&!t?i="hide":!r&&t?(i=this.options.showAnimation,o.push(this.options.showDuration)):r||t||(i=this.options.hideAnimation,o.push(this.options.hideDuration)),o.push(n),e[i].apply(e,o)},t.prototype.updatePosition=function(){var t,n,o,e;if(this.elem){switch(t=this.elem.position(),e=this.wrapper.position(),o=this.getPosition(),console.log(this.elem[0]),console.log("update position",o," elem ",t," main ",e),n={},o[0]){case"b":p(n,"top",this.elem.outerHeight());break;case"t":p(n,"bottom",0);break;case"l":p(n,"right",0);break;case"r":p(n,"left",this.elem.outerWidth());break;default:throw"Unknown position: "+o}return navigator.userAgent.match(/MSIE/)||p(n,"top",t.top-e.top),p(n,"left",t.left-e.left),this.container.css(n)}},t.prototype.updateArrow=function(t,n){var e,i,r;if(!this.options.arrowShow||"radio"===this.elementType)return this.arrow.hide(),o;i=arrowDirs[n],r=this.options.arrowSize,this.arrow.css("border-"+n,r+"px solid "+this.getColor()),this.arrow.css(t);for(e in arrowDirs)e!==i&&e!==n&&this.arrow.css("border-"+e,r+"px solid transparent");switch(n){case"bottom":t.top+=r;break;case"right":t.left+=r}return this.arrow.show()},t.prototype.getPosition=function(){var t,n;if(n=this.options.position,t=d(n),0===t.length&&t.push("b"),(1===t.length&&"l"===t[0]||"r"===t[0])&&t.push("m"),1===t.length&&t.push("l"),!this.options.autoReposition)return t;throw"Not implemented"},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),t||(t="default"),n=y.user[t],!n)throw"Missing style: "+t;return n},t.prototype.updateStyle=function(){var t=this;return this.wrapper.find("[data-notify-style]").each(function(n,o){return $(o).attr("style",$(o).attr("data-notify-style").replace(/\{\{\s*color\s*\}\}/gi,t.getColor()))})},t.prototype.run=function(t,n){var e,i=this;return $.isPlainObject(n)?$.extend(this.options,n):"string"===$.type(n)&&(this.options.color=n),this.container&&!t?(this.show(!1),o):this.container||t?("string"===$.type(t)?this.text.html(t.replace("\n","
")):this.text.empty().append(t),this.updatePosition(),this.show(!0),this.options.autoHide?(clearTimeout(this.autohideTimer),e=setTimeout(function(){return i.show(!1)},this.options.autoHideDelay)):o):o},t.prototype.destroy=function(){var t=this;return this.show(!1,function(){return t.wrapper.remove()})},t}(),$(function(){return $("body").append(r),$("link").each(function(){var t,n;return n=$(this).attr("href"),n.match(/bootstrap/)?(t=!0,!1):o}),l(y.core),$(n).on("click","."+i+"Wrapper",function(){var t;return(t=$(this).data(i))?t.elem?t.show(!1):t.destroy():o})}),$[c]=function(t,n,o){return t&&t.nodeName||t.jquery?$(t)[c](n,o):(o=n,n=t,new e(null,n,o)),t},$[c].options=function(t){return $.extend(f,t)},$[c].styles=function(t){return $.extend(!0,y.user,t)},$[c].insertCSS=l,$.fn[c]=function(t,n){return $(this).each(function(){var o;return o=a($(this)).data(i),o?o.run(t,n):new e($(this),t,n)}),this}})(window,document); \ No newline at end of file diff --git a/examples/position.html b/examples/position.html index 11915d2..78fea77 100644 --- a/examples/position.html +++ b/examples/position.html @@ -6,7 +6,18 @@
@@ -19,8 +30,11 @@ $.each(positions, function(i, p) { var box = $("
"+p+"
"); - boxes.append(box); - box.notify(p, {pos: p}); + boxes.append($("
").append(box)); + + setTimeout(function() { + box.notify(p, {position: p}); + }, 500) }); diff --git a/src/notify.coffee b/src/notify.coffee index 580eb41..ff606b0 100644 --- a/src/notify.coffee +++ b/src/notify.coffee @@ -5,12 +5,19 @@ pluginName = 'notify' className = '__'+pluginName + +positions = + t: 'top' + m: 'middle' + b: 'bottom' + l: 'left' + c: 'center' + r: 'right' #positions mapped to opposites -vPositions = +opposites = t: 'b' m: null b: 't' -hPositions = l: 'r' c: null r: 'l' @@ -18,9 +25,8 @@ hPositions = parsePosition = (str) -> pos = [] $.each str.split(/\W+/), (i,word) -> - w = word.toLowerCase()[0] - pos.push w if vPositions[w] - pos.push w if hPositions[w] + w = word.toLowerCase().charAt(0) + pos.push w if positions[w] pos #built-in styles @@ -55,7 +61,7 @@ styles = display: inline-block; height: 0; width: 0; - opacity: 0.85; + border: thin solid red; } .#{className}Container { @@ -87,7 +93,7 @@ styles = color: {{color}}; border-color: {{color}}; "> - +
""" css: """ @@ -134,7 +140,7 @@ pluginOptions = arrowSize: 5 position: 'bottom' # Default style - style: null + style: 'default' # Default color color: 'red' # Color mappings @@ -154,7 +160,8 @@ pluginOptions = #parents: { '.ui-dialog': 5001 } # plugin helpers -createElem = (tag) -> $ "<#{tag}>" +createElem = (tag) -> + $ "<#{tag}>" inherit = (a, b) -> F = () -> F.prototype = a @@ -173,13 +180,41 @@ getAnchorElement = (element) -> #custom-styled inputs - find thier real element element +incr = (obj, pos, val, useOpposite = true) -> + + # console.log "incr ---- #{pos} #{val} (#{typeof val})" + + if typeof val is 'string' + val = parseInt val, 10 + else if typeof val isnt 'number' + return + + return if isNaN val + + opp = positions[opposites[pos.charAt(0)]] + temp = pos + + #use the opposite if exists + if obj[opp] isnt `undefined` + return unless useOpposite + pos = positions[opp.charAt(0)] + val *= -1 + + if obj[pos] is `undefined` + obj[pos] = val + else + obj[pos] += val + + console.log "incr (#{opp}>>#{temp}) #{pos} by #{val}" + null + insertCSS = (style) -> return unless style and style.css elem = style.cssElem - unless elem - elem = createElem("style") - $("head").append elem - style.cssElem = elem + return if elem + elem = createElem("style") + $("head").append elem + style.cssElem = elem try elem.html style.css @@ -230,9 +265,9 @@ class Notification loadHTML: -> style = @getStyle() @userContainer = $(style.html) - @text = @userContainer.find '[data-notify=text]' + @text = @userContainer.find '[data-notify-text]' 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" show: (show, callback = $.noop) -> @@ -261,32 +296,43 @@ class Notification return unless @elem # elementPosition = @elem.position() - mainPosition = @wrapper.position() - + wrapperPosition = @wrapper.position() + # position = @getPosition() + console.log @elem[0] + console.log "update position", position, " elem ", elementPosition, " main ", wrapperPosition + #start calculations - p = - top: 0 - left: 0 - switch position - when 'bottom' - p.top += @elem.outerHeight() - when 'right' - p.left += @elem.width() + p = {} + switch position[0] + when 'b' + incr p, 'top', @elem.outerHeight() + when 't' + incr p, 'bottom', 0 + when 'l' + incr p, 'right', 0 + when 'r' + incr p, 'left', @elem.outerWidth() else throw "Unknown position: #{position}" #elem vs wrapper corrections - p.top += (elementPosition.top - mainPosition.top) unless navigator.userAgent.match /MSIE/ - p.left += elementPosition.left - mainPosition.left + unless navigator.userAgent.match /MSIE/ + incr p, 'top', (elementPosition.top - wrapperPosition.top) - #set user offset - p.top += @options.offsetY - p.left += @options.offsetX + incr p, 'left', elementPosition.left - wrapperPosition.left + + # console.log "corrent margin" + # for pos in ['top','right','bottom','left'] + # incr p, pos, @elem.css("margin-#{pos}"), false - @updateArrow p, position + #set user offset + # p.top += @options.offsetY + # p.left += @options.offsetX + + # @updateArrow p, position # if @setCSS # @container.stop().animate(p) @@ -344,7 +390,6 @@ class Notification getStyle: (name) -> name = @options.style unless name - name = 'bootstrap' if bootstrapDetected and not name name = 'default' unless name style = styles.user[name] throw "Missing style: #{name}" unless style @@ -379,7 +424,6 @@ class Notification else @text.empty().append(data) - @updatePosition() @show true @@ -438,13 +482,16 @@ $[pluginName].options = (options) -> $[pluginName].styles = (s) -> $.extend true, styles.user, s +$[pluginName].insertCSS = insertCSS + # $( ... ).pluginName( { .. } ) creates a cached instance on each $.fn[pluginName] = (data, options) -> $(@).each -> - inst = getAnchorElement($(@)).data className + inst = getAnchorElement($(@)).data(className) if inst inst.run data, options else new Notification $(@), data, options + @