| 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 |