Skip to content

Commit 3cd3df6

Browse files
why520crazywhy520crazy
committed
FIX BUG 关于位置计算
1 parent 8aeb682 commit 3cd3df6

File tree

3 files changed

+46
-26
lines changed

3 files changed

+46
-26
lines changed

‎sample/box.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="pbox-header"> <h3>标题</h3></div><div class="pbox-body"> dddddd</div><div class="pbox-footer"> ddd <button class="btn btn-default" ng-click="$pboxInstance.close()">关闭</button></div>
1+
<div class="pbox-header"> <h3>标题</h3></div><div class="pbox-body"> dddddd {{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}{{aaa}}</div><div class="pbox-footer"> ddd <button class="btn btn-default" ng-click="$pboxInstance.close()">关闭</button></div>

‎sample/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div ng-controller="sampleCtrl">
1212
<button data-placement="left" ng-click="open($event)">open</button>
1313
<p>ddddd</p>
14-
<p>ddddd</p> <p>ddddd</p> <p>ddd <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button>dddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffff <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button></p> <p>ddddd</p> <p>ddddd</p> <button data-placement="left" ng-click="open($event)">open</button><p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p>
14+
<p>ddddd</p> <p>ddddd</p> <p>ddd <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="right" ng-click="open($event)">open right</button>dddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffffddddddffffffffffff <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="right" ng-click="open($event)">open right</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button> <button data-placement="left" ng-click="open($event)">open</button></p> <p>ddddd</p> <p>ddddd</p> <button data-placement="left" ng-click="open($event)">open</button><p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p>
1515
<p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p>
1616
<button data-placement="bottom" ng-click="open($event)">open</button>
1717
</div>

‎src/pbox.js‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
calculatePos: function (options, $element, $boxElement) {
1010
var elementTop = $element.offset().top,
1111
elementLeft = $element.offset().left,
12-
dicOuterWidth = $document.outerWidth(),
13-
dicOuterHeight = $document.outerHeight(),
12+
docOuterWidth = $document.outerWidth(),
13+
docOuterHeight = $document.outerHeight(),
1414
elementOuterWidth = $element.outerWidth(),
1515
elementOuterHeight = $element.outerHeight(),
1616
boxWidth = $boxElement.outerWidth(true),
@@ -31,10 +31,10 @@
3131
if (left < 0) {
3232
left = options.offset;
3333
}
34-
if (left + boxWidth > dicOuterWidth) {
35-
left = dicOuterWidth - boxWidth - options.offset;
34+
if (left + boxWidth > docOuterWidth) {
35+
left = docOuterWidth - boxWidth - options.offset;
3636
}
37-
if (top + boxHeight > dicOuterHeight) {
37+
if (top + boxHeight > docOuterHeight) {
3838
top = elementTop - boxHeight - options.offset;
3939
}
4040
break;
@@ -53,50 +53,69 @@
5353
if (left < 0) {
5454
left = options.offset;
5555
}
56-
if (left + boxWidth > dicOuterWidth) {
57-
left = dicOuterWidth - boxWidth - options.offset;
56+
if (left + boxWidth > docOuterWidth) {
57+
left = docOuterWidth - boxWidth - options.offset;
5858
}
5959
if (top < boxHeight) {
6060
top = elementTop + elementOuterHeight + options.offset;
6161
}
6262
break;
6363
case "left":
64-
left = elementLeft - boxWidth - options.offset;
64+
right = ~~(docOuterWidth - elementLeft + options.offset);
65+
if (right + boxWidth + options.offset > docOuterWidth) {
66+
right = 0;
67+
left = ~~(elementLeft + elementOuterWidth + options.offset);
68+
}
6569
if (options.align === "top") {
6670
top = elementTop;
6771
} else if (options.align === "bottom") {
6872
top = elementTop + elementOuterHeight - boxHeight;
6973
}
7074
else {
71-
top = elementTop - boxHeight / 2 + elementOuterHeight / 2;
72-
}
73-
if (left < 0) {
74-
left = elementLeft + elementOuterWidth + options.offset;
75-
} else if (left + boxWidth > dicOuterWidth) {
76-
left = elementLeft + elementOuterWidth + options.offset;
75+
top = ~~(elementTop - boxHeight / 2 + elementOuterHeight / 2);
7776
}
77+
7878
if (top < 0) {
7979
top = options.offset;
80-
} else if (top + boxHeight > dicOuterHeight) {
81-
top = dicOuterHeight - boxHeight - options.offset;
80+
} else if (top + boxHeight > docOuterHeight) {
81+
top = docOuterHeight - boxHeight - options.offset;
8282
}
8383
break;
8484
case "right":
85+
left = elementLeft + elementOuterWidth + options.offset;
86+
if(left + boxWidth + options.offset > docOuterWidth){
87+
left = 0;
88+
right = docOuterWidth - elementLeft + options.offset;
89+
}
90+
if (options.align === "top") {
91+
top = elementTop;
92+
} else if (options.align === "bottom") {
93+
top = elementTop + elementOuterHeight - boxHeight;
94+
}
95+
else {
96+
top = elementTop - boxHeight / 2 + elementOuterHeight / 2;
97+
}
98+
99+
if (top < 0) {
100+
top = options.offset;
101+
} else if (top + boxHeight > docOuterHeight) {
102+
top = docOuterHeight - boxHeight - options.offset;
103+
}
85104
break;
86105
default:
87106
break;
88107
}
89108

90-
if (top !== undefined) {
109+
if (top) {
91110
$boxElement.css("top", top);
92111
}
93-
if (bottom !== undefined) {
112+
if (bottom) {
94113
$boxElement.css("bottom", bottom);
95114
}
96-
if (left !== undefined) {
115+
if (left) {
97116
$boxElement.css("left", left);
98117
}
99-
if (right !== undefined) {
118+
if (right) {
100119
$boxElement.css("right", right);
101120
}
102121

@@ -229,7 +248,7 @@
229248
isResult = true;
230249
}
231250
}
232-
if(isResult){
251+
if (isResult) {
233252
return;
234253
}
235254
}
@@ -244,8 +263,9 @@
244263

245264
$compile(this._pboxElement)(scope);
246265
$body.append(this._pboxElement);
247-
248-
$wtPosition.calculatePos(options, $target, this._pboxElement);
266+
$timeout(function () {
267+
$wtPosition.calculatePos(options, $target, _self._pboxElement);
268+
});
249269
this._bindEvents();
250270
};
251271

@@ -308,7 +328,7 @@
308328
pboxInstance.ctrlInstance = ctrlInstance;
309329
}
310330

311-
pboxInstance.open(tplAndVars[0],pboxScope);
331+
pboxInstance.open(tplAndVars[0], pboxScope);
312332

313333
}, function resolveError(reason) {
314334
pboxInstance.resultDeferred.reject(reason);

0 commit comments

Comments
 (0)