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) { (function(window,document,undefined) {
'use strict'; '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'; pluginName = 'notify';
className = '__notify'; className = '__' + pluginName;
arrowDirs = { arrowDirs = {
top: 'bottom', top: 'bottom',
@@ -21,37 +21,40 @@ arrowDirs = {
styles = { styles = {
core: { core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Container\">\n </div>\n</div>", 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: { user: {
"default": { "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}" 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: { bootstrap: {
html: "<span>test</span>", html: "<div class=\"alert alert-error " + className + "Bootstrap\">\n <strong>Warning!</strong> <span data-notify=\"text\"></span>\n</div>",
css: "body {\n test: 42\n}" css: "." + className + "Bootstrap {\n white-space: nowrap;\n}",
colors: {
red: '#eed3d7'
}
} }
} }
}; };
pluginOptions = { pluginOptions = {
autoHidePrompt: false, autoHide: false,
autoHideDelay: 10000, autoHideDelay: 2000,
arrowShow: true, arrowShow: true,
arrowSize: 5, arrowSize: 5,
arrowPosition: 'top', arrowPosition: 'top',
style: 'default', style: 'default',
color: 'red', color: 'red',
colors: { colors: {
red: '#ee0101', red: '#b94a48',
green: '#33be40', green: '#33be40',
black: '#393939', black: '#393939',
blue: '#00f' blue: '#00f'
}, },
showAnimation: 'fadeIn', showAnimation: 'slideDown',
showDuration: 200, showDuration: 200,
hideAnimation: 'fadeOut', hideAnimation: 'slideUp',
hideDuration: 600, hideDuration: 600,
gap: 2 gap: 2
}; };
@@ -66,6 +69,8 @@ Options = function(options) {
Options.prototype = pluginOptions; Options.prototype = pluginOptions;
cornerElem = create("div").addClass("" + className + "Corner");
getAnchorElement = function(element) { getAnchorElement = function(element) {
var fBefore, radios; var fBefore, radios;
if (element.is('[type=radio]')) { if (element.is('[type=radio]')) {
@@ -81,30 +86,37 @@ getAnchorElement = function(element) {
return element; return element;
}; };
Prompt = (function() { Notification = (function() {
function Prompt(elem, node, options) { function Notification(elem, data, options) {
if ($.type(options) === 'string') { if ($.type(options) === 'string') {
options = { options = {
color: options color: options
}; };
} }
this.options = new Options($.isPlainObject(options) ? 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.elementType = elem.attr('type');
this.originalElement = elem; this.originalElement = elem;
this.elem = getAnchorElement(elem); this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this); 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.elem.before(this.wrapper);
this.container.css(this.calculateCSS()); 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; var elem, name;
name = this.options.style; name = this.options.style;
style = this.getStyle(name); style = this.getStyle(name);
@@ -118,7 +130,7 @@ Prompt = (function() {
} }
}; };
Prompt.prototype.loadHTML = function(style) { Notification.prototype.loadHTML = function(style) {
style = this.getStyle(name); style = this.getStyle(name);
this.userContainer = $(style.html); this.userContainer = $(style.html);
this.text = this.userContainer.find('[data-notify=text]'); this.text = this.userContainer.find('[data-notify=text]');
@@ -128,7 +140,7 @@ Prompt = (function() {
return this.text.addClass("" + className + "Text"); return this.text.addClass("" + className + "Text");
}; };
Prompt.prototype.buildArrow = function() { Notification.prototype.buildArrow = function() {
var alt, d, dir, showArrow, size; var alt, d, dir, showArrow, size;
dir = this.options.arrowPosition; dir = this.options.arrowPosition;
size = this.options.arrowSize; size = this.options.arrowSize;
@@ -155,7 +167,7 @@ Prompt = (function() {
} }
}; };
Prompt.prototype.showMain = function(show) { Notification.prototype.show = function(show) {
var hidden; var hidden;
hidden = this.container.parent().parents(':hidden').length > 0; hidden = this.container.parent().parents(':hidden').length > 0;
if (hidden && show) { if (hidden && show) {
@@ -172,7 +184,7 @@ Prompt = (function() {
} }
}; };
Prompt.prototype.calculateCSS = function() { Notification.prototype.calculateCSS = function() {
var elementPosition, height, left, mainPosition; var elementPosition, height, left, mainPosition;
elementPosition = this.elem.position(); elementPosition = this.elem.position();
mainPosition = this.container.parent().position(); mainPosition = this.container.parent().position();
@@ -187,11 +199,13 @@ Prompt = (function() {
}; };
}; };
Prompt.prototype.getColor = function() { Notification.prototype.getColor = function() {
return this.options.colors[this.options.color] || this.options.color; 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; var style;
if (!name) { if (!name) {
name = this.options.style; name = this.options.style;
@@ -203,62 +217,79 @@ Prompt = (function() {
return style; return style;
}; };
Prompt.prototype.run = function(node, options) { Notification.prototype.run = function(data, options) {
var color, t; var autohideTimer, color,
_this = this;
if ($.isPlainObject(options)) { if ($.isPlainObject(options)) {
$.extend(this.options, options); $.extend(this.options, options);
} else if ($.type(options) === 'string') { } else if ($.type(options) === 'string') {
this.options.color = options; this.options.color = options;
} }
if (this.container && !node) { if (this.container && !data) {
this.showMain(false); this.show(false);
return; return;
} else if (!this.container && !node) { } else if (!this.container && !data) {
return; return;
} }
if ($.type(node) === 'string') { if ($.type(data) === 'string') {
this.text.html(node.replace('\n', '<br/>')); this.text.html(data.replace('\n', '<br/>'));
} else { } else {
this.text.empty().append(node); this.text.empty().append(data);
} }
color = this.getColor(); color = this.getColor();
this.container.find('[data-notify-style]').each(function() { this.container.find('[data-notify-style]').each(function() {
var s; var s;
s = $(this).attr('data-notify-style'); 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) { if (this.arrow) {
this.arrow.remove(); this.arrow.remove();
} }
this.buildArrow(); this.buildArrow();
this.container.prepend(this.arrow); this.container.prepend(this.arrow);
this.showMain(true); this.show(true);
if (this.options.autoHidePrompt) { if (this.options.autoHide) {
clearTimeout(this.elem.data('mainTimer')); clearTimeout(this.autohideTimer);
t = setTimeout(function() { return autohideTimer = setTimeout(function() {
return this.showMain(false); return _this.show(false);
}, this.options.autoHideDelay); }, this.options.autoHideDelay);
return this.elem.data('mainTimer', t);
} }
}; };
return Prompt; return Notification;
})(); })();
$(function() { $(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)); $("head").append(create("style").html(styles.core.css));
return $(document).on('click', "." + className, function() { return $(document).on('click', "." + className + "Wrapper", function() {
var inst; var inst;
inst = getAnchorElement($(this)).data(pluginName); inst = $(this).data(pluginName);
if (inst != null) { if (inst) {
return inst.showMain(false); return inst.show(false);
} }
}); });
}); });
$[pluginName] = function(elem, node, options) { $[pluginName] = function(elem, data, options) {
return $(elem)[pluginName](node, 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) { $[pluginName].options = function(options) {
@@ -269,14 +300,14 @@ $[pluginName].addStyle = function(s) {
return $.extend(true, styles.user, s); return $.extend(true, styles.user, s);
}; };
$.fn[pluginName] = function(node, options) { $.fn[pluginName] = function(data, options) {
return $(this).each(function() { return $(this).each(function() {
var inst; var inst;
inst = getAnchorElement($(this)).data(pluginName); inst = getAnchorElement($(this)).data(pluginName);
if (inst != null) { if (inst) {
return inst.run(node, options); return inst.run(data, options);
} else { } 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 #plugin constants
pluginName = 'notify' pluginName = 'notify'
className = '__notify' className = '__'+pluginName
arrowDirs = arrowDirs =
top: 'bottom' top: 'bottom'
@@ -20,12 +20,30 @@ styles =
</div> </div>
""" """
css: """ 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 { .#{className}Wrapper {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 0; height: 0;
width: 0; width: 0;
opacity: 0.85;
} }
.#{className}Container { .#{className}Container {
@@ -42,7 +60,11 @@ styles =
user: user:
default: default:
html: """ 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> <span data-notify="text"></span>
</div> </div>
""" """
@@ -65,18 +87,22 @@ styles =
bootstrap: bootstrap:
html: """ html: """
<span>test</span> <div class="alert alert-error #{className}Bootstrap">
<strong>Warning!</strong> <span data-notify="text"></span>
</div>
""" """
css: """ css: """
body { .#{className}Bootstrap {
test: 42 white-space: nowrap;
} }
""" """
colors:
red: '#eed3d7'
#overridable options #overridable options
pluginOptions = pluginOptions =
autoHidePrompt: false autoHide: false
autoHideDelay: 10000 autoHideDelay: 2000
arrowShow: true arrowShow: true
arrowSize: 5 arrowSize: 5
arrowPosition: 'top' arrowPosition: 'top'
@@ -86,13 +112,13 @@ pluginOptions =
color: 'red' color: 'red'
# Color mappings # Color mappings
colors: colors:
red: '#ee0101' red: '#b94a48'
green: '#33be40' green: '#33be40'
black: '#393939' black: '#393939'
blue: '#00f' blue: '#00f'
showAnimation: 'fadeIn' showAnimation: 'slideDown'
showDuration: 200 showDuration: 200
hideAnimation: 'fadeOut' hideAnimation: 'slideUp'
hideDuration: 600 hideDuration: 600
# Gap between main and element # Gap between main and element
gap: 2 gap: 2
@@ -107,6 +133,9 @@ create = (tag) ->
Options = (options) -> $.extend @, options Options = (options) -> $.extend @, options
Options:: = pluginOptions 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 #gets first on n radios, and gets the fancy stylised input for hidden inputs
getAnchorElement = (element) -> getAnchorElement = (element) ->
#choose the first of n radios #choose the first of n radios
@@ -120,33 +149,38 @@ getAnchorElement = (element) ->
element element
#define plugin #define plugin
class Prompt class Notification
#setup instance variables #setup instance variables
constructor: (elem, node, options) -> constructor: (elem, data, options) ->
options = {color: options} if $.type(options) is 'string' options = {color: options} if $.type(options) is 'string'
@options = new Options if $.isPlainObject(options) then options else {} @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') @elementType = elem.attr('type')
@originalElement = elem @originalElement = elem
@elem = getAnchorElement(elem) @elem = getAnchorElement(elem)
@elem.data pluginName, @ @elem.data pluginName, @
# add into dom above elem
#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
@elem.before @wrapper @elem.before @wrapper
@container.css @calculateCSS() @container.css @calculateCSS()
else
# @options.autoHide = true
@options.arrowShow = false
cornerElem.prepend @wrapper
@run(node) @container.hide()
@run(data)
loadCSS: (style) -> loadCSS: (style) ->
name = @options.style name = @options.style
@@ -188,7 +222,7 @@ class Prompt
showArrow = @options.arrowShow and @elementType isnt 'radio' showArrow = @options.arrowShow and @elementType isnt 'radio'
if showArrow then @arrow.show() else @arrow.hide() if showArrow then @arrow.show() else @arrow.hide()
showMain: (show) -> show: (show) ->
hidden = @container.parent().parents(':hidden').length > 0 hidden = @container.parent().parents(':hidden').length > 0
@container.show() if hidden and show @container.show() if hidden and show
@container.hide() if hidden and not show @container.hide() if hidden and not show
@@ -207,7 +241,11 @@ class Prompt
} }
getColor: -> 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) -> getStyle: (name) ->
name = @options.style unless name name = @options.style unless name
@@ -216,7 +254,7 @@ class Prompt
style style
#run plugin #run plugin
run: (node, options) -> run: (data, options) ->
#update options #update options
if $.isPlainObject(options) if $.isPlainObject(options)
$.extend @options, options $.extend @options, options
@@ -224,52 +262,64 @@ class Prompt
else if $.type(options) is 'string' else if $.type(options) is 'string'
@options.color = options @options.color = options
if @container and not node if @container and not data
@showMain false #hide @show false #hide
return return
else if not @container and not node else if not @container and not data
return return
#update content #update content
if $.type(node) is 'string' if $.type(data) is 'string'
@text.html node.replace('\n', '<br/>') @text.html data.replace('\n', '<br/>')
else else
@text.empty().append(node) @text.empty().append(data)
color = @getColor() color = @getColor()
@container.find('[data-notify-style]').each -> @container.find('[data-notify-style]').each ->
s = $(@).attr 'data-notify-style' 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 @arrow.remove() if @arrow
@buildArrow() @buildArrow()
@container.prepend @arrow @container.prepend @arrow
@showMain true @show true
#autohide #autohide
if @options.autoHidePrompt if @options.autoHide
clearTimeout @elem.data 'mainTimer' clearTimeout @autohideTimer
t = setTimeout -> autohideTimer = setTimeout =>
@showMain false @show false
, @options.autoHideDelay , @options.autoHideDelay
@elem.data 'mainTimer', t
#when ready, bind permanent hide listener #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 #add core styles
$("head").append(create("style").html(styles.core.css)) $("head").append(create("style").html(styles.core.css))
#watch all notifications clicks
$(document).on 'click', ".#{className}", -> $(document).on 'click', ".#{className}Wrapper", ->
inst = getAnchorElement($(@)).data pluginName inst = $(@).data pluginName
inst.showMain false if inst? inst.show false if inst
# publicise jquery plugin # publicise jquery plugin
# return alert "$.#{pluginName} already defined" if $[pluginName]? # return alert "$.#{pluginName} already defined" if $[pluginName]?
# $.pluginName( { ... } ) changes options for all instances # $.pluginName( { ... } ) changes options for all instances
$[pluginName] = (elem, node, options) -> $[pluginName] = (elem, data, options) ->
$(elem)[pluginName](node, 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 # publicise options method
$[pluginName].options = (options) -> $[pluginName].options = (options) ->
@@ -281,13 +331,11 @@ $[pluginName].addStyle = (s) ->
# $( ... ).pluginName( { .. } ) creates a cached instance on each # $( ... ).pluginName( { .. } ) creates a cached instance on each
# selected item with custom options for just that instance # selected item with custom options for just that instance
# return alert "$.fn#{pluginName} already defined" if $.fn[pluginName]? # return alert "$.fn#{pluginName} already defined" if $.fn[pluginName]?
$.fn[pluginName] = (node, options) -> $.fn[pluginName] = (data, options) ->
$(@).each -> $(@).each ->
inst = getAnchorElement($(@)).data pluginName inst = getAnchorElement($(@)).data pluginName
if inst? if inst
inst.run node, options inst.run data, options
else else
new Prompt $(@), node, options new Notification $(@), data, options
#ps. alex is gay.