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

global notifications working

Browse Source
This commit is contained in:
Jaime Pillora
2013-04-04 16:58:22 +11:00
parent 9fb4096d67
commit 937f6a8edd
3 changed files with 187 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+85 -54
View File
@@ -5,11 +5,11 @@
(function(window,document,undefined) {
'use strict';
var Options, Prompt, arrowDirs, className, create, getAnchorElement, pluginName, pluginOptions, styles;
var Notification, Options, arrowDirs, className, cornerElem, create, getAnchorElement, pluginName, pluginOptions, styles;
pluginName = 'notify';
className = '__notify';
className = '__' + pluginName;
arrowDirs = {
top: 'bottom',
@@ -21,37 +21,40 @@ arrowDirs = {
styles = {
core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Container\">\n </div>\n</div>",
css: "." + 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}"
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}"
},
user: {
"default": {
html: "<div class=\"" + className + "Default\" data-notify-style=\"color: {{COLOR}}; border-color: {{COLOR}};\">\n <span data-notify=\"text\"></span>\n </div>",
html: "<div class=\"" + className + "Default\" \n data-notify-style=\"\n color: {{color}}; \n border-color: {{color}};\n \">\n <span data-notify=\"text\"></span>\n </div>",
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: "<span>test</span>",
css: "body {\n test: 42\n}"
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}",
colors: {
red: '#eed3d7'
}
}
}
};
pluginOptions = {
autoHidePrompt: false,
autoHideDelay: 10000,
autoHide: false,
autoHideDelay: 2000,
arrowShow: true,
arrowSize: 5,
arrowPosition: 'top',
style: 'default',
color: 'red',
colors: {
red: '#ee0101',
red: '#b94a48',
green: '#33be40',
black: '#393939',
blue: '#00f'
},
showAnimation: 'fadeIn',
showAnimation: 'slideDown',
showDuration: 200,
hideAnimation: 'fadeOut',
hideAnimation: 'slideUp',
hideDuration: 600,
gap: 2
};
@@ -66,6 +69,8 @@ Options = function(options) {
Options.prototype = pluginOptions;
cornerElem = create("div").addClass("" + className + "Corner");
getAnchorElement = function(element) {
var fBefore, radios;
if (element.is('[type=radio]')) {
@@ -81,30 +86,37 @@ getAnchorElement = function(element) {
return element;
};
Prompt = (function() {
Notification = (function() {
function Prompt(elem, node, options) {
function Notification(elem, data, options) {
if ($.type(options) === 'string') {
options = {
color: options
};
}
this.options = new Options($.isPlainObject(options) ? options : {});
this.elementType = elem.attr('type');
this.originalElement = elem;
this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this);
this.loadCSS();
this.loadHTML();
this.wrapper = $(styles.core.html);
this.wrapper.data(pluginName, this);
this.container = this.wrapper.find("." + className + "Container");
this.container.append(this.userContainer);
this.elem.before(this.wrapper);
this.container.css(this.calculateCSS());
this.run(node);
if (elem && elem.length) {
this.elementType = elem.attr('type');
this.originalElement = elem;
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);
}
this.container.hide();
this.run(data);
}
Prompt.prototype.loadCSS = function(style) {
Notification.prototype.loadCSS = function(style) {
var elem, name;
name = this.options.style;
style = this.getStyle(name);
@@ -118,7 +130,7 @@ Prompt = (function() {
}
};
Prompt.prototype.loadHTML = function(style) {
Notification.prototype.loadHTML = function(style) {
style = this.getStyle(name);
this.userContainer = $(style.html);
this.text = this.userContainer.find('[data-notify=text]');
@@ -128,7 +140,7 @@ Prompt = (function() {
return this.text.addClass("" + className + "Text");
};
Prompt.prototype.buildArrow = function() {
Notification.prototype.buildArrow = function() {
var alt, d, dir, showArrow, size;
dir = this.options.arrowPosition;
size = this.options.arrowSize;
@@ -155,7 +167,7 @@ Prompt = (function() {
}
};
Prompt.prototype.showMain = function(show) {
Notification.prototype.show = function(show) {
var hidden;
hidden = this.container.parent().parents(':hidden').length > 0;
if (hidden && show) {
@@ -172,7 +184,7 @@ Prompt = (function() {
}
};
Prompt.prototype.calculateCSS = function() {
Notification.prototype.calculateCSS = function() {
var elementPosition, height, left, mainPosition;
elementPosition = this.elem.position();
mainPosition = this.container.parent().position();
@@ -187,11 +199,13 @@ Prompt = (function() {
};
};
Prompt.prototype.getColor = function() {
return this.options.colors[this.options.color] || this.options.color;
Notification.prototype.getColor = function() {
var styleColors;
styleColors = this.getStyle().colors;
return (styleColors && styleColors[this.options.color]) || this.options.colors[this.options.color] || this.options.color;
};
Prompt.prototype.getStyle = function(name) {
Notification.prototype.getStyle = function(name) {
var style;
if (!name) {
name = this.options.style;
@@ -203,62 +217,79 @@ Prompt = (function() {
return style;
};
Prompt.prototype.run = function(node, options) {
var color, t;
Notification.prototype.run = function(data, options) {
var autohideTimer, color,
_this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
this.options.color = options;
}
if (this.container && !node) {
this.showMain(false);
if (this.container && !data) {
this.show(false);
return;
} else if (!this.container && !node) {
} else if (!this.container && !data) {
return;
}
if ($.type(node) === 'string') {
this.text.html(node.replace('\n', '<br/>'));
if ($.type(data) === 'string') {
this.text.html(data.replace('\n', '<br/>'));
} else {
this.text.empty().append(node);
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));
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.showMain(true);
if (this.options.autoHidePrompt) {
clearTimeout(this.elem.data('mainTimer'));
t = setTimeout(function() {
return this.showMain(false);
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
return autohideTimer = setTimeout(function() {
return _this.show(false);
}, this.options.autoHideDelay);
return this.elem.data('mainTimer', t);
}
};
return Prompt;
return Notification;
})();
$(function() {
$("body").append(cornerElem);
$("link").each(function() {
var src;
src = $(this).attr('href');
if (src.match(/bootstrap[^\/]*\.css/)) {
$[pluginName].options({
style: 'bootstrap'
});
return false;
}
});
$("head").append(create("style").html(styles.core.css));
return $(document).on('click', "." + className, function() {
return $(document).on('click', "." + className + "Wrapper", function() {
var inst;
inst = getAnchorElement($(this)).data(pluginName);
if (inst != null) {
return inst.showMain(false);
inst = $(this).data(pluginName);
if (inst) {
return inst.show(false);
}
});
});
$[pluginName] = function(elem, node, options) {
return $(elem)[pluginName](node, options);
$[pluginName] = function(elem, data, options) {
if (elem instanceof HTMLElement || elem.jquery) {
return $(elem)[pluginName](data, options);
} else {
options = data;
data = elem;
return new Notification(null, data, options);
}
};
$[pluginName].options = function(options) {
@@ -269,14 +300,14 @@ $[pluginName].addStyle = function(s) {
return $.extend(true, styles.user, s);
};
$.fn[pluginName] = function(node, options) {
$.fn[pluginName] = function(data, options) {
return $(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(pluginName);
if (inst != null) {
return inst.run(node, options);
if (inst) {
return inst.run(data, options);
} else {
return new Prompt($(this), node, options);
return new Notification($(this), data, options);
}
});
};