pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 22:30:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring resizing combodataview in toolbar

Browse Source
This commit is contained in:
Julia Radzhabova
2024-02-07 12:11:02 +03:00
parent 5567a95bce
commit bb55596b60
12 changed files with 114 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
apps/common/main/lib/component/ComboDataView.js
View File

@ -142,9 +142,6 @@ define([
this.openButton.menu.setInnerMenu([{menu: this.menuPicker, index: 0}]);
}
// Handle resize
setInterval(_.bind(this.checkSize, this), 500);
if (this.options.el) {
this.render();
}
@ -200,6 +197,8 @@ define([
});
}
me.autoWidth && me.cmpEl.addClass('auto-width');
me.fieldPicker.on('item:select', _.bind(me.onFieldPickerSelect, me));
me.menuPicker.on('item:select', _.bind(me.onMenuPickerSelect, me));
me.fieldPicker.on('item:click', _.bind(me.onFieldPickerClick, me));
@ -211,9 +210,10 @@ define([
me.menuPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false);
Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
Common.NotificationCenter.on('tab:active', _.bind(this.onTabActive, this));
Common.NotificationCenter.on('window:resize', _.bind(this.startCheckSize, this));
me.checkSize();
me.onResize();
me.rendered = true;
me.trigger('render:after', me);
@ -227,17 +227,40 @@ define([
onMoreToggle: function(btn, state) {
if(state) {
this.checkSize();
this.startCheckSize();
}
},
onTabActive: function() {
this.startCheckSize();
},
startCheckSize: function() {
if (!this.cmpEl || !this.cmpEl.is(':visible')) return;
var me = this;
me.checkSize();
if (!me._timer_id) {
me._needCheckSize = 0;
me._timer_id = setInterval(function() {
if (me._needCheckSize++ < 10)
me.checkSize();
else {
clearInterval(me._timer_id);
delete me._timer_id;
}
}, 500);
} else
me._needCheckSize = 0;
},
checkSize: function() {
if (this.cmpEl && this.cmpEl.is(':visible')) {
if(this.autoWidth && this.menuPicker.store.length > 0) {
var wrapWidth = this.$el.width();
if(wrapWidth != this.wrapWidth || this.needFillComboView){
this.wrapWidth = wrapWidth;
this.autoChangeWidth();
wrapWidth = this.autoChangeWidth();
wrapWidth && (this.wrapWidth = wrapWidth);
var picker = this.menuPicker;
var record = picker.getSelectedRec();
@ -248,7 +271,6 @@ define([
var me = this,
width = this.cmpEl.width(),
height = this.cmpEl.height();
if (width < this.minWidth) return;
if (this.rootWidth != width || this.rootHeight != height) {
@ -290,32 +312,13 @@ define([
autoChangeWidth: function() {
if(this.menuPicker.dataViewItems[0]){
var wrapEl = this.$el;
var wrapWidth = wrapEl.width();
var itemEl = this.menuPicker.dataViewItems[0].$el;
var itemWidth = this.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
var fieldPickerEl = this.fieldPicker.$el;
var fieldPickerPadding = parseFloat(fieldPickerEl.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
var fieldPickerBorder = parseFloat(fieldPickerEl.css('border-width'));
var dataviewPaddings = parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-left')) + parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-right'));
var cmbDataViewEl = this.cmpEl;
var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));
var itemsCount = Math.floor((wrapWidth - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
if(itemsCount > this.store.length)
itemsCount = this.store.length;
var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;
var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
if(widthCalc > maxWidth)
widthCalc = maxWidth;
cmbDataViewEl.css('width', widthCalc);
var wrapEl = this.$el,
widthCalc = this.checkAutoWidth(wrapEl, wrapEl.width()),
cmbDataViewEl = this.cmpEl;
if (widthCalc) {
cmbDataViewEl.css('width', widthCalc);
wrapEl.css('width', (widthCalc + parseFloat(wrapEl.css('padding-left')) + parseFloat(wrapEl.css('padding-right'))) + 'px');
}
if(this.initAutoWidth) {
this.initAutoWidth = false;
@ -324,9 +327,50 @@ define([
cmbDataViewEl.css('bottom', '50%');
cmbDataViewEl.css('margin', 'auto 0');
}
return widthCalc;
}
},
checkAutoWidth: function(el, width) {
var $menuPicker = el.find('.menu-picker'),
$fieldPicker = el.find('.field-picker').closest('.view'),
cmbDataViewEl = el.find('.combo-dataview');
if ($menuPicker && $menuPicker.length>0) {
var itemEl = $menuPicker.find('.item'),
storeLength = itemEl.length,
fieldItemEl = $fieldPicker.find('.item');
if (itemEl.length>0) {
itemEl = $(itemEl[0]);
var itemWidth = itemEl.width();
if (itemWidth<1) {
itemWidth = fieldItemEl.length>0 ? $(fieldItemEl[0]).width() : 0;
}
if (itemWidth<1) return;
itemWidth += parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
var fieldPickerPadding = parseFloat($fieldPicker.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
var fieldPickerBorder = parseFloat($fieldPicker.css('border-width'));
var dataView = $fieldPicker.find('.dataview');
var dataviewPaddings = parseFloat(dataView.css('padding-left')) + parseFloat(dataView.css('padding-right'));
var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));
var itemsCount = Math.floor((width - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
if(itemsCount > storeLength)
itemsCount = storeLength;
var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;
var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
if(widthCalc > maxWidth)
widthCalc = maxWidth;
return widthCalc;
}
}
},
onBeforeShowMenu: function(e) {
var me = this;

35
apps/common/main/lib/component/Mixtbar.js
View File

@ -305,7 +305,7 @@ define([
me._timerSetTab = false;
}, 500);
me.setTab(tab);
// me.processPanelVisible(null, true);
// me.processPanelVisible();
if ( !me.isFolded ) {
if ( me.dblclick_timer ) clearTimeout(me.dblclick_timer);
me.dblclick_timer = setTimeout(function () {
@ -337,7 +337,7 @@ define([
this.lastPanel = tab;
panel.addClass('active');
me.setMoreButton(tab, panel);
me.processPanelVisible(null, true, true);
me.processPanelVisible(null, true);
}
if ( panel.length ) {
@ -353,6 +353,7 @@ define([
}
this.fireEvent('tab:active', [tab]);
Common.NotificationCenter.trigger('tab:active',[tab]);
}
},
@ -422,10 +423,8 @@ define([
* hide button's caption to decrease panel width
* ##adopt-panel-width
**/
processPanelVisible: function(panel, now, force) {
processPanelVisible: function(panel, force) {
var me = this;
if ( me._timer_id ) clearTimeout(me._timer_id);
function _fc() {
var $active = panel || me.$panels.filter('.active');
if ( $active && $active.length ) {
@ -502,8 +501,13 @@ define([
data.rightedge = _rightedge;
if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
for (var i=0; i<_flex.length; i++) {
var item = _flex[i];
item.el.css('width', item.width);
var item = _flex[i],
checkedwidth;
if (item.el.find('.combo-dataview').hasClass('auto-width')) {
checkedwidth = Common.UI.ComboDataView.prototype.checkAutoWidth(item.el,
me.$boxpanels.width() - $active.outerWidth() + item.el.width());
}
item.el.css('width', checkedwidth ? (checkedwidth + parseFloat(item.el.css('padding-left')) + parseFloat(item.el.css('padding-right'))) + 'px' : item.width);
data.rightedge = $active.get(0).getBoundingClientRect().right;
}
}
@ -512,11 +516,20 @@ define([
}
};
if ( now === true ) _fc(); else
me._timer_id = setTimeout(function() {
delete me._timer_id;
if (!me._timer_id) {
_fc();
}, 100);
me._needProcessPanel = false;
me._timer_id = setInterval(function() {
if (me._needProcessPanel) {
_fc();
me._needProcessPanel = false;
} else {
clearInterval(me._timer_id);
delete me._timer_id;
}
}, 100);
} else
me._needProcessPanel = true;
},
/**/

2
apps/common/main/lib/controller/Plugins.js
View File

@ -459,7 +459,7 @@ define([
me.viewPlugins.backgroundBtn.menu.on('show:before', onShowBefore);
}
me.toolbar && me.toolbar.isTabActive('plugins') && me.toolbar.processPanelVisible(null, true, true);
me.toolbar && me.toolbar.isTabActive('plugins') && me.toolbar.processPanelVisible(null, true);
var docProtection = me.viewPlugins._state.docProtection;
Common.Utils.lockControls(Common.enumLock.docLockView, docProtection.isReadOnly, {array: me.viewPlugins.lockedControls});
Common.Utils.lockControls(Common.enumLock.docLockForms, docProtection.isFormsOnly, {array: me.viewPlugins.lockedControls});

2
apps/documenteditor/main/app/controller/Toolbar.js
View File

@ -3421,7 +3421,7 @@ define([
me.toolbar.btnPaste.$el.detach().appendTo($box);
me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
me.toolbar.btnCopy.$el.removeClass('split');
me.toolbar.processPanelVisible(null, true, true);
me.toolbar.processPanelVisible(null, true);
}
// if ( config.isDesktopApp ) {

2
apps/pdfeditor/main/app/controller/Toolbar.js
View File

@ -859,7 +859,7 @@ define([
me.toolbar.btnPaste.$el.detach().appendTo($box);
me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
me.toolbar.btnCopy.$el.removeClass('split');
me.toolbar.processPanelVisible(null, true, true);
me.toolbar.processPanelVisible(null, true);
}
}
if ( config.isEdit ) {

2
apps/presentationeditor/main/app/controller/Toolbar.js
View File

@ -2744,7 +2744,7 @@ define([
me.toolbar.btnPaste.$el.detach().appendTo($box);
me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
me.toolbar.btnCopy.$el.removeClass('split');
me.toolbar.processPanelVisible(null, true, true);
me.toolbar.processPanelVisible(null, true);
}
if ( config.isDesktopApp ) {

1
apps/presentationeditor/main/app/view/Animation.js
View File

@ -206,6 +206,7 @@ define([
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:200px;',
autoWidth: true,
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= iconCls %>"></div>',

1
apps/presentationeditor/main/app/view/Transitions.js
View File

@ -143,6 +143,7 @@ define([
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:108px;',
autoWidth: true,
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',

2
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View File

@ -4636,7 +4636,7 @@ define([
me.toolbar.btnPaste.$el.detach().appendTo($box);
me.toolbar.btnPaste.$el.find('button').attr('data-hint-direction', 'bottom');
me.toolbar.btnCopy.$el.removeClass('split');
me.toolbar.processPanelVisible(null, true, true);
me.toolbar.processPanelVisible(null, true);
}
if ( config.canProtect ) {

2
apps/spreadsheeteditor/main/app/template/Toolbar.template
View File

@ -126,7 +126,7 @@
</div>
</div>
<div class="separator long invisible"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 148px;width: 100%;" data-group-width="100%"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="width: 670px; min-width: 148px;" data-group-width="670px"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot" id="slot-btn-replace"></span>

2
apps/spreadsheeteditor/main/index.html
View File

@ -130,7 +130,7 @@
top: 0;
bottom: 0;
left: 854px;
width: inherit;
width: 670px;
height: 44px;
}

2
apps/spreadsheeteditor/main/index.html.deploy
View File

@ -109,7 +109,7 @@
top: 0;
bottom: 0;
left: 854px;
width: inherit;
width: 670px;
height: 44px;
}