Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,73 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Client viewport positioning class.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.AbsolutePosition');
|
||||
|
||||
goog.require('goog.math.Coordinate');
|
||||
goog.require('goog.positioning');
|
||||
goog.require('goog.positioning.AbstractPosition');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup absolutely positioned by
|
||||
* setting the left/top style elements directly to the specified values.
|
||||
* The position is generally relative to the element's offsetParent. Normally,
|
||||
* this is the document body, but can be another element if the popup element
|
||||
* is scoped by an element with relative position.
|
||||
*
|
||||
* @param {number|!goog.math.Coordinate} arg1 Left position or coordinate.
|
||||
* @param {number=} opt_arg2 Top position.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.AbstractPosition}
|
||||
*/
|
||||
goog.positioning.AbsolutePosition = function(arg1, opt_arg2) {
|
||||
/**
|
||||
* Coordinate to position popup at.
|
||||
* @type {goog.math.Coordinate}
|
||||
*/
|
||||
this.coordinate = arg1 instanceof goog.math.Coordinate ? arg1 :
|
||||
new goog.math.Coordinate(/** @type {number} */ (arg1), opt_arg2);
|
||||
};
|
||||
goog.inherits(goog.positioning.AbsolutePosition,
|
||||
goog.positioning.AbstractPosition);
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the popup according to the current state.
|
||||
*
|
||||
* @param {Element} movableElement The DOM element to position.
|
||||
* @param {goog.positioning.Corner} movableCorner The corner of the movable
|
||||
* element that should be positioned at the specified position.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize Prefered size of the
|
||||
* movableElement.
|
||||
* @override
|
||||
*/
|
||||
goog.positioning.AbsolutePosition.prototype.reposition = function(
|
||||
movableElement, movableCorner, opt_margin, opt_preferredSize) {
|
||||
goog.positioning.positionAtCoordinate(this.coordinate,
|
||||
movableElement,
|
||||
movableCorner,
|
||||
opt_margin,
|
||||
null,
|
||||
null,
|
||||
opt_preferredSize);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Abstract base class for positioning implementations.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.AbstractPosition');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Abstract position object. Encapsulates position and overflow handling.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
goog.positioning.AbstractPosition = function() {};
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the element. Abstract method, should be overloaded.
|
||||
*
|
||||
* @param {Element} movableElement Element to position.
|
||||
* @param {goog.positioning.Corner} corner Corner of the movable element that
|
||||
* should be positioned adjacent to the anchored element.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize PreferredSize of the
|
||||
* movableElement.
|
||||
*/
|
||||
goog.positioning.AbstractPosition.prototype.reposition =
|
||||
function(movableElement, corner, opt_margin, opt_preferredSize) { };
|
||||
@@ -0,0 +1,92 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Client positioning class.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.AnchoredPosition');
|
||||
|
||||
goog.require('goog.positioning');
|
||||
goog.require('goog.positioning.AbstractPosition');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup is anchored at a corner of
|
||||
* an element.
|
||||
*
|
||||
* When using AnchoredPosition, it is recommended that the popup element
|
||||
* specified in the Popup constructor or Popup.setElement be absolutely
|
||||
* positioned.
|
||||
*
|
||||
* @param {Element} anchorElement Element the movable element should be
|
||||
* anchored against.
|
||||
* @param {goog.positioning.Corner} corner Corner of anchored element the
|
||||
* movable element should be positioned at.
|
||||
* @param {number=} opt_overflow Overflow handling mode. Defaults to IGNORE if
|
||||
* not specified. Bitmap, {@see goog.positioning.Overflow}.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.AbstractPosition}
|
||||
*/
|
||||
goog.positioning.AnchoredPosition = function(anchorElement,
|
||||
corner,
|
||||
opt_overflow) {
|
||||
/**
|
||||
* Element the movable element should be anchored against.
|
||||
* @type {Element}
|
||||
*/
|
||||
this.element = anchorElement;
|
||||
|
||||
/**
|
||||
* Corner of anchored element the movable element should be positioned at.
|
||||
* @type {goog.positioning.Corner}
|
||||
*/
|
||||
this.corner = corner;
|
||||
|
||||
/**
|
||||
* Overflow handling mode. Defaults to IGNORE if not specified.
|
||||
* Bitmap, {@see goog.positioning.Overflow}.
|
||||
* @type {number|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.overflow_ = opt_overflow;
|
||||
};
|
||||
goog.inherits(goog.positioning.AnchoredPosition,
|
||||
goog.positioning.AbstractPosition);
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the movable element.
|
||||
*
|
||||
* @param {Element} movableElement Element to position.
|
||||
* @param {goog.positioning.Corner} movableCorner Corner of the movable element
|
||||
* that should be positioned adjacent to the anchored element.
|
||||
* @param {goog.math.Box=} opt_margin A margin specifin pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize PreferredSize of the
|
||||
* movableElement (unused in this class).
|
||||
* @override
|
||||
*/
|
||||
goog.positioning.AnchoredPosition.prototype.reposition = function(
|
||||
movableElement, movableCorner, opt_margin, opt_preferredSize) {
|
||||
goog.positioning.positionAtAnchor(this.element,
|
||||
this.corner,
|
||||
movableElement,
|
||||
movableCorner,
|
||||
undefined,
|
||||
opt_margin,
|
||||
this.overflow_);
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.positioning.AnchoredPosition
|
||||
</title>
|
||||
<script src="../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.positioning.AnchoredPositionTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use IFRAME to avoid non-deterministic window size problems in Selenium. -->
|
||||
<iframe id="frame1" style="width:200px; height:200px;" src="anchoredviewportposition_test_iframe.html">
|
||||
</iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
goog.provide('goog.positioning.AnchoredPositionTest');
|
||||
goog.setTestOnly('goog.positioning.AnchoredPositionTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.positioning.AnchoredPosition');
|
||||
goog.require('goog.positioning.Corner');
|
||||
goog.require('goog.positioning.Overflow');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
|
||||
var frame, doc, dom, viewportSize, anchor, popup;
|
||||
var corner = goog.positioning.Corner;
|
||||
var popupLength = 20;
|
||||
var anchorLength = 100;
|
||||
|
||||
function setUp() {
|
||||
frame = document.getElementById('frame1');
|
||||
doc = goog.dom.getFrameContentDocument(frame);
|
||||
dom = goog.dom.getDomHelper(doc);
|
||||
viewportSize = dom.getViewportSize();
|
||||
anchor = dom.getElement('anchor');
|
||||
popup = dom.getElement('popup');
|
||||
goog.style.setSize(popup, popupLength, popupLength);
|
||||
goog.style.setPosition(popup, popupLength, popupLength);
|
||||
goog.style.setSize(anchor, anchorLength, anchorLength);
|
||||
}
|
||||
|
||||
// No enough space at the bottom and no overflow adjustment.
|
||||
function testRepositionWithDefaultOverflow() {
|
||||
var avp = new goog.positioning.AnchoredPosition(
|
||||
anchor, corner.BOTTOM_LEFT);
|
||||
var newTop = viewportSize.height - anchorLength;
|
||||
goog.style.setPosition(anchor, 50, newTop);
|
||||
var anchorRect = goog.style.getBounds(anchor);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
var popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(anchorRect.top + anchorRect.height, popupRect.top);
|
||||
}
|
||||
|
||||
// No enough space at the bottom and ADJUST_Y overflow adjustment.
|
||||
function testRepositionWithOverflow() {
|
||||
var avp = new goog.positioning.AnchoredPosition(
|
||||
anchor, corner.BOTTOM_LEFT,
|
||||
goog.positioning.Overflow.ADJUST_Y);
|
||||
var newTop = viewportSize.height - anchorLength;
|
||||
goog.style.setPosition(anchor, 50, newTop);
|
||||
var anchorRect = goog.style.getBounds(anchor);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
var popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(anchorRect.top + anchorRect.height,
|
||||
popupRect.top + popupRect.height);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Anchored viewport positioning class.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.AnchoredViewportPosition');
|
||||
|
||||
goog.require('goog.positioning');
|
||||
goog.require('goog.positioning.AnchoredPosition');
|
||||
goog.require('goog.positioning.Overflow');
|
||||
goog.require('goog.positioning.OverflowStatus');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup is anchored at a corner of
|
||||
* an element. The corners are swapped if dictated by the viewport. For instance
|
||||
* if a popup is anchored with its top left corner to the bottom left corner of
|
||||
* the anchor the popup is either displayed below the anchor (as specified) or
|
||||
* above it if there's not enough room to display it below.
|
||||
*
|
||||
* When using this positioning object it's recommended that the movable element
|
||||
* be absolutely positioned.
|
||||
*
|
||||
* @param {Element} anchorElement Element the movable element should be
|
||||
* anchored against.
|
||||
* @param {goog.positioning.Corner} corner Corner of anchored element the
|
||||
* movable element should be positioned at.
|
||||
* @param {boolean=} opt_adjust Whether the positioning should be adjusted until
|
||||
* the element fits inside the viewport even if that means that the anchored
|
||||
* corners are ignored.
|
||||
* @param {goog.math.Box=} opt_overflowConstraint Box object describing the
|
||||
* dimensions in which the movable element could be shown.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.AnchoredPosition}
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition = function(anchorElement,
|
||||
corner,
|
||||
opt_adjust,
|
||||
opt_overflowConstraint) {
|
||||
goog.positioning.AnchoredPosition.call(this, anchorElement, corner);
|
||||
|
||||
/**
|
||||
* The last resort algorithm to use if the algorithm can't fit inside
|
||||
* the viewport.
|
||||
*
|
||||
* IGNORE = do nothing, just display at the preferred position.
|
||||
*
|
||||
* ADJUST_X | ADJUST_Y = Adjust until the element fits, even if that means
|
||||
* that the anchored corners are ignored.
|
||||
*
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.lastResortOverflow_ = opt_adjust ?
|
||||
(goog.positioning.Overflow.ADJUST_X |
|
||||
goog.positioning.Overflow.ADJUST_Y) :
|
||||
goog.positioning.Overflow.IGNORE;
|
||||
|
||||
/**
|
||||
* The dimensions in which the movable element could be shown.
|
||||
* @type {goog.math.Box|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.overflowConstraint_ = opt_overflowConstraint || undefined;
|
||||
};
|
||||
goog.inherits(goog.positioning.AnchoredViewportPosition,
|
||||
goog.positioning.AnchoredPosition);
|
||||
|
||||
|
||||
/**
|
||||
* @return {goog.math.Box|undefined} The box object describing the
|
||||
* dimensions in which the movable element will be shown.
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition.prototype.getOverflowConstraint =
|
||||
function() {
|
||||
return this.overflowConstraint_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {goog.math.Box|undefined} overflowConstraint Box object describing the
|
||||
* dimensions in which the movable element could be shown.
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition.prototype.setOverflowConstraint =
|
||||
function(overflowConstraint) {
|
||||
this.overflowConstraint_ = overflowConstraint;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {number} A bitmask for the "last resort" overflow.
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition.prototype.getLastResortOverflow =
|
||||
function() {
|
||||
return this.lastResortOverflow_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {number} lastResortOverflow A bitmask for the "last resort" overflow,
|
||||
* if we fail to fit the element on-screen.
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition.prototype.setLastResortOverflow =
|
||||
function(lastResortOverflow) {
|
||||
this.lastResortOverflow_ = lastResortOverflow;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the movable element.
|
||||
*
|
||||
* @param {Element} movableElement Element to position.
|
||||
* @param {goog.positioning.Corner} movableCorner Corner of the movable element
|
||||
* that should be positioned adjacent to the anchored element.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize The preferred size of the
|
||||
* movableElement.
|
||||
* @override
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition.prototype.reposition = function(
|
||||
movableElement, movableCorner, opt_margin, opt_preferredSize) {
|
||||
var status = goog.positioning.positionAtAnchor(this.element, this.corner,
|
||||
movableElement, movableCorner, null, opt_margin,
|
||||
goog.positioning.Overflow.FAIL_X | goog.positioning.Overflow.FAIL_Y,
|
||||
opt_preferredSize, this.overflowConstraint_);
|
||||
|
||||
// If the desired position is outside the viewport try mirroring the corners
|
||||
// horizontally or vertically.
|
||||
if (status & goog.positioning.OverflowStatus.FAILED) {
|
||||
var cornerFallback = this.adjustCorner(status, this.corner);
|
||||
var movableCornerFallback = this.adjustCorner(status, movableCorner);
|
||||
|
||||
status = goog.positioning.positionAtAnchor(this.element, cornerFallback,
|
||||
movableElement, movableCornerFallback, null, opt_margin,
|
||||
goog.positioning.Overflow.FAIL_X | goog.positioning.Overflow.FAIL_Y,
|
||||
opt_preferredSize, this.overflowConstraint_);
|
||||
|
||||
if (status & goog.positioning.OverflowStatus.FAILED) {
|
||||
// If that also fails, pick the best corner from the two tries,
|
||||
// and adjust the position until it fits.
|
||||
cornerFallback = this.adjustCorner(status, cornerFallback);
|
||||
movableCornerFallback = this.adjustCorner(
|
||||
status, movableCornerFallback);
|
||||
|
||||
goog.positioning.positionAtAnchor(this.element, cornerFallback,
|
||||
movableElement, movableCornerFallback, null, opt_margin,
|
||||
this.getLastResortOverflow(), opt_preferredSize,
|
||||
this.overflowConstraint_);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Adjusts the corner if X or Y positioning failed.
|
||||
* @param {number} status The status of the last positionAtAnchor call.
|
||||
* @param {goog.positioning.Corner} corner The corner to adjust.
|
||||
* @return {goog.positioning.Corner} The adjusted corner.
|
||||
* @protected
|
||||
*/
|
||||
goog.positioning.AnchoredViewportPosition.prototype.adjustCorner = function(
|
||||
status, corner) {
|
||||
if (status & goog.positioning.OverflowStatus.FAILED_HORIZONTAL) {
|
||||
corner = goog.positioning.flipCornerHorizontal(corner);
|
||||
}
|
||||
|
||||
if (status & goog.positioning.OverflowStatus.FAILED_VERTICAL) {
|
||||
corner = goog.positioning.flipCornerVertical(corner);
|
||||
}
|
||||
|
||||
return corner;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.positioning.AnchoredViewportPosition
|
||||
</title>
|
||||
<script src="../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.positioning.AnchoredViewportPositionTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use IFRAME to avoid non-deterministic window size problems in Selenium. -->
|
||||
<iframe id="frame1" style="width:200px; height:200px;" src="anchoredviewportposition_test_iframe.html">
|
||||
</iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
// Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
goog.provide('goog.positioning.AnchoredViewportPositionTest');
|
||||
goog.setTestOnly('goog.positioning.AnchoredViewportPositionTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.math.Box');
|
||||
goog.require('goog.positioning.AnchoredViewportPosition');
|
||||
goog.require('goog.positioning.Corner');
|
||||
goog.require('goog.positioning.OverflowStatus');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
|
||||
var frame, doc, dom, viewportSize, anchor, popup;
|
||||
var corner = goog.positioning.Corner;
|
||||
|
||||
function setUp() {
|
||||
frame = document.getElementById('frame1');
|
||||
doc = goog.dom.getFrameContentDocument(frame);
|
||||
dom = goog.dom.getDomHelper(doc);
|
||||
viewportSize = dom.getViewportSize();
|
||||
anchor = dom.getElement('anchor');
|
||||
popup = dom.getElement('popup');
|
||||
goog.style.setSize(popup, 20, 20);
|
||||
}
|
||||
|
||||
// The frame has enough space at the bottom of the anchor.
|
||||
function testRepositionBottom() {
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT, false);
|
||||
goog.style.setSize(anchor, 100, 100);
|
||||
goog.style.setPosition(anchor, 0, 0);
|
||||
assertTrue(viewportSize.height >= 100 + 20);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
var anchorRect = goog.style.getBounds(anchor);
|
||||
assertEquals(anchorRect.top + anchorRect.height,
|
||||
goog.style.getPageOffset(popup).y);
|
||||
}
|
||||
|
||||
// No enough space at the bottom, but at the top.
|
||||
function testRepositionTop() {
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT, false);
|
||||
var newTop = viewportSize.height - 100;
|
||||
goog.style.setSize(anchor, 100, 100);
|
||||
goog.style.setPosition(anchor, 50, newTop);
|
||||
assertTrue(newTop >= 20);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
anchorRect = goog.style.getBounds(anchor);
|
||||
var popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(anchorRect.top, popupRect.top + popupRect.height);
|
||||
}
|
||||
|
||||
// Not enough space either at the bottom or right but there is enough space at
|
||||
// top left.
|
||||
function testRepositionBottomRight() {
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_RIGHT, false);
|
||||
goog.style.setSize(anchor, 100, 100);
|
||||
goog.style.setPosition(anchor, viewportSize.width - 110,
|
||||
viewportSize.height - 110);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
anchorRect = goog.style.getBounds(anchor);
|
||||
var popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(anchorRect.top, popupRect.top + popupRect.height);
|
||||
assertEquals(anchorRect.left, popupRect.left + popupRect.width);
|
||||
}
|
||||
|
||||
// Enough space at neither the bottom nor the top. Adjustment flag is false.
|
||||
function testRepositionNoSpaceWithoutAdjustment() {
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT, false);
|
||||
goog.style.setPosition(anchor, 50, 10);
|
||||
goog.style.setSize(anchor, 100, viewportSize.height - 20);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
anchorRect = goog.style.getBounds(anchor);
|
||||
popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(anchorRect.top + anchorRect.height, popupRect.top);
|
||||
assertTrue(popupRect.top + popupRect.height > viewportSize.height);
|
||||
}
|
||||
|
||||
// Enough space at neither the bottom nor the top. Adjustment flag is true.
|
||||
function testRepositionNoSpaceWithAdjustment() {
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT, true);
|
||||
goog.style.setPosition(anchor, 50, 10);
|
||||
goog.style.setSize(anchor, 100, viewportSize.height - 20);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
anchorRect = goog.style.getBounds(anchor);
|
||||
popupRect = goog.style.getBounds(popup);
|
||||
assertTrue(anchorRect.top + anchorRect.height > popupRect.top);
|
||||
assertEquals(viewportSize.height, popupRect.top + popupRect.height);
|
||||
}
|
||||
|
||||
function testAdjustCorner() {
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT);
|
||||
assertEquals(corner.BOTTOM_LEFT, avp.adjustCorner(0, corner.BOTTOM_LEFT));
|
||||
assertEquals(corner.BOTTOM_RIGHT, avp.adjustCorner(
|
||||
goog.positioning.OverflowStatus.FAILED_HORIZONTAL, corner.BOTTOM_LEFT));
|
||||
assertEquals(corner.TOP_LEFT, avp.adjustCorner(
|
||||
goog.positioning.OverflowStatus.FAILED_VERTICAL, corner.BOTTOM_LEFT));
|
||||
assertEquals(corner.TOP_RIGHT, avp.adjustCorner(
|
||||
goog.positioning.OverflowStatus.FAILED_VERTICAL |
|
||||
goog.positioning.OverflowStatus.FAILED_HORIZONTAL,
|
||||
corner.BOTTOM_LEFT));
|
||||
}
|
||||
|
||||
// No space to fit, so uses fallback.
|
||||
function testOverflowConstraint() {
|
||||
var tinyBox = new goog.math.Box(0, 0, 0, 0);
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT, false, tinyBox);
|
||||
assertEquals(tinyBox, avp.getOverflowConstraint());
|
||||
|
||||
goog.style.setSize(anchor, 50, 50);
|
||||
goog.style.setPosition(anchor, 80, 80);
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
|
||||
anchorRect = goog.style.getBounds(anchor);
|
||||
popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(anchorRect.left, popupRect.left);
|
||||
assertEquals(anchorRect.top + anchorRect.height, popupRect.top);
|
||||
}
|
||||
|
||||
// Initially no space to fit above, then changes to have room.
|
||||
function testChangeOverflowConstraint() {
|
||||
var tinyBox = new goog.math.Box(0, 0, 0, 0);
|
||||
var avp = new goog.positioning.AnchoredViewportPosition(
|
||||
anchor, corner.BOTTOM_LEFT, false, tinyBox);
|
||||
assertEquals(tinyBox, avp.getOverflowConstraint());
|
||||
|
||||
goog.style.setSize(anchor, 50, 50);
|
||||
goog.style.setPosition(anchor, 80, 80);
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
popupRect = goog.style.getBounds(popup);
|
||||
assertNotEquals(60, popupRect.top);
|
||||
|
||||
var movedBox = new goog.math.Box(60, 100, 100, 60);
|
||||
avp.setOverflowConstraint(movedBox);
|
||||
assertEquals(movedBox, avp.getOverflowConstraint());
|
||||
|
||||
avp.reposition(popup, corner.TOP_LEFT);
|
||||
popupRect = goog.style.getBounds(popup);
|
||||
assertEquals(80, popupRect.left);
|
||||
assertEquals(60, popupRect.top);
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<style>
|
||||
.bar {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#anchor {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#popup {
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="anchor" class="bar">anchor</div>
|
||||
<div id="popup" class="bar">popup</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Client positioning class.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
* @author chrishenry@google.com (Chris Henry)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.ClientPosition');
|
||||
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.math.Coordinate');
|
||||
goog.require('goog.positioning');
|
||||
goog.require('goog.positioning.AbstractPosition');
|
||||
goog.require('goog.style');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup is positioned relative to the
|
||||
* window (client) coordinates. This calculates the correct position to
|
||||
* use even if the element is relatively positioned to some other element. This
|
||||
* is for trying to position an element at the spot of the mouse cursor in
|
||||
* a MOUSEMOVE event. Just use the event.clientX and event.clientY as the
|
||||
* parameters.
|
||||
*
|
||||
* @param {number|goog.math.Coordinate} arg1 Left position or coordinate.
|
||||
* @param {number=} opt_arg2 Top position.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.AbstractPosition}
|
||||
*/
|
||||
goog.positioning.ClientPosition = function(arg1, opt_arg2) {
|
||||
/**
|
||||
* Coordinate to position popup at.
|
||||
* @type {goog.math.Coordinate}
|
||||
*/
|
||||
this.coordinate = arg1 instanceof goog.math.Coordinate ? arg1 :
|
||||
new goog.math.Coordinate(/** @type {number} */ (arg1), opt_arg2);
|
||||
};
|
||||
goog.inherits(goog.positioning.ClientPosition,
|
||||
goog.positioning.AbstractPosition);
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the popup according to the current state
|
||||
*
|
||||
* @param {Element} movableElement The DOM element of the popup.
|
||||
* @param {goog.positioning.Corner} movableElementCorner The corner of
|
||||
* the popup element that that should be positioned adjacent to
|
||||
* the anchorElement. One of the goog.positioning.Corner
|
||||
* constants.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize Preferred size of the element.
|
||||
* @override
|
||||
*/
|
||||
goog.positioning.ClientPosition.prototype.reposition = function(
|
||||
movableElement, movableElementCorner, opt_margin, opt_preferredSize) {
|
||||
goog.asserts.assert(movableElement);
|
||||
|
||||
// Translates the coordinate to be relative to the page.
|
||||
var viewportOffset = goog.style.getViewportPageOffset(
|
||||
goog.dom.getOwnerDocument(movableElement));
|
||||
var x = this.coordinate.x + viewportOffset.x;
|
||||
var y = this.coordinate.y + viewportOffset.y;
|
||||
|
||||
// Translates the coordinate to be relative to the offset parent.
|
||||
var movableParentTopLeft =
|
||||
goog.positioning.getOffsetParentPageOffset(movableElement);
|
||||
x -= movableParentTopLeft.x;
|
||||
y -= movableParentTopLeft.y;
|
||||
|
||||
goog.positioning.positionAtCoordinate(
|
||||
new goog.math.Coordinate(x, y), movableElement, movableElementCorner,
|
||||
opt_margin, null, null, opt_preferredSize);
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2012 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<!--
|
||||
Author: chrishenry@google.com (Chris Henry)
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Closure Unit Tests - goog.positioning.ClientPosition</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.positioning.clientPositionTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test-area"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
// Copyright 2012 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* Tests for {@code goog.positioning.ClientPosition}
|
||||
* @author chrishenry@google.com (Chris Henry)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.clientPositionTest');
|
||||
goog.setTestOnly('goog.positioning.clientPositionTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.positioning.ClientPosition');
|
||||
goog.require('goog.positioning.Corner');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
|
||||
|
||||
/**
|
||||
* Prefabricated popup element for convenient. This is created during
|
||||
* setUp and is not attached to the document at the beginning of the
|
||||
* test.
|
||||
* @type {Element}
|
||||
*/
|
||||
var popupElement;
|
||||
var testArea;
|
||||
var POPUP_HEIGHT = 100;
|
||||
var POPUP_WIDTH = 150;
|
||||
|
||||
|
||||
function setUp() {
|
||||
testArea = goog.dom.getElement('test-area');
|
||||
|
||||
// Enlarges the test area to 5000x5000px so that we can be confident
|
||||
// that scrolling the document to some small (x,y) value would work.
|
||||
goog.style.setSize(testArea, 5000, 5000);
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
popupElement = goog.dom.createDom('div');
|
||||
goog.style.setSize(popupElement, POPUP_WIDTH, POPUP_HEIGHT);
|
||||
popupElement.style.position = 'absolute';
|
||||
|
||||
// For ease of debugging.
|
||||
popupElement.style.background = 'blue';
|
||||
}
|
||||
|
||||
|
||||
function tearDown() {
|
||||
popupElement = null;
|
||||
testArea.innerHTML = '';
|
||||
testArea.setAttribute('style', '');
|
||||
}
|
||||
|
||||
|
||||
function testClientPositionWithZeroViewportOffset() {
|
||||
goog.dom.appendChild(testArea, popupElement);
|
||||
|
||||
var x = 300;
|
||||
var y = 200;
|
||||
var pos = new goog.positioning.ClientPosition(x, y);
|
||||
|
||||
pos.reposition(popupElement, goog.positioning.Corner.TOP_LEFT);
|
||||
assertPageOffset(x, y, popupElement);
|
||||
|
||||
pos.reposition(popupElement, goog.positioning.Corner.TOP_RIGHT);
|
||||
assertPageOffset(x - POPUP_WIDTH, y, popupElement);
|
||||
|
||||
pos.reposition(popupElement, goog.positioning.Corner.BOTTOM_LEFT);
|
||||
assertPageOffset(x, y - POPUP_HEIGHT, popupElement);
|
||||
|
||||
pos.reposition(popupElement, goog.positioning.Corner.BOTTOM_RIGHT);
|
||||
assertPageOffset(x - POPUP_WIDTH, y - POPUP_HEIGHT, popupElement);
|
||||
}
|
||||
|
||||
|
||||
function testClientPositionWithSomeViewportOffset() {
|
||||
goog.dom.appendChild(testArea, popupElement);
|
||||
|
||||
var x = 300;
|
||||
var y = 200;
|
||||
var scrollX = 135;
|
||||
var scrollY = 270;
|
||||
window.scrollTo(scrollX, scrollY);
|
||||
|
||||
var pos = new goog.positioning.ClientPosition(x, y);
|
||||
pos.reposition(popupElement, goog.positioning.Corner.TOP_LEFT);
|
||||
assertPageOffset(scrollX + x, scrollY + y, popupElement);
|
||||
}
|
||||
|
||||
|
||||
function testClientPositionWithPositionContext() {
|
||||
var contextAbsoluteX = 90;
|
||||
var contextAbsoluteY = 110;
|
||||
var x = 300;
|
||||
var y = 200;
|
||||
|
||||
var contextElement = goog.dom.createDom('div', undefined, popupElement);
|
||||
goog.style.setPosition(contextElement, contextAbsoluteX, contextAbsoluteY);
|
||||
contextElement.style.position = 'absolute';
|
||||
goog.dom.appendChild(testArea, contextElement);
|
||||
|
||||
var pos = new goog.positioning.ClientPosition(x, y);
|
||||
pos.reposition(popupElement, goog.positioning.Corner.TOP_LEFT);
|
||||
assertPageOffset(x, y, popupElement);
|
||||
}
|
||||
|
||||
|
||||
function assertPageOffset(expectedX, expectedY, el) {
|
||||
var offsetCoordinate = goog.style.getPageOffset(el);
|
||||
assertEquals('x-coord page offset is wrong.', expectedX, offsetCoordinate.x);
|
||||
assertEquals('y-coord page offset is wrong.', expectedY, offsetCoordinate.y);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Anchored viewport positioning class with both adjust and
|
||||
* resize options for the popup.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.MenuAnchoredPosition');
|
||||
|
||||
goog.require('goog.positioning.AnchoredViewportPosition');
|
||||
goog.require('goog.positioning.Overflow');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup is anchored at a corner of
|
||||
* an element. The positioning behavior changes based on the values of
|
||||
* opt_adjust and opt_resize.
|
||||
*
|
||||
* When using this positioning object it's recommended that the movable element
|
||||
* be absolutely positioned.
|
||||
*
|
||||
* @param {Element} anchorElement Element the movable element should be
|
||||
* anchored against.
|
||||
* @param {goog.positioning.Corner} corner Corner of anchored element the
|
||||
* movable element should be positioned at.
|
||||
* @param {boolean=} opt_adjust Whether the positioning should be adjusted until
|
||||
* the element fits inside the viewport even if that means that the anchored
|
||||
* corners are ignored.
|
||||
* @param {boolean=} opt_resize Whether the positioning should be adjusted until
|
||||
* the element fits inside the viewport on the X axis and its height is
|
||||
* resized so if fits in the viewport. This take precedence over opt_adjust.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.AnchoredViewportPosition}
|
||||
*/
|
||||
goog.positioning.MenuAnchoredPosition = function(anchorElement,
|
||||
corner,
|
||||
opt_adjust,
|
||||
opt_resize) {
|
||||
goog.positioning.AnchoredViewportPosition.call(this, anchorElement, corner,
|
||||
opt_adjust || opt_resize);
|
||||
|
||||
if (opt_adjust || opt_resize) {
|
||||
var overflowX = goog.positioning.Overflow.ADJUST_X_EXCEPT_OFFSCREEN;
|
||||
var overflowY = opt_resize ?
|
||||
goog.positioning.Overflow.RESIZE_HEIGHT :
|
||||
goog.positioning.Overflow.ADJUST_Y_EXCEPT_OFFSCREEN;
|
||||
this.setLastResortOverflow(overflowX | overflowY);
|
||||
}
|
||||
};
|
||||
goog.inherits(goog.positioning.MenuAnchoredPosition,
|
||||
goog.positioning.AnchoredViewportPosition);
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
|
||||
Author: nicksantos@google.com (Nick Santos)
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.positioning.MenuAnchoredPosition
|
||||
</title>
|
||||
<script src="../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.positioning.MenuAnchoredPositionTest');
|
||||
</script>
|
||||
</head>
|
||||
<!-- Force offscreen menus to count as FAIL_X -->
|
||||
<body style="overflow: hidden">
|
||||
<div id="offscreen-anchor" style="position: absolute; left: -1000px; top: -1000px">
|
||||
</div>
|
||||
<div id="onscreen-anchor" style="position: absolute; left: 5px; top: 5px">
|
||||
</div>
|
||||
<!-- The x and y positon of this anchor will be reset on each setUp -->
|
||||
<div id="custom-anchor" style="position: absolute;">
|
||||
</div>
|
||||
<div id="menu" style="position: absolute; left: 20px; top: 20px">
|
||||
Menu Item 1
|
||||
<br />
|
||||
Menu Item 2
|
||||
<br />
|
||||
Menu Item 3
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
goog.provide('goog.positioning.MenuAnchoredPositionTest');
|
||||
goog.setTestOnly('goog.positioning.MenuAnchoredPositionTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.positioning.Corner');
|
||||
goog.require('goog.positioning.MenuAnchoredPosition');
|
||||
goog.require('goog.testing.jsunit');
|
||||
|
||||
var offscreenAnchor;
|
||||
var onscreenAnchor;
|
||||
var customAnchor;
|
||||
var menu;
|
||||
var corner = goog.positioning.Corner;
|
||||
var savedMenuHtml;
|
||||
|
||||
function setUp() {
|
||||
offscreenAnchor = goog.dom.getElement('offscreen-anchor');
|
||||
onscreenAnchor = goog.dom.getElement('onscreen-anchor');
|
||||
customAnchor = goog.dom.getElement('custom-anchor');
|
||||
customAnchor.style.left = '0';
|
||||
customAnchor.style.top = '0';
|
||||
|
||||
menu = goog.dom.getElement('menu');
|
||||
savedMenuHtml = menu.innerHTML;
|
||||
menu.style.left = '20px';
|
||||
menu.style.top = '20px';
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
menu.innerHTML = savedMenuHtml;
|
||||
}
|
||||
|
||||
function testRepositionWithAdjustAndOnscreenAnchor() {
|
||||
// Add so many children that it can't possibly fit onscreen.
|
||||
for (var i = 0; i < 200; i++) {
|
||||
menu.appendChild(goog.dom.createDom('div', null, 'New Item ' + i));
|
||||
}
|
||||
|
||||
var pos = new goog.positioning.MenuAnchoredPosition(
|
||||
onscreenAnchor, corner.TOP_LEFT, true);
|
||||
pos.reposition(menu, corner.TOP_LEFT);
|
||||
|
||||
var offset = 0;
|
||||
assertEquals(offset, menu.offsetTop);
|
||||
assertEquals(5, menu.offsetLeft);
|
||||
}
|
||||
|
||||
function testRepositionWithAdjustAndOffscreenAnchor() {
|
||||
// This does not get adjusted because it's too far offscreen.
|
||||
var pos = new goog.positioning.MenuAnchoredPosition(
|
||||
offscreenAnchor, corner.TOP_LEFT, true);
|
||||
pos.reposition(menu, corner.TOP_LEFT);
|
||||
|
||||
assertEquals(-1000, menu.offsetTop);
|
||||
assertEquals(-1000, menu.offsetLeft);
|
||||
}
|
||||
|
||||
function testRespositionFailoverEvenWhenResizeHeightIsOn() {
|
||||
var pos = new goog.positioning.MenuAnchoredPosition(
|
||||
onscreenAnchor, corner.TOP_LEFT, true, true);
|
||||
pos.reposition(menu, corner.TOP_RIGHT);
|
||||
|
||||
// The menu should not get positioned offscreen.
|
||||
assertEquals(5, menu.offsetTop);
|
||||
assertEquals(5, menu.offsetLeft);
|
||||
}
|
||||
|
||||
function testRepositionToBottomLeftWhenBottomFailsAndRightFailsAndResizeOn() {
|
||||
var pageSize = goog.dom.getViewportSize();
|
||||
customAnchor.style.left = (pageSize.width - 10) + 'px';
|
||||
|
||||
// Add so many children that it can't possibly fit onscreen.
|
||||
for (var i = 0; i < 200; i++) {
|
||||
menu.appendChild(goog.dom.createDom('div', null, 'New Item ' + i));
|
||||
}
|
||||
|
||||
var pos = new goog.positioning.MenuAnchoredPosition(
|
||||
customAnchor, corner.TOP_LEFT, true, true);
|
||||
pos.reposition(menu, corner.TOP_LEFT);
|
||||
assertEquals(menu.offsetLeft + menu.offsetWidth, customAnchor.offsetLeft);
|
||||
}
|
||||
@@ -0,0 +1,607 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Common positioning code.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning');
|
||||
goog.provide('goog.positioning.Corner');
|
||||
goog.provide('goog.positioning.CornerBit');
|
||||
goog.provide('goog.positioning.Overflow');
|
||||
goog.provide('goog.positioning.OverflowStatus');
|
||||
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.dom.TagName');
|
||||
goog.require('goog.math.Coordinate');
|
||||
goog.require('goog.math.Rect');
|
||||
goog.require('goog.math.Size');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.style.bidi');
|
||||
|
||||
|
||||
/**
|
||||
* Enum for representing an element corner for positioning the popup.
|
||||
*
|
||||
* The START constants map to LEFT if element directionality is left
|
||||
* to right and RIGHT if the directionality is right to left.
|
||||
* Likewise END maps to RIGHT or LEFT depending on the directionality.
|
||||
*
|
||||
* @enum {number}
|
||||
*/
|
||||
goog.positioning.Corner = {
|
||||
TOP_LEFT: 0,
|
||||
TOP_RIGHT: 2,
|
||||
BOTTOM_LEFT: 1,
|
||||
BOTTOM_RIGHT: 3,
|
||||
TOP_START: 4,
|
||||
TOP_END: 6,
|
||||
BOTTOM_START: 5,
|
||||
BOTTOM_END: 7
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Enum for bits in the {@see goog.positioning.Corner) bitmap.
|
||||
*
|
||||
* @enum {number}
|
||||
*/
|
||||
goog.positioning.CornerBit = {
|
||||
BOTTOM: 1,
|
||||
RIGHT: 2,
|
||||
FLIP_RTL: 4
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Enum for representing position handling in cases where the element would be
|
||||
* positioned outside the viewport.
|
||||
*
|
||||
* @enum {number}
|
||||
*/
|
||||
goog.positioning.Overflow = {
|
||||
/** Ignore overflow */
|
||||
IGNORE: 0,
|
||||
|
||||
/** Try to fit horizontally in the viewport at all costs. */
|
||||
ADJUST_X: 1,
|
||||
|
||||
/** If the element can't fit horizontally, report positioning failure. */
|
||||
FAIL_X: 2,
|
||||
|
||||
/** Try to fit vertically in the viewport at all costs. */
|
||||
ADJUST_Y: 4,
|
||||
|
||||
/** If the element can't fit vertically, report positioning failure. */
|
||||
FAIL_Y: 8,
|
||||
|
||||
/** Resize the element's width to fit in the viewport. */
|
||||
RESIZE_WIDTH: 16,
|
||||
|
||||
/** Resize the element's height to fit in the viewport. */
|
||||
RESIZE_HEIGHT: 32,
|
||||
|
||||
/**
|
||||
* If the anchor goes off-screen in the x-direction, position the movable
|
||||
* element off-screen. Otherwise, try to fit horizontally in the viewport.
|
||||
*/
|
||||
ADJUST_X_EXCEPT_OFFSCREEN: 64 | 1,
|
||||
|
||||
/**
|
||||
* If the anchor goes off-screen in the y-direction, position the movable
|
||||
* element off-screen. Otherwise, try to fit vertically in the viewport.
|
||||
*/
|
||||
ADJUST_Y_EXCEPT_OFFSCREEN: 128 | 4
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Enum for representing the outcome of a positioning call.
|
||||
*
|
||||
* @enum {number}
|
||||
*/
|
||||
goog.positioning.OverflowStatus = {
|
||||
NONE: 0,
|
||||
ADJUSTED_X: 1,
|
||||
ADJUSTED_Y: 2,
|
||||
WIDTH_ADJUSTED: 4,
|
||||
HEIGHT_ADJUSTED: 8,
|
||||
FAILED_LEFT: 16,
|
||||
FAILED_RIGHT: 32,
|
||||
FAILED_TOP: 64,
|
||||
FAILED_BOTTOM: 128,
|
||||
FAILED_OUTSIDE_VIEWPORT: 256
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Shorthand to check if a status code contains any fail code.
|
||||
* @type {number}
|
||||
*/
|
||||
goog.positioning.OverflowStatus.FAILED =
|
||||
goog.positioning.OverflowStatus.FAILED_LEFT |
|
||||
goog.positioning.OverflowStatus.FAILED_RIGHT |
|
||||
goog.positioning.OverflowStatus.FAILED_TOP |
|
||||
goog.positioning.OverflowStatus.FAILED_BOTTOM |
|
||||
goog.positioning.OverflowStatus.FAILED_OUTSIDE_VIEWPORT;
|
||||
|
||||
|
||||
/**
|
||||
* Shorthand to check if horizontal positioning failed.
|
||||
* @type {number}
|
||||
*/
|
||||
goog.positioning.OverflowStatus.FAILED_HORIZONTAL =
|
||||
goog.positioning.OverflowStatus.FAILED_LEFT |
|
||||
goog.positioning.OverflowStatus.FAILED_RIGHT;
|
||||
|
||||
|
||||
/**
|
||||
* Shorthand to check if vertical positioning failed.
|
||||
* @type {number}
|
||||
*/
|
||||
goog.positioning.OverflowStatus.FAILED_VERTICAL =
|
||||
goog.positioning.OverflowStatus.FAILED_TOP |
|
||||
goog.positioning.OverflowStatus.FAILED_BOTTOM;
|
||||
|
||||
|
||||
/**
|
||||
* Positions a movable element relative to an anchor element. The caller
|
||||
* specifies the corners that should touch. This functions then moves the
|
||||
* movable element accordingly.
|
||||
*
|
||||
* @param {Element} anchorElement The element that is the anchor for where
|
||||
* the movable element should position itself.
|
||||
* @param {goog.positioning.Corner} anchorElementCorner The corner of the
|
||||
* anchorElement for positioning the movable element.
|
||||
* @param {Element} movableElement The element to move.
|
||||
* @param {goog.positioning.Corner} movableElementCorner The corner of the
|
||||
* movableElement that that should be positioned adjacent to the anchor
|
||||
* element.
|
||||
* @param {goog.math.Coordinate=} opt_offset An offset specified in pixels.
|
||||
* After the normal positioning algorithm is applied, the offset is then
|
||||
* applied. Positive coordinates move the popup closer to the center of the
|
||||
* anchor element. Negative coordinates move the popup away from the center
|
||||
* of the anchor element.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* After the normal positioning algorithm is applied and any offset, the
|
||||
* margin is then applied. Positive coordinates move the popup away from the
|
||||
* spot it was positioned towards its center. Negative coordinates move it
|
||||
* towards the spot it was positioned away from its center.
|
||||
* @param {?number=} opt_overflow Overflow handling mode. Defaults to IGNORE if
|
||||
* not specified. Bitmap, {@see goog.positioning.Overflow}.
|
||||
* @param {goog.math.Size=} opt_preferredSize The preferred size of the
|
||||
* movableElement.
|
||||
* @param {goog.math.Box=} opt_viewport Box object describing the dimensions of
|
||||
* the viewport. The viewport is specified relative to offsetParent of
|
||||
* {@code movableElement}. In other words, the viewport can be thought of as
|
||||
* describing a "position: absolute" element contained in the offsetParent.
|
||||
* It defaults to visible area of nearest scrollable ancestor of
|
||||
* {@code movableElement} (see {@code goog.style.getVisibleRectForElement}).
|
||||
* @return {goog.positioning.OverflowStatus} Status bitmap,
|
||||
* {@see goog.positioning.OverflowStatus}.
|
||||
*/
|
||||
goog.positioning.positionAtAnchor = function(anchorElement,
|
||||
anchorElementCorner,
|
||||
movableElement,
|
||||
movableElementCorner,
|
||||
opt_offset,
|
||||
opt_margin,
|
||||
opt_overflow,
|
||||
opt_preferredSize,
|
||||
opt_viewport) {
|
||||
|
||||
goog.asserts.assert(movableElement);
|
||||
var movableParentTopLeft =
|
||||
goog.positioning.getOffsetParentPageOffset(movableElement);
|
||||
|
||||
// Get the visible part of the anchor element. anchorRect is
|
||||
// relative to anchorElement's page.
|
||||
var anchorRect = goog.positioning.getVisiblePart_(anchorElement);
|
||||
|
||||
// Translate anchorRect to be relative to movableElement's page.
|
||||
goog.style.translateRectForAnotherFrame(
|
||||
anchorRect,
|
||||
goog.dom.getDomHelper(anchorElement),
|
||||
goog.dom.getDomHelper(movableElement));
|
||||
|
||||
// Offset based on which corner of the element we want to position against.
|
||||
var corner = goog.positioning.getEffectiveCorner(anchorElement,
|
||||
anchorElementCorner);
|
||||
// absolutePos is a candidate position relative to the
|
||||
// movableElement's window.
|
||||
var absolutePos = new goog.math.Coordinate(
|
||||
corner & goog.positioning.CornerBit.RIGHT ?
|
||||
anchorRect.left + anchorRect.width : anchorRect.left,
|
||||
corner & goog.positioning.CornerBit.BOTTOM ?
|
||||
anchorRect.top + anchorRect.height : anchorRect.top);
|
||||
|
||||
// Translate absolutePos to be relative to the offsetParent.
|
||||
absolutePos =
|
||||
goog.math.Coordinate.difference(absolutePos, movableParentTopLeft);
|
||||
|
||||
// Apply offset, if specified
|
||||
if (opt_offset) {
|
||||
absolutePos.x += (corner & goog.positioning.CornerBit.RIGHT ? -1 : 1) *
|
||||
opt_offset.x;
|
||||
absolutePos.y += (corner & goog.positioning.CornerBit.BOTTOM ? -1 : 1) *
|
||||
opt_offset.y;
|
||||
}
|
||||
|
||||
// Determine dimension of viewport.
|
||||
var viewport;
|
||||
if (opt_overflow) {
|
||||
if (opt_viewport) {
|
||||
viewport = opt_viewport;
|
||||
} else {
|
||||
viewport = goog.style.getVisibleRectForElement(movableElement);
|
||||
if (viewport) {
|
||||
viewport.top -= movableParentTopLeft.y;
|
||||
viewport.right -= movableParentTopLeft.x;
|
||||
viewport.bottom -= movableParentTopLeft.y;
|
||||
viewport.left -= movableParentTopLeft.x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return goog.positioning.positionAtCoordinate(absolutePos,
|
||||
movableElement,
|
||||
movableElementCorner,
|
||||
opt_margin,
|
||||
viewport,
|
||||
opt_overflow,
|
||||
opt_preferredSize);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Calculates the page offset of the given element's
|
||||
* offsetParent. This value can be used to translate any x- and
|
||||
* y-offset relative to the page to an offset relative to the
|
||||
* offsetParent, which can then be used directly with as position
|
||||
* coordinate for {@code positionWithCoordinate}.
|
||||
* @param {!Element} movableElement The element to calculate.
|
||||
* @return {!goog.math.Coordinate} The page offset, may be (0, 0).
|
||||
*/
|
||||
goog.positioning.getOffsetParentPageOffset = function(movableElement) {
|
||||
// Ignore offset for the BODY element unless its position is non-static.
|
||||
// For cases where the offset parent is HTML rather than the BODY (such as in
|
||||
// IE strict mode) there's no need to get the position of the BODY as it
|
||||
// doesn't affect the page offset.
|
||||
var movableParentTopLeft;
|
||||
var parent = movableElement.offsetParent;
|
||||
if (parent) {
|
||||
var isBody = parent.tagName == goog.dom.TagName.HTML ||
|
||||
parent.tagName == goog.dom.TagName.BODY;
|
||||
if (!isBody ||
|
||||
goog.style.getComputedPosition(parent) != 'static') {
|
||||
// Get the top-left corner of the parent, in page coordinates.
|
||||
movableParentTopLeft = goog.style.getPageOffset(parent);
|
||||
|
||||
if (!isBody) {
|
||||
movableParentTopLeft = goog.math.Coordinate.difference(
|
||||
movableParentTopLeft,
|
||||
new goog.math.Coordinate(goog.style.bidi.getScrollLeft(parent),
|
||||
parent.scrollTop));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return movableParentTopLeft || new goog.math.Coordinate();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns intersection of the specified element and
|
||||
* goog.style.getVisibleRectForElement for it.
|
||||
*
|
||||
* @param {Element} el The target element.
|
||||
* @return {!goog.math.Rect} Intersection of getVisibleRectForElement
|
||||
* and the current bounding rectangle of the element. If the
|
||||
* intersection is empty, returns the bounding rectangle.
|
||||
* @private
|
||||
*/
|
||||
goog.positioning.getVisiblePart_ = function(el) {
|
||||
var rect = goog.style.getBounds(el);
|
||||
var visibleBox = goog.style.getVisibleRectForElement(el);
|
||||
if (visibleBox) {
|
||||
rect.intersection(goog.math.Rect.createFromBox(visibleBox));
|
||||
}
|
||||
return rect;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Positions the specified corner of the movable element at the
|
||||
* specified coordinate.
|
||||
*
|
||||
* @param {goog.math.Coordinate} absolutePos The coordinate to position the
|
||||
* element at.
|
||||
* @param {Element} movableElement The element to be positioned.
|
||||
* @param {goog.positioning.Corner} movableElementCorner The corner of the
|
||||
* movableElement that that should be positioned.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* After the normal positioning algorithm is applied and any offset, the
|
||||
* margin is then applied. Positive coordinates move the popup away from the
|
||||
* spot it was positioned towards its center. Negative coordinates move it
|
||||
* towards the spot it was positioned away from its center.
|
||||
* @param {goog.math.Box=} opt_viewport Box object describing the dimensions of
|
||||
* the viewport. Required if opt_overflow is specified.
|
||||
* @param {?number=} opt_overflow Overflow handling mode. Defaults to IGNORE if
|
||||
* not specified, {@see goog.positioning.Overflow}.
|
||||
* @param {goog.math.Size=} opt_preferredSize The preferred size of the
|
||||
* movableElement. Defaults to the current size.
|
||||
* @return {goog.positioning.OverflowStatus} Status bitmap.
|
||||
*/
|
||||
goog.positioning.positionAtCoordinate = function(absolutePos,
|
||||
movableElement,
|
||||
movableElementCorner,
|
||||
opt_margin,
|
||||
opt_viewport,
|
||||
opt_overflow,
|
||||
opt_preferredSize) {
|
||||
absolutePos = absolutePos.clone();
|
||||
var status = goog.positioning.OverflowStatus.NONE;
|
||||
|
||||
// Offset based on attached corner and desired margin.
|
||||
var corner = goog.positioning.getEffectiveCorner(movableElement,
|
||||
movableElementCorner);
|
||||
var elementSize = goog.style.getSize(movableElement);
|
||||
var size = opt_preferredSize ? opt_preferredSize.clone() :
|
||||
elementSize.clone();
|
||||
|
||||
var positionResult = goog.positioning.getPositionAtCoordinate(absolutePos,
|
||||
size, corner, opt_margin, opt_viewport, opt_overflow);
|
||||
|
||||
if (positionResult.status & goog.positioning.OverflowStatus.FAILED) {
|
||||
return positionResult.status;
|
||||
}
|
||||
|
||||
goog.style.setPosition(movableElement, positionResult.rect.getTopLeft());
|
||||
size = positionResult.rect.getSize();
|
||||
if (!goog.math.Size.equals(elementSize, size)) {
|
||||
goog.style.setBorderBoxSize(movableElement, size);
|
||||
}
|
||||
|
||||
return positionResult.status;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Computes the position for an element to be placed on-screen at the
|
||||
* specified coordinates. Returns an object containing both the resulting
|
||||
* rectangle, and the overflow status bitmap.
|
||||
*
|
||||
* @param {!goog.math.Coordinate} absolutePos The coordinate to position the
|
||||
* element at.
|
||||
* @param {!goog.math.Size} elementSize The size of the element to be
|
||||
* positioned.
|
||||
* @param {goog.positioning.Corner} elementCorner The corner of the
|
||||
* movableElement that that should be positioned.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* After the normal positioning algorithm is applied and any offset, the
|
||||
* margin is then applied. Positive coordinates move the popup away from the
|
||||
* spot it was positioned towards its center. Negative coordinates move it
|
||||
* towards the spot it was positioned away from its center.
|
||||
* @param {goog.math.Box=} opt_viewport Box object describing the dimensions of
|
||||
* the viewport. Required if opt_overflow is specified.
|
||||
* @param {?number=} opt_overflow Overflow handling mode. Defaults to IGNORE
|
||||
* if not specified, {@see goog.positioning.Overflow}.
|
||||
* @return {{rect:!goog.math.Rect, status:goog.positioning.OverflowStatus}}
|
||||
* Object containing the computed position and status bitmap.
|
||||
*/
|
||||
goog.positioning.getPositionAtCoordinate = function(
|
||||
absolutePos,
|
||||
elementSize,
|
||||
elementCorner,
|
||||
opt_margin,
|
||||
opt_viewport,
|
||||
opt_overflow) {
|
||||
absolutePos = absolutePos.clone();
|
||||
elementSize = elementSize.clone();
|
||||
var status = goog.positioning.OverflowStatus.NONE;
|
||||
|
||||
if (opt_margin || elementCorner != goog.positioning.Corner.TOP_LEFT) {
|
||||
if (elementCorner & goog.positioning.CornerBit.RIGHT) {
|
||||
absolutePos.x -= elementSize.width + (opt_margin ? opt_margin.right : 0);
|
||||
} else if (opt_margin) {
|
||||
absolutePos.x += opt_margin.left;
|
||||
}
|
||||
if (elementCorner & goog.positioning.CornerBit.BOTTOM) {
|
||||
absolutePos.y -= elementSize.height +
|
||||
(opt_margin ? opt_margin.bottom : 0);
|
||||
} else if (opt_margin) {
|
||||
absolutePos.y += opt_margin.top;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust position to fit inside viewport.
|
||||
if (opt_overflow) {
|
||||
status = opt_viewport ?
|
||||
goog.positioning.adjustForViewport_(
|
||||
absolutePos, elementSize, opt_viewport, opt_overflow) :
|
||||
goog.positioning.OverflowStatus.FAILED_OUTSIDE_VIEWPORT;
|
||||
}
|
||||
|
||||
var rect = new goog.math.Rect(0, 0, 0, 0);
|
||||
rect.left = absolutePos.x;
|
||||
rect.top = absolutePos.y;
|
||||
rect.width = elementSize.width;
|
||||
rect.height = elementSize.height;
|
||||
return {rect: rect, status: status};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Adjusts the position and/or size of an element, identified by its position
|
||||
* and size, to fit inside the viewport. If the position or size of the element
|
||||
* is adjusted the pos or size objects, respectively, are modified.
|
||||
*
|
||||
* @param {goog.math.Coordinate} pos Position of element, updated if the
|
||||
* position is adjusted.
|
||||
* @param {goog.math.Size} size Size of element, updated if the size is
|
||||
* adjusted.
|
||||
* @param {goog.math.Box} viewport Bounding box describing the viewport.
|
||||
* @param {number} overflow Overflow handling mode,
|
||||
* {@see goog.positioning.Overflow}.
|
||||
* @return {goog.positioning.OverflowStatus} Status bitmap,
|
||||
* {@see goog.positioning.OverflowStatus}.
|
||||
* @private
|
||||
*/
|
||||
goog.positioning.adjustForViewport_ = function(pos, size, viewport, overflow) {
|
||||
var status = goog.positioning.OverflowStatus.NONE;
|
||||
|
||||
var ADJUST_X_EXCEPT_OFFSCREEN =
|
||||
goog.positioning.Overflow.ADJUST_X_EXCEPT_OFFSCREEN;
|
||||
var ADJUST_Y_EXCEPT_OFFSCREEN =
|
||||
goog.positioning.Overflow.ADJUST_Y_EXCEPT_OFFSCREEN;
|
||||
if ((overflow & ADJUST_X_EXCEPT_OFFSCREEN) == ADJUST_X_EXCEPT_OFFSCREEN &&
|
||||
(pos.x < viewport.left || pos.x >= viewport.right)) {
|
||||
overflow &= ~goog.positioning.Overflow.ADJUST_X;
|
||||
}
|
||||
if ((overflow & ADJUST_Y_EXCEPT_OFFSCREEN) == ADJUST_Y_EXCEPT_OFFSCREEN &&
|
||||
(pos.y < viewport.top || pos.y >= viewport.bottom)) {
|
||||
overflow &= ~goog.positioning.Overflow.ADJUST_Y;
|
||||
}
|
||||
|
||||
// Left edge outside viewport, try to move it.
|
||||
if (pos.x < viewport.left && overflow & goog.positioning.Overflow.ADJUST_X) {
|
||||
pos.x = viewport.left;
|
||||
status |= goog.positioning.OverflowStatus.ADJUSTED_X;
|
||||
}
|
||||
|
||||
// Left edge inside and right edge outside viewport, try to resize it.
|
||||
if (pos.x < viewport.left &&
|
||||
pos.x + size.width > viewport.right &&
|
||||
overflow & goog.positioning.Overflow.RESIZE_WIDTH) {
|
||||
size.width = Math.max(
|
||||
size.width - ((pos.x + size.width) - viewport.right), 0);
|
||||
status |= goog.positioning.OverflowStatus.WIDTH_ADJUSTED;
|
||||
}
|
||||
|
||||
// Right edge outside viewport, try to move it.
|
||||
if (pos.x + size.width > viewport.right &&
|
||||
overflow & goog.positioning.Overflow.ADJUST_X) {
|
||||
pos.x = Math.max(viewport.right - size.width, viewport.left);
|
||||
status |= goog.positioning.OverflowStatus.ADJUSTED_X;
|
||||
}
|
||||
|
||||
// Left or right edge still outside viewport, fail if the FAIL_X option was
|
||||
// specified, ignore it otherwise.
|
||||
if (overflow & goog.positioning.Overflow.FAIL_X) {
|
||||
status |= (pos.x < viewport.left ?
|
||||
goog.positioning.OverflowStatus.FAILED_LEFT : 0) |
|
||||
(pos.x + size.width > viewport.right ?
|
||||
goog.positioning.OverflowStatus.FAILED_RIGHT : 0);
|
||||
}
|
||||
|
||||
// Top edge outside viewport, try to move it.
|
||||
if (pos.y < viewport.top && overflow & goog.positioning.Overflow.ADJUST_Y) {
|
||||
pos.y = viewport.top;
|
||||
status |= goog.positioning.OverflowStatus.ADJUSTED_Y;
|
||||
}
|
||||
|
||||
// Bottom edge inside and top edge outside viewport, try to resize it.
|
||||
if (pos.y <= viewport.top &&
|
||||
pos.y + size.height < viewport.bottom &&
|
||||
overflow & goog.positioning.Overflow.RESIZE_HEIGHT) {
|
||||
size.height = Math.max(size.height - (viewport.top - pos.y), 0);
|
||||
pos.y = viewport.top;
|
||||
status |= goog.positioning.OverflowStatus.HEIGHT_ADJUSTED;
|
||||
}
|
||||
|
||||
// Top edge inside and bottom edge outside viewport, try to resize it.
|
||||
if (pos.y >= viewport.top &&
|
||||
pos.y + size.height > viewport.bottom &&
|
||||
overflow & goog.positioning.Overflow.RESIZE_HEIGHT) {
|
||||
size.height = Math.max(
|
||||
size.height - ((pos.y + size.height) - viewport.bottom), 0);
|
||||
status |= goog.positioning.OverflowStatus.HEIGHT_ADJUSTED;
|
||||
}
|
||||
|
||||
// Bottom edge outside viewport, try to move it.
|
||||
if (pos.y + size.height > viewport.bottom &&
|
||||
overflow & goog.positioning.Overflow.ADJUST_Y) {
|
||||
pos.y = Math.max(viewport.bottom - size.height, viewport.top);
|
||||
status |= goog.positioning.OverflowStatus.ADJUSTED_Y;
|
||||
}
|
||||
|
||||
// Top or bottom edge still outside viewport, fail if the FAIL_Y option was
|
||||
// specified, ignore it otherwise.
|
||||
if (overflow & goog.positioning.Overflow.FAIL_Y) {
|
||||
status |= (pos.y < viewport.top ?
|
||||
goog.positioning.OverflowStatus.FAILED_TOP : 0) |
|
||||
(pos.y + size.height > viewport.bottom ?
|
||||
goog.positioning.OverflowStatus.FAILED_BOTTOM : 0);
|
||||
}
|
||||
|
||||
return status;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns an absolute corner (top/bottom left/right) given an absolute
|
||||
* or relative (top/bottom start/end) corner and the direction of an element.
|
||||
* Absolute corners remain unchanged.
|
||||
* @param {Element} element DOM element to test for RTL direction.
|
||||
* @param {goog.positioning.Corner} corner The popup corner used for
|
||||
* positioning.
|
||||
* @return {goog.positioning.Corner} Effective corner.
|
||||
*/
|
||||
goog.positioning.getEffectiveCorner = function(element, corner) {
|
||||
return /** @type {goog.positioning.Corner} */ (
|
||||
(corner & goog.positioning.CornerBit.FLIP_RTL &&
|
||||
goog.style.isRightToLeft(element) ?
|
||||
corner ^ goog.positioning.CornerBit.RIGHT :
|
||||
corner
|
||||
) & ~goog.positioning.CornerBit.FLIP_RTL);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns the corner opposite the given one horizontally.
|
||||
* @param {goog.positioning.Corner} corner The popup corner used to flip.
|
||||
* @return {goog.positioning.Corner} The opposite corner horizontally.
|
||||
*/
|
||||
goog.positioning.flipCornerHorizontal = function(corner) {
|
||||
return /** @type {goog.positioning.Corner} */ (corner ^
|
||||
goog.positioning.CornerBit.RIGHT);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns the corner opposite the given one vertically.
|
||||
* @param {goog.positioning.Corner} corner The popup corner used to flip.
|
||||
* @return {goog.positioning.Corner} The opposite corner vertically.
|
||||
*/
|
||||
goog.positioning.flipCornerVertical = function(corner) {
|
||||
return /** @type {goog.positioning.Corner} */ (corner ^
|
||||
goog.positioning.CornerBit.BOTTOM);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns the corner opposite the given one horizontally and vertically.
|
||||
* @param {goog.positioning.Corner} corner The popup corner used to flip.
|
||||
* @return {goog.positioning.Corner} The opposite corner horizontally and
|
||||
* vertically.
|
||||
*/
|
||||
goog.positioning.flipCorner = function(corner) {
|
||||
return /** @type {goog.positioning.Corner} */ (corner ^
|
||||
goog.positioning.CornerBit.BOTTOM ^
|
||||
goog.positioning.CornerBit.RIGHT);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
|
||||
Author: eae@google.com (Emil A Eklund)
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Closure Unit Tests - goog.positioning</title>
|
||||
<script src="../base.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
.box1 {
|
||||
border: 1px solid black;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
height: 150px;
|
||||
}
|
||||
.outerbox {
|
||||
border: 1px solid gray;
|
||||
padding: 3px;
|
||||
margin: 5px 5px 5px 100px;
|
||||
}
|
||||
.box2 {
|
||||
position: relative;
|
||||
padding: 0px; /* If the padding has >0 value, IE6 fails some tests. */
|
||||
margin: -2px;
|
||||
}
|
||||
.box8 {
|
||||
position: absolute;
|
||||
padding: 0px; /* If the padding has >0 value, IE6 fails some tests. */
|
||||
margin: -2px;
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
}
|
||||
.box9 {
|
||||
border: 1px solid black;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.anchorFrame {
|
||||
overflow: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#popup1, #popup2, #popup3, #popup5, #popup6, #popup7 {
|
||||
position: absolute;
|
||||
border: 1px solid red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#popup9 {
|
||||
border: 1px solid green;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
#popup8 {
|
||||
position: absolute;
|
||||
border: 1px solid red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#anchor1 {
|
||||
border: 1px solid blue;
|
||||
}
|
||||
#anchor4 {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
#test-area {
|
||||
height: 1000px;
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='offscreen-anchor'
|
||||
style='position: absolute; left: -1000px; top: -1000px'></div>
|
||||
|
||||
<div id="ltr" dir="ltr">
|
||||
Left to right element.
|
||||
</div>
|
||||
|
||||
<div id="rtl" dir="rtl">
|
||||
Right to left element.
|
||||
</div>
|
||||
|
||||
<div class="outerbox">
|
||||
<div id="box1" class="box1">
|
||||
<span id="anchor1">Anchor LTR.</span>
|
||||
</div>
|
||||
|
||||
<div class="box2">
|
||||
<div id="popup1">
|
||||
<div>Popup ltr.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outerbox" dir="rtl">
|
||||
<div class="box1">
|
||||
<span id="anchor2">Anchor RTL.</span>
|
||||
</div>
|
||||
|
||||
<div class="box2">
|
||||
<div id="popup2">
|
||||
<div>Popup rtl.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="anchor4">
|
||||
Anchor 4.
|
||||
</div>
|
||||
|
||||
<div id="popup3">
|
||||
Popup.
|
||||
</div>
|
||||
|
||||
<div dir="rtl" style="border: 1px solid red;">
|
||||
<div dir="rtl" style="position: relative; overflow: auto; width: 150px; height: 100px; border: 1px solid black;">
|
||||
<div style="height: 200px;">
|
||||
<span id="anchor5">Anchor 5.</span>
|
||||
</div>
|
||||
<div id="popup5">
|
||||
Popup.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iframe id="iframe-standard" src="positioning_test_standard.html" class="anchorFrame">
|
||||
</iframe>
|
||||
<iframe id="iframe-quirk" src="positioning_test_quirk.html" class="anchorFrame">
|
||||
</iframe>
|
||||
<div id="popup6">Popup6</div>
|
||||
|
||||
<div style="position:relative;height:100px;width:100px;overflow:auto;">
|
||||
I hate positioning!
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>7</div>
|
||||
<div id="popup7">Popup7</div>
|
||||
</div>
|
||||
|
||||
<iframe id="nested-outer" src="positioning_test_iframe1.html"
|
||||
style="overflow:auto;width:150px;height:150px;"></iframe>
|
||||
|
||||
<div class="outerbox" dir="rtl">
|
||||
<div class="box1">
|
||||
<span id="anchor8">Anchor8 RTL.</span>
|
||||
</div>
|
||||
|
||||
<div class="box8 overflow-auto">
|
||||
<div id="popup8">
|
||||
<div>Popup8 rtl.</div>
|
||||
</div>
|
||||
<div style="width:10000px;"> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="box9" class="box9">
|
||||
<div id="popup9">
|
||||
<div>Popup9</div>
|
||||
</div>
|
||||
<span id="anchor9">Anchor9</span>
|
||||
</div>
|
||||
|
||||
<div id="test-area"></div>
|
||||
|
||||
<script>
|
||||
goog.require('goog.positioningTest');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!--
|
||||
-->
|
||||
<html><body>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<p>The following IFRAME's Y-position is not 0.</p>
|
||||
<iframe id="inner-frame" src="positioning_test_iframe2.html"
|
||||
style="overflow:auto;width:200px;height:200px;border:0px;"></iframe>
|
||||
<div id="popup1" style="position:absolute;width:16px;height:16px;background-color:#088;"></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!--
|
||||
-->
|
||||
<html><body style="border:0px;margin:0px;">
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<div id="anchor1" style="width:300px;height:300px;border:0px;background-color:#008;"></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!--
|
||||
-->
|
||||
<html><body style="border:0px;"><div id="anchor1" style="width:400px;height:400px;"></body></html>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!--
|
||||
-->
|
||||
<html><body>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<div id="anchor1" style="width:400px;height:400px;"></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,124 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Client viewport positioning class.
|
||||
*
|
||||
* @author robbyw@google.com (Robert Walker)
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.ViewportClientPosition');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.math.Coordinate');
|
||||
goog.require('goog.positioning');
|
||||
goog.require('goog.positioning.ClientPosition');
|
||||
goog.require('goog.positioning.Overflow');
|
||||
goog.require('goog.positioning.OverflowStatus');
|
||||
goog.require('goog.style');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup is positioned relative to the
|
||||
* window (client) coordinates, and made to stay within the viewport.
|
||||
*
|
||||
* @param {number|goog.math.Coordinate} arg1 Left position or coordinate.
|
||||
* @param {number=} opt_arg2 Top position if arg1 is a number representing the
|
||||
* left position, ignored otherwise.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.ClientPosition}
|
||||
*/
|
||||
goog.positioning.ViewportClientPosition = function(arg1, opt_arg2) {
|
||||
goog.positioning.ClientPosition.call(this, arg1, opt_arg2);
|
||||
};
|
||||
goog.inherits(goog.positioning.ViewportClientPosition,
|
||||
goog.positioning.ClientPosition);
|
||||
|
||||
|
||||
/**
|
||||
* The last-resort overflow strategy, if the popup fails to fit.
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
goog.positioning.ViewportClientPosition.prototype.lastResortOverflow_ = 0;
|
||||
|
||||
|
||||
/**
|
||||
* Set the last-resort overflow strategy, if the popup fails to fit.
|
||||
* @param {number} overflow A bitmask of goog.positioning.Overflow strategies.
|
||||
*/
|
||||
goog.positioning.ViewportClientPosition.prototype.setLastResortOverflow =
|
||||
function(overflow) {
|
||||
this.lastResortOverflow_ = overflow;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the popup according to the current state.
|
||||
*
|
||||
* @param {Element} element The DOM element of the popup.
|
||||
* @param {goog.positioning.Corner} popupCorner The corner of the popup
|
||||
* element that that should be positioned adjacent to the anchorElement.
|
||||
* One of the goog.positioning.Corner constants.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize Preferred size fo the element.
|
||||
* @override
|
||||
*/
|
||||
goog.positioning.ViewportClientPosition.prototype.reposition = function(
|
||||
element, popupCorner, opt_margin, opt_preferredSize) {
|
||||
var viewportElt = goog.style.getClientViewportElement(element);
|
||||
var viewport = goog.style.getVisibleRectForElement(viewportElt);
|
||||
var scrollEl = goog.dom.getDomHelper(element).getDocumentScrollElement();
|
||||
var clientPos = new goog.math.Coordinate(
|
||||
this.coordinate.x + scrollEl.scrollLeft,
|
||||
this.coordinate.y + scrollEl.scrollTop);
|
||||
|
||||
var failXY = goog.positioning.Overflow.FAIL_X |
|
||||
goog.positioning.Overflow.FAIL_Y;
|
||||
var corner = popupCorner;
|
||||
|
||||
// Try the requested position.
|
||||
var status = goog.positioning.positionAtCoordinate(clientPos, element, corner,
|
||||
opt_margin, viewport, failXY, opt_preferredSize);
|
||||
if ((status & goog.positioning.OverflowStatus.FAILED) == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Outside left or right edge of viewport, try try to flip it horizontally.
|
||||
if (status & goog.positioning.OverflowStatus.FAILED_LEFT ||
|
||||
status & goog.positioning.OverflowStatus.FAILED_RIGHT) {
|
||||
corner = goog.positioning.flipCornerHorizontal(corner);
|
||||
}
|
||||
|
||||
// Outside top or bottom edge of viewport, try try to flip it vertically.
|
||||
if (status & goog.positioning.OverflowStatus.FAILED_TOP ||
|
||||
status & goog.positioning.OverflowStatus.FAILED_BOTTOM) {
|
||||
corner = goog.positioning.flipCornerVertical(corner);
|
||||
}
|
||||
|
||||
// Try flipped position.
|
||||
status = goog.positioning.positionAtCoordinate(clientPos, element, corner,
|
||||
opt_margin, viewport, failXY, opt_preferredSize);
|
||||
if ((status & goog.positioning.OverflowStatus.FAILED) == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If that failed, the viewport is simply too small to contain the popup.
|
||||
// Revert to the original position.
|
||||
goog.positioning.positionAtCoordinate(
|
||||
clientPos, element, popupCorner, opt_margin, viewport,
|
||||
this.lastResortOverflow_, opt_preferredSize);
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
|
||||
Author: eae@google.com (Emil A Eklund)
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.positioning.ViewportClientPosition
|
||||
</title>
|
||||
<script src="../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.positioning.ViewportClientPositionTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Uses an iframe to avoid window size problems when running under Selenium.
|
||||
-->
|
||||
<iframe id="frame1" style="width: 200px; height: 200px;" src="anchoredviewportposition_test_iframe.html">
|
||||
</iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,178 @@
|
||||
// Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
goog.provide('goog.positioning.ViewportClientPositionTest');
|
||||
goog.setTestOnly('goog.positioning.ViewportClientPositionTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.positioning.Corner');
|
||||
goog.require('goog.positioning.Overflow');
|
||||
goog.require('goog.positioning.ViewportClientPosition');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
var viewportSize, anchor, popup, dom, frameRect;
|
||||
var corner = goog.positioning.Corner;
|
||||
|
||||
// Allow positions to be off by one in gecko as it reports scrolling
|
||||
// offsets in steps of 2.
|
||||
var ALLOWED_OFFSET = goog.userAgent.GECKO ? 1 : 0;
|
||||
|
||||
|
||||
function setUp() {
|
||||
var frame = document.getElementById('frame1');
|
||||
var doc = goog.dom.getFrameContentDocument(frame);
|
||||
|
||||
dom = goog.dom.getDomHelper(doc);
|
||||
viewportSize = dom.getViewportSize();
|
||||
anchor = dom.getElement('anchor');
|
||||
popup = dom.getElement('popup');
|
||||
popup.style.overflowY = 'visible';
|
||||
goog.style.setSize(popup, 20, 20);
|
||||
frameRect = goog.style.getVisibleRectForElement(doc.body);
|
||||
}
|
||||
|
||||
|
||||
function testPositionAtCoordinateTopLeft() {
|
||||
var pos = new goog.positioning.ViewportClientPosition(100, 100);
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
|
||||
var offset = goog.style.getPageOffset(popup);
|
||||
assertEquals('Left edge of popup should be at specified x coordinate.',
|
||||
100,
|
||||
offset.x);
|
||||
assertEquals('Top edge of popup should be at specified y coordinate.',
|
||||
100,
|
||||
offset.y);
|
||||
}
|
||||
|
||||
|
||||
function testPositionAtCoordinateBottomRight() {
|
||||
var pos = new goog.positioning.ViewportClientPosition(100, 100);
|
||||
pos.reposition(popup, corner.BOTTOM_RIGHT);
|
||||
|
||||
var bounds = goog.style.getBounds(popup);
|
||||
assertEquals('Right edge of popup should be at specified x coordinate.',
|
||||
100,
|
||||
bounds.left + bounds.width);
|
||||
assertEquals('Bottom edge of popup should be at specified x coordinate.',
|
||||
100,
|
||||
bounds.top + bounds.height);
|
||||
}
|
||||
|
||||
|
||||
function testPositionAtCoordinateTopLeftWithScroll() {
|
||||
dom.getDocument().body.style.paddingTop = '300px';
|
||||
dom.getDocument().body.style.height = '3000px';
|
||||
dom.getDocumentScrollElement().scrollTop = 50;
|
||||
dom.getDocument().body.scrollTop = 50;
|
||||
|
||||
var pos = new goog.positioning.ViewportClientPosition(0, 0);
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
|
||||
var offset = goog.style.getPageOffset(popup);
|
||||
assertEquals('Left edge of popup should be at specified x coordinate.',
|
||||
0,
|
||||
offset.x);
|
||||
assertTrue('Top edge of popup should be at specified y coordinate ' +
|
||||
'adjusted for scroll.',
|
||||
Math.abs(offset.y - 50) <= ALLOWED_OFFSET);
|
||||
|
||||
dom.getDocument().body.style.paddingLeft = '1000px';
|
||||
dom.getDocumentScrollElement().scrollLeft = 500;
|
||||
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
offset = goog.style.getPageOffset(popup);
|
||||
assertTrue('Left edge of popup should be at specified x coordinate ' +
|
||||
'adjusted for scroll.',
|
||||
Math.abs(offset.x - 500) <= ALLOWED_OFFSET);
|
||||
|
||||
dom.getDocumentScrollElement().scrollLeft = 0;
|
||||
dom.getDocumentScrollElement().scrollTop = 0;
|
||||
dom.getDocument().body.style.paddingLeft = '';
|
||||
dom.getDocument().body.style.paddingTop = '';
|
||||
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
offset = goog.style.getPageOffset(popup);
|
||||
assertEquals('Left edge of popup should be at specified x coordinate.',
|
||||
0,
|
||||
offset.x);
|
||||
assertEquals('Top edge of popup should be at specified y coordinate.',
|
||||
0,
|
||||
offset.y);
|
||||
}
|
||||
|
||||
|
||||
function testOverflowRightFlipHor() {
|
||||
var pos = new goog.positioning.ViewportClientPosition(frameRect.right,
|
||||
100);
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
|
||||
var offset = goog.style.getPageOffset(popup);
|
||||
assertEquals('Left edge of popup should have been adjusted so that it ' +
|
||||
'fits inside the viewport.',
|
||||
frameRect.right - popup.offsetWidth,
|
||||
offset.x);
|
||||
assertEquals('Top edge of popup should be at specified y coordinate.',
|
||||
100,
|
||||
offset.y);
|
||||
}
|
||||
|
||||
|
||||
function testOverflowTopFlipVer() {
|
||||
var pos = new goog.positioning.ViewportClientPosition(100, 0);
|
||||
pos.reposition(popup, corner.TOP_RIGHT);
|
||||
|
||||
var offset = goog.style.getPageOffset(popup);
|
||||
assertEquals('Left edge of popup should be at specified x coordinate.',
|
||||
80,
|
||||
offset.x);
|
||||
assertEquals('Top edge of popup should have been adjusted so that it ' +
|
||||
'fits inside the viewport.',
|
||||
0,
|
||||
offset.y);
|
||||
}
|
||||
|
||||
|
||||
function testOverflowBottomRightFlipBoth() {
|
||||
var pos = new goog.positioning.ViewportClientPosition(frameRect.right,
|
||||
frameRect.bottom);
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
|
||||
var offset = goog.style.getPageOffset(popup);
|
||||
assertEquals('Left edge of popup should have been adjusted so that it ' +
|
||||
'fits inside the viewport.',
|
||||
frameRect.right - popup.offsetWidth,
|
||||
offset.x);
|
||||
assertEquals('Top edge of popup should have been adjusted so that it ' +
|
||||
'fits inside the viewport.',
|
||||
frameRect.bottom - popup.offsetHeight,
|
||||
offset.y);
|
||||
}
|
||||
|
||||
|
||||
function testLastRespotOverflow() {
|
||||
var large = 2000;
|
||||
goog.style.setSize(popup, 20, large);
|
||||
popup.style.overflowY = 'auto';
|
||||
|
||||
var pos = new goog.positioning.ViewportClientPosition(0, 0);
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
|
||||
assertEquals(large, popup.offsetHeight);
|
||||
pos.setLastResortOverflow(goog.positioning.Overflow.RESIZE_HEIGHT);
|
||||
pos.reposition(popup, corner.TOP_LEFT);
|
||||
assertNotEquals(large, popup.offsetHeight);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Client positioning class.
|
||||
*
|
||||
* @author eae@google.com (Emil A Eklund)
|
||||
*/
|
||||
|
||||
goog.provide('goog.positioning.ViewportPosition');
|
||||
|
||||
goog.require('goog.math.Coordinate');
|
||||
goog.require('goog.positioning');
|
||||
goog.require('goog.positioning.AbstractPosition');
|
||||
goog.require('goog.positioning.Corner');
|
||||
goog.require('goog.style');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Encapsulates a popup position where the popup is positioned according to
|
||||
* coordinates relative to the element's viewport (page). This calculates the
|
||||
* correct position to use even if the element is relatively positioned to some
|
||||
* other element.
|
||||
*
|
||||
* @param {number|goog.math.Coordinate} arg1 Left position or coordinate.
|
||||
* @param {number=} opt_arg2 Top position.
|
||||
* @constructor
|
||||
* @extends {goog.positioning.AbstractPosition}
|
||||
*/
|
||||
goog.positioning.ViewportPosition = function(arg1, opt_arg2) {
|
||||
this.coordinate = arg1 instanceof goog.math.Coordinate ? arg1 :
|
||||
new goog.math.Coordinate(/** @type {number} */ (arg1), opt_arg2);
|
||||
};
|
||||
goog.inherits(goog.positioning.ViewportPosition,
|
||||
goog.positioning.AbstractPosition);
|
||||
|
||||
|
||||
/**
|
||||
* Repositions the popup according to the current state
|
||||
*
|
||||
* @param {Element} element The DOM element of the popup.
|
||||
* @param {goog.positioning.Corner} popupCorner The corner of the popup
|
||||
* element that that should be positioned adjacent to the anchorElement.
|
||||
* @param {goog.math.Box=} opt_margin A margin specified in pixels.
|
||||
* @param {goog.math.Size=} opt_preferredSize Preferred size of the element.
|
||||
* @override
|
||||
*/
|
||||
goog.positioning.ViewportPosition.prototype.reposition = function(
|
||||
element, popupCorner, opt_margin, opt_preferredSize) {
|
||||
goog.positioning.positionAtAnchor(
|
||||
goog.style.getClientViewportElement(element),
|
||||
goog.positioning.Corner.TOP_LEFT, element, popupCorner,
|
||||
this.coordinate, opt_margin, null, opt_preferredSize);
|
||||
};
|
||||
Reference in New Issue
Block a user