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

updated docs and more

Browse Source
This commit is contained in:
Jaime Pillora
2013-06-06 14:03:15 +10:00
parent b83b209596
commit a7e896514d
11 changed files with 336 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.coffee
+1 -1
View File
@@ -34,7 +34,7 @@ module.exports = (grunt) ->
concat:
combined:
src: 'dist/**/*.js'
src: ['dist/<%= pkg.name %>.js', 'dist/styles/*.js']
dest: 'dist/<%= pkg.name %>-combined.js'
uglify:
README.md
+4
View File
@@ -1,4 +1,8 @@
### Notify.js - A simple, versatile notification library
For documentation, downloads and demos:
## http://notifyjs.com
dist/notify-combined.js
Vendored
+68 -598
View File
File diff suppressed because one or more lines are too long
dist/notify-combined.min.js
Vendored
+2 -3
View File
File diff suppressed because one or more lines are too long
dist/notify.js
Vendored
+70 -65
View File
@@ -1,11 +1,11 @@
/** Notify.js - v0.0.1 - 2013/06/05
/** Notify.js - v0.0.1 - 2013/06/06
* http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT
*/
(function(window,document,undefined) {
'use strict';
var Notification, addStyle, coreStyle, cornerElem, createElem, defaults, getAnchorElement, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns,
var Notification, addStyle, coreStyle, createElem, defaults, getAnchorElement, globalAnchors, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
pluginName = 'notify';
@@ -54,7 +54,7 @@ styles = {};
coreStyle = {
name: 'core',
html: "<div class=\"" + pluginClassName + "-wrapper\">\n <div class=\"" + pluginClassName + "-arrow\"></div>\n <div class=\"" + pluginClassName + "-container\"></div>\n</div>",
css: "." + pluginClassName + "-corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n." + pluginClassName + "-corner ." + pluginClassName + "-wrapper,\n." + pluginClassName + "-corner ." + pluginClassName + "-container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n}\n\n." + pluginClassName + "-wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n." + pluginClassName + "-container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + pluginClassName + "-text {\n position: relative;\n}\n\n." + pluginClassName + "-arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}"
css: "." + pluginClassName + "-corner {\n position: fixed;\n margin: 5px;\n z-index: 1050;\n}\n\n." + pluginClassName + "-corner ." + pluginClassName + "-wrapper,\n." + pluginClassName + "-corner ." + pluginClassName + "-container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n}\n\n." + pluginClassName + "-wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n." + pluginClassName + "-container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + pluginClassName + "-text {\n position: relative;\n}\n\n." + pluginClassName + "-arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}"
};
stylePrefixes = {
@@ -62,18 +62,15 @@ stylePrefixes = {
};
addStyle = function(name, def) {
var cssText;
if (styles[name]) {
var cssText, _ref;
if ((_ref = styles[name]) != null ? _ref.cssElem : void 0) {
if (window.console) {
console.warn("" + pluginName + ": overwriting style '" + name + "'");
}
$("#notify-" + name).remove();
styles[name].cssElem.remove();
}
def.name = name;
styles[name] = def;
if (def.cssElem) {
return;
}
cssText = "";
if (def.classes) {
$.each(def.classes, function(className, props) {
@@ -124,8 +121,7 @@ pluginOptions = {
showDuration: 400,
hideAnimation: 'slideUp',
hideDuration: 200,
offsetY: 0,
offsetX: 0
gap: 5
};
inherit = function(a, b) {
@@ -143,7 +139,7 @@ createElem = function(tag) {
return $("<" + tag + "></" + tag + ">");
};
cornerElem = createElem("div").addClass("" + pluginClassName + "-corner");
globalAnchors = {};
getAnchorElement = function(element) {
var radios;
@@ -170,7 +166,7 @@ incr = function(obj, pos, val) {
temp = pos;
if (obj[opp] !== undefined) {
pos = positions[opp.charAt(0)];
val *= -1;
val = -val;
}
if (obj[pos] === undefined) {
obj[pos] = val;
@@ -212,9 +208,6 @@ Notification = (function() {
this.elem = getAnchorElement(elem);
this.elem.data(pluginClassName, this);
this.elem.before(this.wrapper);
} else {
this.options.arrowShow = false;
cornerElem.prepend(this.wrapper);
}
this.container.hide();
this.run(data);
@@ -235,11 +228,17 @@ Notification = (function() {
return this.text.addClass("" + pluginClassName + "-text");
};
Notification.prototype.show = function(show, callback) {
var args, elems, fn, hidden;
if (callback == null) {
callback = $.noop;
}
Notification.prototype.show = function(show, userCallback) {
var args, callback, elems, fn, hidden,
_this = this;
callback = function() {
if (!show && !_this.elem) {
_this.destroy();
}
if (userCallback) {
return userCallback();
}
};
hidden = this.container.parent().parents(':hidden').length > 0;
elems = this.container.add(this.arrow);
args = [];
@@ -260,11 +259,33 @@ Notification = (function() {
return elems[fn].apply(elems, args);
};
Notification.prototype.updatePosition = function() {
var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, style, wrapPos, _i, _len;
if (!this.elem) {
return;
Notification.prototype.setGlobalPosition = function(position) {
var align, anchor, css, key, main, pAlign, pMain;
pMain = position[0], pAlign = position[1];
main = positions[pMain];
align = positions[pAlign];
key = position(pMain + "|" + pAlign);
anchor = globalAnchors[key];
if (!anchor) {
anchor = globalAnchors[key] = createElem("div");
css = {};
css[main] = 0;
if (align === 'middle') {
css.top = '45%';
} else if (align === 'center') {
css.left = '45%';
} else {
css[align] = 0;
}
anchor.css(css).addClass("" + pluginClassName + "-corner");
$("body").append(anchor);
}
return anchor.prepend(this.wrapper);
};
Notification.prototype.setElementPosition = function(position) {
var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, wrapPos, _i, _j, _len, _len1, _ref;
pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth();
@@ -273,37 +294,31 @@ Notification = (function() {
wrapPos = this.wrapper.position();
contH = this.container.height();
contW = this.container.width();
position = this.getPosition();
pMain = position[0];
pAlign = position[1];
pArrow = position[2] || pAlign;
mainFull = positions[pMain];
opp = opposites[pMain];
oppFull = positions[opp];
css = {};
css[oppFull] = pMain === 'b' ? elemH : pMain === 'r' ? elemW : 0;
incr(css, 'top', elemPos.top - wrapPos.top);
incr(css, 'left', elemPos.left - wrapPos.left);
margin = parseInt(this.elem.css("margin-left"), 10);
if (margin) {
incr(css, 'left', margin);
}
if (/^inline/.test(this.elem.css('display'))) {
padding = parseInt(this.elem.css("padding-top"), 10);
if (padding) {
incr(css, 'top', -padding);
_ref = ['top', 'left'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
pos = _ref[_i];
margin = parseInt(this.elem.css("margin-" + pos), 10);
if (margin) {
incr(css, pos, margin);
}
}
incr(css, 'top', this.options.offsetY);
incr(css, 'left', this.options.offsetX);
style = this.getStyle();
gap = Math.max(0, this.options.gap - (this.options.arrowShow ? arrowSize : 0));
incr(css, oppFull, gap);
if (!this.options.arrowShow) {
this.arrow.hide();
} else {
arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css);
arrowColor = this.userContainer.css("border-color") || this.userContainer.css("background-color") || 'white';
for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
pos = mainPositions[_i];
for (_j = 0, _len1 = mainPositions.length; _j < _len1; _j++) {
pos = mainPositions[_j];
posFull = positions[pos];
if (pos === opp) {
continue;
@@ -349,10 +364,10 @@ Notification = (function() {
if (pos.length === 1 || ((_ref1 = pos[0], __indexOf.call(vAligns, _ref1) >= 0) && (_ref2 = pos[1], __indexOf.call(hAligns, _ref2) < 0)) || ((_ref3 = pos[0], __indexOf.call(hAligns, _ref3) >= 0) && (_ref4 = pos[1], __indexOf.call(vAligns, _ref4) < 0))) {
pos[1] = (_ref5 = pos[0], __indexOf.call(hAligns, _ref5) >= 0) ? 'm' : 'l';
}
if (!this.options.autoReposition) {
return pos;
if (pos.length === 2) {
pos[2] = pos[1];
}
throw "Not implemented";
return pos;
};
Notification.prototype.getStyle = function(name) {
@@ -386,7 +401,8 @@ Notification = (function() {
};
Notification.prototype.run = function(data, options) {
var _this = this;
var position,
_this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
@@ -398,13 +414,14 @@ Notification = (function() {
} else if (!this.container && !data) {
return;
}
if ($.type(data) === 'string') {
this.text[this.rawHTML ? 'html' : 'text'](data);
} else {
this.text.empty().append(data);
}
this.text[this.rawHTML ? 'html' : 'text'](data);
this.updateClasses();
this.updatePosition();
position = this.getPosition();
if (this.elem) {
this.setElementPosition(position);
} else {
this.setGlobalPosition(position);
}
this.show(true);
if (this.options.autoHide) {
clearTimeout(this.autohideTimer);
@@ -415,10 +432,7 @@ Notification = (function() {
};
Notification.prototype.destroy = function() {
var _this = this;
return this.show(false, function() {
return _this.wrapper.remove();
});
return this.wrapper.remove();
};
return Notification;
@@ -455,15 +469,6 @@ $.extend($[pluginName], {
});
$(function() {
$("body").append(cornerElem);
$("link").each(function() {
var bootstrapDetected, src;
src = $(this).attr('href');
if (src.match(/bootstrap/)) {
bootstrapDetected = true;
return false;
}
});
insertCSS(coreStyle.css).attr('data-notify-style', 'core');
return $(document).on('click', "." + pluginClassName + "-wrapper", function() {
var inst;
dist/notify.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/styles/notify-bootstrap.js
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
$.notify.addStyle("bootstrap", {
html: "<div>\n<span data-notify-text></span>\n</div>",
html: "<div>\n<span data-notify-text></span>\n<span data-notify-src></span>\n</div>",
classes: {
base: {
"font-weight": "bold",
examples/inlines.html
+112
View File
@@ -0,0 +1,112 @@
<html>
<head>
<title></title>
<style type="text/css">
.z {
display: inline-block;
}
.a {
height: 50px;
width: 70px;
background: lightblue;
}
.b {
height: 100px;
width: 50px;
background: pink;
}
.c {
height: 20px;
width: 200px;
background: lightgreen;
}
hr {
margin: 25px 0 25px 0;
}
</style>
</head>
<body>
<hr/>
<div style="padding: 50px; margin: 50px; width: 592px;">
<div class="z a">a</div>
<div class="z b s">S</div>
<div class="z c">c</div>
<div class="z a">a</div>
<div class="z b">b</div>
<div class="z c t">T</div>
<div class="z a">a</div>
<div class="z b">b</div>
<div class="z c">c</div>
</div>
<hr/>
<div>
<div class="z b">b</div>
<span class="inline">some inline text</span>
</div>
<hr/>
<div>
<span>some inline text</span>
<span class="inline" style="padding: 20px; border: thin solid pink;">and special padding</span>
</div>
<hr/>
<div>
<span>some inline text</span>
<span class="inline" style="margin: 20px; border: thin solid pink;">and special margin</span>
</div>
<hr/>
<div>
<span>some inline text</span>
<span class="inline" style="margin: 20px; padding: 20px; border: thin solid pink;">and special padding margin</span>
</div>
<hr/>
<div>
<span>some inline block text</span>
<span class="inline" style="display: inline-block; margin: 20px; padding: 20px; border: thin solid pink;">and special padding margin</span>
</div>
<hr/>
<div>
<canvas width="100px" height="100px"></canvas>
<span>some canvas</span>
<span class="inline" style="display: inline-block; margin: 20px; padding: 20px; border: thin solid pink;">and special padding margin</span>
</div>
<hr/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="../dist/notify.js"></script>
<script src="../dist/styles/notify-bootstrap.js"></script>
<script type="text/javascript">
$.notify.defaults({autoHide: false})
$(function() {
$(".s").notify("s", {position: "right"})
$(".t").notify("t", {position: "top"})
$(".inline").notify("inline!", {position: "right"})
});
</script>
</body>
</html>
examples/position.html
+7 -5
View File
@@ -28,13 +28,15 @@
var positions = ["top", "right", "bottom", "left"];
var boxes = $(".boxes");
$.each(positions, function(i, p) {
var box = $("<div class=\"box\">"+p+"</div>");
boxes.append($("<div class=\"wrapper\"/>").append(box));
$.notify.defaults({ arrowShow: false })
$(function() {
$.each(positions, function(i, p) {
var box = $("<div class=\"box\">"+p+"</div>");
boxes.append($("<div class=\"wrapper\"/>").append(box));
setTimeout(function() {
box.notify(p, {position: p+" center"});
}, 500)
});
});
</script>
src/notify.coffee
+68 -72
View File
@@ -48,21 +48,16 @@ coreStyle =
<div class="#{pluginClassName}-container"></div>
</div>
"""
# <div class="#{pluginClassName}Debug"></div>
# .#{pluginClassName}Debug {
# <div class="#{pluginClassName}-debug"></div>
# .#{pluginClassName}-debug {
# position: absolute;
# border: 3px solid red;
# height: 0;
# width: 0;
# }
css: """
.#{pluginClassName}-corner {
position: fixed;
top: 0;
right: 0;
margin: 5px;
z-index: 1050;
}
@@ -106,16 +101,15 @@ stylePrefixes =
"border-radius": ["-webkit-", "-moz-"]
addStyle = (name, def) ->
if styles[name]
if styles[name]?.cssElem
if window.console
console.warn "#{pluginName}: overwriting style '#{name}'"
$("#notify-#{name}").remove()
styles[name].cssElem.remove()
def.name = name
styles[name] = def
return if def.cssElem
cssText = ""
if def.classes
$.each def.classes, (className, props) ->
@@ -161,18 +155,13 @@ pluginOptions =
arrowSize: 5
elementPosition: 'bottom'
globalPosition: 'top right'
# Default style
style: 'bootstrap'
className: 'error'
showAnimation: 'slideDown'
showDuration: 400
hideAnimation: 'slideUp'
hideDuration: 200
# Gap between main and element
offsetY: 0
offsetX: 0
#TODO add z-index watches
#parents: { '.ui-dialog': 5001 }
gap: 5
inherit = (a, b) ->
F = () ->
@@ -190,8 +179,9 @@ defaults = (opts) ->
createElem = (tag) ->
$ "<#{tag}></#{tag}>"
# container for element-less notifications
cornerElem = createElem("div").addClass("#{pluginClassName}-corner")
# references to global anchor positions
globalAnchors = {}
#gets first on n radios, and gets the fancy stylised input for hidden inputs
getAnchorElement = (element) ->
@@ -218,7 +208,7 @@ incr = (obj, pos, val) ->
#use the opposite if exists
if obj[opp] isnt `undefined`
pos = positions[opp.charAt(0)]
val *= -1
val = -val
if obj[pos] is `undefined`
obj[pos] = val
@@ -248,7 +238,7 @@ class Notification
options = {className: options} if typeof options is 'string'
@options = inherit pluginOptions, if $.isPlainObject(options) then options else {}
#load user html into @userContainer
#load style html into @userContainer
@loadHTML()
@wrapper = $(coreStyle.html)
@@ -264,10 +254,6 @@ class Notification
@elem.data pluginClassName, @
# add into dom above elem
@elem.before @wrapper
else
# @options.autoHide = true
@options.arrowShow = false
cornerElem.prepend @wrapper
@container.hide()
@run(data)
@@ -284,7 +270,11 @@ class Notification
@text.addClass "#{pluginClassName}-text"
show: (show, callback = $.noop) ->
show: (show, userCallback) ->
callback = =>
@destroy() if not show and not @elem
userCallback() if userCallback
hidden = @container.parent().parents(':hidden').length > 0
@@ -308,8 +298,34 @@ class Notification
elems[fn].apply elems, args
updatePosition: ->
return unless @elem
setGlobalPosition: (position) ->
[pMain, pAlign] = position
main = positions[pMain]
align = positions[pAlign]
key = position pMain+"|"+pAlign
anchor = globalAnchors[key]
unless anchor
anchor = globalAnchors[key] = createElem("div")
css = {}
css[main] = 0
if align is 'middle'
css.top = '45%'
else if align is 'center'
css.left = '45%'
else
css[align] = 0
anchor.css(css).addClass("#{pluginClassName}-corner")
$("body").append anchor
anchor.prepend @wrapper
setElementPosition: (position) ->
[pMain, pAlign, pArrow] = position
#grab some dimensions
elemPos = @elem.position()
@@ -321,12 +337,6 @@ class Notification
contH = @container.height()
contW = @container.width()
#get user defined position
position = @getPosition()
pMain = position[0]
pAlign = position[1]
pArrow = position[2] or pAlign
#start calculations
mainFull = positions[pMain]
@@ -343,21 +353,21 @@ class Notification
#correct for elem-wrapper offset
# unless navigator.userAgent.match /MSIE/
# incr css, 'top', (elemPos.top - wrapPos.top)
incr css, 'top', elemPos.top - wrapPos.top
incr css, 'left', elemPos.left - wrapPos.left
#correct for left margin
margin = parseInt @elem.css("margin-left"), 10
incr css, 'left', margin if margin
#correct for inline top padding
if /^inline/.test @elem.css('display')
padding = parseInt @elem.css("padding-top"), 10
incr css, 'top', -padding if padding
#user defined offset
incr css, 'top', @options.offsetY
incr css, 'left', @options.offsetX
#correct for margins
for pos in ['top', 'left']
margin = parseInt @elem.css("margin-#{pos}"), 10
incr css, pos, margin if margin
#correct for paddings (only for inline)
# if /^inline/.test @elem.css('display')
# padding = parseInt @elem.css("padding-#{pos}"), 10
# incr css, pos, -padding if padding
style = @getStyle()
#add gap
gap = Math.max 0, @options.gap - if @options.arrowShow then arrowSize else 0
incr css, oppFull, gap
#calculate arrow
if not @options.arrowShow
@@ -408,13 +418,10 @@ class Notification
(pos[0] in hAligns and pos[1] not in vAligns)
pos[1] = if pos[0] in hAligns then 'm' else 'l'
unless @options.autoReposition
return pos
if pos.length is 2
pos[2] = pos[1]
# if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
# return 'right'
# return 'bottom'
throw "Not implemented"
return pos
getStyle: (name) ->
name = @options.style unless name
@@ -435,7 +442,6 @@ class Notification
classes = $.map(classes, (n) -> "#{pluginClassName}-#{style.name}-#{n}").join ' '
@userContainer.attr 'class', classes
#run plugin
run: (data, options) ->
@@ -453,16 +459,17 @@ class Notification
return
#update content
if $.type(data) is 'string'
@text[if @rawHTML then 'html' else 'text'](data)
else
@text.empty().append(data)
@text[if @rawHTML then 'html' else 'text'](data)
#set styles
@updateClasses()
#position
@updatePosition()
#positioning
position = @getPosition()
if @elem
@setElementPosition position
else
@setGlobalPosition position
@show true
@@ -474,8 +481,7 @@ class Notification
, @options.autoHideDelay
destroy: ->
@show false, =>
@wrapper.remove()
@wrapper.remove()
# ================================
@@ -502,21 +508,11 @@ $.fn[pluginName] = (data, options) ->
new Notification $(@), data, options
@
#extra
#extra methods
$.extend $[pluginName], { defaults, addStyle }
#when ready
$ ->
#corner notification container
$("body").append cornerElem
#auto-detect bootstrap
$("link").each ->
src = $(@).attr 'href'
if src.match /bootstrap/
bootstrapDetected = true
return false
#insert default style
insertCSS(coreStyle.css).attr('data-notify-style', 'core')
src/styles/notify-bootstrap.coffee
+1
View File
@@ -3,6 +3,7 @@ $.notify.addStyle "bootstrap",
html: """
<div>
<span data-notify-text></span>
<span data-notify-src></span>
</div>
"""
classes: