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 | 6 |
7 /** | 7 /** |
8 * True if this a Google page and not some other search provider. Used to | 8 * True if this a Google page and not some other search provider. Used to |
9 * determine whether to show the logo and fakebox. | 9 * determine whether to show the logo and fakebox. |
10 * @type {boolean} | 10 * @type {boolean} |
(...skipping 18 matching lines...) Expand all Loading... | |
29 DOMAIN: 'mv-domain', | 29 DOMAIN: 'mv-domain', |
30 FAKEBOX_ANIMATE: 'fakebox-animate', // triggers fakebox animation | 30 FAKEBOX_ANIMATE: 'fakebox-animate', // triggers fakebox animation |
31 FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox | 31 FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox |
32 FAVICON: 'mv-favicon', | 32 FAVICON: 'mv-favicon', |
33 FILLER: 'mv-filler', // filler tiles | 33 FILLER: 'mv-filler', // filler tiles |
34 GOOGLE_PAGE: 'google-page', // shows the Google logo and fakebox | 34 GOOGLE_PAGE: 'google-page', // shows the Google logo and fakebox |
35 HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation | 35 HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation |
36 HIDE_NOTIFICATION: 'mv-notice-hide', | 36 HIDE_NOTIFICATION: 'mv-notice-hide', |
37 HIDE_TILE: 'mv-tile-hide', // hides tiles on small browser width | 37 HIDE_TILE: 'mv-tile-hide', // hides tiles on small browser width |
38 PAGE: 'mv-page', // page tiles | 38 PAGE: 'mv-page', // page tiles |
39 ROW: 'mv-row', // tile row | |
39 SELECTED: 'selected', // a selected suggestion (if any) | 40 SELECTED: 'selected', // a selected suggestion (if any) |
40 THUMBNAIL: 'mv-thumb', | 41 THUMBNAIL: 'mv-thumb', |
41 TILE: 'mv-tile', | 42 TILE: 'mv-tile', |
42 TITLE: 'mv-title' | 43 TITLE: 'mv-title' |
43 }; | 44 }; |
44 | 45 |
45 /** | 46 /** |
46 * Enum for HTML element ids. | 47 * Enum for HTML element ids. |
47 * @enum {string} | 48 * @enum {string} |
48 * @const | 49 * @const |
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
114 */ | 115 */ |
115 var tiles = []; | 116 var tiles = []; |
116 | 117 |
117 /** | 118 /** |
118 * The last blacklisted tile if any, which by definition should not be filler. | 119 * The last blacklisted tile if any, which by definition should not be filler. |
119 * @type {?Tile} | 120 * @type {?Tile} |
120 */ | 121 */ |
121 var lastBlacklistedTile = null; | 122 var lastBlacklistedTile = null; |
122 | 123 |
123 /** | 124 /** |
124 * The index of the last blacklisted tile, if any. Used to determine where to | |
125 * re-insert a tile on undo. | |
126 * @type {number} | |
127 */ | |
128 var lastBlacklistedIndex = -1; | |
129 | |
130 /** | |
131 * True if a page has been blacklisted and we're waiting on the | 125 * True if a page has been blacklisted and we're waiting on the |
132 * onmostvisitedchange callback. See onMostVisitedChange() for how this | 126 * onmostvisitedchange callback. See onMostVisitedChange() for how this |
133 * is used. | 127 * is used. |
134 * @type {boolean} | 128 * @type {boolean} |
135 */ | 129 */ |
136 var isBlacklisting = false; | 130 var isBlacklisting = false; |
137 | 131 |
138 /** | 132 /** |
139 * True if a blacklist has been undone and we're waiting on the | 133 * Current number of tiles columns shown based on the window width, including |
140 * onmostvisitedchange callback. See onMostVisitedChange() for how this | 134 * those that just contain filler. |
141 * is used. | |
142 * @type {boolean} | |
143 */ | |
144 var isUndoing = false; | |
145 | |
146 /** | |
147 * Current number of tiles shown based on the window width, including filler. | |
148 * @type {number} | 135 * @type {number} |
149 */ | 136 */ |
150 var numTilesShown = 0; | 137 var numColumnsShown = 0; |
151 | 138 |
152 /** | 139 /** |
153 * The browser embeddedSearch.newTabPage object. | 140 * The browser embeddedSearch.newTabPage object. |
154 * @type {Object} | 141 * @type {Object} |
155 */ | 142 */ |
156 var ntpApiHandle; | 143 var ntpApiHandle; |
157 | 144 |
158 /** | 145 /** |
159 * Possible background-colors of a non-custom theme. Used to determine whether | 146 * Possible background-colors of a non-custom theme. Used to determine whether |
160 * the homepage should be updated to support custom or non-custom themes. | 147 * the homepage should be updated to support custom or non-custom themes. |
161 * @type {!Array.<string>} | 148 * @type {!Array.<string>} |
162 * @const | 149 * @const |
163 */ | 150 */ |
164 var WHITE = ['rgba(255,255,255,1)', 'rgba(0,0,0,0)']; | 151 var WHITE = ['rgba(255,255,255,1)', 'rgba(0,0,0,0)']; |
165 | 152 |
166 /** | 153 /** |
167 * Should be equal to mv-tile's -webkit-margin-start + width. | 154 * Should be equal to mv-tile's -webkit-margin-start + width. |
168 * @type {number} | 155 * @type {number} |
169 * @const | 156 * @const |
170 */ | 157 */ |
171 var TILE_WIDTH = 160; | 158 var TILE_WIDTH = 160; |
172 | 159 |
173 /** | 160 /** |
174 * The height of the most visited section. | 161 * The height of the most visited section. |
175 * @type {number} | 162 * @type {number} |
176 * @const | 163 * @const |
177 */ | 164 */ |
178 var MOST_VISITED_HEIGHT = 156; | 165 var MOST_VISITED_HEIGHT = 296; |
179 | 166 |
180 /** @type {number} @const */ | 167 /** @type {number} @const */ |
181 var MAX_NUM_TILES_TO_SHOW = 4; | 168 var MAX_NUM_TILES_TO_SHOW = 8; |
182 | 169 |
183 /** @type {number} @const */ | 170 /** @type {number} @const */ |
184 var MIN_NUM_TILES_TO_SHOW = 2; | 171 var MIN_NUM_COLUMNS = 2; |
172 | |
173 /** @type {number} @const */ | |
174 var MAX_NUM_COLUMNS = 4; | |
175 | |
176 /** @type {number} @const */ | |
177 var NUM_ROWS = 2; | |
185 | 178 |
186 /** | 179 /** |
187 * Minimum total padding to give to the left and right of the most visited | 180 * Minimum total padding to give to the left and right of the most visited |
188 * section. Used to determine how many tiles to show. | 181 * section. Used to determine how many tiles to show. |
189 * @type {number} | 182 * @type {number} |
190 * @const | 183 * @const |
191 */ | 184 */ |
192 var MIN_TOTAL_HORIZONTAL_PADDING = 188; | 185 var MIN_TOTAL_HORIZONTAL_PADDING = 188; |
193 | 186 |
194 /** | 187 /** |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
255 attributionImage.src = url; | 248 attributionImage.src = url; |
256 } | 249 } |
257 | 250 |
258 /** | 251 /** |
259 * Handles a new set of Most Visited page data. | 252 * Handles a new set of Most Visited page data. |
260 */ | 253 */ |
261 function onMostVisitedChange() { | 254 function onMostVisitedChange() { |
262 var pages = ntpApiHandle.mostVisited; | 255 var pages = ntpApiHandle.mostVisited; |
263 | 256 |
264 if (isBlacklisting) { | 257 if (isBlacklisting) { |
265 // If this was called as a result of a blacklist, add a new replacement | 258 // Trigger the blacklist animation and re-render the tiles when it |
266 // (possibly filler) tile at the end and trigger the blacklist animation. | 259 // completes. |
267 var replacementTile = createTile(pages[MAX_NUM_TILES_TO_SHOW - 1]); | |
268 | |
269 tiles.push(replacementTile); | |
270 tilesContainer.appendChild(replacementTile.elem); | |
271 | |
272 var lastBlacklistedTileElement = lastBlacklistedTile.elem; | 260 var lastBlacklistedTileElement = lastBlacklistedTile.elem; |
273 lastBlacklistedTileElement.addEventListener( | 261 lastBlacklistedTileElement.addEventListener( |
274 'webkitTransitionEnd', blacklistAnimationDone); | 262 'webkitTransitionEnd', blacklistAnimationDone); |
275 lastBlacklistedTileElement.classList.add(CLASSES.BLACKLIST); | 263 lastBlacklistedTileElement.classList.add(CLASSES.BLACKLIST); |
276 // In order to animate the replacement tile sliding into place, it must | |
277 // be made visible. | |
278 updateTileVisibility(numTilesShown + 1); | |
279 | 264 |
280 } else if (isUndoing) { | |
Dan Beam
2013/04/25 00:09:49
^ so what happened to this?
jeremycho
2013/04/25 00:15:04
We're getting rid of the undo animation - the new
| |
281 // If this was called as a result of an undo, re-insert the last blacklisted | |
282 // tile in its old location and trigger the undo animation. | |
283 tiles.splice( | |
284 lastBlacklistedIndex, 0, lastBlacklistedTile); | |
285 var lastBlacklistedTileElement = lastBlacklistedTile.elem; | |
286 tilesContainer.insertBefore( | |
287 lastBlacklistedTileElement, | |
288 tilesContainer.childNodes[lastBlacklistedIndex]); | |
289 lastBlacklistedTileElement.addEventListener( | |
290 'webkitTransitionEnd', undoAnimationDone); | |
291 // Force the removal to happen synchronously. | |
292 lastBlacklistedTileElement.scrollTop; | |
293 lastBlacklistedTileElement.classList.remove(CLASSES.BLACKLIST); | |
294 } else { | 265 } else { |
295 // Otherwise render the tiles using the new data without animation. | 266 // Otherwise render the tiles using the new data without animation. |
296 tiles = []; | 267 tiles = []; |
297 for (var i = 0; i < MAX_NUM_TILES_TO_SHOW; ++i) { | 268 for (var i = 0; i < MAX_NUM_TILES_TO_SHOW; ++i) { |
298 tiles.push(createTile(pages[i])); | 269 tiles.push(createTile(pages[i])); |
299 } | 270 } |
300 renderTiles(); | 271 renderTiles(); |
301 } | 272 } |
302 } | 273 } |
303 | 274 |
304 /** | 275 /** |
305 * Renders the current set of tiles without animation. | 276 * Renders the current set of tiles. |
306 */ | 277 */ |
307 function renderTiles() { | 278 function renderTiles() { |
308 removeChildren(tilesContainer); | 279 var rows = tilesContainer.children; |
309 for (var i = 0, length = tiles.length; i < length; ++i) { | 280 for (var i = 0; i < rows.length; ++i) { |
310 tilesContainer.appendChild(tiles[i].elem); | 281 removeChildren(rows[i]); |
282 } | |
283 | |
284 for (var i = 0, length = tiles.length; | |
285 i < Math.min(length, numColumnsShown * NUM_ROWS); ++i) { | |
286 rows[Math.floor(i / numColumnsShown)].appendChild(tiles[i].elem); | |
311 } | 287 } |
312 } | 288 } |
313 | 289 |
314 /** | 290 /** |
315 * Creates a Tile with the specified page data. If no data is provided, a | 291 * Creates a Tile with the specified page data. If no data is provided, a |
316 * filler Tile is created. | 292 * filler Tile is created. |
317 * @param {Object} page The page data. | 293 * @param {Object} page The page data. |
318 * @return {Tile} The new Tile. | 294 * @return {Tile} The new Tile. |
319 */ | 295 */ |
320 function createTile(page) { | 296 function createTile(page) { |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
381 tileElement.classList.add(CLASSES.FILLER); | 357 tileElement.classList.add(CLASSES.FILLER); |
382 return new Tile(tileElement); | 358 return new Tile(tileElement); |
383 } | 359 } |
384 } | 360 } |
385 | 361 |
386 /** | 362 /** |
387 * Generates a function to be called when the page with the corresponding RID | 363 * Generates a function to be called when the page with the corresponding RID |
388 * is blacklisted. | 364 * is blacklisted. |
389 * @param {number} rid The RID of the page being blacklisted. | 365 * @param {number} rid The RID of the page being blacklisted. |
390 * @return {function(Event)} A function which handles the blacklisting of the | 366 * @return {function(Event)} A function which handles the blacklisting of the |
391 * page by displaying the notification, updating state variables, and | 367 * page by updating state variables and notifying Chrome. |
392 * notifying Chrome. | |
393 */ | 368 */ |
394 function generateBlacklistFunction(rid) { | 369 function generateBlacklistFunction(rid) { |
395 return function(e) { | 370 return function(e) { |
396 // Prevent navigation when the page is being blacklisted. | 371 // Prevent navigation when the page is being blacklisted. |
397 e.stopPropagation(); | 372 e.stopPropagation(); |
398 | 373 |
399 showNotification(); | |
400 isBlacklisting = true; | 374 isBlacklisting = true; |
401 tilesContainer.classList.add(CLASSES.HIDE_BLACKLIST_BUTTON); | 375 tilesContainer.classList.add(CLASSES.HIDE_BLACKLIST_BUTTON); |
402 lastBlacklistedTile = getTileByRid(rid); | 376 lastBlacklistedTile = getTileByRid(rid); |
403 lastBlacklistedIndex = tiles.indexOf(lastBlacklistedTile); | |
404 ntpApiHandle.deleteMostVisitedItem(rid); | 377 ntpApiHandle.deleteMostVisitedItem(rid); |
405 }; | 378 }; |
406 } | 379 } |
407 | 380 |
408 /** | 381 /** |
409 * Shows the blacklist notification and triggers a delay to hide it. | 382 * Shows the blacklist notification and triggers a delay to hide it. |
410 */ | 383 */ |
411 function showNotification() { | 384 function showNotification() { |
412 notification.classList.remove(CLASSES.HIDE_NOTIFICATION); | 385 notification.classList.remove(CLASSES.HIDE_NOTIFICATION); |
413 notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION); | 386 notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION); |
414 notification.scrollTop; | 387 notification.scrollTop; |
415 notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION); | 388 notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION); |
416 } | 389 } |
417 | 390 |
418 /** | 391 /** |
419 * Hides the blacklist notification. | 392 * Hides the blacklist notification. |
420 */ | 393 */ |
421 function hideNotification() { | 394 function hideNotification() { |
422 notification.classList.add(CLASSES.HIDE_NOTIFICATION); | 395 notification.classList.add(CLASSES.HIDE_NOTIFICATION); |
423 } | 396 } |
424 | 397 |
425 /** | 398 /** |
426 * Handles the end of the blacklist animation by removing the blacklisted tile. | 399 * Handles the end of the blacklist animation by showing the notification and |
400 * re-rendering the tiles | |
427 */ | 401 */ |
428 function blacklistAnimationDone() { | 402 function blacklistAnimationDone() { |
429 tiles.splice(lastBlacklistedIndex, 1); | 403 showNotification(); |
430 removeNode(lastBlacklistedTile.elem); | |
431 updateTileVisibility(numTilesShown); | |
432 isBlacklisting = false; | 404 isBlacklisting = false; |
433 tilesContainer.classList.remove(CLASSES.HIDE_BLACKLIST_BUTTON); | 405 tilesContainer.classList.remove(CLASSES.HIDE_BLACKLIST_BUTTON); |
434 lastBlacklistedTile.elem.removeEventListener( | 406 lastBlacklistedTile.elem.removeEventListener( |
435 'webkitTransitionEnd', blacklistAnimationDone); | 407 'webkitTransitionEnd', blacklistAnimationDone); |
408 // Need to call explicitly to re-render the tiles, since the initial | |
409 // onmostvisitedchange issued by the blacklist function only triggered | |
410 // the animation. | |
411 onMostVisitedChange(); | |
436 } | 412 } |
437 | 413 |
438 /** | 414 /** |
439 * Handles a click on the notification undo link by hiding the notification and | 415 * Handles a click on the notification undo link by hiding the notification and |
440 * informing Chrome. | 416 * informing Chrome. |
441 */ | 417 */ |
442 function onUndo() { | 418 function onUndo() { |
443 hideNotification(); | 419 hideNotification(); |
444 var lastBlacklistedRID = lastBlacklistedTile.rid; | 420 var lastBlacklistedRID = lastBlacklistedTile.rid; |
445 if (typeof lastBlacklistedRID != 'undefined') { | 421 if (typeof lastBlacklistedRID != 'undefined') { |
Dan Beam
2013/04/25 00:09:49
nit: no curlies
jeremycho
2013/04/25 00:15:04
Done.
| |
446 isUndoing = true; | |
447 ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedRID); | 422 ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedRID); |
448 } | 423 } |
449 } | 424 } |
450 | 425 |
451 /** | 426 /** |
452 * Handles the end of the undo animation by removing the extraneous end tile. | |
453 */ | |
454 function undoAnimationDone() { | |
455 isUndoing = false; | |
456 tiles.splice(tiles.length - 1, 1); | |
457 removeNode(tilesContainer.lastElementChild); | |
458 updateTileVisibility(numTilesShown); | |
459 lastBlacklistedTile.elem.removeEventListener( | |
460 'webkitTransitionEnd', undoAnimationDone); | |
461 } | |
462 | |
463 /** | |
464 * Handles a click on the restore all notification link by hiding the | 427 * Handles a click on the restore all notification link by hiding the |
465 * notification and informing Chrome. | 428 * notification and informing Chrome. |
466 */ | 429 */ |
467 function onRestoreAll() { | 430 function onRestoreAll() { |
468 hideNotification(); | 431 hideNotification(); |
469 ntpApiHandle.undoAllMostVisitedDeletions(); | 432 ntpApiHandle.undoAllMostVisitedDeletions(); |
470 } | 433 } |
471 | 434 |
472 /** | 435 /** |
473 * Handles a resize by vertically centering the most visited section | 436 * Handles a resize by vertically centering the most visited section |
474 * and triggering the tile show/hide animation if necessary. | 437 * and re-rendering the tiles if the number of columns has changed. |
475 */ | 438 */ |
476 function onResize() { | 439 function onResize() { |
477 // The Google page uses a fixed layout instead. | 440 // The Google page uses a fixed layout instead. |
478 if (!isGooglePage) { | 441 if (!isGooglePage) { |
479 var clientHeight = document.documentElement.clientHeight; | 442 var clientHeight = document.documentElement.clientHeight; |
480 topMarginElement.style.marginTop = | 443 topMarginElement.style.marginTop = |
481 Math.max(0, (clientHeight - MOST_VISITED_HEIGHT) / 2) + 'px'; | 444 Math.max(0, (clientHeight - MOST_VISITED_HEIGHT) / 2) + 'px'; |
482 } | 445 } |
483 var clientWidth = document.documentElement.clientWidth; | 446 var clientWidth = document.documentElement.clientWidth; |
484 var numTilesToShow = Math.floor( | 447 var numColumnsToShow = Math.floor( |
485 (clientWidth - MIN_TOTAL_HORIZONTAL_PADDING) / TILE_WIDTH); | 448 (clientWidth - MIN_TOTAL_HORIZONTAL_PADDING) / TILE_WIDTH); |
486 numTilesToShow = Math.max(MIN_NUM_TILES_TO_SHOW, numTilesToShow); | 449 numColumnsToShow = Math.max(MIN_NUM_COLUMNS, |
487 if (numTilesToShow != numTilesShown) { | 450 Math.min(MAX_NUM_COLUMNS, numColumnsToShow)); |
488 updateTileVisibility(numTilesToShow); | 451 if (numColumnsToShow != numColumnsShown) { |
489 numTilesShown = numTilesToShow; | 452 numColumnsShown = numColumnsToShow; |
453 renderTiles(); | |
490 } | 454 } |
491 } | 455 } |
492 | 456 |
493 /** | |
494 * Triggers an animation to show the first numTilesToShow tiles and hide the | |
495 * remaining. | |
496 * @param {number} numTilesToShow The number of tiles to show. | |
497 */ | |
498 function updateTileVisibility(numTilesToShow) { | |
499 for (var i = 0, length = tiles.length; i < length; ++i) { | |
500 tiles[i].elem.classList.toggle(CLASSES.HIDE_TILE, i >= numTilesToShow); | |
501 } | |
502 } | |
503 | |
504 /** | 457 /** |
505 * Returns the tile corresponding to the specified page RID. | 458 * Returns the tile corresponding to the specified page RID. |
506 * @param {number} rid The page RID being looked up. | 459 * @param {number} rid The page RID being looked up. |
507 * @return {Tile} The corresponding tile. | 460 * @return {Tile} The corresponding tile. |
508 */ | 461 */ |
509 function getTileByRid(rid) { | 462 function getTileByRid(rid) { |
510 for (var i = 0, length = tiles.length; i < length; ++i) { | 463 for (var i = 0, length = tiles.length; i < length; ++i) { |
511 var tile = tiles[i]; | 464 var tile = tiles[i]; |
512 if (tile.rid == rid) | 465 if (tile.rid == rid) |
513 return tile; | 466 return tile; |
(...skipping 460 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
974 * theme, the most visited pages section, and Google-specific elements for a | 927 * theme, the most visited pages section, and Google-specific elements for a |
975 * Google-provided page. | 928 * Google-provided page. |
976 */ | 929 */ |
977 function init() { | 930 function init() { |
978 topMarginElement = $(IDS.TOP_MARGIN); | 931 topMarginElement = $(IDS.TOP_MARGIN); |
979 tilesContainer = $(IDS.TILES); | 932 tilesContainer = $(IDS.TILES); |
980 notification = $(IDS.NOTIFICATION); | 933 notification = $(IDS.NOTIFICATION); |
981 attribution = $(IDS.ATTRIBUTION); | 934 attribution = $(IDS.ATTRIBUTION); |
982 ntpContents = $(IDS.NTP_CONTENTS); | 935 ntpContents = $(IDS.NTP_CONTENTS); |
983 | 936 |
937 for (var i = 0; i < NUM_ROWS; i++) { | |
938 var row = document.createElement('div'); | |
939 row.classList.add(CLASSES.ROW); | |
940 tilesContainer.appendChild(row); | |
941 } | |
942 | |
984 if (isGooglePage) { | 943 if (isGooglePage) { |
985 document.body.classList.add(CLASSES.GOOGLE_PAGE); | 944 document.body.classList.add(CLASSES.GOOGLE_PAGE); |
986 var logo = document.createElement('div'); | 945 var logo = document.createElement('div'); |
987 logo.id = IDS.LOGO; | 946 logo.id = IDS.LOGO; |
988 | 947 |
989 fakebox = document.createElement('div'); | 948 fakebox = document.createElement('div'); |
990 fakebox.id = IDS.FAKEBOX; | 949 fakebox.id = IDS.FAKEBOX; |
991 fakebox.innerHTML = | 950 fakebox.innerHTML = |
992 '<input autocomplete="off" tabindex="-1" aria-hidden="true">' + | 951 '<input autocomplete="off" tabindex="-1" aria-hidden="true">' + |
993 '<div id=cursor></div>'; | 952 '<div id=cursor></div>'; |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1031 var value = searchboxApiHandle.value; | 990 var value = searchboxApiHandle.value; |
1032 if (!value) { | 991 if (!value) { |
1033 // Interpret onsubmit with an empty query as an ESC key press. | 992 // Interpret onsubmit with an empty query as an ESC key press. |
1034 clearSuggestions(); | 993 clearSuggestions(); |
1035 updateNtpVisibility(true); | 994 updateNtpVisibility(true); |
1036 } | 995 } |
1037 }; | 996 }; |
1038 | 997 |
1039 $(IDS.SUGGESTIONS_CONTAINER).dir = searchboxApiHandle.rtl ? 'rtl' : 'ltr'; | 998 $(IDS.SUGGESTIONS_CONTAINER).dir = searchboxApiHandle.rtl ? 'rtl' : 'ltr'; |
1040 | 999 |
1041 if (!document.webkitHidden) | |
1042 window.addEventListener('resize', addDelayedTransitions); | |
1043 else | |
1044 document.addEventListener('webkitvisibilitychange', addDelayedTransitions); | |
1045 | |
1046 if (fakebox) { | 1000 if (fakebox) { |
1047 // Listener for updating the fakebox focus. | 1001 // Listener for updating the fakebox focus. |
1048 document.body.onclick = function(event) { | 1002 document.body.onclick = function(event) { |
1049 if (isFakeboxClick(event)) { | 1003 if (isFakeboxClick(event)) { |
1050 document.body.classList.add(CLASSES.FAKEBOX_FOCUS); | 1004 document.body.classList.add(CLASSES.FAKEBOX_FOCUS); |
1051 searchboxApiHandle.startCapturingKeyStrokes(); | 1005 searchboxApiHandle.startCapturingKeyStrokes(); |
1052 } else { | 1006 } else { |
1053 document.body.classList.remove(CLASSES.FAKEBOX_FOCUS); | 1007 document.body.classList.remove(CLASSES.FAKEBOX_FOCUS); |
1054 searchboxApiHandle.stopCapturingKeyStrokes(); | 1008 searchboxApiHandle.stopCapturingKeyStrokes(); |
1055 } | 1009 } |
1056 }; | 1010 }; |
1057 | 1011 |
1058 // Set the cursor alignment based on language directionality. | 1012 // Set the cursor alignment based on language directionality. |
1059 $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px'; | 1013 $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px'; |
1060 } | 1014 } |
1061 } | 1015 } |
1062 | 1016 |
1063 /** | |
1064 * Applies webkit transitions to NTP elements which need to be delayed until | |
1065 * after the page is made visible and any initial resize has occurred. This is | |
1066 * to prevent animations from triggering when the NTP is shown. | |
1067 */ | |
1068 function addDelayedTransitions() { | |
1069 if (fakebox) { | |
1070 fakebox.style.webkitTransition = | |
1071 '-webkit-transform 100ms linear, width 200ms ease'; | |
1072 } | |
1073 | |
1074 tilesContainer.style.webkitTransition = 'width 200ms'; | |
1075 window.removeEventListener('resize', addDelayedTransitions); | |
1076 document.removeEventListener('webkitvisibilitychange', addDelayedTransitions); | |
1077 } | |
1078 | |
1079 document.addEventListener('DOMContentLoaded', init); | 1017 document.addEventListener('DOMContentLoaded', init); |
1080 window.addEventListener('message', handleMessage, false); | 1018 window.addEventListener('message', handleMessage, false); |
1081 })(); | 1019 })(); |
OLD | NEW |