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/
* Copyright (c) 2013 Jaime Pillora - MIT
*/
(function(window,document,undefined) {
'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; };
pluginName = 'notify';
className = pluginName + 'js';
pluginClassName = pluginName + 'js';
positions = {
t: 'top',
@@ -53,8 +53,8 @@ styles = {};
coreStyle = {
name: 'core',
html: "<div class=\"" + className + "-wrapper\">\n <div class=\"" + className + "-arrow\"></div>\n <div class=\"" + className + "-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}"
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 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";
@@ -62,13 +62,38 @@ defaultStyleName = "bootstrap";
defaultStyle = {
html: "<div>\n <span data-notify-text></span>\n</div>",
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;",
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=);",
info: "",
warn: ""
base: {
"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: {},
warn: {}
}
};
stylePrefixes = {
"border-radius": ["-webkit-", "-moz-"]
};
addStyle = function(name, def) {
var cssText;
if (styles[name]) {
@@ -82,8 +107,17 @@ addStyle = function(name, def) {
}
cssText = "";
if (def.classes) {
$.each(def.classes, function(subClassName, css) {
return cssText += "." + className + "-" + def.name + "-" + subClassName + " {\n " + css + "\n}\n";
$.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) {
@@ -109,14 +143,13 @@ insertCSS = function(cssText) {
};
pluginOptions = {
autoHide: false,
autoHideDelay: 2000,
autoHide: true,
autoHideDelay: 5000,
arrowShow: true,
arrowSize: 5,
arrowColor: 'border',
position: 'bottom',
style: 'bootstrap',
cls: 'error',
className: 'error',
showAnimation: 'slideDown',
showDuration: 400,
hideAnimation: 'slideUp',
@@ -140,7 +173,7 @@ createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
cornerElem = createElem("div").addClass("" + className + "-corner");
cornerElem = createElem("div").addClass("" + pluginClassName + "-corner");
getAnchorElement = function(element) {
var radios;
@@ -193,21 +226,21 @@ Notification = (function() {
function Notification(elem, data, options) {
if (typeof options === 'string') {
options = {
color: options
className: options
};
}
this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {});
this.loadHTML();
this.wrapper = $(coreStyle.html);
this.wrapper.data(className, this);
this.arrow = this.wrapper.find("." + className + "-arrow");
this.container = this.wrapper.find("." + className + "-container");
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(className, this);
this.elem.data(pluginClassName, this);
this.elem.before(this.wrapper);
} else {
this.options.arrowShow = false;
@@ -223,9 +256,13 @@ Notification = (function() {
this.userContainer = $(style.html);
this.text = this.userContainer.find('[data-notify-text]');
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) {
@@ -254,7 +291,7 @@ Notification = (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) {
return;
}
@@ -267,7 +304,6 @@ Notification = (function() {
contH = this.container.height();
contW = this.container.width();
position = this.getPosition();
console.log(position);
pMain = position[0];
pAlign = position[1];
pArrow = position[2] || pAlign;
@@ -295,13 +331,14 @@ Notification = (function() {
} else {
arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css);
arrowColor = this.userContainer.css("border-color") || this.userContainer.css("background-color") || 'white';
for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
pos = mainPositions[_i];
posFull = positions[pos];
if (pos === opp) {
continue;
}
color = posFull === mainFull ? 'black' : 'transparent';
color = posFull === mainFull ? arrowColor : 'transparent';
arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color;
}
incr(css, positions[opp], arrowSize);
@@ -364,18 +401,18 @@ Notification = (function() {
};
Notification.prototype.updateStyleClasses = function() {
var cls, style;
cls = ['base'];
if ($.isArray(this.options.cls)) {
cls = cls.concat(this.options.cls);
} else if (this.options.cls) {
cls.push(this.options.cls);
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();
cls = $.map(cls, function(n) {
return "" + className + "-" + style.name + "-" + n;
classes = $.map(classes, function(n) {
return "" + pluginClassName + "-" + style.name + "-" + n;
}).join(' ');
return this.userContainer.attr('class', cls);
return this.userContainer.attr('class', classes);
};
Notification.prototype.run = function(data, options) {
@@ -432,7 +469,7 @@ $[pluginName] = function(elem, data, options) {
$.fn[pluginName] = function(data, options) {
$(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(className);
inst = getAnchorElement($(this)).data(pluginClassName);
if (inst) {
return inst.run(data, options);
} else {
@@ -459,9 +496,9 @@ $(function() {
});
insertCSS(coreStyle.css).attr('data-notify-style', 'core');
$[pluginName].addStyle(defaultStyleName, defaultStyle);
return $(document).on('click', "." + className + "-wrapper", function() {
return $(document).on('click', "." + pluginClassName + "-wrapper", function() {
var inst;
inst = $(this).data(className);
inst = $(this).data(pluginClassName);
if (!inst) {
return;
}