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

updated

Browse Source
This commit is contained in:
Jaime Pillora
2013-06-03 09:15:58 +10:00
parent 930f9903c5
commit fabc93802f
4 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+30 -19
View File
@@ -1,11 +1,11 @@
/** Notify.js - v0.0.1 - 2013/05/31 /** Notify.js - v0.0.1 - 2013/06/03
* http://notifyjs.com/ * http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT * Copyright (c) 2013 Jaime Pillora - MIT
*/ */
(function(window,document,undefined) { (function(window,document,undefined) {
'use strict'; 'use strict';
var Notification, className, cornerElem, createElem, getAnchorElement, hPositions, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginName, pluginOptions, positions, realign, styles, vPositions, var Notification, className, cornerElem, createElem, getAnchorElement, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginName, pluginOptions, positions, realign, 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; }; __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'; pluginName = 'notify';
@@ -21,9 +21,9 @@ positions = {
r: 'right' r: 'right'
}; };
hPositions = ['l', 'c', 'r']; hAligns = ['l', 'c', 'r'];
vPositions = ['t', 'm', 'b']; vAligns = ['t', 'm', 'b'];
mainPositions = ['t', 'b', 'l', 'r']; mainPositions = ['t', 'b', 'l', 'r'];
@@ -51,8 +51,8 @@ parsePosition = function(str) {
styles = { styles = {
core: { core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Debug\"></div>\n <div class=\"" + className + "Arrow\"></div>\n <div class=\"" + className + "Container\"></div>\n</div>", 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}\n\n." + className + "Debug {\n position: absolute;\n border: 3px solid red;\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}\n\n." + className + "Arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}\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." + 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}\n\n." + className + "Arrow {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}\n"
}, },
user: { user: {
"default": { "default": {
@@ -76,7 +76,7 @@ pluginOptions = {
arrowSize: 5, arrowSize: 5,
position: 'bottom', position: 'bottom',
style: 'default', style: 'default',
color: 'red', color: 'black',
colors: { colors: {
red: '#b94a48', red: '#b94a48',
green: '#33be40', green: '#33be40',
@@ -245,18 +245,19 @@ Notification = (function() {
}; };
Notification.prototype.updatePosition = function() { Notification.prototype.updatePosition = function() {
var arrowCss, color, contH, contW, css, elemH, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, size, wrapPos, _i, _len; var arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, padding, pos, posFull, position, wrapPos, _i, _len;
if (!this.elem) { if (!this.elem) {
return; return;
} }
elemPos = this.elem.position(); elemPos = this.elem.position();
elemH = this.elem.outerHeight(); elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth(); elemW = this.elem.outerWidth();
elemIH = this.elem.innerHeight();
elemIW = this.elem.innerWidth();
wrapPos = this.wrapper.position(); wrapPos = this.wrapper.position();
contH = this.container.height(); contH = this.container.height();
contW = this.container.width(); contW = this.container.width();
position = this.getPosition(); position = this.getPosition();
console.log(position);
pMain = position[0]; pMain = position[0];
pAlign = position[1]; pAlign = position[1];
pArrow = position[2] || pAlign; pArrow = position[2] || pAlign;
@@ -281,7 +282,7 @@ Notification = (function() {
if (!this.options.arrowShow) { if (!this.options.arrowShow) {
this.arrow.hide(); this.arrow.hide();
} else { } else {
size = this.options.arrowSize; arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css); arrowCss = $.extend({}, css);
for (_i = 0, _len = mainPositions.length; _i < _len; _i++) { for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
pos = mainPositions[_i]; pos = mainPositions[_i];
@@ -290,21 +291,31 @@ Notification = (function() {
continue; continue;
} }
color = posFull === mainFull ? this.getColor() : 'transparent'; color = posFull === mainFull ? this.getColor() : 'transparent';
arrowCss["border-" + posFull] = "" + size + "px solid " + color; arrowCss["border-" + posFull] = "" + arrowSize + "px solid " + color;
}
incr(css, positions[opp], arrowSize);
if (__indexOf.call(mainPositions, pAlign) >= 0) {
incr(arrowCss, positions[pAlign], arrowSize * 2);
} }
incr(css, positions[opp], size);
this.arrow.css(arrowCss).show();
} }
if (__indexOf.call(vPositions, pMain) >= 0) { if (__indexOf.call(vAligns, pMain) >= 0) {
incr(css, 'left', realign(pAlign, contW, elemW)); incr(css, 'left', realign(pAlign, contW, elemW));
} if (arrowCss) {
if (__indexOf.call(hPositions, pMain) >= 0) { incr(arrowCss, 'left', realign(pAlign, arrowSize, elemIW));
}
} else if (__indexOf.call(hAligns, pMain) >= 0) {
incr(css, 'top', realign(pAlign, contH, elemH)); incr(css, 'top', realign(pAlign, contH, elemH));
if (arrowCss) {
incr(arrowCss, 'top', realign(pAlign, arrowSize, elemIH));
}
} }
if (this.container.is(":visible")) { if (this.container.is(":visible")) {
css.display = 'block'; css.display = 'block';
} }
return this.container.removeAttr('style').css(css); this.container.removeAttr('style').css(css);
if (arrowCss) {
return this.arrow.removeAttr('style').css(arrowCss);
}
}; };
Notification.prototype.getPosition = function() { Notification.prototype.getPosition = function() {
@@ -317,8 +328,8 @@ Notification = (function() {
if (_ref = pos[0], __indexOf.call(mainPositions, _ref) < 0) { if (_ref = pos[0], __indexOf.call(mainPositions, _ref) < 0) {
throw "Must be one of [" + mainPositions + "]"; throw "Must be one of [" + mainPositions + "]";
} }
if (pos.length === 1 || ((_ref1 = pos[0], __indexOf.call(vPositions, _ref1) >= 0) && (_ref2 = pos[1], __indexOf.call(hPositions, _ref2) < 0)) || ((_ref3 = pos[0], __indexOf.call(hPositions, _ref3) >= 0) && (_ref4 = pos[1], __indexOf.call(vPositions, _ref4) < 0))) { 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(hPositions, _ref5) >= 0) ? 'm' : 'l'; pos[1] = (_ref5 = pos[0], __indexOf.call(hAligns, _ref5) >= 0) ? 'm' : 'l';
} }
if (!this.options.autoReposition) { if (!this.options.autoReposition) {
return pos; return pos;
dist/notify.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/position.html
+1 -1
View File
@@ -33,7 +33,7 @@
boxes.append($("<div class=\"wrapper\"/>").append(box)); boxes.append($("<div class=\"wrapper\"/>").append(box));
setTimeout(function() { setTimeout(function() {
box.notify(p, {position: p+" middle"}); box.notify(p, {position: p+" center"});
}, 500) }, 500)
}); });
</script> </script>
src/notify.coffee
+33 -27
View File
@@ -13,8 +13,8 @@ positions =
l: 'left' l: 'left'
c: 'center' c: 'center'
r: 'right' r: 'right'
hPositions = ['l','c','r'] hAligns = ['l','c','r']
vPositions = ['t','m','b'] vAligns = ['t','m','b']
mainPositions = ['t','b','l','r'] mainPositions = ['t','b','l','r']
#positions mapped to opposites #positions mapped to opposites
opposites = opposites =
@@ -37,11 +37,20 @@ styles =
core: core:
html: """ html: """
<div class="#{className}Wrapper"> <div class="#{className}Wrapper">
<div class="#{className}Debug"></div>
<div class="#{className}Arrow"></div> <div class="#{className}Arrow"></div>
<div class="#{className}Container"></div> <div class="#{className}Container"></div>
</div> </div>
""" """
# <div class="#{className}Debug"></div>
# .#{className}Debug {
# position: absolute;
# border: 3px solid red;
# height: 0;
# width: 0;
# }
css: """ css: """
.#{className}Corner { .#{className}Corner {
position: fixed; position: fixed;
@@ -67,13 +76,6 @@ styles =
width: 0; width: 0;
} }
.#{className}Debug {
position: absolute;
border: 3px solid red;
height: 0;
width: 0;
}
.#{className}Container { .#{className}Container {
display: none; display: none;
z-index: 1; z-index: 1;
@@ -150,7 +152,7 @@ pluginOptions =
# Default style # Default style
style: 'default' style: 'default'
# Default color # Default color
color: 'red' color: 'black'
# Color mappings # Color mappings
colors: colors:
red: '#b94a48' red: '#b94a48'
@@ -313,13 +315,15 @@ class Notification
elemPos = @elem.position() elemPos = @elem.position()
elemH = @elem.outerHeight() elemH = @elem.outerHeight()
elemW = @elem.outerWidth() elemW = @elem.outerWidth()
elemIH = @elem.innerHeight()
elemIW = @elem.innerWidth()
wrapPos = @wrapper.position() wrapPos = @wrapper.position()
contH = @container.height() contH = @container.height()
contW = @container.width() contW = @container.width()
#get user defined position #get user defined position
position = @getPosition() position = @getPosition()
console.log position
pMain = position[0] pMain = position[0]
pAlign = position[1] pAlign = position[1]
pArrow = position[2] or pAlign pArrow = position[2] or pAlign
@@ -353,43 +357,46 @@ class Notification
if not @options.arrowShow if not @options.arrowShow
@arrow.hide() @arrow.hide()
else else
size = @options.arrowSize arrowSize = @options.arrowSize
arrowCss = $.extend {}, css arrowCss = $.extend {}, css
#build arrow #build arrow
for pos in mainPositions for pos in mainPositions
posFull = positions[pos] posFull = positions[pos]
continue if pos is opp continue if pos is opp
color = if posFull is mainFull then @getColor() else 'transparent' color = if posFull is mainFull then @getColor() else 'transparent'
arrowCss["border-#{posFull}"] = "#{size}px solid #{color}" arrowCss["border-#{posFull}"] = "#{arrowSize}px solid #{color}"
#add some room for the arrow #add some room for the arrow
incr css, positions[opp], size incr css, positions[opp], arrowSize
#add styles
@arrow.css(arrowCss).show()
#calculate alignment incr arrowCss, positions[pAlign], arrowSize*2 if pAlign in mainPositions
if pMain in vPositions
#calculate container alignment
if pMain in vAligns
incr css, 'left', realign(pAlign, contW, elemW) incr css, 'left', realign(pAlign, contW, elemW)
if pMain in hPositions incr arrowCss, 'left', realign(pAlign, arrowSize, elemIW) if arrowCss
else if pMain in hAligns
incr css, 'top', realign(pAlign, contH, elemH) incr css, 'top', realign(pAlign, contH, elemH)
incr arrowCss, 'top', realign(pAlign, arrowSize, elemIH) if arrowCss
#apply css #apply css
css.display = 'block' if @container.is(":visible") css.display = 'block' if @container.is(":visible")
@container.removeAttr('style').css css @container.removeAttr('style').css css
@arrow.removeAttr('style').css(arrowCss) if arrowCss
getPosition: -> getPosition: ->
text = @options.position text = @options.position
pos = parsePosition text pos = parsePosition text
#if unspecified - choose bottom left #validate position
pos[0] = 'b' if pos.length is 0 pos[0] = 'b' if pos.length is 0
if pos[0] not in mainPositions if pos[0] not in mainPositions
throw "Must be one of [#{mainPositions}]" throw "Must be one of [#{mainPositions}]"
#validate alignment
if pos.length is 1 or if pos.length is 1 or
(pos[0] in vPositions and pos[1] not in hPositions) or (pos[0] in vAligns and pos[1] not in hAligns) or
(pos[0] in hPositions and pos[1] not in vPositions) (pos[0] in hAligns and pos[1] not in vAligns)
pos[1] = if pos[0] in hPositions then 'm' else 'l' pos[1] = if pos[0] in hAligns then 'm' else 'l'
unless @options.autoReposition unless @options.autoReposition
return pos return pos
@@ -397,7 +404,6 @@ class Notification
# if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width() # if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
# return 'right' # return 'right'
# return 'bottom' # return 'bottom'
throw "Not implemented" throw "Not implemented"
getColor: -> getColor: ->