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

Compare commits

base: nightmare/jquery-notify:0.3.2
Branches Tags
nightmare/jquery-notify:master nightmare/jquery-notify:revert-57-master
nightmare/jquery-notify:v0.4.2 nightmare/jquery-notify:0.4.0 nightmare/jquery-notify:0.3.3 nightmare/jquery-notify:0.3.4 nightmare/jquery-notify:0.3.2 nightmare/jquery-notify:0.3.1
...
compare: nightmare/jquery-notify:0.3.4
Branches Tags
nightmare/jquery-notify:master nightmare/jquery-notify:revert-57-master
nightmare/jquery-notify:v0.4.2 nightmare/jquery-notify:0.4.0 nightmare/jquery-notify:0.3.3 nightmare/jquery-notify:0.3.4 nightmare/jquery-notify:0.3.2 nightmare/jquery-notify:0.3.1
7 Commits
0.3.2 ... 0.3.4
Author SHA1 Message Date
Jaime Pillora 0b8891e8c8 bump to 0.3.4, single dist file notify.js, move docs out to notify-com repo, cleaned up generated coffeescript, minification is now done in the browser on the docs page 2015-11-01 15:17:40 +11:00
Jaime Pillora 36ee2b8298 revert deletion of combined distributions until build is fixed 2015-11-01 12:25:46 +11:00
Jaime Pillora 7a30b52ad6 update docs to point to new repo, put a 10sec auto-hide on @jpillora's book ad, remove unused docs/index, package.json spaces->tabs 2015-10-30 10:07:06 +11:00
Jaime Pillora 8a89efc74a Merge pull request #45 from EvanCarroll/gh-pages 
repackaged without coffeescript, or grunt stuff
 2015-10-30 09:28:46 +11:00
