[DE] Add settings for multilevel list.
This commit is contained in:
parent
3585f70ccc
commit
61f2a36fec
|
@ -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 || {}));
|
||||||
});
|
});
|
|
@ -497,7 +497,7 @@ define([
|
||||||
switch(this._state.bullets.type) {
|
switch(this._state.bullets.type) {
|
||||||
case 0:
|
case 0:
|
||||||
this.toolbar.btnMarkers.toggle(true, true);
|
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);
|
this.toolbar.mnuMarkersPicker.selectByIndex(this._state.bullets.subtype, true);
|
||||||
else
|
else
|
||||||
this.toolbar.mnuMarkersPicker.deselectAll(true);
|
this.toolbar.mnuMarkersPicker.deselectAll(true);
|
||||||
|
@ -508,9 +508,6 @@ define([
|
||||||
case 1:
|
case 1:
|
||||||
var idx;
|
var idx;
|
||||||
switch(this._state.bullets.subtype) {
|
switch(this._state.bullets.subtype) {
|
||||||
case 0:
|
|
||||||
idx = 0;
|
|
||||||
break;
|
|
||||||
case 1:
|
case 1:
|
||||||
idx = 4;
|
idx = 4;
|
||||||
break;
|
break;
|
||||||
|
@ -1334,7 +1331,7 @@ define([
|
||||||
var me = this;
|
var me = this;
|
||||||
var listId = me.api.asc_GetCurrentNumberingId(),
|
var listId = me.api.asc_GetCurrentNumberingId(),
|
||||||
level = me.api.asc_GetCurrentNumberingLvl(),
|
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) {
|
if (props) {
|
||||||
(new DE.Views.ListSettingsDialog({
|
(new DE.Views.ListSettingsDialog({
|
||||||
api: me.api,
|
api: me.api,
|
||||||
|
@ -1345,7 +1342,7 @@ define([
|
||||||
handler: function(result, value) {
|
handler: function(result, value) {
|
||||||
if (result == 'ok') {
|
if (result == 'ok') {
|
||||||
if (me.api) {
|
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);
|
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
|
||||||
|
|
|
@ -47,6 +47,7 @@ define([
|
||||||
'common/main/lib/component/MetricSpinner',
|
'common/main/lib/component/MetricSpinner',
|
||||||
'common/main/lib/component/ThemeColorPalette',
|
'common/main/lib/component/ThemeColorPalette',
|
||||||
'common/main/lib/component/ColorButton',
|
'common/main/lib/component/ColorButton',
|
||||||
|
'common/main/lib/component/ComboBox',
|
||||||
'common/main/lib/view/SymbolTableDialog'
|
'common/main/lib/view/SymbolTableDialog'
|
||||||
], function () { 'use strict';
|
], function () { 'use strict';
|
||||||
|
|
||||||
|
@ -63,6 +64,7 @@ define([
|
||||||
|
|
||||||
initialize : function(options) {
|
initialize : function(options) {
|
||||||
this.type = options.type || 0;
|
this.type = options.type || 0;
|
||||||
|
this.height = this.type==2 ? 422 : 334;
|
||||||
|
|
||||||
_.extend(this.options, {
|
_.extend(this.options, {
|
||||||
title: this.txtTitle
|
title: this.txtTitle
|
||||||
|
@ -101,11 +103,11 @@ define([
|
||||||
'<tr>',
|
'<tr>',
|
||||||
'<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
|
'<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
|
||||||
'<label>' + this.textLevel + '</label>',
|
'<label>' + this.textLevel + '</label>',
|
||||||
'<div id="levels-list" style="width:100%; height: 120px;margin-top: 2px; "></div>',
|
'<div id="levels-list" style="width:100%; height: <% if (type == 2) { %>208<% } else { %>120<% } %>px;margin-top: 2px; "></div>',
|
||||||
'</td>',
|
'</td>',
|
||||||
'<td>',
|
'<td>',
|
||||||
'<label>' + this.textPreview + '</label>',
|
'<label>' + this.textPreview + '</label>',
|
||||||
'<div id="bulleted-list-preview" style="margin-top: 2px; height: 120px; width: 100%; border: 1px solid #cfcfcf;"></div>',
|
'<div id="bulleted-list-preview" style="margin-top: 2px; height: <% if (type == 2) { %>208<% } else { %>120<% } %>px; width: 100%; border: 1px solid #cfcfcf;"></div>',
|
||||||
'</td>',
|
'</td>',
|
||||||
'</tr>',
|
'</tr>',
|
||||||
'</table>',
|
'</table>',
|
||||||
|
@ -113,9 +115,10 @@ define([
|
||||||
].join('');
|
].join('');
|
||||||
|
|
||||||
this.props = options.props;
|
this.props = options.props;
|
||||||
this.level = options.level;
|
this.level = options.level || 0;
|
||||||
this.api = options.api;
|
this.api = options.api;
|
||||||
this.options.tpl = _.template(this.template)(this.options);
|
this.options.tpl = _.template(this.template)(this.options);
|
||||||
|
this.levels = [];
|
||||||
|
|
||||||
Common.UI.Window.prototype.initialize.call(this, this.options);
|
Common.UI.Window.prototype.initialize.call(this, this.options);
|
||||||
},
|
},
|
||||||
|
@ -175,22 +178,76 @@ define([
|
||||||
});
|
});
|
||||||
this.btnEdit.on('click', _.bind(this.onEditBullet, this));
|
this.btnEdit.on('click', _.bind(this.onEditBullet, this));
|
||||||
|
|
||||||
this.cmbFormat = new Common.UI.ComboBox({
|
var itemsTemplate =
|
||||||
|
[
|
||||||
|
'<% _.each(items, function(item) { %>',
|
||||||
|
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
|
||||||
|
'<%= item.displayValue %><% if (item.value === Asc.c_oAscNumberingFormat.Bullet) { %><span style="font-family:<%=item.font%>;"><%=item.symbol%></span><% } %>',
|
||||||
|
'</a></li>',
|
||||||
|
'<% }); %>'
|
||||||
|
];
|
||||||
|
var template = [
|
||||||
|
'<div class="input-group combobox input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
|
||||||
|
'<div class="form-control" style="padding-top:3px; cursor: pointer; <%= style %>"></div>',
|
||||||
|
'<div style="display: table-cell;"></div>',
|
||||||
|
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
|
||||||
|
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">'].concat(itemsTemplate).concat([
|
||||||
|
'</ul>',
|
||||||
|
'</div>'
|
||||||
|
]);
|
||||||
|
this.cmbFormat = new Common.UI.ComboBoxCustom({
|
||||||
el : $window.find('#id-dlg-numbering-format'),
|
el : $window.find('#id-dlg-numbering-format'),
|
||||||
menuStyle : 'min-width: 100%;max-height: 183px;',
|
menuStyle : 'min-width: 100%;max-height: 183px;',
|
||||||
|
style : "width: 129px;",
|
||||||
editable : false,
|
editable : false,
|
||||||
cls : 'input-group-nr',
|
template : _.template(template.join('')),
|
||||||
|
itemsTemplate: _.template(itemsTemplate.join('')),
|
||||||
data : [
|
data : [
|
||||||
{ displayValue: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal },
|
{ 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.LowerLetter },
|
||||||
{ displayValue: 'A, B, C,...', value: Asc.c_oAscNumberingFormat.UpperLetter },
|
{ 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.LowerRoman },
|
||||||
{ displayValue: 'I, II, III,...', value: Asc.c_oAscNumberingFormat.UpperRoman }
|
{ 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') + '<span style="font-family:' + (record.get('font') || 'Arial') + '">' + record.get('symbol') + '</span>';
|
||||||
|
else
|
||||||
|
formcontrol[0].innerHTML = record.get('displayValue');
|
||||||
|
} else
|
||||||
|
formcontrol[0].innerHTML = '';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.cmbFormat.on('selected', _.bind(function (combo, record) {
|
this.cmbFormat.on('selected', _.bind(function (combo, record) {
|
||||||
if (this._changedProps)
|
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);
|
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) {
|
if (this.api) {
|
||||||
//this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps);
|
//this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps);
|
||||||
}
|
}
|
||||||
|
@ -244,7 +301,7 @@ define([
|
||||||
this.cmbSize.on('selected', _.bind(function (combo, record) {
|
this.cmbSize.on('selected', _.bind(function (combo, record) {
|
||||||
if (this._changedProps) {
|
if (this._changedProps) {
|
||||||
if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
|
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) {
|
if (this.api) {
|
||||||
//this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps);
|
//this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this._changedProps);
|
||||||
|
@ -253,12 +310,13 @@ define([
|
||||||
|
|
||||||
var levels = [];
|
var levels = [];
|
||||||
for (var i=0; i<9; i++)
|
for (var i=0; i<9; i++)
|
||||||
levels.push({value: i, levelProps: null});
|
levels.push({value: i});
|
||||||
this.levelsList = new Common.UI.ListView({
|
this.levelsList = new Common.UI.ListView({
|
||||||
el: $('#levels-list', this.$window),
|
el: $('#levels-list', this.$window),
|
||||||
store: new Common.UI.DataViewStore(levels),
|
store: new Common.UI.DataViewStore(levels),
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="list-item" style="pointer-events:none;overflow: hidden; text-overflow: ellipsis;"><%= (value+1) %></div>')
|
itemTemplate: _.template('<div id="<%= id %>" class="list-item" style="pointer-events:none;overflow: hidden; text-overflow: ellipsis;"><%= (value+1) %></div>')
|
||||||
});
|
});
|
||||||
|
this.levelsList.on('item:select', _.bind(this.onSelectLevel, this));
|
||||||
|
|
||||||
this.afterRender();
|
this.afterRender();
|
||||||
},
|
},
|
||||||
|
@ -306,7 +364,11 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onEditBullet: function() {
|
onEditBullet: function(callback) {
|
||||||
|
this.addNewBullet();
|
||||||
|
},
|
||||||
|
|
||||||
|
addNewBullet: function(callback) {
|
||||||
var me = this,
|
var me = this,
|
||||||
props = me.bulletProps,
|
props = me.bulletProps,
|
||||||
handler = function(dlg, result, settings) {
|
handler = function(dlg, result, settings) {
|
||||||
|
@ -316,14 +378,15 @@ define([
|
||||||
props.font = settings.font;
|
props.font = settings.font;
|
||||||
props.symbol = settings.symbol;
|
props.symbol = settings.symbol;
|
||||||
if (me._changedProps) {
|
if (me._changedProps) {
|
||||||
|
me._changedProps.put_Format(Asc.c_oAscNumberingFormat.Bullet);
|
||||||
if (!me._changedProps.get_TextPr()) me._changedProps.put_TextPr(new AscCommonWord.CTextPr());
|
if (!me._changedProps.get_TextPr()) me._changedProps.put_TextPr(new AscCommonWord.CTextPr());
|
||||||
me._changedProps.get_TextPr().put_FontFamily(props.font);
|
me._changedProps.get_TextPr().put_FontFamily(props.font);
|
||||||
|
|
||||||
if (!me._changedProps.get_Text()) me._changedProps.put_Text([]);
|
me._changedProps.put_Text([new Asc.CAscNumberingLvlText()]);
|
||||||
if (me._changedProps.get_Text().length<1) me._changedProps.get_Text().push(new Asc.CAscNumberingLvlText());
|
|
||||||
me._changedProps.get_Text()[0].put_Value(props.symbol);
|
me._changedProps.get_Text()[0].put_Value(props.symbol);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
callback && callback.call(me, result);
|
||||||
},
|
},
|
||||||
win = new Common.Views.SymbolTableDialog({
|
win = new Common.Views.SymbolTableDialog({
|
||||||
api: me.options.api,
|
api: me.options.api,
|
||||||
|
@ -343,7 +406,13 @@ define([
|
||||||
|
|
||||||
_handleInput: function(state) {
|
_handleInput: function(state) {
|
||||||
if (this.options.handler) {
|
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();
|
this.close();
|
||||||
},
|
},
|
||||||
|
@ -360,11 +429,38 @@ define([
|
||||||
_setDefaults: function (props) {
|
_setDefaults: function (props) {
|
||||||
this.bulletProps = {};
|
this.bulletProps = {};
|
||||||
if (props) {
|
if (props) {
|
||||||
this.cmbAlign.setValue(props.get_Align() || '');
|
var levelProps = props.get_Lvl(this.level);
|
||||||
this.cmbFormat.setValue(props.get_Format() || '');
|
(this.level<0) && (this.level = 0);
|
||||||
var textPr = props.get_TextPr(),
|
this.levels[this.level] = levelProps || new Asc.CAscNumberingLvl(this.level);
|
||||||
text = props.get_Text();
|
|
||||||
if (text) {
|
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();
|
this.bulletProps.symbol = text[0].get_Value();
|
||||||
}
|
}
|
||||||
if (textPr) {
|
if (textPr) {
|
||||||
|
@ -394,12 +490,19 @@ define([
|
||||||
color = '000000';
|
color = '000000';
|
||||||
this.isAutoColor = true;
|
this.isAutoColor = true;
|
||||||
} else
|
} else
|
||||||
color = 'transparent';
|
color = 'ffffff';
|
||||||
}
|
}
|
||||||
this.btnColor.setColor(color);
|
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',
|
txtTitle: 'List Settings',
|
||||||
|
@ -416,6 +519,9 @@ define([
|
||||||
textPreview: 'Preview',
|
textPreview: 'Preview',
|
||||||
txtType: 'Type',
|
txtType: 'Type',
|
||||||
txtLikeText: 'Like a text',
|
txtLikeText: 'Like a text',
|
||||||
textLevel: 'Level'
|
textLevel: 'Level',
|
||||||
|
txtNone: 'None',
|
||||||
|
txtNewBullet: 'New bullet...',
|
||||||
|
txtSymbol: 'Symbol'
|
||||||
}, DE.Views.ListSettingsDialog || {}))
|
}, DE.Views.ListSettingsDialog || {}))
|
||||||
});
|
});
|
Loading…
Reference in a new issue