diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js index 6f27af0a2..7a19180bb 100644 --- a/apps/common/main/lib/component/ComboBox.js +++ b/apps/common/main/lib/component/ComboBox.js @@ -666,4 +666,24 @@ define([ } } })()); + + Common.UI.ComboBoxCustom = Common.UI.ComboBox.extend(_.extend({ + itemClicked: function (e) { + Common.UI.ComboBox.prototype.itemClicked.call(this, e); + if (this.options.updateFormControl) + this.options.updateFormControl.call(this, this._selectedItem); + }, + + setValue: function(value) { + Common.UI.ComboBox.prototype.setValue.call(this, value); + if (this.options.updateFormControl) + this.options.updateFormControl.call(this, this._selectedItem); + }, + + selectRecord: function(record) { + Common.UI.ComboBox.prototype.selectRecord.call(this, record); + if (this.options.updateFormControl) + this.options.updateFormControl.call(this, this._selectedItem); + } + }, Common.UI.ComboBoxCustom || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 1e8c93b6c..7ba8585cf 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -497,7 +497,7 @@ define([ switch(this._state.bullets.type) { case 0: this.toolbar.btnMarkers.toggle(true, true); - if (this._state.bullets.subtype!==undefined) + if (this._state.bullets.subtype>0) this.toolbar.mnuMarkersPicker.selectByIndex(this._state.bullets.subtype, true); else this.toolbar.mnuMarkersPicker.deselectAll(true); @@ -508,9 +508,6 @@ define([ case 1: var idx; switch(this._state.bullets.subtype) { - case 0: - idx = 0; - break; case 1: idx = 4; break; @@ -1334,7 +1331,7 @@ define([ var me = this; var listId = me.api.asc_GetCurrentNumberingId(), level = me.api.asc_GetCurrentNumberingLvl(), - props = (listId !== null) ? me.api.asc_GetNumberingPr(listId).get_Lvl(level) : null; + props = (listId !== null) ? me.api.asc_GetNumberingPr(listId) : null; if (props) { (new DE.Views.ListSettingsDialog({ api: me.api, @@ -1345,7 +1342,7 @@ define([ handler: function(result, value) { if (result == 'ok') { if (me.api) { - me.api.asc_ChangeNumberingLvl(listId, value, props.get_LvlNum()); + me.api.asc_ChangeNumberingLvl(listId, value.props, value.num); } } Common.NotificationCenter.trigger('edit:complete', me.toolbar); diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js index 2ccfda8ee..9586e206b 100644 --- a/apps/documenteditor/main/app/view/ListSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js @@ -47,6 +47,7 @@ define([ 'common/main/lib/component/MetricSpinner', 'common/main/lib/component/ThemeColorPalette', 'common/main/lib/component/ColorButton', + 'common/main/lib/component/ComboBox', 'common/main/lib/view/SymbolTableDialog' ], function () { 'use strict'; @@ -63,6 +64,7 @@ define([ initialize : function(options) { this.type = options.type || 0; + this.height = this.type==2 ? 422 : 334; _.extend(this.options, { title: this.txtTitle @@ -101,11 +103,11 @@ define([ '', '', '', - '
', + '
', '', '', '', - '
', + '
', '', '', '', @@ -113,9 +115,10 @@ define([ ].join(''); this.props = options.props; - this.level = options.level; + this.level = options.level || 0; this.api = options.api; this.options.tpl = _.template(this.template)(this.options); + this.levels = []; Common.UI.Window.prototype.initialize.call(this, this.options); }, @@ -175,22 +178,76 @@ define([ }); this.btnEdit.on('click', _.bind(this.onEditBullet, this)); - this.cmbFormat = new Common.UI.ComboBox({ + var itemsTemplate = + [ + '<% _.each(items, function(item) { %>', + '
  • ', + '<%= item.displayValue %><% if (item.value === Asc.c_oAscNumberingFormat.Bullet) { %><%=item.symbol%><% } %>', + '
    • ', + '<% }); %>' + ]; + var template = [ + '
    ', + '
    ', + '
    ', + '', + '', + '
    ' + ]); + this.cmbFormat = new Common.UI.ComboBoxCustom({ el : $window.find('#id-dlg-numbering-format'), menuStyle : 'min-width: 100%;max-height: 183px;', + style : "width: 129px;", editable : false, - cls : 'input-group-nr', + template : _.template(template.join('')), + itemsTemplate: _.template(itemsTemplate.join('')), data : [ { displayValue: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal }, { displayValue: 'a, b, c,...', value: Asc.c_oAscNumberingFormat.LowerLetter }, { displayValue: 'A, B, C,...', value: Asc.c_oAscNumberingFormat.UpperLetter }, { displayValue: 'i, ii, iii,...', value: Asc.c_oAscNumberingFormat.LowerRoman }, { displayValue: 'I, II, III,...', value: Asc.c_oAscNumberingFormat.UpperRoman } - ] + ], + updateFormControl: function(record) { + var formcontrol = $(this.el).find('.form-control'); + if (record) { + if (record.get('value')==Asc.c_oAscNumberingFormat.Bullet) + formcontrol[0].innerHTML = record.get('displayValue') + '' + record.get('symbol') + ''; + else + formcontrol[0].innerHTML = record.get('displayValue'); + } else + formcontrol[0].innerHTML = ''; + } }); this.cmbFormat.on('selected', _.bind(function (combo, record) { - if (this._changedProps) - this._changedProps.put_Format(record.value); + if (this._changedProps) { + if (record.value == -1) { + var callback = function(result) { + var format = me._changedProps.get_Format(); + if (format == Asc.c_oAscNumberingFormat.Bullet) { + var store = combo.store; + if (!store.findWhere({value: Asc.c_oAscNumberingFormat.Bullet, symbol: me.bulletProps.symbol, font: me.bulletProps.font})) + store.add({ displayValue: me.txtSymbol + ': ', value: Asc.c_oAscNumberingFormat.Bullet, symbol: me.bulletProps.symbol, font: me.bulletProps.font }, {at: store.length-1}); + combo.setData(store.models); + combo.selectRecord(combo.store.findWhere({value: Asc.c_oAscNumberingFormat.Bullet, symbol: me.bulletProps.symbol, font: me.bulletProps.font})); + } else + combo.setValue(format || ''); + }; + this.addNewBullet(callback); + } else { + this._changedProps.put_Format(record.value); + if (record.value == Asc.c_oAscNumberingFormat.Bullet) { + this.bulletProps.font = record.font; + this.bulletProps.symbol = record.symbol; + if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr()); + this._changedProps.get_TextPr().put_FontFamily(this.bulletProps.font); + + this._changedProps.put_Text([new Asc.CAscNumberingLvlText()]); + this._changedProps.get_Text()[0].put_Value(this.bulletProps.symbol); + } + } + } if (this.api) { //this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps); } @@ -244,7 +301,7 @@ define([ this.cmbSize.on('selected', _.bind(function (combo, record) { if (this._changedProps) { if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr()); - this._changedProps.get_TextPr().put_FontSize((record.value>0) ? record.value : null); + this._changedProps.get_TextPr().put_FontSize((record.value>0) ? record.value : undefined); } if (this.api) { //this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps); @@ -253,12 +310,13 @@ define([ var levels = []; for (var i=0; i<9; i++) - levels.push({value: i, levelProps: null}); + levels.push({value: i}); this.levelsList = new Common.UI.ListView({ el: $('#levels-list', this.$window), store: new Common.UI.DataViewStore(levels), itemTemplate: _.template('
    <%= (value+1) %>
    ') }); + this.levelsList.on('item:select', _.bind(this.onSelectLevel, this)); this.afterRender(); }, @@ -306,7 +364,11 @@ define([ } }, - onEditBullet: function() { + onEditBullet: function(callback) { + this.addNewBullet(); + }, + + addNewBullet: function(callback) { var me = this, props = me.bulletProps, handler = function(dlg, result, settings) { @@ -316,14 +378,15 @@ define([ props.font = settings.font; props.symbol = settings.symbol; if (me._changedProps) { + me._changedProps.put_Format(Asc.c_oAscNumberingFormat.Bullet); if (!me._changedProps.get_TextPr()) me._changedProps.put_TextPr(new AscCommonWord.CTextPr()); me._changedProps.get_TextPr().put_FontFamily(props.font); - if (!me._changedProps.get_Text()) me._changedProps.put_Text([]); - if (me._changedProps.get_Text().length<1) me._changedProps.get_Text().push(new Asc.CAscNumberingLvlText()); + me._changedProps.put_Text([new Asc.CAscNumberingLvlText()]); me._changedProps.get_Text()[0].put_Value(props.symbol); } } + callback && callback.call(me, result); }, win = new Common.Views.SymbolTableDialog({ api: me.options.api, @@ -343,7 +406,13 @@ define([ _handleInput: function(state) { if (this.options.handler) { - this.options.handler.call(this, state, this._changedProps); + var props = [], lvlnum = []; + for (var i=0; i<9; i++) { + if (!this.levels[i]) continue; + props.push(this.levels[i]); + lvlnum.push(i); + } + this.options.handler.call(this, state, {props: (props.length==1) ? props[0] : props, num: (lvlnum.length==1) ? lvlnum[0] : lvlnum}); } this.close(); }, @@ -360,46 +429,80 @@ define([ _setDefaults: function (props) { this.bulletProps = {}; if (props) { - this.cmbAlign.setValue(props.get_Align() || ''); - this.cmbFormat.setValue(props.get_Format() || ''); - var textPr = props.get_TextPr(), - text = props.get_Text(); - if (text) { - this.bulletProps.symbol = text[0].get_Value(); - } - if (textPr) { - this.cmbSize.setValue(textPr.get_FontSize() || -1); - this.bulletProps.font = textPr.get_FontFamily(); + var levelProps = props.get_Lvl(this.level); + (this.level<0) && (this.level = 0); + this.levels[this.level] = levelProps || new Asc.CAscNumberingLvl(this.level); - var color = textPr.get_Color(); - if (color && !color.get_auto()) { - if ( typeof(color) == 'object' ) { - var isselected = false; - for (var i=0; i<10; i++) { - if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) { - this.colors.select(color,true); - isselected = true; - break; - } - } - if (!isselected) this.colors.clearSelection(); - color = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); - } else - this.colors.select(color,true); - } else { - this.colors.clearSelection(); - if (color && color.get_auto()) { - var clr_item = this.btnColor.menu.$el.find('#id-dlg-bullet-auto-color > a'); - !clr_item.hasClass('selected') && clr_item.addClass('selected'); - color = '000000'; - this.isAutoColor = true; - } else - color = 'transparent'; - } - this.btnColor.setColor(color); - } + if (this.type==2) { + var store = this.cmbFormat.store; + store.unshift({ displayValue: this.txtNone, value: Asc.c_oAscNumberingFormat.None }); + store.push({ displayValue: this.txtNewBullet, value: -1 }); + this.cmbFormat.setData(store.models); + this.levelsList.selectByIndex(this.level); + } else + this.fillLevelProps(this.levels[this.level]); + } + this._changedProps = this.levels[this.level]; + }, + + onSelectLevel: function(listView, itemView, record) { + this.level = record.get('value'); + if (this.levels[this.level] === undefined) + this.levels[this.level] = this.props.get_Lvl(this.level); + this.fillLevelProps(this.levels[this.level]); + this._changedProps = this.levels[this.level]; + }, + + fillLevelProps: function(levelProps) { + if (!levelProps) return; + + this.cmbAlign.setValue(levelProps.get_Align() || ''); + var format = levelProps.get_Format(), + textPr = levelProps.get_TextPr(), + text = levelProps.get_Text(); + if (text && format == Asc.c_oAscNumberingFormat.Bullet) { + this.bulletProps.symbol = text[0].get_Value(); + } + if (textPr) { + this.cmbSize.setValue(textPr.get_FontSize() || -1); + this.bulletProps.font = textPr.get_FontFamily(); + + var color = textPr.get_Color(); + if (color && !color.get_auto()) { + if ( typeof(color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) { + this.colors.select(color,true); + isselected = true; + break; + } + } + if (!isselected) this.colors.clearSelection(); + color = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } else + this.colors.select(color,true); + } else { + this.colors.clearSelection(); + if (color && color.get_auto()) { + var clr_item = this.btnColor.menu.$el.find('#id-dlg-bullet-auto-color > a'); + !clr_item.hasClass('selected') && clr_item.addClass('selected'); + color = '000000'; + this.isAutoColor = true; + } else + color = 'ffffff'; + } + this.btnColor.setColor(color); + } + if (this.type>0) { + if (format == Asc.c_oAscNumberingFormat.Bullet) { + if (!this.cmbFormat.store.findWhere({value: Asc.c_oAscNumberingFormat.Bullet, symbol: this.bulletProps.symbol, font: this.bulletProps.font})) + this.cmbFormat.store.add({ displayValue: this.txtSymbol + ': ', value: Asc.c_oAscNumberingFormat.Bullet, symbol: this.bulletProps.symbol, font: this.bulletProps.font }, {at: this.cmbFormat.store.length-1}); + this.cmbFormat.setData(this.cmbFormat.store.models); + this.cmbFormat.selectRecord(this.cmbFormat.store.findWhere({value: Asc.c_oAscNumberingFormat.Bullet, symbol: this.bulletProps.symbol, font: this.bulletProps.font})); + } else + this.cmbFormat.setValue(format || ''); } - this._changedProps = props || new Asc.CAscNumberingLvl(this.level); }, txtTitle: 'List Settings', @@ -416,6 +519,9 @@ define([ textPreview: 'Preview', txtType: 'Type', txtLikeText: 'Like a text', - textLevel: 'Level' + textLevel: 'Level', + txtNone: 'None', + txtNewBullet: 'New bullet...', + txtSymbol: 'Symbol' }, DE.Views.ListSettingsDialog || {})) }); \ No newline at end of file