Ext.namespace('Zarafa.mail.settings'); /** * @class Zarafa.mail.settings.SettingsComposeWidget * @extends Zarafa.settings.ui.SettingsWidget * @xtype zarafa.settingscomposewidget * * The {@link Zarafa.settings.ui.SettingsWidget widget} for configuring * the composing mail options in the {@link Zarafa.mail.settings.SettingsMailCategory mail category}. */ Zarafa.mail.settings.SettingsComposeWidget = Ext.extend(Zarafa.settings.ui.SettingsWidget, { /** * @constructor * @param {Object} config Configuration object */ constructor : function(config) { config = config || {}; var composerStore = { xtype : 'jsonstore', autoDestroy : true, fields : ['name', 'value'], data : [{ 'name' : _('HTML'), 'value' : 'html' },{ 'name' : _('Plain Text'), 'value' : 'plain' }] }; var fontFamilies = Zarafa.common.ui.htmleditor.Fonts.getFontFamilies(); var fontData = fontFamilies.split(";").map(function(font) { return { 'name' : font.split("=")[0], 'value' : font.split("=")[1].toLowerCase() }; }); var fontStore = { xtype : 'jsonstore', autoDestroy : true, fields : ['name', 'value'], data : fontData }; var fontSizes = Zarafa.common.ui.htmleditor.Fonts.getFonts(); // To understand the sorting of the keys, please read the // comment in Zarafa.common.ui.htmleditor.Fonts.getFonts var fontSizesKeys = Object.keys(fontSizes).sort(); var fontSizeData = []; Ext.each(fontSizesKeys, function(key){ fontSizeData.push({'name' : fontSizes[key] + 'pt', 'value' : key }); }); var fontSizeStore = { xtype : 'jsonstore', autoDestroy : true, fields : ['name', 'value'], data : fontSizeData }; Ext.applyIf(config, { title : _('Compose mail settings'), layout : 'form', items : [{ xtype : 'combo', name : 'zarafa/v1/contexts/mail/dialogs/mailcreate/use_html_editor', ref : 'composerCombo', fieldLabel : _('Compose mail in this format'), width : 200, store : composerStore, mode: 'local', triggerAction: 'all', displayField: 'name', valueField: 'value', lazyInit: false, forceSelection: true, editable: false, autoSelect: true, listeners : { select : this.onComposerSelect, scope : this } },{ xtype : 'combo', name : 'zarafa/v1/main/default_font', cls:'x-font-select', fieldLabel : _('Default font'), width : 200, ref : 'fontCombo', store : fontStore, triggerAction : 'all', mode : 'local', displayField : 'name', valueField : 'value', editable : false, autoSelect : true, forceSelection : true, lazyInit : false, listeners : { select : this.onFontSelect, scope : this } },{ xtype : 'combo', name : 'zarafa/v1/main/default_font_size', cls:'x-font-select', fieldLabel : _('Default font size'), width : 200, ref : 'fontSizeCombo', store : fontSizeStore, triggerAction : 'all', mode : 'local', displayField : 'name', valueField : 'value', editable : false, autoSelect : true, forceSelection : true, lazyInit : false, listeners : { select : this.onFontSelect, scope : this } },{ xtype : 'checkbox', name : 'zarafa/v1/contexts/mail/always_request_readreceipt', ref : 'readBox', boxLabel : _('Always request a read receipt'), hideLabel : true, listeners : { check : this.onFieldChange, scope : this } },{ xtype: 'zarafa.compositefield', plugins: [ 'zarafa.splitfieldlabeler' ], // # TRANSLATORS: The {A} _must_ always be at the start of the translation // # The '{B}' represents the number of minutes which the user will type in. fieldLabel: _('{A}AutoSave unsent mail every {B} minute(s)'), labelWidth: 250, combineErrors: false, items: [{ xtype : 'checkbox', labelSplitter: '{A}', name : 'zarafa/v1/contexts/mail/autosave_enable', ref : '../autoSaveBox', boxLabel : '', hideLabel : true, checked : true, listeners : { check : this.onAutoSaveCheckBoxChange, change : this.onFieldChange, scope : this } },{ xtype: 'zarafa.spinnerfield', labelSplitter: '{B}', vtype: 'naturalInteger', name : 'zarafa/v1/contexts/mail/autosave_time', ref : '../autoSaveTimeSpinner', incrementValue: 1, defaultValue: 1, minValue : 1, allowBlank: false, allowDecimals: false, allowNegative: false, listeners: { change: this.onFieldChange, scope: this }, plugins: ['zarafa.numberspinner'] }] }] }); Zarafa.mail.settings.SettingsComposeWidget.superclass.constructor.call(this, config); }, /** * Called by the {@link Zarafa.settings.ui.SettingsCategory Category} when * it has been called with {@link zarafa.settings.ui.SettingsCategory#update}. * This is used to load the latest version of the settings from the * {@link Zarafa.settings.SettingsModel} into the UI of this category. * @param {Zarafa.settings.SettingsModel} settingsModel The settings to load */ update : function(settingsModel) { this.model = settingsModel; // If not defined, we have a fallback setting var useHtml = settingsModel.get(this.composerCombo.name); this.composerCombo.setValue(useHtml ? 'html' : 'plain'); this.fontCombo.setValue(settingsModel.get(this.fontCombo.name)); this.fontSizeCombo.setValue(settingsModel.get(this.fontSizeCombo.name)); // disable font and font size combos for plain text compose option this.fontCombo.setDisabled(useHtml !== true); this.fontSizeCombo.setDisabled(useHtml !== true); this.readBox.setValue(settingsModel.get(this.readBox.name)); // Set values in autoSave checkbox and textfield. var enabled = settingsModel.get(this.autoSaveBox.name); this.autoSaveBox.setValue(enabled); this.autoSaveTimeSpinner.setValue(settingsModel.get(this.autoSaveTimeSpinner.name) / 60); }, /** * Called by the {@link Zarafa.settings.ui.SettingsCategory Category} when * it has been called with {@link zarafa.settings.ui.SettingsCategory#updateSettings}. * This is used to update the settings from the UI into the {@link Zarafa.settings.SettingsModel settings model}. * @param {Zarafa.settings.SettingsModel} settingsModel The settings to update */ updateSettings : function(settingsModel) { var spinnerValue = this.autoSaveTimeSpinner.getValue(); if(spinnerValue === 0 || !Ext.isDefined(spinnerValue)) { spinnerValue = settingsModel.get('zarafa/v1/contexts/mail/autosave_time', false, true); } else { spinnerValue = spinnerValue * 60; } settingsModel.beginEdit(); settingsModel.set(this.composerCombo.name, this.composerCombo.getValue() === 'html'); settingsModel.set(this.readBox.name, this.readBox.getValue()); settingsModel.set(this.autoSaveTimeSpinner.name, spinnerValue); settingsModel.endEdit(); }, /** * Event handler which is called when a selection has been made in the * Composer type {@link Ext.form.ComboBox combobox}. * @param {Ext.form.ComboBox} field The field which fired the event * @param {Ext.data.Record} record The selected record */ onComposerSelect : function(field, record) { if (this.model) { var set = record.get(field.valueField); // FIXME: The settings model should be able to detect if // a change was applied if (this.model.get(field.name) !== set) { this.model.set(field.name, set === 'html'); } // disable font and font size combos for plain text compose option this.fontCombo.setDisabled(set !== 'html'); this.fontSizeCombo.setDisabled(set !== 'html'); } }, /** * Event handler which is called when one of the textfields has been changed. * This will apply the new value to the settings. * @param {Ext.form.Field} field The field which has fired the event * @param {String} value The new value * @private */ onFieldChange : function(field, value) { if (this.model) { // FIXME: The settings model should be able to detect if // a change was applied if (this.model.get(field.name) !== value) { this.model.set(field.name, value); } } }, /** * Event handler which is fired when the {@link Ext.form.Checkbox Checkbox} has been clicked. * @param {Ext.form.Checkbox} checkbox The checkbox which fired the event * @param {Boolean} check True if the checkbox is currently checked * @private */ onAutoSaveCheckBoxChange : function(checkbox, check) { // Checkbox's check event doesn't fire change event on element in // chrome and IE browser, so calling onFieldChange event manually. this.onFieldChange(checkbox, check); this.autoSaveTimeSpinner.setDisabled(!check); }, /** * Event handler which is called when a selection has been made in the * Font selection {@link Ext.form.ComboBox combobox}. * @param {Ext.form.ComboBox} field The field which fired the event * @param {Ext.data.Record} record The selected record */ onFontSelect : function(field, record) { if (this.model) { var value = record.get(field.valueField); // FIXME: The settings model should be able to detect if // a change was applied if(this.model.get(field.name) !== value) { this.model.set(field.name, value); } } } }); Ext.reg('zarafa.settingscomposewidget', Zarafa.mail.settings.SettingsComposeWidget);