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); this.menuPicker.selectByIndex(index);
}, },
selectRecord: function(record) {
if (!record)
this.fieldPicker.deselectAll();
this.menuPicker.selectRecord(record);
},
setItemWidth: function(width) { setItemWidth: function(width) {
if (this.itemWidth != width) if (this.itemWidth != width)
this.itemWidth = window.devicePixelRatio > 1 ? width / 2 : 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; var count = self.mnuTableTemplatePicker.store.length;
if (count>0 && count==Templates.length) { if (count>0 && count==Templates.length) {
var data = self.mnuTableTemplatePicker.store.models; var data = self.mnuTableTemplatePicker.dataViewItems;
_.each(Templates, function(template, index){ data && _.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage()); var img = template.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img);
}); });
} else { } else {
var arr = []; var arr = [];

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

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

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

@ -65,7 +65,8 @@ define([
'pivottable:layout': _.bind(this.onPivotLayout, this), 'pivottable:layout': _.bind(this.onPivotLayout, this),
'pivottable:blankrows': _.bind(this.onPivotBlankRows, this), 'pivottable:blankrows': _.bind(this.onPivotBlankRows, this),
'pivottable:subtotals': _.bind(this.onPivotSubtotals, 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': { 'TableSettings': {
'pivottable:create': _.bind(this.onCreateClick, this) 'pivottable:create': _.bind(this.onCreateClick, this)
@ -357,10 +358,13 @@ define([
var count = styles.menuPicker.store.length; var count = styles.menuPicker.store.length;
if (count>0 && count==Templates.length) { if (count>0 && count==Templates.length) {
var data = styles.menuPicker.store.models; var data = styles.menuPicker.dataViewItems;
_.each(Templates, function(template, index){ data && _.each(Templates, function(template, index){
data[index].set('imageUrl', template.asc_getImage()); 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 { } else {
styles.menuPicker.store.reset([]); styles.menuPicker.store.reset([]);
var arr = []; 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) { onSelectionChanged: function(info) {
if (this.rangeSelectionMode || !this.appConfig.isEdit || !this.view) return; 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, 'add:chart' : this.onSelectChart,
'insert:textart': this.onInsertTextart, 'insert:textart': this.onInsertTextart,
'change:scalespn': this.onClickChangeScaleInMenu.bind(me), 'change:scalespn': this.onClickChangeScaleInMenu.bind(me),
'click:customscale': this.onScaleClick.bind(me) 'click:customscale': this.onScaleClick.bind(me),
'home:open' : this.onHomeOpen
}, },
'FileMenu': { 'FileMenu': {
'menu:hide': me.onFileMenu.bind(me, 'hide'), 'menu:hide': me.onFileMenu.bind(me, 'hide'),
@ -1739,26 +1740,48 @@ define([
return; return;
} }
listStyles.menuPicker.store.reset([]); // remove all
var mainController = this.getApplication().getController('Main'); var mainController = this.getApplication().getController('Main');
_.each(styles, function(style){ var count = listStyles.menuPicker.store.length;
listStyles.menuPicker.store.add({ var rec = listStyles.menuPicker.getSelectedRec();
imageUrl: style.asc_getImage(), if (count>0 && count==styles.length) {
name : style.asc_getName(), var data = listStyles.menuPicker.dataViewItems;
tip : mainController.translationTable[style.get_Name()] || style.get_Name(), data && _.each(styles, function(style, index){
uid : Common.UI.getId() 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);
}); });
}); } else {
var arr = [];
if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) { _.each(styles, function(style){
listStyles.fillComboView(listStyles.menuPicker.store.at(0), true); arr.push({
listStyles.selectByIndex(0); 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; 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) { onApiCoAuthoringDisconnect: function(enableDownload) {
this.toolbar.setMode({isDisconnected:true, enableDownload: !!enableDownload}); this.toolbar.setMode({isDisconnected:true, enableDownload: !!enableDownload});
this.editMode = false; this.editMode = false;

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

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

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

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

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

@ -1553,6 +1553,13 @@ define([
me.fireEvent('file:open'); me.fireEvent('file:open');
me.setTab(tab); 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) { rendererComponents: function(html) {