[SSE] Scale to Fit (dropdown menu)

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

@@ -71,7 +71,8 @@ define([
 
             this.addListeners({
                 'Toolbar': {
-                    'change:compact': this.onClickChangeCompact.bind(me)
+                    'change:compact': this.onClickChangeCompact.bind(me),
+                    'change:scalespn': this.onClickChangeScaleInMenu.bind(me)
                 },
                 'FileMenu': {
                     'menu:hide': me.onFileMenu.bind(me, 'hide'),
@@ -358,6 +359,7 @@ define([
                 toolbar.btnPageOrient.menu.on('item:click',                 _.bind(this.onPageOrientSelect, this));
                 toolbar.btnPageMargins.menu.on('item:click',                _.bind(this.onPageMarginsSelect, this));
                 toolbar.mnuPageSize.on('item:click',                        _.bind(this.onPageSizeClick, this));
+                toolbar.mnuScale.on('item:click',                           _.bind(this.onScaleClick, this));
                 toolbar.btnPrintArea.menu.on('item:click',                  _.bind(this.onPrintAreaClick, this));
                 toolbar.btnPrintArea.menu.on('show:after',                  _.bind(this.onPrintAreaMenuOpen, this));
                 toolbar.btnImgGroup.menu.on('item:click',                   _.bind(this.onImgGroupSelect, this));
@@ -367,7 +369,6 @@ define([
                 toolbar.btnImgForward.on('click',                           this.onImgArrangeSelect.bind(this, 'forward'));
                 toolbar.btnImgBackward.on('click',                          this.onImgArrangeSelect.bind(this, 'backward'));
                 toolbar.btnEditHeader.on('click',                           _.bind(this.onEditHeaderClick, this));
-                toolbar.btnScale.on('click',                                _.bind(this.onScaleClick, this));
                 Common.Gateway.on('insertimage',                            _.bind(this.insertImage, this));
 
                 this.onSetupCopyStyleButton();
@@ -1759,6 +1760,7 @@ define([
             this.onApiPageOrient(opt.asc_getOrientation());
             this.onApiPageSize(opt.asc_getWidth(), opt.asc_getHeight());
             this.onApiPageMargins(props.asc_getPageMargins());
+            this.onChangeScaleSettings(opt.asc_getFitToWidth(),opt.asc_getFitToHeight(),opt.asc_getScale());
 
             this.api.asc_isLayoutLocked(currentSheet) ? this.onApiLockDocumentProps(currentSheet) : this.onApiUnLockDocumentProps(currentSheet);
             this.toolbar.lockToolbar(SSE.enumLock.printAreaLock, this.api.asc_isPrintAreaLocked(currentSheet), {array: [this.toolbar.btnPrintArea]});
@@ -1821,6 +1823,39 @@ define([
             }
         },
 
+        onChangeScaleSettings: function(width, height, scale) {
+            var me = this;
+            if (this.toolbar.btnScale.menu) {
+                this.toolbar.btnScale.menu.clearAll();
+                if (width !== undefined) {
+                    if ((width === 0 || width === null) && (height === 0 || height === null) && scale === 100) {
+                        this._state.scale = 0;
+                    } else if (width === 1 && height === 1) {
+                        this._state.scale = 1;
+                    } else if (width === 1 && (height === 0 || height === null)) {
+                        this._state.scale = 2;
+                    } else if ((width === 0 || width === null) && height === 1) {
+                        this._state.scale = 3;
+                    } else if ((width === 0 || width === null) && (height === 0 || height === null)) {
+                        this._state.scale = 4;
+                    } else {
+                        this._state.scale = 5;
+                    }
+                    if (this.toolbar.spnScale) {
+                        this.toolbar.spnScale.setValue(scale);
+                    }
+                } else if (scale === undefined) {
+                    this.toolbar.spnScale.setValue(this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale());
+                }
+                _.each(this.toolbar.btnScale.menu.items, function(item){
+                    if (item.value === me._state.scale) {
+                        item.setChecked(true);
+                        return false;
+                    }
+                }, this);
+            }
+        },
+
         onApiLockDocumentProps: function(nIndex) {
             if (this._state.lock_doc!==true && nIndex == this.api.asc_getActiveWorksheetIndex()) {
                 this.toolbar.lockToolbar(SSE.enumLock.docPropsLock, true, {array: [this.toolbar.btnPageSize, this.toolbar.btnPageMargins, this.toolbar.btnPageOrient, this.toolbar.btnScale]});
@@ -3359,8 +3394,34 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onScaleClick: function(btn) {
+        onClickChangeScaleInMenu: function(scale) {
+            if (this.api) {
+                this.api.asc_SetPrintScale(0, 0, scale);
+                this.onChangeScaleSettings(0, 0, scale);
+            }
+        },
+
+        onScaleClick: function(menu, item, state) {
             var me = this;
+            if (me.api) {
+                switch (item.value) {
+                    case 0:
+                        me.api.asc_SetPrintScale(0, 0, 100);
+                        me._state.scale = 0;
+                        break;
+                    case 1:
+                        me.api.asc_SetPrintScale(1, 1, 100);
+                        me._state.scale = 1;
+                        break;
+                    case 2:
+                        me.api.asc_SetPrintScale(1, 0, 100);
+                        me._state.scale = 2;
+                        break;
+                    case 3:
+                        me.api.asc_SetPrintScale(0, 1, 100);
+                        me._state.scale = 3;
+                        break;
+                    case 5:
                         var win = new SSE.Views.ScaleDialog({
                             api: me.api,
                             props: null,
@@ -3368,12 +3429,19 @@ define([
                                 if (dlg == 'ok') {
                                     if (me.api && result) {
                                         me.api.asc_SetPrintScale(result.width, result.height, result.scale);
+                                        me.onChangeScaleSettings(result.width, result.height, result.scale);
                                     }
+                                    me._state.scale = 5;
+                                } else {
+                                    me.onChangeScaleSettings();
                                 }
                                 Common.NotificationCenter.trigger('edit:complete');
                             }
                         });
                         win.show();
+                        break;
+                }
+            }
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },

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

@@ -1345,13 +1345,62 @@ define([
                     lock        : [_set.editCell, _set.selRangeEdit, _set.headerLock, _set.lostConnect, _set.coAuth]
                 });
 
+                me.mnuCustomScale = new Common.UI.MenuItem({
+                    template: _.template([
+                        '<div class="checkable" style="padding: 5px 20px; font-weight: normal;line-height: 1.42857143;color: #444444;font-size: 11px;height: 32px;">',
+                        '<label class="title" style="">' + me.textScale + '</label>',
+                        '<div id="spn-scale-settings" style="float: right;"></div>',
+                        '</div>'
+                    ].join('')),
+                    stopPropagation: true,
+                    value: 4,
+                    toggleGroup: 'menuScale',
+                    checkable: true
+                });
+
                 me.btnScale = new Common.UI.Button({
                     id: 'tlbtn-scale',
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'btn-editheader',
                     caption: me.capBtnScale,
-                    lock: [_set.docPropsLock, _set.lostConnect, _set.coAuth]
+                    lock: [_set.docPropsLock, _set.lostConnect, _set.coAuth],
+                    menu: new Common.UI.Menu({
+                        items: [
+                            {
+                                caption: me.textActualSize,
+                                checkable: true,
+                                toggleGroup: 'menuScale',
+                                value: 0
+                            },
+                            {
+                                caption: me.textFitSheetOnOnePage,
+                                checkable: true,
+                                toggleGroup: 'menuScale',
+                                value: 1
+                            },
+                            {
+                                caption: me.textFitAllColumnsOnOnePage,
+                                checkable: true,
+                                toggleGroup: 'menuScale',
+                                value: 2
+                            },
+                            {
+                                caption: me.textFitAllRowsOnOnePage,
+                                checkable: true,
+                                toggleGroup: 'menuScale',
+                                value: 3
+                            },
+                            me.mnuCustomScale,
+                            {caption: '--'},
+                            {   caption: me.textScaleCustom,
+                                checkable: true,
+                                toggleGroup: 'menuScale',
+                                value: 5
+                            }
+                        ]})
                 });
+                me.mnuScale = me.btnScale.menu;
+                me.mnuScale.on('show:after', _.bind(me.onAfterShowMenuScale, me));
 
                 me.btnImgAlign = new Common.UI.Button({
                     cls: 'btn-toolbar x-huge icon-top',
@@ -1422,6 +1471,28 @@ define([
             return this;
         },
 
+        onAfterShowMenuScale: function () {
+            var me = this;
+            if (!this.spnScale) {
+                this.spnScale = new Common.UI.MetricSpinner({
+                    el: $('#spn-scale-settings'),
+                    step: 1,
+                    width: 80,
+                    defaultUnit: "%",
+                    maxValue: 400,
+                    minValue: 10,
+                    defaultValue: '100 %'
+                });
+                if (this.api) {
+                    var scale = this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale();
+                    this.spnScale.setValue(scale);
+                }
+                this.spnScale.on('change', _.bind(function(field){
+                    me.fireEvent('change:scalespn', [field.getNumberValue()]);
+                }, this));
+            }
+        },
+
         render: function (mode) {
             var me = this;
 
@@ -2368,6 +2439,12 @@ define([
         tipInsertTable: 'Insert table',
         textTabFormula: 'Formula',
         capBtnScale: 'Scale to Fit',
-        tipScale: 'Scale to Fit'
+        tipScale: 'Scale to Fit',
+        textActualSize: 'Actual Size',
+        textFitSheetOnOnePage: 'Fit sheet on One Page',
+        textFitAllColumnsOnOnePage: 'Fit All Columns on One Page',
+        textFitAllRowsOnOnePage: 'Fit All Rows on One Page',
+        textScaleCustom: 'Custom',
+        textScale: 'Scale'
     }, SSE.Views.Toolbar || {}));
 });