styling + positioning
This commit is contained in:
Jaime Pillora
Vendored
+115
-79
@@ -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);
|
||||
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user