From bb55596b6000c063b8bbb4863a3872f75e63c007 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 7 Feb 2024 12:11:02 +0300 Subject: [PATCH] Refactoring resizing combodataview in toolbar --- .../main/lib/component/ComboDataView.js | 116 ++++++++++++------ apps/common/main/lib/component/Mixtbar.js | 35 ++++-- apps/common/main/lib/controller/Plugins.js | 2 +- .../main/app/controller/Toolbar.js | 2 +- apps/pdfeditor/main/app/controller/Toolbar.js | 2 +- .../main/app/controller/Toolbar.js | 2 +- .../main/app/view/Animation.js | 1 + .../main/app/view/Transitions.js | 1 + .../main/app/controller/Toolbar.js | 2 +- .../main/app/template/Toolbar.template | 2 +- apps/spreadsheeteditor/main/index.html | 2 +- apps/spreadsheeteditor/main/index.html.deploy | 2 +- 12 files changed, 114 insertions(+), 55 deletions(-) diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js index f4603396cb..940e7eb1e6 100644 --- a/apps/common/main/lib/component/ComboDataView.js +++ b/apps/common/main/lib/component/ComboDataView.js @@ -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; diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js index 81bd6cf10d..af6f40172d 100644 --- a/apps/common/main/lib/component/Mixtbar.js +++ b/apps/common/main/lib/component/Mixtbar.js @@ -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; }, /**/ diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index 64827f1fa7..e8582363c8 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/apps/common/main/lib/controller/Plugins.js @@ -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}); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 7dc35b34ae..3ad17af79c 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -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 ) { diff --git a/apps/pdfeditor/main/app/controller/Toolbar.js b/apps/pdfeditor/main/app/controller/Toolbar.js index 1d1c128f9b..2ae5ea4a29 100644 --- a/apps/pdfeditor/main/app/controller/Toolbar.js +++ b/apps/pdfeditor/main/app/controller/Toolbar.js @@ -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 ) { diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index bdb371469d..20d3e2ec6e 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -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 ) { diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js index 628d0b8f01..9d9b336261 100644 --- a/apps/presentationeditor/main/app/view/Animation.js +++ b/apps/presentationeditor/main/app/view/Animation.js @@ -206,6 +206,7 @@ define([ itemWidth: itemWidth, itemHeight: itemHeight, style: 'min-width:200px;', + autoWidth: true, itemTemplate: _.template([ '
', '
', diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js index 3af84cd1e8..731a2b68e3 100644 --- a/apps/presentationeditor/main/app/view/Transitions.js +++ b/apps/presentationeditor/main/app/view/Transitions.js @@ -143,6 +143,7 @@ define([ itemWidth: itemWidth, itemHeight: itemHeight, style: 'min-width:108px;', + autoWidth: true, itemTemplate: _.template([ '
', '
', diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 888dec05ca..19c2d47502 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -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 ) { diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template index dd6aa44e7a..1b30cfdb91 100644 --- a/apps/spreadsheeteditor/main/app/template/Toolbar.template +++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template @@ -126,7 +126,7 @@
-
+
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index c70d4f388a..fb7ec67b9a 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -130,7 +130,7 @@ top: 0; bottom: 0; left: 854px; - width: inherit; + width: 670px; height: 44px; } diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy index f9fd5feba3..bb7e2e2d15 100644 --- a/apps/spreadsheeteditor/main/index.html.deploy +++ b/apps/spreadsheeteditor/main/index.html.deploy @@ -109,7 +109,7 @@ top: 0; bottom: 0; left: 854px; - width: inherit; + width: 670px; height: 44px; }