OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 (function() { | 5 (function() { |
6 <include src="../../../../ui/webui/resources/js/assert.js"> | 6 <include src="../../../../ui/webui/resources/js/assert.js"> |
7 | 7 |
8 /** | 8 /** |
9 * True if this a Google page and not some other search provider. Used to | 9 * True if this a Google page and not some other search provider. Used to |
10 * determine whether to show the logo and fakebox. | 10 * determine whether to show the logo and fakebox. |
(...skipping 22 matching lines...) Expand all Loading... |
33 FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox | 33 FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox |
34 FAVICON: 'mv-favicon', | 34 FAVICON: 'mv-favicon', |
35 FILLER: 'mv-filler', // filler tiles | 35 FILLER: 'mv-filler', // filler tiles |
36 GOOGLE_PAGE: 'google-page', // shows the Google logo and fakebox | 36 GOOGLE_PAGE: 'google-page', // shows the Google logo and fakebox |
37 HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation | 37 HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation |
38 HIDE_NOTIFICATION: 'mv-notice-hide', | 38 HIDE_NOTIFICATION: 'mv-notice-hide', |
39 HIDE_TILE: 'mv-tile-hide', // hides tiles on small browser width | 39 HIDE_TILE: 'mv-tile-hide', // hides tiles on small browser width |
40 HOVERED: 'hovered', | 40 HOVERED: 'hovered', |
41 PENDING_SUGGESTIONS_CONTAINER: 'pending-suggestions-container', | 41 PENDING_SUGGESTIONS_CONTAINER: 'pending-suggestions-container', |
42 PAGE: 'mv-page', // page tiles | 42 PAGE: 'mv-page', // page tiles |
| 43 ROW: 'mv-row', // tile row |
43 SEARCH: 'search', | 44 SEARCH: 'search', |
44 SELECTED: 'selected', // a selected suggestion (if any) | 45 SELECTED: 'selected', // a selected suggestion (if any) |
45 SUGGESTION: 'suggestion', | 46 SUGGESTION: 'suggestion', |
46 SUGGESTION_CONTENTS: 'suggestion-contents', | 47 SUGGESTION_CONTENTS: 'suggestion-contents', |
47 SUGGESTIONS_BOX: 'suggestions-box', | 48 SUGGESTIONS_BOX: 'suggestions-box', |
48 THUMBNAIL: 'mv-thumb', | 49 THUMBNAIL: 'mv-thumb', |
49 TILE: 'mv-tile', | 50 TILE: 'mv-tile', |
50 TITLE: 'mv-title' | 51 TITLE: 'mv-title' |
51 }; | 52 }; |
52 | 53 |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
122 */ | 123 */ |
123 var tiles = []; | 124 var tiles = []; |
124 | 125 |
125 /** | 126 /** |
126 * The last blacklisted tile if any, which by definition should not be filler. | 127 * The last blacklisted tile if any, which by definition should not be filler. |
127 * @type {?Tile} | 128 * @type {?Tile} |
128 */ | 129 */ |
129 var lastBlacklistedTile = null; | 130 var lastBlacklistedTile = null; |
130 | 131 |
131 /** | 132 /** |
132 * The index of the last blacklisted tile, if any. Used to determine where to | |
133 * re-insert a tile on undo. | |
134 * @type {number} | |
135 */ | |
136 var lastBlacklistedIndex = -1; | |
137 | |
138 /** | |
139 * True if a page has been blacklisted and we're waiting on the | 133 * True if a page has been blacklisted and we're waiting on the |
140 * onmostvisitedchange callback. See onMostVisitedChange() for how this | 134 * onmostvisitedchange callback. See onMostVisitedChange() for how this |
141 * is used. | 135 * is used. |
142 * @type {boolean} | 136 * @type {boolean} |
143 */ | 137 */ |
144 var isBlacklisting = false; | 138 var isBlacklisting = false; |
145 | 139 |
146 /** | 140 /** |
147 * True if a blacklist has been undone and we're waiting on the | 141 * Current number of tiles columns shown based on the window width, including |
148 * onmostvisitedchange callback. See onMostVisitedChange() for how this | 142 * those that just contain filler. |
149 * is used. | |
150 * @type {boolean} | |
151 */ | |
152 var isUndoing = false; | |
153 | |
154 /** | |
155 * Current number of tiles shown based on the window width, including filler. | |
156 * @type {number} | 143 * @type {number} |
157 */ | 144 */ |
158 var numTilesShown = 0; | 145 var numColumnsShown = 0; |
159 | 146 |
160 /** | 147 /** |
161 * The browser embeddedSearch.newTabPage object. | 148 * The browser embeddedSearch.newTabPage object. |
162 * @type {Object} | 149 * @type {Object} |
163 */ | 150 */ |
164 var ntpApiHandle; | 151 var ntpApiHandle; |
165 | 152 |
166 /** | 153 /** |
167 * Possible background-colors of a non-custom theme. Used to determine whether | 154 * Possible background-colors of a non-custom theme. Used to determine whether |
168 * the homepage should be updated to support custom or non-custom themes. | 155 * the homepage should be updated to support custom or non-custom themes. |
169 * @type {!Array.<string>} | 156 * @type {!Array.<string>} |
170 * @const | 157 * @const |
171 */ | 158 */ |
172 var WHITE = ['rgba(255,255,255,1)', 'rgba(0,0,0,0)']; | 159 var WHITE = ['rgba(255,255,255,1)', 'rgba(0,0,0,0)']; |
173 | 160 |
174 /** | 161 /** |
175 * Should be equal to mv-tile's -webkit-margin-start + width. | 162 * Should be equal to mv-tile's -webkit-margin-start + width. |
176 * @type {number} | 163 * @type {number} |
177 * @const | 164 * @const |
178 */ | 165 */ |
179 var TILE_WIDTH = 160; | 166 var TILE_WIDTH = 160; |
180 | 167 |
181 /** | 168 /** |
182 * The height of the most visited section. | 169 * The height of the most visited section. |
183 * @type {number} | 170 * @type {number} |
184 * @const | 171 * @const |
185 */ | 172 */ |
186 var MOST_VISITED_HEIGHT = 156; | 173 var MOST_VISITED_HEIGHT = 296; |
187 | 174 |
188 /** @type {number} @const */ | 175 /** @type {number} @const */ |
189 var MAX_NUM_TILES_TO_SHOW = 4; | 176 var MAX_NUM_TILES_TO_SHOW = 8; |
190 | 177 |
191 /** @type {number} @const */ | 178 /** @type {number} @const */ |
192 var MIN_NUM_TILES_TO_SHOW = 2; | 179 var MIN_NUM_COLUMNS = 2; |
| 180 |
| 181 /** @type {number} @const */ |
| 182 var MAX_NUM_COLUMNS = 4; |
| 183 |
| 184 /** @type {number} @const */ |
| 185 var NUM_ROWS = 2; |
193 | 186 |
194 /** | 187 /** |
195 * Minimum total padding to give to the left and right of the most visited | 188 * Minimum total padding to give to the left and right of the most visited |
196 * section. Used to determine how many tiles to show. | 189 * section. Used to determine how many tiles to show. |
197 * @type {number} | 190 * @type {number} |
198 * @const | 191 * @const |
199 */ | 192 */ |
200 var MIN_TOTAL_HORIZONTAL_PADDING = 188; | 193 var MIN_TOTAL_HORIZONTAL_PADDING = 188; |
201 | 194 |
202 /** | 195 /** |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
263 attributionImage.src = url; | 256 attributionImage.src = url; |
264 } | 257 } |
265 | 258 |
266 /** | 259 /** |
267 * Handles a new set of Most Visited page data. | 260 * Handles a new set of Most Visited page data. |
268 */ | 261 */ |
269 function onMostVisitedChange() { | 262 function onMostVisitedChange() { |
270 var pages = ntpApiHandle.mostVisited; | 263 var pages = ntpApiHandle.mostVisited; |
271 | 264 |
272 if (isBlacklisting) { | 265 if (isBlacklisting) { |
273 // If this was called as a result of a blacklist, add a new replacement | 266 // Trigger the blacklist animation and re-render the tiles when it |
274 // (possibly filler) tile at the end and trigger the blacklist animation. | 267 // completes. |
275 var replacementTile = createTile(pages[MAX_NUM_TILES_TO_SHOW - 1]); | |
276 | |
277 tiles.push(replacementTile); | |
278 tilesContainer.appendChild(replacementTile.elem); | |
279 | |
280 var lastBlacklistedTileElement = lastBlacklistedTile.elem; | 268 var lastBlacklistedTileElement = lastBlacklistedTile.elem; |
281 lastBlacklistedTileElement.addEventListener( | 269 lastBlacklistedTileElement.addEventListener( |
282 'webkitTransitionEnd', blacklistAnimationDone); | 270 'webkitTransitionEnd', blacklistAnimationDone); |
283 lastBlacklistedTileElement.classList.add(CLASSES.BLACKLIST); | 271 lastBlacklistedTileElement.classList.add(CLASSES.BLACKLIST); |
284 // In order to animate the replacement tile sliding into place, it must | |
285 // be made visible. | |
286 updateTileVisibility(numTilesShown + 1); | |
287 | 272 |
288 } else if (isUndoing) { | |
289 // If this was called as a result of an undo, re-insert the last blacklisted | |
290 // tile in its old location and trigger the undo animation. | |
291 tiles.splice( | |
292 lastBlacklistedIndex, 0, lastBlacklistedTile); | |
293 var lastBlacklistedTileElement = lastBlacklistedTile.elem; | |
294 tilesContainer.insertBefore( | |
295 lastBlacklistedTileElement, | |
296 tilesContainer.childNodes[lastBlacklistedIndex]); | |
297 lastBlacklistedTileElement.addEventListener( | |
298 'webkitTransitionEnd', undoAnimationDone); | |
299 // Force the removal to happen synchronously. | |
300 lastBlacklistedTileElement.scrollTop; | |
301 lastBlacklistedTileElement.classList.remove(CLASSES.BLACKLIST); | |
302 } else { | 273 } else { |
303 // Otherwise render the tiles using the new data without animation. | 274 // Otherwise render the tiles using the new data without animation. |
304 tiles = []; | 275 tiles = []; |
305 for (var i = 0; i < MAX_NUM_TILES_TO_SHOW; ++i) { | 276 for (var i = 0; i < MAX_NUM_TILES_TO_SHOW; ++i) { |
306 tiles.push(createTile(pages[i])); | 277 tiles.push(createTile(pages[i])); |
307 } | 278 } |
308 renderTiles(); | 279 renderTiles(); |
309 } | 280 } |
310 } | 281 } |
311 | 282 |
312 /** | 283 /** |
313 * Renders the current set of tiles without animation. | 284 * Renders the current set of tiles. |
314 */ | 285 */ |
315 function renderTiles() { | 286 function renderTiles() { |
316 removeChildren(tilesContainer); | 287 var rows = tilesContainer.children; |
317 for (var i = 0, length = tiles.length; i < length; ++i) { | 288 for (var i = 0; i < rows.length; ++i) { |
318 tilesContainer.appendChild(tiles[i].elem); | 289 removeChildren(rows[i]); |
| 290 } |
| 291 |
| 292 for (var i = 0, length = tiles.length; |
| 293 i < Math.min(length, numColumnsShown * NUM_ROWS); ++i) { |
| 294 rows[Math.floor(i / numColumnsShown)].appendChild(tiles[i].elem); |
319 } | 295 } |
320 } | 296 } |
321 | 297 |
322 /** | 298 /** |
323 * Creates a Tile with the specified page data. If no data is provided, a | 299 * Creates a Tile with the specified page data. If no data is provided, a |
324 * filler Tile is created. | 300 * filler Tile is created. |
325 * @param {Object} page The page data. | 301 * @param {Object} page The page data. |
326 * @return {Tile} The new Tile. | 302 * @return {Tile} The new Tile. |
327 */ | 303 */ |
328 function createTile(page) { | 304 function createTile(page) { |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
389 tileElement.classList.add(CLASSES.FILLER); | 365 tileElement.classList.add(CLASSES.FILLER); |
390 return new Tile(tileElement); | 366 return new Tile(tileElement); |
391 } | 367 } |
392 } | 368 } |
393 | 369 |
394 /** | 370 /** |
395 * Generates a function to be called when the page with the corresponding RID | 371 * Generates a function to be called when the page with the corresponding RID |
396 * is blacklisted. | 372 * is blacklisted. |
397 * @param {number} rid The RID of the page being blacklisted. | 373 * @param {number} rid The RID of the page being blacklisted. |
398 * @return {function(Event)} A function which handles the blacklisting of the | 374 * @return {function(Event)} A function which handles the blacklisting of the |
399 * page by displaying the notification, updating state variables, and | 375 * page by updating state variables and notifying Chrome. |
400 * notifying Chrome. | |
401 */ | 376 */ |
402 function generateBlacklistFunction(rid) { | 377 function generateBlacklistFunction(rid) { |
403 return function(e) { | 378 return function(e) { |
404 // Prevent navigation when the page is being blacklisted. | 379 // Prevent navigation when the page is being blacklisted. |
405 e.stopPropagation(); | 380 e.stopPropagation(); |
406 | 381 |
407 showNotification(); | |
408 isBlacklisting = true; | 382 isBlacklisting = true; |
409 tilesContainer.classList.add(CLASSES.HIDE_BLACKLIST_BUTTON); | 383 tilesContainer.classList.add(CLASSES.HIDE_BLACKLIST_BUTTON); |
410 lastBlacklistedTile = getTileByRid(rid); | 384 lastBlacklistedTile = getTileByRid(rid); |
411 lastBlacklistedIndex = tiles.indexOf(lastBlacklistedTile); | |
412 ntpApiHandle.deleteMostVisitedItem(rid); | 385 ntpApiHandle.deleteMostVisitedItem(rid); |
413 }; | 386 }; |
414 } | 387 } |
415 | 388 |
416 /** | 389 /** |
417 * Shows the blacklist notification and triggers a delay to hide it. | 390 * Shows the blacklist notification and triggers a delay to hide it. |
418 */ | 391 */ |
419 function showNotification() { | 392 function showNotification() { |
420 notification.classList.remove(CLASSES.HIDE_NOTIFICATION); | 393 notification.classList.remove(CLASSES.HIDE_NOTIFICATION); |
421 notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION); | 394 notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION); |
422 notification.scrollTop; | 395 notification.scrollTop; |
423 notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION); | 396 notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION); |
424 } | 397 } |
425 | 398 |
426 /** | 399 /** |
427 * Hides the blacklist notification. | 400 * Hides the blacklist notification. |
428 */ | 401 */ |
429 function hideNotification() { | 402 function hideNotification() { |
430 notification.classList.add(CLASSES.HIDE_NOTIFICATION); | 403 notification.classList.add(CLASSES.HIDE_NOTIFICATION); |
431 } | 404 } |
432 | 405 |
433 /** | 406 /** |
434 * Handles the end of the blacklist animation by removing the blacklisted tile. | 407 * Handles the end of the blacklist animation by showing the notification and |
| 408 * re-rendering the new set of tiles. |
435 */ | 409 */ |
436 function blacklistAnimationDone() { | 410 function blacklistAnimationDone() { |
437 tiles.splice(lastBlacklistedIndex, 1); | 411 showNotification(); |
438 removeNode(lastBlacklistedTile.elem); | |
439 updateTileVisibility(numTilesShown); | |
440 isBlacklisting = false; | 412 isBlacklisting = false; |
441 tilesContainer.classList.remove(CLASSES.HIDE_BLACKLIST_BUTTON); | 413 tilesContainer.classList.remove(CLASSES.HIDE_BLACKLIST_BUTTON); |
442 lastBlacklistedTile.elem.removeEventListener( | 414 lastBlacklistedTile.elem.removeEventListener( |
443 'webkitTransitionEnd', blacklistAnimationDone); | 415 'webkitTransitionEnd', blacklistAnimationDone); |
| 416 // Need to call explicitly to re-render the tiles, since the initial |
| 417 // onmostvisitedchange issued by the blacklist function only triggered |
| 418 // the animation. |
| 419 onMostVisitedChange(); |
444 } | 420 } |
445 | 421 |
446 /** | 422 /** |
447 * Handles a click on the notification undo link by hiding the notification and | 423 * Handles a click on the notification undo link by hiding the notification and |
448 * informing Chrome. | 424 * informing Chrome. |
449 */ | 425 */ |
450 function onUndo() { | 426 function onUndo() { |
451 hideNotification(); | 427 hideNotification(); |
452 var lastBlacklistedRID = lastBlacklistedTile.rid; | 428 var lastBlacklistedRID = lastBlacklistedTile.rid; |
453 if (typeof lastBlacklistedRID != 'undefined') { | 429 if (typeof lastBlacklistedRID != 'undefined') |
454 isUndoing = true; | |
455 ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedRID); | 430 ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedRID); |
456 } | |
457 } | 431 } |
458 | 432 |
459 /** | 433 /** |
460 * Handles the end of the undo animation by removing the extraneous end tile. | |
461 */ | |
462 function undoAnimationDone() { | |
463 isUndoing = false; | |
464 tiles.splice(tiles.length - 1, 1); | |
465 removeNode(tilesContainer.lastElementChild); | |
466 updateTileVisibility(numTilesShown); | |
467 lastBlacklistedTile.elem.removeEventListener( | |
468 'webkitTransitionEnd', undoAnimationDone); | |
469 } | |
470 | |
471 /** | |
472 * Handles a click on the restore all notification link by hiding the | 434 * Handles a click on the restore all notification link by hiding the |
473 * notification and informing Chrome. | 435 * notification and informing Chrome. |
474 */ | 436 */ |
475 function onRestoreAll() { | 437 function onRestoreAll() { |
476 hideNotification(); | 438 hideNotification(); |
477 ntpApiHandle.undoAllMostVisitedDeletions(); | 439 ntpApiHandle.undoAllMostVisitedDeletions(); |
478 } | 440 } |
479 | 441 |
480 /** | 442 /** |
481 * Handles a resize by vertically centering the most visited section | 443 * Handles a resize by vertically centering the most visited section |
482 * and triggering the tile show/hide animation if necessary. | 444 * and re-rendering the tiles if the number of columns has changed. |
483 */ | 445 */ |
484 function onResize() { | 446 function onResize() { |
485 // The Google page uses a fixed layout instead. | 447 // The Google page uses a fixed layout instead. |
486 if (!isGooglePage) { | 448 if (!isGooglePage) { |
487 var clientHeight = document.documentElement.clientHeight; | 449 var clientHeight = document.documentElement.clientHeight; |
488 topMarginElement.style.marginTop = | 450 topMarginElement.style.marginTop = |
489 Math.max(0, (clientHeight - MOST_VISITED_HEIGHT) / 2) + 'px'; | 451 Math.max(0, (clientHeight - MOST_VISITED_HEIGHT) / 2) + 'px'; |
490 } | 452 } |
491 var clientWidth = document.documentElement.clientWidth; | 453 var clientWidth = document.documentElement.clientWidth; |
492 var numTilesToShow = Math.floor( | 454 var numColumnsToShow = Math.floor( |
493 (clientWidth - MIN_TOTAL_HORIZONTAL_PADDING) / TILE_WIDTH); | 455 (clientWidth - MIN_TOTAL_HORIZONTAL_PADDING) / TILE_WIDTH); |
494 numTilesToShow = Math.max(MIN_NUM_TILES_TO_SHOW, numTilesToShow); | 456 numColumnsToShow = Math.max(MIN_NUM_COLUMNS, |
495 if (numTilesToShow != numTilesShown) { | 457 Math.min(MAX_NUM_COLUMNS, numColumnsToShow)); |
496 updateTileVisibility(numTilesToShow); | 458 if (numColumnsToShow != numColumnsShown) { |
497 numTilesShown = numTilesToShow; | 459 numColumnsShown = numColumnsToShow; |
| 460 renderTiles(); |
498 } | 461 } |
499 } | 462 } |
500 | 463 |
501 /** | |
502 * Triggers an animation to show the first numTilesToShow tiles and hide the | |
503 * remaining. | |
504 * @param {number} numTilesToShow The number of tiles to show. | |
505 */ | |
506 function updateTileVisibility(numTilesToShow) { | |
507 for (var i = 0, length = tiles.length; i < length; ++i) { | |
508 tiles[i].elem.classList.toggle(CLASSES.HIDE_TILE, i >= numTilesToShow); | |
509 } | |
510 } | |
511 | |
512 /** | 464 /** |
513 * Returns the tile corresponding to the specified page RID. | 465 * Returns the tile corresponding to the specified page RID. |
514 * @param {number} rid The page RID being looked up. | 466 * @param {number} rid The page RID being looked up. |
515 * @return {Tile} The corresponding tile. | 467 * @return {Tile} The corresponding tile. |
516 */ | 468 */ |
517 function getTileByRid(rid) { | 469 function getTileByRid(rid) { |
518 for (var i = 0, length = tiles.length; i < length; ++i) { | 470 for (var i = 0, length = tiles.length; i < length; ++i) { |
519 var tile = tiles[i]; | 471 var tile = tiles[i]; |
520 if (tile.rid == rid) | 472 if (tile.rid == rid) |
521 return tile; | 473 return tile; |
(...skipping 871 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1393 */ | 1345 */ |
1394 function init() { | 1346 function init() { |
1395 iframePool = new IframePool(); | 1347 iframePool = new IframePool(); |
1396 iframePool.init(); | 1348 iframePool.init(); |
1397 topMarginElement = $(IDS.TOP_MARGIN); | 1349 topMarginElement = $(IDS.TOP_MARGIN); |
1398 tilesContainer = $(IDS.TILES); | 1350 tilesContainer = $(IDS.TILES); |
1399 notification = $(IDS.NOTIFICATION); | 1351 notification = $(IDS.NOTIFICATION); |
1400 attribution = $(IDS.ATTRIBUTION); | 1352 attribution = $(IDS.ATTRIBUTION); |
1401 ntpContents = $(IDS.NTP_CONTENTS); | 1353 ntpContents = $(IDS.NTP_CONTENTS); |
1402 | 1354 |
| 1355 for (var i = 0; i < NUM_ROWS; i++) { |
| 1356 var row = document.createElement('div'); |
| 1357 row.classList.add(CLASSES.ROW); |
| 1358 tilesContainer.appendChild(row); |
| 1359 } |
| 1360 |
1403 if (isGooglePage) { | 1361 if (isGooglePage) { |
1404 document.body.classList.add(CLASSES.GOOGLE_PAGE); | 1362 document.body.classList.add(CLASSES.GOOGLE_PAGE); |
1405 var logo = document.createElement('div'); | 1363 var logo = document.createElement('div'); |
1406 logo.id = IDS.LOGO; | 1364 logo.id = IDS.LOGO; |
1407 | 1365 |
1408 fakebox = document.createElement('div'); | 1366 fakebox = document.createElement('div'); |
1409 fakebox.id = IDS.FAKEBOX; | 1367 fakebox.id = IDS.FAKEBOX; |
1410 fakebox.innerHTML = | 1368 fakebox.innerHTML = |
1411 '<input autocomplete="off" tabindex="-1" aria-hidden="true">' + | 1369 '<input autocomplete="off" tabindex="-1" aria-hidden="true">' + |
1412 '<div id=cursor></div>'; | 1370 '<div id=cursor></div>'; |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1452 // Interpret onsubmit with an empty query as an ESC key press. | 1410 // Interpret onsubmit with an empty query as an ESC key press. |
1453 hideActiveSuggestions(); | 1411 hideActiveSuggestions(); |
1454 updateNtpVisibility(true); | 1412 updateNtpVisibility(true); |
1455 } | 1413 } |
1456 }; | 1414 }; |
1457 $qs('.' + CLASSES.ACTIVE_SUGGESTIONS_CONTAINER).dir = | 1415 $qs('.' + CLASSES.ACTIVE_SUGGESTIONS_CONTAINER).dir = |
1458 searchboxApiHandle.rtl ? 'rtl' : 'ltr'; | 1416 searchboxApiHandle.rtl ? 'rtl' : 'ltr'; |
1459 $qs('.' + CLASSES.PENDING_SUGGESTIONS_CONTAINER).dir = | 1417 $qs('.' + CLASSES.PENDING_SUGGESTIONS_CONTAINER).dir = |
1460 searchboxApiHandle.rtl ? 'rtl' : 'ltr'; | 1418 searchboxApiHandle.rtl ? 'rtl' : 'ltr'; |
1461 | 1419 |
1462 if (!document.webkitHidden) | |
1463 window.addEventListener('resize', addDelayedTransitions); | |
1464 else | |
1465 document.addEventListener('webkitvisibilitychange', addDelayedTransitions); | |
1466 | |
1467 if (fakebox) { | 1420 if (fakebox) { |
1468 // Listener for updating the fakebox focus. | 1421 // Listener for updating the fakebox focus. |
1469 document.body.onclick = function(event) { | 1422 document.body.onclick = function(event) { |
1470 if (isFakeboxClick(event)) { | 1423 if (isFakeboxClick(event)) { |
1471 document.body.classList.add(CLASSES.FAKEBOX_FOCUS); | 1424 document.body.classList.add(CLASSES.FAKEBOX_FOCUS); |
1472 searchboxApiHandle.startCapturingKeyStrokes(); | 1425 searchboxApiHandle.startCapturingKeyStrokes(); |
1473 } else { | 1426 } else { |
1474 document.body.classList.remove(CLASSES.FAKEBOX_FOCUS); | 1427 document.body.classList.remove(CLASSES.FAKEBOX_FOCUS); |
1475 searchboxApiHandle.stopCapturingKeyStrokes(); | 1428 searchboxApiHandle.stopCapturingKeyStrokes(); |
1476 } | 1429 } |
1477 }; | 1430 }; |
1478 | 1431 |
1479 // Set the cursor alignment based on language directionality. | 1432 // Set the cursor alignment based on language directionality. |
1480 $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px'; | 1433 $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px'; |
1481 } | 1434 } |
1482 } | 1435 } |
1483 | 1436 |
1484 /** | |
1485 * Applies webkit transitions to NTP elements which need to be delayed until | |
1486 * after the page is made visible and any initial resize has occurred. This is | |
1487 * to prevent animations from triggering when the NTP is shown. | |
1488 */ | |
1489 function addDelayedTransitions() { | |
1490 if (fakebox) { | |
1491 fakebox.style.webkitTransition = | |
1492 '-webkit-transform 100ms linear, width 200ms ease'; | |
1493 } | |
1494 | |
1495 tilesContainer.style.webkitTransition = 'width 200ms'; | |
1496 window.removeEventListener('resize', addDelayedTransitions); | |
1497 document.removeEventListener('webkitvisibilitychange', addDelayedTransitions); | |
1498 } | |
1499 | |
1500 document.addEventListener('DOMContentLoaded', init); | 1437 document.addEventListener('DOMContentLoaded', init); |
1501 window.addEventListener('message', handleMessage, false); | 1438 window.addEventListener('message', handleMessage, false); |
1502 window.addEventListener('blur', function() { | 1439 window.addEventListener('blur', function() { |
1503 if (activeBox) | 1440 if (activeBox) |
1504 activeBox.clearHover(); | 1441 activeBox.clearHover(); |
1505 }, false); | 1442 }, false); |
1506 })(); | 1443 })(); |
OLD | NEW |