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
+84 -53
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.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);
if (elem && elem.length) {
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.container = this.wrapper.find("." + className + "Container");
this.container.append(this.userContainer);
this.elem.before(this.wrapper);
this.container.css(this.calculateCSS());
this.run(node);
} 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);
}
});
};
dist/notify.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/notify.coffee
+102 -54
View File
@@ -3,7 +3,7 @@
#plugin constants
pluginName = 'notify'
className = '__notify'
className = '__'+pluginName
arrowDirs =
top: 'bottom'
@@ -20,12 +20,30 @@ styles =
</div>
"""
css: """
.#{className}Corner {
position: fixed;
top: 0;
right: 0;
margin: 5px;
z-index: 1050;
}
.#{className}Corner .#{className}Wrapper,
.#{className}Corner .#{className}Container {
position: relative;
display: block;
height: inherit;
width: inherit;
}
.#{className}Wrapper {
z-index: 1;
position: absolute;
display: inline-block;
height: 0;
width: 0;
opacity: 0.85;
}
.#{className}Container {
@@ -42,7 +60,11 @@ styles =
user:
default:
html: """
<div class="#{className}Default" data-notify-style="color: {{COLOR}}; border-color: {{COLOR}};">
<div class="#{className}Default"
data-notify-style="
color: {{color}};
border-color: {{color}};
">
<span data-notify="text"></span>
</div>
"""
@@ -65,18 +87,22 @@ styles =
bootstrap:
html: """
<span>test</span>
<div class="alert alert-error #{className}Bootstrap">
<strong>Warning!</strong> <span data-notify="text"></span>
</div>
"""
css: """
body {
test: 42
.#{className}Bootstrap {
white-space: nowrap;
}
"""
colors:
red: '#eed3d7'
#overridable options
pluginOptions =
autoHidePrompt: false
autoHideDelay: 10000
autoHide: false
autoHideDelay: 2000
arrowShow: true
arrowSize: 5
arrowPosition: 'top'
@@ -86,13 +112,13 @@ pluginOptions =
color: 'red'
# Color mappings
colors:
red: '#ee0101'
red: '#b94a48'
green: '#33be40'
black: '#393939'
blue: '#00f'
showAnimation: 'fadeIn'
showAnimation: 'slideDown'
showDuration: 200
hideAnimation: 'fadeOut'
hideAnimation: 'slideUp'
hideDuration: 600
# Gap between main and element
gap: 2
@@ -107,6 +133,9 @@ create = (tag) ->
Options = (options) -> $.extend @, options
Options:: = pluginOptions
# container for element-less notifications
cornerElem = create("div").addClass("#{className}Corner")
#gets first on n radios, and gets the fancy stylised input for hidden inputs
getAnchorElement = (element) ->
#choose the first of n radios
@@ -120,33 +149,38 @@ getAnchorElement = (element) ->
element
#define plugin
class Prompt
class Notification
#setup instance variables
constructor: (elem, node, options) ->
constructor: (elem, data, options) ->
options = {color: options} if $.type(options) is 'string'
@options = new Options if $.isPlainObject(options) then options else {}
#load user css into dom
@loadCSS()
#load user html into @userContainer
@loadHTML()
@wrapper = $(styles.core.html)
@wrapper.data pluginName, @
@container = @wrapper.find ".#{className}Container"
@container.append @userContainer
if elem and elem.length
@elementType = elem.attr('type')
@originalElement = elem
@elem = getAnchorElement(elem)
@elem.data pluginName, @
#load user css into dom
@loadCSS()
#load user html into @container
@loadHTML()
@wrapper = $(styles.core.html)
@container = @wrapper.find ".#{className}Container"
@container.append @userContainer
# add into dom
# add into dom above elem
@elem.before @wrapper
@container.css @calculateCSS()
else
# @options.autoHide = true
@options.arrowShow = false
cornerElem.prepend @wrapper
@run(node)
@container.hide()
@run(data)
loadCSS: (style) ->
name = @options.style
@@ -188,7 +222,7 @@ class Prompt
showArrow = @options.arrowShow and @elementType isnt 'radio'
if showArrow then @arrow.show() else @arrow.hide()
showMain: (show) ->
show: (show) ->
hidden = @container.parent().parents(':hidden').length > 0
@container.show() if hidden and show
@container.hide() if hidden and not show
@@ -207,7 +241,11 @@ class Prompt
}
getColor: ->
@options.colors[@options.color] or @options.color
styleColors = @getStyle().colors
return (styleColors and
styleColors[@options.color]) or
@options.colors[@options.color] or
@options.color
getStyle: (name) ->
name = @options.style unless name
@@ -216,7 +254,7 @@ class Prompt
style
#run plugin
run: (node, options) ->
run: (data, options) ->
#update options
if $.isPlainObject(options)
$.extend @options, options
@@ -224,52 +262,64 @@ class Prompt
else if $.type(options) is 'string'
@options.color = options
if @container and not node
@showMain false #hide
if @container and not data
@show false #hide
return
else if not @container and not node
else if not @container and not data
return
#update content
if $.type(node) is 'string'
@text.html node.replace('\n', '<br/>')
if $.type(data) is 'string'
@text.html data.replace('\n', '<br/>')
else
@text.empty().append(node)
@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
$(@).attr 'style', s.replace /\{\{\s*color\s*\}\}/ig, color
@arrow.remove() if @arrow
@buildArrow()
@container.prepend @arrow
@showMain true
@show true
#autohide
if @options.autoHidePrompt
clearTimeout @elem.data 'mainTimer'
t = setTimeout ->
@showMain false
if @options.autoHide
clearTimeout @autohideTimer
autohideTimer = setTimeout =>
@show false
, @options.autoHideDelay
@elem.data 'mainTimer', t
#when ready, bind permanent hide listener
$ ->
$("body").append cornerElem
#auto-detect bootstrap
$("link").each ->
src = $(@).attr 'href'
if src.match /bootstrap[^\/]*\.css/
$[pluginName].options {style:'bootstrap'}
return false
#add core styles
$("head").append(create("style").html(styles.core.css))
$(document).on 'click', ".#{className}", ->
inst = getAnchorElement($(@)).data pluginName
inst.showMain false if inst?
#watch all notifications clicks
$(document).on 'click', ".#{className}Wrapper", ->
inst = $(@).data pluginName
inst.show false if inst
# publicise jquery plugin
# return alert "$.#{pluginName} already defined" if $[pluginName]?
# $.pluginName( { ... } ) changes options for all instances
$[pluginName] = (elem, node, options) ->
$(elem)[pluginName](node, options)
$[pluginName] = (elem, data, options) ->
if elem instanceof HTMLElement or
elem.jquery
$(elem)[pluginName](data, options)
else
options = data
data = elem
new Notification null, data, options
# publicise options method
$[pluginName].options = (options) ->
@@ -281,13 +331,11 @@ $[pluginName].addStyle = (s) ->
# $( ... ).pluginName( { .. } ) creates a cached instance on each
# selected item with custom options for just that instance
# return alert "$.fn#{pluginName} already defined" if $.fn[pluginName]?
$.fn[pluginName] = (node, options) ->
$.fn[pluginName] = (data, options) ->
$(@).each ->
inst = getAnchorElement($(@)).data pluginName
if inst?
inst.run node, options
if inst
inst.run data, options
else
new Prompt $(@), node, options
#ps. alex is gay.
new Notification $(@), data, options