Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #511 from ONLYOFFICE/feature/optimize-styles-load

Browse source 
Feature/optimize styles load
This commit is contained in:
Julia Radzhabova 2020-09-17 17:12:00 +03:00 committed by GitHub
parent dd4238fc31 edfcd54b95
commit 0a46f11fc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 174 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/main/lib/component/ComboDataView.js
View file

@ -459,6 +459,13 @@ define([
this.menuPicker.selectByIndex(index);
},
selectRecord: function(record) {
if (!record)
this.fieldPicker.deselectAll();
this.menuPicker.selectRecord(record);
},
setItemWidth: function(width) {
if (this.itemWidth != width)
this.itemWidth = window.devicePixelRatio > 1 ? width / 2 : width;

8
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -691,9 +691,11 @@ define([
var count = self.mnuTableTemplatePicker.store.length;
if (count>0 && count==Templates.length) {
var data = self.mnuTableTemplatePicker.store.models;
_.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage());
var data = self.mnuTableTemplatePicker.dataViewItems;
data && _.each(Templates, function(template, index){
var img = template.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img);
});
} else {
var arr = [];

8
apps/presentationeditor/main/app/view/TableSettings.js
View file

@ -658,9 +658,11 @@ define([
var count = self.mnuTableTemplatePicker.store.length;
if (count>0 && count==Templates.length) {
var data = self.mnuTableTemplatePicker.store.models;
_.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage());
var data = self.mnuTableTemplatePicker.dataViewItems;
data && _.each(Templates, function(template, index){
var img = template.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img);
});
} else {
var arr = [];

21
apps/spreadsheeteditor/main/app/controller/PivotTable.js
View file

@ -65,7 +65,8 @@ define([
'pivottable:layout': _.bind(this.onPivotLayout, this),
'pivottable:blankrows': _.bind(this.onPivotBlankRows, this),
'pivottable:subtotals': _.bind(this.onPivotSubtotals, this),
'pivottable:grandtotals': _.bind(this.onPivotGrandTotals, this)
'pivottable:grandtotals': _.bind(this.onPivotGrandTotals, this),
'pivot:open': _.bind(this.onPivotOpen, this)
},
'TableSettings': {
'pivottable:create': _.bind(this.onCreateClick, this)
@ -357,10 +358,13 @@ define([
var count = styles.menuPicker.store.length;
if (count>0 && count==Templates.length) {
var data = styles.menuPicker.store.models;
_.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage());
var data = styles.menuPicker.dataViewItems;
data && _.each(Templates, function(template, index){
var img = template.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img);
});
styles.fieldPicker.store.reset(styles.fieldPicker.store.models);
} else {
styles.menuPicker.store.reset([]);
var arr = [];
@ -380,6 +384,15 @@ define([
}
},
onPivotOpen: function() {
var styles = this.view.pivotStyles;
if (styles && styles.needFillComboView && styles.menuPicker.store.length > 0 && styles.rendered){
var styleRec;
if (this._state.TemplateName) styleRec = styles.menuPicker.store.findWhere({name: this._state.TemplateName});
styles.fillComboView((styleRec) ? styleRec : styles.menuPicker.store.at(0), true);
}
},
onSelectionChanged: function(info) {
if (this.rangeSelectionMode || !this.appConfig.isEdit || !this.view) return;

53
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -80,7 +80,8 @@ define([
'add:chart' : this.onSelectChart,
'insert:textart': this.onInsertTextart,
'change:scalespn': this.onClickChangeScaleInMenu.bind(me),
'click:customscale': this.onScaleClick.bind(me)
'click:customscale': this.onScaleClick.bind(me),
'home:open' : this.onHomeOpen
},
'FileMenu': {
'menu:hide': me.onFileMenu.bind(me, 'hide'),
@ -1739,26 +1740,48 @@ define([
return;
}
listStyles.menuPicker.store.reset([]); // remove all
var mainController = this.getApplication().getController('Main');
_.each(styles, function(style){
listStyles.menuPicker.store.add({
imageUrl: style.asc_getImage(),
name : style.asc_getName(),
tip : mainController.translationTable[style.get_Name()] || style.get_Name(),
uid : Common.UI.getId()
var count = listStyles.menuPicker.store.length;
var rec = listStyles.menuPicker.getSelectedRec();
if (count>0 && count==styles.length) {
var data = listStyles.menuPicker.dataViewItems;
data && _.each(styles, function(style, index){
var img = style.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
data[index].model.set({
name : style.asc_getName(),
tip : mainController.translationTable[style.get_Name()] || style.get_Name()
});
$(data[index].el).find('img').attr('src', img);
});
});
if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) {
listStyles.fillComboView(listStyles.menuPicker.store.at(0), true);
listStyles.selectByIndex(0);
} else {
var arr = [];
_.each(styles, function(style){
arr.push({
imageUrl: style.asc_getImage(),
name : style.asc_getName(),
tip : mainController.translationTable[style.get_Name()] || style.get_Name(),
uid : Common.UI.getId()
});
});
listStyles.menuPicker.store.reset(arr);
}
if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) {
rec = rec ? listStyles.menuPicker.store.findWhere({name: rec.get('name')}) : null;
listStyles.fillComboView(rec ? rec : listStyles.menuPicker.store.at(0), true, true);
}
window.styles_loaded = true;
},
onHomeOpen: function() {
var listStyles = this.toolbar.listStyles;
if (listStyles && listStyles.needFillComboView && listStyles.menuPicker.store.length > 0 && listStyles.rendered){
var styleRec;
if (this._state.prstyle) styleRec = listStyles.menuPicker.store.findWhere({name: this._state.prstyle});
listStyles.fillComboView((styleRec) ? styleRec : listStyles.menuPicker.store.at(0), true);
}
},
onApiCoAuthoringDisconnect: function(enableDownload) {
this.toolbar.setMode({isDisconnected:true, enableDownload: !!enableDownload});
this.editMode = false;

213
apps/spreadsheeteditor/main/app/view/PivotSettings.js
View file

@ -395,6 +395,7 @@ define([
this._state.TableName=props.asc_getName();
var me = this,
isChecked = [],
cache_names = props.asc_getCacheFields(),
pivot_names = props.asc_getPivotFields();
@ -403,145 +404,109 @@ define([
me._state.names[index] = item.asc_getName() || cache_names[index].asc_getName();
});
var arr = [], isChecked = [],
value = props.asc_getColumnFields();
value && value.forEach(function (item, index) {
var pivotIndex = item.asc_getIndex();
if (pivotIndex>-1 || pivotIndex == -2) {
var name = (pivotIndex>-1) ? me._state.names[pivotIndex] : me.textValues;
arr.push(new Common.UI.DataViewModel({
selected : false,
allowSelected : false,
pivotIndex : pivotIndex,
index : index,
value : name,
tip : (name.length>10) ? name : ''
}));
isChecked[name] = true;
var fillList = function(propValue, list, eventIndex, getNameFunction) {
var arr = [];
var models = list.store.models,
equalArr = list.store.length === (propValue ? propValue.length : 0);
propValue && propValue.forEach(function (item, index) {
var pivotIndex = item.asc_getIndex();
var name = getNameFunction ? getNameFunction(pivotIndex) : item.asc_getName();
if (equalArr) {
models[index].set({
pivotIndex: pivotIndex,
index : index,
value : name,
tip : (name.length>10) ? name : ''
});
} else
arr.push(new Common.UI.DataViewModel({
selected : false,
allowSelected : false,
pivotIndex : pivotIndex,
index : index,
value : name,
tip : (name.length>10) ? name : ''
}));
isChecked[getNameFunction ? name : me._state.names[pivotIndex]] = true;
});
if (!equalArr) {
list.store.reset(arr);
list.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
list.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onItemsDragStart, me, eventIndex, list, item, index));
item.$el.on('dragenter', _.bind(me.onDragItemEnter, me, item, index));
item.$el.on('dragleave', _.bind(me.onDragItemLeave, me, item, index));
item.$el.on('dragover', _.bind(me.onDragItemOver, me, list, item, index));
item.$el.on('drop', _.bind(me.onDrop, me));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
list.$el.find('.item').last().css({'margin-bottom': '10px'});
}
});
this.columnsList.store.reset(arr);
this.columnsList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
};
var value = props.asc_getColumnFields();
value && (value = _.filter(value, function(item){
var pivotIndex = item.asc_getIndex();
return (pivotIndex>-1 || pivotIndex == -2);
}));
fillList(value, this.columnsList, 0, function(pivotIndex) {
return (pivotIndex>-1) ? me._state.names[pivotIndex] : me.textValues;
});
arr = [];
value = props.asc_getRowFields();
value && value.forEach(function (item, index) {
value && (value = _.filter(value, function(item){
var pivotIndex = item.asc_getIndex();
if (pivotIndex>-1 || pivotIndex == -2) {
var name = (pivotIndex>-1) ? me._state.names[pivotIndex] : me.textValues;
arr.push(new Common.UI.DataViewModel({
selected : false,
allowSelected : false,
pivotIndex : pivotIndex,
index : index,
value : name,
tip : (name.length>10) ? name : ''
}));
isChecked[name] = true;
}
return (pivotIndex>-1 || pivotIndex == -2);
}));
fillList(value, this.rowsList, 1, function(pivotIndex) {
return (pivotIndex>-1) ? me._state.names[pivotIndex] : me.textValues;
});
this.rowsList.store.reset(arr);
this.rowsList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
arr = [];
value = props.asc_getDataFields();
value && value.forEach(function (item, index) {
var pivotIndex = item.asc_getIndex();
if (pivotIndex>-1) {
var name = item.asc_getName();
arr.push(new Common.UI.DataViewModel({
selected : false,
allowSelected : false,
pivotIndex : pivotIndex,
index : index,
value : name,
tip : (name.length>10) ? name : ''
}));
isChecked[me._state.names[pivotIndex]] = true;
}
});
this.valuesList.store.reset(arr);
this.valuesList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
value && (value = _.filter(value, function(item){
return (item.asc_getIndex()>-1);
}));
fillList(value, this.valuesList, 2);
arr = [];
value = props.asc_getPageFields();
value && value.forEach(function (item, index) {
var pivotIndex = item.asc_getIndex();
if (pivotIndex>-1) {
var name = me._state.names[pivotIndex];
value && (value = _.filter(value, function(item){
return (item.asc_getIndex()>-1);
}));
fillList(value, this.filtersList, 3, function(pivotIndex) {
return me._state.names[pivotIndex];
});
var arr = [];
var models = this.fieldsList.store.models;
var equalArr = this.fieldsList.store.length === me._state.names.length;
me._state.names.forEach(function (item, index) {
if (equalArr) {
models[index].set({
value : item,
index : index,
tip : (item.length>25) ? item : '',
check : isChecked[item]
});
} else
arr.push(new Common.UI.DataViewModel({
selected : false,
allowSelected : false,
pivotIndex : pivotIndex,
value : item,
index : index,
value : name,
tip : (name.length>10) ? name : ''
tip : (item.length>25) ? item : '',
check : isChecked[item]
}));
isChecked[name] = true;
}
});
this.filtersList.store.reset(arr);
this.filtersList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
arr = [];
me._state.names.forEach(function (item, index) {
arr.push(new Common.UI.DataViewModel({
selected : false,
allowSelected : false,
value : item,
index : index,
tip : (item.length>25) ? item : '',
check : isChecked[item]
}));
});
this.fieldsList.store.reset(arr);
this.fieldsList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
this.fieldsList.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onFieldsDragStart, me, item, index));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
this.columnsList.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onItemsDragStart, me, 0, me.columnsList, item, index));
item.$el.on('dragenter', _.bind(me.onDragItemEnter, me, item, index));
item.$el.on('dragleave', _.bind(me.onDragItemLeave, me, item, index));
item.$el.on('dragover', _.bind(me.onDragItemOver, me, me.columnsList, item, index));
item.$el.on('drop', _.bind(me.onDrop, me));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
this.columnsList.$el.find('.item').last().css({'margin-bottom': '10px'});
this.rowsList.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onItemsDragStart, me, 1, me.rowsList, item, index));
item.$el.on('dragenter', _.bind(me.onDragItemEnter, me, item, index));
item.$el.on('dragleave', _.bind(me.onDragItemLeave, me, item, index));
item.$el.on('dragover', _.bind(me.onDragItemOver, me, me.rowsList, item, index));
item.$el.on('drop', _.bind(me.onDrop, me));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
this.rowsList.$el.find('.item').last().css({'margin-bottom': '10px'});
this.valuesList.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onItemsDragStart, me, 2, me.valuesList, item, index));
item.$el.on('dragenter', _.bind(me.onDragItemEnter, me, item, index));
item.$el.on('dragleave', _.bind(me.onDragItemLeave, me, item, index));
item.$el.on('dragover', _.bind(me.onDragItemOver, me, me.valuesList, item, index));
item.$el.on('drop', _.bind(me.onDrop, me));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
this.valuesList.$el.find('.item').last().css({'margin-bottom': '10px'});
this.filtersList.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onItemsDragStart, me, 3, me.filtersList, item, index));
item.$el.on('dragenter', _.bind(me.onDragItemEnter, me, item, index));
item.$el.on('dragleave', _.bind(me.onDragItemLeave, me, item, index));
item.$el.on('dragover', _.bind(me.onDragItemOver, me, me.filtersList, item, index));
item.$el.on('drop', _.bind(me.onDrop, me));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
this.filtersList.$el.find('.item').last().css({'margin-bottom': '10px'});
if (!equalArr) {
this.fieldsList.store.reset(arr);
this.fieldsList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
this.fieldsList.dataViewItems.forEach(function (item, index) {
item.$el.attr('draggable', true);
item.$el.on('dragstart', _.bind(me.onFieldsDragStart, me, item, index));
item.$el.on('dragend', _.bind(me.onDragEnd, me));
});
}
}
},

13
apps/spreadsheeteditor/main/app/view/TableSettings.js
View file

@ -462,10 +462,7 @@ define([
onSendThemeColors: function() {
// get new table templates
if (this.cmbTableTemplate) {
this.onApiInitTableTemplates(this.api.asc_getTablePictures(this._originalProps));
this.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
}
this.btnTableTemplate && this.onApiInitTableTemplates(this.api.asc_getTablePictures(this._originalProps));
},
onApiInitTableTemplates: function(Templates){
@ -503,9 +500,11 @@ define([
var count = self.mnuTableTemplatePicker.store.length;
if (count>0 && count==Templates.length) {
var data = self.mnuTableTemplatePicker.store.models;
_.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage());
var data = self.mnuTableTemplatePicker.dataViewItems;
data && _.each(Templates, function(template, index){
var img = template.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img);
});
} else {
var arr = [];

7
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -1553,6 +1553,13 @@ define([
me.fireEvent('file:open');
me.setTab(tab);
}
if ( me.isTabActive('home'))
me.fireEvent('home:open');
if ( me.isTabActive('pivot')) {
var pivottab = SSE.getController('PivotTable');
pivottab && pivottab.getView('PivotTable').fireEvent('pivot:open');
}
},
rendererComponents: function(html) {