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 | 5 |
6 /** | 6 /** |
7 * @fileoverview The local InstantExtended NTP. | 7 * @fileoverview The local InstantExtended NTP. |
8 */ | 8 */ |
9 | 9 |
10 | 10 |
11 /** | 11 /** |
12 * Controls rendering the new tab page for InstantExtended. | 12 * Controls rendering the new tab page for InstantExtended. |
13 * @return {Object} A limited interface for testing the local NTP. | 13 * @return {Object} A limited interface for testing the local NTP. |
14 */ | 14 */ |
15 function LocalNTP() { | 15 function LocalNTP() { |
16 <include src="../../../../ui/webui/resources/js/assert.js"> | 16 <include src="../../../../ui/webui/resources/js/assert.js"> |
17 <include src="local_ntp_util.js"> | 17 <include src="local_ntp_util.js"> |
18 <include src="local_ntp_design.js"> | |
Mathieu
2014/08/07 18:07:05
alphabetize includes unless they depend on each ot
huangs
2014/08/07 20:15:19
I don't know if nested <include> would work, but i
| |
18 <include src="window_disposition_util.js"> | 19 <include src="window_disposition_util.js"> |
19 | 20 |
20 | 21 |
21 /** | 22 /** |
22 * Enum for classnames. | 23 * Enum for classnames. |
23 * @enum {string} | 24 * @enum {string} |
24 * @const | 25 * @const |
25 */ | 26 */ |
26 var CLASSES = { | 27 var CLASSES = { |
27 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme | 28 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme |
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
95 | 96 |
96 /** | 97 /** |
97 * The JavaScript button event value for a middle click. | 98 * The JavaScript button event value for a middle click. |
98 * @type {number} | 99 * @type {number} |
99 * @const | 100 * @const |
100 */ | 101 */ |
101 var MIDDLE_MOUSE_BUTTON = 1; | 102 var MIDDLE_MOUSE_BUTTON = 1; |
102 | 103 |
103 | 104 |
104 /** | 105 /** |
106 * Specifications of NTP design. | |
Mathieu
2014/08/07 18:07:05
Specifications *for the NTP design.
huangs
2014/08/07 20:15:19
Done.
| |
107 * @type {NtpDesign} | |
108 * @const | |
Mathieu
2014/08/07 18:07:05
@const {NtpDesign}
huangs
2014/08/07 20:15:19
Done.
| |
109 */ | |
110 var ntpDesign; | |
Mathieu
2014/08/07 18:07:05
since it's a const should it not be NTP_DESIGN?
Mathieu
2014/08/07 18:07:05
why not call getNtpDesign(configData.ntpDesignName
huangs
2014/08/07 20:15:19
Done.
huangs
2014/08/07 20:15:19
Done.
| |
111 | |
112 | |
113 /** | |
105 * The container for the tile elements. | 114 * The container for the tile elements. |
106 * @type {Element} | 115 * @type {Element} |
107 */ | 116 */ |
108 var tilesContainer; | 117 var tilesContainer; |
109 | 118 |
110 | 119 |
111 /** | 120 /** |
112 * The notification displayed when a page is blacklisted. | 121 * The notification displayed when a page is blacklisted. |
113 * @type {Element} | 122 * @type {Element} |
114 */ | 123 */ |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
197 var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE; | 206 var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE; |
198 | 207 |
199 | 208 |
200 /** | 209 /** |
201 * The state of the NTP when a query is entered into the Fakebox. | 210 * The state of the NTP when a query is entered into the Fakebox. |
202 * @type {NTP_DISPOSE_STATE} | 211 * @type {NTP_DISPOSE_STATE} |
203 */ | 212 */ |
204 var fakeboxInputBehavior = NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO; | 213 var fakeboxInputBehavior = NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO; |
205 | 214 |
206 | 215 |
207 /** | |
208 * Total tile width. Should be equal to mv-tile's width + 2 * border-width. | |
209 * @private {number} | |
210 * @const | |
211 */ | |
212 var TILE_WIDTH = 140; | |
213 | |
214 | |
215 /** | |
216 * Margin between tiles. Should be equal to mv-tile's total horizontal margin. | |
217 * @private {number} | |
218 * @const | |
219 */ | |
220 var TILE_MARGIN = 20; | |
221 | |
222 | |
223 /** @type {number} @const */ | 216 /** @type {number} @const */ |
224 var MAX_NUM_TILES_TO_SHOW = 8; | 217 var MAX_NUM_TILES_TO_SHOW = 8; |
225 | 218 |
226 | 219 |
227 /** @type {number} @const */ | 220 /** @type {number} @const */ |
228 var MIN_NUM_COLUMNS = 2; | 221 var MIN_NUM_COLUMNS = 2; |
229 | 222 |
230 | 223 |
231 /** @type {number} @const */ | 224 /** @type {number} @const */ |
232 var MAX_NUM_COLUMNS = 4; | 225 var MAX_NUM_COLUMNS = 4; |
(...skipping 22 matching lines...) Expand all Loading... | |
255 | 248 |
256 /** | 249 /** |
257 * The filename for a most visited iframe src which shows a thumbnail image. | 250 * The filename for a most visited iframe src which shows a thumbnail image. |
258 * @type {string} | 251 * @type {string} |
259 * @const | 252 * @const |
260 */ | 253 */ |
261 var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html'; | 254 var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html'; |
262 | 255 |
263 | 256 |
264 /** | 257 /** |
265 * The hex color for most visited tile elements. | |
266 * @type {string} | |
267 * @const | |
268 */ | |
269 var MOST_VISITED_COLOR = '777777'; | |
270 | |
271 | |
272 /** | |
273 * The font family for most visited tile elements. | |
274 * @type {string} | |
275 * @const | |
276 */ | |
277 var MOST_VISITED_FONT_FAMILY = 'arial, sans-serif'; | |
278 | |
279 | |
280 /** | |
281 * The font size for most visited tile elements. | |
282 * @type {number} | |
283 * @const | |
284 */ | |
285 var MOST_VISITED_FONT_SIZE = 11; | |
286 | |
287 | |
288 /** | |
289 * Hide most visited tiles for at most this many milliseconds while painting. | 258 * Hide most visited tiles for at most this many milliseconds while painting. |
290 * @type {number} | 259 * @type {number} |
291 * @const | 260 * @const |
292 */ | 261 */ |
293 var MOST_VISITED_PAINT_TIMEOUT_MSEC = 500; | 262 var MOST_VISITED_PAINT_TIMEOUT_MSEC = 500; |
294 | 263 |
295 | 264 |
296 /** | 265 /** |
297 * A Tile is either a rendering of a Most Visited page or "filler" used to | 266 * A Tile is either a rendering of a Most Visited page or "filler" used to |
298 * pad out the section when not enough pages exist. | 267 * pad out the section when not enough pages exist. |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
363 '}' + | 332 '}' + |
364 '#mv-notice-links span {' + | 333 '#mv-notice-links span {' + |
365 ' color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' + | 334 ' color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' + |
366 '}' + | 335 '}' + |
367 '#mv-notice-x {' + | 336 '#mv-notice-x {' + |
368 ' -webkit-filter: drop-shadow(0 0 0 ' + | 337 ' -webkit-filter: drop-shadow(0 0 0 ' + |
369 convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' + | 338 convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' + |
370 '}' + | 339 '}' + |
371 '.mv-page-ready {' + | 340 '.mv-page-ready {' + |
372 ' border: 1px solid ' + | 341 ' border: 1px solid ' + |
373 convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + | 342 convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + |
374 '}' + | 343 '}' + |
375 '.mv-page-ready:hover, .mv-page-ready:focus {' + | 344 '.mv-page-ready:hover, .mv-page-ready:focus {' + |
376 ' border-color: ' + | 345 ' border-color: ' + |
377 convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' + | 346 convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' + |
378 '}'; | 347 '}'; |
379 | 348 |
380 if (customStyleElement) { | 349 if (customStyleElement) { |
381 customStyleElement.textContent = themeStyle; | 350 customStyleElement.textContent = themeStyle; |
382 } else { | 351 } else { |
383 customStyleElement = document.createElement('style'); | 352 customStyleElement = document.createElement('style'); |
(...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
553 for (var i = 0; i < numDesired; ++i) | 522 for (var i = 0; i < numDesired; ++i) |
554 tiles[i].elem.style.display = 'inline-block'; | 523 tiles[i].elem.style.display = 'inline-block'; |
555 // If |numDesired| < |numExisting| then hide extra tiles (e.g., this occurs | 524 // If |numDesired| < |numExisting| then hide extra tiles (e.g., this occurs |
556 // when window is downsized). | 525 // when window is downsized). |
557 for (; i < numExisting; ++i) | 526 for (; i < numExisting; ++i) |
558 tiles[i].elem.style.display = 'none'; | 527 tiles[i].elem.style.display = 'none'; |
559 } | 528 } |
560 | 529 |
561 | 530 |
562 /** | 531 /** |
563 * Builds a URL to display a most visited tile component in an iframe. | 532 * Builds a URL to display a most visited tile title in an iframe. |
564 * @param {string} filename The desired most visited component filename. | |
565 * @param {number} rid The restricted ID. | 533 * @param {number} rid The restricted ID. |
566 * @param {string} color The text color for text in the iframe. | |
567 * @param {string} fontFamily The font family for text in the iframe. | |
568 * @param {number} fontSize The font size for text in the iframe. | |
569 * @param {number} position The position of the iframe in the UI. | 534 * @param {number} position The position of the iframe in the UI. |
570 * @return {string} An URL to display the most visited component in an iframe. | 535 * @return {string} An URL to display the most visited title in an iframe. |
571 */ | 536 */ |
572 function getMostVisitedIframeUrl(filename, rid, color, fontFamily, fontSize, | 537 function getMostVisitedTitleIframeUrl(rid, position) { |
573 position) { | 538 var url = 'chrome-search://most-visited/' + |
574 return 'chrome-search://most-visited/' + encodeURIComponent(filename) + '?' + | 539 encodeURIComponent(MOST_VISITED_TITLE_IFRAME); |
575 ['rid=' + encodeURIComponent(rid), | 540 var params = [ |
576 'c=' + encodeURIComponent(color), | 541 'rid=' + encodeURIComponent(rid), |
577 'f=' + encodeURIComponent(fontFamily), | 542 'f=' + encodeURIComponent(ntpDesign.fontFamily), |
578 'fs=' + encodeURIComponent(fontSize), | 543 'fs=' + encodeURIComponent(ntpDesign.fontSize), |
579 'pos=' + encodeURIComponent(position)].join('&'); | 544 'c=' + encodeURIComponent(ntpDesign.titleColor), |
545 'ta=' + encodeURIComponent(ntpDesign.titleTextAlign), | |
Mathieu
2014/08/07 18:07:05
Default is center, why not make it optional simila
Mathieu
2014/08/07 18:07:05
bring to last line to follow ordering consistent w
huangs
2014/08/07 20:15:19
Done.
huangs
2014/08/07 20:15:19
Moot as 'ta' is now optional.
| |
546 'pos=' + encodeURIComponent(position)]; | |
547 if (ntpDesign.titleTextFade) | |
548 params.push('tf=' + ntpDesign.titleTextFade); | |
549 return url + '?' + params.join('&'); | |
580 } | 550 } |
581 | 551 |
582 | 552 |
553 /** | |
554 * Builds a URL to display a most visited tile thumbnail in an iframe. | |
555 * @param {number} rid The restricted ID. | |
556 * @param {number} position The position of the iframe in the UI. | |
557 * @return {string} An URL to display the most visited thumbnail in an iframe. | |
558 */ | |
559 function getMostVisitedThumbnailIframeUrl(rid, position) { | |
560 var url = 'chrome-search://most-visited/' + | |
561 encodeURIComponent(MOST_VISITED_THUMBNAIL_IFRAME); | |
562 var params = [ | |
563 'rid=' + encodeURIComponent(rid), | |
564 'f=' + encodeURIComponent(ntpDesign.fontFamily), | |
565 'fs=' + encodeURIComponent(ntpDesign.fontSize), | |
566 'c=' + encodeURIComponent(ntpDesign.thumbnailTextColor), | |
567 'pos=' + encodeURIComponent(position)]; | |
568 return url + '?' + params.join('&'); | |
569 } | |
570 | |
571 | |
583 /** | 572 /** |
584 * Creates a Tile with the specified page data. If no data is provided, a | 573 * Creates a Tile with the specified page data. If no data is provided, a |
585 * filler Tile is created. | 574 * filler Tile is created. |
586 * @param {Object} page The page data. | 575 * @param {Object} page The page data. |
587 * @param {number} position The position of the tile. | 576 * @param {number} position The position of the tile. |
588 * @return {Tile} The new Tile. | 577 * @return {Tile} The new Tile. |
589 */ | 578 */ |
590 function createTile(page, position) { | 579 function createTile(page, position) { |
591 var tileElement = document.createElement('div'); | 580 var tileElement = document.createElement('div'); |
592 tileElement.classList.add(CLASSES.TILE); | 581 tileElement.classList.add(CLASSES.TILE); |
(...skipping 29 matching lines...) Expand all Loading... | |
622 // | 611 // |
623 // Giving iframes distinct ids seems to cause some invalidation and prevent | 612 // Giving iframes distinct ids seems to cause some invalidation and prevent |
624 // associating the incorrect data. | 613 // associating the incorrect data. |
625 // | 614 // |
626 // TODO(jered): Find and fix the root (probably Blink) bug. | 615 // TODO(jered): Find and fix the root (probably Blink) bug. |
627 | 616 |
628 // Keep this ID here. See comment above. | 617 // Keep this ID here. See comment above. |
629 titleElement.id = 'title-' + rid; | 618 titleElement.id = 'title-' + rid; |
630 titleElement.className = CLASSES.TITLE; | 619 titleElement.className = CLASSES.TITLE; |
631 titleElement.hidden = true; | 620 titleElement.hidden = true; |
632 titleElement.src = getMostVisitedIframeUrl( | 621 titleElement.style.width = ntpDesign.titleWidth + 'px'; |
633 MOST_VISITED_TITLE_IFRAME, rid, MOST_VISITED_COLOR, | 622 titleElement.style.height = ntpDesign.titleHeight + 'px'; |
634 MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, position); | 623 titleElement.src = getMostVisitedTitleIframeUrl(rid, position); |
635 tileElement.appendChild(titleElement); | 624 tileElement.appendChild(titleElement); |
636 | 625 |
637 // The iframe which renders either a thumbnail or domain element. | 626 // The iframe which renders either a thumbnail or domain element. |
638 var thumbnailElement = document.createElement('iframe'); | 627 var thumbnailElement = document.createElement('iframe'); |
639 thumbnailElement.tabIndex = '-1'; | 628 thumbnailElement.tabIndex = '-1'; |
640 // Keep this ID here. See comment above. | 629 // Keep this ID here. See comment above. |
641 thumbnailElement.id = 'thumb-' + rid; | 630 thumbnailElement.id = 'thumb-' + rid; |
642 thumbnailElement.className = CLASSES.THUMBNAIL; | 631 thumbnailElement.className = CLASSES.THUMBNAIL; |
643 thumbnailElement.hidden = true; | 632 thumbnailElement.hidden = true; |
644 thumbnailElement.src = getMostVisitedIframeUrl( | 633 thumbnailElement.style.width = ntpDesign.thumbnailWidth + 'px'; |
645 MOST_VISITED_THUMBNAIL_IFRAME, rid, MOST_VISITED_COLOR, | 634 thumbnailElement.style.height = ntpDesign.thumbnailHeight + 'px'; |
646 MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, position); | 635 thumbnailElement.src = getMostVisitedThumbnailIframeUrl(rid, position); |
647 tileElement.appendChild(thumbnailElement); | 636 tileElement.appendChild(thumbnailElement); |
648 | 637 |
649 // A mask to darken the thumbnail on focus. | 638 // A mask to darken the thumbnail on focus. |
650 var maskElement = createAndAppendElement( | 639 var maskElement = createAndAppendElement( |
651 tileElement, 'div', CLASSES.THUMBNAIL_MASK); | 640 tileElement, 'div', CLASSES.THUMBNAIL_MASK); |
652 | 641 |
653 // The button used to blacklist this page. | 642 // The button used to blacklist this page. |
654 var blacklistButton = createAndAppendElement( | 643 var blacklistButton = createAndAppendElement( |
655 tileElement, 'div', CLASSES.BLACKLIST_BUTTON); | 644 tileElement, 'div', CLASSES.BLACKLIST_BUTTON); |
656 var blacklistFunction = generateBlacklistFunction(rid); | 645 var blacklistFunction = generateBlacklistFunction(rid); |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
736 ntpApiHandle.undoAllMostVisitedDeletions(); | 725 ntpApiHandle.undoAllMostVisitedDeletions(); |
737 } | 726 } |
738 | 727 |
739 | 728 |
740 /** | 729 /** |
741 * Resizes elements because the number of tile columns may need to change in | 730 * Resizes elements because the number of tile columns may need to change in |
742 * response to resizing. Also shows or hides extra tiles tiles according to the | 731 * response to resizing. Also shows or hides extra tiles tiles according to the |
743 * new width of the page. | 732 * new width of the page. |
744 */ | 733 */ |
745 function onResize() { | 734 function onResize() { |
735 var tileRequiredWidth = ntpDesign.tileWidth + ntpDesign.tileMargin; | |
746 // If innerWidth is zero, then use the maximum snap size. | 736 // If innerWidth is zero, then use the maximum snap size. |
737 var maxSnapSize = MAX_NUM_COLUMNS * tileRequiredWidth - ntpDesign.tileMargin + | |
738 MIN_TOTAL_HORIZONTAL_PADDING; | |
747 var innerWidth = window.innerWidth || 820; | 739 var innerWidth = window.innerWidth || 820; |
748 // Each tile has left and right margins that sum to TILE_MARGIN. | 740 // Each tile has left and right margins that sum to ntpDesign.tileMargin. |
749 var tileRequiredWidth = TILE_WIDTH + TILE_MARGIN; | 741 var availableWidth = innerWidth + ntpDesign.tileMargin - |
750 var availableWidth = innerWidth + TILE_MARGIN - MIN_TOTAL_HORIZONTAL_PADDING; | 742 MIN_TOTAL_HORIZONTAL_PADDING; |
751 var newNumColumns = Math.floor(availableWidth / tileRequiredWidth); | 743 var newNumColumns = Math.floor(availableWidth / tileRequiredWidth); |
752 if (newNumColumns < MIN_NUM_COLUMNS) | 744 if (newNumColumns < MIN_NUM_COLUMNS) |
753 newNumColumns = MIN_NUM_COLUMNS; | 745 newNumColumns = MIN_NUM_COLUMNS; |
754 else if (newNumColumns > MAX_NUM_COLUMNS) | 746 else if (newNumColumns > MAX_NUM_COLUMNS) |
755 newNumColumns = MAX_NUM_COLUMNS; | 747 newNumColumns = MAX_NUM_COLUMNS; |
756 | 748 |
757 if (numColumnsShown != newNumColumns) { | 749 if (numColumnsShown != newNumColumns) { |
758 numColumnsShown = newNumColumns; | 750 numColumnsShown = newNumColumns; |
759 var tilesContainerWidth = numColumnsShown * tileRequiredWidth; | 751 var tilesContainerWidth = numColumnsShown * tileRequiredWidth; |
760 tilesContainer.style.width = tilesContainerWidth + 'px'; | 752 tilesContainer.style.width = tilesContainerWidth + 'px'; |
761 if (fakebox) // -2 to account for border. | 753 if (fakebox) { |
762 fakebox.style.width = (tilesContainerWidth - TILE_MARGIN - 2) + 'px'; | 754 // -2 to account for border. |
755 fakebox.style.width = | |
756 (tilesContainerWidth - ntpDesign.tileMargin - 2) + 'px'; | |
757 } | |
763 // Render without clearing tiles. | 758 // Render without clearing tiles. |
764 renderAndShowTiles(); | 759 renderAndShowTiles(); |
765 } | 760 } |
766 } | 761 } |
767 | 762 |
768 | 763 |
769 /** | 764 /** |
770 * Returns the tile corresponding to the specified page RID. | 765 * Returns the tile corresponding to the specified page RID. |
771 * @param {number} rid The page RID being looked up. | 766 * @param {number} rid The page RID being looked up. |
772 * @return {Tile} The corresponding tile. | 767 * @return {Tile} The corresponding tile. |
(...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
927 return null; | 922 return null; |
928 } | 923 } |
929 | 924 |
930 | 925 |
931 /** | 926 /** |
932 * Prepares the New Tab Page by adding listeners, rendering the current | 927 * Prepares the New Tab Page by adding listeners, rendering the current |
933 * theme, the most visited pages section, and Google-specific elements for a | 928 * theme, the most visited pages section, and Google-specific elements for a |
934 * Google-provided page. | 929 * Google-provided page. |
935 */ | 930 */ |
936 function init() { | 931 function init() { |
932 ntpDesign = getNtpDesign(configData.ntpDesignName); | |
937 tilesContainer = $(IDS.TILES); | 933 tilesContainer = $(IDS.TILES); |
938 notification = $(IDS.NOTIFICATION); | 934 notification = $(IDS.NOTIFICATION); |
939 attribution = $(IDS.ATTRIBUTION); | 935 attribution = $(IDS.ATTRIBUTION); |
940 ntpContents = $(IDS.NTP_CONTENTS); | 936 ntpContents = $(IDS.NTP_CONTENTS); |
941 | 937 |
938 ntpDesign.classToAdd.forEach(function(v, idx) { | |
939 ntpContents.classList.add(v); | |
940 }); | |
941 | |
942 if (configData.isGooglePage) { | 942 if (configData.isGooglePage) { |
943 var logo = document.createElement('div'); | 943 var logo = document.createElement('div'); |
944 logo.id = IDS.LOGO; | 944 logo.id = IDS.LOGO; |
945 | 945 |
946 fakebox = document.createElement('div'); | 946 fakebox = document.createElement('div'); |
947 fakebox.id = IDS.FAKEBOX; | 947 fakebox.id = IDS.FAKEBOX; |
948 fakebox.innerHTML = | 948 fakebox.innerHTML = |
949 '<input id="' + IDS.FAKEBOX_INPUT + | 949 '<input id="' + IDS.FAKEBOX_INPUT + |
950 '" autocomplete="off" tabindex="-1" aria-hidden="true">' + | 950 '" autocomplete="off" tabindex="-1" aria-hidden="true">' + |
951 '<div id="cursor"></div>'; | 951 '<div id="cursor"></div>'; |
952 | 952 |
953 ntpContents.insertBefore(fakebox, ntpContents.firstChild); | 953 ntpContents.insertBefore(fakebox, ntpContents.firstChild); |
954 ntpContents.insertBefore(logo, ntpContents.firstChild); | 954 ntpContents.insertBefore(logo, ntpContents.firstChild); |
955 } else { | 955 } else { |
956 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE); | 956 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE); |
957 } | 957 } |
958 | 958 |
959 var notificationMessage = $(IDS.NOTIFICATION_MESSAGE); | 959 var notificationMessage = $(IDS.NOTIFICATION_MESSAGE); |
960 notificationMessage.textContent = | 960 notificationMessage.textContent = |
961 configData.translatedStrings.thumbnailRemovedNotification; | 961 configData.translatedStrings.thumbnailRemovedNotification; |
962 | |
962 var undoLink = $(IDS.UNDO_LINK); | 963 var undoLink = $(IDS.UNDO_LINK); |
963 undoLink.addEventListener('click', onUndo); | 964 undoLink.addEventListener('click', onUndo); |
964 registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo); | 965 registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo); |
965 undoLink.textContent = configData.translatedStrings.undoThumbnailRemove; | 966 undoLink.textContent = configData.translatedStrings.undoThumbnailRemove; |
967 | |
966 var restoreAllLink = $(IDS.RESTORE_ALL_LINK); | 968 var restoreAllLink = $(IDS.RESTORE_ALL_LINK); |
967 restoreAllLink.addEventListener('click', onRestoreAll); | 969 restoreAllLink.addEventListener('click', onRestoreAll); |
968 registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onUndo); | 970 registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onUndo); |
969 restoreAllLink.textContent = | 971 restoreAllLink.textContent = |
970 configData.translatedStrings.restoreThumbnailsShort; | 972 configData.translatedStrings.restoreThumbnailsShort; |
973 | |
971 $(IDS.ATTRIBUTION_TEXT).textContent = | 974 $(IDS.ATTRIBUTION_TEXT).textContent = |
972 configData.translatedStrings.attributionIntro; | 975 configData.translatedStrings.attributionIntro; |
973 | 976 |
974 var notificationCloseButton = $(IDS.NOTIFICATION_CLOSE_BUTTON); | 977 var notificationCloseButton = $(IDS.NOTIFICATION_CLOSE_BUTTON); |
975 notificationCloseButton.addEventListener('click', hideNotification); | 978 notificationCloseButton.addEventListener('click', hideNotification); |
976 | 979 |
977 window.addEventListener('resize', onResize); | 980 window.addEventListener('resize', onResize); |
978 onResize(); | 981 onResize(); |
979 | 982 |
980 var topLevelHandle = getEmbeddedSearchApiHandle(); | 983 var topLevelHandle = getEmbeddedSearchApiHandle(); |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1025 setFakeboxDragFocus(false); | 1028 setFakeboxDragFocus(false); |
1026 }; | 1029 }; |
1027 } | 1030 } |
1028 | 1031 |
1029 // Update the fakebox style to match the current key capturing state. | 1032 // Update the fakebox style to match the current key capturing state. |
1030 setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); | 1033 setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); |
1031 } | 1034 } |
1032 | 1035 |
1033 if (searchboxApiHandle.rtl) { | 1036 if (searchboxApiHandle.rtl) { |
1034 $(IDS.NOTIFICATION).dir = 'rtl'; | 1037 $(IDS.NOTIFICATION).dir = 'rtl'; |
1038 document.body.setAttribute('dir', 'rtl'); | |
1035 // Add class for setting alignments based on language directionality. | 1039 // Add class for setting alignments based on language directionality. |
1036 document.body.classList.add(CLASSES.RTL); | 1040 document.body.classList.add(CLASSES.RTL); |
1037 $(IDS.TILES).dir = 'rtl'; | 1041 $(IDS.TILES).dir = 'rtl'; |
1038 } | 1042 } |
1039 } | 1043 } |
1040 | 1044 |
1041 | 1045 |
1042 /** | 1046 /** |
1043 * Binds event listeners. | 1047 * Binds event listeners. |
1044 */ | 1048 */ |
1045 function listen() { | 1049 function listen() { |
1046 document.addEventListener('DOMContentLoaded', init); | 1050 document.addEventListener('DOMContentLoaded', init); |
1047 } | 1051 } |
1048 | 1052 |
1049 return { | 1053 return { |
1050 init: init, | 1054 init: init, |
1051 listen: listen | 1055 listen: listen |
1052 }; | 1056 }; |
1053 } | 1057 } |
1054 | 1058 |
1055 if (!window.localNTPUnitTest) { | 1059 if (!window.localNTPUnitTest) { |
1056 LocalNTP().listen(); | 1060 LocalNTP().listen(); |
1057 } | 1061 } |
OLD | NEW |