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 /** |
(...skipping 10 matching lines...) Expand all Loading... |
21 * @enum {string} | 21 * @enum {string} |
22 * @const | 22 * @const |
23 */ | 23 */ |
24 var CLASSES = { | 24 var CLASSES = { |
25 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme | 25 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme |
26 BLACKLIST: 'mv-blacklist', // triggers tile blacklist animation | 26 BLACKLIST: 'mv-blacklist', // triggers tile blacklist animation |
27 BLACKLIST_BUTTON: 'mv-x', | 27 BLACKLIST_BUTTON: 'mv-x', |
28 DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide', | 28 DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide', |
29 FAKEBOX_DISABLE: 'fakebox-disable', // Makes fakebox non-interactive | 29 FAKEBOX_DISABLE: 'fakebox-disable', // Makes fakebox non-interactive |
30 FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox | 30 FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox |
| 31 // Applies drag focus style to the fakebox |
| 32 FAKEBOX_DRAG_FOCUS: 'fakebox-drag-focused', |
31 FAVICON: 'mv-favicon', | 33 FAVICON: 'mv-favicon', |
32 HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation | 34 HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation |
33 HIDE_FAKEBOX_AND_LOGO: 'hide-fakebox-logo', | 35 HIDE_FAKEBOX_AND_LOGO: 'hide-fakebox-logo', |
34 HIDE_NOTIFICATION: 'mv-notice-hide', | 36 HIDE_NOTIFICATION: 'mv-notice-hide', |
35 // Vertically centers the most visited section for a non-Google provided page. | 37 // Vertically centers the most visited section for a non-Google provided page. |
36 NON_GOOGLE_PAGE: 'non-google-page', | 38 NON_GOOGLE_PAGE: 'non-google-page', |
37 PAGE: 'mv-page', // page tiles | 39 PAGE: 'mv-page', // page tiles |
38 PAGE_READY: 'mv-page-ready', // page tile when ready | 40 PAGE_READY: 'mv-page-ready', // page tile when ready |
39 ROW: 'mv-row', // tile row | 41 ROW: 'mv-row', // tile row |
40 RTL: 'rtl', // Right-to-left language text. | 42 RTL: 'rtl', // Right-to-left language text. |
41 THUMBNAIL: 'mv-thumb', | 43 THUMBNAIL: 'mv-thumb', |
42 THUMBNAIL_MASK: 'mv-mask', | 44 THUMBNAIL_MASK: 'mv-mask', |
43 TILE: 'mv-tile', | 45 TILE: 'mv-tile', |
44 TITLE: 'mv-title' | 46 TITLE: 'mv-title' |
45 }; | 47 }; |
46 | 48 |
47 | 49 |
48 /** | 50 /** |
49 * Enum for HTML element ids. | 51 * Enum for HTML element ids. |
50 * @enum {string} | 52 * @enum {string} |
51 * @const | 53 * @const |
52 */ | 54 */ |
53 var IDS = { | 55 var IDS = { |
54 ATTRIBUTION: 'attribution', | 56 ATTRIBUTION: 'attribution', |
55 ATTRIBUTION_TEXT: 'attribution-text', | 57 ATTRIBUTION_TEXT: 'attribution-text', |
56 CUSTOM_THEME_STYLE: 'ct-style', | 58 CUSTOM_THEME_STYLE: 'ct-style', |
57 FAKEBOX: 'fakebox', | 59 FAKEBOX: 'fakebox', |
| 60 FAKEBOX_INPUT: 'fakebox-input', |
58 LOGO: 'logo', | 61 LOGO: 'logo', |
59 NOTIFICATION: 'mv-notice', | 62 NOTIFICATION: 'mv-notice', |
60 NOTIFICATION_CLOSE_BUTTON: 'mv-notice-x', | 63 NOTIFICATION_CLOSE_BUTTON: 'mv-notice-x', |
61 NOTIFICATION_MESSAGE: 'mv-msg', | 64 NOTIFICATION_MESSAGE: 'mv-msg', |
62 NTP_CONTENTS: 'ntp-contents', | 65 NTP_CONTENTS: 'ntp-contents', |
63 RECENT_TABS: 'recent-tabs', | 66 RECENT_TABS: 'recent-tabs', |
64 RESTORE_ALL_LINK: 'mv-restore', | 67 RESTORE_ALL_LINK: 'mv-restore', |
65 TILES: 'mv-tiles', | 68 TILES: 'mv-tiles', |
66 UNDO_LINK: 'mv-undo' | 69 UNDO_LINK: 'mv-undo' |
67 }; | 70 }; |
(...skipping 695 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
763 } | 766 } |
764 | 767 |
765 | 768 |
766 /** | 769 /** |
767 * Handles new input by disposing the NTP, according to where the input was | 770 * Handles new input by disposing the NTP, according to where the input was |
768 * entered. | 771 * entered. |
769 */ | 772 */ |
770 function onInputStart() { | 773 function onInputStart() { |
771 if (fakebox && isFakeboxFocused()) { | 774 if (fakebox && isFakeboxFocused()) { |
772 setFakeboxFocus(false); | 775 setFakeboxFocus(false); |
| 776 setFakeboxDragFocus(false); |
773 disposeNtp(true); | 777 disposeNtp(true); |
774 } else if (!isFakeboxFocused()) { | 778 } else if (!isFakeboxFocused()) { |
775 disposeNtp(false); | 779 disposeNtp(false); |
776 } | 780 } |
777 } | 781 } |
778 | 782 |
779 | 783 |
780 /** | 784 /** |
781 * Disposes the NTP, according to where the input was entered. | 785 * Disposes the NTP, according to where the input was entered. |
782 * @param {boolean} wasFakeboxInput True if the input was in the fakebox. | 786 * @param {boolean} wasFakeboxInput True if the input was in the fakebox. |
(...skipping 16 matching lines...) Expand all Loading... |
799 } | 803 } |
800 | 804 |
801 | 805 |
802 /** | 806 /** |
803 * @param {boolean} focus True to focus the fakebox. | 807 * @param {boolean} focus True to focus the fakebox. |
804 */ | 808 */ |
805 function setFakeboxFocus(focus) { | 809 function setFakeboxFocus(focus) { |
806 document.body.classList.toggle(CLASSES.FAKEBOX_FOCUS, focus); | 810 document.body.classList.toggle(CLASSES.FAKEBOX_FOCUS, focus); |
807 } | 811 } |
808 | 812 |
| 813 /** |
| 814 * @param {boolean} focus True to show a dragging focus to the fakebox. |
| 815 */ |
| 816 function setFakeboxDragFocus(focus) { |
| 817 document.body.classList.toggle(CLASSES.FAKEBOX_DRAG_FOCUS, focus); |
| 818 } |
809 | 819 |
810 /** | 820 /** |
811 * @return {boolean} True if the fakebox has focus. | 821 * @return {boolean} True if the fakebox has focus. |
812 */ | 822 */ |
813 function isFakeboxFocused() { | 823 function isFakeboxFocused() { |
814 return document.body.classList.contains(CLASSES.FAKEBOX_FOCUS); | 824 return document.body.classList.contains(CLASSES.FAKEBOX_FOCUS) || |
| 825 document.body.classList.contains(CLASSES.FAKEBOX_DRAG_FOCUS); |
815 } | 826 } |
816 | 827 |
817 | 828 |
818 /** | 829 /** |
819 * @param {boolean} enable True to enable the fakebox. | 830 * @param {boolean} enable True to enable the fakebox. |
820 */ | 831 */ |
821 function setFakeboxActive(enable) { | 832 function setFakeboxActive(enable) { |
822 document.body.classList.toggle(CLASSES.FAKEBOX_DISABLE, !enable); | 833 document.body.classList.toggle(CLASSES.FAKEBOX_DISABLE, !enable); |
823 } | 834 } |
824 | 835 |
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
940 tilesContainer.appendChild(row); | 951 tilesContainer.appendChild(row); |
941 } | 952 } |
942 | 953 |
943 if (configData.isGooglePage) { | 954 if (configData.isGooglePage) { |
944 var logo = document.createElement('div'); | 955 var logo = document.createElement('div'); |
945 logo.id = IDS.LOGO; | 956 logo.id = IDS.LOGO; |
946 | 957 |
947 fakebox = document.createElement('div'); | 958 fakebox = document.createElement('div'); |
948 fakebox.id = IDS.FAKEBOX; | 959 fakebox.id = IDS.FAKEBOX; |
949 fakebox.innerHTML = | 960 fakebox.innerHTML = |
950 '<input autocomplete="off" tabindex="-1" aria-hidden="true">' + | 961 '<input id="' + IDS.FAKEBOX_INPUT + |
| 962 '" autocomplete="off" tabindex="-1" aria-hidden="true">' + |
951 '<div id=cursor></div>'; | 963 '<div id=cursor></div>'; |
952 | 964 |
953 ntpContents.insertBefore(fakebox, ntpContents.firstChild); | 965 ntpContents.insertBefore(fakebox, ntpContents.firstChild); |
954 ntpContents.insertBefore(logo, ntpContents.firstChild); | 966 ntpContents.insertBefore(logo, ntpContents.firstChild); |
955 } else { | 967 } else { |
956 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE); | 968 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE); |
957 } | 969 } |
958 | 970 |
959 var recentTabsText = configData.translatedStrings.recentTabs; | 971 var recentTabsText = configData.translatedStrings.recentTabs; |
960 if (recentTabsText) { | 972 if (recentTabsText) { |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1004 if (ntpApiHandle.isInputInProgress) | 1016 if (ntpApiHandle.isInputInProgress) |
1005 onInputStart(); | 1017 onInputStart(); |
1006 | 1018 |
1007 onThemeChange(); | 1019 onThemeChange(); |
1008 onMostVisitedChange(); | 1020 onMostVisitedChange(); |
1009 | 1021 |
1010 searchboxApiHandle = topLevelHandle.searchBox; | 1022 searchboxApiHandle = topLevelHandle.searchBox; |
1011 | 1023 |
1012 if (fakebox) { | 1024 if (fakebox) { |
1013 // Listener for updating the key capture state. | 1025 // Listener for updating the key capture state. |
1014 document.body.onclick = function(event) { | 1026 document.body.onmousedown = function(event) { |
1015 if (isFakeboxClick(event)) | 1027 if (isFakeboxClick(event)) |
1016 searchboxApiHandle.startCapturingKeyStrokes(); | 1028 searchboxApiHandle.startCapturingKeyStrokes(); |
1017 else if (isFakeboxFocused()) | 1029 else if (isFakeboxFocused()) |
1018 searchboxApiHandle.stopCapturingKeyStrokes(); | 1030 searchboxApiHandle.stopCapturingKeyStrokes(); |
1019 }; | 1031 }; |
1020 searchboxApiHandle.onkeycapturechange = function() { | 1032 searchboxApiHandle.onkeycapturechange = function() { |
1021 setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); | 1033 setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); |
1022 }; | 1034 }; |
| 1035 var inputbox = $(IDS.FAKEBOX_INPUT); |
| 1036 if (inputbox) { |
| 1037 inputbox.onpaste = function(event) { |
| 1038 event.preventDefault(); |
| 1039 searchboxApiHandle.paste(); |
| 1040 }; |
| 1041 inputbox.ondrop = function(event) { |
| 1042 event.preventDefault(); |
| 1043 var text = event.dataTransfer.getData('text/plain'); |
| 1044 if (text) { |
| 1045 searchboxApiHandle.paste(text); |
| 1046 } |
| 1047 }; |
| 1048 inputbox.ondragenter = function() { |
| 1049 setFakeboxDragFocus(true); |
| 1050 }; |
| 1051 inputbox.ondragleave = function() { |
| 1052 setFakeboxDragFocus(false); |
| 1053 }; |
| 1054 } |
1023 } | 1055 } |
1024 | 1056 |
1025 if (searchboxApiHandle.rtl) { | 1057 if (searchboxApiHandle.rtl) { |
1026 $(IDS.NOTIFICATION).dir = 'rtl'; | 1058 $(IDS.NOTIFICATION).dir = 'rtl'; |
1027 // Add class for setting alignments based on language directionality. | 1059 // Add class for setting alignments based on language directionality. |
1028 document.body.classList.add(CLASSES.RTL); | 1060 document.body.classList.add(CLASSES.RTL); |
1029 $(IDS.TILES).dir = 'rtl'; | 1061 $(IDS.TILES).dir = 'rtl'; |
1030 } | 1062 } |
1031 } | 1063 } |
1032 | 1064 |
1033 | 1065 |
1034 /** | 1066 /** |
1035 * Binds event listeners. | 1067 * Binds event listeners. |
1036 */ | 1068 */ |
1037 function listen() { | 1069 function listen() { |
1038 document.addEventListener('DOMContentLoaded', init); | 1070 document.addEventListener('DOMContentLoaded', init); |
1039 } | 1071 } |
1040 | 1072 |
1041 return { | 1073 return { |
1042 init: init, | 1074 init: init, |
1043 listen: listen | 1075 listen: listen |
1044 }; | 1076 }; |
1045 } | 1077 } |
1046 | 1078 |
1047 if (!window.localNTPUnitTest) { | 1079 if (!window.localNTPUnitTest) { |
1048 LocalNTP().listen(); | 1080 LocalNTP().listen(); |
1049 } | 1081 } |
OLD | NEW |