[DE] Change advanced settings for table of contents.

This commit is contained in:
Julia Radzhabova 2018-01-11 18:02:27 +03:00
parent fa6e01bbe7
commit 234c38aadf
3 changed files with 147 additions and 11 deletions

View file

@ -146,7 +146,7 @@
@common-controls-width: 100px;
.img-commonctrl,
.theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before,
.btn-toolbar .icon.img-commonctrl {
.btn-toolbar .icon.img-commonctrl, .list-item div.checked:before {
background-image: data-uri(%("%s",'@{common-image-path}/@{common-controls}'));
background-repeat: no-repeat;

View file

@ -49,7 +49,7 @@ define([
DE.Views.TableOfContentsSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 500,
height: 380
height: 445
},
initialize : function(options) {
@ -67,7 +67,7 @@ define([
'<div id="tableofcontents-chb-pages"></div>',
'</td>',
'<td rowspan="6" class="padding-small" style="vertical-align: top;">',
'<div style="border: 1px solid #cbcbcb;width: 215px; height: 197px; float: right;">',
'<div style="border: 1px solid #cbcbcb;width: 230px; height: 197px; float: right;">',
'<div id="tableofcontents-img" style="width: 100%; height: 100%;"></div>',
'</div>',
'</td>',
@ -94,19 +94,30 @@ define([
'</td>',
'</tr>',
'<tr>',
'<td class="padding-large">',
'<td class="padding-small">',
'<label class="input-label padding-small" style="display: block;">' + me.textBuildTable + '</label>',
'<div id="tableofcontents-radio-styles" class="padding-small" style="display: block;"></div>',
'<div id="tableofcontents-radio-levels" class="padding-small" style="display: block;"></div>',
'<div id="tableofcontents-radio-levels" class="" style="display: block;"></div>',
'</td>',
'</tr>',
'<tr>',
'<td class="padding-small">',
'<label class="input-label padding-small">' + me.textLevels + '</label>',
'<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
'<td class="padding-small" style="vertical-align: top;">',
'<div id="tableofcontents-from-levels">',
'<label class="input-label">' + me.textLevels + '</label>',
'<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
'</div>',
'<div id="tableofcontents-from-styles" class="hidden">',
'<table><tr><td style="height: 25px;">',
'<label class="input-label" style="width: 144px; margin-left: 23px;">' + me.textStyle + '</label>',
'<label class="input-label" style="">' + me.textLevel + '</label>',
'</td></tr>',
'<tr><td class="padding-small">',
'<div id="tableofcontents-styles-list" class="header-styles-tableview" style="width:100%; height: 91px;"></div>',
'</td></tr></table>',
'</div>',
'</td>',
'<td class="padding-small">',
'<label class="input-label padding-small">' + me.textStyles + '</label>',
'<td class="padding-small" style="vertical-align: top;">',
'<label class="input-label" style="margin-left: 15px;">' + me.textStyles + '</label>',
'<div id="tableofcontents-combo-styles" class="input-group-nr" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
'</td>',
'</tr>',
@ -189,12 +200,24 @@ define([
name: 'asc-radio-content-build',
checked: true
});
this.radioLevels.on('change', _.bind(function(field, newValue, eOpts) {
if (newValue) {
this.levelsContainer.toggleClass('hidden', !newValue);
this.stylesContainer.toggleClass('hidden', newValue);
}
}, this));
this.radioStyles = new Common.UI.RadioBox({
el: $('#tableofcontents-radio-styles'),
labelText: this.textRadioStyles,
name: 'asc-radio-content-build'
});
this.radioStyles.on('change', _.bind(function(field, newValue, eOpts) {
if (newValue) {
this.stylesContainer.toggleClass('hidden', !newValue);
this.levelsContainer.toggleClass('hidden', newValue);
}
}, this));
this.cmbStyles = new Common.UI.ComboBox({
el: $('#tableofcontents-combo-styles'),
@ -229,7 +252,31 @@ define([
}
}, this));
this.stylesLevels = new Common.UI.DataViewStore();
if (this.stylesLevels) {
this.stylesList = new Common.UI.ListView({
el: $('#tableofcontents-styles-list', this.$window),
store: this.stylesLevels,
simpleAddMode: true,
showLast: false,
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item">',
'<div class="<% if (checked) { %>checked<% } %>"><%= name %></div>',
'<div>',
'<div class="input-field" style="width:40px;"><input type="text" class="form-control" value="<%= value %>" style="text-align: right;">',
'</div>',
'</div>',
'</div>'
].join(''))
});
this.stylesList.on('item:change', _.bind(this.onItemChange, this));
this.stylesList.on('item:add', _.bind(this.addEvents, this));
}
this.levelsContainer = $('#tableofcontents-from-levels');
this.stylesContainer = $('#tableofcontents-from-styles');
this.afterRender();
},
@ -244,6 +291,27 @@ define([
_setDefaults: function (props) {
if (props) {
}
this.stylesLevels.reset([
(new Common.UI.DataViewModel({
name: 'header1',
allowSelected: false,
checked: true,
value: 1
})),
(new Common.UI.DataViewModel({
name: 'header2',
allowSelected: false,
checked: false,
value: ''
})),
(new Common.UI.DataViewModel({
name: 'header3',
allowSelected: false,
checked: false,
value: ''
}))]);
// this._changedProps = new Asc.asc_CParagraphProperty();
},
@ -252,6 +320,37 @@ define([
return props;
},
addEvents: function(listView, itemView, record) {
var input = itemView.$el.find('input');
input.on('keypress', function(e) {
var charCode = String.fromCharCode(e.which);
if(!/[1-9]/.test(charCode) && !e.ctrlKey && e.keyCode !== Common.UI.Keys.DELETE && e.keyCode !== Common.UI.Keys.BACKSPACE &&
e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.HOME &&
e.keyCode !== Common.UI.Keys.END && e.keyCode !== Common.UI.Keys.ESC && e.keyCode !== Common.UI.Keys.INSERT &&
e.keyCode !== Common.UI.Keys.TAB || input.val().length>1){
// if (e.keyCode==Common.UI.Keys.RETURN) me.trigger('changed', me, el.val());
e.preventDefault();
e.stopPropagation();
}
});
input.on('input', function(e) {
// console.log(input.val());
var newval = !_.isEmpty(input.val());
if (record.get('checked') !== newval) {
record.set('checked', !_.isEmpty(input.val()));
}
record.set('value', input.val());
});
},
onItemChange: function(listView, itemView, record) {
this.addEvents(listView, itemView, record);
setTimeout(function(){
itemView.$el.find('input').focus();
}, 10);
},
textTitle: 'Table of Contents',
textLeader: 'Leader',
textBuildTable: 'Build table of contents from',
@ -264,8 +363,15 @@ define([
textNone: 'None',
textRadioLevels: 'Outline levels',
textRadioStyles: 'Selected styles',
textStyle: 'Style',
textLevel: 'Level',
cancelButtonText: 'Cancel',
okButtonText : 'Ok'
okButtonText : 'Ok',
txtCurrent: 'Current',
txtSimple: 'Simple',
txtStandard: 'Standard',
txtModern: 'Modern',
txtClassic: 'Classic'
}, DE.Views.TableOfContentsSettings || {}))
});

View file

@ -75,6 +75,36 @@
height:20px;
}
.header-styles-tableview {
.list-item > div{
&:nth-child(1) {
width:160px;
height: 16px;
padding-left:16px;
padding-right: 5px;
&.checked {
&:before {
content: '';
width: 16px;
height: 16px;
display: inline-block;
float: left;
margin-left: -18px;
background-position: @menu-check-offset-x @menu-check-offset-y;
}
}
}
padding-right: 6px;
vertical-align: middle;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
}
}