added multiple inputs

dist/notify-combined.js

@@ -1,17 +1,19 @@
-/** Notify.js - v0.0.1 - 2013/06/21
+/** Notify.js - v0.3.1 - 2013/07/05
  * http://notifyjs.com/
  * Copyright (c) 2013 Jaime Pillora - MIT
  */
 (function(window,document,$,undefined) {
 'use strict';
 
-var Notification, addStyle, coreStyle, createElem, defaults, encode, getAnchorElement, getStyle, globalAnchors, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns,
+var Notification, addStyle, blankFieldName, coreStyle, createElem, defaults, encode, find, findFields, getAnchorElement, getStyle, 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';
 
 pluginClassName = pluginName + 'js';
 
+blankFieldName = pluginName + "!blank";
+
 positions = {
   t: 'top',
   m: 'middle',
@@ -54,7 +56,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  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  margin: 3px;\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  margin: 3px;\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[data-notify-text],[data-notify-html] {\n  position: relative;\n}\n\n." + pluginClassName + "-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"
 };
 
 stylePrefixes = {
@@ -66,13 +68,16 @@ getStyle = function(name) {
 };
 
 addStyle = function(name, def) {
-  var cssText, _ref;
+  var cssText, elem, fields, _ref;
   if (!name) {
     throw "Missing Style name";
   }
   if (!def) {
     throw "Missing Style definition";
   }
+  if (!def.html) {
+    throw "Missing Style HTML";
+  }
   if ((_ref = styles[name]) != null ? _ref.cssElem : void 0) {
     if (window.console) {
       console.warn("" + pluginName + ": overwriting style '" + name + "'");
@@ -99,11 +104,15 @@ addStyle = function(name, def) {
   if (def.css) {
     cssText += "/* styles for " + def.name + " */\n" + def.css;
   }
-  if (!cssText) {
+  if (cssText) {
-    return;
+    def.cssElem = insertCSS(cssText);
+    def.cssElem.attr('id', "notify-" + def.name);
   }
-  def.cssElem = insertCSS(cssText);
+  fields = {};
-  return def.cssElem.attr('id', "notify-" + def.name);
+  elem = $(def.html);
+  findFields('html', elem, fields);
+  findFields('text', elem, fields);
+  return def.fields = fields;
 };
 
 insertCSS = function(cssText) {
@@ -119,6 +128,30 @@ insertCSS = function(cssText) {
   return elem;
 };
 
+findFields = function(type, elem, fields) {
+  var attr;
+  if (type !== 'html') {
+    type = 'text';
+  }
+  attr = "data-notify-" + type;
+  return find(elem, "[" + attr + "]").each(function() {
+    var name;
+    name = $(this).attr(attr);
+    if (!name) {
+      name = blankFieldName;
+    }
+    return fields[name] = type;
+  });
+};
+
+find = function(elem, selector) {
+  if (elem.is(selector)) {
+    return elem;
+  } else {
+    return elem.find(selector);
+  }
+};
+
 pluginOptions = {
   clickToHide: true,
   autoHide: true,
@@ -235,15 +268,7 @@ Notification = (function() {
     var style;
     style = this.getStyle();
     this.userContainer = $(style.html);
-    this.text = this.userContainer.find('[data-notify-text]');
+    return this.userFields = style.fields;
-    if (this.text.length === 0) {
-      this.text = this.userContainer.find('[data-notify-html]');
-      this.rawHTML = true;
-    }
-    if (this.text.length === 0) {
-      throw "style: '" + name + "' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute";
-    }
-    return this.text.addClass("" + pluginClassName + "-text");
   };
 
   Notification.prototype.show = function(show, userCallback) {
@@ -421,7 +446,8 @@ Notification = (function() {
   };
 
   Notification.prototype.run = function(data, options) {
-    var _this = this;
+    var d, datas, name, type, value,
+      _this = this;
     if ($.isPlainObject(options)) {
       $.extend(this.options, options);
     } else if ($.type(options) === 'string') {
@@ -433,13 +459,27 @@ Notification = (function() {
     } else if (!this.container && !data) {
       return;
     }
-    if (!this.rawHTML) {
+    datas = {};
-      data = encode(data);
+    if ($.isPlainObject(data)) {
-      if (this.options.breakNewLines) {
+      datas = data;
-        data = data.replace(/\n/g, '<br/>');
+    } else {
+      datas[blankFieldName] = data;
+    }
+    for (name in datas) {
+      d = datas[name];
+      type = this.userFields[name];
+      if (!type) {
+        continue;
       }
+      if (type === 'text') {
+        d = encode(d);
+        if (this.options.breakNewLines) {
+          d = d.replace(/\n/g, '<br/>');
+        }
+      }
+      value = name === blankFieldName ? '' : '=' + name;
+      find(this.userContainer, "[data-notify-" + type + value + "]").html(d);
     }
-    this.text.html(data);
     this.updateClasses();
     if (this.elem) {
       this.setElementPosition();

dist/notify-combined.min.js

@@ -1,5 +1,5 @@
-/** Notify.js - v0.0.1 - 2013/06/21
+/** Notify.js - v0.3.1 - 2013/07/05
  * http://notifyjs.com/
  * Copyright (c) 2013 Jaime Pillora - MIT
  */
-(function(t,i,e,n){"use strict";var o,r,s,a,l,h,c,p,u,d,A,f,m,w,g,y,b,v,x,C,E,S,H,M,D=[].indexOf||function(t){for(var i=0,e=this.length;e>i;i++)if(i in this&&this[i]===t)return i;return-1};v="notify",b=v+"js",C={t:"top",m:"middle",b:"bottom",l:"left",c:"center",r:"right"},d=["l","c","r"],M=["t","m","b"],w=["t","b","l","r"],g={t:"b",m:null,b:"t",l:"r",c:null,r:"l"},y=function(t){var i;return i=[],e.each(t.split(/\W+/),function(t,e){var o;return o=e.toLowerCase().charAt(0),C[o]?i.push(o):n}),i},H={},s={name:"core",html:'<div class="'+b+'-wrapper">\n  <div class="'+b+'-arrow"></div>\n  <div class="'+b+'-container"></div>\n</div>',css:"."+b+"-corner {\n  position: fixed;\n  margin: 5px;\n  z-index: 1050;\n}\n\n."+b+"-corner ."+b+"-wrapper,\n."+b+"-corner ."+b+"-container {\n  position: relative;\n  display: block;\n  height: inherit;\n  width: inherit;\n  margin: 3px;\n}\n\n."+b+"-wrapper {\n  z-index: 1;\n  position: absolute;\n  display: inline-block;\n  height: 0;\n  width: 0;\n}\n\n."+b+"-container {\n  display: none;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n}\n\n."+b+"-text {\n  position: relative;\n}\n\n."+b+"-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"},S={"border-radius":["-webkit-","-moz-"]},p=function(t){return H[t]},r=function(i,o){var r,s;if(!i)throw"Missing Style name";if(!o)throw"Missing Style definition";return(null!=(s=H[i])?s.cssElem:void 0)&&(t.console&&console.warn(""+v+": overwriting style '"+i+"'"),H[i].cssElem.remove()),o.name=i,H[i]=o,r="",o.classes&&e.each(o.classes,function(t,i){return r+="."+b+"-"+o.name+"-"+t+" {\n",e.each(i,function(t,i){return S[t]&&e.each(S[t],function(e,n){return r+="  "+n+t+": "+i+";\n"}),r+="  "+t+": "+i+";\n"}),r+="}\n"}),o.css&&(r+="/* styles for "+o.name+" */\n"+o.css),r?(o.cssElem=m(r),o.cssElem.attr("id","notify-"+o.name)):n},m=function(t){var i;i=a("style"),i.attr("type","text/css"),e("head").append(i);try{i.html(t)}catch(n){i[0].styleSheet.cssText=t}return i},x={clickToHide:!0,autoHide:!0,autoHideDelay:5e3,arrowShow:!0,arrowSize:5,breakNewLines:!0,elementPosition:"bottom",globalPosition:"top right",style:"bootstrap",className:"error",showAnimation:"slideDown",showDuration:400,hideAnimation:"slideUp",hideDuration:200,gap:5},f=function(t,i){var n;return n=function(){},n.prototype=t,e.extend(!0,new n,i)},l=function(t){return e.extend(x,t)},a=function(t){return e("<"+t+"></"+t+">")},u={},c=function(t){var i;return t.is("[type=radio]")&&(i=t.parents("form:first").find("[type=radio]").filter(function(i,n){return e(n).attr("name")===t.attr("name")}),t=i.first()),t},A=function(t,i,e){var o,r;if("string"==typeof e)e=parseInt(e,10);else if("number"!=typeof e)return;if(!isNaN(e))return o=C[g[i.charAt(0)]],r=i,t[o]!==n&&(i=C[o.charAt(0)],e=-e),t[i]===n?t[i]=e:t[i]+=e,null},E=function(t,i,e){if("l"===t||"t"===t)return 0;if("c"===t||"m"===t)return e/2-i/2;if("r"===t||"b"===t)return e-i;throw"Invalid alignment"},h=function(t){return h.e=h.e||a("div"),h.e.text(t).html()},o=function(){function t(t,i,n){"string"==typeof n&&(n={className:n}),this.options=f(x,e.isPlainObject(n)?n:{}),this.loadHTML(),this.wrapper=e(s.html),this.wrapper.data(b,this),this.arrow=this.wrapper.find("."+b+"-arrow"),this.container=this.wrapper.find("."+b+"-container"),this.container.append(this.userContainer),t&&t.length&&(this.elementType=t.attr("type"),this.originalElement=t,this.elem=c(t),this.elem.data(b,this),this.elem.before(this.wrapper)),this.container.hide(),this.run(i)}return t.prototype.loadHTML=function(){var t;if(t=this.getStyle(),this.userContainer=e(t.html),this.text=this.userContainer.find("[data-notify-text]"),0===this.text.length&&(this.text=this.userContainer.find("[data-notify-html]"),this.rawHTML=!0),0===this.text.length)throw"style: '"+name+"' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute";return this.text.addClass(""+b+"-text")},t.prototype.show=function(t,i){var e,o,r,s,a,l=this;if(o=function(){return t||l.elem||l.destroy(),i?i():n},a=this.container.parent().parents(":hidden").length>0,r=this.container.add(this.arrow),e=[],a&&t)s="show";else if(a&&!t)s="hide";else if(!a&&t)s=this.options.showAnimation,e.push(this.options.showDuration);else{if(a||t)return o();s=this.options.hideAnimation,e.push(this.options.hideDuration)}return e.push(o),r[s].apply(r,e)},t.prototype.setGlobalPosition=function(){var t,i,n,o,r,s,l,h;return h=this.getPosition(),l=h[0],s=h[1],r=C[l],t=C[s],o=l+"|"+s,i=u[o],i||(i=u[o]=a("div"),n={},n[r]=0,"middle"===t?n.top="45%":"center"===t?n.left="45%":n[t]=0,i.css(n).addClass(""+b+"-corner"),e("body").append(i)),i.prepend(this.wrapper)},t.prototype.setElementPosition=function(){var t,i,o,r,s,a,l,h,c,p,u,f,m,y,b,v,x,S,H,k,T,F,z,Q,B,R,U,N,P;for(z=this.getPosition(),k=z[0],S=z[1],H=z[2],u=this.elem.position(),h=this.elem.outerHeight(),f=this.elem.outerWidth(),c=this.elem.innerHeight(),p=this.elem.innerWidth(),Q=this.wrapper.position(),s=this.container.height(),a=this.container.width(),y=C[Line truncated
+(function(t,i,n,e){"use strict";var o,r,s,a,l,h,c,p,u,d,f,A,m,w,g,y,b,v,x,C,S,E,M,k,H,D,F,T=[].indexOf||function(t){for(var i=0,n=this.length;n>i;i++)if(i in this&&this[i]===t)return i;return-1};S="notify",C=S+"js",s=S+"!blank",M={t:"top",m:"middle",b:"bottom",l:"left",c:"center",r:"right"},m=["l","c","r"],F=["t","m","b"],b=["t","b","l","r"],v={t:"b",m:null,b:"t",l:"r",c:null,r:"l"},x=function(t){var i;return i=[],n.each(t.split(/\W+/),function(t,n){var o;return o=n.toLowerCase().charAt(0),M[o]?i.push(o):e}),i},D={},a={name:"core",html:'<div class="'+C+'-wrapper">\n  <div class="'+C+'-arrow"></div>\n  <div class="'+C+'-container"></div>\n</div>',css:"."+C+"-corner {\n  position: fixed;\n  margin: 5px;\n  z-index: 1050;\n}\n\n."+C+"-corner ."+C+"-wrapper,\n."+C+"-corner ."+C+"-container {\n  position: relative;\n  display: block;\n  height: inherit;\n  width: inherit;\n  margin: 3px;\n}\n\n."+C+"-wrapper {\n  z-index: 1;\n  position: absolute;\n  display: inline-block;\n  height: 0;\n  width: 0;\n}\n\n."+C+"-container {\n  display: none;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n}\n\n[data-notify-text],[data-notify-html] {\n  position: relative;\n}\n\n."+C+"-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"},H={"border-radius":["-webkit-","-moz-"]},f=function(t){return D[t]},r=function(i,e){var o,r,s,a;if(!i)throw"Missing Style name";if(!e)throw"Missing Style definition";if(!e.html)throw"Missing Style HTML";return(null!=(a=D[i])?a.cssElem:void 0)&&(t.console&&console.warn(""+S+": overwriting style '"+i+"'"),D[i].cssElem.remove()),e.name=i,D[i]=e,o="",e.classes&&n.each(e.classes,function(t,i){return o+="."+C+"-"+e.name+"-"+t+" {\n",n.each(i,function(t,i){return H[t]&&n.each(H[t],function(n,e){return o+="  "+e+t+": "+i+";\n"}),o+="  "+t+": "+i+";\n"}),o+="}\n"}),e.css&&(o+="/* styles for "+e.name+" */\n"+e.css),o&&(e.cssElem=y(o),e.cssElem.attr("id","notify-"+e.name)),s={},r=n(e.html),u("html",r,s),u("text",r,s),e.fields=s},y=function(t){var i;i=l("style"),i.attr("type","text/css"),n("head").append(i);try{i.html(t)}catch(e){i[0].styleSheet.cssText=t}return i},u=function(t,i,e){var o;return"html"!==t&&(t="text"),o="data-notify-"+t,p(i,"["+o+"]").each(function(){var i;return i=n(this).attr(o),i||(i=s),e[i]=t})},p=function(t,i){return t.is(i)?t:t.find(i)},E={clickToHide:!0,autoHide:!0,autoHideDelay:5e3,arrowShow:!0,arrowSize:5,breakNewLines:!0,elementPosition:"bottom",globalPosition:"top right",style:"bootstrap",className:"error",showAnimation:"slideDown",showDuration:400,hideAnimation:"slideUp",hideDuration:200,gap:5},g=function(t,i){var e;return e=function(){},e.prototype=t,n.extend(!0,new e,i)},h=function(t){return n.extend(E,t)},l=function(t){return n("<"+t+"></"+t+">")},A={},d=function(t){var i;return t.is("[type=radio]")&&(i=t.parents("form:first").find("[type=radio]").filter(function(i,e){return n(e).attr("name")===t.attr("name")}),t=i.first()),t},w=function(t,i,n){var o,r;if("string"==typeof n)n=parseInt(n,10);else if("number"!=typeof n)return;if(!isNaN(n))return o=M[v[i.charAt(0)]],r=i,t[o]!==e&&(i=M[o.charAt(0)],n=-n),t[i]===e?t[i]=n:t[i]+=n,null},k=function(t,i,n){if("l"===t||"t"===t)return 0;if("c"===t||"m"===t)return n/2-i/2;if("r"===t||"b"===t)return n-i;throw"Invalid alignment"},c=function(t){return c.e=c.e||l("div"),c.e.text(t).html()},o=function(){function t(t,i,e){"string"==typeof e&&(e={className:e}),this.options=g(E,n.isPlainObject(e)?e:{}),this.loadHTML(),this.wrapper=n(a.html),this.wrapper.data(C,this),this.arrow=this.wrapper.find("."+C+"-arrow"),this.container=this.wrapper.find("."+C+"-container"),this.container.append(this.userContainer),t&&t.length&&(this.elementType=t.attr("type"),this.originalElement=t,this.elem=d(t),this.elem.data(C,this),this.elem.before(this.wrapper)),this.container.hide(),this.run(i)}return t.prototype.loadHTML=function(){var t;return t=this.getStyle(),this.userContainer=n(t.html),this.userFields=t.fields},t.prototype.show=function(t,i){var n,o,r,s,a,l=this;if(o=function(){return t||l.elem||l.destroy(),i?i():e},a=this.container.parent().parents(":hidden").length>0,r=this.container.add(this.arrow),n=[],a&&t)s="show";else if(a&&!t)s="hide";else if(!a&&t)s=this.options.showAnimation,n.push(this.options.showDuration);else{if(a||t)return o();s=this.options.hideAnimation,n.push(this.options.hideDuration)}return n.push(o),r[s].apply(r,n)},t.prototype.setGlobalPosition=function(){var t,i,e,o,r,s,a,h;return h=this.getPosition(),a=h[0],s=h[1],r=M[a],t=M[s],o=a+"|"+s,i=A[o],i||(i=A[o]=l("div"),e={},e[r]=0,"middle"===t?e.top="45%":"center"===t?e.left="45%":e[t]=0,i.css(e).addClass(""+C+"-corner"),n("body").append(i)),i.prepend(this.wrapper)},t.prototype.setElementPosition=function(){var t,i,o,r,s,a,l,h,c,p,u,d,f,A,g,y,x,C,S,E,H,D,z,Q,B,R,P,U,N;for(z=this.getPosition(),E=z[0],C=z[1],S=z[2],u=this.elem.position(),h=this.elem.outerHeight(),d=this.elem.outerWidth(),c=this.elem.innerHeight(),p=this.elem.innerWidth(),Q=this.wrapper.positioLine truncated

dist/notify.js

@@ -1,17 +1,19 @@
-/** Notify.js - v0.0.1 - 2013/06/21
+/** Notify.js - v0.3.1 - 2013/07/05
  * http://notifyjs.com/
  * Copyright (c) 2013 Jaime Pillora - MIT
  */
 (function(window,document,$,undefined) {
 'use strict';
 
-var Notification, addStyle, coreStyle, createElem, defaults, encode, getAnchorElement, getStyle, globalAnchors, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns,
+var Notification, addStyle, blankFieldName, coreStyle, createElem, defaults, encode, find, findFields, getAnchorElement, getStyle, 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';
 
 pluginClassName = pluginName + 'js';
 
+blankFieldName = pluginName + "!blank";
+
 positions = {
   t: 'top',
   m: 'middle',
@@ -54,7 +56,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  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  margin: 3px;\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  margin: 3px;\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[data-notify-text],[data-notify-html] {\n  position: relative;\n}\n\n." + pluginClassName + "-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"
 };
 
 stylePrefixes = {
@@ -66,13 +68,16 @@ getStyle = function(name) {
 };
 
 addStyle = function(name, def) {
-  var cssText, _ref;
+  var cssText, elem, fields, _ref;
   if (!name) {
     throw "Missing Style name";
   }
   if (!def) {
     throw "Missing Style definition";
   }
+  if (!def.html) {
+    throw "Missing Style HTML";
+  }
   if ((_ref = styles[name]) != null ? _ref.cssElem : void 0) {
     if (window.console) {
       console.warn("" + pluginName + ": overwriting style '" + name + "'");
@@ -99,11 +104,15 @@ addStyle = function(name, def) {
   if (def.css) {
     cssText += "/* styles for " + def.name + " */\n" + def.css;
   }
-  if (!cssText) {
+  if (cssText) {
-    return;
+    def.cssElem = insertCSS(cssText);
+    def.cssElem.attr('id', "notify-" + def.name);
   }
-  def.cssElem = insertCSS(cssText);
+  fields = {};
-  return def.cssElem.attr('id', "notify-" + def.name);
+  elem = $(def.html);
+  findFields('html', elem, fields);
+  findFields('text', elem, fields);
+  return def.fields = fields;
 };
 
 insertCSS = function(cssText) {
@@ -119,6 +128,30 @@ insertCSS = function(cssText) {
   return elem;
 };
 
+findFields = function(type, elem, fields) {
+  var attr;
+  if (type !== 'html') {
+    type = 'text';
+  }
+  attr = "data-notify-" + type;
+  return find(elem, "[" + attr + "]").each(function() {
+    var name;
+    name = $(this).attr(attr);
+    if (!name) {
+      name = blankFieldName;
+    }
+    return fields[name] = type;
+  });
+};
+
+find = function(elem, selector) {
+  if (elem.is(selector)) {
+    return elem;
+  } else {
+    return elem.find(selector);
+  }
+};
+
 pluginOptions = {
   clickToHide: true,
   autoHide: true,
@@ -235,15 +268,7 @@ Notification = (function() {
     var style;
     style = this.getStyle();
     this.userContainer = $(style.html);
-    this.text = this.userContainer.find('[data-notify-text]');
+    return this.userFields = style.fields;
-    if (this.text.length === 0) {
-      this.text = this.userContainer.find('[data-notify-html]');
-      this.rawHTML = true;
-    }
-    if (this.text.length === 0) {
-      throw "style: '" + name + "' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute";
-    }
-    return this.text.addClass("" + pluginClassName + "-text");
   };
 
   Notification.prototype.show = function(show, userCallback) {
@@ -421,7 +446,8 @@ Notification = (function() {
   };
 
   Notification.prototype.run = function(data, options) {
-    var _this = this;
+    var d, datas, name, type, value,
+      _this = this;
     if ($.isPlainObject(options)) {
       $.extend(this.options, options);
     } else if ($.type(options) === 'string') {
@@ -433,13 +459,27 @@ Notification = (function() {
     } else if (!this.container && !data) {
       return;
     }
-    if (!this.rawHTML) {
+    datas = {};
-      data = encode(data);
+    if ($.isPlainObject(data)) {
-      if (this.options.breakNewLines) {
+      datas = data;
-        data = data.replace(/\n/g, '<br/>');
+    } else {
+      datas[blankFieldName] = data;
+    }
+    for (name in datas) {
+      d = datas[name];
+      type = this.userFields[name];
+      if (!type) {
+        continue;
       }
+      if (type === 'text') {
+        d = encode(d);
+        if (this.options.breakNewLines) {
+          d = d.replace(/\n/g, '<br/>');
+        }
+      }
+      value = name === blankFieldName ? '' : '=' + name;
+      find(this.userContainer, "[data-notify-" + type + value + "]").html(d);
     }
-    this.text.html(data);
     this.updateClasses();
     if (this.elem) {
       this.setElementPosition();

dist/notify.min.js

@@ -1,5 +1,5 @@
-/** Notify.js - v0.0.1 - 2013/06/21
+/** Notify.js - v0.3.1 - 2013/07/05
  * http://notifyjs.com/
  * Copyright (c) 2013 Jaime Pillora - MIT
  */
-(function(t,i,e,n){"use strict";var o,r,s,a,h,l,c,p,u,d,f,m,w,y,g,b,v,x,S,C,H,P,T,N,k=[].indexOf||function(t){for(var i=0,e=this.length;e>i;i++)if(i in this&&this[i]===t)return i;return-1};x="notify",v=x+"js",C={t:"top",m:"middle",b:"bottom",l:"left",c:"center",r:"right"},d=["l","c","r"],N=["t","m","b"],y=["t","b","l","r"],g={t:"b",m:null,b:"t",l:"r",c:null,r:"l"},b=function(t){var i;return i=[],e.each(t.split(/\W+/),function(t,e){var o;return o=e.toLowerCase().charAt(0),C[o]?i.push(o):n}),i},T={},s={name:"core",html:'<div class="'+v+'-wrapper">\n  <div class="'+v+'-arrow"></div>\n  <div class="'+v+'-container"></div>\n</div>',css:"."+v+"-corner {\n  position: fixed;\n  margin: 5px;\n  z-index: 1050;\n}\n\n."+v+"-corner ."+v+"-wrapper,\n."+v+"-corner ."+v+"-container {\n  position: relative;\n  display: block;\n  height: inherit;\n  width: inherit;\n  margin: 3px;\n}\n\n."+v+"-wrapper {\n  z-index: 1;\n  position: absolute;\n  display: inline-block;\n  height: 0;\n  width: 0;\n}\n\n."+v+"-container {\n  display: none;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n}\n\n."+v+"-text {\n  position: relative;\n}\n\n."+v+"-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"},P={"border-radius":["-webkit-","-moz-"]},p=function(t){return T[t]},r=function(i,o){var r,s;if(!i)throw"Missing Style name";if(!o)throw"Missing Style definition";return(null!=(s=T[i])?s.cssElem:void 0)&&(t.console&&console.warn(""+x+": overwriting style '"+i+"'"),T[i].cssElem.remove()),o.name=i,T[i]=o,r="",o.classes&&e.each(o.classes,function(t,i){return r+="."+v+"-"+o.name+"-"+t+" {\n",e.each(i,function(t,i){return P[t]&&e.each(P[t],function(e,n){return r+="  "+n+t+": "+i+";\n"}),r+="  "+t+": "+i+";\n"}),r+="}\n"}),o.css&&(r+="/* styles for "+o.name+" */\n"+o.css),r?(o.cssElem=w(r),o.cssElem.attr("id","notify-"+o.name)):n},w=function(t){var i;i=a("style"),i.attr("type","text/css"),e("head").append(i);try{i.html(t)}catch(n){i[0].styleSheet.cssText=t}return i},S={clickToHide:!0,autoHide:!0,autoHideDelay:5e3,arrowShow:!0,arrowSize:5,breakNewLines:!0,elementPosition:"bottom",globalPosition:"top right",style:"bootstrap",className:"error",showAnimation:"slideDown",showDuration:400,hideAnimation:"slideUp",hideDuration:200,gap:5},m=function(t,i){var n;return n=function(){},n.prototype=t,e.extend(!0,new n,i)},h=function(t){return e.extend(S,t)},a=function(t){return e("<"+t+"></"+t+">")},u={},c=function(t){var i;return t.is("[type=radio]")&&(i=t.parents("form:first").find("[type=radio]").filter(function(i,n){return e(n).attr("name")===t.attr("name")}),t=i.first()),t},f=function(t,i,e){var o,r;if("string"==typeof e)e=parseInt(e,10);else if("number"!=typeof e)return;if(!isNaN(e))return o=C[g[i.charAt(0)]],r=i,t[o]!==n&&(i=C[o.charAt(0)],e=-e),t[i]===n?t[i]=e:t[i]+=e,null},H=function(t,i,e){if("l"===t||"t"===t)return 0;if("c"===t||"m"===t)return e/2-i/2;if("r"===t||"b"===t)return e-i;throw"Invalid alignment"},l=function(t){return l.e=l.e||a("div"),l.e.text(t).html()},o=function(){function t(t,i,n){"string"==typeof n&&(n={className:n}),this.options=m(S,e.isPlainObject(n)?n:{}),this.loadHTML(),this.wrapper=e(s.html),this.wrapper.data(v,this),this.arrow=this.wrapper.find("."+v+"-arrow"),this.container=this.wrapper.find("."+v+"-container"),this.container.append(this.userContainer),t&&t.length&&(this.elementType=t.attr("type"),this.originalElement=t,this.elem=c(t),this.elem.data(v,this),this.elem.before(this.wrapper)),this.container.hide(),this.run(i)}return t.prototype.loadHTML=function(){var t;if(t=this.getStyle(),this.userContainer=e(t.html),this.text=this.userContainer.find("[data-notify-text]"),0===this.text.length&&(this.text=this.userContainer.find("[data-notify-html]"),this.rawHTML=!0),0===this.text.length)throw"style: '"+name+"' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute";return this.text.addClass(""+v+"-text")},t.prototype.show=function(t,i){var e,o,r,s,a,h=this;if(o=function(){return t||h.elem||h.destroy(),i?i():n},a=this.container.parent().parents(":hidden").length>0,r=this.container.add(this.arrow),e=[],a&&t)s="show";else if(a&&!t)s="hide";else if(!a&&t)s=this.options.showAnimation,e.push(this.options.showDuration);else{if(a||t)return o();s=this.options.hideAnimation,e.push(this.options.hideDuration)}return e.push(o),r[s].apply(r,e)},t.prototype.setGlobalPosition=function(){var t,i,n,o,r,s,h,l;return l=this.getPosition(),h=l[0],s=l[1],r=C[h],t=C[s],o=h+"|"+s,i=u[o],i||(i=u[o]=a("div"),n={},n[r]=0,"middle"===t?n.top="45%":"center"===t?n.left="45%":n[t]=0,i.css(n).addClass(""+v+"-corner"),e("body").append(i)),i.prepend(this.wrapper)},t.prototype.setElementPosition=function(){var t,i,o,r,s,a,h,l,c,p,u,m,w,b,v,x,S,P,T,A,M,L,z,D,E,j,O,I,W;for(z=this.getPosition(),A=z[0],P=z[1],T=z[2],u=this.elem.position(),l=this.elem.outerHeight(),m=this.elem.outerWidth(),c=this.elem.innerHeight(),p=this.elem.innerWidth(),D=this.wrapper.position(),s=this.container.height(),a=this.container.width(),b=C[Line truncated
+(function(t,n,i,e){"use strict";var r,o,s,a,h,l,c,u,p,d,f,m,w,y,g,b,v,x,S,P,k,C,H,N,T,A,M,j=[].indexOf||function(t){for(var n=0,i=this.length;i>n;n++)if(n in this&&this[n]===t)return n;return-1};k="notify",P=k+"js",s=k+"!blank",H={t:"top",m:"middle",b:"bottom",l:"left",c:"center",r:"right"},w=["l","c","r"],M=["t","m","b"],v=["t","b","l","r"],x={t:"b",m:null,b:"t",l:"r",c:null,r:"l"},S=function(t){var n;return n=[],i.each(t.split(/\W+/),function(t,i){var r;return r=i.toLowerCase().charAt(0),H[r]?n.push(r):e}),n},A={},a={name:"core",html:'<div class="'+P+'-wrapper">\n  <div class="'+P+'-arrow"></div>\n  <div class="'+P+'-container"></div>\n</div>',css:"."+P+"-corner {\n  position: fixed;\n  margin: 5px;\n  z-index: 1050;\n}\n\n."+P+"-corner ."+P+"-wrapper,\n."+P+"-corner ."+P+"-container {\n  position: relative;\n  display: block;\n  height: inherit;\n  width: inherit;\n  margin: 3px;\n}\n\n."+P+"-wrapper {\n  z-index: 1;\n  position: absolute;\n  display: inline-block;\n  height: 0;\n  width: 0;\n}\n\n."+P+"-container {\n  display: none;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n}\n\n[data-notify-text],[data-notify-html] {\n  position: relative;\n}\n\n."+P+"-arrow {\n  position: absolute;\n  z-index: 2;\n  width: 0;\n  height: 0;\n}"},T={"border-radius":["-webkit-","-moz-"]},f=function(t){return A[t]},o=function(n,e){var r,o,s,a;if(!n)throw"Missing Style name";if(!e)throw"Missing Style definition";if(!e.html)throw"Missing Style HTML";return(null!=(a=A[n])?a.cssElem:void 0)&&(t.console&&console.warn(""+k+": overwriting style '"+n+"'"),A[n].cssElem.remove()),e.name=n,A[n]=e,r="",e.classes&&i.each(e.classes,function(t,n){return r+="."+P+"-"+e.name+"-"+t+" {\n",i.each(n,function(t,n){return T[t]&&i.each(T[t],function(i,e){return r+="  "+e+t+": "+n+";\n"}),r+="  "+t+": "+n+";\n"}),r+="}\n"}),e.css&&(r+="/* styles for "+e.name+" */\n"+e.css),r&&(e.cssElem=b(r),e.cssElem.attr("id","notify-"+e.name)),s={},o=i(e.html),p("html",o,s),p("text",o,s),e.fields=s},b=function(t){var n;n=h("style"),n.attr("type","text/css"),i("head").append(n);try{n.html(t)}catch(e){n[0].styleSheet.cssText=t}return n},p=function(t,n,e){var r;return"html"!==t&&(t="text"),r="data-notify-"+t,u(n,"["+r+"]").each(function(){var n;return n=i(this).attr(r),n||(n=s),e[n]=t})},u=function(t,n){return t.is(n)?t:t.find(n)},C={clickToHide:!0,autoHide:!0,autoHideDelay:5e3,arrowShow:!0,arrowSize:5,breakNewLines:!0,elementPosition:"bottom",globalPosition:"top right",style:"bootstrap",className:"error",showAnimation:"slideDown",showDuration:400,hideAnimation:"slideUp",hideDuration:200,gap:5},g=function(t,n){var e;return e=function(){},e.prototype=t,i.extend(!0,new e,n)},l=function(t){return i.extend(C,t)},h=function(t){return i("<"+t+"></"+t+">")},m={},d=function(t){var n;return t.is("[type=radio]")&&(n=t.parents("form:first").find("[type=radio]").filter(function(n,e){return i(e).attr("name")===t.attr("name")}),t=n.first()),t},y=function(t,n,i){var r,o;if("string"==typeof i)i=parseInt(i,10);else if("number"!=typeof i)return;if(!isNaN(i))return r=H[x[n.charAt(0)]],o=n,t[r]!==e&&(n=H[r.charAt(0)],i=-i),t[n]===e?t[n]=i:t[n]+=i,null},N=function(t,n,i){if("l"===t||"t"===t)return 0;if("c"===t||"m"===t)return i/2-n/2;if("r"===t||"b"===t)return i-n;throw"Invalid alignment"},c=function(t){return c.e=c.e||h("div"),c.e.text(t).html()},r=function(){function t(t,n,e){"string"==typeof e&&(e={className:e}),this.options=g(C,i.isPlainObject(e)?e:{}),this.loadHTML(),this.wrapper=i(a.html),this.wrapper.data(P,this),this.arrow=this.wrapper.find("."+P+"-arrow"),this.container=this.wrapper.find("."+P+"-container"),this.container.append(this.userContainer),t&&t.length&&(this.elementType=t.attr("type"),this.originalElement=t,this.elem=d(t),this.elem.data(P,this),this.elem.before(this.wrapper)),this.container.hide(),this.run(n)}return t.prototype.loadHTML=function(){var t;return t=this.getStyle(),this.userContainer=i(t.html),this.userFields=t.fields},t.prototype.show=function(t,n){var i,r,o,s,a,h=this;if(r=function(){return t||h.elem||h.destroy(),n?n():e},a=this.container.parent().parents(":hidden").length>0,o=this.container.add(this.arrow),i=[],a&&t)s="show";else if(a&&!t)s="hide";else if(!a&&t)s=this.options.showAnimation,i.push(this.options.showDuration);else{if(a||t)return r();s=this.options.hideAnimation,i.push(this.options.hideDuration)}return i.push(r),o[s].apply(o,i)},t.prototype.setGlobalPosition=function(){var t,n,e,r,o,s,a,l;return l=this.getPosition(),a=l[0],s=l[1],o=H[a],t=H[s],r=a+"|"+s,n=m[r],n||(n=m[r]=h("div"),e={},e[o]=0,"middle"===t?e.top="45%":"center"===t?e.left="45%":e[t]=0,n.css(e).addClass(""+P+"-corner"),i("body").append(n)),n.prepend(this.wrapper)},t.prototype.setElementPosition=function(){var t,n,r,o,s,a,h,l,c,u,p,d,f,m,g,b,S,P,k,C,T,A,z,D,E,L,O,I,W;for(z=this.getPosition(),C=z[0],P=z[1],k=z[2],p=this.elem.position(),l=this.elem.outerHeight(),d=this.elem.outerWidth(),c=this.elem.innerHeight(),u=this.elem.innerWidth(),D=this.wrapper.positioLine truncated

examples/multi-text.html

@@ -0,0 +1,58 @@
+<html>
+<body>
+
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+  <script src="../dist/notify.js"></script>
+
+  <style type="text/css">
+    .box {
+      display: inline-block;
+      border: thin solid blue;
+      padding: 10px;
+      margin: 50px;
+      width: 100px;
+    }
+  </style>
+
+  <div class="box 1">multi</div>
+  <div class="box 2">single</div>
+
+  <!-- run code -->
+  <script class="demo">
+
+    $.notify.defaults({ arrowShow: false })
+
+
+    $.notify.addStyle('single-text', {
+      html: "<div data-notify-text></div>"
+    });
+
+    $.notify.addStyle('multi-text', {
+      html: "<div>\n"+
+        "<p data-notify-text=\"title\"></p>\n"+
+        "<p data-notify-text=\"p1\"></p>\n"+
+        "<p data-notify-text=\"p2\"></p>\n"+
+        "</div>"
+    });
+
+    $(function() {
+
+
+
+      $(".1").notify({
+        title: "HELLO!",
+        p1: "little",
+        p2: "world"
+      }, {
+        style: 'multi-text'
+      })
+
+      $(".2").notify("hello world", {
+        style: 'single-text'
+      })
+
+    });
+  </script>
+
+</body>
+</html>

notify.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "notify",
-  "version": "0.0.1",
+  "version": "0.3.1",
   "title": "notify",
   "description": "A robust, customizable notification library",
   "bugs": "https://github.com/jpillora/notifyjs/issues",

package.json

@@ -1,7 +1,7 @@
 {
   "title": "Notify.js",
   "name": "notify",
-  "version": "0.0.1",
+  "version": "0.3.1",
   "author": {
     "name": "Jaime Pillora"
   },

src/notify.coffee

@@ -4,6 +4,7 @@
 #plugin constants
 pluginName = 'notify'
 pluginClassName = pluginName+'js'
+blankFieldName = pluginName+"!blank"
 
 # ================================
 #  POSITIONING
@@ -86,7 +87,7 @@ coreStyle =
       cursor: pointer;
     }
 
-    .#{pluginClassName}-text {
+    [data-notify-text],[data-notify-html] {
       position: relative;
     }
 
@@ -110,6 +111,8 @@ addStyle = (name, def) ->
     throw "Missing Style name"
   unless def
     throw "Missing Style definition"
+  unless def.html
+    throw "Missing Style HTML"
 
   if styles[name]?.cssElem
     if window.console
@@ -137,9 +140,16 @@ addStyle = (name, def) ->
       #{def.css}
     """
 
-  return unless cssText
+  if cssText
-  def.cssElem = insertCSS cssText
+    def.cssElem = insertCSS cssText
-  def.cssElem.attr('id', "notify-#{def.name}")
+    def.cssElem.attr('id', "notify-#{def.name}")
+
+  #precompute usable text fields
+  fields = {}
+  elem = $(def.html)
+  findFields 'html', elem, fields
+  findFields 'text', elem, fields
+  def.fields = fields
 
 insertCSS = (cssText) ->
 
@@ -152,6 +162,17 @@ insertCSS = (cssText) ->
     elem[0].styleSheet.cssText = cssText
   elem
 
+# style.html helper
+findFields = (type, elem, fields) ->
+  type = 'text' if type isnt 'html'
+  attr = "data-notify-#{type}"
+  find(elem,"[#{attr}]").each ->
+    name = $(@).attr attr
+    name = blankFieldName unless name
+    fields[name] = type
+
+find = (elem, selector) ->
+  if elem.is(selector) then elem else elem.find selector
 
 # ================================
 #  OPTIONS
@@ -276,14 +297,7 @@ class Notification
   loadHTML: ->
     style = @getStyle()
     @userContainer = $(style.html)
-    @text = @userContainer.find '[data-notify-text]'
+    @userFields = style.fields
-    if @text.length is 0
-      @text = @userContainer.find '[data-notify-html]'
-      @rawHTML = true
-    if @text.length is 0
-      throw "style: '#{name}' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute"
-
-    @text.addClass "#{pluginClassName}-text"
 
   show: (show, userCallback) ->
 
@@ -475,12 +489,22 @@ class Notification
     else if not @container and not data
       return
 
-    #escape
+    datas = {}
-    unless @rawHTML
+    if $.isPlainObject data
-      data = encode(data)
+      datas = data
-      data = data.replace(/\n/g,'<br/>') if @options.breakNewLines
+    else
-    #update content
+      datas[blankFieldName] = data
-    @text.html(data)
+
+    for name, d of datas
+      type = @userFields[name]
+      continue unless type
+      if type is 'text'
+        #escape
+        d = encode(d)
+        d = d.replace(/\n/g,'<br/>') if @options.breakNewLines
+      #update content
+      value = if name is blankFieldName then '' else '='+name
+      find(@userContainer,"[data-notify-#{type}#{value}]").html(d)
 
     #set styles
     @updateClasses()