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

Refactoring dataview component

Browse source
This commit is contained in:
Julia Radzhabova 2021-09-08 18:42:05 +03:00
parent 28c082312a
commit f872be81c9
12 changed files with 56 additions and 24 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

@ -91,6 +91,7 @@ define([
this.rendered = false; this.rendered = false;
this.needFillComboView = false; this.needFillComboView = false;
this.minWidth = this.options.minWidth; this.minWidth = this.options.minWidth;
this.delayRenderTips = this.options.delayRenderTips || false;
this.fieldPicker = new Common.UI.DataView({ this.fieldPicker = new Common.UI.DataView({
cls: 'field-picker', cls: 'field-picker',
@ -102,7 +103,8 @@ define([
'<span class="title"><%= title %></span>', '<span class="title"><%= title %></span>',
'<% } %>', '<% } %>',
'</div>' '</div>'
].join('')) ].join('')),
delayRenderTips: this.delayRenderTips
}); });
this.openButton = new Common.UI.Button({ this.openButton = new Common.UI.Button({
@ -137,7 +139,8 @@ define([
'<span class="title"><%= title %></span>', '<span class="title"><%= title %></span>',
'<% } %>', '<% } %>',
'</div>' '</div>'
].join('')) ].join('')),
delayRenderTips: this.delayRenderTips
}); });
// Handle resize // Handle resize

23
apps/common/main/lib/component/DataView.js
View file

@ -272,6 +272,7 @@ define([
me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true; me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false; me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
me.tabindex = me.options.tabindex || 0; me.tabindex = me.options.tabindex || 0;
me.delayRenderTips = me.options.delayRenderTips || false;
if (me.parentMenu) if (me.parentMenu)
me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0); me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
me.rendered = false; me.rendered = false;
@ -454,14 +455,28 @@ define([
var idx = _.indexOf(this.store.models, record); var idx = _.indexOf(this.store.models, record);
this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx)); this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx));
if (record.get('tip')) { var me = this,
var view_el = $(view.el); view_el = $(view.el),
tip = record.get('tip');
if (tip) {
if (this.delayRenderTips)
view_el.one('mouseenter', function(){ // hide tooltip when mouse is over menu
view_el.attr('data-toggle', 'tooltip'); view_el.attr('data-toggle', 'tooltip');
view_el.tooltip({ view_el.tooltip({
title : record.get('tip'), title : tip,
placement : 'cursor', placement : 'cursor',
zIndex : this.tipZIndex zIndex : me.tipZIndex
}); });
view_el.mouseenter();
});
else {
view_el.attr('data-toggle', 'tooltip');
view_el.tooltip({
title : tip,
placement : 'cursor',
zIndex : me.tipZIndex
});
}
} }
this.listenTo(view, 'change', this.onChangeItem); this.listenTo(view, 'change', this.onChangeItem);

9
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -235,7 +235,8 @@ define([
cls: 'combo-chart-style', cls: 'combo-chart-style',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
delayRenderTips: true
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>">', '<div class="item-icon-box" id="<%= id %>">',
@ -274,7 +275,8 @@ define([
restoreHeight: 465, restoreHeight: 465,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>'),
delayRenderTips: true
}); });
}); });
this.btnChartType.render($('#chart-button-type')); this.btnChartType.render($('#chart-button-type'));
@ -444,7 +446,8 @@ define([
cls: 'combo-chart-style', cls: 'combo-chart-style',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
delayRenderTips: true
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({

3
apps/documenteditor/main/app/view/ImageSettings.js
View file

@ -139,7 +139,8 @@ define([
cls: 'combo-chart-style', cls: 'combo-chart-style',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-10, 0' dataHintOffset: '-10, 0',
delayRenderTips: true
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>" style="">', '<div class="item-icon-box" id="<%= id %>" style="">',

3
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1586,7 +1586,8 @@ define([
cls: 'combo-chart-style', cls: 'combo-chart-style',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
delayRenderTips: true
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>">', '<div class="item-icon-box" id="<%= id %>">',

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

@ -754,7 +754,8 @@ define([
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="52" width="72"></div>'), itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="52" width="72"></div>'),
style: 'max-height: 350px;' style: 'max-height: 350px;',
delayRenderTips: true
}); });
}); });
this.btnTableTemplate.render($('#table-btn-template')); this.btnTableTemplate.render($('#table-btn-template'));

6
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -226,7 +226,8 @@ define([
restoreHeight: 465, restoreHeight: 465,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>'),
delayRenderTips: true
}); });
}); });
this.btnChartType.render($('#chart-button-type')); this.btnChartType.render($('#chart-button-type'));
@ -386,7 +387,8 @@ define([
cls: 'combo-chart-style', cls: 'combo-chart-style',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
delayRenderTips: true
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({

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

@ -695,7 +695,8 @@ define([
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="52" width="72"></div>'), itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="52" width="72"></div>'),
style: 'max-height: 350px;' style: 'max-height: 350px;',
delayRenderTips: true
}); });
}); });
this.btnTableTemplate.render($('#table-btn-template')); this.btnTableTemplate.render($('#table-btn-template'));

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

@ -2021,7 +2021,8 @@ define([
restoreHeight: 300, restoreHeight: 300,
style: 'max-height: 300px;', style: 'max-height: 300px;',
store: me.getCollection('TableTemplates'), store: me.getCollection('TableTemplates'),
itemTemplate: _.template('<div class="item-template"><img src="<%= imageUrl %>" id="<%= id %>" style="width:60px;height:44px;"></div>') itemTemplate: _.template('<div class="item-template"><img src="<%= imageUrl %>" id="<%= id %>" style="width:60px;height:44px;"></div>'),
delayRenderTips: true
}); });
picker.on('item:click', function(picker, item, record) { picker.on('item:click', function(picker, item, record) {

6
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -1001,7 +1001,8 @@ define([
cls: 'combo-chart-style', cls: 'combo-chart-style',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
delayRenderTips: true
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({
@ -1053,7 +1054,8 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 272, menuMaxHeight: 272,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-spark-style' cls: 'combo-spark-style',
delayRenderTips: true
}); });
this.cmbSparkStyle.render($('#spark-combo-style')); this.cmbSparkStyle.render($('#spark-combo-style'));
this.cmbSparkStyle.openButton.menu.cmpEl.css({ this.cmbSparkStyle.openButton.menu.cmpEl.css({

3
apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
View file

@ -178,7 +178,8 @@ define([
'<span class="title"><%= title %></span>', '<span class="title"><%= title %></span>',
'<% } %>', '<% } %>',
'</div>' '</div>'
].join('')) ].join('')),
delayRenderTips: true
}); });
this.stylesList.on('item:select', _.bind(this.onSelectStyles, this)); this.stylesList.on('item:select', _.bind(this.onSelectStyles, this));

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

@ -531,7 +531,8 @@ define([
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="44" width="60"></div>'), itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="44" width="60"></div>'),
style: 'max-height: 325px;' style: 'max-height: 325px;',
delayRenderTips: true
}); });
}); });
this.btnTableTemplate.render($('#table-btn-template')); this.btnTableTemplate.render($('#table-btn-template'));