Merge pull request #1420 from ONLYOFFICE/fix/bug_54241

Fix/bug 54241

apps/documenteditor/main/app/controller/ViewTab.js

@@ -80,7 +80,6 @@ define([
             });
             this.addListeners({
                 'ViewTab': {
-                    'zoom:value': _.bind(this.onChangeZoomValue, this),
                     'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'),
                     'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
                     'rulers:change': _.bind(this.onChangeRulers, this),
@@ -125,6 +124,11 @@ define([
                 })).then(function(){
                     me.view.setEvents();
 
+                    me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me))
+                        .on('changed:before',_.bind(me.onZoomChanged, me, true))
+                        .on('changed:after', _.bind(me.onZoomChanged, me, false))
+                        .on('combo:blur',    _.bind(me.onComboBlur, me, false));
+
                     me.getApplication().getController('LeftMenu').leftMenu.btnNavigation.on('toggle', function (btn, state) {
                         if (state !== me.view.btnNavigation.pressed)
                             me.view.turnNavigation(state);
@@ -164,13 +168,37 @@ define([
             this.view.btnFitToWidth.toggle(type == 1, true);
 
             this.view.cmbZoom.setValue(percent, percent + '%');
+
+            this._state.zoomValue = percent;
         },
 
-        onChangeZoomValue: function (value) {
+        applyZoom: function (value) {
-            this.api.zoom(value);
+            var val = Math.max(25, Math.min(500, value));
+            this.api.zoom(val);
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
+        onSelectedZoomValue: function (combo, record) {
+            this.applyZoom(record.value);
+        },
+
+        onZoomChanged: function (before, combo, record, e) {
+            var value = parseFloat(record.value);
+            if (before) {
+                var expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(%)?\\s*$');
+                if (!expr.exec(record.value)) {
+                    this.view.cmbZoom.setValue(this._state.zoomValue, this._state.zoomValue + '%');
+                    Common.NotificationCenter.trigger('edit:complete', this.view);
+                }
+            } else {
+                if (this._state.zoomValue !== value && !isNaN(value)) {
+                    this.applyZoom(value);
+                } else if (record.value !== this._state.zoomValue + '%') {
+                    this.view.cmbZoom.setValue(this._state.zoomValue, this._state.zoomValue + '%');
+                }
+            }
+        },
+
         onBtnZoomTo: function(type) {
             var btn, func;
             if ( type === 'topage' ) {
@@ -214,5 +242,9 @@ define([
             }
         },
 
+        onComboBlur: function() {
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        }
+
     }, DE.Controllers.ViewTab || {}));
 });

apps/documenteditor/main/app/view/ViewTab.js

@@ -54,9 +54,6 @@ define([
                 me.btnNavigation.on('click', function (btn, e) {
                     me.fireEvent('viewtab:navigation', [btn.pressed]);
                 });
-                me.cmbZoom.on('selected', function (combo, record) {
-                    me.fireEvent('zoom:value', [record.value]);
-                });
                 me.btnFitToPage.on('click', function () {
                     me.fireEvent('zoom:topage');
                 });
@@ -75,6 +72,8 @@ define([
                 me.btnDarkDocument.on('click', _.bind(function () {
                     me.fireEvent('darkmode:change');
                 }, me));
+                me.cmbZoom.on('combo:focusin', _.bind(this.onComboOpen, this, false));
+                me.cmbZoom.on('show:after', _.bind(this.onComboOpen, this, true));
             },
 
             initialize: function (options) {
@@ -104,7 +103,7 @@ define([
                     el: $host.find('#slot-field-zoom'),
                     cls: 'input-group-nr',
                     menuStyle: 'min-width: 55px;',
-                    editable: false,
+                    editable: true,
                     disabled: true,
                     data: [
                         { displayValue: "50%", value: 50 },
@@ -242,6 +241,14 @@ define([
                 this.btnNavigation && this.btnNavigation.toggle(state, true);
             },
 
+            onComboOpen: function (needfocus, combo) {
+                _.delay(function() {
+                    var input = $('input', combo.cmpEl).select();
+                    if (needfocus) input.focus();
+                    else if (!combo.isMenuOpen()) input.one('mouseup', function (e) { e.preventDefault(); });
+                }, 10);
+            },
+
             textNavigation: 'Navigation',
             textZoom: 'Zoom',
             textFitToPage: 'Fit To Page',

apps/presentationeditor/main/app/controller/ViewTab.js

@@ -82,7 +82,6 @@ define([
             });
             this.addListeners({
                 'ViewTab': {
-                    'zoom:value': _.bind(this.onChangeZoomValue, this),
                     'zoom:toslide': _.bind(this.onBtnZoomTo, this, 'toslide'),
                     'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
                     'rulers:change': _.bind(this.onChangeRulers, this),
@@ -141,6 +140,10 @@ define([
                     accept();
                 })).then(function () {
                     me.view.setEvents();
+                    me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me))
+                        .on('changed:before',_.bind(me.onZoomChanged, me, true))
+                        .on('changed:after', _.bind(me.onZoomChanged, me, false))
+                        .on('combo:blur',    _.bind(me.onComboBlur, me, false));
                 });
 
                 var menuItems = [],
@@ -165,13 +168,6 @@ define([
             }
         },
 
-        onChangeZoomValue: function (value) {
-            this._state.zoom_type = undefined;
-            this._state.zoom_percent = undefined;
-            this.api.zoom(value);
-            Common.NotificationCenter.trigger('edit:complete', this.view);
-        },
-
         onBtnZoomTo: function (type, btn) {
             this._state.zoom_type = undefined;
             this._state.zoom_percent = undefined;
@@ -207,5 +203,38 @@ define([
             }
         },
 
+        applyZoom: function (value) {
+            this._state.zoom_percent = undefined;
+            this._state.zoom_type = undefined;
+            var val = Math.max(25, Math.min(500, value));
+            this.api.zoom(val);
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        },
+
+        onSelectedZoomValue: function (combo, record) {
+            this.applyZoom(record.value);
+        },
+
+        onZoomChanged: function (before, combo, record, e) {
+            var value = parseFloat(record.value);
+            if (before) {
+                var expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(%)?\\s*$');
+                if (!expr.exec(record.value)) {
+                    this.view.cmbZoom.setValue(this._state.zoom_percent, this._state.zoom_percent + '%');
+                    Common.NotificationCenter.trigger('edit:complete', this.view);
+                }
+            } else {
+                if (this._state.zoom_percent !== value && !isNaN(value)) {
+                    this.applyZoom(value);
+                } else if (record.value !== this._state.zoom_percent + '%') {
+                    this.view.cmbZoom.setValue(this._state.zoom_percent, this._state.zoom_percent + '%');
+                }
+            }
+        },
+
+        onComboBlur: function() {
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        }
+
     }, PE.Controllers.ViewTab || {}));
 });

apps/presentationeditor/main/app/view/ViewTab.js

@@ -51,9 +51,6 @@ define([
 
             setEvents: function () {
                 var me = this;
-                me.cmbZoom && me.cmbZoom.on('selected', function (combo, record) {
-                    me.fireEvent('zoom:value', [record.value]);
-                });
                 me.btnFitToSlide && me.btnFitToSlide.on('click', function () {
                     me.fireEvent('zoom:toslide', [me.btnFitToSlide]);
                 });
@@ -72,6 +69,8 @@ define([
                 me.chNotes && me.chNotes.on('change', _.bind(function (checkbox, state) {
                     me.fireEvent('notes:change', [me.chNotes, state === 'checked']);
                 }, me));
+                me.cmbZoom.on('combo:focusin', _.bind(this.onComboOpen, this, false));
+                me.cmbZoom.on('show:after', _.bind(this.onComboOpen, this, true));
             },
 
             initialize: function (options) {
@@ -89,7 +88,7 @@ define([
                     el: $host.find('#slot-field-zoom'),
                     cls: 'input-group-nr',
                     menuStyle: 'min-width: 55px;',
-                    editable: false,
+                    editable: true,
                     lock: [_set.disableOnStart],
                     data: [
                         { displayValue: "50%", value: 50 },
@@ -221,6 +220,14 @@ define([
                 }, this);
             },
 
+            onComboOpen: function (needfocus, combo) {
+                _.delay(function() {
+                    var input = $('input', combo.cmpEl).select();
+                    if (needfocus) input.focus();
+                    else if (!combo.isMenuOpen()) input.one('mouseup', function (e) { e.preventDefault(); });
+                }, 10);
+            },
+
             textZoom: 'Zoom',
             textFitToSlide: 'Fit To Slide',
             textFitToWidth: 'Fit To Width',

apps/spreadsheeteditor/main/app/controller/ViewTab.js

@@ -85,6 +85,9 @@ define([
             });
             this.addListeners({
                 'ViewTab': {
+                    'zoom:selected': _.bind(this.onSelectedZoomValue, this),
+                    'zoom:changedbefore': _.bind(this.onZoomChanged, this),
+                    'zoom:changedafter': _.bind(this.onZoomChanged, this),
                     'viewtab:freeze': this.onFreeze,
                     'viewtab:freezeshadow': this.onFreezeShadow,
                     'viewtab:formula': this.onViewSettings,
@@ -151,13 +154,36 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
-        onZoom: function(zoom) {
+        applyZoom: function (value) {
-            if (this.api) {
+            var val = Math.max(25, Math.min(500, value));
-                this.api.asc_setZoom(zoom/100);
+            this.api.asc_setZoom(val/100);
-            }
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
+        onSelectedZoomValue: function (combo, record) {
+            this.applyZoom(record.value);
+        },
+
+        onZoomChanged: function (before, combo, record, e) {
+            var value = parseFloat(record.value);
+            if (this._state.zoomValue === undefined) {
+                this._state.zoomValue = 100;
+            }
+            if (before) {
+                var expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(%)?\\s*$');
+                if (!expr.exec(record.value)) {
+                    this.view.cmbZoom.setValue(this._state.zoomValue, this._state.zoomValue + '%');
+                    Common.NotificationCenter.trigger('edit:complete', this.view);
+                }
+            } else {
+                if (this._state.zoomValue !== value && !isNaN(value)) {
+                    this.applyZoom(value);
+                } else if (record.value !== this._state.zoomValue + '%') {
+                    this.view.cmbZoom.setValue(this._state.zoomValue, this._state.zoomValue + '%');
+                }
+            }
+        },
+
         onViewSettings: function(type, value){
             if (this.api) {
                 switch (type) {
@@ -245,8 +271,10 @@ define([
         },
 
         onApiZoomChange: function(zf, type){
+            console.log('zoom');
             var value = Math.floor((zf + .005) * 100);
             this.view.cmbZoom.setValue(value, value + '%');
+            this._state.zoomValue = value;
         },
 
         onThemeChanged: function () {

apps/spreadsheeteditor/main/app/view/ViewTab.js

@@ -76,15 +76,22 @@ define([
             this.chZeros.on('change', function (field, value) {
                 me.fireEvent('viewtab:zeros', [3, value]);
             });
-            this.cmbZoom.on('selected', function(combo, record) {
-                me.fireEvent('viewtab:zoom', [record.value]);
-            });
             this.chToolbar.on('change', function (field, value) {
                 me.fireEvent('viewtab:showtoolbar', [field, value !== 'checked']);
             });
             this.chStatusbar.on('change', function (field, value) {
                 me.fireEvent('statusbar:setcompact', [field, value === 'checked']);
             });
+            this.cmbZoom.on('selected', function (combo, record) {
+                me.fireEvent('zoom:selected', [combo, record]);
+            }).on('changed:before', function (combo, record) {
+                me.fireEvent('zoom:changedbefore', [true, combo, record]);
+            }).on('changed:after', function (combo, record) {
+                me.fireEvent('zoom:changedafter', [false, combo, record]);
+            }).on('combo:blur', function () {
+                me.fireEvent('editcomplete', me);
+            }).on('combo:focusin', _.bind(this.onComboOpen, this, false))
+              .on('show:after', _.bind(this.onComboOpen, this, true));
         }
 
         return {
@@ -160,7 +167,7 @@ define([
                     cls         : 'input-group-nr',
                     menuStyle   : 'min-width: 55px;',
                     hint        : me.tipFontSize,
-                    editable    : false,
+                    editable    : true,
                     lock        : [_set.coAuth, _set.lostConnect, _set.editCell],
                     data        : [
                         { displayValue: "50%", value: 50 },
@@ -396,6 +403,14 @@ define([
                 }, this);
             },
 
+            onComboOpen: function (needfocus, combo) {
+                _.delay(function() {
+                    var input = $('input', combo.cmpEl).select();
+                    if (needfocus) input.focus();
+                    else if (!combo.isMenuOpen()) input.one('mouseup', function (e) { e.preventDefault(); });
+                }, 10);
+            },
+
             capBtnSheetView: 'Sheet View',
             capBtnFreeze: 'Freeze Panes',
             textZoom: 'Zoom',