updated docs and more

Gruntfile.coffee

@@ -34,7 +34,7 @@ module.exports = (grunt) ->
 
     concat:
       combined:
-        src: 'dist/**/*.js'
+        src: ['dist/<%= pkg.name %>.js', 'dist/styles/*.js']
         dest: 'dist/<%= pkg.name %>-combined.js'
 
     uglify:

README.md

@@ -1,4 +1,8 @@
 
 ### Notify.js - A simple, versatile notification library
 
+For documentation, downloads and demos:
+
 ## http://notifyjs.com
+
+

dist/notify.js

@@ -1,11 +1,11 @@
-/** Notify.js - v0.0.1 - 2013/06/05
+/** Notify.js - v0.0.1 - 2013/06/06
  * http://notifyjs.com/
  * Copyright (c) 2013 Jaime Pillora - MIT
  */
 (function(window,document,undefined) {
 'use strict';
 
-var Notification, addStyle, coreStyle, cornerElem, createElem, defaults, getAnchorElement, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns,
+var Notification, addStyle, coreStyle, createElem, defaults, getAnchorElement, globalAnchors, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns,
   __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
 pluginName = 'notify';
@@ -54,7 +54,7 @@ styles = {};
 coreStyle = {
   name: 'core',
   html: "<div class=\"" + pluginClassName + "-wrapper\">\n  <div class=\"" + pluginClassName + "-arrow\"></div>\n  <div class=\"" + pluginClassName + "-container\"></div>\n</div>",
-  css: "." + pluginClassName + "-corner {\n  position: fixed;\n  top: 0;\n  right: 0;\n  margin: 5px;\n  z-index: 1050;\n}\n\n." + pluginClassName + "-corner ." + pluginClassName + "-wrapper,\n." + pluginClassName + "-corner ." + pluginClassName + "-container {\n  position: relative;\n  display: block;\n  height: inherit;\n  width: inherit;\n}\n\n." + pluginClassName + "-wrapper {\n  z-index: 1;\n  position: absolute;\n  display: inline-block;\n  height: 0;\n  width: 0;\n}\n\n." + pluginClassName + "-container {\n  display: none;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n}\n\n." + pluginClassName + "-text {\n  position: relative;\n}\n\n." + pluginClassName + "-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"
+  css: "." + pluginClassName + "-corner {\n  position: fixed;\n  margin: 5px;\n  z-index: 1050;\n}\n\n." + pluginClassName + "-corner ." + pluginClassName + "-wrapper,\n." + pluginClassName + "-corner ." + pluginClassName + "-container {\n  position: relative;\n  display: block;\n  height: inherit;\n  width: inherit;\n}\n\n." + pluginClassName + "-wrapper {\n  z-index: 1;\n  position: absolute;\n  display: inline-block;\n  height: 0;\n  width: 0;\n}\n\n." + pluginClassName + "-container {\n  display: none;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n}\n\n." + pluginClassName + "-text {\n  position: relative;\n}\n\n." + pluginClassName + "-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"
 };
 
 stylePrefixes = {
@@ -62,18 +62,15 @@ stylePrefixes = {
 };
 
 addStyle = function(name, def) {
-  var cssText;
+  var cssText, _ref;
-  if (styles[name]) {
+  if ((_ref = styles[name]) != null ? _ref.cssElem : void 0) {
     if (window.console) {
       console.warn("" + pluginName + ": overwriting style '" + name + "'");
     }
-    $("#notify-" + name).remove();
+    styles[name].cssElem.remove();
   }
   def.name = name;
   styles[name] = def;
-  if (def.cssElem) {
-    return;
-  }
   cssText = "";
   if (def.classes) {
     $.each(def.classes, function(className, props) {
@@ -124,8 +121,7 @@ pluginOptions = {
   showDuration: 400,
   hideAnimation: 'slideUp',
   hideDuration: 200,
-  offsetY: 0,
+  gap: 5
-  offsetX: 0
 };
 
 inherit = function(a, b) {
@@ -143,7 +139,7 @@ createElem = function(tag) {
   return $("<" + tag + "></" + tag + ">");
 };
 
-cornerElem = createElem("div").addClass("" + pluginClassName + "-corner");
+globalAnchors = {};
 
 getAnchorElement = function(element) {
   var radios;
@@ -170,7 +166,7 @@ incr = function(obj, pos, val) {
   temp = pos;
   if (obj[opp] !== undefined) {
     pos = positions[opp.charAt(0)];
-    val *= -1;
+    val = -val;
   }
   if (obj[pos] === undefined) {
     obj[pos] = val;
@@ -212,9 +208,6 @@ Notification = (function() {
       this.elem = getAnchorElement(elem);
       this.elem.data(pluginClassName, this);
       this.elem.before(this.wrapper);
-    } else {
-      this.options.arrowShow = false;
-      cornerElem.prepend(this.wrapper);
     }
     this.container.hide();
     this.run(data);
@@ -235,11 +228,17 @@ Notification = (function() {
     return this.text.addClass("" + pluginClassName + "-text");
   };
 
-  Notification.prototype.show = function(show, callback) {
+  Notification.prototype.show = function(show, userCallback) {
-    var args, elems, fn, hidden;
+    var args, callback, elems, fn, hidden,
-    if (callback == null) {
+      _this = this;
-      callback = $.noop;
+    callback = function() {
-    }
+      if (!show && !_this.elem) {
+        _this.destroy();
+      }
+      if (userCallback) {
+        return userCallback();
+      }
+    };
     hidden = this.container.parent().parents(':hidden').length > 0;
     elems = this.container.add(this.arrow);
     args = [];
@@ -260,11 +259,33 @@ Notification = (function() {
     return elems[fn].apply(elems, args);
   };
 
-  Notification.prototype.updatePosition = function() {
+  Notification.prototype.setGlobalPosition = function(position) {
-    var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, style, wrapPos, _i, _len;
+    var align, anchor, css, key, main, pAlign, pMain;
-    if (!this.elem) {
+    pMain = position[0], pAlign = position[1];
-      return;
+    main = positions[pMain];
+    align = positions[pAlign];
+    key = position(pMain + "|" + pAlign);
+    anchor = globalAnchors[key];
+    if (!anchor) {
+      anchor = globalAnchors[key] = createElem("div");
+      css = {};
+      css[main] = 0;
+      if (align === 'middle') {
+        css.top = '45%';
+      } else if (align === 'center') {
+        css.left = '45%';
+      } else {
+        css[align] = 0;
+      }
+      anchor.css(css).addClass("" + pluginClassName + "-corner");
+      $("body").append(anchor);
     }
+    return anchor.prepend(this.wrapper);
+  };
+
+  Notification.prototype.setElementPosition = function(position) {
+    var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, wrapPos, _i, _j, _len, _len1, _ref;
+    pMain = position[0], pAlign = position[1], pArrow = position[2];
     elemPos = this.elem.position();
     elemH = this.elem.outerHeight();
     elemW = this.elem.outerWidth();
@@ -273,37 +294,31 @@ Notification = (function() {
     wrapPos = this.wrapper.position();
     contH = this.container.height();
     contW = this.container.width();
-    position = this.getPosition();
-    pMain = position[0];
-    pAlign = position[1];
-    pArrow = position[2] || pAlign;
     mainFull = positions[pMain];
     opp = opposites[pMain];
     oppFull = positions[opp];
     css = {};
     css[oppFull] = pMain === 'b' ? elemH : pMain === 'r' ? elemW : 0;
+    incr(css, 'top', elemPos.top - wrapPos.top);
     incr(css, 'left', elemPos.left - wrapPos.left);
-    margin = parseInt(this.elem.css("margin-left"), 10);
+    _ref = ['top', 'left'];
-    if (margin) {
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      incr(css, 'left', margin);
+      pos = _ref[_i];
-    }
+      margin = parseInt(this.elem.css("margin-" + pos), 10);
-    if (/^inline/.test(this.elem.css('display'))) {
+      if (margin) {
-      padding = parseInt(this.elem.css("padding-top"), 10);
+        incr(css, pos, margin);
-      if (padding) {
-        incr(css, 'top', -padding);
       }
     }
-    incr(css, 'top', this.options.offsetY);
+    gap = Math.max(0, this.options.gap - (this.options.arrowShow ? arrowSize : 0));
-    incr(css, 'left', this.options.offsetX);
+    incr(css, oppFull, gap);
-    style = this.getStyle();
     if (!this.options.arrowShow) {
       this.arrow.hide();
     } else {
       arrowSize = this.options.arrowSize;
       arrowCss = $.extend({}, css);
       arrowColor = this.userContainer.css("border-color") || this.userContainer.css("background-color") || 'white';
-      for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
+      for (_j = 0, _len1 = mainPositions.length; _j < _len1; _j++) {
-        pos = mainPositions[_i];
+        pos = mainPositions[_j];
         posFull = positions[pos];
         if (pos === opp) {
           continue;
@@ -349,10 +364,10 @@ Notification = (function() {
     if (pos.length === 1 || ((_ref1 = pos[0], __indexOf.call(vAligns, _ref1) >= 0) && (_ref2 = pos[1], __indexOf.call(hAligns, _ref2) < 0)) || ((_ref3 = pos[0], __indexOf.call(hAligns, _ref3) >= 0) && (_ref4 = pos[1], __indexOf.call(vAligns, _ref4) < 0))) {
       pos[1] = (_ref5 = pos[0], __indexOf.call(hAligns, _ref5) >= 0) ? 'm' : 'l';
     }
-    if (!this.options.autoReposition) {
+    if (pos.length === 2) {
-      return pos;
+      pos[2] = pos[1];
     }
-    throw "Not implemented";
+    return pos;
   };
 
   Notification.prototype.getStyle = function(name) {
@@ -386,7 +401,8 @@ Notification = (function() {
   };
 
   Notification.prototype.run = function(data, options) {
-    var _this = this;
+    var position,
+      _this = this;
     if ($.isPlainObject(options)) {
       $.extend(this.options, options);
     } else if ($.type(options) === 'string') {
@@ -398,13 +414,14 @@ Notification = (function() {
     } else if (!this.container && !data) {
       return;
     }
-    if ($.type(data) === 'string') {
+    this.text[this.rawHTML ? 'html' : 'text'](data);
-      this.text[this.rawHTML ? 'html' : 'text'](data);
-    } else {
-      this.text.empty().append(data);
-    }
     this.updateClasses();
-    this.updatePosition();
+    position = this.getPosition();
+    if (this.elem) {
+      this.setElementPosition(position);
+    } else {
+      this.setGlobalPosition(position);
+    }
     this.show(true);
     if (this.options.autoHide) {
       clearTimeout(this.autohideTimer);
@@ -415,10 +432,7 @@ Notification = (function() {
   };
 
   Notification.prototype.destroy = function() {
-    var _this = this;
+    return this.wrapper.remove();
-    return this.show(false, function() {
-      return _this.wrapper.remove();
-    });
   };
 
   return Notification;
@@ -455,15 +469,6 @@ $.extend($[pluginName], {
 });
 
 $(function() {
-  $("body").append(cornerElem);
-  $("link").each(function() {
-    var bootstrapDetected, src;
-    src = $(this).attr('href');
-    if (src.match(/bootstrap/)) {
-      bootstrapDetected = true;
-      return false;
-    }
-  });
   insertCSS(coreStyle.css).attr('data-notify-style', 'core');
   return $(document).on('click', "." + pluginClassName + "-wrapper", function() {
     var inst;

dist/styles/notify-bootstrap.js

@@ -1,6 +1,6 @@
 
 $.notify.addStyle("bootstrap", {
-  html: "<div>\n<span data-notify-text></span>\n</div>",
+  html: "<div>\n<span data-notify-text></span>\n<span data-notify-src></span>\n</div>",
   classes: {
     base: {
       "font-weight": "bold",

examples/inlines.html

@@ -0,0 +1,112 @@
+<html>
+<head>
+  <title></title>
+  <style type="text/css">
+    .z {
+      display: inline-block;
+    }
+
+    .a {
+      height: 50px;
+      width: 70px;
+      background: lightblue;
+    }
+
+    .b {
+      height: 100px;
+      width: 50px;
+      background: pink;
+    }
+
+    .c {
+      height: 20px;
+      width: 200px;
+      background: lightgreen;
+    }
+
+    hr {
+      margin: 25px 0 25px 0;
+    }
+
+  </style>
+</head>
+<body>
+
+  <hr/>
+
+  <div style="padding: 50px; margin: 50px; width: 592px;">
+    <div class="z a">a</div>
+    <div class="z b s">S</div>
+    <div class="z c">c</div>
+    <div class="z a">a</div>
+    <div class="z b">b</div>
+    <div class="z c t">T</div>
+    <div class="z a">a</div>
+    <div class="z b">b</div>
+    <div class="z c">c</div>
+  </div>
+
+  <hr/>
+
+  <div>
+    <div class="z b">b</div>
+    <span class="inline">some inline text</span>
+  </div>
+  
+  <hr/>
+
+  <div>
+    <span>some inline text</span>
+    <span class="inline" style="padding: 20px; border: thin solid pink;">and special padding</span>
+  </div>
+  
+  <hr/>
+
+  <div>
+    <span>some inline text</span>
+    <span class="inline" style="margin: 20px; border: thin solid pink;">and special margin</span>
+  </div>
+  
+  <hr/>
+
+  <div>
+    <span>some inline text</span>
+    <span class="inline" style="margin: 20px; padding: 20px; border: thin solid pink;">and special padding margin</span>
+  </div>
+  
+  <hr/>
+
+  <div>
+    <span>some inline block text</span>
+    <span class="inline" style="display: inline-block; margin: 20px; padding: 20px; border: thin solid pink;">and special padding margin</span>
+  </div>
+  
+  <hr/>
+
+  <div>
+    <canvas width="100px" height="100px"></canvas>
+    <span>some canvas</span>
+    <span class="inline" style="display: inline-block; margin: 20px; padding: 20px; border: thin solid pink;">and special padding margin</span>
+  </div>
+  
+  <hr/>
+
+
+
+
+
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+  <script src="../dist/notify.js"></script>
+  <script src="../dist/styles/notify-bootstrap.js"></script>
+  <script type="text/javascript">
+
+    $.notify.defaults({autoHide: false})
+    $(function() {
+      $(".s").notify("s", {position: "right"})
+      $(".t").notify("t", {position: "top"})
+      $(".inline").notify("inline!", {position: "right"})
+    });
+  </script>
+
+</body>
+</html>

examples/position.html

@@ -28,13 +28,15 @@
     var positions = ["top", "right", "bottom", "left"];
     var boxes = $(".boxes");
 
-    $.each(positions, function(i, p) {
+    $.notify.defaults({ arrowShow: false })
-      var box = $("<div class=\"box\">"+p+"</div>");
+    $(function() {
-      boxes.append($("<div class=\"wrapper\"/>").append(box));
+      $.each(positions, function(i, p) {
+        var box = $("<div class=\"box\">"+p+"</div>");
+        boxes.append($("<div class=\"wrapper\"/>").append(box));
 
-      setTimeout(function() {
         box.notify(p, {position: p+" center"});
-      }, 500)
+      });
+
     });
   </script>
 

src/notify.coffee

@@ -48,21 +48,16 @@ coreStyle =
       <div class="#{pluginClassName}-container"></div>
     </div>
   """
-
+    #   <div class="#{pluginClassName}-debug"></div>
-    # <div class="#{pluginClassName}Debug"></div>
+    # .#{pluginClassName}-debug {
-
-    # .#{pluginClassName}Debug {
     #   position: absolute;
     #   border: 3px solid red;
     #   height: 0;
     #   width: 0;
     # }
-
   css: """
     .#{pluginClassName}-corner {
       position: fixed;
-      top: 0;
-      right: 0;
       margin: 5px;
       z-index: 1050;
     }
@@ -106,16 +101,15 @@ stylePrefixes =
   "border-radius": ["-webkit-", "-moz-"]
 
 addStyle = (name, def) ->
-  if styles[name]
+
+  if styles[name]?.cssElem
     if window.console
       console.warn "#{pluginName}: overwriting style '#{name}'"
-    $("#notify-#{name}").remove()
+    styles[name].cssElem.remove()
 
   def.name = name
   styles[name] = def
 
-  return if def.cssElem
-
   cssText = ""
   if def.classes
     $.each def.classes, (className, props) ->
@@ -161,18 +155,13 @@ pluginOptions =
   arrowSize: 5
   elementPosition: 'bottom'
   globalPosition: 'top right'
-  # Default style
   style: 'bootstrap'
   className: 'error'
   showAnimation: 'slideDown'
   showDuration: 400
   hideAnimation: 'slideUp'
   hideDuration: 200
-  # Gap between main and element
+  gap: 5
-  offsetY: 0
-  offsetX: 0
-  #TODO add z-index watches
-  #parents:  { '.ui-dialog': 5001 }
 
 inherit = (a, b) ->
   F = () ->
@@ -190,8 +179,9 @@ defaults = (opts) ->
 createElem = (tag) ->
   $ "<#{tag}></#{tag}>"
 
-# container for element-less notifications
+
-cornerElem = createElem("div").addClass("#{pluginClassName}-corner")
+# references to global anchor positions
+globalAnchors = {}
 
 #gets first on n radios, and gets the fancy stylised input for hidden inputs
 getAnchorElement = (element) ->
@@ -218,7 +208,7 @@ incr = (obj, pos, val) ->
   #use the opposite if exists
   if obj[opp] isnt `undefined`
     pos = positions[opp.charAt(0)]
-    val *= -1
+    val = -val
 
   if obj[pos] is `undefined`
     obj[pos] = val
@@ -248,7 +238,7 @@ class Notification
     options = {className: options} if typeof options is 'string'
     @options = inherit pluginOptions, if $.isPlainObject(options) then options else {}
 
-    #load user html into @userContainer
+    #load style html into @userContainer
     @loadHTML()
 
     @wrapper = $(coreStyle.html)
@@ -264,10 +254,6 @@ class Notification
       @elem.data pluginClassName, @
       # add into dom above elem
       @elem.before @wrapper
-    else
-      # @options.autoHide = true
-      @options.arrowShow = false
-      cornerElem.prepend @wrapper
 
     @container.hide()
     @run(data)
@@ -284,7 +270,11 @@ class Notification
 
     @text.addClass "#{pluginClassName}-text"
 
-  show: (show, callback = $.noop) ->
+  show: (show, userCallback) ->
+
+    callback = =>
+      @destroy() if not show and not @elem
+      userCallback() if userCallback
 
     hidden = @container.parent().parents(':hidden').length > 0
 
@@ -308,8 +298,34 @@ class Notification
 
     elems[fn].apply elems, args
 
-  updatePosition: ->
+
-    return unless @elem
+  setGlobalPosition: (position) ->
+
+    [pMain, pAlign] = position
+
+    main = positions[pMain]
+    align = positions[pAlign]
+
+    key = position pMain+"|"+pAlign
+    anchor = globalAnchors[key]
+    unless anchor
+      anchor = globalAnchors[key] = createElem("div")
+      css = {}
+      css[main] = 0
+      if align is 'middle'
+        css.top = '45%'
+      else if align is 'center'
+        css.left = '45%'
+      else
+        css[align] = 0
+      anchor.css(css).addClass("#{pluginClassName}-corner")
+      $("body").append anchor
+
+    anchor.prepend @wrapper
+
+  setElementPosition: (position) ->
+
+    [pMain, pAlign, pArrow] = position
 
     #grab some dimensions
     elemPos = @elem.position()
@@ -321,12 +337,6 @@ class Notification
     contH = @container.height()
     contW = @container.width()
 
-    #get user defined position
-    position = @getPosition()
-
-    pMain  = position[0]
-    pAlign = position[1]
-    pArrow = position[2] or pAlign
 
     #start calculations
     mainFull = positions[pMain]
@@ -343,21 +353,21 @@ class Notification
 
     #correct for elem-wrapper offset
     # unless navigator.userAgent.match /MSIE/
-    #   incr css, 'top', (elemPos.top - wrapPos.top)
+    incr css, 'top', elemPos.top - wrapPos.top
     incr css, 'left', elemPos.left - wrapPos.left
 
-    #correct for left margin
+    #correct for margins
-    margin = parseInt @elem.css("margin-left"), 10
+    for pos in ['top', 'left']
-    incr css, 'left', margin if margin
+      margin = parseInt @elem.css("margin-#{pos}"), 10
-    #correct for inline top padding
+      incr css, pos, margin if margin
-    if /^inline/.test @elem.css('display')
+      #correct for paddings (only for inline)
-      padding = parseInt @elem.css("padding-top"), 10
+      # if /^inline/.test @elem.css('display')
-      incr css, 'top', -padding if padding
+      #   padding = parseInt @elem.css("padding-#{pos}"), 10
-    #user defined offset
+      #   incr css, pos, -padding if padding
-    incr css, 'top', @options.offsetY
-    incr css, 'left', @options.offsetX
 
-    style = @getStyle()
+    #add gap
+    gap = Math.max 0, @options.gap - if @options.arrowShow then arrowSize else 0
+    incr css, oppFull, gap
 
     #calculate arrow
     if not @options.arrowShow
@@ -408,13 +418,10 @@ class Notification
        (pos[0] in hAligns and pos[1] not in vAligns)
       pos[1] = if pos[0] in hAligns then 'm' else 'l'
 
-    unless @options.autoReposition
+    if pos.length is 2
-      return pos
+      pos[2] = pos[1]
 
-    # if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
+    return pos
-    #   return 'right'
-    # return 'bottom'
-    throw "Not implemented"
 
   getStyle: (name) ->
     name = @options.style unless name
@@ -436,7 +443,6 @@ class Notification
 
     @userContainer.attr 'class', classes
 
-
   #run plugin
   run: (data, options) ->
     #update options
@@ -453,16 +459,17 @@ class Notification
       return
 
     #update content
-    if $.type(data) is 'string'
+    @text[if @rawHTML then 'html' else 'text'](data)
-      @text[if @rawHTML then 'html' else 'text'](data)
-    else
-      @text.empty().append(data)
 
     #set styles
     @updateClasses()
 
-    #position
+    #positioning
-    @updatePosition()
+    position = @getPosition()
+    if @elem
+      @setElementPosition position
+    else
+      @setGlobalPosition position
 
     @show true
 
@@ -474,8 +481,7 @@ class Notification
       , @options.autoHideDelay
 
   destroy: ->
-    @show false, =>
+    @wrapper.remove()
-      @wrapper.remove()
 
 
 # ================================
@@ -502,21 +508,11 @@ $.fn[pluginName] = (data, options) ->
       new Notification $(@), data, options
   @
 
-#extra
+#extra methods
 $.extend $[pluginName], { defaults, addStyle }
 
 #when ready
 $ ->
-  #corner notification container
-  $("body").append cornerElem
-
-  #auto-detect bootstrap
-  $("link").each ->
-    src =  $(@).attr 'href'
-    if src.match /bootstrap/
-      bootstrapDetected = true
-      return false
-
   #insert default style
   insertCSS(coreStyle.css).attr('data-notify-style', 'core')
 

src/styles/notify-bootstrap.coffee

@@ -3,6 +3,7 @@ $.notify.addStyle "bootstrap",
   html: """
     <div>
     <span data-notify-text></span>
+    <span data-notify-src></span>
     </div>
   """
   classes: