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/
* Copyright (c) 2013 Jaime Pillora - MIT
*/
(function(window,document,undefined) {
'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; };
pluginName = 'notify';
@@ -21,9 +21,9 @@ positions = {
r: 'right'
};
hPositions = ['l', 'c', 'r'];
hAligns = ['l', 'c', 'r'];
vPositions = ['t', 'm', 'b'];
vAligns = ['t', 'm', 'b'];
mainPositions = ['t', 'b', 'l', 'r'];
@@ -51,8 +51,8 @@ parsePosition = function(str) {
styles = {
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>",
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"
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 + "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: {
"default": {
@@ -76,7 +76,7 @@ pluginOptions = {
arrowSize: 5,
position: 'bottom',
style: 'default',
color: 'red',
color: 'black',
colors: {
red: '#b94a48',
green: '#33be40',
@@ -245,18 +245,19 @@ Notification = (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) {
return;
}
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth();
elemIH = this.elem.innerHeight();
elemIW = this.elem.innerWidth();
wrapPos = this.wrapper.position();
contH = this.container.height();
contW = this.container.width();
position = this.getPosition();
console.log(position);
pMain = position[0];
pAlign = position[1];
pArrow = position[2] || pAlign;
@@ -281,7 +282,7 @@ Notification = (function() {
if (!this.options.arrowShow) {
this.arrow.hide();
} else {
size = this.options.arrowSize;
arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css);
for (_i = 0, _len = mainPositions.length; _i < _len; _i++) {
pos = mainPositions[_i];
@@ -290,21 +291,31 @@ Notification = (function() {
continue;
}
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));
}
if (__indexOf.call(hPositions, pMain) >= 0) {
if (arrowCss) {
incr(arrowCss, 'left', realign(pAlign, arrowSize, elemIW));
}
} else if (__indexOf.call(hAligns, pMain) >= 0) {
incr(css, 'top', realign(pAlign, contH, elemH));
if (arrowCss) {
incr(arrowCss, 'top', realign(pAlign, arrowSize, elemIH));
}
}
if (this.container.is(":visible")) {
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() {
@@ -317,8 +328,8 @@ Notification = (function() {
if (_ref = pos[0], __indexOf.call(mainPositions, _ref) < 0) {
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))) {
pos[1] = (_ref5 = pos[0], __indexOf.call(hPositions, _ref5) >= 0) ? 'm' : 'l';
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;
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));
setTimeout(function() {
box.notify(p, {position: p+" middle"});
box.notify(p, {position: p+" center"});
}, 500)
});
</script>
src/notify.coffee
+33 -27
View File
@@ -13,8 +13,8 @@ positions =
l: 'left'
c: 'center'
r: 'right'
hPositions = ['l','c','r']
vPositions = ['t','m','b']
hAligns = ['l','c','r']
vAligns = ['t','m','b']
mainPositions = ['t','b','l','r']
#positions mapped to opposites
opposites =
@@ -37,11 +37,20 @@ styles =
core:
html: """
<div class="#{className}Wrapper">
<div class="#{className}Debug"></div>
<div class="#{className}Arrow"></div>
<div class="#{className}Container"></div>
</div>
"""
# <div class="#{className}Debug"></div>
# .#{className}Debug {
# position: absolute;
# border: 3px solid red;
# height: 0;
# width: 0;
# }
css: """
.#{className}Corner {
position: fixed;
@@ -67,13 +76,6 @@ styles =
width: 0;
}
.#{className}Debug {
position: absolute;
border: 3px solid red;
height: 0;
width: 0;
}
.#{className}Container {
display: none;
z-index: 1;
@@ -150,7 +152,7 @@ pluginOptions =
# Default style
style: 'default'
# Default color
color: 'red'
color: 'black'
# Color mappings
colors:
red: '#b94a48'
@@ -313,13 +315,15 @@ class Notification
elemPos = @elem.position()
elemH = @elem.outerHeight()
elemW = @elem.outerWidth()
elemIH = @elem.innerHeight()
elemIW = @elem.innerWidth()
wrapPos = @wrapper.position()
contH = @container.height()
contW = @container.width()
#get user defined position
position = @getPosition()
console.log position
pMain = position[0]
pAlign = position[1]
pArrow = position[2] or pAlign
@@ -353,43 +357,46 @@ class Notification
if not @options.arrowShow
@arrow.hide()
else
size = @options.arrowSize
arrowSize = @options.arrowSize
arrowCss = $.extend {}, css
#build arrow
for pos in mainPositions
posFull = positions[pos]
continue if pos is opp
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
incr css, positions[opp], size
#add styles
@arrow.css(arrowCss).show()
incr css, positions[opp], arrowSize
#calculate alignment
if pMain in vPositions
incr arrowCss, positions[pAlign], arrowSize*2 if pAlign in mainPositions
#calculate container alignment
if pMain in vAligns
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 arrowCss, 'top', realign(pAlign, arrowSize, elemIH) if arrowCss
#apply css
css.display = 'block' if @container.is(":visible")
@container.removeAttr('style').css css
@arrow.removeAttr('style').css(arrowCss) if arrowCss
getPosition: ->
text = @options.position
pos = parsePosition text
#if unspecified - choose bottom left
#validate position
pos[0] = 'b' if pos.length is 0
if pos[0] not in mainPositions
throw "Must be one of [#{mainPositions}]"
#validate alignment
if pos.length is 1 or
(pos[0] in vPositions and pos[1] not in hPositions) or
(pos[0] in hPositions and pos[1] not in vPositions)
pos[1] = if pos[0] in hPositions then 'm' else 'l'
(pos[0] in vAligns and pos[1] not in hAligns) or
(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
@@ -397,7 +404,6 @@ class Notification
# if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
# return 'right'
# return 'bottom'
throw "Not implemented"
getColor: ->