Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(97)

Side by Side Diff: chrome/browser/resources/ntp_search/position_util.js

Issue 12207138: Remove unused ntp_search. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 7 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file.
4
5 /**
6 * @fileoverview This file provides utility functions for position popups.
7 */
8
9 cr.define('cr.ui', function() {
10
11 /**
12 * Type def for rects as returned by getBoundingClientRect.
13 * @typedef { {left: number, top: number, width: number, height: number,
14 * right: number, bottom: number}}
15 */
16 var Rect;
17
18 /** @const */
19 var AnchorType = cr.ui.AnchorType;
20
21 /**
22 * @type {number}
23 * @const
24 */
25 var BOOKMARK_BAR_HEIGHT = 48;
26
27 /**
28 * Helper function for positionPopupAroundElement and positionPopupAroundRect.
29 * @param {!Rect} anchorRect The rect for the anchor.
30 * @param {!HTMLElement} popupElement The element used for the popup.
31 * @param {AnchorType} type The type of anchoring to do.
32 * @param {boolean} invertLeftRight Whether to invert the right/left
33 * alignment.
34 */
35 function positionPopupAroundRect(anchorRect, popupElement, type,
36 invertLeftRight) {
37 var popupRect = popupElement.getBoundingClientRect();
38 var availRect;
39 var ownerDoc = popupElement.ownerDocument;
40 var cs = ownerDoc.defaultView.getComputedStyle(popupElement);
41 var docElement = ownerDoc.documentElement;
42
43 if (cs.position == 'fixed') {
44 // For 'fixed' positioned popups, the available rectangle should be based
45 // on the viewport rather than the document.
46 availRect = {
47 height: docElement.clientHeight,
48 width: docElement.clientWidth,
49 top: 0,
50 bottom: docElement.clientHeight,
51 left: 0,
52 right: docElement.clientWidth
53 };
54 } else {
55 availRect = popupElement.offsetParent.getBoundingClientRect();
56 }
57
58 if (cs.direction == 'rtl')
59 invertLeftRight = !invertLeftRight;
60
61 // Flip BEFORE, AFTER based on alignment.
62 if (invertLeftRight) {
63 if (type == AnchorType.BEFORE)
64 type = AnchorType.AFTER;
65 else if (type == AnchorType.AFTER)
66 type = AnchorType.BEFORE;
67 }
68
69 // Flip type based on available size
70 switch (type) {
71 case AnchorType.BELOW:
72 // Do not flip when the type is below to avoid crbug.com/164113.
73 break;
74 case AnchorType.ABOVE:
75 if (popupRect.height > anchorRect.top &&
76 anchorRect.bottom + popupRect.height <= availRect.height) {
77 type = AnchorType.BELOW;
78 }
79 break;
80 case AnchorType.AFTER:
81 if (anchorRect.right + popupRect.width > availRect.width &&
82 popupRect.width <= anchorRect.left) {
83 type = AnchorType.BEFORE;
84 }
85 break;
86 case AnchorType.BEFORE:
87 if (popupRect.width > anchorRect.left &&
88 anchorRect.right + popupRect.width <= availRect.width) {
89 type = AnchorType.AFTER;
90 }
91 break;
92 default:
93 assert(false, 'unknown type');
94 }
95 // flipping done
96
97 var style = popupElement.style;
98 // Reset all directions.
99 style.left = style.right = style.top = style.bottom = 'auto';
100
101 // Primary direction
102 switch (type) {
103 case AnchorType.BELOW:
104 if (anchorRect.bottom + popupRect.height <= availRect.height -
105 BOOKMARK_BAR_HEIGHT) {
106 style.top = anchorRect.bottom + 'px';
107 } else {
108 style.bottom = BOOKMARK_BAR_HEIGHT + 'px';
109 }
110 break;
111 case AnchorType.ABOVE:
112 if (availRect.height - anchorRect.top >= 0)
113 style.bottom = availRect.height - anchorRect.top + 'px';
114 else
115 style.top = '0';
116 break;
117 case AnchorType.AFTER:
118 if (anchorRect.right + popupRect.width <= availRect.width)
119 style.left = anchorRect.right + 'px';
120 else
121 style.right = '0';
122 break;
123 case AnchorType.BEFORE:
124 if (availRect.width - anchorRect.left >= 0)
125 style.right = availRect.width - anchorRect.left + 'px';
126 else
127 style.left = '0';
128 break;
129 }
130
131 // Secondary direction
132 switch (type) {
133 case AnchorType.BELOW:
134 case AnchorType.ABOVE:
135 if (invertLeftRight) {
136 // align right edges
137 if (anchorRect.right - popupRect.width >= 0) {
138 style.right = availRect.width - anchorRect.right + 'px';
139
140 // align left edges
141 } else if (anchorRect.left + popupRect.width <= availRect.width) {
142 style.left = anchorRect.left + 'px';
143
144 // not enough room on either side
145 } else {
146 style.right = '0';
147 }
148 } else {
149 // align left edges
150 if (anchorRect.left + popupRect.width <= availRect.width) {
151 style.left = anchorRect.left + 'px';
152
153 // align right edges
154 } else if (anchorRect.right - popupRect.width >= 0) {
155 style.right = availRect.width - anchorRect.right + 'px';
156
157 // not enough room on either side
158 } else {
159 style.left = '0';
160 }
161 }
162 break;
163
164 case AnchorType.AFTER:
165 case AnchorType.BEFORE:
166 // align top edges
167 if (anchorRect.top + popupRect.height <= availRect.height) {
168 style.top = anchorRect.top + 'px';
169
170 // align bottom edges
171 } else if (anchorRect.bottom - popupRect.height >= 0) {
172 style.bottom = availRect.height - anchorRect.bottom + 'px';
173
174 // not enough room on either side
175 } else {
176 style.top = '0';
177 }
178 break;
179 }
180 }
181
182 /**
183 * Positions a popup element relative to an anchor element. The popup element
184 * should have position set to absolute and it should be a child of the body
185 * element.
186 * @param {!HTMLElement} anchorElement The element that the popup is anchored
187 * to.
188 * @param {!HTMLElement} popupElement The popup element we are positioning.
189 * @param {AnchorType} type The type of anchoring we want.
190 * @param {boolean} invertLeftRight Whether to invert the right/left
191 * alignment.
192 */
193 function positionPopupAroundElement(anchorElement, popupElement, type,
194 invertLeftRight) {
195 var anchorRect = anchorElement.getBoundingClientRect();
196 positionPopupAroundRect(anchorRect, popupElement, type, invertLeftRight);
197 }
198
199 /**
200 * Positions a popup around a point.
201 * @param {number} x The client x position.
202 * @param {number} y The client y position.
203 * @param {!HTMLElement} popupElement The popup element we are positioning.
204 */
205 function positionPopupAtPoint(x, y, popupElement) {
206 var rect = {
207 left: x,
208 top: y,
209 width: 0,
210 height: 0,
211 right: x,
212 bottom: y
213 };
214 positionPopupAroundRect(rect, popupElement, AnchorType.BELOW);
215 }
216
217 // Monkey patch popup positioning methods to avoid the popup being hidden
218 // by the top overlay. This is a hacky solution, but temporarily necessary
219 // until we get rid of the overlay madness.
220 // TODO(pedrosimonetti): Remove this code when deprecating the NTP5 Apps.
221 cr.ui.positionPopupAroundElement = positionPopupAroundElement;
222 cr.ui.positionPopupAtPoint = positionPopupAtPoint;
223 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp_search/new_tab_theme.css ('k') | chrome/browser/resources/ntp_search/thumbnail_page.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698