OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 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 * @fileoverview Introduces users to ChromeVox. | 6 * @fileoverview Introduces users to ChromeVox. |
7 */ | 7 */ |
8 | 8 |
9 goog.provide('Tutorial'); | 9 goog.provide('Tutorial'); |
10 | 10 |
11 goog.require('Msgs'); | 11 goog.require('Msgs'); |
12 goog.require('cvox.AbstractEarcons'); | 12 goog.require('cvox.AbstractEarcons'); |
13 | 13 |
14 /** | 14 /** |
15 * @constructor | 15 * @constructor |
16 */ | 16 */ |
17 Tutorial = function() { | 17 Tutorial = function() { |
18 /** | 18 /** |
19 * The 0-based index of the current page of the tutorial. | 19 * The 0-based index of the current page of the tutorial. |
20 * @type {number} | 20 * @type {number} |
21 * @private | 21 * @private |
22 */ | 22 */ |
23 this.page_; | 23 this.page_; |
24 | 24 |
25 this.page = sessionStorage['tutorial_page_pos'] !== undefined ? | 25 this.page = sessionStorage['tutorial_page_pos'] !== undefined ? |
26 sessionStorage['tutorial_page_pos'] : 0; | 26 sessionStorage['tutorial_page_pos'] : |
| 27 0; |
27 }; | 28 }; |
28 | 29 |
29 /** | 30 /** |
30 * @param {Node} container | 31 * @param {Node} container |
31 * @private | 32 * @private |
32 */ | 33 */ |
33 Tutorial.buildEarconPage_ = function(container) { | 34 Tutorial.buildEarconPage_ = function(container) { |
34 for (var earconId in cvox.EarconDescription) { | 35 for (var earconId in cvox.EarconDescription) { |
35 var msgid = cvox.EarconDescription[earconId]; | 36 var msgid = cvox.EarconDescription[earconId]; |
36 var earconElement = document.createElement('p'); | 37 var earconElement = document.createElement('p'); |
37 earconElement.innerText = Msgs.getMsg(msgid); | 38 earconElement.innerText = Msgs.getMsg(msgid); |
38 earconElement.setAttribute('tabindex', 0); | 39 earconElement.setAttribute('tabindex', 0); |
39 var prevEarcon; | 40 var prevEarcon; |
40 var playEarcon = function(earcon) { | 41 var playEarcon = function(earcon) { |
41 if (prevEarcon) { | 42 if (prevEarcon) { |
42 chrome.extension.getBackgroundPage()['cvox']['ChromeVox'][ | 43 chrome.extension.getBackgroundPage()['cvox']['ChromeVox']['earcons'] |
43 'earcons']['cancelEarcon'](prevEarcon); | 44 ['cancelEarcon'](prevEarcon); |
44 } | 45 } |
45 chrome.extension.getBackgroundPage()['cvox']['ChromeVox'][ | 46 chrome.extension.getBackgroundPage()['cvox']['ChromeVox']['earcons'] |
46 'earcons']['playEarcon'](earcon); | 47 ['playEarcon'](earcon); |
47 prevEarcon = earcon; | 48 prevEarcon = earcon; |
48 }.bind(this, earconId); | 49 }.bind(this, earconId); |
49 earconElement.addEventListener('focus', playEarcon, false); | 50 earconElement.addEventListener('focus', playEarcon, false); |
50 container.appendChild(earconElement); | 51 container.appendChild(earconElement); |
51 } | 52 } |
52 }; | 53 }; |
53 | 54 |
54 /** | 55 /** |
55 * Data for the ChromeVox tutorial consisting of a list of pages, | 56 * Data for the ChromeVox tutorial consisting of a list of pages, |
56 * each one of which contains a list of objects, where each object has | 57 * each one of which contains a list of objects, where each object has |
57 * a message ID for some text, and optional attributes indicating if it's | 58 * a message ID for some text, and optional attributes indicating if it's |
58 * a heading, link, text for only one platform, etc. | 59 * a heading, link, text for only one platform, etc. |
59 * | 60 * |
60 * @type Array<Array<Object>> | 61 * @type Array<Array<Object>> |
61 */ | 62 */ |
62 Tutorial.PAGES = [ | 63 Tutorial.PAGES = [ |
63 [ | 64 [ |
64 { msgid: 'tutorial_welcome_heading', heading: true }, | 65 {msgid: 'tutorial_welcome_heading', heading: true}, |
65 { msgid: 'tutorial_welcome_text' }, | 66 {msgid: 'tutorial_welcome_text'}, |
66 { msgid: 'tutorial_enter_to_advance', repeat: true }, | 67 {msgid: 'tutorial_enter_to_advance', repeat: true}, |
67 ], | 68 ], |
68 [ | 69 [ |
69 { msgid: 'tutorial_on_off_heading', heading: true }, | 70 {msgid: 'tutorial_on_off_heading', heading: true}, |
70 { msgid: 'tutorial_control' }, | 71 {msgid: 'tutorial_control'}, |
71 { msgid: 'tutorial_on_off' }, | 72 {msgid: 'tutorial_on_off'}, |
72 { msgid: 'tutorial_enter_to_advance', repeat: true }, | 73 {msgid: 'tutorial_enter_to_advance', repeat: true}, |
73 ], | 74 ], |
74 [ | 75 [ |
75 { msgid: 'tutorial_modifier_heading', heading: true }, | 76 {msgid: 'tutorial_modifier_heading', heading: true}, |
76 { msgid: 'tutorial_modifier' }, | 77 {msgid: 'tutorial_modifier'}, |
77 { msgid: 'tutorial_chromebook_search', chromebookOnly: true }, | 78 {msgid: 'tutorial_chromebook_search', chromebookOnly: true}, |
78 { msgid: 'tutorial_any_key' }, | 79 {msgid: 'tutorial_any_key'}, |
79 { msgid: 'tutorial_enter_to_advance', repeat: true }, | 80 {msgid: 'tutorial_enter_to_advance', repeat: true}, |
80 ], | 81 ], |
81 [ | 82 [ |
82 { msgid: 'tutorial_basic_navigation_heading', heading: true }, | 83 {msgid: 'tutorial_basic_navigation_heading', heading: true}, |
83 { msgid: 'tutorial_basic_navigation' }, | 84 {msgid: 'tutorial_basic_navigation'}, |
84 { msgid: 'tutorial_click_next' }, | 85 {msgid: 'tutorial_click_next'}, |
85 ], | 86 ], |
86 [ | 87 [ |
87 { msgid: 'tutorial_jump_heading', heading: true }, | 88 {msgid: 'tutorial_jump_heading', heading: true}, |
88 { msgid: 'tutorial_jump' }, | 89 {msgid: 'tutorial_jump'}, |
89 { msgid: 'tutorial_jump_second_heading', heading: true }, | 90 {msgid: 'tutorial_jump_second_heading', heading: true}, |
90 { msgid: 'tutorial_jump_wrap_heading', heading: true }, | 91 {msgid: 'tutorial_jump_wrap_heading', heading: true}, |
91 { msgid: 'tutorial_click_next' }, | 92 {msgid: 'tutorial_click_next'}, |
92 ], | 93 ], |
93 [ | 94 [ |
94 { msgid: 'tutorial_menus_heading', heading: true }, | 95 {msgid: 'tutorial_menus_heading', heading: true}, |
95 { msgid: 'tutorial_menus' }, | 96 {msgid: 'tutorial_menus'}, |
96 { msgid: 'tutorial_click_next' }, | 97 {msgid: 'tutorial_click_next'}, |
97 ], | 98 ], |
98 [ | 99 [ |
99 { msgid: 'tutorial_chrome_shortcuts_heading', heading: true }, | 100 {msgid: 'tutorial_chrome_shortcuts_heading', heading: true}, |
100 { msgid: 'tutorial_chrome_shortcuts' }, | 101 {msgid: 'tutorial_chrome_shortcuts'}, |
101 { msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true } | 102 {msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true} |
102 ], | 103 ], |
103 [ | 104 [ |
104 { msgid: 'tutorial_earcon_page_title', heading: true }, | 105 {msgid: 'tutorial_earcon_page_title', heading: true}, |
105 { msgid: 'tutorial_earcon_page_body' }, | 106 {msgid: 'tutorial_earcon_page_body'}, {custom: Tutorial.buildEarconPage_} |
106 { custom: Tutorial.buildEarconPage_ } | |
107 ], | 107 ], |
108 [ | 108 [ |
109 { msgid: 'tutorial_learn_more_heading', heading: true }, | 109 {msgid: 'tutorial_learn_more_heading', heading: true}, |
110 { msgid: 'tutorial_learn_more' }, | 110 {msgid: 'tutorial_learn_more'}, |
111 { msgid: 'next_command_reference', | 111 { |
112 link: 'http://www.chromevox.com/next_keyboard_shortcuts.html' }, | 112 msgid: 'next_command_reference', |
113 { msgid: 'chrome_keyboard_shortcuts', | 113 link: 'http://www.chromevox.com/next_keyboard_shortcuts.html' |
114 link: 'https://support.google.com/chromebook/answer/183101?hl=en' }, | 114 }, |
115 { msgid: 'touchscreen_accessibility', | 115 { |
116 link: 'https://support.google.com/chromebook/answer/6103702?hl=en' }, | 116 msgid: 'chrome_keyboard_shortcuts', |
| 117 link: 'https://support.google.com/chromebook/answer/183101?hl=en' |
| 118 }, |
| 119 { |
| 120 msgid: 'touchscreen_accessibility', |
| 121 link: 'https://support.google.com/chromebook/answer/6103702?hl=en' |
| 122 }, |
117 ], | 123 ], |
118 ]; | 124 ]; |
119 | 125 |
120 Tutorial.prototype = { | 126 Tutorial.prototype = { |
121 /** | 127 /** |
122 * Handles key down events. | 128 * Handles key down events. |
123 * @param {Event} evt | 129 * @param {Event} evt |
124 * @return {boolean} | 130 * @return {boolean} |
125 */ | 131 */ |
126 onKeyDown: function(evt) { | 132 onKeyDown: function(evt) { |
127 if (document.activeElement && | 133 if (document.activeElement && |
128 (document.activeElement.id == 'tutorial_previous' || | 134 (document.activeElement.id == 'tutorial_previous' || |
129 document.activeElement.id == 'tutorial_next')) | 135 document.activeElement.id == 'tutorial_next')) |
130 return true; | 136 return true; |
131 | 137 |
132 if (evt.key == 'Enter') | 138 if (evt.key == 'Enter') |
133 this.nextPage(); | 139 this.nextPage(); |
134 else if (evt.key == 'Backspace') | 140 else if (evt.key == 'Backspace') |
135 this.previousPage(); | 141 this.previousPage(); |
136 else | 142 else |
137 return true; | 143 return true; |
138 return false; | 144 return false; |
139 }, | 145 }, |
140 | 146 |
141 /** Open the last viewed page in the tutorial. */ | 147 /** Open the last viewed page in the tutorial. */ |
142 lastViewedPage: function() { | 148 lastViewedPage: function() { |
143 this.page = sessionStorage['tutorial_page_pos'] !== undefined ? | 149 this.page = sessionStorage['tutorial_page_pos'] !== undefined ? |
144 sessionStorage['tutorial_page_pos'] : 0; | 150 sessionStorage['tutorial_page_pos'] : |
| 151 0; |
145 if (this.page == -1) | 152 if (this.page == -1) |
146 this.page = 0; | 153 this.page = 0; |
147 this.showCurrentPage_(); | 154 this.showCurrentPage_(); |
148 }, | 155 }, |
149 | 156 |
150 /** Open the update notes page. */ | 157 /** Open the update notes page. */ |
151 updateNotes: function() { | 158 updateNotes: function() { |
152 delete sessionStorage['tutorial_page_pos']; | 159 delete sessionStorage['tutorial_page_pos']; |
153 this.page = -1; | 160 this.page = -1; |
154 this.showPage_([ | 161 this.showPage_([ |
155 { msgid: 'update_56_title', heading: true }, | 162 {msgid: 'update_56_title', heading: true}, |
156 { msgid: 'update_56_intro' }, | 163 {msgid: 'update_56_intro'}, |
157 { | 164 { |
158 list: true, | 165 list: true, |
159 items: [ | 166 items: [ |
160 {msgid: 'update_56_item_1', listItem: true}, | 167 {msgid: 'update_56_item_1', listItem: true}, |
161 {msgid: 'update_56_item_2', listItem: true}, | 168 {msgid: 'update_56_item_2', listItem: true}, |
162 {msgid: 'update_56_item_3', listItem: true}, | 169 {msgid: 'update_56_item_3', listItem: true}, |
163 ], | 170 ], |
164 }, | 171 }, |
165 { msgid: 'update_56_OUTTRO' }, | 172 {msgid: 'update_56_OUTTRO'}, |
166 ]); | 173 ]); |
167 }, | 174 }, |
168 | 175 |
169 /** Move to the next page in the tutorial. */ | 176 /** Move to the next page in the tutorial. */ |
170 nextPage: function() { | 177 nextPage: function() { |
171 if (this.page < Tutorial.PAGES.length - 1) { | 178 if (this.page < Tutorial.PAGES.length - 1) { |
172 this.page++; | 179 this.page++; |
173 this.showCurrentPage_(); | 180 this.showCurrentPage_(); |
174 } | 181 } |
175 }, | 182 }, |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
260 | 267 |
261 get page() { | 268 get page() { |
262 return this.page_; | 269 return this.page_; |
263 }, | 270 }, |
264 | 271 |
265 set page(val) { | 272 set page(val) { |
266 this.page_ = val; | 273 this.page_ = val; |
267 sessionStorage['tutorial_page_pos'] = this.page_; | 274 sessionStorage['tutorial_page_pos'] = this.page_; |
268 } | 275 } |
269 }; | 276 }; |
OLD | NEW |