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

Side by Side Diff: chrome/browser/resources/local_ntp/local_ntp.js

Issue 20501002: Adds paste function to searchbox api and handles paste event on fakebox (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Nits Created 7 years, 4 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
OLDNEW
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
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
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
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
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
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 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/local_ntp/local_ntp.css ('k') | chrome/browser/ui/browser_instant_controller.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698