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 = {
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 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 = {
@@ -259,12 +259,13 @@ Notification = (function() {
return elems[fn].apply(elems, args);
};
Notification.prototype.setGlobalPosition = function(position) {
var align, anchor, css, key, main, pAlign, pMain;
Notification.prototype.setGlobalPosition = function() {
var align, anchor, css, key, main, pAlign, pMain, position;
position = this.getPosition();
pMain = position[0], pAlign = position[1];
main = positions[pMain];
align = positions[pAlign];
key = position(pMain + "|" + pAlign);
key = pMain + "|" + pAlign;
anchor = globalAnchors[key];
if (!anchor) {
anchor = globalAnchors[key] = createElem("div");
@@ -283,8 +284,9 @@ Notification = (function() {
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;
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, position, wrapPos, _i, _j, _len, _len1, _ref;
position = this.getPosition();
pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
@@ -401,8 +403,7 @@ Notification = (function() {
};
Notification.prototype.run = function(data, options) {
var position,
_this = this;
var _this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
@@ -416,11 +417,10 @@ Notification = (function() {
}
this.text[this.rawHTML ? 'html' : 'text'](data);
this.updateClasses();
position = this.getPosition();
if (this.elem) {
this.setElementPosition(position);
this.setElementPosition();
} else {
this.setGlobalPosition(position);
this.setGlobalPosition();
}
this.show(true);
if (this.options.autoHide) {
@@ -465,7 +465,8 @@ $.fn[pluginName] = function(data, options) {
$.extend($[pluginName], {
defaults: defaults,
addStyle: addStyle
addStyle: addStyle,
pluginOptions: pluginOptions
});
$(function() {
@@ -487,7 +488,7 @@ $(function() {
}(window,document));
$.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: {
base: {
"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 = {
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 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 = {
@@ -259,12 +259,13 @@ Notification = (function() {
return elems[fn].apply(elems, args);
};
Notification.prototype.setGlobalPosition = function(position) {
var align, anchor, css, key, main, pAlign, pMain;
Notification.prototype.setGlobalPosition = function() {
var align, anchor, css, key, main, pAlign, pMain, position;
position = this.getPosition();
pMain = position[0], pAlign = position[1];
main = positions[pMain];
align = positions[pAlign];
key = position(pMain + "|" + pAlign);
key = pMain + "|" + pAlign;
anchor = globalAnchors[key];
if (!anchor) {
anchor = globalAnchors[key] = createElem("div");
@@ -283,8 +284,9 @@ Notification = (function() {
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;
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, position, wrapPos, _i, _j, _len, _len1, _ref;
position = this.getPosition();
pMain = position[0], pAlign = position[1], pArrow = position[2];
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
@@ -401,8 +403,7 @@ Notification = (function() {
};
Notification.prototype.run = function(data, options) {
var position,
_this = this;
var _this = this;
if ($.isPlainObject(options)) {
$.extend(this.options, options);
} else if ($.type(options) === 'string') {
@@ -416,11 +417,10 @@ Notification = (function() {
}
this.text[this.rawHTML ? 'html' : 'text'](data);
this.updateClasses();
position = this.getPosition();
if (this.elem) {
this.setElementPosition(position);
this.setElementPosition();
} else {
this.setGlobalPosition(position);
this.setGlobalPosition();
}
this.show(true);
if (this.options.autoHide) {
@@ -465,7 +465,8 @@ $.fn[pluginName] = function(data, options) {
$.extend($[pluginName], {
defaults: defaults,
addStyle: addStyle
addStyle: addStyle,
pluginOptions: pluginOptions
});
$(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", {
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: {
base: {
"font-weight": "bold",
+9 -7
View File
@@ -68,6 +68,7 @@ coreStyle =
display: block;
height: inherit;
width: inherit;
margin: 3px;
}
.#{pluginClassName}-wrapper {
@@ -299,14 +300,15 @@ class Notification
elems[fn].apply elems, args
setGlobalPosition: (position) ->
setGlobalPosition: () ->
position = @getPosition()
[pMain, pAlign] = position
main = positions[pMain]
align = positions[pAlign]
key = position pMain+"|"+pAlign
key = pMain+"|"+pAlign
anchor = globalAnchors[key]
unless anchor
anchor = globalAnchors[key] = createElem("div")
@@ -323,7 +325,8 @@ class Notification
anchor.prepend @wrapper
setElementPosition: (position) ->
setElementPosition: () ->
position = @getPosition()
[pMain, pAlign, pArrow] = position
@@ -465,11 +468,10 @@ class Notification
@updateClasses()
#positioning
position = @getPosition()
if @elem
@setElementPosition position
@setElementPosition()
else
@setGlobalPosition position
@setGlobalPosition()
@show true
@@ -509,7 +511,7 @@ $.fn[pluginName] = (data, options) ->
@
#extra methods
$.extend $[pluginName], { defaults, addStyle }
$.extend $[pluginName], { defaults, addStyle, pluginOptions }
#when ready
$ ->
-1
View File
@@ -3,7 +3,6 @@ $.notify.addStyle "bootstrap",
html: """
<div>
<span data-notify-text></span>
<span data-notify-src></span>
</div>
"""
classes: