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
+114
-62
@@ -15,8 +15,8 @@ styles =
|
||||
core:
|
||||
html: """
|
||||
<div class="#{className}Wrapper">
|
||||
<div class="#{className}Container">
|
||||
</div>
|
||||
<div class="#{className}Arrow"></div>
|
||||
<div class="#{className}Container"></div>
|
||||
</div>
|
||||
"""
|
||||
css: """
|
||||
@@ -34,7 +34,6 @@ styles =
|
||||
display: block;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
||||
}
|
||||
|
||||
.#{className}Wrapper {
|
||||
@@ -56,6 +55,16 @@ styles =
|
||||
.#{className}Text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.#{className}Arrow {
|
||||
margin-top: #{2 + (if document.documentMode is 5 then (size*-4) else 0)};
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
margin-left: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
"""
|
||||
user:
|
||||
default:
|
||||
@@ -88,26 +97,33 @@ styles =
|
||||
bootstrap:
|
||||
html: """
|
||||
<div class="alert alert-error #{className}Bootstrap">
|
||||
<strong>Warning!</strong> <span data-notify="text"></span>
|
||||
<strong data-notify="text"></strong>
|
||||
</div>
|
||||
"""
|
||||
css: """
|
||||
.#{className}Bootstrap {
|
||||
white-space: nowrap;
|
||||
margin-bottom: 5px !important;
|
||||
padding-left: 25px !important;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px 7px;
|
||||
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=);
|
||||
}
|
||||
"""
|
||||
colors:
|
||||
red: '#eed3d7'
|
||||
|
||||
|
||||
bootstrapDetected = false
|
||||
#overridable options
|
||||
pluginOptions =
|
||||
autoHide: false
|
||||
autoHideDelay: 2000
|
||||
arrowShow: true
|
||||
arrowSize: 5
|
||||
arrowPosition: 'top'
|
||||
position: null
|
||||
# Default style
|
||||
style: 'default'
|
||||
style: null
|
||||
# Default color
|
||||
color: 'red'
|
||||
# Color mappings
|
||||
@@ -117,11 +133,12 @@ pluginOptions =
|
||||
black: '#393939'
|
||||
blue: '#00f'
|
||||
showAnimation: 'slideDown'
|
||||
showDuration: 200
|
||||
showDuration: 400
|
||||
hideAnimation: 'slideUp'
|
||||
hideDuration: 600
|
||||
hideDuration: 200
|
||||
# Gap between main and element
|
||||
gap: 2
|
||||
offsetY: 2
|
||||
offsetX: 0
|
||||
#TODO add z-index watches
|
||||
#parents: { '.ui-dialog': 5001 }
|
||||
|
||||
@@ -129,9 +146,10 @@ pluginOptions =
|
||||
create = (tag) ->
|
||||
$ document.createElement(tag)
|
||||
|
||||
# inherit plugin options
|
||||
Options = (options) -> $.extend @, options
|
||||
Options:: = pluginOptions
|
||||
inherit = (a, b) ->
|
||||
F = () ->
|
||||
F.prototype = a
|
||||
$.extend true, new F(), b
|
||||
|
||||
# container for element-less notifications
|
||||
cornerElem = create("div").addClass("#{className}Corner")
|
||||
@@ -148,13 +166,23 @@ getAnchorElement = (element) ->
|
||||
element = fBefore if fBefore.is('span.styled,span.OBS_checkbox')
|
||||
element
|
||||
|
||||
insertCSS = (style) ->
|
||||
return unless style and style.css
|
||||
elem = style.cssElem
|
||||
if elem
|
||||
elem.html style.css
|
||||
else
|
||||
elem = create("style").attr('type','text/css').html style.css
|
||||
$("head").append elem
|
||||
style.cssElem = elem
|
||||
|
||||
#define plugin
|
||||
class Notification
|
||||
|
||||
#setup instance variables
|
||||
constructor: (elem, data, options) ->
|
||||
options = {color: options} if $.type(options) is 'string'
|
||||
@options = new Options if $.isPlainObject(options) then options else {}
|
||||
options = {color: options} if typeof options is 'string'
|
||||
@options = inherit pluginOptions, if $.isPlainObject(options) then options else {}
|
||||
|
||||
#load user css into dom
|
||||
@loadCSS()
|
||||
@@ -163,6 +191,7 @@ class Notification
|
||||
|
||||
@wrapper = $(styles.core.html)
|
||||
@wrapper.data pluginName, @
|
||||
@arrow = @wrapper.find ".#{className}Arrow"
|
||||
@container = @wrapper.find ".#{className}Container"
|
||||
@container.append @userContainer
|
||||
|
||||
@@ -173,7 +202,6 @@ class Notification
|
||||
@elem.data pluginName, @
|
||||
# add into dom above elem
|
||||
@elem.before @wrapper
|
||||
@container.css @calculateCSS()
|
||||
else
|
||||
# @options.autoHide = true
|
||||
@options.arrowShow = false
|
||||
@@ -183,15 +211,11 @@ class Notification
|
||||
@run(data)
|
||||
|
||||
loadCSS: (style) ->
|
||||
name = @options.style
|
||||
style = @getStyle(name)
|
||||
elem = style.cssElem
|
||||
if elem
|
||||
elem.html style.css
|
||||
else
|
||||
elem = create("style").attr('id', "#{name}-styles").html style.css
|
||||
$("head").append elem
|
||||
style.cssElem = elem
|
||||
unless style
|
||||
name = @options.style
|
||||
style = @getStyle(name)
|
||||
#insert
|
||||
insertCSS style
|
||||
|
||||
loadHTML: (style) ->
|
||||
style = @getStyle(name)
|
||||
@@ -201,27 +225,6 @@ class Notification
|
||||
throw "style: #{name} HTML is missing the: data-notify='text' attribute"
|
||||
@text.addClass "#{className}Text"
|
||||
|
||||
buildArrow: ->
|
||||
dir = @options.arrowPosition
|
||||
size = @options.arrowSize
|
||||
alt = arrowDirs[dir]
|
||||
@arrow = create("div")
|
||||
@arrow.addClass(className + 'Arrow').css(
|
||||
'margin-top': 2 + (if document.documentMode is 5 then (size*-4) else 0)
|
||||
'position': 'relative'
|
||||
'z-index': '2'
|
||||
'margin-left': 10
|
||||
'width': 0
|
||||
'height': 0
|
||||
).css(
|
||||
'border-' + alt, size + 'px solid ' + @getColor()
|
||||
)
|
||||
for d of arrowDirs
|
||||
@arrow.css 'border-' + d, size + 'px solid transparent' if d isnt dir and d isnt alt
|
||||
|
||||
showArrow = @options.arrowShow and @elementType isnt 'radio'
|
||||
if showArrow then @arrow.show() else @arrow.hide()
|
||||
|
||||
show: (show) ->
|
||||
hidden = @container.parent().parents(':hidden').length > 0
|
||||
@container.show() if hidden and show
|
||||
@@ -229,16 +232,61 @@ class Notification
|
||||
@container[@options.showAnimation] @options.showDuration if not hidden and show
|
||||
@container[@options.hideAnimation] @options.hideDuration if not hidden and not show
|
||||
|
||||
calculateCSS: () ->
|
||||
updatePosition: ->
|
||||
return unless @elem
|
||||
#
|
||||
elementPosition = @elem.position()
|
||||
mainPosition = @container.parent().position()
|
||||
height = @elem.outerHeight()
|
||||
left = elementPosition.left - mainPosition.left
|
||||
mainPosition = @wrapper.position()
|
||||
|
||||
#
|
||||
position = @getPosition()
|
||||
arrowPosition = @updateArrow(position)
|
||||
|
||||
#start calculations
|
||||
left = 0
|
||||
height = 0
|
||||
switch position
|
||||
when 'bottom'
|
||||
height = @elem.outerHeight()
|
||||
when 'right'
|
||||
left = @elem.width()
|
||||
else
|
||||
throw "Unknown position: #{position}"
|
||||
|
||||
#elem vs wrapper corrections
|
||||
left += elementPosition.left - mainPosition.left
|
||||
height += (elementPosition.top - mainPosition.top) unless navigator.userAgent.match /MSIE/
|
||||
return {
|
||||
top: height + @options.gap
|
||||
left: left
|
||||
}
|
||||
|
||||
#set with user offset, with arrow offet
|
||||
@container.css
|
||||
top: height + @options.offsetY + arrowPosition.top
|
||||
left: left + @options.offsetX + arrowPosition.left
|
||||
|
||||
updateArrow: (position) ->
|
||||
|
||||
offsets = {top: 0, left: 0}
|
||||
|
||||
unless @options.arrowShow and @elementType isnt 'radio'
|
||||
@arrow.hide()
|
||||
return offsets
|
||||
|
||||
dir = arrowDirs[position]
|
||||
size = @options.arrowSize
|
||||
|
||||
@arrow.css 'border-' + position, size + 'px solid ' + @getColor()
|
||||
for d of arrowDirs
|
||||
if d isnt dir and d isnt position
|
||||
@arrow.css 'border-' + d, size + 'px solid transparent'
|
||||
|
||||
@arrow.show()
|
||||
offsets
|
||||
|
||||
|
||||
getPosition: ->
|
||||
return @options.position if @options.position
|
||||
if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
|
||||
return 'right'
|
||||
return 'bottom'
|
||||
|
||||
getColor: ->
|
||||
styleColors = @getStyle().colors
|
||||
@@ -249,10 +297,19 @@ class Notification
|
||||
|
||||
getStyle: (name) ->
|
||||
name = @options.style unless name
|
||||
name = 'bootstrap' if bootstrapDetected and not name
|
||||
name = 'default' unless name
|
||||
style = styles.user[name]
|
||||
throw "Missing style: #{name}" unless style
|
||||
style
|
||||
|
||||
updateStyle: ->
|
||||
#update colors
|
||||
@wrapper.find('[data-notify-style]').each (i,e) =>
|
||||
$(e).attr 'style', $(e).attr('data-notify-style').
|
||||
replace(/\{\{\s*color\s*\}\}/ig, @getColor()).
|
||||
replace(/\{\{\s*position\s*\}\}/ig, @getPosition())
|
||||
|
||||
#run plugin
|
||||
run: (data, options) ->
|
||||
#update options
|
||||
@@ -274,14 +331,8 @@ class Notification
|
||||
else
|
||||
@text.empty().append(data)
|
||||
|
||||
color = @getColor()
|
||||
@container.find('[data-notify-style]').each ->
|
||||
s = $(@).attr 'data-notify-style'
|
||||
$(@).attr 'style', s.replace /\{\{\s*color\s*\}\}/ig, color
|
||||
|
||||
@arrow.remove() if @arrow
|
||||
@buildArrow()
|
||||
@container.prepend @arrow
|
||||
@updatePosition()
|
||||
|
||||
@show true
|
||||
|
||||
@@ -300,10 +351,11 @@ $ ->
|
||||
$("link").each ->
|
||||
src = $(@).attr 'href'
|
||||
if src.match /bootstrap[^\/]*\.css/
|
||||
$[pluginName].options {style:'bootstrap'}
|
||||
bootstrapDetected = true
|
||||
return false
|
||||
#add core styles
|
||||
$("head").append(create("style").html(styles.core.css))
|
||||
insertCSS styles.core
|
||||
|
||||
#watch all notifications clicks
|
||||
$(document).on 'click', ".#{className}Wrapper", ->
|
||||
inst = $(@).data pluginName
|
||||
|
||||
Reference in New Issue
Block a user