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.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();

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()