| 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 cr.define('options', function() { | 5 cr.define('options', function() { |
| 6 var OptionsPage = options.OptionsPage; | 6 var OptionsPage = options.OptionsPage; |
| 7 | 7 |
| 8 /** | 8 /** |
| 9 * ManagedUserCreateConfirm class. | 9 * ManagedUserCreateConfirm class. |
| 10 * Encapsulated handling of the confirmation overlay page when creating a | 10 * Encapsulated handling of the confirmation overlay page when creating a |
| 11 * managed user. | 11 * managed user. |
| 12 * @constructor | 12 * @constructor |
| 13 * @class | 13 * @class |
| 14 */ | 14 */ |
| 15 function ManagedUserCreateConfirmOverlay() { | 15 function ManagedUserCreateConfirmOverlay() { |
| 16 OptionsPage.call(this, 'managedUserCreateConfirm', | 16 OptionsPage.call(this, 'managedUserCreateConfirm', |
| 17 '', // The title will be based on the new profile name. | 17 '', // The title will be based on the new profile name. |
| 18 'managed-user-created'); | 18 'managed-user-created'); |
| 19 }; | 19 }; |
| 20 | 20 |
| 21 cr.addSingletonGetter(ManagedUserCreateConfirmOverlay); | 21 cr.addSingletonGetter(ManagedUserCreateConfirmOverlay); |
| 22 | 22 |
| 23 ManagedUserCreateConfirmOverlay.prototype = { | 23 ManagedUserCreateConfirmOverlay.prototype = { |
| 24 // Inherit from OptionsPage. | 24 // Inherit from OptionsPage. |
| 25 __proto__: OptionsPage.prototype, | 25 __proto__: OptionsPage.prototype, |
| 26 | 26 |
| 27 // Info about the newly created profile. | 27 // Info about the newly created profile. |
| 28 profileInfo_: null, | 28 profileInfo_: null, |
| 29 | 29 |
| 30 // Current shown slide. | |
| 31 currentSlide_: 0, | |
| 32 | |
| 33 /** | 30 /** |
| 34 * Initialize the page. | 31 * Initialize the page. |
| 35 */ | 32 */ |
| 36 initializePage: function() { | 33 initializePage: function() { |
| 37 OptionsPage.prototype.initializePage.call(this); | 34 OptionsPage.prototype.initializePage.call(this); |
| 38 | 35 |
| 39 $('managed-user-created-done').onclick = function(event) { | 36 $('managed-user-created-done').onclick = function(event) { |
| 40 OptionsPage.closeOverlay(); | 37 OptionsPage.closeOverlay(); |
| 41 }; | 38 }; |
| 42 | 39 |
| 43 var self = this; | 40 var self = this; |
| 44 | 41 |
| 45 $('managed-user-created-switch').onclick = function(event) { | 42 $('managed-user-created-switch').onclick = function(event) { |
| 46 OptionsPage.closeOverlay(); | 43 OptionsPage.closeOverlay(); |
| 47 chrome.send('switchToProfile', [self.profileInfo_.filePath]); | 44 chrome.send('switchToProfile', [self.profileInfo_.filePath]); |
| 48 }; | 45 }; |
| 49 | |
| 50 // Create a small dot button for each slide in the deck and make the | |
| 51 // first button active. | |
| 52 var numberOfSlides = $('managed-user-created-slide-deck').children.length; | |
| 53 for (var i = 0; i < numberOfSlides; i++) { | |
| 54 var smallButton = document.createElement('button'); | |
| 55 $('managed-user-created-small-buttons').appendChild(smallButton); | |
| 56 smallButton.onclick = this.setCurrentSlide_.bind(this, i); | |
| 57 } | |
| 58 $('managed-user-created-small-buttons').children[0].classList.add( | |
| 59 'managed-user-created-small-button-selected'); | |
| 60 | |
| 61 // Changes the slide in |direction|, where |direction| can be 'Left' or | |
| 62 // 'Right'. Changing to the left goes back in LTR and forward in RTL and | |
| 63 // vice versa for right. | |
| 64 function changeSlide(direction) { | |
| 65 // Ignore all events we get while not visible. | |
| 66 if (!self.visible) | |
| 67 return; | |
| 68 | |
| 69 // Ignore anything other than left and right arrow press. | |
| 70 if (direction != 'Left' && direction != 'Right') | |
| 71 return; | |
| 72 | |
| 73 var container = $('managed-user-created'); | |
| 74 var rtl = getComputedStyle(container).direction == 'rtl'; | |
| 75 | |
| 76 if ((direction == 'Right' && !rtl) || (direction == 'Left' && rtl)) | |
| 77 self.setCurrentSlide_(self.currentSlide_ + 1); | |
| 78 else | |
| 79 self.setCurrentSlide_(self.currentSlide_ - 1); | |
| 80 }; | |
| 81 | |
| 82 $('managed-user-created-left-slide-arrow').onclick = | |
| 83 changeSlide.bind(undefined, 'Left'); | |
| 84 $('managed-user-created-right-slide-arrow').onclick = | |
| 85 changeSlide.bind(undefined, 'Right'); | |
| 86 | |
| 87 document.onkeydown = function(event) { | |
| 88 changeSlide(event.keyIdentifier); | |
| 89 }; | |
| 90 }, | |
| 91 | |
| 92 /** | |
| 93 * Reset to slide 1 for the next time this gets opened. | |
| 94 * @override | |
| 95 */ | |
| 96 didShowPage: function() { | |
| 97 this.setCurrentSlide_(0); | |
| 98 }, | |
| 99 | |
| 100 /** | |
| 101 * Sets the current visible slide to |slide|, where |slide| is the index | |
| 102 * and starts from 0. | |
| 103 * @param {number} slide The slide to set. | |
| 104 * @private | |
| 105 */ | |
| 106 setCurrentSlide_: function(slide) { | |
| 107 var numberOfSlides = | |
| 108 $('managed-user-created-slide-deck').children.length; | |
| 109 var newSlide = (numberOfSlides + slide) % numberOfSlides; | |
| 110 // Show the respective slide. The slide is shown by setting the | |
| 111 // appropriate negative margin on the slide deck. | |
| 112 var margin = '0'; | |
| 113 if (slide != 0) | |
| 114 margin = '-' + newSlide * 100 + '%'; | |
| 115 $('managed-user-created-slide-deck').style.webkitMarginStart = margin; | |
| 116 | |
| 117 // Update the bottom buttons. | |
| 118 $('managed-user-created-small-buttons').children[this.currentSlide_] | |
| 119 .classList.toggle('managed-user-created-small-button-selected'); | |
| 120 $('managed-user-created-small-buttons').children[newSlide] | |
| 121 .classList.toggle('managed-user-created-small-button-selected'); | |
| 122 this.currentSlide_ = newSlide; | |
| 123 }, | 46 }, |
| 124 | 47 |
| 125 /** | 48 /** |
| 126 * Sets the profile info used in the dialog and updates the profile name | 49 * Sets the profile info used in the dialog and updates the profile name |
| 127 * displayed. Called by the profile creation overlay when this overlay is | 50 * displayed. Called by the profile creation overlay when this overlay is |
| 128 * opened. | 51 * opened. |
| 129 * @param {Object} info An object of the form: | 52 * @param {Object} info An object of the form: |
| 130 * info = { | 53 * info = { |
| 131 * name: "Profile Name", | 54 * name: "Profile Name", |
| 132 * filePath: "/path/to/profile/data/on/disk" | 55 * filePath: "/path/to/profile/data/on/disk" |
| 133 * isManaged: (true|false), | 56 * isManaged: (true|false), |
| 134 * }; | 57 * }; |
| 135 * @private | 58 * @private |
| 136 */ | 59 */ |
| 137 setProfileInfo_: function(info) { | 60 setProfileInfo_: function(info) { |
| 138 this.profileInfo_ = info; | 61 this.profileInfo_ = info; |
| 139 $('managed-user-created-title').textContent = | 62 $('managed-user-created-title').textContent = |
| 140 loadTimeData.getStringF('managedUserCreateConfirmTitle', info.name); | 63 loadTimeData.getStringF('managedUserCreateConfirmTitle', info.name); |
| 64 $('managed-user-created-text').textContent = |
| 65 loadTimeData.getStringF('managedUserCreateConfirmText', |
| 66 info.name, |
| 67 info.name, |
| 68 loadTimeData.getString('custodianEmail')); |
| 141 $('managed-user-created-switch').textContent = | 69 $('managed-user-created-switch').textContent = |
| 142 loadTimeData.getStringF('managedUserCreateConfirmSwitch', info.name); | 70 loadTimeData.getStringF('managedUserCreateConfirmSwitch', info.name); |
| 143 }, | 71 }, |
| 144 }; | 72 }; |
| 145 | 73 |
| 146 // Forward public APIs to private implementations. | 74 // Forward public APIs to private implementations. |
| 147 [ | 75 [ |
| 148 'setProfileInfo', | 76 'setProfileInfo', |
| 149 ].forEach(function(name) { | 77 ].forEach(function(name) { |
| 150 ManagedUserCreateConfirmOverlay[name] = function() { | 78 ManagedUserCreateConfirmOverlay[name] = function() { |
| 151 var instance = ManagedUserCreateConfirmOverlay.getInstance(); | 79 var instance = ManagedUserCreateConfirmOverlay.getInstance(); |
| 152 return instance[name + '_'].apply(instance, arguments); | 80 return instance[name + '_'].apply(instance, arguments); |
| 153 }; | 81 }; |
| 154 }); | 82 }); |
| 155 | 83 |
| 156 // Export | 84 // Export |
| 157 return { | 85 return { |
| 158 ManagedUserCreateConfirmOverlay: ManagedUserCreateConfirmOverlay, | 86 ManagedUserCreateConfirmOverlay: ManagedUserCreateConfirmOverlay, |
| 159 }; | 87 }; |
| 160 }); | 88 }); |
| OLD | NEW |