OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 Preferences = options.Preferences; | 6 var Preferences = options.Preferences; |
7 | 7 |
8 /** | 8 /** |
9 * A controlled setting indicator that can be placed on a setting as an | 9 * A controlled setting indicator that can be placed on a setting as an |
10 * indicator that the value is controlled by some external entity such as | 10 * indicator that the value is controlled by some external entity such as |
11 * policy or an extension. | 11 * policy or an extension. |
12 * @constructor | 12 * @constructor |
13 * @extends {HTMLSpanElement} | 13 * @extends {HTMLSpanElement} |
14 */ | 14 */ |
15 var ControlledSettingIndicator = cr.ui.define('span'); | 15 var ControlledSettingIndicator = cr.ui.define('span'); |
16 | 16 |
17 ControlledSettingIndicator.prototype = { | 17 ControlledSettingIndicator.prototype = { |
18 __proto__: HTMLSpanElement.prototype, | 18 __proto__: cr.ui.BubbleButton.prototype, |
19 | 19 |
20 /** | 20 /** |
21 * Decorates the base element to show the proper icon. | 21 * Decorates the base element to show the proper icon. |
22 */ | 22 */ |
23 decorate: function() { | 23 decorate: function() { |
24 var self = this; | 24 cr.ui.BubbleButton.prototype.decorate.call(this); |
| 25 this.classList.add('controlled-setting-indicator'); |
25 | 26 |
26 // If there is a pref, track its controlledBy and recommendedValue | 27 // If there is a pref, track its controlledBy and recommendedValue |
27 // properties in order to be able to bring up the correct bubble. | 28 // properties in order to be able to bring up the correct bubble. |
28 if (this.pref) { | 29 if (this.pref) { |
29 Preferences.getInstance().addEventListener( | 30 Preferences.getInstance().addEventListener( |
30 this.pref, this.handlePrefChange.bind(this)); | 31 this.pref, this.handlePrefChange.bind(this)); |
31 this.resetHandler = this.clearAssociatedPref_; | 32 this.resetHandler = this.clearAssociatedPref_; |
32 } | 33 } |
33 | |
34 this.className = 'controlled-setting-indicator'; | |
35 this.location = cr.ui.ArrowLocation.TOP_END; | |
36 this.image = document.createElement('div'); | |
37 this.image.tabIndex = 0; | |
38 this.image.setAttribute('role', 'button'); | |
39 this.image.addEventListener('click', this); | |
40 this.image.addEventListener('keydown', this); | |
41 this.image.addEventListener('mousedown', this); | |
42 this.appendChild(this.image); | |
43 }, | 34 }, |
44 | 35 |
45 /** | 36 /** |
46 * The given handler will be called when the user clicks on the 'reset to | 37 * The given handler will be called when the user clicks on the 'reset to |
47 * recommended value' link shown in the indicator bubble. The |this| object | 38 * recommended value' link shown in the indicator bubble. The |this| object |
48 * will be the indicator itself. | 39 * will be the indicator itself. |
49 * @param {function()} handler The handler to be called. | 40 * @param {function()} handler The handler to be called. |
50 */ | 41 */ |
51 set resetHandler(handler) { | 42 set resetHandler(handler) { |
52 this.resetHandler_ = handler; | 43 this.resetHandler_ = handler; |
53 }, | 44 }, |
54 | 45 |
55 /** | 46 /** |
56 * Whether the indicator is currently showing a bubble. | |
57 * @type {boolean} | |
58 */ | |
59 get showingBubble() { | |
60 return this.image.classList.contains('showing-bubble'); | |
61 }, | |
62 set showingBubble(showing) { | |
63 this.image.classList.toggle('showing-bubble', showing); | |
64 }, | |
65 | |
66 /** | |
67 * Clears the preference associated with this indicator. | 47 * Clears the preference associated with this indicator. |
68 * @private | 48 * @private |
69 */ | 49 */ |
70 clearAssociatedPref_: function() { | 50 clearAssociatedPref_: function() { |
71 Preferences.clearPref(this.pref, !this.dialogPref); | 51 Preferences.clearPref(this.pref, !this.dialogPref); |
72 }, | 52 }, |
73 | 53 |
74 /* Handle changes to the associated pref by hiding any currently visible | 54 /* Handle changes to the associated pref by hiding any currently visible |
75 * bubble and updating the controlledBy property. | 55 * bubble and updating the controlledBy property. |
76 * @param {Event} event Pref change event. | 56 * @param {Event} event Pref change event. |
77 */ | 57 */ |
78 handlePrefChange: function(event) { | 58 handlePrefChange: function(event) { |
79 OptionsPage.hideBubble(); | 59 OptionsPage.hideBubble(); |
80 if (event.value.controlledBy) { | 60 if (event.value.controlledBy) { |
81 this.controlledBy = | 61 this.controlledBy = |
82 !this.value || String(event.value.value) == this.value ? | 62 !this.value || String(event.value.value) == this.value ? |
83 event.value.controlledBy : null; | 63 event.value.controlledBy : null; |
84 } else if (event.value.recommendedValue != undefined) { | 64 } else if (event.value.recommendedValue != undefined) { |
85 this.controlledBy = | 65 this.controlledBy = |
86 !this.value || String(event.value.recommendedValue) == this.value ? | 66 !this.value || String(event.value.recommendedValue) == this.value ? |
87 'hasRecommendation' : null; | 67 'hasRecommendation' : null; |
88 } else { | 68 } else { |
89 this.controlledBy = null; | 69 this.controlledBy = null; |
90 } | 70 } |
91 }, | 71 }, |
92 | 72 |
93 /** | 73 /** |
94 * Handle mouse and keyboard events, allowing the user to open and close a | |
95 * bubble with further information. | |
96 * @param {Event} event Mouse or keyboard event. | |
97 */ | |
98 handleEvent: function(event) { | |
99 switch (event.type) { | |
100 // Toggle the bubble on left click. Let any other clicks propagate. | |
101 case 'click': | |
102 if (event.button != 0) | |
103 return; | |
104 break; | |
105 // Toggle the bubble when <Return> or <Space> is pressed. Let any other | |
106 // key presses propagate. | |
107 case 'keydown': | |
108 switch (event.keyCode) { | |
109 case 13: // Return. | |
110 case 32: // Space. | |
111 break; | |
112 default: | |
113 return; | |
114 } | |
115 break; | |
116 // Blur focus when a mouse button is pressed, matching the behavior of | |
117 // other Web UI elements. | |
118 case 'mousedown': | |
119 if (document.activeElement) | |
120 document.activeElement.blur(); | |
121 event.preventDefault(); | |
122 return; | |
123 } | |
124 this.toggleBubble_(); | |
125 event.preventDefault(); | |
126 event.stopPropagation(); | |
127 }, | |
128 | |
129 /** | |
130 * Open or close a bubble with further information about the pref. | 74 * Open or close a bubble with further information about the pref. |
131 * @private | 75 * @private |
132 */ | 76 */ |
133 toggleBubble_: function() { | 77 toggleBubble_: function() { |
134 if (this.showingBubble) { | 78 if (this.showingBubble) { |
135 OptionsPage.hideBubble(); | 79 OptionsPage.hideBubble(); |
136 } else { | 80 } else { |
137 var self = this; | 81 var self = this; |
138 | 82 |
139 // Construct the bubble text. | 83 // Construct the bubble text. |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
229 * @type {string} | 173 * @type {string} |
230 */ | 174 */ |
231 cr.defineProperty(ControlledSettingIndicator, 'controlledBy', | 175 cr.defineProperty(ControlledSettingIndicator, 'controlledBy', |
232 cr.PropertyKind.ATTR); | 176 cr.PropertyKind.ATTR); |
233 | 177 |
234 // Export. | 178 // Export. |
235 return { | 179 return { |
236 ControlledSettingIndicator: ControlledSettingIndicator | 180 ControlledSettingIndicator: ControlledSettingIndicator |
237 }; | 181 }; |
238 }); | 182 }); |
OLD | NEW |