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

styling + positioning

Browse Source
This commit is contained in:
Jaime Pillora
2013-04-05 11:53:48 +11:00
parent 937f6a8edd
commit 1d9c3f9ce9
3 changed files with 231 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+115 -79
View File
@@ -1,11 +1,11 @@
/** Notify.js - v0.0.1 - 2013/04/04
/** Notify.js - v0.0.1 - 2013/04/05
* http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT
*/
(function(window,document,undefined) {
'use strict';
var Notification, Options, arrowDirs, className, cornerElem, create, getAnchorElement, pluginName, pluginOptions, styles;
var Notification, arrowDirs, bootstrapDetected, className, cornerElem, create, getAnchorElement, inherit, insertCSS, pluginName, pluginOptions, styles;
pluginName = 'notify';
@@ -20,8 +20,8 @@ arrowDirs = {
styles = {
core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Container\">\n </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\n." + className + "Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n opacity: 0.85;\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}"
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 opacity: 0.85;\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 margin-top: " + (2 + (document.documentMode === 5 ? size * -4 : 0)) + ";\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\n"
},
user: {
"default": {
@@ -29,8 +29,8 @@ styles = {
css: "." + className + "Default {\n background: #fff;\n font-size: 11px;\n box-shadow: 0 0 6px #000;\n -moz-box-shadow: 0 0 6px #000;\n -webkit-box-shadow: 0 0 6px #000;\n padding: 4px 10px 4px 8px;\n border-radius: 6px;\n border-style: solid;\n border-width: 2px;\n -moz-border-radius: 6px;\n -webkit-border-radius: 6px;\n white-space: nowrap;\n}"
},
bootstrap: {
html: "<div class=\"alert alert-error " + className + "Bootstrap\">\n <strong>Warning!</strong> <span data-notify=\"text\"></span>\n</div>",
css: "." + className + "Bootstrap {\n white-space: nowrap;\n}",
html: "<div class=\"alert alert-error " + className + "Bootstrap\">\n <strong data-notify=\"text\"></strong>\n</div>",
css: "." + className + "Bootstrap {\n white-space: nowrap;\n margin-bottom: 5px !important;\n padding-left: 25px !important;\n background-repeat: no-repeat;\n background-position: 3px 7px;\n 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=);\n}",
colors: {
red: '#eed3d7'
}
@@ -38,13 +38,15 @@ styles = {
}
};
bootstrapDetected = false;
pluginOptions = {
autoHide: false,
autoHideDelay: 2000,
arrowShow: true,
arrowSize: 5,
arrowPosition: 'top',
style: 'default',
position: null,
style: null,
color: 'red',
colors: {
red: '#b94a48',
@@ -53,22 +55,24 @@ pluginOptions = {
blue: '#00f'
},
showAnimation: 'slideDown',
showDuration: 200,
showDuration: 400,
hideAnimation: 'slideUp',
hideDuration: 600,
gap: 2
hideDuration: 200,
offsetY: 2,
offsetX: 0
};
create = function(tag) {
return $(document.createElement(tag));
};
Options = function(options) {
return $.extend(this, options);
inherit = function(a, b) {
var F;
F = function() {};
F.prototype = a;
return $.extend(true, new F(), b);
};
Options.prototype = pluginOptions;
cornerElem = create("div").addClass("" + className + "Corner");
getAnchorElement = function(element) {
@@ -86,19 +90,35 @@ getAnchorElement = function(element) {
return element;
};
insertCSS = function(style) {
var elem;
if (!(style && style.css)) {
return;
}
elem = style.cssElem;
if (elem) {
return elem.html(style.css);
} else {
elem = create("style").attr('type', 'text/css').html(style.css);
$("head").append(elem);
return style.cssElem = elem;
}
};
Notification = (function() {
function Notification(elem, data, options) {
if ($.type(options) === 'string') {
if (typeof options === 'string') {
options = {
color: options
};
}
this.options = new Options($.isPlainObject(options) ? options : {});
this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {});
this.loadCSS();
this.loadHTML();
this.wrapper = $(styles.core.html);
this.wrapper.data(pluginName, this);
this.arrow = this.wrapper.find("." + className + "Arrow");
this.container = this.wrapper.find("." + className + "Container");
this.container.append(this.userContainer);
if (elem && elem.length) {
@@ -107,7 +127,6 @@ Notification = (function() {
this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this);
this.elem.before(this.wrapper);
this.container.css(this.calculateCSS());
} else {
this.options.arrowShow = false;
cornerElem.prepend(this.wrapper);
@@ -117,17 +136,12 @@ Notification = (function() {
}
Notification.prototype.loadCSS = function(style) {
var elem, name;
name = this.options.style;
style = this.getStyle(name);
elem = style.cssElem;
if (elem) {
return elem.html(style.css);
} else {
elem = create("style").attr('id', "" + name + "-styles").html(style.css);
$("head").append(elem);
return style.cssElem = elem;
var name;
if (!style) {
name = this.options.style;
style = this.getStyle(name);
}
return insertCSS(style);
};
Notification.prototype.loadHTML = function(style) {
@@ -140,33 +154,6 @@ Notification = (function() {
return this.text.addClass("" + className + "Text");
};
Notification.prototype.buildArrow = function() {
var alt, d, dir, showArrow, size;
dir = this.options.arrowPosition;
size = this.options.arrowSize;
alt = arrowDirs[dir];
this.arrow = create("div");
this.arrow.addClass(className + 'Arrow').css({
'margin-top': 2 + (document.documentMode === 5 ? size * -4 : 0),
'position': 'relative',
'z-index': '2',
'margin-left': 10,
'width': 0,
'height': 0
}).css('border-' + alt, size + 'px solid ' + this.getColor());
for (d in arrowDirs) {
if (d !== dir && d !== alt) {
this.arrow.css('border-' + d, size + 'px solid transparent');
}
}
showArrow = this.options.arrowShow && this.elementType !== 'radio';
if (showArrow) {
return this.arrow.show();
} else {
return this.arrow.hide();
}
};
Notification.prototype.show = function(show) {
var hidden;
hidden = this.container.parent().parents(':hidden').length > 0;
@@ -184,19 +171,67 @@ Notification = (function() {
}
};
Notification.prototype.calculateCSS = function() {
var elementPosition, height, left, mainPosition;
Notification.prototype.updatePosition = function() {
var arrowPosition, elementPosition, height, left, mainPosition, position;
if (!this.elem) {
return;
}
elementPosition = this.elem.position();
mainPosition = this.container.parent().position();
height = this.elem.outerHeight();
left = elementPosition.left - mainPosition.left;
mainPosition = this.wrapper.position();
position = this.getPosition();
arrowPosition = this.updateArrow(position);
left = 0;
height = 0;
switch (position) {
case 'bottom':
height = this.elem.outerHeight();
break;
case 'right':
left = this.elem.width();
break;
default:
throw "Unknown position: " + position;
}
left += elementPosition.left - mainPosition.left;
if (!navigator.userAgent.match(/MSIE/)) {
height += elementPosition.top - mainPosition.top;
}
return {
top: height + this.options.gap,
left: left
return this.container.css({
top: height + this.options.offsetY + arrowPosition.top,
left: left + this.options.offsetX + arrowPosition.left
});
};
Notification.prototype.updateArrow = function(position) {
var d, dir, offsets, size;
offsets = {
top: 0,
left: 0
};
if (!(this.options.arrowShow && this.elementType !== 'radio')) {
this.arrow.hide();
return offsets;
}
dir = arrowDirs[position];
size = this.options.arrowSize;
this.arrow.css('border-' + position, size + 'px solid ' + this.getColor());
for (d in arrowDirs) {
if (d !== dir && d !== position) {
this.arrow.css('border-' + d, size + 'px solid transparent');
}
}
this.arrow.show();
return offsets;
};
Notification.prototype.getPosition = function() {
if (this.options.position) {
return this.options.position;
}
if (this.elem.position().left + this.elem.width() + this.wrapper.width() < $(window).width()) {
return 'right';
}
return 'bottom';
};
Notification.prototype.getColor = function() {
@@ -210,6 +245,12 @@ Notification = (function() {
if (!name) {
name = this.options.style;
}
if (bootstrapDetected && !name) {
name = 'bootstrap';
}
if (!name) {
name = 'default';
}
style = styles.user[name];
if (!style) {
throw "Missing style: " + name;
@@ -217,8 +258,15 @@ Notification = (function() {
return style;
};
Notification.prototype.updateStyle = function() {
var _this = this;
return this.wrapper.find('[data-notify-style]').each(function(i, e) {
return $(e).attr('style', $(e).attr('data-notify-style').replace(/\{\{\s*color\s*\}\}/ig, _this.getColor()).replace(/\{\{\s*position\s*\}\}/ig, _this.getPosition()));
});
};
Notification.prototype.run = function(data, options) {
var autohideTimer, color,
var autohideTimer,
_this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
@@ -236,17 +284,7 @@ Notification = (function() {
} else {
this.text.empty().append(data);
}
color = this.getColor();
this.container.find('[data-notify-style]').each(function() {
var s;
s = $(this).attr('data-notify-style');
return $(this).attr('style', s.replace(/\{\{\s*color\s*\}\}/ig, color));
});
if (this.arrow) {
this.arrow.remove();
}
this.buildArrow();
this.container.prepend(this.arrow);
this.updatePosition();
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
@@ -266,13 +304,11 @@ $(function() {
var src;
src = $(this).attr('href');
if (src.match(/bootstrap[^\/]*\.css/)) {
$[pluginName].options({
style: 'bootstrap'
});
bootstrapDetected = true;
return false;
}
});
$("head").append(create("style").html(styles.core.css));
insertCSS(styles.core);
return $(document).on('click', "." + className + "Wrapper", function() {
var inst;
inst = $(this).data(pluginName);