[PE] Add handler to zoom buttons in view tab

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

@@ -57,13 +57,17 @@ define([
         initialize: function () {
         },
         onLaunch: function () {
-            this._state = {};
+            this._state = {
+                zoom_type: undefined,
+                zoom_percent: undefined
+            };
+            Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
         },
 
         setApi: function (api) {
             if (api) {
                 this.api = api;
-
+                this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this));
             }
             return this;
         },
@@ -76,7 +80,9 @@ define([
             });
             this.addListeners({
                 'ViewTab': {
-
+                    'zoom:value': _.bind(this.onChangeZoomValue, this),
+                    'zoom:toslide': _.bind(this.onBtnZoomTo, this, 'toslide'),
+                    'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth')
                 },
                 'Statusbar': {
 
@@ -97,5 +103,43 @@ define([
             this.SetDisabled(true);
         },
 
+        onZoomChange: function (percent, type) {
+            if (this._state.zoom_type !== type) {
+                this.view.btnFitToSlide.toggle(type == 2, true);
+                this.view.btnFitToWidth.toggle(type == 1, true);
+                this._state.zoom_type = type;
+            }
+            if (this._state.zoom_percent !== percent) {
+                this.view.cmbZoom.setValue(percent, percent + '%');
+                this._state.zoom_percent = percent;
+            }
+        },
+
+        onAppReady: function (config) {
+            var me = this;
+            (new Promise(function (accept, reject) {
+                accept();
+            })).then(function(){
+                me.view.setEvents();
+            });
+        },
+
+        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;
+            if (!btn.pressed)
+                this.api.zoomCustomMode();
+            else
+                this.api[type === 'toslide' ? 'zoomFitToPage' : 'zoomFitToWidth']();
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        }
+
     }, PE.Controllers.ViewTab || {}));
 });

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

@@ -46,13 +46,22 @@ define([
     'use strict';
 
     PE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
-        function setEvents() {
-            var me = this;
-        }
-
         return {
             options: {},
 
+            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]);
+                });
+                me.btnFitToWidth && me.btnFitToWidth.on('click', function () {
+                    me.fireEvent('zoom:towidth', [me.btnFitToWidth]);
+                });
+            },
+
             initialize: function (options) {
                 Common.UI.BaseView.prototype.initialize.call(this);
                 this.toolbar = options.toolbar;
@@ -92,17 +101,21 @@ define([
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-ic-zoomtoslide',
                     caption: this.textFitToSlide,
+                    toggleGroup: 'view-zoom',
+                    enableToggle: true,
                     dataHint: '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'medium'
                 });
-                this.lockedControls.push(this.btnFitToPage);
+                this.lockedControls.push(this.btnFitToSlide);
 
                 this.btnFitToWidth = new Common.UI.Button({
                     parentEl: $host.find('#slot-btn-ftw'),
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-ic-zoomtowidth',
                     caption: this.textFitToWidth,
+                    toggleGroup: 'view-zoom',
+                    enableToggle: true,
                     dataHint: '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'medium'