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

updated, added css object, refactored

Browse Source
This commit is contained in:
Jaime Pillora
2013-06-04 17:01:03 +10:00
parent 37631df657
commit f523f31cae
3 changed files with 164 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+75 -38
View File
@@ -1,16 +1,16 @@
/** Notify.js - v0.0.1 - 2013/06/03 /** Notify.js - v0.0.1 - 2013/06/04
* http://notifyjs.com/ * http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT * Copyright (c) 2013 Jaime Pillora - MIT
*/ */
(function(window,document,undefined) { (function(window,document,undefined) {
'use strict'; 'use strict';
var Notification, addStyle, className, coreStyle, cornerElem, createElem, defaultStyle, defaultStyleName, getAnchorElement, hAligns, incr, inherit, insertCSS, mainPositions, opposites, options, parsePosition, pluginName, pluginOptions, positions, realign, styles, vAligns, var Notification, addStyle, coreStyle, cornerElem, createElem, defaultStyle, defaultStyleName, getAnchorElement, hAligns, incr, inherit, insertCSS, mainPositions, opposites, options, 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; }; __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'; pluginName = 'notify';
className = pluginName + 'js'; pluginClassName = pluginName + 'js';
positions = { positions = {
t: 'top', t: 'top',
@@ -53,8 +53,8 @@ styles = {};
coreStyle = { coreStyle = {
name: 'core', name: 'core',
html: "<div class=\"" + className + "-wrapper\">\n <div class=\"" + className + "-arrow\"></div>\n <div class=\"" + className + "-container\"></div>\n</div>", html: "<div class=\"" + pluginClassName + "-wrapper\">\n <div class=\"" + pluginClassName + "-arrow\"></div>\n <div class=\"" + pluginClassName + "-container\"></div>\n</div>",
css: "." + className + "-corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n." + className + "-corner ." + className + "-wrapper,\n." + className + "-corner ." + className + "-container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n}\n\n." + className + "-wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n." + className + "-container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + className + "-text {\n position: relative;\n}\n\n." + className + "-arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}" css: "." + pluginClassName + "-corner {\n position: fixed;\n top: 0;\n right: 0;\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}\n\n." + pluginClassName + "-wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n." + pluginClassName + "-container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + pluginClassName + "-text {\n position: relative;\n}\n\n." + pluginClassName + "-arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}"
}; };
defaultStyleName = "bootstrap"; defaultStyleName = "bootstrap";
@@ -62,13 +62,38 @@ defaultStyleName = "bootstrap";
defaultStyle = { defaultStyle = {
html: "<div>\n <span data-notify-text></span>\n</div>", html: "<div>\n <span data-notify-text></span>\n</div>",
classes: { classes: {
base: "padding: 8px 35px 8px 14px;\ntext-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\nbackground-color: #fcf8e3;\nborder: 1px solid #fbeed5;\n-webkit-border-radius: 4px;\n-moz-border-radius: 4px;\nborder-radius: 4px;\nwhite-space: nowrap;", base: {
error: "color: #B94A48;\nbackground-color: #F2DEDE;\nborder-color: #EED3D7;\npadding-left: 25px;\nbackground-repeat: no-repeat;\nbackground-position: 3px 7px;\nbackground-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=);", "padding": "8px 15px 8px 14px",
info: "", "text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)",
warn: "" "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: {},
warn: {}
} }
}; };
stylePrefixes = {
"border-radius": ["-webkit-", "-moz-"]
};
addStyle = function(name, def) { addStyle = function(name, def) {
var cssText; var cssText;
if (styles[name]) { if (styles[name]) {
@@ -82,8 +107,17 @@ addStyle = function(name, def) {
} }
cssText = ""; cssText = "";
if (def.classes) { if (def.classes) {
$.each(def.classes, function(subClassName, css) { $.each(def.classes, function(className, props) {
return cssText += "." + className + "-" + def.name + "-" + subClassName + " {\n " + css + "\n}\n"; 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) { if (def.css) {
@@ -109,14 +143,13 @@ insertCSS = function(cssText) {
}; };
pluginOptions = { pluginOptions = {
autoHide: false, autoHide: true,
autoHideDelay: 2000, autoHideDelay: 5000,
arrowShow: true, arrowShow: true,
arrowSize: 5, arrowSize: 5,
arrowColor: 'border',
position: 'bottom', position: 'bottom',
style: 'bootstrap', style: 'bootstrap',
cls: 'error', className: 'error',
showAnimation: 'slideDown', showAnimation: 'slideDown',
showDuration: 400, showDuration: 400,
hideAnimation: 'slideUp', hideAnimation: 'slideUp',
@@ -140,7 +173,7 @@ createElem = function(tag) {
return $("<" + tag + "></" + tag + ">"); return $("<" + tag + "></" + tag + ">");
}; };
cornerElem = createElem("div").addClass("" + className + "-corner"); cornerElem = createElem("div").addClass("" + pluginClassName + "-corner");
getAnchorElement = function(element) { getAnchorElement = function(element) {
var radios; var radios;
@@ -193,21 +226,21 @@ Notification = (function() {
function Notification(elem, data, options) { function Notification(elem, data, options) {
if (typeof options === 'string') { if (typeof options === 'string') {
options = { options = {
color: options className: options
}; };
} }
this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {}); this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {});
this.loadHTML(); this.loadHTML();
this.wrapper = $(coreStyle.html); this.wrapper = $(coreStyle.html);
this.wrapper.data(className, this); this.wrapper.data(pluginClassName, this);
this.arrow = this.wrapper.find("." + className + "-arrow"); this.arrow = this.wrapper.find("." + pluginClassName + "-arrow");
this.container = this.wrapper.find("." + className + "-container"); this.container = this.wrapper.find("." + pluginClassName + "-container");
this.container.append(this.userContainer); this.container.append(this.userContainer);
if (elem && elem.length) { if (elem && elem.length) {
this.elementType = elem.attr('type'); this.elementType = elem.attr('type');
this.originalElement = elem; this.originalElement = elem;
this.elem = getAnchorElement(elem); this.elem = getAnchorElement(elem);
this.elem.data(className, this); this.elem.data(pluginClassName, this);
this.elem.before(this.wrapper); this.elem.before(this.wrapper);
} else { } else {
this.options.arrowShow = false; this.options.arrowShow = false;
@@ -223,9 +256,13 @@ Notification = (function() {
this.userContainer = $(style.html); this.userContainer = $(style.html);
this.text = this.userContainer.find('[data-notify-text]'); this.text = this.userContainer.find('[data-notify-text]');
if (this.text.length === 0) { if (this.text.length === 0) {
throw "style: " + name + " HTML is missing the: 'data-notify-text' attribute"; this.text = this.userContainer.find('[data-notify-html]');
this.rawText = true;
} }
return this.text.addClass("" + className + "-text"); if (this.text.length === 0) {
throw "style: '" + name + "' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute";
}
return this.text.addClass("" + pluginClassName + "-text");
}; };
Notification.prototype.show = function(show, callback) { Notification.prototype.show = function(show, callback) {
@@ -254,7 +291,7 @@ Notification = (function() {
}; };
Notification.prototype.updatePosition = function() { Notification.prototype.updatePosition = function() {
var arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, style, wrapPos, _i, _len; var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, style, wrapPos, _i, _len;
if (!this.elem) { if (!this.elem) {
return; return;
} }
@@ -267,7 +304,6 @@ Notification = (function() {
contH = this.container.height(); contH = this.container.height();
contW = this.container.width(); contW = this.container.width();
position = this.getPosition(); position = this.getPosition();
console.log(position);
pMain = position[0]; pMain = position[0];
pAlign = position[1]; pAlign = position[1];
pArrow = position[2] || pAlign; pArrow = position[2] || pAlign;
@@ -295,13 +331,14 @@ Notification = (function() {
} else { } else {
arrowSize = this.options.arrowSize; arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css); arrowCss = $.extend({}, css);
arrowColor = this.userContainer.css("border-color") || this.userContainer.css("background-color") || 'white';
for (_i = 0, _len = mainPositions.length; _i < _len; _i++) { for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
pos = mainPositions[_i]; pos = mainPositions[_i];
posFull = positions[pos]; posFull = positions[pos];
if (pos === opp) { if (pos === opp) {
continue; continue;
} }
color = posFull === mainFull ? 'black' : 'transparent'; color = posFull === mainFull ? arrowColor : 'transparent';
arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color; arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color;
} }
incr(css, positions[opp], arrowSize); incr(css, positions[opp], arrowSize);
@@ -364,18 +401,18 @@ Notification = (function() {
}; };
Notification.prototype.updateStyleClasses = function() { Notification.prototype.updateStyleClasses = function() {
var cls, style; var classes, style;
cls = ['base']; classes = ['base'];
if ($.isArray(this.options.cls)) { if ($.isArray(this.options.className)) {
cls = cls.concat(this.options.cls); classes = classes.concat(this.options.className);
} else if (this.options.cls) { } else if (this.options.className) {
cls.push(this.options.cls); classes.push(this.options.className);
} }
style = this.getStyle(); style = this.getStyle();
cls = $.map(cls, function(n) { classes = $.map(classes, function(n) {
return "" + className + "-" + style.name + "-" + n; return "" + pluginClassName + "-" + style.name + "-" + n;
}).join(' '); }).join(' ');
return this.userContainer.attr('class', cls); return this.userContainer.attr('class', classes);
}; };
Notification.prototype.run = function(data, options) { Notification.prototype.run = function(data, options) {
@@ -432,7 +469,7 @@ $[pluginName] = function(elem, data, options) {
$.fn[pluginName] = function(data, options) { $.fn[pluginName] = function(data, options) {
$(this).each(function() { $(this).each(function() {
var inst; var inst;
inst = getAnchorElement($(this)).data(className); inst = getAnchorElement($(this)).data(pluginClassName);
if (inst) { if (inst) {
return inst.run(data, options); return inst.run(data, options);
} else { } else {
@@ -459,9 +496,9 @@ $(function() {
}); });
insertCSS(coreStyle.css).attr('data-notify-style', 'core'); insertCSS(coreStyle.css).attr('data-notify-style', 'core');
$[pluginName].addStyle(defaultStyleName, defaultStyle); $[pluginName].addStyle(defaultStyleName, defaultStyle);
return $(document).on('click', "." + className + "-wrapper", function() { return $(document).on('click', "." + pluginClassName + "-wrapper", function() {
var inst; var inst;
inst = $(this).data(className); inst = $(this).data(pluginClassName);
if (!inst) { if (!inst) {
return; return;
} }
dist/notify.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
src/notify.coffee
+87 -69
View File
@@ -3,7 +3,7 @@
#plugin constants #plugin constants
pluginName = 'notify' pluginName = 'notify'
className = pluginName+'js' pluginClassName = pluginName+'js'
# ================================ # ================================
# POSITIONING # POSITIONING
@@ -43,15 +43,15 @@ styles = {}
coreStyle = coreStyle =
name: 'core' name: 'core'
html: """ html: """
<div class="#{className}-wrapper"> <div class="#{pluginClassName}-wrapper">
<div class="#{className}-arrow"></div> <div class="#{pluginClassName}-arrow"></div>
<div class="#{className}-container"></div> <div class="#{pluginClassName}-container"></div>
</div> </div>
""" """
# <div class="#{className}Debug"></div> # <div class="#{pluginClassName}Debug"></div>
# .#{className}Debug { # .#{pluginClassName}Debug {
# position: absolute; # position: absolute;
# border: 3px solid red; # border: 3px solid red;
# height: 0; # height: 0;
@@ -59,7 +59,7 @@ coreStyle =
# } # }
css: """ css: """
.#{className}-corner { .#{pluginClassName}-corner {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@@ -67,15 +67,15 @@ coreStyle =
z-index: 1050; z-index: 1050;
} }
.#{className}-corner .#{className}-wrapper, .#{pluginClassName}-corner .#{pluginClassName}-wrapper,
.#{className}-corner .#{className}-container { .#{pluginClassName}-corner .#{pluginClassName}-container {
position: relative; position: relative;
display: block; display: block;
height: inherit; height: inherit;
width: inherit; width: inherit;
} }
.#{className}-wrapper { .#{pluginClassName}-wrapper {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@@ -83,18 +83,18 @@ coreStyle =
width: 0; width: 0;
} }
.#{className}-container { .#{pluginClassName}-container {
display: none; display: none;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
.#{className}-text { .#{pluginClassName}-text {
position: relative; position: relative;
} }
.#{className}-arrow { .#{pluginClassName}-arrow {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 0; width: 0;
@@ -111,27 +111,32 @@ defaultStyle =
""" """
classes: classes:
base: """ base:
padding: 8px 35px 8px 14px; "padding": "8px 15px 8px 14px"
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); "text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)"
background-color: #fcf8e3; "background-color": "#fcf8e3"
border: 1px solid #fbeed5; "border": "1px solid #fbeed5"
-webkit-border-radius: 4px; "border-radius": "4px"
-moz-border-radius: 4px; "white-space": "nowrap"
border-radius: 4px; #for background-image
white-space: nowrap; "padding-left": "25px"
""" "background-repeat": "no-repeat"
error: """ "background-position": "3px 7px"
color: #B94A48; error:
background-color: #F2DEDE; "color": "#B94A48"
border-color: #EED3D7; "background-color": "#F2DEDE"
padding-left: 25px; "border-color": "#EED3D7"
background-repeat: no-repeat; "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=)"
background-position: 3px 7px; success:
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=); "color": "#468847"
""" "background-color": "#DFF0D8"
info: "" "border-color": "#D6E9C6"
warn: "" "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: {}
warn: {}
stylePrefixes =
"border-radius": ["-webkit-", "-moz-"]
addStyle = (name, def) -> addStyle = (name, def) ->
if styles[name] if styles[name]
@@ -144,12 +149,16 @@ addStyle = (name, def) ->
cssText = "" cssText = ""
if def.classes if def.classes
$.each def.classes, (subClassName, css) -> $.each def.classes, (className, props) ->
cssText += """ cssText += ".#{pluginClassName}-#{def.name}-#{className} {\n"
.#{className}-#{def.name}-#{subClassName} { $.each props, (name, val) ->
#{css} #vendor prefixes
}\n if stylePrefixes[name]
""" $.each stylePrefixes[name], (i, prefix) ->
cssText += " #{prefix}#{name}: #{val};\n"
#add prop
cssText += " #{name}: #{val};\n"
cssText += "}\n"
if def.css if def.css
cssText += """ cssText += """
/* styles for #{def.name} */ /* styles for #{def.name} */
@@ -161,6 +170,7 @@ addStyle = (name, def) ->
def.cssElem.attr('data-notify-style', def.name) def.cssElem.attr('data-notify-style', def.name)
insertCSS = (cssText) -> insertCSS = (cssText) ->
elem = createElem("style") elem = createElem("style")
$("head").append elem $("head").append elem
try try
@@ -176,15 +186,14 @@ insertCSS = (cssText) ->
#overridable options #overridable options
pluginOptions = pluginOptions =
autoHide: false autoHide: true
autoHideDelay: 2000 autoHideDelay: 5000
arrowShow: true arrowShow: true
arrowSize: 5 arrowSize: 5
arrowColor: 'border'
position: 'bottom' position: 'bottom'
# Default style # Default style
style: 'bootstrap' style: 'bootstrap'
cls: 'error' className: 'error'
showAnimation: 'slideDown' showAnimation: 'slideDown'
showDuration: 400 showDuration: 400
hideAnimation: 'slideUp' hideAnimation: 'slideUp'
@@ -213,7 +222,7 @@ createElem = (tag) ->
$ "<#{tag}></#{tag}>" $ "<#{tag}></#{tag}>"
# container for element-less notifications # container for element-less notifications
cornerElem = createElem("div").addClass("#{className}-corner") cornerElem = createElem("div").addClass("#{pluginClassName}-corner")
#gets first on n radios, and gets the fancy stylised input for hidden inputs #gets first on n radios, and gets the fancy stylised input for hidden inputs
getAnchorElement = (element) -> getAnchorElement = (element) ->
@@ -267,23 +276,23 @@ class Notification
#setup instance variables #setup instance variables
constructor: (elem, data, options) -> constructor: (elem, data, options) ->
options = {color: options} if typeof options is 'string' options = {className: options} if typeof options is 'string'
@options = inherit pluginOptions, if $.isPlainObject(options) then options else {} @options = inherit pluginOptions, if $.isPlainObject(options) then options else {}
#load user html into @userContainer #load user html into @userContainer
@loadHTML() @loadHTML()
@wrapper = $(coreStyle.html) @wrapper = $(coreStyle.html)
@wrapper.data className, @ @wrapper.data pluginClassName, @
@arrow = @wrapper.find ".#{className}-arrow" @arrow = @wrapper.find ".#{pluginClassName}-arrow"
@container = @wrapper.find ".#{className}-container" @container = @wrapper.find ".#{pluginClassName}-container"
@container.append @userContainer @container.append @userContainer
if elem and elem.length if elem and elem.length
@elementType = elem.attr('type') @elementType = elem.attr('type')
@originalElement = elem @originalElement = elem
@elem = getAnchorElement(elem) @elem = getAnchorElement(elem)
@elem.data className, @ @elem.data pluginClassName, @
# add into dom above elem # add into dom above elem
@elem.before @wrapper @elem.before @wrapper
else else
@@ -299,8 +308,12 @@ class Notification
@userContainer = $(style.html) @userContainer = $(style.html)
@text = @userContainer.find '[data-notify-text]' @text = @userContainer.find '[data-notify-text]'
if @text.length is 0 if @text.length is 0
throw "style: #{name} HTML is missing the: 'data-notify-text' attribute" @text = @userContainer.find '[data-notify-html]'
@text.addClass "#{className}-text" @rawText = true
if @text.length is 0
throw "style: '#{name}' HTML is missing a: 'data-notify-text' or 'data-notify-html' attribute"
@text.addClass "#{pluginClassName}-text"
show: (show, callback = $.noop) -> show: (show, callback = $.noop) ->
@@ -342,8 +355,6 @@ class Notification
#get user defined position #get user defined position
position = @getPosition() position = @getPosition()
console.log position
pMain = position[0] pMain = position[0]
pAlign = position[1] pAlign = position[1]
pArrow = position[2] or pAlign pArrow = position[2] or pAlign
@@ -354,8 +365,12 @@ class Notification
oppFull = positions[opp] oppFull = positions[opp]
#initial positioning #initial positioning
css = {} css = {}
css[oppFull] = if pMain is 'b' then elemH else css[oppFull] = if pMain is 'b'
if pMain is 'r' then elemW else 0 elemH
else if pMain is 'r'
elemW
else
0
#correct for elem-wrapper offset #correct for elem-wrapper offset
# unless navigator.userAgent.match /MSIE/ # unless navigator.userAgent.match /MSIE/
@@ -383,11 +398,14 @@ class Notification
else else
arrowSize = @options.arrowSize arrowSize = @options.arrowSize
arrowCss = $.extend {}, css arrowCss = $.extend {}, css
arrowColor = @userContainer.css("border-color") or
@userContainer.css("background-color") or
'white'
#build arrow #build arrow
for pos in mainPositions for pos in mainPositions
posFull = positions[pos] posFull = positions[pos]
continue if pos is opp continue if pos is opp
color = if posFull is mainFull then 'black' else 'transparent' color = if posFull is mainFull then arrowColor else 'transparent'
arrowCss["border-#{posFull}"] = "#{arrowSize}px solid #{color}" arrowCss["border-#{posFull}"] = "#{arrowSize}px solid #{color}"
#add some room for the arrow #add some room for the arrow
incr css, positions[opp], arrowSize incr css, positions[opp], arrowSize
@@ -402,8 +420,8 @@ class Notification
incr css, 'top', realign(pAlign, contH, elemH) incr css, 'top', realign(pAlign, contH, elemH)
incr arrowCss, 'top', realign(pAlign, arrowSize, elemIH) if arrowCss incr arrowCss, 'top', realign(pAlign, arrowSize, elemIH) if arrowCss
#apply css
css.display = 'block' if @container.is(":visible") css.display = 'block' if @container.is(":visible")
#apply css
@container.removeAttr('style').css css @container.removeAttr('style').css css
@arrow.removeAttr('style').css(arrowCss) if arrowCss @arrow.removeAttr('style').css(arrowCss) if arrowCss
@@ -434,21 +452,21 @@ class Notification
name = @options.style unless name name = @options.style unless name
name = 'default' unless name name = 'default' unless name
style = styles[name] style = styles[name]
throw "Missing style: #{name}" unless style throw "Missing style: #{name}"unless style
style style
updateStyleClasses: -> updateStyleClasses: ->
cls = ['base'] classes = ['base']
if $.isArray @options.cls if $.isArray @options.className
cls = cls.concat @options.cls classes = classes.concat @options.className
else if @options.cls else if @options.className
cls.push @options.cls classes.push @options.className
style = @getStyle() style = @getStyle()
cls = $.map(cls, (n) -> "#{className}-#{style.name}-#{n}").join ' ' classes = $.map(classes, (n) -> "#{pluginClassName}-#{style.name}-#{n}").join ' '
@userContainer.attr 'class', cls @userContainer.attr 'class', classes
#run plugin #run plugin
@@ -509,7 +527,7 @@ $[pluginName] = (elem, data, options) ->
# $( ... ).pluginName( { .. } ) creates a cached instance on each # $( ... ).pluginName( { .. } ) creates a cached instance on each
$.fn[pluginName] = (data, options) -> $.fn[pluginName] = (data, options) ->
$(@).each -> $(@).each ->
inst = getAnchorElement($(@)).data(className) inst = getAnchorElement($(@)).data(pluginClassName)
if inst if inst
inst.run data, options inst.run data, options
else else
@@ -537,8 +555,8 @@ $ ->
$[pluginName].addStyle(defaultStyleName, defaultStyle) $[pluginName].addStyle(defaultStyleName, defaultStyle)
#watch all notifications clicks #watch all notifications clicks
$(document).on 'click', ".#{className}-wrapper", -> $(document).on 'click', ".#{pluginClassName}-wrapper", ->
inst = $(@).data className inst = $(@).data pluginClassName
return unless inst return unless inst
if inst.elem if inst.elem
inst.show false inst.show false