Evan Carroll 2edc584359 added to package.json entry point for npm 2015-10-21 10:46:37 -05:00
Evan Carroll dfd0df0a59 repackaged without coffeescript, or grunt stuff 2015-10-20 11:16:50 -05:00
Jaime Pillora 3e98e714c6 docs 2014-06-29 01:05:13 +10:00
46 changed files with 405 additions and 7721 deletions
Expand all files Collapse all files
CHANGES.md
+7
View File
@@ -0,0 +1,7 @@
2015-10-20 v0.3.3
@EvanCarroll - Updated to remove Grunt, and coffeescript stuff.
2015-11-01 v0.3.4
@jpillora - Remove deprecated grunt file, there is now a single `notify.js` file
CNAME
-1
View File
@@ -1 +0,0 @@
notifyjs.com
Gruntfile.coffee
-65
View File
@@ -1,65 +0,0 @@
fs = require("fs")
#global module:false
module.exports = (grunt) ->
# Project configuration.
grunt.initConfig
pkg: grunt.file.readJSON('package.json')
banner:
"/** <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today(\"yyyy/mm/dd\") %>\n"+
" * <%= pkg.homepage %>\n" +
" * Copyright (c) <%= grunt.template.today(\"yyyy\") %> <%= pkg.author.name %> - MIT\n"+
" */\n"
coffee:
options:
bare: true
compile:
expand: true,
flatten: false,
cwd: 'src',
src: ['**/*.coffee'],
dest: 'dist/',
ext: '.js'
wrap:
dist:
src: 'dist/<%= pkg.name %>.js'
dest: '.'
wrapper: [
"<%= banner %>(function(window,document,$,undefined) {\n"
"\n}(window,document,jQuery));"
]
concat:
combined:
src: ['dist/<%= pkg.name %>.js', 'dist/styles/bootstrap/<%= pkg.name %>-bootstrap.js']
dest: 'dist/<%= pkg.name %>-combined.js'
uglify:
options:
stripBanners: true
banner: '<%= banner %>'
dist:
src: "dist/<%= pkg.name %>.js"
dest: "dist/<%= pkg.name %>.min.js"
combined:
src: "dist/<%= pkg.name %>-combined.js"
dest: "dist/<%= pkg.name %>-combined.min.js"
watch:
scripts:
files: 'src/**/*.coffee'
tasks: 'default'
grunt.loadNpmTasks "grunt-contrib-concat"
grunt.loadNpmTasks "grunt-contrib-watch"
grunt.loadNpmTasks "grunt-contrib-uglify"
grunt.loadNpmTasks "grunt-contrib-coffee"
grunt.loadNpmTasks "grunt-wrap"
# Default task.
grunt.registerTask "default", "coffee wrap concat uglify".split(' ')
README.md
+2 -2
View File
@@ -9,7 +9,7 @@ See demos and full documentation at:
#### MIT License
Copyright © 2013 Jaime Pillora &lt;dev@jpillora.com&gt;
Copyright © 2015 Jaime Pillora &lt;dev@jpillora.com&gt;
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
@@ -28,4 +28,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
bower.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "notifyjs",
"version": "0.3.2",
"version": "0.3.4",
"homepage": "http://notifyjs.com/",
"authors": [
"Jaime Pillora <dev@jpillora.com>"
dist/notify-combined.js
Vendored
-593
View File
@@ -1,593 +0,0 @@
/** Notify.js - v0.3.1 - 2014/06/29
* http://notifyjs.com/
* Copyright (c) 2014 Jaime Pillora - MIT
*/
(function(window,document,$,undefined) {
'use strict';
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',
b: 'bottom',
l: 'left',
c: 'center',
r: 'right'
};
hAligns = ['l', 'c', 'r'];
vAligns = ['t', 'm', 'b'];
mainPositions = ['t', 'b', 'l', 'r'];
opposites = {
t: 'b',
m: null,
b: 't',
l: 'r',
c: null,
r: 'l'
};
parsePosition = function(str) {
var pos;
pos = [];
$.each(str.split(/\W+/), function(i, word) {
var w;
w = word.toLowerCase().charAt(0);
if (positions[w]) {
return pos.push(w);
}
});
return pos;
};
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}\n\n." + pluginClassName + "-hidable {\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 = {
"border-radius": ["-webkit-", "-moz-"]
};
getStyle = function(name) {
return styles[name];
};
addStyle = function(name, def) {
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 + "'");
}
styles[name].cssElem.remove();
}
def.name = name;
styles[name] = def;
cssText = "";
if (def.classes) {
$.each(def.classes, function(className, props) {
cssText += "." + pluginClassName + "-" + def.name + "-" + className + " {\n";
$.each(props, function(name, val) {
if (stylePrefixes[name]) {
$.each(stylePrefixes[name], function(i, prefix) {
return cssText += " " + prefix + name + ": " + val + ";\n";
});
}
return cssText += " " + name + ": " + val + ";\n";
});
return cssText += "}\n";
});
}
if (def.css) {
cssText += "/* styles for " + def.name + " */\n" + def.css;
}
if (cssText) {
def.cssElem = insertCSS(cssText);
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) {
var elem;
elem = createElem("style");
elem.attr('type', 'text/css');
$("head").append(elem);
try {
elem.html(cssText);
} catch (e) {
elem[0].styleSheet.cssText = 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,
autoHideDelay: 5000,
arrowShow: true,
arrowSize: 5,
breakNewLines: true,
elementPosition: 'bottom',
globalPosition: 'top right',
style: 'bootstrap',
className: 'error',
showAnimation: 'slideDown',
showDuration: 400,
hideAnimation: 'slideUp',
hideDuration: 200,
gap: 5
};
inherit = function(a, b) {
var F;
F = function() {};
F.prototype = a;
return $.extend(true, new F(), b);
};
defaults = function(opts) {
return $.extend(pluginOptions, opts);
};
createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
globalAnchors = {};
getAnchorElement = function(element) {
var radios;
if (element.is('[type=radio]')) {
radios = element.parents('form:first').find('[type=radio]').filter(function(i, e) {
return $(e).attr('name') === element.attr('name');
});
element = radios.first();
}
return element;
};
incr = function(obj, pos, val) {
var opp, temp;
if (typeof val === 'string') {
val = parseInt(val, 10);
} else if (typeof val !== 'number') {
return;
}
if (isNaN(val)) {
return;
}
opp = positions[opposites[pos.charAt(0)]];
temp = pos;
if (obj[opp] !== undefined) {
pos = positions[opp.charAt(0)];
val = -val;
}
if (obj[pos] === undefined) {
obj[pos] = val;
} else {
obj[pos] += val;
}
return null;
};
realign = function(alignment, inner, outer) {
if (alignment === 'l' || alignment === 't') {
return 0;
} else if (alignment === 'c' || alignment === 'm') {
return outer / 2 - inner / 2;
} else if (alignment === 'r' || alignment === 'b') {
return outer - inner;
}
throw "Invalid alignment";
};
encode = function(text) {
encode.e = encode.e || createElem("div");
return encode.e.text(text).html();
};
Notification = (function() {
function Notification(elem, data, options) {
if (typeof options === 'string') {
options = {
className: options
};
}
this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {});
this.loadHTML();
this.wrapper = $(coreStyle.html);
if (this.options.clickToHide) {
this.wrapper.addClass("" + pluginClassName + "-hidable");
}
this.wrapper.data(pluginClassName, this);
this.arrow = this.wrapper.find("." + pluginClassName + "-arrow");
this.container = this.wrapper.find("." + pluginClassName + "-container");
this.container.append(this.userContainer);
if (elem && elem.length) {
this.elementType = elem.attr('type');
this.originalElement = elem;
this.elem = getAnchorElement(elem);
this.elem.data(pluginClassName, this);
this.elem.before(this.wrapper);
}
this.container.hide();
this.run(data);
}
Notification.prototype.loadHTML = function() {
var style;
style = this.getStyle();
this.userContainer = $(style.html);
return this.userFields = style.fields;
};
Notification.prototype.show = function(show, userCallback) {
var args, callback, elems, fn, hidden,
_this = this;
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 = [];
if (hidden && show) {
fn = 'show';
} else if (hidden && !show) {
fn = 'hide';
} else if (!hidden && show) {
fn = this.options.showAnimation;
args.push(this.options.showDuration);
} else if (!hidden && !show) {
fn = this.options.hideAnimation;
args.push(this.options.hideDuration);
} else {
return callback();
}
args.push(callback);
return elems[fn].apply(elems, args);
};
Notification.prototype.setGlobalPosition = function() {
var align, anchor, css, key, main, pAlign, pMain, _ref;
_ref = this.getPosition(), pMain = _ref[0], pAlign = _ref[1];
main = positions[pMain];
align = positions[pAlign];
key = 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() {
var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, position, wrapPos, _i, _j, _len, _len1, _ref;
position = this.getPosition();
pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth();
elemIH = this.elem.innerHeight();
elemIW = this.elem.innerWidth();
wrapPos = this.wrapper.position();
contH = this.container.height();
contW = this.container.width();
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);
_ref = ['top', 'left'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
pos = _ref[_i];
margin = parseInt(this.elem.css("margin-" + pos), 10);
if (margin) {
incr(css, pos, margin);
}
}
gap = Math.max(0, this.options.gap - (this.options.arrowShow ? arrowSize : 0));
incr(css, oppFull, gap);
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 (_j = 0, _len1 = mainPositions.length; _j < _len1; _j++) {
pos = mainPositions[_j];
posFull = positions[pos];
if (pos === opp) {
continue;
}
color = posFull === mainFull ? arrowColor : 'transparent';
arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color;
}
incr(css, positions[opp], arrowSize);
if (__indexOf.call(mainPositions, pAlign) >= 0) {
incr(arrowCss, positions[pAlign], arrowSize * 2);
}
}
if (__indexOf.call(vAligns, pMain) >= 0) {
incr(css, 'left', realign(pAlign, contW, elemW));
if (arrowCss) {
incr(arrowCss, 'left', realign(pAlign, arrowSize, elemIW));
}
} else if (__indexOf.call(hAligns, pMain) >= 0) {
incr(css, 'top', realign(pAlign, contH, elemH));
if (arrowCss) {
incr(arrowCss, 'top', realign(pAlign, arrowSize, elemIH));
}
}
if (this.container.is(":visible")) {
css.display = 'block';
}
this.container.removeAttr('style').css(css);
if (arrowCss) {
return this.arrow.removeAttr('style').css(arrowCss);
}
};
Notification.prototype.getPosition = function() {
var pos, text, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
text = this.options.position || (this.elem ? this.options.elementPosition : this.options.globalPosition);
pos = parsePosition(text);
if (pos.length === 0) {
pos[0] = 'b';
}
if (_ref = pos[0], __indexOf.call(mainPositions, _ref) < 0) {
throw "Must be one of [" + mainPositions + "]";
}
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 (pos.length === 2) {
pos[2] = pos[1];
}
return pos;
};
Notification.prototype.getStyle = function(name) {
var style;
if (!name) {
name = this.options.style;
}
if (!name) {
name = 'default';
}
style = styles[name];
if (!style) {
throw "Missing style: " + name;
}
return style;
};
Notification.prototype.updateClasses = function() {
var classes, style;
classes = ['base'];
if ($.isArray(this.options.className)) {
classes = classes.concat(this.options.className);
} else if (this.options.className) {
classes.push(this.options.className);
}
style = this.getStyle();
classes = $.map(classes, function(n) {
return "" + pluginClassName + "-" + style.name + "-" + n;
}).join(' ');
return this.userContainer.attr('class', classes);
};
Notification.prototype.run = function(data, options) {
var d, datas, name, type, value,
_this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
this.options.className = options;
}
if (this.container && !data) {
this.show(false);
return;
} else if (!this.container && !data) {
return;
}
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.updateClasses();
if (this.elem) {
this.setElementPosition();
} else {
this.setGlobalPosition();
}
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
return this.autohideTimer = setTimeout(function() {
return _this.show(false);
}, this.options.autoHideDelay);
}
};
Notification.prototype.destroy = function() {
return this.wrapper.remove();
};
return Notification;
})();
$[pluginName] = function(elem, data, options) {
if ((elem && elem.nodeName) || elem.jquery) {
$(elem)[pluginName](data, options);
} else {
options = data;
data = elem;
new Notification(null, data, options);
}
return elem;
};
$.fn[pluginName] = function(data, options) {
$(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(pluginClassName);
if (inst) {
return inst.run(data, options);
} else {
return new Notification($(this), data, options);
}
});
return this;
};
$.extend($[pluginName], {
defaults: defaults,
addStyle: addStyle,
pluginOptions: pluginOptions,
getStyle: getStyle,
insertCSS: insertCSS
});
$(function() {
insertCSS(coreStyle.css).attr('id', 'core-notify');
$(document).on('click', "." + pluginClassName + "-hidable", function(e) {
return $(this).trigger('notify-hide');
});
return $(document).on('notify-hide', "." + pluginClassName + "-wrapper", function(e) {
var _ref;
return (_ref = $(this).data(pluginClassName)) != null ? _ref.show(false) : void 0;
});
});
}(window,document,jQuery));
$.notify.addStyle("bootstrap", {
html: "<div>\n<span data-notify-text></span>\n</div>",
classes: {
base: {
"font-weight": "bold",
"padding": "8px 15px 8px 14px",
"text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)",
"background-color": "#fcf8e3",
"border": "1px solid #fbeed5",
"border-radius": "4px",
"white-space": "nowrap",
"padding-left": "25px",
"background-repeat": "no-repeat",
"background-position": "3px 7px"
},
error: {
"color": "#B94A48",
"background-color": "#F2DEDE",
"border-color": "#EED3D7",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=)"
},
success: {
"color": "#468847",
"background-color": "#DFF0D8",
"border-color": "#D6E9C6",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==)"
},
info: {
"color": "#3A87AD",
"background-color": "#D9EDF7",
"border-color": "#BCE8F1",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=)"
},
warn: {
"color": "#C09853",
"background-color": "#FCF8E3",
"border-color": "#FBEED5",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC)"
}
}
});
dist/notify-combined.min.js
Vendored
-5
View File
File diff suppressed because one or more lines are too long
dist/notify.js
Vendored
+361 -326
View File
@@ -1,247 +1,243 @@
/** Notify.js - v0.3.1 - 2014/06/29
* http://notifyjs.com/
* Copyright (c) 2014 Jaime Pillora - MIT
*/
(function(window,document,$,undefined) {
'use strict';
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',
b: 'bottom',
l: 'left',
c: 'center',
r: 'right'
};
hAligns = ['l', 'c', 'r'];
vAligns = ['t', 'm', 'b'];
mainPositions = ['t', 'b', 'l', 'r'];
opposites = {
t: 'b',
m: null,
b: 't',
l: 'r',
c: null,
r: 'l'
};
parsePosition = function(str) {
var pos;
pos = [];
$.each(str.split(/\W+/), function(i, word) {
var w;
w = word.toLowerCase().charAt(0);
if (positions[w]) {
return pos.push(w);
/* Notify.js - http://notifyjs.com/ Copyright (c) 2015 MIT */
(function(window, document, $, undefined) {
"use strict";
//IE8 indexOf polyfill
var indexOf = [].indexOf || function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item) {
return i;
}
}
});
return pos;
};
return -1;
};
styles = {};
var pluginName = "notify";
var pluginClassName = pluginName + "js";
var blankFieldName = pluginName + "!blank";
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}\n\n." + pluginClassName + "-hidable {\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}"
};
var positions = {
t: "top",
m: "middle",
b: "bottom",
l: "left",
c: "center",
r: "right"
};
var hAligns = ["l", "c", "r"];
var vAligns = ["t", "m", "b"];
var mainPositions = ["t", "b", "l", "r"];
var opposites = {
t: "b",
m: null,
b: "t",
l: "r",
c: null,
r: "l"
};
stylePrefixes = {
"border-radius": ["-webkit-", "-moz-"]
};
getStyle = function(name) {
return styles[name];
};
addStyle = function(name, def) {
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 + "'");
}
styles[name].cssElem.remove();
}
def.name = name;
styles[name] = def;
cssText = "";
if (def.classes) {
$.each(def.classes, function(className, props) {
cssText += "." + pluginClassName + "-" + def.name + "-" + className + " {\n";
$.each(props, function(name, val) {
if (stylePrefixes[name]) {
$.each(stylePrefixes[name], function(i, prefix) {
return cssText += " " + prefix + name + ": " + val + ";\n";
});
}
return cssText += " " + name + ": " + val + ";\n";
});
return cssText += "}\n";
var parsePosition = function(str) {
var pos;
pos = [];
$.each(str.split(/\W+/), function(i, word) {
var w;
w = word.toLowerCase().charAt(0);
if (positions[w]) {
return pos.push(w);
}
});
}
if (def.css) {
cssText += "/* styles for " + def.name + " */\n" + def.css;
}
if (cssText) {
def.cssElem = insertCSS(cssText);
def.cssElem.attr('id', "notify-" + def.name);
}
fields = {};
elem = $(def.html);
findFields('html', elem, fields);
findFields('text', elem, fields);
return def.fields = fields;
};
return pos;
};
insertCSS = function(cssText) {
var elem;
elem = createElem("style");
elem.attr('type', 'text/css');
$("head").append(elem);
try {
elem.html(cssText);
} catch (e) {
elem[0].styleSheet.cssText = cssText;
}
return elem;
};
var styles = {};
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);
var 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}\n\n." + pluginClassName + "-hidable {\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}"
};
var stylePrefixes = {
"border-radius": ["-webkit-", "-moz-"]
};
var getStyle = function(name) {
return styles[name];
};
var addStyle = function(name, def) {
var cssText, elem, fields, ref;
if (!name) {
name = blankFieldName;
throw "Missing Style name";
}
return fields[name] = type;
});
};
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 + "'");
}
styles[name].cssElem.remove();
}
def.name = name;
styles[name] = def;
cssText = "";
if (def.classes) {
$.each(def.classes, function(className, props) {
cssText += "." + pluginClassName + "-" + def.name + "-" + className + " {\n";
$.each(props, function(name, val) {
if (stylePrefixes[name]) {
$.each(stylePrefixes[name], function(i, prefix) {
return cssText += " " + prefix + name + ": " + val + ";\n";
});
}
return cssText += " " + name + ": " + val + ";\n";
});
return cssText += "}\n";
});
}
if (def.css) {
cssText += "/* styles for " + def.name + " */\n" + def.css;
}
if (cssText) {
def.cssElem = insertCSS(cssText);
def.cssElem.attr("id", "notify-" + def.name);
}
fields = {};
elem = $(def.html);
findFields("html", elem, fields);
findFields("text", elem, fields);
return def.fields = fields;
};
find = function(elem, selector) {
if (elem.is(selector)) {
var insertCSS = function(cssText) {
var e, elem, error;
elem = createElem("style");
elem.attr("type", 'text/css');
$("head").append(elem);
try {
elem.html(cssText);
} catch (error) {
e = error;
elem[0].styleSheet.cssText = cssText;
}
return elem;
} else {
return elem.find(selector);
}
};
};
pluginOptions = {
clickToHide: true,
autoHide: true,
autoHideDelay: 5000,
arrowShow: true,
arrowSize: 5,
breakNewLines: true,
elementPosition: 'bottom',
globalPosition: 'top right',
style: 'bootstrap',
className: 'error',
showAnimation: 'slideDown',
showDuration: 400,
hideAnimation: 'slideUp',
hideDuration: 200,
gap: 5
};
inherit = function(a, b) {
var F;
F = function() {};
F.prototype = a;
return $.extend(true, new F(), b);
};
defaults = function(opts) {
return $.extend(pluginOptions, opts);
};
createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
globalAnchors = {};
getAnchorElement = function(element) {
var radios;
if (element.is('[type=radio]')) {
radios = element.parents('form:first').find('[type=radio]').filter(function(i, e) {
return $(e).attr('name') === element.attr('name');
var 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;
});
element = radios.first();
}
return element;
};
};
incr = function(obj, pos, val) {
var opp, temp;
if (typeof val === 'string') {
val = parseInt(val, 10);
} else if (typeof val !== 'number') {
return;
}
if (isNaN(val)) {
return;
}
opp = positions[opposites[pos.charAt(0)]];
temp = pos;
if (obj[opp] !== undefined) {
pos = positions[opp.charAt(0)];
val = -val;
}
if (obj[pos] === undefined) {
obj[pos] = val;
} else {
obj[pos] += val;
}
return null;
};
var find = function(elem, selector) {
if (elem.is(selector)) {
return elem;
} else {
return elem.find(selector);
}
};
realign = function(alignment, inner, outer) {
if (alignment === 'l' || alignment === 't') {
return 0;
} else if (alignment === 'c' || alignment === 'm') {
return outer / 2 - inner / 2;
} else if (alignment === 'r' || alignment === 'b') {
return outer - inner;
}
throw "Invalid alignment";
};
var pluginOptions = {
clickToHide: true,
autoHide: true,
autoHideDelay: 5000,
arrowShow: true,
arrowSize: 5,
breakNewLines: true,
elementPosition: "bottom",
globalPosition: "top right",
style: "bootstrap",
className: "error",
showAnimation: "slideDown",
showDuration: 400,
hideAnimation: "slideUp",
hideDuration: 200,
gap: 5
};
encode = function(text) {
encode.e = encode.e || createElem("div");
return encode.e.text(text).html();
};
var inherit = function(a, b) {
var F;
F = function() {};
F.prototype = a;
return $.extend(true, new F(), b);
};
Notification = (function() {
var defaults = function(opts) {
return $.extend(pluginOptions, opts);
};
var createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
var globalAnchors = {};
var getAnchorElement = function(element) {
var radios;
if (element.is('[type=radio]')) {
radios = element.parents('form:first').find('[type=radio]').filter(function(i, e) {
return $(e).attr("name") === element.attr("name");
});
element = radios.first();
}
return element;
};
var incr = function(obj, pos, val) {
var opp, temp;
if (typeof val === "string") {
val = parseInt(val, 10);
} else if (typeof val !== "number") {
return;
}
if (isNaN(val)) {
return;
}
opp = positions[opposites[pos.charAt(0)]];
temp = pos;
if (obj[opp] !== undefined) {
pos = positions[opp.charAt(0)];
val = -val;
}
if (obj[pos] === undefined) {
obj[pos] = val;
} else {
obj[pos] += val;
}
return null;
};
var realign = function(alignment, inner, outer) {
if (alignment === "l" || alignment === "t") {
return 0;
} else if (alignment === "c" || alignment === "m") {
return outer / 2 - inner / 2;
} else if (alignment === "r" || alignment === "b") {
return outer - inner;
}
throw "Invalid alignment";
};
var encode = function(text) {
encode.e = encode.e || createElem("div");
return encode.e.text(text).html();
};
function Notification(elem, data, options) {
if (typeof options === 'string') {
if (typeof options === "string") {
options = {
className: options
};
@@ -250,14 +246,14 @@ Notification = (function() {
this.loadHTML();
this.wrapper = $(coreStyle.html);
if (this.options.clickToHide) {
this.wrapper.addClass("" + pluginClassName + "-hidable");
this.wrapper.addClass(pluginClassName + "-hidable");
}
this.wrapper.data(pluginClassName, this);
this.arrow = this.wrapper.find("." + pluginClassName + "-arrow");
this.container = this.wrapper.find("." + pluginClassName + "-container");
this.container.append(this.userContainer);
if (elem && elem.length) {
this.elementType = elem.attr('type');
this.elementType = elem.attr("type");
this.originalElement = elem;
this.elem = getAnchorElement(elem);
this.elem.data(pluginClassName, this);
@@ -271,27 +267,28 @@ Notification = (function() {
var style;
style = this.getStyle();
this.userContainer = $(style.html);
return this.userFields = style.fields;
this.userFields = style.fields;
};
Notification.prototype.show = function(show, userCallback) {
var args, callback, elems, fn, hidden,
_this = this;
callback = function() {
if (!show && !_this.elem) {
_this.destroy();
}
if (userCallback) {
return userCallback();
}
};
var args, callback, elems, fn, hidden;
callback = (function(_this) {
return function() {
if (!show && !_this.elem) {
_this.destroy();
}
if (userCallback) {
return userCallback();
}
};
})(this);
hidden = this.container.parent().parents(':hidden').length > 0;
elems = this.container.add(this.arrow);
args = [];
if (hidden && show) {
fn = 'show';
fn = "show";
} else if (hidden && !show) {
fn = 'hide';
fn = "hide";
} else if (!hidden && show) {
fn = this.options.showAnimation;
args.push(this.options.showDuration);
@@ -306,8 +303,8 @@ Notification = (function() {
};
Notification.prototype.setGlobalPosition = function() {
var align, anchor, css, key, main, pAlign, pMain, _ref;
_ref = this.getPosition(), pMain = _ref[0], pAlign = _ref[1];
var align, anchor, css, key, main, pAlign, pMain, ref;
ref = this.getPosition(), pMain = ref[0], pAlign = ref[1];
main = positions[pMain];
align = positions[pAlign];
key = pMain + "|" + pAlign;
@@ -316,21 +313,21 @@ Notification = (function() {
anchor = globalAnchors[key] = createElem("div");
css = {};
css[main] = 0;
if (align === 'middle') {
if (align === "middle") {
css.top = '45%';
} else if (align === 'center') {
} else if (align === "center") {
css.left = '45%';
} else {
css[align] = 0;
}
anchor.css(css).addClass("" + pluginClassName + "-corner");
anchor.css(css).addClass(pluginClassName + "-corner");
$("body").append(anchor);
}
return anchor.prepend(this.wrapper);
};
Notification.prototype.setElementPosition = function() {
var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, position, wrapPos, _i, _j, _len, _len1, _ref;
var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, j, k, len, len1, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, position, ref, wrapPos;
position = this.getPosition();
pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position();
@@ -345,12 +342,12 @@ Notification = (function() {
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);
_ref = ['top', 'left'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
pos = _ref[_i];
css[oppFull] = pMain === "b" ? elemH : pMain === "r" ? elemW : 0;
incr(css, "top", elemPos.top - wrapPos.top);
incr(css, "left", elemPos.left - wrapPos.left);
ref = ["top", "left"];
for (j = 0, len = ref.length; j < len; j++) {
pos = ref[j];
margin = parseInt(this.elem.css("margin-" + pos), 10);
if (margin) {
incr(css, pos, margin);
@@ -363,53 +360,53 @@ Notification = (function() {
} else {
arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css);
arrowColor = this.userContainer.css("border-color") || this.userContainer.css("background-color") || 'white';
for (_j = 0, _len1 = mainPositions.length; _j < _len1; _j++) {
pos = mainPositions[_j];
arrowColor = this.userContainer.css("border-color") || this.userContainer.css("background-color") || "white";
for (k = 0, len1 = mainPositions.length; k < len1; k++) {
pos = mainPositions[k];
posFull = positions[pos];
if (pos === opp) {
continue;
}
color = posFull === mainFull ? arrowColor : 'transparent';
arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color;
color = posFull === mainFull ? arrowColor : "transparent";
arrowCss["border-" + posFull] = arrowSize + "px solid " + color;
}
incr(css, positions[opp], arrowSize);
if (__indexOf.call(mainPositions, pAlign) >= 0) {
if (indexOf.call(mainPositions, pAlign) >= 0) {
incr(arrowCss, positions[pAlign], arrowSize * 2);
}
}
if (__indexOf.call(vAligns, pMain) >= 0) {
incr(css, 'left', realign(pAlign, contW, elemW));
if (indexOf.call(vAligns, pMain) >= 0) {
incr(css, "left", realign(pAlign, contW, elemW));
if (arrowCss) {
incr(arrowCss, 'left', realign(pAlign, arrowSize, elemIW));
incr(arrowCss, "left", realign(pAlign, arrowSize, elemIW));
}
} else if (__indexOf.call(hAligns, pMain) >= 0) {
incr(css, 'top', realign(pAlign, contH, elemH));
} else if (indexOf.call(hAligns, pMain) >= 0) {
incr(css, "top", realign(pAlign, contH, elemH));
if (arrowCss) {
incr(arrowCss, 'top', realign(pAlign, arrowSize, elemIH));
incr(arrowCss, "top", realign(pAlign, arrowSize, elemIH));
}
}
if (this.container.is(":visible")) {
css.display = 'block';
css.display = "block";
}
this.container.removeAttr('style').css(css);
this.container.removeAttr("style").css(css);
if (arrowCss) {
return this.arrow.removeAttr('style').css(arrowCss);
return this.arrow.removeAttr("style").css(arrowCss);
}
};
Notification.prototype.getPosition = function() {
var pos, text, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
var pos, ref, ref1, ref2, ref3, ref4, ref5, text;
text = this.options.position || (this.elem ? this.options.elementPosition : this.options.globalPosition);
pos = parsePosition(text);
if (pos.length === 0) {
pos[0] = 'b';
pos[0] = "b";
}
if (_ref = pos[0], __indexOf.call(mainPositions, _ref) < 0) {
if (ref = pos[0], indexOf.call(mainPositions, ref) < 0) {
throw "Must be one of [" + mainPositions + "]";
}
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 (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 (pos.length === 2) {
pos[2] = pos[1];
@@ -423,7 +420,7 @@ Notification = (function() {
name = this.options.style;
}
if (!name) {
name = 'default';
name = "default";
}
style = styles[name];
if (!style) {
@@ -434,7 +431,7 @@ Notification = (function() {
Notification.prototype.updateClasses = function() {
var classes, style;
classes = ['base'];
classes = ["base"];
if ($.isArray(this.options.className)) {
classes = classes.concat(this.options.className);
} else if (this.options.className) {
@@ -442,17 +439,16 @@ Notification = (function() {
}
style = this.getStyle();
classes = $.map(classes, function(n) {
return "" + pluginClassName + "-" + style.name + "-" + n;
}).join(' ');
return this.userContainer.attr('class', classes);
return pluginClassName + "-" + style.name + "-" + n;
}).join(" ");
return this.userContainer.attr("class", classes);
};
Notification.prototype.run = function(data, options) {
var d, datas, name, type, value,
_this = this;
var d, datas, name, type, value;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
} else if ($.type(options) === "string") {
this.options.className = options;
}
if (this.container && !data) {
@@ -473,7 +469,7 @@ Notification = (function() {
if (!type) {
continue;
}
if (type === 'text') {
if (type === "text") {
d = encode(d);
if (this.options.breakNewLines) {
d = d.replace(/\n/g, '<br/>');
@@ -491,9 +487,7 @@ Notification = (function() {
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
return this.autohideTimer = setTimeout(function() {
return _this.show(false);
}, this.options.autoHideDelay);
this.autohideTimer = setTimeout(this.show.bind(this, false), this.options.autoHideDelay);
}
};
@@ -501,51 +495,92 @@ Notification = (function() {
return this.wrapper.remove();
};
return Notification;
})();
$[pluginName] = function(elem, data, options) {
if ((elem && elem.nodeName) || elem.jquery) {
$(elem)[pluginName](data, options);
} else {
options = data;
data = elem;
new Notification(null, data, options);
}
return elem;
};
$.fn[pluginName] = function(data, options) {
$(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(pluginClassName);
if (inst) {
return inst.run(data, options);
$[pluginName] = function(elem, data, options) {
if ((elem && elem.nodeName) || elem.jquery) {
$(elem)[pluginName](data, options);
} else {
return new Notification($(this), data, options);
options = data;
data = elem;
new Notification(null, data, options);
}
return elem;
};
$.fn[pluginName] = function(data, options) {
$(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(pluginClassName);
if (inst) {
return inst.run(data, options);
} else {
return new Notification($(this), data, options);
}
});
return this;
};
$.extend($[pluginName], {
defaults: defaults,
addStyle: addStyle,
pluginOptions: pluginOptions,
getStyle: getStyle,
insertCSS: insertCSS
});
//always include the default bootstrap style
addStyle("bootstrap", {
html: "<div>\n<span data-notify-text></span>\n</div>",
classes: {
base: {
"font-weight": "bold",
"padding": "8px 15px 8px 14px",
"text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)",
"background-color": "#fcf8e3",
"border": "1px solid #fbeed5",
"border-radius": "4px",
"white-space": "nowrap",
"padding-left": "25px",
"background-repeat": "no-repeat",
"background-position": "3px 7px"
},
error: {
"color": "#B94A48",
"background-color": "#F2DEDE",
"border-color": "#EED3D7",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=)"
},
success: {
"color": "#468847",
"background-color": "#DFF0D8",
"border-color": "#D6E9C6",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==)"
},
info: {
"color": "#3A87AD",
"background-color": "#D9EDF7",
"border-color": "#BCE8F1",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=)"
},
warn: {
"color": "#C09853",
"background-color": "#FCF8E3",
"border-color": "#FBEED5",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC)"
}
}
});
return this;
};
$.extend($[pluginName], {
defaults: defaults,
addStyle: addStyle,
pluginOptions: pluginOptions,
getStyle: getStyle,
insertCSS: insertCSS
});
$(function() {
insertCSS(coreStyle.css).attr('id', 'core-notify');
$(document).on('click', "." + pluginClassName + "-hidable", function(e) {
return $(this).trigger('notify-hide');
$(function() {
insertCSS(coreStyle.css).attr("id", "core-notify");
$(document).on("click", "." + pluginClassName + "-hidable", function(e) {
return $(this).trigger("notify-hide");
});
return $(document).on("notify-hide", "." + pluginClassName + "-wrapper", function(e) {
var elem = $(this).data(pluginClassName);
if(elem) {
elem.show(false);
}
});
});
return $(document).on('notify-hide', "." + pluginClassName + "-wrapper", function(e) {
var _ref;
return (_ref = $(this).data(pluginClassName)) != null ? _ref.show(false) : void 0;
});
});
}(window,document,jQuery));
}).call(this, window, document, jQuery);
dist/notify.min.js
Vendored
-5
View File
File diff suppressed because one or more lines are too long
dist/styles/bootstrap/notify-bootstrap.js
Vendored
-42
View File
@@ -1,42 +0,0 @@
$.notify.addStyle("bootstrap", {
html: "<div>\n<span data-notify-text></span>\n</div>",
classes: {
base: {
"font-weight": "bold",
"padding": "8px 15px 8px 14px",
"text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)",
"background-color": "#fcf8e3",
"border": "1px solid #fbeed5",
"border-radius": "4px",
"white-space": "nowrap",
"padding-left": "25px",
"background-repeat": "no-repeat",
"background-position": "3px 7px"
},
error: {
"color": "#B94A48",
"background-color": "#F2DEDE",
"border-color": "#EED3D7",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=)"
},
success: {
"color": "#468847",
"background-color": "#DFF0D8",
"border-color": "#D6E9C6",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==)"
},
info: {
"color": "#3A87AD",
"background-color": "#D9EDF7",
"border-color": "#BCE8F1",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=)"
},
warn: {
"color": "#C09853",
"background-color": "#FCF8E3",
"border-color": "#FBEED5",
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC)"
}
}
});
docs/Gruntsource.json
-8
View File
@@ -1,8 +0,0 @@
{
"source": "~/.grunt-sources/web",
"repo": "https://github.com/jpillora/grunt-source-web.git",
"output": {
"html": "../index.html"
},
"angular":true
}
docs/css/app.css
-1560
View File
File diff suppressed because it is too large Load Diff
docs/img/pointer.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

docs/index.html
-469
View File
@@ -1,469 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Notify.js</title>
<meta name="description" content="Notify.js - A simple, versatile notification library">
<meta name="author" content="Jaime Pillora &lt;dev@jpillora.com&gt;">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="docs/css/app.css">
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800" rel="stylesheet" type="text/css"><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body><a href="https://github.com/jpillora/notifyjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<div class="main container">
<div class="eight columns">
<h1 class="title">Notify.js</h1>
</div>
<div class="eight columns right"><span>
<iframe src="http://ghbtns.com/github-btn.html?user=jpillora&amp;type=follow" allowtransparency="true" frameborder="0" scrolling="0" width="130" height="20"></iframe></span><span>
<iframe src="http://ghbtns.com/github-btn.html?user=jpillora&amp;repo=notifyjs&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe></span><span><a href="https://twitter.com/share" data-url="http://notifyjs.com" data-text="Notify.js - A simple, versatile notification library" data-hashtags="notifyjs" class="twitter-share-button">Tweet</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script></span></div>
<hr>
<div class="eight columns summary">
<h3>Summary</h3>
<p>
Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
The javascript code snippets in this documentation with the <code>green</code> edge are runnable by clicking them.
</p>
<p>
<pre class="prettyprint runnable">$.notify("Hello World");</pre>
</p><img src="docs/img/pointer.png" class="demo-mouse">
</div>
<div class="eight columns">
<h3>Download</h3>
<p>Download pre-packaged with the Bootstrap notification style:<br><a href="dist/notify-combined.min.js" data-download data-name="notify.min">
<button>Download notify.min.js</button></a><a href="dist/notify-combined.js" data-download data-name="notify">
<button>Download notify.js</button></a></p>
<p>Or, create a custom build with your own style<br>
<button disabled="disabled" class="build-tool-loading">Loading...</button>
<button class="build-tool-toggle">Build a custom notify.js</button>
</p>
</div>
<div ng-app ng-controller="BuildController" class="sixteen columns build-tool">
<p class="center">Notify.js Core
<button disabled="disabled" class="active">Include</button>
</p>
<hr>
<p><span class="bold">Styles </span><br>
<div ng-repeat="style in styles" class="build-tool-style">
<div>
<textarea ng-model="style.code" class="code"></textarea>
</div>
<div class="right">
<button ng-click="active(style,'active')" ng-class="style.active &amp;&amp; 'active'">Include</button>
<button ng-click="useDefault(style)" ng-class="settings.default == style &amp;&amp; 'active'">Default</button>
<button ng-click="test($event,style)" class="test">Test</button>
<button ng-click="delete($index)">Delete</button>
</div>
</div>
<div class="build-tool-controls center">
<button ng-click="addStyle()">Add Style</button>
<select ng-options="p.name for p in premadeStyles" ng-model="toLoad"></select>
<button ng-click="loadStyle()">Load Style</button><span class="italic">Contribute more styles !</span>
</div>
</p>
<hr>
<p class="center">Minify
<button ng-click="active(settings,'minify')" ng-class="settings.minify &amp;&amp; 'active'">Minify this build</button>
</p>
<hr>
<p class="center">
<button ng-click="build()" ng-bind="building &amp;&amp; 'Building...' || 'Download this build'"></button><span class="italic indent2">Made with <a href="https://github.com/jpillora/compilejs" target="_blank">Compile.js</a></span>
</p>
</div>
<div class="sixteen columns">
<h3>Basic Usage</h3>
</div>
<div class="eight columns">
<h4>Element Notifications</h4>
<p>You can place notifications on any element:</p>
<p>
<pre class="prettyprint runnable">$(".elem-demo").notify("Hello Box");</pre>
</p>
<p class="center">Like this <span class="box elem-demo">box</span></p>
</div>
<div class="eight columns">
<h4>Global Notifications</h4>
<p>
If you don't specify an element, notification
will appear in the top left (unless you specify a
different position - See <a data-highlight>Positioning</a>)
</p>
<p>
<pre class="prettyprint runnable">$.notify("I'm over here !");</pre>
</p>
</div>
<div class="sixteen columns">
<h4>Notification Styles</h4>
<p>
Each style may define a set of classes to use to substyle the notification.
The pre-packaged version includes a bootstrap notification style (see more below in Styling).
These classes include:
</p>
<div><span>Success</span>
<pre class="prettyprint runnable indent1">$.notify("Access granted", "success");</pre><span>Info</span>
<pre class="prettyprint runnable indent1">$.notify("Do not press this button", "info");</pre><span>Warning</span>
<pre class="prettyprint runnable indent1">$.notify("Warning: Self-destruct in 3.. 2..", "warn");</pre><span>Error</span>
<pre class="prettyprint runnable indent1">$.notify("BOOM!", "error");</pre>
</div>
<p style="margin-top:10px" class="italic">Note: This page has set the default class to<code>"success"</code> with<code>$.notify.defaults({ className: "success" });</code>.</p>
</div>
<div id="position" class="sixteen columns">
<h3>Positioning</h3>
<p>
Element notifications and Global notifications can
be vertically repositioned to: <code>"top"</code>, <code>"middle" </code>or <code>"bottom" </code>and horozontally repositioned to: <code>"left"</code>, <code>"center" </code>or <code>"right" </code>.
</p>
<p>
<pre class="prettyprint runnable">$(".pos-demo").notify(
"I'm left of the box",
{ position:"left" }
);</pre>
</p>
<p class="center">We can position the notification around this <span class="box pos-demo">box</span></p>
<p style="padding-top: 30px">Use this positioning tool to see all possible position combinations </p>
<div style="padding: 30px;">
<label for="pos-elem" class="inline">Element</label>
<input type="radio" id="pos-elem" value="elem" name="pos-type" checked="checked">
<label for="pos-glob" class="inline">Global</label>
<input type="radio" id="pos-glob" value="glob" name="pos-type">
</div>
<div style="margin-left: 60px">
<input data-thickness=".3" data-width="100" data-height="100" data-max="12" data-cursor="true" data-fgColor="#080" data-displayInput="false" data-angleOffset="-15" data-linecap="round" class="pos-chooser">
</div>
<p class="center"><span>An awesome cool </span><span class="box pos-chooser-demo">larrrggggeeee box</span></p>
</div>
<div class="sixteen columns">
<h3>API</h3>
<div class="entry">
<h5><code class="black">$.notify( </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
<p class="indent1"><code>string|object</code> - global notification data<br><code>options</code> - an options object or class name string </p>
</div>
<div class="entry">
<h5><code class="black">$.notify( </code><code>element</code><code class="black">, </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
<p class="indent1"><code>element</code> - a jquery element<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
</div>
<div class="entry">
<h5><code class="black">$( </code><code>selector</code><code class="black"> ).notify( </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
<p class="indent1"><code>selector</code> - jquery selector<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
</div>
<div class="entry">
<h5><code class="black">$.notify.addStyle( </code><code>styleName</code><code class="black">, </code><code>styleDefinition</code><code class="black"> )</code></h5>
<p class="indent1"><code>styleName</code> - string (the <b>style</b> option references this name)<br> <code>styleDefinition</code> - style definition object (see <b>Styling</b> below)</p>
</div>
<div class="entry">
<h5><code class="black">$.notify.defaults( </code><code>options</code><code class="black"> )</code></h5>
<p class="indent1"><code>options</code> - an options object (updates the defaults listed below) </p>
</div>
</div>
<div class="sixteen columns">
<h3>Options</h3>
<p>
The options object listed above are in the form below.
This object below is the actual used to check option
validity and set defaults.
</p>
<pre class="prettyprint">{
// whether to hide the notification on click
clickToHide: true,
// whether to auto-hide the notification
autoHide: true,
// if autoHide, hide after milliseconds
autoHideDelay: 5000,
// show the arrow pointing at the element
arrowShow: true,
// arrow size in pixels
arrowSize: 5,
// default positions
elementPosition: 'bottom left',
globalPosition: 'top right',
// default style
style: 'bootstrap',
// default class (string or [string])
className: 'error',
// show animation
showAnimation: 'slideDown',
// show animation duration
showDuration: 400,
// hide animation
hideAnimation: 'slideUp',
// hide animation duration
hideDuration: 200,
// padding between element and notification
gap: 2
}
</pre>
</div>
<div class="sixteen columns">
<div class="section">
<h3>Custom Styling Guide</h3>
<p>You can add your own styles to Notify.js with the<code>$.notify.addStyle </code>method. See <a data-highlight>API</a>.</p>
<p>Style definition objects are in the form:</p>
<pre class="prettyprint">{
//required html representing each notification
html: "",
//optional object to be converted to css
classes: {
&lt;className&gt;: {
&lt;propertyName&gt;: &lt;value&gt;
},
&lt;className&gt;: {
...
},
...
},
//optional css to be inserted onto the page
css: ""
}
</pre>
<p>
<h5 class="inline">html</h5> - If you only have HTML element that you need to modify per
notification then you should give this element an attribute of <code>data-notify-text</code> or <code>data-notify-html</code>. Use <code>data-notify-html</code> if you wish to display arbitrary HTML inside the notification,
otherwise, use <code>data-notify-text</code> as it is more secure.<br> Otherwise, if you wish to modify multiple HTML elements per
notification then you'll need to give each element one of the two
attributes above <b>as well as a value</b>. For an example of this see the Advanced Example below.
</p>
<p>
<h5 class="inline">classes</h5> - This object will be used to construct css. It must be in the form described above and there is an example below.
</p>
<p>
<h5 class="inline">css</h5> - This string is simply raw css. Use this property if you want to keep your style definition inside
your js files.
</p>
</div>
<div class="section">
<h4>Class naming convention</h4>
<p>
When each notification is constructed, it's container
(outer most element defined in your style html) will automatically
apply the class:
</p>
<p><code>notifyjs-&lt;style name&gt;-base</code></p>
<p>
When you use the class name option (<code>className</code>) the class:
</p>
<p><code>notifyjs-&lt;style name&gt;-&lt;class name&gt;</code></p>
<p>
will be applied. So if you define your styles in an external CSS file or in the style's css
property, you must define your CSS rules using this naming convention.
</p>
</div>
<div class="section">
<h4>Simple Example</h4>
<p>If you were to define the style:</p>
<pre class="prettyprint auto-run happyblue-example">$.notify.addStyle('happyblue', {
html: "&lt;div&gt;☺&lt;span data-notify-text/&gt;☺&lt;/div&gt;",
classes: {
base: {
"white-space": "nowrap",
"background-color": "lightblue",
"padding": "5px"
},
superblue: {
"color": "white",
"background-color": "blue"
}
}
});
</pre>
<p>Upon running this code, the <code>classes</code> object in this example will be converted the following css:</p>
<pre class="prettyprint lang-css">.notifyjs-happyblue-base {
white-space: nowrap;
background-color: lightblue;
padding: 5px;
}
.notifyjs-happyblue-superblue {
color: white;
background-color: blue;
}</pre>
<p:i>You can confirm this now by inspecting the DOM (look for the tagged style element in the head)</p:i>
<p>You can now use your new style with:</p>
<pre class="prettyprint runnable">$.notify('hello !!', {
style: 'happyblue'
});
</pre>
<p>
and you can use the <code>superblue</code> class with:
</p>
<pre class="prettyprint runnable">$.notify('HELLO !!!!', {
style: 'happyblue',
className: 'superblue'
});
</pre>
</div>
<div class="section">
<h4>Advanced Example</h4>
<p>Say you wanted to use buttons in your notifications then you could do something like:</p>
<pre class="prettyprint auto-run button-js-example">//add a new style 'foo'
$.notify.addStyle('foo', {
html:
"&lt;div&gt;" +
"&lt;div class='clearfix'&gt;" +
"&lt;div class='title' data-notify-html='title'/&gt;" +
"&lt;div class='buttons'&gt;" +
"&lt;button class='no'&gt;Cancel&lt;/button&gt;" +
"&lt;button class='yes' data-notify-text='button'&gt;&lt;/button&gt;" +
"&lt;/div&gt;" +
"&lt;/div&gt;" +
"&lt;/div&gt;"
});
//listen for click events from this style
$(document).on('click', '.notifyjs-foo-base .no', function() {
//programmatically trigger propogating hide event
$(this).trigger('notify-hide');
});
$(document).on('click', '.notifyjs-foo-base .yes', function() {
//show button text
alert($(this).text() + " clicked!");
//hide notification
$(this).trigger('notify-hide');
});
</pre>
<p>
Notice there is no <code>classes</code> property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:
</p>
<p class="italic">Note: you could also convert this CSS code to a JavaScript string and use it with the <code>css</code> property. It's not very readable though it's better for distribution.</p>
<pre class="prettyprint auto-add foo-css-example lang-css">.notifyjs-foo-base {
opacity: 0.85;
width: 200px;
background: #F5F5F5;
padding: 5px;
border-radius: 10px;
}
.notifyjs-foo-base .title {
width: 100px;
float: left;
margin: 10px 0 0 10px;
text-align: right;
}
.notifyjs-foo-base .buttons {
width: 70px;
float: right;
font-size: 9px;
padding: 5px;
margin: 2px;
}
.notifyjs-foo-base button {
font-size: 9px;
padding: 5px;
margin: 2px;
width: 60px;
}
</pre>
<p>You can now use this style with:</p>
<pre class="prettyprint runnable">$.notify({
title: 'Would you like some Foo ?',
button: 'Confirm'
}, {
style: 'foo',
autoHide: false,
clickToHide: false
});
</pre>
</div>
<div class="section">
<h4>Extra Example</h4>
<p>
If using the above methods still don't provide you
with what you need then you can, pass jQuery objects
straight into the notification (provided that the
element has the <code>data-notify-html</code> attribute):
</p>
<pre class="prettyprint runnable">var h5 = $("&lt;h5/&gt;").append("You MUST have some Foo !")
$.notify({
title: h5,
button: 'YES !'
}, {
style: 'foo',
autoHide: false,
clickToHide: false
});
</pre>
</div>
<div class="section">
<h4>Style List</h4>
<p><span>Currently there is only one style available</span>
<ul class="square">
<li><a href="../../notifyjs/dist/styles/notify-bootstrap.js" target="_blank">notify-bootstrap.js</a></li>
</ul>
</p>
</div>
</div>
<div class="sixteen columns">
<h3>Contributing More Styles </h3>
<p>
Contributing more styles is easy!
<ol>
<li>Click <a href="https://github.com/jpillora/notifyjs/new/master/src/styles" target="_blank">this</a> link</li>
<li>Sign into GitHub (if you're not already)</li>
<li>Click 'Fork'</li>
<li>Enter your new style</li>
<li>Click 'Commit New File'</li>
<li>Click 'Send Pull Request'!</li>
</ol>
</p>
<p>To get people started with some styles ideas, checkout this <a href="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/" target="_blank">post on various Growl styles</a>.</p>
<p class="italic">
Note: If you wish to contribute to the library by fixing bugs or adding features,
see the <b>src</b> folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript.
I'm using <a href="https://gruntjs.com" target="_blank">Grunt </a> to compile, minify and concat the builds, you can do so with:
<ol>
<li>Fork <a href="https://github.com/jpillora/notifyjs">https://github.com/jpillora/notifyjs</a></li>
<li><code>cd notifyjs</code></li>
<li><code>npm install -g grunt-cli</code></li>
<li><code>npm install</code></li>
<li><code>grunt</code></li>
<li>Pull-request ! </li>
</ol>
</p>
</div>
</div>
<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" id="bootstrap-style"></script>
<script src="docs/js/app.js"></script>
<script defered src="http://jpillora.com/compilejs/dist/compile.js"></script>
<script defered src="http://jpillora.com/compilejs/dist/tasks/compile.uglify.js"></script>
<script defered src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script>
//async fonts
WebFontConfig = { google: { families: [ 'Droid+Sans+Mono::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
//ga
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38709761-6', 'notifyjs.com');
ga('send', 'pageview');
</script>
</body>
</html>
docs/js/app.js
-1039
View File
File diff suppressed because it is too large Load Diff
docs/src/scripts/app.coffee
-29
View File
@@ -1,29 +0,0 @@
App = App or {}
App.init = ->
$.notify.defaults
className: 'success'
App.codeRunner()
App.posChooser()
# download links
$(document).on 'click', "a[data-download]", (e) ->
if $.compile
url = $(@).attr 'href'
name = $(@).attr('data-name') || 'lib'
$.compile.fetch(name, url).download(name)
ga 'send', 'event', 'download', name
e.preventDefault()
return false
return true
mouseDemo = $ ".demo-mouse"
$('.summary').hover ->
mouseDemo.addClass "over"
, ->
mouseDemo.removeClass "over"
$ App.init
docs/src/scripts/build-tool.coffee
-186
View File
@@ -1,186 +0,0 @@
App = window.App = App or {}
window.BuildController = ($scope,$timeout) ->
$scope.premadeStyles = [
{
name: "bootstrap"
}
{
name: "metro"
css: true
global: true
test: (text) -> {
title: 'Email Notification'
text: 'You received an e-mail from your boss. You should read it right now!'
image: "<img src='examples/images/Mail.png'/>"
}
}
]
$(".build-tool-loading").hide()
$(".build-tool-toggle").show()
App.buildTool = $scope
$scope.settings = {
minify: false
default: null
}
$scope.styles = []
$scope.addStyle = (code, premade) ->
style = { active: true, code, premade:premade }
$scope.styles.push style
$scope.settings.default = style unless $scope.settings.default
$scope.loadStyle = ->
style = $scope.premadeStyle
return unless style
$scope.premadeStyle = null
baseUrl = "dist/styles/#{style.name}/notify-#{style.name}"
$.ajax
url: "#{baseUrl}.js"
dataType: 'text'
success: (js) ->
if style.css
$.ajax
url: "#{baseUrl}.css"
dataType: 'text'
success: (css) ->
css = css.replace /(.+)$/mg, '"$1\\n"+'
$scope.addStyle "#{js}\n$.notify.insertCSS(\n#{css}\"\");", style
$scope.$digest()
else
$scope.addStyle js, style
$scope.$digest()
return
#load bootstrap
$scope.premadeStyle = $scope.premadeStyles[0]
$scope.loadStyle()
#angular has loaded
$scope.toggle = ->
$(".build-tool-toggle").toggleClass('active')
$(".build-tool").toggle(400)
elem = $(".build-tool-toggle").click $scope.toggle
$scope.active = (scope, prop) ->
scope[prop] = !scope[prop]
# $scope.$digest()
$scope.useDefault = (style) ->
$scope.settings.default = style
$scope.delete = (i) ->
$scope.styles.splice i,1
getStyleName = (style) ->
unless style?.code
return null
m = style.code.match /\$\.notify\.addStyle\('(["\w-]+)'/
unless m
m = style.code.match /\$\.notify\.addStyle\("(['\w-]+)"/
unless m
return null
m[1]
$scope.test = (event,style,global) ->
testBtn = $(event.target)
contentText = testBtn.parent().parent().find('.code')
code = style.code
unless code
contentText.notify("No code", "error")
return
name = getStyleName style
unless name
contentText.notify("Style name not found", "error")
if code isnt style.lastEval
try
eval(code)
style.lastEval = code
catch e
contentText.notify(e, "error")
return
notifyStyle = $.notify.getStyle name
unless notifyStyle
testBtn.notify("No style added", "error")
return
classes = Object.keys notifyStyle.classes
rand = Math.floor Math.random()*classes.length
className = classes[rand]
obj = if className is 'base' then 'no class' else "'#{className}'"
if style.premade?.test
obj = style.premade.test obj
try
if global
$.notify(obj, {style:name, className })
else
testBtn.notify(obj, {style:name, className })
catch e
testBtn.notify(e, "error")
return
$scope.build = ->
return if $scope.building
$scope.building = true
done = ->
ga 'send', 'event', 'download', 'notify-custom.js'
$scope.building = false
$scope.$digest()
c = $.compile.
fetch('core', 'dist/notify.js').
set('set-defaults', """
$.notify.defaults({
style: "#{getStyleName $scope.settings.default}"
});
""")
names = {}
styles = []
$.each $scope.styles, (i,s) ->
return unless s.active
name = getStyleName s
return unless name
if names[name]
$.notify "Skipping style '#{name}' as it already exists", "warn"
return
names[name] = 1
name = "style-#{i}-#{name}"
styles.push name
c.set name, s.code
c.run('concat',{
src: ['core','set-defaults'].concat(styles)
dest: 'result'
})
if $scope.settings.minify
c.run('uglify', {
src: 'result',
dest: 'result-min'
}).
download('result-min', 'notify-custom.min.js').
get('result-min', done)
else
c.download('result', 'notify-custom.js').
get('result', done)
docs/src/scripts/code-runner.coffee
-65
View File
@@ -1,65 +0,0 @@
App = App or {}
App.codeRunner = ->
prettyPrint()
addCSS = (e) ->
pre = $(@)
$.notify.insertCSS pre.text()
ranSnippet = false
runSnippet = (e) ->
if e and e.type is 'click'
ranSnippet = true
pre = $(@)
pre.addClass 'running'
eval(pre.text())
setTimeout ->
pre.removeClass 'running'
, 500
null
#show tip
setTimeout ->
unless ranSnippet
$.notify('Tip: You can run the code snippets by clicking them', {className:'info', position:'b l'})
, 30*1000
$(document).on('click', '.prettyprint.runnable', runSnippet)
$(".prettyprint.auto-run").each(runSnippet)
$(".prettyprint.auto-add").each(addCSS)
#show gswg ad
$.notify.addStyle 'gswg',
html: """<div>
<div class="content clearfix">
<div class="cover"></div>
<div class="text">
<div>Read my book:</div>
<div class="title">Getting Started with Grunt: The JavaScript Task Runner</div>
<div>Get the first chapter for free!</div>
<div>
<a target="_blank" href="http://gswg.io">
<button data-notify-text></button>
</a>
<button>No thanks</button>
</div>
</div>
</div>
</div>
"""
$(document).on 'click', '.notifyjs-gswg-base button', ->
$(this).trigger('notify-hide')
$.notify("http://gswg.io", {position:'b r', style: 'gswg', autoHide: false, clickToHide: false})
docs/src/scripts/pos-chooser.coffee
-45
View File
@@ -1,45 +0,0 @@
App = App or {}
mod = (v,m) -> (if v<0 then m else 0) + v%m
App.posChooser = ->
if /MSIE (\d)/.test(window.navigator.userAgent) and
parseInt(RegExp.$1,10) < 8
return
positions = []
mPos = ['top','right','bottom','left']
vPos = ['top','middle','bottom']
hPos = ['left','center','right']
for p1 in mPos
p2s = if p1 in vPos then hPos else vPos
p2s.reverse() if p1 in ['bottom','left']
for p2 in p2s
positions.push "#{p1} #{p2}"
currPos = 'top left'
currType = 'elem'
open = ->
opts =
position: currPos
if currType is 'elem'
$(".pos-chooser-demo").notify "#{currPos}", opts
else
$.notify "#{currPos}", opts
$(".pos-chooser").knob
stopper: false
change: (val) ->
val = mod val,positions.length
currPos = positions[val]
open()
$(".pos-chooser").siblings().first().addClass(".pos-chooser-dial")
$(document).on 'click', 'input[name=pos-type]', ->
currType = $(@).val()
open()
docs/src/scripts/vendor/jquery.knob.js
Vendored
-668
View File
@@ -1,668 +0,0 @@
/*!jQuery Knob*/
/**
* Downward compatible, touchable dial
*
* Version: 1.2.0 (15/07/2012)
* Requires: jQuery v1.7+
*
* Copyright (c) 2012 Anthony Terrien
* Under MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
*/
(function($) {
/**
* Kontrol library
*/
"use strict";
/**
* Check canvas support
*/
var elem = document.createElement('canvas');
if(!elem.getContext || !elem.getContext('2d'))
return $.fn.knob = $.noop;
/**
* Definition of globals and core
*/
var k = {}, // kontrol
max = Math.max,
min = Math.min;
k.c = {};
k.c.d = $(document);
k.c.t = function (e) {
return e.originalEvent.touches.length - 1;
};
/**
* Kontrol Object
*
* Definition of an abstract UI control
*
* Each concrete component must call this one.
* <code>
* k.o.call(this);
* </code>
*/
k.o = function () {
var s = this;
this.o = null; // array of options
this.$ = null; // jQuery wrapped element
this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
this.g = null; // 2D graphics context for 'pre-rendering'
this.v = null; // value ; mixed array or integer
this.cv = null; // change value ; not commited value
this.x = 0; // canvas x position
this.y = 0; // canvas y position
this.$c = null; // jQuery canvas element
this.c = null; // rendered canvas context
this.t = 0; // touches index
this.isInit = false;
this.fgColor = null; // main color
this.pColor = null; // previous color
this.dH = null; // draw hook
this.cH = null; // change hook
this.eH = null; // cancel hook
this.rH = null; // release hook
this.run = function () {
var cf = function (e, conf) {
var k;
for (k in conf) {
s.o[k] = conf[k];
}
s.init();
s._configure()
._draw();
};
if(this.$.data('kontroled')) return;
this.$.data('kontroled', true);
this.extend();
this.o = $.extend(
{
// Config
min : this.$.data('min') || 0,
max : this.$.data('max') || 100,
stopper : true,
readOnly : this.$.data('readonly'),
// UI
cursor : (this.$.data('cursor') === true && 30)
|| this.$.data('cursor')
|| 0,
thickness : this.$.data('thickness') || 0.35,
lineCap : this.$.data('linecap') || 'butt',
width : this.$.data('width') || 200,
height : this.$.data('height') || 200,
displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'),
displayPrevious : this.$.data('displayprevious'),
fgColor : this.$.data('fgcolor') || '#87CEEB',
inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB',
inline : false,
step : this.$.data('step') || 1,
// Hooks
draw : null, // function () {}
change : null, // function (value) {}
cancel : null, // function () {}
release : null // function (value) {}
}, this.o
);
// routing value
if(this.$.is('fieldset')) {
// fieldset = array of integer
this.v = {};
this.i = this.$.find('input')
this.i.each(function(k) {
var $this = $(this);
s.i[k] = $this;
s.v[k] = $this.val();
$this.bind(
'change'
, function () {
var val = {};
val[k] = $this.val();
s.val(val);
}
);
});
this.$.find('legend').remove();
} else {
// input = integer
this.i = this.$;
this.v = this.$.val();
(this.v == '') && (this.v = this.o.min);
this.$.bind(
'change'
, function () {
s.val(s._validate(s.$.val()));
}
);
}
(!this.o.displayInput) && this.$.hide();
this.$c = $('<canvas width="' +
this.o.width + 'px" height="' +
this.o.height + 'px"></canvas>');
this.c = this.$c[0].getContext("2d");
this.$
.wrap($('<div style="' + (this.o.inline ? 'display:inline;' : '') +
'width:' + this.o.width + 'px;height:' +
this.o.height + 'px;"></div>'))
.before(this.$c);
if (this.v instanceof Object) {
this.cv = {};
this.copy(this.v, this.cv);
} else {
this.cv = this.v;
}
this.$
.bind("configure", cf)
.parent()
.bind("configure", cf);
this._listen()
._configure()
._xy()
.init();
this.isInit = true;
this._draw();
return this;
};
this._draw = function () {
// canvas pre-rendering
var d = true,
c = document.createElement('canvas');
c.width = s.o.width;
c.height = s.o.height;
s.g = c.getContext('2d');
s.clear();
s.dH
&& (d = s.dH());
(d !== false) && s.draw();
s.c.drawImage(c, 0, 0);
c = null;
};
this._touch = function (e) {
var touchMove = function (e) {
var v = s.xy2val(
e.originalEvent.touches[s.t].pageX,
e.originalEvent.touches[s.t].pageY
);
if (v == s.cv) return;
if (
s.cH
&& (s.cH(v) === false)
) return;
s.change(s._validate(v));
s._draw();
};
// get touches index
this.t = k.c.t(e);
// First touch
touchMove(e);
// Touch events listeners
k.c.d
.bind("touchmove.k", touchMove)
.bind(
"touchend.k"
, function () {
k.c.d.unbind('touchmove.k touchend.k');
if (
s.rH
&& (s.rH(s.cv) === false)
) return;
s.val(s.cv);
}
);
return this;
};
this._mouse = function (e) {
var mouseMove = function (e) {
var v = s.xy2val(e.pageX, e.pageY);
if (v == s.cv) return;
if (
s.cH
&& (s.cH(v) === false)
) return;
s.change(s._validate(v));
s._draw();
};
// First click
mouseMove(e);
// Mouse events listeners
k.c.d
.bind("mousemove.k", mouseMove)
.bind(
// Escape key cancel current change
"keyup.k"
, function (e) {
if (e.keyCode === 27) {
k.c.d.unbind("mouseup.k mousemove.k keyup.k");
if (
s.eH
&& (s.eH() === false)
) return;
s.cancel();
}
}
)
.bind(
"mouseup.k"
, function (e) {
k.c.d.unbind('mousemove.k mouseup.k keyup.k');
if (
s.rH
&& (s.rH(s.cv) === false)
) return;
s.val(s.cv);
}
);
return this;
};
this._xy = function () {
var o = this.$c.offset();
this.x = o.left;
this.y = o.top;
return this;
};
this._listen = function () {
if (!this.o.readOnly) {
this.$c
.bind(
"mousedown"
, function (e) {
e.preventDefault();
s._xy()._mouse(e);
}
)
.bind(
"touchstart"
, function (e) {
e.preventDefault();
s._xy()._touch(e);
}
);
this.listen();
} else {
this.$.attr('readonly', 'readonly');
}
return this;
};
this._configure = function () {
// Hooks
if (this.o.draw) this.dH = this.o.draw;
if (this.o.change) this.cH = this.o.change;
if (this.o.cancel) this.eH = this.o.cancel;
if (this.o.release) this.rH = this.o.release;
if (this.o.displayPrevious) {
this.pColor = this.h2rgba(this.o.fgColor, "0.4");
this.fgColor = this.h2rgba(this.o.fgColor, "0.6");
} else {
this.fgColor = this.o.fgColor;
}
return this;
};
this._clear = function () {
this.$c[0].width = this.$c[0].width;
};
this._validate = function(v) {
return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
};
// Abstract methods
this.listen = function () {}; // on start, one time
this.extend = function () {}; // each time configure triggered
this.init = function () {}; // each time configure triggered
this.change = function (v) {}; // on change
this.val = function (v) {}; // on release
this.xy2val = function (x, y) {}; //
this.draw = function () {}; // on change / on release
this.clear = function () { this._clear(); };
// Utils
this.h2rgba = function (h, a) {
var rgb;
h = h.substring(1,7)
rgb = [parseInt(h.substring(0,2),16)
,parseInt(h.substring(2,4),16)
,parseInt(h.substring(4,6),16)];
return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
};
this.copy = function (f, t) {
for (var i in f) { t[i] = f[i]; }
};
};
/**
* k.Dial
*/
k.Dial = function () {
k.o.call(this);
this.startAngle = null;
this.xy = null;
this.radius = null;
this.lineWidth = null;
this.cursorExt = null;
this.w2 = null;
this.PI2 = 2*Math.PI;
this.extend = function () {
this.o = $.extend(
{
bgColor : this.$.data('bgcolor') || '#EEEEEE',
angleOffset : this.$.data('angleoffset') || 0,
angleArc : this.$.data('anglearc') || 360,
inline : true
}, this.o
);
};
this.val = function (v) {
if (null != v) {
this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
this.v = this.cv;
this.$.val(this.v);
this._draw();
} else {
return this.v;
}
};
this.xy2val = function (x, y) {
var a, ret;
a = Math.atan2(
x - (this.x + this.w2)
, - (y - this.y - this.w2)
) - this.angleOffset;
if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
// if isset angleArc option, set to min if .5 under min
a = 0;
} else if (a < 0) {
a += this.PI2;
}
ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc))
+ this.o.min;
this.o.stopper
&& (ret = max(min(ret, this.o.max), this.o.min));
return ret;
};
this.listen = function () {
// bind MouseWheel
var s = this,
mw = function (e) {
e.preventDefault();
var ori = e.originalEvent
,deltaX = ori.detail || ori.wheelDeltaX
,deltaY = ori.detail || ori.wheelDeltaY
,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
if (
s.cH
&& (s.cH(v) === false)
) return;
s.val(v);
}
, kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
this.$
.bind(
"keydown"
,function (e) {
var kc = e.keyCode;
// numpad support
if(kc >= 96 && kc <= 105) {
kc = e.keyCode = kc - 48;
}
kval = parseInt(String.fromCharCode(kc));
if (isNaN(kval)) {
(kc !== 13) // enter
&& (kc !== 8) // bs
&& (kc !== 9) // tab
&& (kc !== 189) // -
&& e.preventDefault();
// arrows
if ($.inArray(kc,[37,38,39,40]) > -1) {
e.preventDefault();
var v = parseInt(s.$.val()) + kv[kc] * m;
s.o.stopper
&& (v = max(min(v, s.o.max), s.o.min));
s.change(v);
s._draw();
// long time keydown speed-up
to = window.setTimeout(
function () { m*=2; }
,30
);
}
}
}
)
.bind(
"keyup"
,function (e) {
if (isNaN(kval)) {
if (to) {
window.clearTimeout(to);
to = null;
m = 1;
s.val(s.$.val());
}
} else {
// kval postcond
(s.$.val() > s.o.max && s.$.val(s.o.max))
|| (s.$.val() < s.o.min && s.$.val(s.o.min));
}
}
);
this.$c.bind("mousewheel DOMMouseScroll", mw);
this.$.bind("mousewheel DOMMouseScroll", mw)
};
this.init = function () {
if (
this.v < this.o.min
|| this.v > this.o.max
) this.v = this.o.min;
this.$.val(this.v);
this.w2 = this.o.width / 2;
this.cursorExt = this.o.cursor / 100;
this.xy = this.w2;
this.lineWidth = this.xy * this.o.thickness;
this.lineCap = this.o.lineCap;
this.radius = this.xy - this.lineWidth / 2;
this.o.angleOffset
&& (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
this.o.angleArc
&& (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
// deg to rad
this.angleOffset = this.o.angleOffset * Math.PI / 180;
this.angleArc = this.o.angleArc * Math.PI / 180;
// compute start and end angles
this.startAngle = 1.5 * Math.PI + this.angleOffset;
this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
var s = max(
String(Math.abs(this.o.max)).length
, String(Math.abs(this.o.min)).length
, 2
) + 2;
this.o.displayInput
&& this.i.css({
'width' : ((this.o.width / 2 + 4) >> 0) + 'px'
,'height' : ((this.o.width / 3) >> 0) + 'px'
,'position' : 'absolute'
,'vertical-align' : 'middle'
,'margin-top' : ((this.o.width / 3) >> 0) + 'px'
,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px'
,'border' : 0
,'background' : 'none'
,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial'
,'text-align' : 'center'
,'color' : this.o.inputColor || this.o.fgColor
,'padding' : '0px'
,'-webkit-appearance': 'none'
})
|| this.i.css({
'width' : '0px'
,'visibility' : 'hidden'
});
};
this.change = function (v) {
this.cv = v;
this.$.val(v);
};
this.angle = function (v) {
return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
};
this.draw = function () {
var c = this.g, // context
a = this.angle(this.cv) // Angle
, sat = this.startAngle // Start angle
, eat = sat + a // End angle
, sa, ea // Previous angles
, r = 1;
c.lineWidth = this.lineWidth;
c.lineCap = this.lineCap;
this.o.cursor
&& (sat = eat - this.cursorExt)
&& (eat = eat + this.cursorExt);
c.beginPath();
c.strokeStyle = this.o.bgColor;
c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true);
c.stroke();
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
sa = this.startAngle;
this.o.cursor
&& (sa = ea - this.cursorExt)
&& (ea = ea + this.cursorExt);
c.beginPath();
c.strokeStyle = this.pColor;
c.arc(this.xy, this.xy, this.radius, sa, ea, false);
c.stroke();
r = (this.cv == this.v);
}
c.beginPath();
c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
c.arc(this.xy, this.xy, this.radius, sat, eat, false);
c.stroke();
};
this.cancel = function () {
this.val(this.v);
};
};
$.fn.dial = $.fn.knob = function (o) {
return this.each(
function () {
var d = new k.Dial();
d.o = o;
d.$ = $(this);
d.run();
}
).parent();
};
})(jQuery);
docs/src/scripts/vendor/prettify.js
Vendored
-33
View File
@@ -1,33 +0,0 @@
!function(){var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return(b=r[a])?b:"0"<=a&&a<="7"?parseInt(e.substring(1),8):a==="u"||a==="x"?parseInt(e.substring(2),16):e.charCodeAt(1)}function g(e){if(e<32)return(e<16?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return e==="\\"||e==="-"||e==="]"||e==="^"?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),e=[],a=
b[0]==="^",c=["["];a&&c.push("^");for(var a=a?1:0,f=b.length;a<f;++a){var h=b[a];if(/\\[bdsw]/i.test(h))c.push(h);else{var h=d(h),l;a+2<f&&"-"===b[a+1]?(l=d(b[a+2]),a+=2):l=h;e.push([h,l]);l<65||h>122||(l<65||h>90||e.push([Math.max(65,h)|32,Math.min(l,90)|32]),l<97||h>122||e.push([Math.max(97,h)&-33,Math.min(l,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];f=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=f[1]+1?f[1]=Math.max(f[1],h[1]):b.push(f=h);for(a=0;a<b.length;++a)h=b[a],c.push(g(h[0])),
h[1]>h[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(g(h[1])));c.push("]");return c.join("")}function s(e){for(var a=e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],f=0,h=0;f<c;++f){var l=a[f];l==="("?++h:"\\"===l.charAt(0)&&(l=+l.substring(1))&&(l<=h?d[l]=-1:a[f]=g(l))}for(f=1;f<d.length;++f)-1===d[f]&&(d[f]=++x);for(h=f=0;f<c;++f)l=a[f],l==="("?(++h,d[h]||(a[f]="(?:")):"\\"===l.charAt(0)&&(l=+l.substring(1))&&l<=h&&
(a[f]="\\"+d[l]);for(f=0;f<c;++f)"^"===a[f]&&"^"!==a[f+1]&&(a[f]="");if(e.ignoreCase&&m)for(f=0;f<c;++f)l=a[f],e=l.charAt(0),l.length>=2&&e==="["?a[f]=b(l):e!=="\\"&&(a[f]=l.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var x=0,m=!1,j=!1,k=0,c=a.length;k<c;++k){var i=a[k];if(i.ignoreCase)j=!0;else if(/[a-z]/i.test(i.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){m=!0;j=!1;break}}for(var r={b:8,t:9,n:10,v:11,
f:12,r:13},n=[],k=0,c=a.length;k<c;++k){i=a[k];if(i.global||i.multiline)throw Error(""+i);n.push("(?:"+s(i)+")")}return RegExp(n.join("|"),j?"gi":"g")}function T(a,d){function g(a){var c=a.nodeType;if(c==1){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)g(c);c=a.nodeName.toLowerCase();if("br"===c||"li"===c)s[j]="\n",m[j<<1]=x++,m[j++<<1|1]=a}}else if(c==3||c==4)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[\t\n\r ]+/g," "),s[j]=c,m[j<<1]=x,x+=c.length,m[j++<<1|1]=
a)}var b=/(?:^|\s)nocode(?:\s|$)/,s=[],x=0,m=[],j=0;g(a);return{a:s.join("").replace(/\n$/,""),d:m}}function H(a,d,g,b){d&&(a={a:d,e:a},g(a),b.push.apply(b,a.g))}function U(a){for(var d=void 0,g=a.firstChild;g;g=g.nextSibling)var b=g.nodeType,d=b===1?d?a:g:b===3?V.test(g.nodeValue)?a:d:d;return d===a?void 0:d}function C(a,d){function g(a){for(var j=a.e,k=[j,"pln"],c=0,i=a.a.match(s)||[],r={},n=0,e=i.length;n<e;++n){var z=i[n],w=r[z],t=void 0,f;if(typeof w==="string")f=!1;else{var h=b[z.charAt(0)];
if(h)t=z.match(h[1]),w=h[0];else{for(f=0;f<x;++f)if(h=d[f],t=z.match(h[1])){w=h[0];break}t||(w="pln")}if((f=w.length>=5&&"lang-"===w.substring(0,5))&&!(t&&typeof t[1]==="string"))f=!1,w="src";f||(r[z]=w)}h=c;c+=z.length;if(f){f=t[1];var l=z.indexOf(f),B=l+f.length;t[2]&&(B=z.length-t[2].length,l=B-f.length);w=w.substring(5);H(j+h,z.substring(0,l),g,k);H(j+h+l,f,I(w,f),k);H(j+h+B,z.substring(B),g,k)}else k.push(j+h,w)}a.g=k}var b={},s;(function(){for(var g=a.concat(d),j=[],k={},c=0,i=g.length;c<i;++c){var r=
g[c],n=r[3];if(n)for(var e=n.length;--e>=0;)b[n.charAt(e)]=r;r=r[1];n=""+r;k.hasOwnProperty(n)||(j.push(r),k[n]=q)}j.push(/[\S\s]/);s=S(j)})();var x=d.length;return g}function v(a){var d=[],g=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&g.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),g.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,q])):d.push(["com",
/^#[^\n\r]*/,q,"#"]));a.cStyleComments&&(g.push(["com",/^\/\/[^\n\r]*/,q]),g.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));if(b=a.regexLiterals){var s=(b=b>1?"":"\n\r")?".":"[\\S\\s]";g.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+s+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+
s+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&g.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&g.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),q]);d.push(["pln",/^\s+/,q," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");g.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,
q],["pun",RegExp(b),q]);return C(d,g)}function J(a,d,g){function b(a){var c=a.nodeType;if(c==1&&!x.test(a.className))if("br"===a.nodeName)s(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&g){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(j.createTextNode(d),a.nextSibling),s(a),c||a.parentNode.removeChild(a)}}function s(a){function b(a,c){var d=
c?a.cloneNode(!1):a,e=a.parentNode;if(e){var e=b(e,1),g=a.nextSibling;e.appendChild(d);for(var i=g;i;i=g)g=i.nextSibling,e.appendChild(i)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var x=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,j=a.ownerDocument,k=j.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var c=[k],i=0;i<c.length;++i)b(c[i]);d===(d|0)&&c[0].setAttribute("value",d);var r=j.createElement("ol");
r.className="linenums";for(var d=Math.max(0,d-1|0)||0,i=0,n=c.length;i<n;++i)k=c[i],k.className="L"+(i+d)%10,k.firstChild||k.appendChild(j.createTextNode("\u00a0")),r.appendChild(k);a.appendChild(r)}function p(a,d){for(var g=d.length;--g>=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*</.test(d)?"default-markup":"default-code";return F[a]}function K(a){var d=a.h;try{var g=T(a.c,a.i),b=g.a;
a.a=b;a.d=g.d;a.e=0;I(d,b)(a);var s=/\bMSIE\s(\d+)/.exec(navigator.userAgent),s=s&&+s[1]<=8,d=/\n/g,x=a.a,m=x.length,g=0,j=a.d,k=j.length,b=0,c=a.g,i=c.length,r=0;c[i]=m;var n,e;for(e=n=0;e<i;)c[e]!==c[e+2]?(c[n++]=c[e++],c[n++]=c[e++]):e+=2;i=n;for(e=n=0;e<i;){for(var p=c[e],w=c[e+1],t=e+2;t+2<=i&&c[t+1]===w;)t+=2;c[n++]=p;c[n++]=w;e=t}c.length=n;var f=a.c,h;if(f)h=f.style.display,f.style.display="none";try{for(;b<k;){var l=j[b+2]||m,B=c[r+2]||m,t=Math.min(l,B),A=j[b+1],G;if(A.nodeType!==1&&(G=x.substring(g,
t))){s&&(G=G.replace(d,"\r"));A.nodeValue=G;var L=A.ownerDocument,o=L.createElement("span");o.className=c[r+1];var v=A.parentNode;v.replaceChild(o,A);o.appendChild(A);g<l&&(j[b+1]=A=L.createTextNode(x.substring(t,l)),v.insertBefore(A,o.nextSibling))}g=t;g>=l&&(b+=2);g>=B&&(r+=2)}}finally{if(f)f.style.display=h}}catch(u){D.console&&console.log(u&&u.stack||u)}}var D=window,y=["break,continue,do,else,for,if,return,while"],E=[[y,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],M=[E,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],N=[E,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],
O=[N,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],E=[E,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],P=[y,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
Q=[y,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],W=[y,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],y=[y,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],R=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
V=/\S/,X=v({keywords:[M,O,E,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",P,Q,y],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),F={};p(X,["default-code"]);p(C([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);p(C([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],
["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);p(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);p(v({keywords:M,hashComments:!0,cStyleComments:!0,types:R}),["c","cc","cpp","cxx","cyc","m"]);p(v({keywords:"null,true,false"}),["json"]);p(v({keywords:O,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:R}),
["cs"]);p(v({keywords:N,cStyleComments:!0}),["java"]);p(v({keywords:y,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);p(v({keywords:P,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);p(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);p(v({keywords:Q,
hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);p(v({keywords:E,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);p(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);p(v({keywords:W,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]);
p(C([],[["str",/^[\S\s]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:C,registerLangHandler:p,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,g){var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";b=b.firstChild;g&&J(b,g,!0);K({h:d,j:g,c:b,i:1});
return b.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function g(){for(var b=D.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;i<p.length&&c.now()<b;i++){for(var d=p[i],j=h,k=d;k=k.previousSibling;){var m=k.nodeType,o=(m===7||m===8)&&k.nodeValue;if(o?!/^\??prettify\b/.test(o):m!==3||/\S/.test(k.nodeValue))break;if(o){j={};o.replace(/\b(\w+)=([\w%+\-.:]+)/g,function(a,b,c){j[b]=c});break}}k=d.className;if((j!==h||e.test(k))&&!v.test(k)){m=!1;for(o=d.parentNode;o;o=o.parentNode)if(f.test(o.tagName)&&
o.className&&e.test(o.className)){m=!0;break}if(!m){d.className+=" prettyprinted";m=j.lang;if(!m){var m=k.match(n),y;if(!m&&(y=U(d))&&t.test(y.tagName))m=y.className.match(n);m&&(m=m[1])}if(w.test(d.tagName))o=1;else var o=d.currentStyle,u=s.defaultView,o=(o=o?o.whiteSpace:u&&u.getComputedStyle?u.getComputedStyle(d,q).getPropertyValue("white-space"):0)&&"pre"===o.substring(0,3);u=j.linenums;if(!(u=u==="true"||+u))u=(u=k.match(/\blinenums\b(?::(\d+))?/))?u[1]&&u[1].length?+u[1]:!0:!1;u&&J(d,u,o);r=
{h:m,c:d,j:u,i:o};K(r)}}}i<p.length?setTimeout(g,250):"function"===typeof a&&a()}for(var b=d||document.body,s=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],p=[],m=0;m<b.length;++m)for(var j=0,k=b[m].length;j<k;++j)p.push(b[m][j]);var b=q,c=Date;c.now||(c={now:function(){return+new Date}});var i=0,r,n=/\blang(?:uage)?-([\w.]+)(?!\S)/,e=/\bprettyprint\b/,v=/\bprettyprinted\b/,w=/pre|xmp/i,t=/^code$/i,f=/^(?:pre|code|xmp)$/i,
h={};g()}};typeof define==="function"&&define.amd&&define("google-code-prettify",[],function(){return Y})})();}()
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n\u000c"]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]+)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],
["com",/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}\b/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
docs/src/styles/app.styl
-190
View File
@@ -1,190 +0,0 @@
@import "nib"
@import "vendor/base.css"
@import "vendor/skeleton.css"
@import "vendor/layout.css"
@import "vendor/prettify.css"
green = #080
lightGreen = #D3F3D3
//global styles
h3
text-decoration: underline
b
font-weight: bold
i
font-style: italic !important
input:focus, button
outline none
input[type="radio"],
label[for]
cursor: pointer
.main
position: relative
margin-top: 100px
margin-bottom: 100px
.center
text-align: center
.left
text-align: left
.right
text-align: right
.italic
font-style: italic
.bold
font-weight: bold
.inline
display: inline
.sixteen.columns
margin-bottom: 50px
.section
margin-top: 20px
//links - base customised
a, a:visited
color: green
outline: 0
text-decoration: none
a
&:hover,
&:focus
color: darken(green, 50%)
p a, p a:visited
line-height: inherit
//formatting
.indent1
margin-left: 10px
.indent2
margin-left: 20px
//code
code
color: green
&.black
color: #181818
pre.prettyprint
word-wrap: break-word
font-family: 'Droid Sans Mono', Courier
border: none
transition: all 0.3s ease-out
padding: 10px
margin-bottom: 10px
&.runnable
border-left: green 1px solid
cursor: pointer
&:hover
background: whiteSmoke
&.running
background: lightGreen
//positioning
.pos-chooser-dial
cursor: pointer
.box.pos-chooser-demo
color: black
padding: 20px
//api
.entry
margin-left: 10px
padding: 10px
&:hover
background: whiteSmoke
//misc
.demo-mouse
relative: left 250px top 30px
transition: all 1s ease-out
&.over
top: -30px
left: 125px
.box
color: green
font-weight: bold
border: green
padding: 3px
border-radius: 5px
//build tool
.build-tool-toggle
margin: 20px
display: none
box-shadow: 1px 1px 30px 1px green
.columns.build-tool
display: none
background: whiteSmoke
padding: 25px 25px 5px 25px
input,textarea,button,select
margin-bottom: 5px
hr
margin-bottom: 15px
select
display: inline
height: 32px
.build-tool-style
padding: 3px
margin: 5px 0
background: #ccc
border-radius: 3px
.name
display: inline
.name,.code
width: 100%
box-sizing: border-box
.code
font-family: 'Droid Sans Mono', Courier
height: 215px
.notifyjs-gswg-base
font-family Helvetica, Arial
opacity 0.85
width 325px
background #e48632
padding 15px
border-radius 10px
.content
.cover
float left
background url('http://gswg.io/img/cover2.jpg')
background-size cover
width 105px
height 130px
.text
float left
width 200px
padding-left 15px
padding-top 10px
color white
.title
font-weight bold
button
margin-bottom 2px
//chris coyers clearfix
.clearfix:after
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
.clearfix
display: inline-block;
/* start commented backslash hack \*/
* html .clearfix
height: 1%
.clearfix
display: block
docs/src/styles/vendor/base.css
Vendored
-267
View File
@@ -1,267 +0,0 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Reset & Basics
#Basic Styles
#Site Styles
#Typography
#Links
#Lists
#Images
#Buttons
#Forms
#Misc */
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* #Basic Styles
================================================== */
body {
background: #fff;
font: 14px/21px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: 'Merriweather Sans', "Georgia", "Times New Roman", serif;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }
.subheader { color: #777; }
p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }
em { font-style: italic; }
strong { font-weight: bold; color: #333; }
small { font-size: 80%; }
/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }
/* #Images
================================================== */
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #eee; /* Old browsers */
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px;
font-family: 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
color: #222;
background: #ddd; /* Old browsers */
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
.button:active,
button:active,
button.active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
border: 1px solid #666;
background: #ccc; /* Old browsers */
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
button.disabled,
button[disabled="disabled"] {
opacity: 0.85;
}
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center; }
/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* #Forms
================================================== */
form {
margin-bottom: 20px; }
fieldset {
margin-bottom: 20px; }
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff; }
select {
padding: 0; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2); }
textarea {
min-height: 60px; }
label,
legend {
display: block;
font-weight: bold;
font-size: 13px; }
select {
width: 220px; }
input[type="checkbox"] {
display: inline; }
label span,
legend span {
font-weight: normal;
font-size: 13px;
color: #444; }
/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
docs/src/styles/vendor/layout.css
Vendored
-58
View File
@@ -1,58 +0,0 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
docs/src/styles/vendor/prettify.css
Vendored
-1
View File
@@ -1 +0,0 @@
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
docs/src/styles/vendor/skeleton.css
Vendored
-242
View File
@@ -1,242 +0,0 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.alpha.omega { margin-left: 0; margin-right: 0; }
.container .one.column,
.container .one.columns { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 384px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
docs/src/views/index.jade
-83
View File
@@ -1,83 +0,0 @@
doctype html
html(lang='en')
head
meta(charset='utf-8')
title Notify.js
meta(name='description', content='Notify.js - A simple, versatile notification library')
meta(name='author', content='Jaime Pillora <dev@jpillora.com>')
meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
//- CSS
link(rel='stylesheet', href='docs/css/app.css')
link(href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800', rel='stylesheet', type='text/css')
//if lt IE 9
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
body
a(href="https://github.com/jpillora/notifyjs")
img(style="position: absolute; top: 0; right: 0; border: 0;",
src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png",
alt="Fork me on GitHub")
.main.container
.eight.columns
h1.title Notify.js
.eight.columns.right
span: iframe(src="http://ghbtns.com/github-btn.html?user=jpillora&type=follow",
allowtransparency="true",frameborder="0",scrolling="0",width="130",height="20")
span: iframe(src="http://ghbtns.com/github-btn.html?user=jpillora&repo=notifyjs&type=watch&count=true",
allowtransparency="true",frameborder="0",scrolling="0",width="80",height="20")
span
a.twitter-share-button(href='https://twitter.com/share', data-url='http://notifyjs.com', data-text='Notify.js - A simple, versatile notification library', data-hashtags='notifyjs') Tweet
script.
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
hr
include sections/summary
include sections/download
include sections/usage
include sections/notification-styles
include sections/positioning
include sections/api
include sections/options
include sections/styling
include sections/contributing
//- main scripts
script(src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery#{min}.js")
script(src="dist/notify#{min}.js")
script(src="dist/styles/bootstrap/notify-bootstrap.js")
script(src="docs/js/app.js")
//- build tool scripts
script(defered, src="#{false ? '../' : 'http://jpillora.com/'}compilejs/dist/compile.js")
script(defered, src="#{false ? '../' : 'http://jpillora.com/'}compilejs/dist/tasks/compile.uglify.js")
script(defered, src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js")
script.
//async fonts
WebFontConfig = { google: { families: [ 'Droid+Sans+Mono::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
//ga
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38709761-6', 'notifyjs.com');
ga('send', 'pageview');
docs/src/views/sections/api.jade
-86
View File
@@ -1,86 +0,0 @@
//- ====================================
//- API
//- ====================================
.sixteen.columns
h3 API
.entry
h5
code.black $.notify(
code string|object
code.black , [
code options
code.black ])
p.indent1
code string|object
| - global notification data
br
code options
| - an options object or class name string
.entry
h5
code.black $.notify(
code element
code.black ,
code string|object
code.black , [
code options
code.black ])
p.indent1
code element
| - a jquery element
br
code string|object
| - element notification data
br
code options
| - an options object or class name string
.entry
h5
code.black $(
code selector
code.black ).notify(
code string|object
code.black , [
code options
code.black ])
p.indent1
code selector
| - jquery selector
br
code string|object
| - element notification data
br
code options
| - an options object or class name string
.entry
h5
code.black $.notify.addStyle(
code styleName
code.black ,
code styleDefinition
code.black )
p.indent1
code styleName
| - string (the
b style
| option references this name)
br
|
code styleDefinition
| - style definition object (see
b Styling
| below)
.entry
h5
code.black $.notify.defaults(
code options
code.black )
p.indent1
code options
| - an options object (updates the defaults listed below)
docs/src/views/sections/contributing.jade
-39
View File
@@ -1,39 +0,0 @@
//- ====================================
//- CONTRIBUTING
//- ====================================
.sixteen.columns
h3 Contributing More Styles
p
| Contributing more styles is easy!
ol
li.
Click <a href="https://github.com/jpillora/notifyjs/new/gh-pages/src/styles" target="_blank">this</a> link
li Sign into GitHub (if you're not already)
li Click 'Fork'
li Enter your new style
li Click 'Commit New File'
li Click 'Send Pull Request'!
p
| To get people started with some styles ideas, checkout this
a(href="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/", target="_blank") post on various Growl styles
| .
p.italic
| Note: If you wish to contribute to the library by fixing bugs or adding features,
| see the
b src
| folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript.
| I'm using
a(href="https://gruntjs.com", target="_blank") Grunt
| to compile, minify and concat the builds, you can do so with:
ol
li
| Fork
a(href="https://github.com/jpillora/notifyjs") https://github.com/jpillora/notifyjs
li: code cd notifyjs
li: code npm install -g grunt-cli
li: code npm install
li: code grunt
li Pull-request !
docs/src/views/sections/download.jade
-67
View File
@@ -1,67 +0,0 @@
//- ====================================
//- DOWNLOAD
//- ====================================
.eight.columns
h3 Download
p
| Download pre-packaged with the bootstrap notification style:
br
a(href="dist/notify-combined.min.js", data-download, data-name="notify.min")
button Download notify.min.js
a(href="dist/notify-combined.js", data-download, data-name="notify")
button Download notify.js
p
| Or, create a custom build with a different style
br
button(disabled="disabled").build-tool-loading
| Loading...
button.build-tool-toggle
| Build a custom notify.js
.sixteen.columns.build-tool(ng-app,ng-controller="BuildController")
p.center
| Notify.js Core
button.active(disabled="disabled") Include
hr
p
span.bold Styles
br
.build-tool-style(ng-repeat="style in styles")
div
textarea.code(ng-model="style.code")
div.right
button(ng-click="active(style,'active')", ng-class="style.active && 'active'") Include
button(ng-click="useDefault(style)", ng-class="settings.default == style && 'active'") Default
button.test(ng-click="test($event,style,false)") Test Element
button.test(ng-click="test($event,style,true)") Test Global
button(ng-click="delete($index)") Delete
.build-tool-controls.center
button(ng-click="addStyle()") Add Style
select(ng-options="p.name for p in premadeStyles", ng-model="premadeStyle")
button(ng-click="loadStyle()") Load Style
span.italic Contribute more styles !
hr
p.center
| Minify
button(ng-click="active(settings,'minify')", ng-class="settings.minify && 'active'") Minify this build
hr
p.center
button(ng-click="build()", ng-bind="building && 'Building...' || 'Download this build'")
span.italic.indent2
| Made with
a(href="https://github.com/jpillora/compilejs",target="_blank") Compile.js
docs/src/views/sections/notification-styles.jade
-31
View File
@@ -1,31 +0,0 @@
//- ====================================
//- USAGE
//- ====================================
.sixteen.columns
h4 Notification Styles
p.
Each style may define a set of classes to use to substyle the notification.
The pre-packaged version includes a bootstrap notification style (see more below in Styling).
These classes include:
div
span Success
pre.prettyprint.runnable.indent1
| $.notify("Access granted", "success");
span Info
pre.prettyprint.runnable.indent1
| $.notify("Do not press this button", "info");
span Warning
pre.prettyprint.runnable.indent1
| $.notify("Warning: Self-destruct in 3.. 2..", "warn");
span Error
pre.prettyprint.runnable.indent1
| $.notify("BOOM!", "error");
p.italic(style="margin-top:10px")
| Note: This page has set the default class to
code "success"
| with
code $.notify.defaults({ className: "success" });
| .
docs/src/views/sections/options.jade
-42
View File
@@ -1,42 +0,0 @@
//- ====================================
//- OPTIONS
//- ====================================
.sixteen.columns
h3 Options
p
| The options object listed above are in the form below.
| This object below is the actual used to check option
| validity and set defaults.
pre.prettyprint.
{
// whether to hide the notification on click
clickToHide: true,
// whether to auto-hide the notification
autoHide: true,
// if autoHide, hide after milliseconds
autoHideDelay: 5000,
// show the arrow pointing at the element
arrowShow: true,
// arrow size in pixels
arrowSize: 5,
// default positions
elementPosition: 'bottom left',
globalPosition: 'top right',
// default style
style: 'bootstrap',
// default class (string or [string])
className: 'error',
// show animation
showAnimation: 'slideDown',
// show animation duration
showDuration: 400,
// hide animation
hideAnimation: 'slideUp',
// hide animation duration
hideDuration: 200,
// padding between element and notification
gap: 2
}
docs/src/views/sections/positioning.jade
-55
View File
@@ -1,55 +0,0 @@
//- ====================================
//- POSITIONING
//- ====================================
.sixteen.columns(id="position")
h3 Positioning
p
| Element notifications and Global notifications can
| be vertically repositioned to:
code "top"
| ,
code "middle"
| or
code "bottom"
| and horozontally repositioned to:
code "left"
| ,
code "center"
| or
code "right"
| .
p: pre.prettyprint.runnable
| $(".pos-demo").notify(
| "I'm left of the box",
| { position:"left" }
| );
p.center
| We can position the notification around this
span.box.pos-demo box
p(style='padding-top: 30px') Use this positioning tool to see all possible position combinations
div(style="padding: 30px;")
label.inline(for="pos-elem") Element
input(type="radio", id="pos-elem", value="elem", name="pos-type", checked="checked")
label.inline(for="pos-glob") Global
input(type="radio", id="pos-glob", value="glob", name="pos-type")
div(style="margin-left: 60px")
input.pos-chooser(data-thickness=".3",
data-width='100',
data-height='100',
data-max="12",
data-cursor="true",
data-fgColor='#080',
data-displayInput="false",
data-angleOffset='-15',
data-linecap='round')
p.center
span An awesome cool
span.box.pos-chooser-demo larrrggggeeee box
docs/src/views/sections/styling.jade
-255
View File
@@ -1,255 +0,0 @@
//- ====================================
//- STYLING
//- ====================================
.sixteen.columns
.section
h3 Custom Styling Guide
p
| You can add your own styles to Notify.js with the
code $.notify.addStyle
| method. See
a(data-highlight) API
| .
p Style definition objects are in the form:
pre.prettyprint.
{
//required html representing each notification
html: "",
//optional object to be converted to css
classes: {
&lt;className&gt;: {
&lt;propertyName&gt;: &lt;value&gt;
},
&lt;className&gt;: {
...
},
...
},
//optional css to be inserted onto the page
css: ""
}
p
h5.inline html
| - If you only have HTML element that you need to modify per
| notification then you should give this element an attribute of
code data-notify-text
| or
code data-notify-html
| . Use
code data-notify-html
| if you wish to display arbitrary HTML inside the notification,
| otherwise, use
code data-notify-text
| as it is more secure.
br
| Otherwise, if you wish to modify multiple HTML elements per
| notification then you'll need to give each element one of the two
| attributes above
b as well as a value
| . For an example of this see the Advanced Example below.
p
h5.inline classes
| - This object will be used to construct css. It must be in the form described above and there is an example below.
p
h5.inline css
| - This string is simply raw css. Use this property if you want to keep your style definition inside
| your js files.
.section
h4 Class naming convention
p.
When each notification is constructed, it's container
(outer most element defined in your style html) will automatically
apply the class:
p
code notifyjs-&lt;style name&gt;-base
p
| When you use the class name option (
code className
| ) the class:
p
code notifyjs-&lt;style name&gt;-&lt;class name&gt;
p.
will be applied. So if you define your styles in an external CSS file or in the style's css
property, you must define your CSS rules using this naming convention.
.section
h4 Simple Example
p If you were to define the style:
pre.prettyprint.auto-run.happyblue-example.
$.notify.addStyle('happyblue', {
html: "&lt;div&gt;☺&lt;span data-notify-text/&gt;☺&lt;/div&gt;",
classes: {
base: {
"white-space": "nowrap",
"background-color": "lightblue",
"padding": "5px"
},
superblue: {
"color": "white",
"background-color": "blue"
}
}
});
p
| Upon running this code, the
code classes
| object in this example will be converted the following css:
pre.prettyprint.lang-css.
.notifyjs-happyblue-base {
white-space: nowrap;
background-color: lightblue;
padding: 5px;
}
.notifyjs-happyblue-superblue {
color: white;
background-color: blue;
}
p:i You can confirm this now by inspecting the DOM (look for the tagged style element in the head)
p You can now use your new style with:
pre.prettyprint.runnable.
$.notify('hello !!', {
style: 'happyblue'
});
p
| and you can use the
code superblue
| class with:
pre.prettyprint.runnable.
$.notify('HELLO !!!!', {
style: 'happyblue',
className: 'superblue'
});
.section
h4 Advanced Example
p Say you wanted to use buttons in your notifications then you could do something like:
pre.prettyprint.auto-run.button-js-example.
//add a new style 'foo'
$.notify.addStyle('foo', {
html:
"&lt;div&gt;" +
"&lt;div class='clearfix'&gt;" +
"&lt;div class='title' data-notify-html='title'/&gt;" +
"&lt;div class='buttons'&gt;" +
"&lt;button class='no'&gt;Cancel&lt;/button&gt;" +
"&lt;button class='yes' data-notify-text='button'&gt;&lt;/button&gt;" +
"&lt;/div&gt;" +
"&lt;/div&gt;" +
"&lt;/div&gt;"
});
//listen for click events from this style
$(document).on('click', '.notifyjs-foo-base .no', function() {
//programmatically trigger propogating hide event
$(this).trigger('notify-hide');
});
$(document).on('click', '.notifyjs-foo-base .yes', function() {
//show button text
alert($(this).text() + " clicked!");
//hide notification
$(this).trigger('notify-hide');
});
p
| Notice there is no
code classes
| property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:
p.italic
| Note: you could also convert this CSS code to a JavaScript string and use it with the
code css
| property. It's not very readable though it's better for distribution.
pre.prettyprint.auto-add.foo-css-example.lang-css.
.notifyjs-foo-base {
opacity: 0.85;
width: 200px;
background: #F5F5F5;
padding: 5px;
border-radius: 10px;
}
.notifyjs-foo-base .title {
width: 100px;
float: left;
margin: 10px 0 0 10px;
text-align: right;
}
.notifyjs-foo-base .buttons {
width: 70px;
float: right;
font-size: 9px;
padding: 5px;
margin: 2px;
}
.notifyjs-foo-base button {
font-size: 9px;
padding: 5px;
margin: 2px;
width: 60px;
}
p You can now use this style with:
pre.prettyprint.runnable.
$.notify({
title: 'Would you like some Foo ?',
button: 'Confirm'
}, {
style: 'foo',
autoHide: false,
clickToHide: false
});
.section
h4 Extra Example
p.
If using the above methods still don't provide you
with what you need then you can, pass jQuery objects
straight into the notification (provided that the
element has the <code>data-notify-html</code> attribute):
pre.prettyprint.runnable.
var h5 = $("&lt;h5/&gt;").append("You MUST have some Foo !")
$.notify({
title: h5,
button: 'YES !'
}, {
style: 'foo',
autoHide: false,
clickToHide: false
});
.section
h4 Style List
p
ul.square
li: a(href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/bootstrap", target="_blank") bootstrap
ul.square
li: a(href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/metro", target="_blank") metro
docs/src/views/sections/summary.jade
-15
View File
@@ -1,15 +0,0 @@
//- ====================================
//- SUMMARY
//- ====================================
.eight.columns.summary
h3 Summary
p
| Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
| The javascript code snippets in this documentation with the
code green
| edge are runnable by clicking them.
p: pre.prettyprint.runnable
| $.notify("Hello World");
img.demo-mouse(src='docs/img/pointer.png')
docs/src/views/sections/usage.jade
-31
View File
@@ -1,31 +0,0 @@
//- ====================================
//- USAGE
//- ====================================
.sixteen.columns
h3 Basic Usage
.eight.columns
h4 Element Notifications
p You can place notifications on any element:
p: pre.prettyprint.runnable
| $(".elem-demo").notify("Hello Box");
p.center
| Like this
span.box.elem-demo box
.eight.columns
h4 Global Notifications
p
| If you don't specify an element, notification
| will appear in the top left (unless you specify a
| different position - See
a(data-highlight) Positioning
| )
p: pre.prettyprint.runnable
| $.notify("I'm over here !");
examples/classes.html
+6 -3
View File
@@ -3,9 +3,12 @@
<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>
<style type="text/css">
html {
font-family: Helvetica;
}
.boxes {
margin: 150px;
}
@@ -25,7 +28,7 @@
<!-- run code -->
<script class="demo">
$.notify.options({
$.notify.defaults({
autoHide: false
});
@@ -43,4 +46,4 @@
</script>
</body>
</html>
</html>
examples/inlines.html
+7 -8
View File
@@ -52,35 +52,35 @@
<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>
@@ -88,7 +88,7 @@
<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/>
@@ -97,7 +97,6 @@
<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})
@@ -109,4 +108,4 @@
</script>
</body>
</html>
</html>
examples/multi-text.html
+2 -5
View File
@@ -20,7 +20,7 @@
<!-- run code -->
<script class="demo">
$.notify.defaults({ arrowShow: false })
$.notify.defaults({ arrowShow: false, autoHide: false })
$.notify.addStyle('single-text', {
@@ -36,9 +36,6 @@
});
$(function() {
$(".1").notify({
title: "HELLO!",
p1: "little",
@@ -55,4 +52,4 @@
</script>
</body>
</html>
</html>
examples/position.html
+1 -3
View File
@@ -3,7 +3,6 @@
<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>
<style type="text/css">
.boxes {
@@ -33,7 +32,6 @@
$.each(positions, function(i, p) {
var box = $("<div class=\"box\">"+p+"</div>");
boxes.append($("<div class=\"wrapper\"/>").append(box));
box.notify(p, {position: p+" center"});
});
@@ -41,4 +39,4 @@
</script>
</body>
</html>
</html>
index.html
-463
View File
@@ -1,463 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Notify.js</title>
<meta name="description" content="Notify.js - A simple, versatile notification library">
<meta name="author" content="Jaime Pillora &lt;dev@jpillora.com&gt;">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="docs/css/app.css">
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800" rel="stylesheet" type="text/css">
<!--if lt IE 9
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
-->
</head>
<body><a href="https://github.com/jpillora/notifyjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<div class="main container">
<div class="eight columns">
<h1 class="title">Notify.js</h1>
</div>
<div class="eight columns right"><span>
<iframe src="http://ghbtns.com/github-btn.html?user=jpillora&amp;type=follow" allowtransparency="true" frameborder="0" scrolling="0" width="130" height="20"></iframe></span><span>
<iframe src="http://ghbtns.com/github-btn.html?user=jpillora&amp;repo=notifyjs&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe></span><span><a href="https://twitter.com/share" data-url="http://notifyjs.com" data-text="Notify.js - A simple, versatile notification library" data-hashtags="notifyjs" class="twitter-share-button">Tweet</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script></span></div>
<hr>
<div class="eight columns summary">
<h3>Summary</h3>
<p>
Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
The javascript code snippets in this documentation with the <code>green</code> edge are runnable by clicking them.
</p>
<p>
<pre class="prettyprint runnable">$.notify("Hello World");</pre>
</p><img src="docs/img/pointer.png" class="demo-mouse">
</div>
<div class="eight columns">
<h3>Download</h3>
<p>Download pre-packaged with the bootstrap notification style:<br><a href="dist/notify-combined.min.js" data-download data-name="notify.min">
<button>Download notify.min.js</button></a><a href="dist/notify-combined.js" data-download data-name="notify">
<button>Download notify.js</button></a></p>
<p>Or, create a custom build with a different style<br>
<button disabled="disabled" class="build-tool-loading">Loading...</button>
<button class="build-tool-toggle">Build a custom notify.js</button>
</p>
</div>
<div ng-app ng-controller="BuildController" class="sixteen columns build-tool">
<p class="center">Notify.js Core
<button disabled="disabled" class="active">Include</button>
</p>
<hr>
<p><span class="bold">Styles </span><br>
<div ng-repeat="style in styles" class="build-tool-style">
<div>
<textarea ng-model="style.code" class="code"></textarea>
</div>
<div class="right">
<button ng-click="active(style,'active')" ng-class="style.active &amp;&amp; 'active'">Include</button>
<button ng-click="useDefault(style)" ng-class="settings.default == style &amp;&amp; 'active'">Default</button>
<button ng-click="test($event,style,false)" class="test">Test Element</button>
<button ng-click="test($event,style,true)" class="test">Test Global</button>
<button ng-click="delete($index)">Delete</button>
</div>
</div>
<div class="build-tool-controls center">
<button ng-click="addStyle()">Add Style</button>
<select ng-options="p.name for p in premadeStyles" ng-model="premadeStyle"></select>
<button ng-click="loadStyle()">Load Style</button><span class="italic">Contribute more styles !</span>
</div>
</p>
<hr>
<p class="center">Minify
<button ng-click="active(settings,'minify')" ng-class="settings.minify &amp;&amp; 'active'">Minify this build</button>
</p>
<hr>
<p class="center">
<button ng-click="build()" ng-bind="building &amp;&amp; 'Building...' || 'Download this build'"></button><span class="italic indent2">Made with <a href="https://github.com/jpillora/compilejs" target="_blank">Compile.js</a></span>
</p>
</div>
<div class="sixteen columns">
<h3>Basic Usage</h3>
</div>
<div class="eight columns">
<h4>Element Notifications</h4>
<p>You can place notifications on any element:</p>
<p>
<pre class="prettyprint runnable">$(".elem-demo").notify("Hello Box");</pre>
</p>
<p class="center">Like this <span class="box elem-demo">box</span></p>
</div>
<div class="eight columns">
<h4>Global Notifications</h4>
<p>
If you don't specify an element, notification
will appear in the top left (unless you specify a
different position - See <a data-highlight>Positioning</a>)
</p>
<p>
<pre class="prettyprint runnable">$.notify("I'm over here !");</pre>
</p>
</div>
<div class="sixteen columns">
<h4>Notification Styles</h4>
<p>
Each style may define a set of classes to use to substyle the notification.
The pre-packaged version includes a bootstrap notification style (see more below in Styling).
These classes include:
</p>
<div><span>Success</span>
<pre class="prettyprint runnable indent1">$.notify("Access granted", "success");</pre><span>Info</span>
<pre class="prettyprint runnable indent1">$.notify("Do not press this button", "info");</pre><span>Warning</span>
<pre class="prettyprint runnable indent1">$.notify("Warning: Self-destruct in 3.. 2..", "warn");</pre><span>Error</span>
<pre class="prettyprint runnable indent1">$.notify("BOOM!", "error");</pre>
</div>
<p style="margin-top:10px" class="italic">Note: This page has set the default class to<code>"success"</code> with<code>$.notify.defaults({ className: "success" });</code>.</p>
</div>
<div id="position" class="sixteen columns">
<h3>Positioning</h3>
<p>
Element notifications and Global notifications can
be vertically repositioned to: <code>"top"</code>, <code>"middle" </code>or <code>"bottom" </code>and horozontally repositioned to: <code>"left"</code>, <code>"center" </code>or <code>"right" </code>.
</p>
<p>
<pre class="prettyprint runnable">$(".pos-demo").notify(
"I'm left of the box",
{ position:"left" }
);</pre>
</p>
<p class="center">We can position the notification around this <span class="box pos-demo">box</span></p>
<p style="padding-top: 30px">Use this positioning tool to see all possible position combinations </p>
<div style="padding: 30px;">
<label for="pos-elem" class="inline">Element</label>
<input type="radio" id="pos-elem" value="elem" name="pos-type" checked="checked">
<label for="pos-glob" class="inline">Global</label>
<input type="radio" id="pos-glob" value="glob" name="pos-type">
</div>
<div style="margin-left: 60px">
<input data-thickness=".3" data-width="100" data-height="100" data-max="12" data-cursor="true" data-fgColor="#080" data-displayInput="false" data-angleOffset="-15" data-linecap="round" class="pos-chooser">
</div>
<p class="center"><span>An awesome cool </span><span class="box pos-chooser-demo">larrrggggeeee box</span></p>
</div>
<div class="sixteen columns">
<h3>API</h3>
<div class="entry">
<h5><code class="black">$.notify( </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
<p class="indent1"><code>string|object</code> - global notification data<br><code>options</code> - an options object or class name string </p>
</div>
<div class="entry">
<h5><code class="black">$.notify( </code><code>element</code><code class="black">, </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
<p class="indent1"><code>element</code> - a jquery element<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
</div>
<div class="entry">
<h5><code class="black">$( </code><code>selector</code><code class="black"> ).notify( </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
<p class="indent1"><code>selector</code> - jquery selector<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
</div>
<div class="entry">
<h5><code class="black">$.notify.addStyle( </code><code>styleName</code><code class="black">, </code><code>styleDefinition</code><code class="black"> )</code></h5>
<p class="indent1"><code>styleName</code> - string (the <b>style</b> option references this name)<br> <code>styleDefinition</code> - style definition object (see <b>Styling</b> below)</p>
</div>
<div class="entry">
<h5><code class="black">$.notify.defaults( </code><code>options</code><code class="black"> )</code></h5>
<p class="indent1"><code>options</code> - an options object (updates the defaults listed below) </p>
</div>
</div>
<div class="sixteen columns">
<h3>Options</h3>
<p>
The options object listed above are in the form below.
This object below is the actual used to check option
validity and set defaults.
</p>
<pre class="prettyprint">{
// whether to hide the notification on click
clickToHide: true,
// whether to auto-hide the notification
autoHide: true,
// if autoHide, hide after milliseconds
autoHideDelay: 5000,
// show the arrow pointing at the element
arrowShow: true,
// arrow size in pixels
arrowSize: 5,
// default positions
elementPosition: 'bottom left',
globalPosition: 'top right',
// default style
style: 'bootstrap',
// default class (string or [string])
className: 'error',
// show animation
showAnimation: 'slideDown',
// show animation duration
showDuration: 400,
// hide animation
hideAnimation: 'slideUp',
// hide animation duration
hideDuration: 200,
// padding between element and notification
gap: 2
}
</pre>
</div>
<div class="sixteen columns">
<div class="section">
<h3>Custom Styling Guide</h3>
<p>You can add your own styles to Notify.js with the<code>$.notify.addStyle </code>method. See <a data-highlight>API</a>.</p>
<p>Style definition objects are in the form:</p>
<pre class="prettyprint">{
//required html representing each notification
html: "",
//optional object to be converted to css
classes: {
&lt;className&gt;: {
&lt;propertyName&gt;: &lt;value&gt;
},
&lt;className&gt;: {
...
},
...
},
//optional css to be inserted onto the page
css: ""
}
</pre>
<p>
<h5 class="inline">html</h5> - If you only have HTML element that you need to modify per
notification then you should give this element an attribute of <code>data-notify-text</code> or <code>data-notify-html</code>. Use <code>data-notify-html</code> if you wish to display arbitrary HTML inside the notification,
otherwise, use <code>data-notify-text</code> as it is more secure.<br> Otherwise, if you wish to modify multiple HTML elements per
notification then you'll need to give each element one of the two
attributes above <b>as well as a value</b>. For an example of this see the Advanced Example below.
</p>
<p>
<h5 class="inline">classes</h5> - This object will be used to construct css. It must be in the form described above and there is an example below.
</p>
<p>
<h5 class="inline">css</h5> - This string is simply raw css. Use this property if you want to keep your style definition inside
your js files.
</p>
</div>
<div class="section">
<h4>Class naming convention</h4>
<p>
When each notification is constructed, it's container
(outer most element defined in your style html) will automatically
apply the class:
</p>
<p><code>notifyjs-&lt;style name&gt;-base</code></p>
<p>When you use the class name option (<code>className</code>) the class:</p>
<p><code>notifyjs-&lt;style name&gt;-&lt;class name&gt;</code></p>
<p>
will be applied. So if you define your styles in an external CSS file or in the style's css
property, you must define your CSS rules using this naming convention.
</p>
</div>
<div class="section">
<h4>Simple Example</h4>
<p>If you were to define the style:</p>
<pre class="prettyprint auto-run happyblue-example">$.notify.addStyle('happyblue', {
html: "&lt;div&gt;☺&lt;span data-notify-text/&gt;☺&lt;/div&gt;",
classes: {
base: {
"white-space": "nowrap",
"background-color": "lightblue",
"padding": "5px"
},
superblue: {
"color": "white",
"background-color": "blue"
}
}
});
</pre>
<p>Upon running this code, the <code>classes</code> object in this example will be converted the following css:</p>
<pre class="prettyprint lang-css">.notifyjs-happyblue-base {
white-space: nowrap;
background-color: lightblue;
padding: 5px;
}
.notifyjs-happyblue-superblue {
color: white;
background-color: blue;
}</pre>
<p:i>You can confirm this now by inspecting the DOM (look for the tagged style element in the head)</p:i>
<p>You can now use your new style with:</p>
<pre class="prettyprint runnable">$.notify('hello !!', {
style: 'happyblue'
});
</pre>
<p>and you can use the <code>superblue</code> class with:</p>
<pre class="prettyprint runnable">$.notify('HELLO !!!!', {
style: 'happyblue',
className: 'superblue'
});
</pre>
</div>
<div class="section">
<h4>Advanced Example</h4>
<p>Say you wanted to use buttons in your notifications then you could do something like:</p>
<pre class="prettyprint auto-run button-js-example">//add a new style 'foo'
$.notify.addStyle('foo', {
html:
"&lt;div&gt;" +
"&lt;div class='clearfix'&gt;" +
"&lt;div class='title' data-notify-html='title'/&gt;" +
"&lt;div class='buttons'&gt;" +
"&lt;button class='no'&gt;Cancel&lt;/button&gt;" +
"&lt;button class='yes' data-notify-text='button'&gt;&lt;/button&gt;" +
"&lt;/div&gt;" +
"&lt;/div&gt;" +
"&lt;/div&gt;"
});
//listen for click events from this style
$(document).on('click', '.notifyjs-foo-base .no', function() {
//programmatically trigger propogating hide event
$(this).trigger('notify-hide');
});
$(document).on('click', '.notifyjs-foo-base .yes', function() {
//show button text
alert($(this).text() + " clicked!");
//hide notification
$(this).trigger('notify-hide');
});
</pre>
<p>Notice there is no <code>classes</code> property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:</p>
<p class="italic">Note: you could also convert this CSS code to a JavaScript string and use it with the <code>css</code> property. It's not very readable though it's better for distribution.</p>
<pre class="prettyprint auto-add foo-css-example lang-css">.notifyjs-foo-base {
opacity: 0.85;
width: 200px;
background: #F5F5F5;
padding: 5px;
border-radius: 10px;
}
.notifyjs-foo-base .title {
width: 100px;
float: left;
margin: 10px 0 0 10px;
text-align: right;
}
.notifyjs-foo-base .buttons {
width: 70px;
float: right;
font-size: 9px;
padding: 5px;
margin: 2px;
}
.notifyjs-foo-base button {
font-size: 9px;
padding: 5px;
margin: 2px;
width: 60px;
}
</pre>
<p>You can now use this style with:</p>
<pre class="prettyprint runnable">$.notify({
title: 'Would you like some Foo ?',
button: 'Confirm'
}, {
style: 'foo',
autoHide: false,
clickToHide: false
});
</pre>
</div>
<div class="section">
<h4>Extra Example</h4>
<p>
If using the above methods still don't provide you
with what you need then you can, pass jQuery objects
straight into the notification (provided that the
element has the <code>data-notify-html</code> attribute):
</p>
<pre class="prettyprint runnable">var h5 = $("&lt;h5/&gt;").append("You MUST have some Foo !")
$.notify({
title: h5,
button: 'YES !'
}, {
style: 'foo',
autoHide: false,
clickToHide: false
});
</pre>
</div>
<div class="section">
<h4>Style List</h4>
<p>
<ul class="square">
<li><a href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/bootstrap" target="_blank">bootstrap</a></li>
</ul>
<ul class="square">
<li><a href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/metro" target="_blank">metro</a></li>
</ul>
</p>
</div>
</div>
<div class="sixteen columns">
<h3>Contributing More Styles </h3>
<p>Contributing more styles is easy!
<ol>
<li>Click <a href="https://github.com/jpillora/notifyjs/new/gh-pages/src/styles" target="_blank">this</a> link</li>
<li>Sign into GitHub (if you're not already)</li>
<li>Click 'Fork'</li>
<li>Enter your new style</li>
<li>Click 'Commit New File'</li>
<li>Click 'Send Pull Request'!</li>
</ol>
</p>
<p>To get people started with some styles ideas, checkout this <a href="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/" target="_blank">post on various Growl styles</a>.</p>
<p class="italic">
Note: If you wish to contribute to the library by fixing bugs or adding features,
see the <b>src</b> folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript.
I'm using <a href="https://gruntjs.com" target="_blank">Grunt </a> to compile, minify and concat the builds, you can do so with:
<ol>
<li>Fork <a href="https://github.com/jpillora/notifyjs">https://github.com/jpillora/notifyjs</a></li>
<li><code>cd notifyjs</code></li>
<li><code>npm install -g grunt-cli</code></li>
<li><code>npm install</code></li>
<li><code>grunt</code></li>
<li>Pull-request ! </li>
</ol>
</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="dist/notify.js"></script>
<script src="dist/styles/bootstrap/notify-bootstrap.js"></script>
<script src="docs/js/app.js"></script>
<script defered src="http://jpillora.com/compilejs/dist/compile.js"></script>
<script defered src="http://jpillora.com/compilejs/dist/tasks/compile.uglify.js"></script>
<script defered src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script>
//async fonts
WebFontConfig = { google: { families: [ 'Droid+Sans+Mono::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
//ga
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38709761-6', 'notifyjs.com');
ga('send', 'pageview');
</script>
</body>
</html>
notify.jquery.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "notify",
"version": "0.3.2",
"version": "0.3.4",
"title": "notify",
"description": "A robust, customizable notification library",
"bugs": "https://github.com/jpillora/notifyjs/issues",
@@ -25,4 +25,4 @@
"dependencies": {
"jquery": ">=1.8"
}
}
}
package.json
+16 -20
View File
@@ -1,22 +1,18 @@
{
"title": "Notify.js",
"name": "notify",
"version": "0.3.2",
"author": {
"name": "Jaime Pillora"
},
"homepage": "http://notifyjs.com/",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.x",
"grunt-contrib-watch": "~0.1.4",
"grunt-contrib-uglify": "~0.1.1rc6",
"grunt-contrib-jshint": "~0.1.0",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-coffee": "~0.4.0rc7",
"grunt-wrap": "~0.2.0"
},
"dependencies": {
"grunt-contrib-concat": "~0.3.0"
}
"title": "Notify.js",
"name": "notify",
"version": "0.3.4",
"author": {
"name": "Jaime Pillora"
},
"contributors": [
{
"name": "Evan Carroll",
"url": "http://www.evancarroll.com",
"email": "me@evancarroll.com"
}
],
"homepage": "http://notifyjs.com/",
"license": "MIT",
"main": "dist/notify.js"
}
src/notify.coffee
-571
View File
@@ -1,571 +0,0 @@
'use strict'
#plugin constants
pluginName = 'notify'
pluginClassName = pluginName+'js'
blankFieldName = pluginName+"!blank"
# ================================
# POSITIONING
# ================================
positions =
t: 'top'
m: 'middle'
b: 'bottom'
l: 'left'
c: 'center'
r: 'right'
hAligns = ['l','c','r']
vAligns = ['t','m','b']
mainPositions = ['t','b','l','r']
#positions mapped to opposites
opposites =
t: 'b'
m: null
b: 't'
l: 'r'
c: null
r: 'l'
parsePosition = (str) ->
pos = []
$.each str.split(/\W+/), (i,word) ->
w = word.toLowerCase().charAt(0)
pos.push w if positions[w]
pos
# ================================
# STYLES
# ================================
styles = {}
coreStyle =
name: 'core'
html: """
<div class="#{pluginClassName}-wrapper">
<div class="#{pluginClassName}-arrow"></div>
<div class="#{pluginClassName}-container"></div>
</div>
"""
# <div class="#{pluginClassName}-debug"></div>
# .#{pluginClassName}-debug {
# position: absolute;
# border: 3px solid red;
# height: 0;
# width: 0;
# }
css: """
.#{pluginClassName}-corner {
position: fixed;
margin: 5px;
z-index: 1050;
}
.#{pluginClassName}-corner .#{pluginClassName}-wrapper,
.#{pluginClassName}-corner .#{pluginClassName}-container {
position: relative;
display: block;
height: inherit;
width: inherit;
margin: 3px;
}
.#{pluginClassName}-wrapper {
z-index: 1;
position: absolute;
display: inline-block;
height: 0;
width: 0;
}
.#{pluginClassName}-container {
display: none;
z-index: 1;
position: absolute;
}
.#{pluginClassName}-hidable {
cursor: pointer;
}
[data-notify-text],[data-notify-html] {
position: relative;
}
.#{pluginClassName}-arrow {
position: absolute;
z-index: 2;
width: 0;
height: 0;
}
"""
stylePrefixes =
"border-radius": ["-webkit-", "-moz-"]
getStyle = (name) ->
styles[name]
addStyle = (name, def) ->
unless name
throw "Missing Style name"
unless def
throw "Missing Style definition"
unless def.html
throw "Missing Style HTML"
if styles[name]?.cssElem
if window.console
console.warn "#{pluginName}: overwriting style '#{name}'"
styles[name].cssElem.remove()
def.name = name
styles[name] = def
cssText = ""
if def.classes
$.each def.classes, (className, props) ->
cssText += ".#{pluginClassName}-#{def.name}-#{className} {\n"
$.each props, (name, val) ->
#vendor prefixes
if stylePrefixes[name]
$.each stylePrefixes[name], (i, prefix) ->
cssText += " #{prefix}#{name}: #{val};\n"
#add prop
cssText += " #{name}: #{val};\n"
cssText += "}\n"
if def.css
cssText += """
/* styles for #{def.name} */
#{def.css}
"""
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) ->
elem = createElem("style")
elem.attr 'type', 'text/css'
$("head").append elem
try
elem.html cssText
catch e #ie fix
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
# ================================
#overridable options
pluginOptions =
clickToHide: true
autoHide: true
autoHideDelay: 5000
arrowShow: true
arrowSize: 5
breakNewLines: true
# autoReposition: true
elementPosition: 'bottom'
globalPosition: 'top right'
style: 'bootstrap'
className: 'error'
showAnimation: 'slideDown'
showDuration: 400
hideAnimation: 'slideUp'
hideDuration: 200
gap: 5
inherit = (a, b) ->
F = () ->
F.prototype = a
$.extend true, new F(), b
defaults = (opts) ->
$.extend pluginOptions, opts
# ================================
# DOM MANIPULATION
# ================================
# plugin helpers
createElem = (tag) ->
$ "<#{tag}></#{tag}>"
# references to global anchor positions
globalAnchors = {}
#gets first on n radios, and gets the fancy stylised input for hidden inputs
getAnchorElement = (element) ->
#choose the first of n radios
if element.is('[type=radio]')
radios = element.parents('form:first').find('[type=radio]').filter (i, e) ->
$(e).attr('name') is element.attr('name')
element = radios.first()
#custom-styled inputs - find thier real element
element
incr = (obj, pos, val) ->
# console.log "incr ---- #{pos} #{val} (#{typeof val})"
if typeof val is 'string'
val = parseInt val, 10
else if typeof val isnt 'number'
return
return if isNaN val
opp = positions[opposites[pos.charAt(0)]]
temp = pos
#use the opposite if exists
if obj[opp] isnt `undefined`
pos = positions[opp.charAt(0)]
val = -val
if obj[pos] is `undefined`
obj[pos] = val
else
obj[pos] += val
null
realign = (alignment, inner, outer) ->
return if alignment in ['l','t']
0
else if alignment in ['c','m']
outer/2 - inner/2
else if alignment in ['r','b']
outer - inner
throw "Invalid alignment"
encode = (text) ->
encode.e = encode.e or createElem "div"
encode.e.text(text).html()
# ================================
# NOTIFY CLASS
# ================================
#define plugin
class Notification
#setup instance variables
constructor: (elem, data, options) ->
options = {className: options} if typeof options is 'string'
@options = inherit pluginOptions, if $.isPlainObject(options) then options else {}
#load style html into @userContainer
@loadHTML()
@wrapper = $(coreStyle.html)
@wrapper.addClass "#{pluginClassName}-hidable" if @options.clickToHide
@wrapper.data pluginClassName, @
@arrow = @wrapper.find ".#{pluginClassName}-arrow"
@container = @wrapper.find ".#{pluginClassName}-container"
@container.append @userContainer
if elem and elem.length
@elementType = elem.attr('type')
@originalElement = elem
@elem = getAnchorElement(elem)
@elem.data pluginClassName, @
# add into dom above elem
@elem.before @wrapper
@container.hide()
@run(data)
loadHTML: ->
style = @getStyle()
@userContainer = $(style.html)
@userFields = style.fields
show: (show, userCallback) ->
callback = =>
@destroy() if not show and not @elem
userCallback() if userCallback
hidden = @container.parent().parents(':hidden').length > 0
elems = @container.add @arrow
args = []
if hidden and show
fn = 'show'
else if hidden and not show
fn = 'hide'
else if not hidden and show
fn = @options.showAnimation
args.push @options.showDuration
else if not hidden and not show
fn = @options.hideAnimation
args.push @options.hideDuration
else
return callback()
args.push callback
elems[fn].apply elems, args
setGlobalPosition: () ->
[pMain, pAlign] = @getPosition()
main = positions[pMain]
align = positions[pAlign]
key = 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 = @getPosition()
[pMain, pAlign, pArrow] = position
#grab some dimensions
elemPos = @elem.position()
elemH = @elem.outerHeight()
elemW = @elem.outerWidth()
elemIH = @elem.innerHeight()
elemIW = @elem.innerWidth()
wrapPos = @wrapper.position()
contH = @container.height()
contW = @container.width()
#start calculations
mainFull = positions[pMain]
opp = opposites[pMain]
oppFull = positions[opp]
#initial positioning
css = {}
css[oppFull] = if pMain is 'b'
elemH
else if pMain is 'r'
elemW
else
0
#correct for elem-wrapper offset
# unless navigator.userAgent.match /MSIE/
incr css, 'top', elemPos.top - wrapPos.top
incr css, 'left', elemPos.left - wrapPos.left
#correct for margins
for pos in ['top', 'left']
margin = parseInt @elem.css("margin-#{pos}"), 10
incr css, pos, margin if margin
#correct for paddings (only for inline)
# if /^inline/.test @elem.css('display')
# padding = parseInt @elem.css("padding-#{pos}"), 10
# incr css, pos, -padding if padding
#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
@arrow.hide()
else
arrowSize = @options.arrowSize
arrowCss = $.extend {}, css
arrowColor = @userContainer.css("border-color") or
@userContainer.css("background-color") or
'white'
#build arrow
for pos in mainPositions
posFull = positions[pos]
continue if pos is opp
color = if posFull is mainFull then arrowColor else 'transparent'
arrowCss["border-#{posFull}"] = "#{arrowSize}px solid #{color}"
#add some room for the arrow
incr css, positions[opp], arrowSize
incr arrowCss, positions[pAlign], arrowSize*2 if pAlign in mainPositions
#calculate container alignment
if pMain in vAligns
incr css, 'left', realign(pAlign, contW, elemW)
incr arrowCss, 'left', realign(pAlign, arrowSize, elemIW) if arrowCss
else if pMain in hAligns
incr css, 'top', realign(pAlign, contH, elemH)
incr arrowCss, 'top', realign(pAlign, arrowSize, elemIH) if arrowCss
css.display = 'block' if @container.is(":visible")
#apply css
@container.removeAttr('style').css css
@arrow.removeAttr('style').css(arrowCss) if arrowCss
getPosition: ->
text = @options.position or if @elem then @options.elementPosition else @options.globalPosition
pos = parsePosition text
#validate position
pos[0] = 'b' if pos.length is 0
if pos[0] not in mainPositions
throw "Must be one of [#{mainPositions}]"
#validate alignment
if pos.length is 1 or
(pos[0] in vAligns and pos[1] not in hAligns) or
(pos[0] in hAligns and pos[1] not in vAligns)
pos[1] = if pos[0] in hAligns then 'm' else 'l'
if pos.length is 2
pos[2] = pos[1]
return pos
getStyle: (name) ->
name = @options.style unless name
name = 'default' unless name
style = styles[name]
throw "Missing style: #{name}"unless style
style
updateClasses: ->
classes = ['base']
if $.isArray @options.className
classes = classes.concat @options.className
else if @options.className
classes.push @options.className
style = @getStyle()
classes = $.map(classes, (n) -> "#{pluginClassName}-#{style.name}-#{n}").join ' '
@userContainer.attr 'class', classes
#run plugin
run: (data, options) ->
#update options
if $.isPlainObject(options)
$.extend @options, options
#shortcut special case
else if $.type(options) is 'string'
@options.className = options
if @container and not data
@show false
return
else if not @container and not data
return
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()
#positioning
if @elem
@setElementPosition()
else
@setGlobalPosition()
@show true
#autohide
if @options.autoHide
clearTimeout @autohideTimer
@autohideTimer = setTimeout =>
@show false
, @options.autoHideDelay
destroy: ->
@wrapper.remove()
# ================================
# API
# ================================
# $.pluginName( { ... } ) changes options for all instances
$[pluginName] = (elem, data, options) ->
if (elem and elem.nodeName) or elem.jquery
$(elem)[pluginName](data, options)
else
options = data
data = elem
new Notification null, data, options
elem
# $( ... ).pluginName( { .. } ) creates a cached instance on each
$.fn[pluginName] = (data, options) ->
$(@).each ->
inst = getAnchorElement($(@)).data(pluginClassName)
if inst
inst.run data, options
else
new Notification $(@), data, options
@
#extra methods
$.extend $[pluginName], { defaults, addStyle, pluginOptions, getStyle, insertCSS }
#when ready
$ ->
#insert default style
insertCSS(coreStyle.css).attr('id', 'core-notify')
#watch all notifications clicks
$(document).on 'click', ".#{pluginClassName}-hidable", (e) ->
$(@).trigger 'notify-hide'
$(document).on 'notify-hide', ".#{pluginClassName}-wrapper", (e) ->
$(@).data(pluginClassName)?.show false
src/styles/STYLES-README.md
-2
View File
@@ -1,2 +0,0 @@
* Styles in CoffeeScript go here, which will be compiled into `dist/styles`
* Styles in JavaScript can go straight in `dist/styles/`
src/styles/bootstrap/notify-bootstrap.coffee
-40
View File
@@ -1,40 +0,0 @@
$.notify.addStyle "bootstrap",
html: """
<div>
<span data-notify-text></span>
</div>
"""
classes:
base:
"font-weight": "bold"
"padding": "8px 15px 8px 14px"
"text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)"
"background-color": "#fcf8e3"
"border": "1px solid #fbeed5"
"border-radius": "4px"
"white-space": "nowrap"
#for background-image
"padding-left": "25px"
"background-repeat": "no-repeat"
"background-position": "3px 7px"
error:
"color": "#B94A48"
"background-color": "#F2DEDE"
"border-color": "#EED3D7"
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=)"
success:
"color": "#468847"
"background-color": "#DFF0D8"
"border-color": "#D6E9C6"
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==)"
info:
"color": "#3A87AD"
"background-color": "#D9EDF7"
"border-color": "#BCE8F1"
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=)"
warn:
"color": "#C09853"
"background-color": "#FCF8E3"
"border-color": "#FBEED5"
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC)"