8 Commits
43 changed files with 655 additions and 6834 deletions
-3
View File
@@ -1,3 +0,0 @@
2015-10-20 v0.3.3
ECARROLL- Updated to remove Grunt, and coffeescript stuff.
+4
View File
@@ -0,0 +1,4 @@
2015-10-20 v0.4
@EvanCarroll - Updated to remove Grunt, and coffeescript stuff, changed to use UMD.
@jpillora - Remove deprecated grunt file, there is now a single `notify.js` file
-1
View File
@@ -1 +0,0 @@
notifyjs.com
-66
View File
@@ -1,66 +0,0 @@
var fs = require("fs");
var process = require("process");
console.log("This file is now deprecated.. We no longer have a build system because we're not using coffee script.");
process.exit();
module.exports = function(grunt) {
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");
return grunt.registerTask("default", "coffee wrap concat uglify".split(' '));
};
+19 -18
View File
@@ -7,25 +7,26 @@ See demos and full documentation at:
## http://notifyjs.com/
#### MIT License
SYNOPSIS
====
Copyright © 2013 Jaime Pillora &lt;dev@jpillora.com&gt;
Global Notifications
----
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
$.notify("Hello World");
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
Element Notifications
----
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
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.
$(".elem-demo").notify("Hello World");
// where x is one letter: [t]op [m]iddle [b]ottom
// where y is one letter: [l]eft [c]enter [r]ight
$(".elem-demo").notify("Hello World", {position: "x y"});
COPYRIGHT
====
Notify.js is released under the [MIT License](https://opensource.org/licenses/MIT).
Copyright © Jaime Pillora &lt;dev@jpillora.com&gt;
+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>"
-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)"
}
}
});
-5
View File
File diff suppressed because one or more lines are too long
+218 -149
View File
@@ -1,40 +1,68 @@
(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'
/* Notify.js - http://notifyjs.com/ Copyright (c) 2015 MIT */
(function (factory) {
// UMD start
// https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = function( root, jQuery ) {
if ( jQuery === undefined ) {
// require('jQuery') returns a factory that requires window to
// build a jQuery instance, we normalize how we use modules
// that require this pattern but the window provided is a noop
// if it's defined (how jquery works)
if ( typeof window !== 'undefined' ) {
jQuery = require('jquery');
}
else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
//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 -1;
};
hAligns = ['l', 'c', 'r'];
var pluginName = "notify";
var pluginClassName = pluginName + "js";
var blankFieldName = pluginName + "!blank";
vAligns = ['t', 'm', 'b'];
mainPositions = ['t', 'b', 'l', 'r'];
opposites = {
t: 'b',
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',
b: "t",
l: "r",
c: null,
r: 'l'
r: "l"
};
parsePosition = function(str) {
var parsePosition = function(str) {
var pos;
pos = [];
$.each(str.split(/\W+/), function(i, word) {
@@ -47,24 +75,23 @@ parsePosition = function(str) {
return pos;
};
styles = {};
var styles = {};
coreStyle = {
name: 'core',
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}"
};
stylePrefixes = {
var stylePrefixes = {
"border-radius": ["-webkit-", "-moz-"]
};
getStyle = function(name) {
var getStyle = function(name) {
return styles[name];
};
addStyle = function(name, def) {
var cssText, elem, fields, _ref;
var addStyle = function(name, def) {
if (!name) {
throw "Missing Style name";
}
@@ -74,15 +101,17 @@ addStyle = function(name, def) {
if (!def.html) {
throw "Missing Style HTML";
}
if ((_ref = styles[name]) != null ? _ref.cssElem : void 0) {
//remove existing style
var existing = styles[name];
if (existing && existing.cssElem) {
if (window.console) {
console.warn("" + pluginName + ": overwriting style '" + name + "'");
console.warn(pluginName + ": overwriting style '" + name + "'");
}
styles[name].cssElem.remove();
}
def.name = name;
styles[name] = def;
cssText = "";
var cssText = "";
if (def.classes) {
$.each(def.classes, function(className, props) {
cssText += "." + pluginClassName + "-" + def.name + "-" + className + " {\n";
@@ -102,32 +131,32 @@ addStyle = function(name, def) {
}
if (cssText) {
def.cssElem = insertCSS(cssText);
def.cssElem.attr('id', "notify-" + def.name);
def.cssElem.attr("id", "notify-" + def.name);
}
fields = {};
elem = $(def.html);
findFields('html', elem, fields);
findFields('text', elem, fields);
return def.fields = fields;
var fields = {};
var elem = $(def.html);
findFields("html", elem, fields);
findFields("text", elem, fields);
def.fields = fields;
};
insertCSS = function(cssText) {
var elem;
var insertCSS = function(cssText) {
var e, elem, error;
elem = createElem("style");
elem.attr('type', 'text/css');
elem.attr("type", 'text/css');
$("head").append(elem);
try {
elem.html(cssText);
} catch (e) {
} catch (_) {
elem[0].styleSheet.cssText = cssText;
}
return elem;
};
findFields = function(type, elem, fields) {
var findFields = function(type, elem, fields) {
var attr;
if (type !== 'html') {
type = 'text';
if (type !== "html") {
type = "text";
}
attr = "data-notify-" + type;
return find(elem, "[" + attr + "]").each(function() {
@@ -136,11 +165,11 @@ findFields = function(type, elem, fields) {
if (!name) {
name = blankFieldName;
}
return fields[name] = type;
fields[name] = type;
});
};
find = function(elem, selector) {
var find = function(elem, selector) {
if (elem.is(selector)) {
return elem;
} else {
@@ -148,57 +177,57 @@ find = function(elem, selector) {
}
};
pluginOptions = {
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',
elementPosition: "bottom",
globalPosition: "top right",
style: "bootstrap",
className: "error",
showAnimation: "slideDown",
showDuration: 400,
hideAnimation: 'slideUp',
hideAnimation: "slideUp",
hideDuration: 200,
gap: 5
};
inherit = function(a, b) {
var inherit = function(a, b) {
var F;
F = function() {};
F.prototype = a;
return $.extend(true, new F(), b);
};
defaults = function(opts) {
var defaults = function(opts) {
return $.extend(pluginOptions, opts);
};
createElem = function(tag) {
var createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
globalAnchors = {};
var globalAnchors = {};
getAnchorElement = function(element) {
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');
return $(e).attr("name") === element.attr("name");
});
element = radios.first();
}
return element;
};
incr = function(obj, pos, val) {
var incr = function(obj, pos, val) {
var opp, temp;
if (typeof val === 'string') {
if (typeof val === "string") {
val = parseInt(val, 10);
} else if (typeof val !== 'number') {
} else if (typeof val !== "number") {
return;
}
if (isNaN(val)) {
@@ -218,26 +247,24 @@ incr = function(obj, pos, val) {
return null;
};
realign = function(alignment, inner, outer) {
if (alignment === 'l' || alignment === 't') {
var realign = function(alignment, inner, outer) {
if (alignment === "l" || alignment === "t") {
return 0;
} else if (alignment === 'c' || alignment === 'm') {
} else if (alignment === "c" || alignment === "m") {
return outer / 2 - inner / 2;
} else if (alignment === 'r' || alignment === 'b') {
} else if (alignment === "r" || alignment === "b") {
return outer - inner;
}
throw "Invalid alignment";
};
encode = function(text) {
var 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') {
if (typeof options === "string") {
options = {
className: options
};
@@ -246,14 +273,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);
@@ -267,13 +294,13 @@ 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() {
var args, callback, elems, fn, hidden;
callback = (function(_this) {
return function() {
if (!show && !_this.elem) {
_this.destroy();
}
@@ -281,13 +308,14 @@ Notification = (function() {
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);
@@ -302,33 +330,36 @@ Notification = (function() {
};
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];
var p = this.getPosition();
var pMain = p[0];
var pAlign = p[1];
var main = positions[pMain];
var align = positions[pAlign];
var key = pMain + "|" + pAlign;
var anchor = globalAnchors[key];
if (!anchor) {
anchor = globalAnchors[key] = createElem("div");
css = {};
var 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];
pMain = position[0];
pAlign = position[1];
pArrow = position[2];
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth();
@@ -341,12 +372,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);
@@ -359,53 +390,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];
@@ -419,7 +450,7 @@ Notification = (function() {
name = this.options.style;
}
if (!name) {
name = 'default';
name = "default";
}
style = styles[name];
if (!style) {
@@ -430,7 +461,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) {
@@ -438,17 +469,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) {
@@ -469,7 +499,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/>');
@@ -487,9 +517,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);
}
};
@@ -497,10 +525,6 @@ Notification = (function() {
return this.wrapper.remove();
};
return Notification;
})();
$[pluginName] = function(elem, data, options) {
if ((elem && elem.nodeName) || elem.jquery) {
$(elem)[pluginName](data, options);
@@ -533,15 +557,60 @@ $.extend($[pluginName], {
insertCSS: insertCSS
});
$(function() {
insertCSS(coreStyle.css).attr('id', 'core-notify');
$(document).on('click', "." + pluginClassName + "-hidable", function(e) {
return $(this).trigger('notify-hide');
//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 $(document).on('notify-hide', "." + pluginClassName + "-wrapper", function(e) {
var _ref;
return (_ref = $(this).data(pluginClassName)) != null ? _ref.show(false) : void 0;
$(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);
}
});
});
}(window,document,jQuery));
}));
-5
View File
File diff suppressed because one or more lines are too long
-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)"
}
}
});
-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
}
-1560
View File
File diff suppressed because it is too large Load Diff
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

-1041
View File
File diff suppressed because it is too large Load Diff
-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
-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)
-64
View File
@@ -1,64 +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>Checkout</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')
setTimeout ->
$.notify("http://gswg.io", {position:'b r', style: 'gswg', autoHideDelay: 10*1000, clickToHide: false})
, 15*1000
-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()
-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);
-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"]);
-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
-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; }
-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; }
*/
-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}
-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;
}
-79
View File
@@ -1,79 +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/notifyjs/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=notifyjs&repo=notifyjs&type=watch&count=true",
allowtransparency="true",frameborder="0",scrolling="0",width="120",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="http://jpillora.com/compilejs/dist/compile.js")
script(defered, src="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');
-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)
-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/notifyjs/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/notifyjs/notifyjs") https://github.com/notifyjs/notifyjs
li: code cd notifyjs
li: code npm install -g grunt-cli
li: code npm install
li: code grunt
li Pull-request !
-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
@@ -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" });
| .
-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
}
-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
-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/notifyjs/notifyjs/tree/gh-pages/dist/styles/bootstrap", target="_blank") bootstrap
ul.square
li: a(href="https://github.com/notifyjs/notifyjs/tree/gh-pages/dist/styles/metro", target="_blank") metro
-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')
-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 !");
+5 -2
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
});
-1
View File
@@ -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})
+1 -4
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",
-2
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"});
});
-460
View File
@@ -1,460 +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/notifyjs/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=notifyjs&amp;repo=notifyjs&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" 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/notifyjs/notifyjs/tree/gh-pages/dist/styles/bootstrap" target="_blank">bootstrap</a></li>
</ul>
<ul class="square">
<li><a href="https://github.com/notifyjs/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/notifyjs/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/notifyjs/notifyjs">https://github.com/notifyjs/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>
+1 -1
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",
+22 -5
View File
@@ -1,18 +1,35 @@
{
"title": "Notify.js",
"name": "notify",
"version": "0.3.3",
"version": "0.4.0",
"author": {
"name": "Jaime Pillora"
},
"contributors": [
{
"name": "Evan Carroll"
, "url": "http://www.evancarroll.com"
, "email": "me@evancarroll.com"
"name": "Evan Carroll",
"url": "http://www.evancarroll.com",
"email": "me@evancarroll.com"
}
],
"homepage": "http://notifyjs.com/",
"license": "MIT",
"main": "dist/notify.js"
"main": "dist/notify.js",
"scripts": {
"test": "npm run lint",
"lint": "jshint ./dist/*.js"
},
"dependencies": {
"jquery": "^2.1.4"
},
"devDependencies": {
"jshint": "^2.8.0"
},
"keywords": [
"notify",
"notification",
"prompt",
"popup",
"jquery-plugin"
]
}