positioning and hiding correctly

dist/notify.js

@@ -21,7 +21,7 @@ arrowDirs = {
 styles = {
   core: {
     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: {
     "default": {
@@ -117,7 +117,7 @@ Notification = (function() {
     this.loadCSS();
     this.loadHTML();
     this.wrapper = $(styles.core.html);
-    this.wrapper.data(pluginName, this);
+    this.wrapper.data(className, this);
     this.arrow = this.wrapper.find("." + className + "Arrow");
     this.container = this.wrapper.find("." + className + "Container");
     this.container.append(this.userContainer);
@@ -125,7 +125,7 @@ Notification = (function() {
       this.elementType = elem.attr('type');
       this.originalElement = elem;
       this.elem = getAnchorElement(elem);
-      this.elem.data(pluginName, this);
+      this.elem.data(className, this);
       this.elem.before(this.wrapper);
     } else {
       this.options.arrowShow = false;
@@ -155,73 +155,78 @@ Notification = (function() {
   };
 
   Notification.prototype.show = function(show) {
-    var hidden;
+    var elems, hidden;
     hidden = this.container.parent().parents(':hidden').length > 0;
+    elems = this.container.add(this.arrow);
     if (hidden && show) {
-      this.container.show();
+      elems.show();
     }
     if (hidden && !show) {
-      this.container.hide();
+      elems.hide();
     }
     if (!hidden && show) {
-      this.container[this.options.showAnimation](this.options.showDuration);
+      elems[this.options.showAnimation](this.options.showDuration);
     }
     if (!hidden && !show) {
-      return this.container[this.options.hideAnimation](this.options.hideDuration);
+      return elems[this.options.hideAnimation](this.options.hideDuration);
     }
   };
 
   Notification.prototype.updatePosition = function() {
-    var arrowPosition, elementPosition, height, left, mainPosition, position;
+    var elementPosition, mainPosition, p, position;
     if (!this.elem) {
       return;
     }
     elementPosition = this.elem.position();
     mainPosition = this.wrapper.position();
     position = this.getPosition();
-    arrowPosition = this.updateArrow(position);
-    left = 0;
-    height = 0;
+    p = {
+      top: 0,
+      left: 0
+    };
     switch (position) {
       case 'bottom':
-        height = this.elem.outerHeight();
+        p.top += this.elem.outerHeight();
         break;
       case 'right':
-        left = this.elem.width();
+        p.left += this.elem.width();
         break;
       default:
         throw "Unknown position: " + position;
     }
-    left += elementPosition.left - mainPosition.left;
     if (!navigator.userAgent.match(/MSIE/)) {
-      height += elementPosition.top - mainPosition.top;
+      p.top += elementPosition.top - mainPosition.top;
     }
-    return this.container.css({
-      top: height + this.options.offsetY + arrowPosition.top,
-      left: left + this.options.offsetX + arrowPosition.left
-    });
+    p.left += elementPosition.left - mainPosition.left;
+    p.top += this.options.offsetY;
+    p.left += this.options.offsetX;
+    this.updateArrow(p, position);
+    return this.container.css(p);
   };
 
-  Notification.prototype.updateArrow = function(position) {
-    var d, dir, offsets, size;
-    offsets = {
-      top: 0,
-      left: 0
-    };
+  Notification.prototype.updateArrow = function(p, position) {
+    var d, dir, size;
     if (!(this.options.arrowShow && this.elementType !== 'radio')) {
       this.arrow.hide();
-      return offsets;
+      return;
     }
     dir = arrowDirs[position];
     size = this.options.arrowSize;
     this.arrow.css('border-' + position, size + 'px solid ' + this.getColor());
+    this.arrow.css(p);
     for (d in arrowDirs) {
       if (d !== dir && d !== position) {
         this.arrow.css('border-' + d, size + 'px solid transparent');
       }
     }
-    this.arrow.show();
-    return offsets;
+    switch (position) {
+      case 'bottom':
+        p.top += size;
+        break;
+      case 'right':
+        p.left += size;
+    }
+    return this.arrow.show();
   };
 
   Notification.prototype.getPosition = function() {
@@ -303,7 +308,7 @@ $(function() {
   $("link").each(function() {
     var src;
     src = $(this).attr('href');
-    if (src.match(/bootstrap[^\/]*\.css/)) {
+    if (src.match(/bootstrap/)) {
       bootstrapDetected = true;
       return false;
     }
@@ -311,7 +316,7 @@ $(function() {
   insertCSS(styles.core);
   return $(document).on('click', "." + className + "Wrapper", function() {
     var inst;
-    inst = $(this).data(pluginName);
+    inst = $(this).data(className);
     if (inst) {
       return inst.show(false);
     }
@@ -332,14 +337,14 @@ $[pluginName].options = function(options) {
   return $.extend(pluginOptions, options);
 };
 
-$[pluginName].addStyle = function(s) {
+$[pluginName].styles = function(s) {
   return $.extend(true, styles.user, s);
 };
 
 $.fn[pluginName] = function(data, options) {
   return $(this).each(function() {
     var inst;
-    inst = getAnchorElement($(this)).data(pluginName);
+    inst = getAnchorElement($(this)).data(className);
     if (inst) {
       return inst.run(data, options);
     } else {

dist/notify.min.js

@@ -1,4 +1,4 @@
 /** Notify.js - v0.0.1 - 2013/04/05
  * http://notifyjs.com/
  * 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