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

added multiple inputs

Browse Source
This commit is contained in:
Jaime Pillora
2013-07-05 12:04:05 +10:00
parent 00013d1865
commit 4fb1a1b42c
8 changed files with 232 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify-combined.js
Vendored
+63 -23
View File
@@ -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) {
return;
if (cssText) {
def.cssElem = insertCSS(cssText);
def.cssElem.attr('id', "notify-" + def.name);
}
def.cssElem = insertCSS(cssText);
return def.cssElem.attr('id', "notify-" + def.name);
fields = {};
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]');
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");
return this.userFields = style.fields;
};
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) {
data = encode(data);
if (this.options.breakNewLines) {
data = data.replace(/\n/g, '<br/>');
datas = {};
if ($.isPlainObject(data)) {
datas = data;
} 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
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/notify.js
Vendored
+63 -23
View File
@@ -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) {
return;
if (cssText) {
def.cssElem = insertCSS(cssText);
def.cssElem.attr('id', "notify-" + def.name);
}
def.cssElem = insertCSS(cssText);
return def.cssElem.attr('id', "notify-" + def.name);
fields = {};
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]');
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");
return this.userFields = style.fields;
};
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) {
data = encode(data);
if (this.options.breakNewLines) {
data = data.replace(/\n/g, '<br/>');
datas = {};
if ($.isPlainObject(data)) {
datas = data;
} 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
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/multi-text.html
+58
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -1,7 +1,7 @@
{
"title": "Notify.js",
"name": "notify",
"version": "0.0.1",
"version": "0.3.1",
"author": {
"name": "Jaime Pillora"
},
src/notify.coffee
+42 -18
View File
@@ -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
def.cssElem = insertCSS cssText
def.cssElem.attr('id', "notify-#{def.name}")
if cssText
def.cssElem = insertCSS cssText
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]'
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"
@userFields = style.fields
show: (show, userCallback) ->
@@ -475,12 +489,22 @@ class Notification
else if not @container and not data
return
#escape
unless @rawHTML
data = encode(data)
data = data.replace(/\n/g,'<br/>') if @options.breakNewLines
#update content
@text.html(data)
datas = {}
if $.isPlainObject data
datas = data
else
datas[blankFieldName] = 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()