* @param {!print_preview.ticket_item.Color} colorTicketItem Used for writing
* and reading color value.
* @constructor
- * @extends {print_preview.Component}
+ * @extends {print_preview.SettingsSection}
*/
function ColorSettings(colorTicketItem) {
- print_preview.Component.call(this);
+ print_preview.SettingsSection.call(this);
/**
* Used for reading/writing the color value.
};
ColorSettings.prototype = {
- __proto__: print_preview.Component.prototype,
+ __proto__: print_preview.SettingsSection.prototype,
+ /** @override */
+ isAvailable: function() {
+ return this.colorTicketItem_.isCapabilityAvailable();
+ },
+
+ /** @override */
+ hasCollapsibleContent: function() {
+ return false;
+ },
+
+ /** @override */
set isEnabled(isEnabled) {
- this.getChildElement('.color-option').disabled = !isEnabled;
- this.getChildElement('.bw-option').disabled = !isEnabled;
+ this.select_.disabled = !isEnabled;
},
/** @override */
enterDocument: function() {
- print_preview.Component.prototype.enterDocument.call(this);
- fadeOutOption(this.getElement(), true);
+ print_preview.SettingsSection.prototype.enterDocument.call(this);
this.tracker.add(
- this.getChildElement('.color-option'),
- 'click',
- this.colorTicketItem_.updateValue.bind(this.colorTicketItem_, true));
- this.tracker.add(
- this.getChildElement('.bw-option'),
- 'click',
- this.colorTicketItem_.updateValue.bind(this.colorTicketItem_, false));
+ this.select_, 'change', this.onSelectChange_.bind(this));
this.tracker.add(
this.colorTicketItem_,
print_preview.ticket_items.TicketItem.EventType.CHANGE,
},
/**
+ * Called when the select element is changed. Updates the print ticket
+ * color selection.
+ * @private
+ */
+ onSelectChange_: function() {
+ var select = this.select_;
+ var isColor = select.options[select.selectedIndex].value == 'color';
+ this.colorTicketItem_.updateValue(isColor);
+ },
+
+ /**
+ * @return {HTMLSelectElement} Select element containing the color options.
+ * @private
+ */
+ get select_() {
+ return this.getChildElement('.color-settings-select');
+ },
+
+ /**
* Updates state of the widget.
* @private
*/
updateState_: function() {
- var isColorCapAvailable = this.colorTicketItem_.isCapabilityAvailable();
- if (isColorCapAvailable) {
- fadeInOption(this.getElement());
- var isColorEnabled = this.colorTicketItem_.getValue();
- this.getChildElement('.color-option').checked = isColorEnabled;
- this.getChildElement('.bw-option').checked = !isColorEnabled;
- } else {
- fadeOutOption(this.getElement());
+ if (this.isAvailable()) {
+ var select = this.select_;
+ var valueToSelect = this.colorTicketItem_.getValue() ? 'color' : 'bw';
+ for (var i = 0; i < select.options.length; i++) {
+ if (select.options[i].value == valueToSelect) {
+ select.selectedIndex = i;
+ break;
+ }
+ }
}
- this.getElement().setAttribute('aria-hidden', !isColorCapAvailable);
+ this.updateUiStateInternal();
}
};