fixed global position

This commit is contained in:
Jaime Pillora
2013-06-06 15:35:06 +10:00
parent a7e896514d
commit 9e192d505e
7 changed files with 39 additions and 36 deletions
+14 -13
View File
@@ -54,7 +54,7 @@ styles = {};
coreStyle = { coreStyle = {
name: 'core', name: 'core',
html: "<div class=\"" + pluginClassName + "-wrapper\">\n <div class=\"" + pluginClassName + "-arrow\"></div>\n <div class=\"" + pluginClassName + "-container\"></div>\n</div>", 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 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 margin: 3px;\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 = { stylePrefixes = {
@@ -259,12 +259,13 @@ Notification = (function() {
return elems[fn].apply(elems, args); return elems[fn].apply(elems, args);
}; };
Notification.prototype.setGlobalPosition = function(position) { Notification.prototype.setGlobalPosition = function() {
var align, anchor, css, key, main, pAlign, pMain; var align, anchor, css, key, main, pAlign, pMain, position;
position = this.getPosition();
pMain = position[0], pAlign = position[1]; pMain = position[0], pAlign = position[1];
main = positions[pMain]; main = positions[pMain];
align = positions[pAlign]; align = positions[pAlign];
key = position(pMain + "|" + pAlign); key = pMain + "|" + pAlign;
anchor = globalAnchors[key]; anchor = globalAnchors[key];
if (!anchor) { if (!anchor) {
anchor = globalAnchors[key] = createElem("div"); anchor = globalAnchors[key] = createElem("div");
@@ -283,8 +284,9 @@ Notification = (function() {
return anchor.prepend(this.wrapper); return anchor.prepend(this.wrapper);
}; };
Notification.prototype.setElementPosition = function(position) { Notification.prototype.setElementPosition = function() {
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; var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, position, wrapPos, _i, _j, _len, _len1, _ref;
position = this.getPosition();
pMain = position[0], pAlign = position[1], pArrow = position[2]; pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position(); elemPos = this.elem.position();
elemH = this.elem.outerHeight(); elemH = this.elem.outerHeight();
@@ -401,8 +403,7 @@ Notification = (function() {
}; };
Notification.prototype.run = function(data, options) { Notification.prototype.run = function(data, options) {
var position, var _this = this;
_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') {
@@ -416,11 +417,10 @@ Notification = (function() {
} }
this.text[this.rawHTML ? 'html' : 'text'](data); this.text[this.rawHTML ? 'html' : 'text'](data);
this.updateClasses(); this.updateClasses();
position = this.getPosition();
if (this.elem) { if (this.elem) {
this.setElementPosition(position); this.setElementPosition();
} else { } else {
this.setGlobalPosition(position); this.setGlobalPosition();
} }
this.show(true); this.show(true);
if (this.options.autoHide) { if (this.options.autoHide) {
@@ -465,7 +465,8 @@ $.fn[pluginName] = function(data, options) {
$.extend($[pluginName], { $.extend($[pluginName], {
defaults: defaults, defaults: defaults,
addStyle: addStyle addStyle: addStyle,
pluginOptions: pluginOptions
}); });
$(function() { $(function() {
@@ -487,7 +488,7 @@ $(function() {
}(window,document)); }(window,document));
$.notify.addStyle("bootstrap", { $.notify.addStyle("bootstrap", {
html: "<div>\n<span data-notify-text></span>\n<span data-notify-src></span>\n</div>", html: "<div>\n<span data-notify-text></span>\n</div>",
classes: { classes: {
base: { base: {
"font-weight": "bold", "font-weight": "bold",
+1 -1
View File
File diff suppressed because one or more lines are too long
+13 -12
View File
@@ -54,7 +54,7 @@ styles = {};
coreStyle = { coreStyle = {
name: 'core', name: 'core',
html: "<div class=\"" + pluginClassName + "-wrapper\">\n <div class=\"" + pluginClassName + "-arrow\"></div>\n <div class=\"" + pluginClassName + "-container\"></div>\n</div>", 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 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 margin: 3px;\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 = { stylePrefixes = {
@@ -259,12 +259,13 @@ Notification = (function() {
return elems[fn].apply(elems, args); return elems[fn].apply(elems, args);
}; };
Notification.prototype.setGlobalPosition = function(position) { Notification.prototype.setGlobalPosition = function() {
var align, anchor, css, key, main, pAlign, pMain; var align, anchor, css, key, main, pAlign, pMain, position;
position = this.getPosition();
pMain = position[0], pAlign = position[1]; pMain = position[0], pAlign = position[1];
main = positions[pMain]; main = positions[pMain];
align = positions[pAlign]; align = positions[pAlign];
key = position(pMain + "|" + pAlign); key = pMain + "|" + pAlign;
anchor = globalAnchors[key]; anchor = globalAnchors[key];
if (!anchor) { if (!anchor) {
anchor = globalAnchors[key] = createElem("div"); anchor = globalAnchors[key] = createElem("div");
@@ -283,8 +284,9 @@ Notification = (function() {
return anchor.prepend(this.wrapper); return anchor.prepend(this.wrapper);
}; };
Notification.prototype.setElementPosition = function(position) { Notification.prototype.setElementPosition = function() {
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; var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, position, wrapPos, _i, _j, _len, _len1, _ref;
position = this.getPosition();
pMain = position[0], pAlign = position[1], pArrow = position[2]; pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position(); elemPos = this.elem.position();
elemH = this.elem.outerHeight(); elemH = this.elem.outerHeight();
@@ -401,8 +403,7 @@ Notification = (function() {
}; };
Notification.prototype.run = function(data, options) { Notification.prototype.run = function(data, options) {
var position, var _this = this;
_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') {
@@ -416,11 +417,10 @@ Notification = (function() {
} }
this.text[this.rawHTML ? 'html' : 'text'](data); this.text[this.rawHTML ? 'html' : 'text'](data);
this.updateClasses(); this.updateClasses();
position = this.getPosition();
if (this.elem) { if (this.elem) {
this.setElementPosition(position); this.setElementPosition();
} else { } else {
this.setGlobalPosition(position); this.setGlobalPosition();
} }
this.show(true); this.show(true);
if (this.options.autoHide) { if (this.options.autoHide) {
@@ -465,7 +465,8 @@ $.fn[pluginName] = function(data, options) {
$.extend($[pluginName], { $.extend($[pluginName], {
defaults: defaults, defaults: defaults,
addStyle: addStyle addStyle: addStyle,
pluginOptions: pluginOptions
}); });
$(function() { $(function() {
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1,6 +1,6 @@
$.notify.addStyle("bootstrap", { $.notify.addStyle("bootstrap", {
html: "<div>\n<span data-notify-text></span>\n<span data-notify-src></span>\n</div>", html: "<div>\n<span data-notify-text></span>\n</div>",
classes: { classes: {
base: { base: {
"font-weight": "bold", "font-weight": "bold",
+9 -7
View File
@@ -68,6 +68,7 @@ coreStyle =
display: block; display: block;
height: inherit; height: inherit;
width: inherit; width: inherit;
margin: 3px;
} }
.#{pluginClassName}-wrapper { .#{pluginClassName}-wrapper {
@@ -299,14 +300,15 @@ class Notification
elems[fn].apply elems, args elems[fn].apply elems, args
setGlobalPosition: (position) -> setGlobalPosition: () ->
position = @getPosition()
[pMain, pAlign] = position [pMain, pAlign] = position
main = positions[pMain] main = positions[pMain]
align = positions[pAlign] align = positions[pAlign]
key = position pMain+"|"+pAlign key = pMain+"|"+pAlign
anchor = globalAnchors[key] anchor = globalAnchors[key]
unless anchor unless anchor
anchor = globalAnchors[key] = createElem("div") anchor = globalAnchors[key] = createElem("div")
@@ -323,7 +325,8 @@ class Notification
anchor.prepend @wrapper anchor.prepend @wrapper
setElementPosition: (position) -> setElementPosition: () ->
position = @getPosition()
[pMain, pAlign, pArrow] = position [pMain, pAlign, pArrow] = position
@@ -465,11 +468,10 @@ class Notification
@updateClasses() @updateClasses()
#positioning #positioning
position = @getPosition()
if @elem if @elem
@setElementPosition position @setElementPosition()
else else
@setGlobalPosition position @setGlobalPosition()
@show true @show true
@@ -509,7 +511,7 @@ $.fn[pluginName] = (data, options) ->
@ @
#extra methods #extra methods
$.extend $[pluginName], { defaults, addStyle } $.extend $[pluginName], { defaults, addStyle, pluginOptions }
#when ready #when ready
$ -> $ ->
-1
View File
@@ -3,7 +3,6 @@ $.notify.addStyle "bootstrap",
html: """ html: """
<div> <div>
<span data-notify-text></span> <span data-notify-text></span>
<span data-notify-src></span>
</div> </div>
""" """
classes: classes: