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

positioning and hiding correctly

Browse Source
This commit is contained in:
Jaime Pillora committed 2013-04-05 12:26:27 +11:00
1 parent 1d9c3f9ce9
commit d22c0c7422
3 files changed
+85 -65
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

dist/notify.js
Vendored
+38 -33
View File
@@ -21,7 +21,7 @@ arrowDirs = {
styles = { styles = {
core: { core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Arrow\"></div>\n <div class=\"" + className + "Container\"></div>\n</div>", html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Arrow\"></div>\n <div class=\"" + className + "Container\"></div>\n</div>",
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: " + (2 + (document.documentMode === 5 ? size * -4 : 0)) + ";\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 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: " + (2 + (document.documentMode === 5 ? size * -4 : 0)) + "px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\n"
}, },
user: { user: {
"default": { "default": {
@@ -117,7 +117,7 @@ Notification = (function() {
this.loadCSS(); this.loadCSS();
this.loadHTML(); this.loadHTML();
this.wrapper = $(styles.core.html); this.wrapper = $(styles.core.html);
this.wrapper.data(pluginName, this); this.wrapper.data(className, this);
this.arrow = this.wrapper.find("." + className + "Arrow"); this.arrow = this.wrapper.find("." + className + "Arrow");
this.container = this.wrapper.find("." + className + "Container"); this.container = this.wrapper.find("." + className + "Container");
this.container.append(this.userContainer); this.container.append(this.userContainer);
@@ -125,7 +125,7 @@ Notification = (function() {
this.elementType = elem.attr('type'); this.elementType = elem.attr('type');
this.originalElement = elem; this.originalElement = elem;
this.elem = getAnchorElement(elem); this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this); this.elem.data(className, this);
this.elem.before(this.wrapper); this.elem.before(this.wrapper);
} else { } else {
this.options.arrowShow = false; this.options.arrowShow = false;
@@ -155,73 +155,78 @@ Notification = (function() {
}; };
Notification.prototype.show = function(show) { Notification.prototype.show = function(show) {
var hidden; var elems, hidden;
hidden = this.container.parent().parents(':hidden').length > 0; hidden = this.container.parent().parents(':hidden').length > 0;
elems = this.container.add(this.arrow);
if (hidden && show) { if (hidden && show) {
this.container.show(); elems.show();
} }
if (hidden && !show) { if (hidden && !show) {
this.container.hide(); elems.hide();
} }
if (!hidden && show) { if (!hidden && show) {
this.container[this.options.showAnimation](this.options.showDuration); elems[this.options.showAnimation](this.options.showDuration);
} }
if (!hidden && !show) { if (!hidden && !show) {
return this.container[this.options.hideAnimation](this.options.hideDuration); return elems[this.options.hideAnimation](this.options.hideDuration);
} }
}; };
Notification.prototype.updatePosition = function() { Notification.prototype.updatePosition = function() {
var arrowPosition, elementPosition, height, left, mainPosition, position; var elementPosition, mainPosition, p, position;
if (!this.elem) { if (!this.elem) {
return; return;
} }
elementPosition = this.elem.position(); elementPosition = this.elem.position();
mainPosition = this.wrapper.position(); mainPosition = this.wrapper.position();
position = this.getPosition(); position = this.getPosition();
arrowPosition = this.updateArrow(position); p = {
left = 0; top: 0,
height = 0; left: 0
};
switch (position) { switch (position) {
case 'bottom': case 'bottom':
height = this.elem.outerHeight(); p.top += this.elem.outerHeight();
break; break;
case 'right': case 'right':
left = this.elem.width(); p.left += this.elem.width();
break; break;
default: default:
throw "Unknown position: " + position; throw "Unknown position: " + position;
} }
left += elementPosition.left - mainPosition.left;
if (!navigator.userAgent.match(/MSIE/)) { if (!navigator.userAgent.match(/MSIE/)) {
height += elementPosition.top - mainPosition.top; p.top += elementPosition.top - mainPosition.top;
} }
return this.container.css({ p.left += elementPosition.left - mainPosition.left;
top: height + this.options.offsetY + arrowPosition.top, p.top += this.options.offsetY;
left: left + this.options.offsetX + arrowPosition.left p.left += this.options.offsetX;
}); this.updateArrow(p, position);
return this.container.css(p);
}; };
Notification.prototype.updateArrow = function(position) { Notification.prototype.updateArrow = function(p, position) {
var d, dir, offsets, size; var d, dir, size;
offsets = {
top: 0,
left: 0
};
if (!(this.options.arrowShow && this.elementType !== 'radio')) { if (!(this.options.arrowShow && this.elementType !== 'radio')) {
this.arrow.hide(); this.arrow.hide();
return offsets; return;
} }
dir = arrowDirs[position]; dir = arrowDirs[position];
size = this.options.arrowSize; size = this.options.arrowSize;
this.arrow.css('border-' + position, size + 'px solid ' + this.getColor()); this.arrow.css('border-' + position, size + 'px solid ' + this.getColor());
this.arrow.css(p);
for (d in arrowDirs) { for (d in arrowDirs) {
if (d !== dir && d !== position) { if (d !== dir && d !== position) {
this.arrow.css('border-' + d, size + 'px solid transparent'); this.arrow.css('border-' + d, size + 'px solid transparent');
} }
} }
this.arrow.show(); switch (position) {
return offsets; case 'bottom':
p.top += size;
break;
case 'right':
p.left += size;
}
return this.arrow.show();
}; };
Notification.prototype.getPosition = function() { Notification.prototype.getPosition = function() {
@@ -303,7 +308,7 @@ $(function() {
$("link").each(function() { $("link").each(function() {
var src; var src;
src = $(this).attr('href'); src = $(this).attr('href');
if (src.match(/bootstrap[^\/]*\.css/)) { if (src.match(/bootstrap/)) {
bootstrapDetected = true; bootstrapDetected = true;
return false; return false;
} }
@@ -311,7 +316,7 @@ $(function() {
insertCSS(styles.core); insertCSS(styles.core);
return $(document).on('click', "." + className + "Wrapper", function() { return $(document).on('click', "." + className + "Wrapper", function() {
var inst; var inst;
inst = $(this).data(pluginName); inst = $(this).data(className);
if (inst) { if (inst) {
return inst.show(false); return inst.show(false);
} }
@@ -332,14 +337,14 @@ $[pluginName].options = function(options) {
return $.extend(pluginOptions, options); return $.extend(pluginOptions, options);
}; };
$[pluginName].addStyle = function(s) { $[pluginName].styles = function(s) {
return $.extend(true, styles.user, s); return $.extend(true, styles.user, s);
}; };
$.fn[pluginName] = function(data, options) { $.fn[pluginName] = function(data, options) {
return $(this).each(function() { return $(this).each(function() {
var inst; var inst;
inst = getAnchorElement($(this)).data(pluginName); inst = getAnchorElement($(this)).data(className);
if (inst) { if (inst) {
return inst.run(data, options); return inst.run(data, options);
} else { } else {
dist/notify.min.js
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/** Notify.js - v0.0.1 - 2013/04/05 /** Notify.js - v0.0.1 - 2013/04/05
* http://notifyjs.com/ * http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT * Copyright (c) 2013 Jaime Pillora - MIT
*/(function(t,n){"use strict";var i,o,e,r,s,a,p,h,d,l,u,c;l="notify",r="__"+l,o={top:"bottom",bottom:"top",left:"right",right:"left"},c={core:{html:'<div class="'+r+'Wrapper">\n <div class="'+r+'Arrow"></div>\n <div class="'+r+'Container"></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."+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}\n\n."+r+"Arrow {\n margin-top: "+(2+(5===n.documentMode?-4*size:0))+";\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\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 data-notify="text"></strong>\n</div>',css:"."+r+"Bootstrap {\n white-space: nowrap;\n margin-bottom: 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"}}}},e=!1,u={autoHide:!1,autoHideDelay:2e3,arrowShow:!0,arrowSize:5,position:null,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},a=function(t){return $(n.createElement(t))},h=function(t,n){var i;return i=function(){},i.prototype=t,$.extend(!0,new i,n)},s=a("div").addClass(""+r+"Corner"),p=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},d=function(t){var n;if(t&&t.css)return n=t.cssElem,n?n.html(t.css):(n=a("style").attr("type","text/css").html(t.css),$("head").append(n),t.cssElem=n)},i=function(){function n(t,n,i){"string"==typeof i&&(i={color:i}),this.options=h(u,$.isPlainObject(i)?i:{}),this.loadCSS(),this.loadHTML(),this.wrapper=$(c.core.html),this.wrapper.data(l,this),this.arrow=this.wrapper.find("."+r+"Arrow"),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=p(t),this.elem.data(l,this),this.elem.before(this.wrapper)):(this.options.arrowShow=!1,s.prepend(this.wrapper)),this.container.hide(),this.run(n)}return n.prototype.loadCSS=function(t){var n;return t||(n=this.options.style,t=this.getStyle(n)),d(t)},n.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")},n.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.optiLine truncated */(function(t,n){"use strict";var i,o,e,r,s,a,p,h,d,l,u,c;l="notify",r="__"+l,o={top:"bottom",bottom:"top",left:"right",right:"left"},c={core:{html:'<div class="'+r+'Wrapper">\n <div class="'+r+'Arrow"></div>\n <div class="'+r+'Container"></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."+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}\n\n."+r+"Arrow {\n margin-top: "+(2+(5===n.documentMode?-4*size:0))+"px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\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 data-notify="text"></strong>\n</div>',css:"."+r+"Bootstrap {\n white-space: nowrap;\n margin-bottom: 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"}}}},e=!1,u={autoHide:!1,autoHideDelay:2e3,arrowShow:!0,arrowSize:5,position:null,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},a=function(t){return $(n.createElement(t))},h=function(t,n){var i;return i=function(){},i.prototype=t,$.extend(!0,new i,n)},s=a("div").addClass(""+r+"Corner"),p=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},d=function(t){var n;if(t&&t.css)return n=t.cssElem,n?n.html(t.css):(n=a("style").attr("type","text/css").html(t.css),$("head").append(n),t.cssElem=n)},i=function(){function n(t,n,i){"string"==typeof i&&(i={color:i}),this.options=h(u,$.isPlainObject(i)?i:{}),this.loadCSS(),this.loadHTML(),this.wrapper=$(c.core.html),this.wrapper.data(r,this),this.arrow=this.wrapper.find("."+r+"Arrow"),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=p(t),this.elem.data(r,this),this.elem.before(this.wrapper)):(this.options.arrowShow=!1,s.prepend(this.wrapper)),this.container.hide(),this.run(n)}return n.prototype.loadCSS=function(t){var n;return t||(n=this.options.style,t=this.getStyle(n)),d(t)},n.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")},n.prototype.show=function(t){var n,i;return i=this.container.parent().parents(":hidden").length>0,n=this.container.add(this.arrow),i&&t&&n.show(),i&&!t&&n.hide(),!i&&t&&n[this.options.showAnimation](this.options.showDuration),i||t?undefined:n[this.options.hideAnimation](this.options.hideDuratioLine truncated
src/notify.coffee
+46 -31
View File
@@ -57,7 +57,7 @@ styles =
} }
.#{className}Arrow { .#{className}Arrow {
margin-top: #{2 + (if document.documentMode is 5 then (size*-4) else 0)}; margin-top: #{2 + (if document.documentMode is 5 then (size*-4) else 0)}px;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
margin-left: 10px; margin-left: 10px;
@@ -190,7 +190,7 @@ class Notification
@loadHTML() @loadHTML()
@wrapper = $(styles.core.html) @wrapper = $(styles.core.html)
@wrapper.data pluginName, @ @wrapper.data className, @
@arrow = @wrapper.find ".#{className}Arrow" @arrow = @wrapper.find ".#{className}Arrow"
@container = @wrapper.find ".#{className}Container" @container = @wrapper.find ".#{className}Container"
@container.append @userContainer @container.append @userContainer
@@ -199,7 +199,7 @@ class Notification
@elementType = elem.attr('type') @elementType = elem.attr('type')
@originalElement = elem @originalElement = elem
@elem = getAnchorElement(elem) @elem = getAnchorElement(elem)
@elem.data pluginName, @ @elem.data className, @
# add into dom above elem # add into dom above elem
@elem.before @wrapper @elem.before @wrapper
else else
@@ -226,11 +226,16 @@ class Notification
@text.addClass "#{className}Text" @text.addClass "#{className}Text"
show: (show) -> show: (show) ->
hidden = @container.parent().parents(':hidden').length > 0 hidden = @container.parent().parents(':hidden').length > 0
@container.show() if hidden and show
@container.hide() if hidden and not show elems = @container.add @arrow
@container[@options.showAnimation] @options.showDuration if not hidden and show elems.show() if hidden and show
@container[@options.hideAnimation] @options.hideDuration if not hidden and not show elems.hide() if hidden and not show
elems[@options.showAnimation] @options.showDuration if not hidden and show
elems[@options.hideAnimation] @options.hideDuration if not hidden and not show
updatePosition: -> updatePosition: ->
return unless @elem return unless @elem
@@ -240,47 +245,57 @@ class Notification
# #
position = @getPosition() position = @getPosition()
arrowPosition = @updateArrow(position)
#start calculations #start calculations
left = 0 p =
height = 0 top: 0
left: 0
switch position switch position
when 'bottom' when 'bottom'
height = @elem.outerHeight() p.top += @elem.outerHeight()
when 'right' when 'right'
left = @elem.width() p.left += @elem.width()
else else
throw "Unknown position: #{position}" throw "Unknown position: #{position}"
#elem vs wrapper corrections #elem vs wrapper corrections
left += elementPosition.left - mainPosition.left p.top += (elementPosition.top - mainPosition.top) unless navigator.userAgent.match /MSIE/
height += (elementPosition.top - mainPosition.top) unless navigator.userAgent.match /MSIE/ p.left += elementPosition.left - mainPosition.left
#set with user offset, with arrow offet #set user offset
@container.css p.top += @options.offsetY
top: height + @options.offsetY + arrowPosition.top p.left += @options.offsetX
left: left + @options.offsetX + arrowPosition.left
updateArrow: (position) -> @updateArrow p, position
offsets = {top: 0, left: 0} # if @setCSS
# @container.stop().animate(p)
# else
@container.css p
# @setCSS = true
updateArrow: (p, position) ->
unless @options.arrowShow and @elementType isnt 'radio' unless @options.arrowShow and @elementType isnt 'radio'
@arrow.hide() @arrow.hide()
return offsets return
dir = arrowDirs[position] dir = arrowDirs[position]
size = @options.arrowSize size = @options.arrowSize
@arrow.css 'border-' + position, size + 'px solid ' + @getColor() @arrow.css 'border-' + position, size + 'px solid ' + @getColor()
@arrow.css p
for d of arrowDirs for d of arrowDirs
if d isnt dir and d isnt position if d isnt dir and d isnt position
@arrow.css 'border-' + d, size + 'px solid transparent' @arrow.css 'border-' + d, size + 'px solid transparent'
@arrow.show() switch position
offsets when 'bottom'
p.top += size
when 'right'
p.left += size
@arrow.show()
getPosition: -> getPosition: ->
return @options.position if @options.position return @options.position if @options.position
@@ -343,22 +358,24 @@ class Notification
@show false @show false
, @options.autoHideDelay , @options.autoHideDelay
#when ready, bind permanent hide listener #when ready
$ -> $ ->
#corner notification container
$("body").append cornerElem $("body").append cornerElem
#auto-detect bootstrap #auto-detect bootstrap
$("link").each -> $("link").each ->
src = $(@).attr 'href' src = $(@).attr 'href'
if src.match /bootstrap[^\/]*\.css/ if src.match /bootstrap/
bootstrapDetected = true bootstrapDetected = true
return false return false
#add core styles #add core styles
insertCSS styles.core insertCSS styles.core
#watch all notifications clicks #watch all notifications clicks
$(document).on 'click', ".#{className}Wrapper", -> $(document).on 'click', ".#{className}Wrapper", ->
inst = $(@).data pluginName inst = $(@).data className
inst.show false if inst inst.show false if inst
# publicise jquery plugin # publicise jquery plugin
@@ -373,19 +390,17 @@ $[pluginName] = (elem, data, options) ->
data = elem data = elem
new Notification null, data, options new Notification null, data, options
# publicise options method # publicise methods
$[pluginName].options = (options) -> $[pluginName].options = (options) ->
$.extend pluginOptions, options $.extend pluginOptions, options
$[pluginName].addStyle = (s) -> $[pluginName].styles = (s) ->
$.extend true, styles.user, s $.extend true, styles.user, s
# $( ... ).pluginName( { .. } ) creates a cached instance on each # $( ... ).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] = (data, options) -> $.fn[pluginName] = (data, options) ->
$(@).each -> $(@).each ->
inst = getAnchorElement($(@)).data pluginName inst = getAnchorElement($(@)).data className
if inst if inst
inst.run data, options inst.run data, options
else else