[DE] StatusBar's refactoring. moved functions for changes to ReviewChanges controller

apps/common/main/lib/controller/ReviewChanges.js

@@ -80,6 +80,10 @@ define([
             this.userCollection =   this.getApplication().getCollection('Common.Collections.Users');
 
             this._state = {posx: -1000, posy: -1000, popoverVisible: false};
+
+            Common.NotificationCenter.on('reviewchanges:turn', this.onTurnPreview.bind(this));
+            Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+
         },
         setConfig: function (data, api) {
             this.setApi(api);
@@ -100,15 +104,9 @@ define([
         setMode: function(mode) {
             if ( mode.canReview || mode.isReviewOnly ) {
                 this.view           =   this.createView('Common.Views.ReviewChanges', {
-                    store           :   this.collection,
+                    // store           :   this.collection,
                     popoverChanges  :   this.popoverChanges
                 });
-
-                var tab = {action: 'review', caption: 'Review'};
-                var $panel = this.view.getPanel();
-
-                var toolbar = this.getApplication().getController('Toolbar').getView('Toolbar');
-                toolbar.addTab(tab, $panel, 3);
             }
 
             return this;
@@ -453,11 +451,71 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
+        onTurnPreview: function(state) {
+            if ( this.view.appConfig.isReviewOnly ) {
+                this.view.turnChanges(true);
+            } else
+            if ( this.view.appConfig.canReview ) {
+                state = (state == 'on');
+
+                this.api.asc_SetTrackRevisions(state);
+                Common.localStorage.setItem("de-track-changes", state ? 1 : 0);
+
+                this.view.turnChanges(state);
+            }
+        },
+
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
 
         getView: function(name) {
             return !name && this.view ?
                 this.view : Backbone.Controller.prototype.getView.call(this, name);
         },
+
+        onAppReady: function (config) {
+            if ( config.canReview ) {
+                var me = this;
+
+                this.appConfig = config;
+                (new Promise(function (resolve) {
+                    resolve();
+                })).then(function () {
+                    function _setReviewStatus(state) {
+                        me.view.turnChanges(state);
+                        me.api.asc_SetTrackRevisions(state);
+                    };
+
+                    if ( config.isReviewOnly ) {
+                        me.api.asc_HaveRevisionsChanges() && me.view.markChanges(true);
+
+                        _setReviewStatus(true);
+                    } else
+                    if ( !me.api.asc_IsTrackRevisions() ) {
+                        _setReviewStatus(false);
+                    } else {
+                        me.api.asc_HaveRevisionsChanges() && me.view.markChanges(true);
+
+                        var value = Common.localStorage.getItem("de-track-changes");
+                        if ( value!== null && parseInt(value) == 1) {
+                            _setReviewStatus(true);
+
+                        } else {
+                            _setReviewStatus(false);
+
+                        }
+                    }
+                });
+            }
+        },
+
+        synchronizeChanges: function() {
+            if ( this.appConfig.canReview ) {
+                this.view.markChanges( this.api.asc_HaveRevisionsChanges() );
+            }
+        },
+
         textInserted: '<b>Inserted:</b>',
         textDeleted: '<b>Deleted:</b>',
         textParaInserted: '<b>Paragraph Inserted</b> ',

apps/common/main/lib/view/ReviewChanges.js

@@ -452,6 +452,17 @@ define([
             this.btnReject.menu.on('item:click', function (menu, item, e) {
                 me.fireEvent('reviewchange:reject', [menu, item]);
             });
+
+            function _click_turnpreview(btn, e) {
+                if ( me.appConfig.canReview ) {
+                    Common.NotificationCenter.trigger('reviewchanges:turn', btn.pressed ? 'on' : 'off');
+                }
+            };
+
+            this.btnsTurnReview.forEach(function(button) {
+                button.on('click', _click_turnpreview.bind(me));
+                Common.NotificationCenter.trigger('edit:complete', me);
+            });
         }
 
         return {
@@ -462,7 +473,7 @@ define([
             initialize: function (options) {
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
-                this.store = this.options.store;
+                // this.store = this.options.store;
                 this.popoverChanges = this.options.popoverChanges;
 
                 this.btnPrev = new Common.UI.Button({
@@ -493,9 +504,11 @@ define([
 
                 this.btnTurnOn = new Common.UI.Button({
                     cls: 'btn-toolbar x-huge icon-top',
-                    iconCls: 'img-commonctrl review-close',
+                    iconCls: 'btn-ic-review',
-                    caption: this.txtTurnon
+                    caption: this.txtTurnon,
+                    enableToggle: true
                 });
+                this.btnsTurnReview = [this.btnTurnOn];
 
                 var me = this;
                 var promise = new Promise( function(resolve) { resolve(); });
@@ -503,6 +516,7 @@ define([
                 Common.NotificationCenter.on('app:ready', function (cfg) {
                     promise.then(function(){
                         me.appConfig = cfg;
+
                         me.btnPrev.updateHint(me.hintPrev);
                         me.btnNext.updateHint(me.hintNext);
                         me.btnTurnOn.updateHint(me.textChangesOn);
@@ -536,6 +550,10 @@ define([
                                 ]
                             })
                         );
+
+                        me.btnAccept.setDisabled(cfg.isReviewOnly);
+                        me.btnReject.setDisabled(cfg.isReviewOnly);
+
                         setEvents.call(me);
                     });
                 });
@@ -577,10 +595,43 @@ define([
                 return this.popover;
             },
 
+            getButton: function(type, parent) {
+                if ( type == 'turn' && parent == 'statusbar' ) {
+                    var button = new Common.UI.Button({
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'btn-ic-review',
+                        hintAnchor  : 'top',
+                        hint        : this.tipReview,
+                        enableToggle: true
+                    });
+
+                    this.btnsTurnReview.push(button);
+
+                    return button;
+                }
+            },
+
             getUserName: function (username) {
                 return Common.Utils.String.htmlEncode(username);
             },
 
+            turnChanges: function(state) {
+                this.btnsTurnReview.forEach(function(button) {
+                    if ( button && button.pressed != state ) {
+                        button.toggle(state, true);
+                    }
+                }, this);
+            },
+
+            markChanges: function(status) {
+                this.btnsTurnReview.forEach(function(button) {
+                    if ( button ) {
+                        var _icon_el = $('.icon', button.cmpEl);
+                        _icon_el[status ? 'addClass' : 'removeClass']('btn-ic-changes');
+                    }
+                }, this);
+            },
+
             textChangesOn: 'Preview changes',
             txtAccept: 'Accept',
             txtAcceptCurrent: 'Accept current Changes',

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

@@ -1167,6 +1167,8 @@ define([
                     if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) {
                         me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights);
                     } else if (!this._isDocReady) {
+                        Common.NotificationCenter.trigger('app:face', me.appOptions);
+
                         me.hidePreloader();
                         me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
                     }
@@ -1559,6 +1561,7 @@ define([
 
             synchronizeChanges: function() {
                 this.getApplication().getController('Statusbar').synchronizeChanges();
+                this.getApplication().getController('Common.Controllers.ReviewChanges').synchronizeChanges();
                 this.getApplication().getController('DocumentHolder').getView('DocumentHolder').hideTips();
                 /** coauthoring begin **/
                 this.getApplication().getController('Toolbar').getView('Toolbar').synchronizeChanges();

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

@@ -61,7 +61,11 @@ define([
                     'settings:apply': _.bind(this.applySettings, this)
                 },
                 'Statusbar': {
-                    'langchanged': this.onLangMenu
+                    'langchanged': this.onLangMenu,
+                    'zoom:value': function(value) {
+                        this.api.zoom(value);
+                        Common.NotificationCenter.trigger('edit:complete', this.statusbar);
+                    }.bind(this)
                 }
             });
         },
@@ -80,17 +84,79 @@ define([
 
         onLaunch: function() {
             this.statusbar = this.createView('Statusbar', {
-                storeUsers: this.getApplication().getCollection('Common.Collections.Users')
+                // storeUsers: this.getApplication().getCollection('Common.Collections.Users')
-            }).render();
+            });
-            this.statusbar.$el.css('z-index', 1);
 
-            this.bindViewEvents(this.statusbar, this.events);
+            var me = this;
+            Common.NotificationCenter.on('app:face', function (cfg) {
+                me.statusbar.render();
+                me.statusbar.$el.css('z-index', 1);
 
-            $('.statusbar #label-zoom').css('min-width', 70);
+                $('.statusbar #label-zoom').css('min-width', 70);
 
-            this.statusbar.zoomMenu.on('item:click', _.bind(this.menuZoomClick, this));
+                if ( cfg.canReview ) {
-            this.statusbar.btnReview.menu.on('item:toggle', _.bind(this.onMenuReviewToggle, this));
+                    var review = DE.getController('Common.Controllers.ReviewChanges').getView();
-            this.statusbar.btnReview.on('toggle', _.bind(this.onReviewToggle, this));
+                    me.btnTurnReview = review.getButton('turn', 'statusbar');
+                    me.btnTurnReview.render( me.statusbar.$layout.find('#btn-doc-review') );
+                } else {
+                    me.statusbar.$el.find('.el-review').hide();
+                }
+
+                if ( !cfg.isEdit ) {
+                    me.statusbar.$el.find('.el-edit')['hide']();
+                }
+            });
+
+            Common.NotificationCenter.on('app:ready', me.onAppReady.bind(this));
+        },
+
+        onAppReady: function (config) {
+            var me = this;
+
+            (new Promise(function(resolve) {
+                resolve();
+            })).then(function () {
+                me.bindViewEvents(me.statusbar, me.events);
+
+                function _process_changestip() {
+                    var showTrackChangesTip = !Common.localStorage.getBool("de-track-changes-tip");
+                    if ( showTrackChangesTip ) {
+                        me.btnTurnReview.updateHint('');
+                        if (me.changesTooltip === undefined)
+                            me.changesTooltip = me.createChangesTip(me.textTrackChanges, 'de-track-changes-tip', false);
+
+                        me.changesTooltip.show();
+                    } else {
+                        me.btnTurnReview.updateHint(me.tipReview);
+                    }
+                }
+
+                var statusbarIsHidden = Common.localStorage.getBool("de-hidden-status");
+                if ( config.canReview && !statusbarIsHidden ) {
+
+                    if ( config.isReviewOnly ) {
+                        _process_changestip();
+                    } else
+                    if ( me.api.asc_IsTrackRevisions() ) {
+                        if ( Common.localStorage.getItem("de-track-changes") ) {
+                            // show tooltip "track changes in this document"
+                            _process_changestip();
+                        } else {
+                            var showNewChangesTip = !Common.localStorage.getBool("de-new-changes");
+                            if ( me.api.asc_HaveRevisionsChanges() && showNewChangesTip ) {
+                                me.btnTurnReview.updateHint('');
+
+                                if (me.newChangesTooltip === undefined)
+                                    me.newChangesTooltip = me.createChangesTip(me.textHasChanges, 'de-new-changes', true);
+
+                                me.newChangesTooltip.show();
+                            } else
+                                me.btnTurnReview.updateHint(me.tipReview);
+                        }
+                    }
+
+                }
+            });
         },
 
         setApi: function(api) {
@@ -101,10 +167,20 @@ define([
             this.statusbar.setApi(api);
         },
 
-        onBtnZoomTo: function(d, b, e) {
+        onBtnZoomTo: function(d, e) {
-            if (!b.pressed)
+            var _btn, _func;
+            if ( d == 'topage' ) {
+                _btn = 'btnZoomToPage';
+                _func = 'zoomFitToPage';
+            } else {
+                _btn = 'btnZoomToWidth';
+                _func = 'zoomFitToWidth';
+            }
+
+            if ( !this.statusbar[ _btn ].pressed )
                 this.api.zoomCustomMode(); else
-                this.api[d=='topage'?'zoomFitToPage':'zoomFitToWidth']();
+                this.api[ _func ]();
+
             Common.NotificationCenter.trigger('edit:complete', this.statusbar);
         },
 
@@ -116,11 +192,6 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.statusbar);
         },
 
-        menuZoomClick: function(menu, item) {
-            this.api.zoom(item.value);
-            Common.NotificationCenter.trigger('edit:complete', this.statusbar);
-        },
-
         /*
         *   api events
         * */
@@ -158,68 +229,7 @@ define([
         createDelayedElements: function() {
             this.statusbar.$el.css('z-index', '');
 
-            var value = Common.localStorage.getItem("de-hidden-status"),
+            this.statusbar.btnSetSpelling.toggle(Common.localStorage.getBool("de-settings-spellcheck"), true);
-                statusbarIsHidden = (value !== null && parseInt(value) == 1);
-
-            value = Common.localStorage.getItem("de-settings-spellcheck");
-            this.statusbar.btnSetSpelling.toggle(value===null || parseInt(value) == 1, true);
-
-            if (this.statusbar.mode.canReview) {
-                var me = this;
-                this.reviewChangesPanel = this.getApplication().getController('Common.Controllers.ReviewChanges').getView('Common.Views.ReviewChanges');
-                this.reviewChangesPanel.on('hide', function(){
-                    me.statusbar.mnuChangesPanel.setChecked(false, true);
-                });
-
-                value = Common.localStorage.getItem("de-track-changes-tip");
-                this.showTrackChangesTip = !(value && parseInt(value) == 1) && !this.statusbar.mode.isLightVersion;
-
-                value = Common.localStorage.getItem("de-new-changes");
-                this.showNewChangesTip = !(value && parseInt(value) == 1) && !this.statusbar.mode.isLightVersion;
-
-                if (this.statusbar.mode.isReviewOnly) {
-                    var iconEl = $('.icon', this.statusbar.btnReview.cmpEl);
-                    (this.api.asc_HaveRevisionsChanges()) ? iconEl.removeClass(this.statusbar.btnReviewCls).addClass('btn-ic-changes') : iconEl.removeClass('btn-ic-changes').addClass(this.statusbar.btnReviewCls);
-                    this.statusbar.mnuTrackChanges.setDisabled(true);
-                    this.changeReviewStatus(true);
-                    if (this.showTrackChangesTip && !statusbarIsHidden){
-                        this.statusbar.btnReview.updateHint('');
-                        if (this.changesTooltip===undefined)
-                            this.changesTooltip = this.createChangesTip(this.textTrackChanges, 'de-track-changes-tip', false);
-                        this.changesTooltip.show();
-                    } else
-                        this.statusbar.btnReview.updateHint(this.statusbar.tipReview);
-                } else {
-                    value = Common.localStorage.getItem("de-track-changes");
-                    var doc_review = this.api.asc_IsTrackRevisions();
-                    if (!doc_review)
-                        this.changeReviewStatus(false);
-                    else {
-                        var iconEl = $('.icon', this.statusbar.btnReview.cmpEl);
-                       (this.api.asc_HaveRevisionsChanges()) ? iconEl.removeClass(this.statusbar.btnReviewCls).addClass('btn-ic-changes') : iconEl.removeClass('btn-ic-changes').addClass(this.statusbar.btnReviewCls);
-                        if (value!==null && parseInt(value) == 1) {
-                            this.changeReviewStatus(!this.statusbar.mode.isLightVersion);
-                            // show tooltip "track changes in this document" and change icon
-                            if (this.showTrackChangesTip && !statusbarIsHidden){
-                                this.statusbar.btnReview.updateHint('');
-                                if (this.changesTooltip===undefined)
-                                    this.changesTooltip = this.createChangesTip(this.textTrackChanges, 'de-track-changes-tip', false);
-                                this.changesTooltip.show();
-                            } else
-                                this.statusbar.btnReview.updateHint(this.statusbar.tipReview);
-                        } else {
-                            this.changeReviewStatus(false);
-                            if (this.api.asc_HaveRevisionsChanges() && this.showNewChangesTip && !statusbarIsHidden){
-                                this.statusbar.btnReview.updateHint('');
-                                if (this.newChangesTooltip===undefined)
-                                    this.newChangesTooltip = this.createChangesTip(this.textHasChanges, 'de-new-changes', true);
-                                this.newChangesTooltip.show();
-                            } else
-                                this.statusbar.btnReview.updateHint(this.statusbar.tipReview);
-                        }
-                    }
-                }
-            }
         },
 
         onBtnLanguage: function() {
@@ -249,8 +259,9 @@ define([
         },
 
         onBtnSpelling: function(d, b, e) {
-            Common.localStorage.setItem("de-settings-spellcheck", d.pressed ? 1 : 0);
+            var btn = this.statusbar.btnSetSpelling;
-            this.api.asc_setSpellCheck(d.pressed);
+            Common.localStorage.setItem("de-settings-spellcheck", btn.pressed ? 1 : 0);
+            this.api.asc_setSpellCheck(btn.pressed);
             Common.NotificationCenter.trigger('edit:complete', this.statusbar);
         },
 
@@ -259,70 +270,30 @@ define([
             this.statusbar.btnSetSpelling.toggle(value===null || parseInt(value) == 1, true);
         },
 
-        onMenuReviewToggle: function(menu, item, state, e) {
-            if (!this.statusbar.mode.canReview) return;
-
-            var me = this;
-            if (item.value === 'track') {
-                this.statusbar.btnReview.toggle(state);
-            } else if (item.value === 'panel') {
-                // show/hide Changes panel
-                this.showHideReviewChangesPanel(state);
-            }
-            Common.NotificationCenter.trigger('edit:complete', this.statusbar);
-        },
-
-        onReviewToggle: function(btn, state) {
-            if (!this.statusbar.mode.canReview) return;
-            if (this.statusbar.mode.isReviewOnly) {
-                this.statusbar.btnReview.toggle(true, true);
-            } else {
-                this.changeReviewStatus(state);
-                Common.localStorage.setItem("de-track-changes", state ? 1 : 0);
-            }
-            Common.NotificationCenter.trigger('edit:complete', this.statusbar);
-        },
-
-        changeReviewStatus: function(state) {
-            this.statusbar.btnReview.toggle(state, true);
-            this.statusbar.mnuTrackChanges.setChecked(state, true);
-            this.statusbar.mnuChangesPanel.setChecked(state, true);
-
-            if (this.api) {
-                this.api.asc_SetTrackRevisions(state);
-            }
-            this.showHideReviewChangesPanel(state && !this.statusbar.mode.isLightVersion);
-        },
-
-        showHideReviewChangesPanel: function(state) {
-            this.reviewChangesPanel[state ? 'show' : 'hide']();
-        },
-
         synchronizeChanges: function() {
             this.setStatusCaption('');
-
-            if (this.statusbar.mode.canReview) {
-                var iconEl = $('.icon', this.statusbar.btnReview.cmpEl);
-                (this.api.asc_HaveRevisionsChanges()) ? iconEl.removeClass(this.statusbar.btnReviewCls).addClass('btn-ic-changes') : iconEl.removeClass('btn-ic-changes').addClass(this.statusbar.btnReviewCls);
-            }
         },
 
         createChangesTip: function (text, storage, newchanges) {
+            var me = this;
             var tip = new Common.UI.SynchronizeTip({
-                target  : $('#btn-doc-review'),
+                target  : me.btnTurnReview.$el,
                 text    : text,
                 placement: 'top'
             });
-            tip.on('dontshowclick', function() {
+            tip.on({
-                (newchanges) ? this.showNewChangesTip = false : this.showTrackChangesTip = false;
+                'dontshowclick': function() {
-                tip.hide();
+                    Common.localStorage.setItem(storage, 1);
-                Common.localStorage.setItem(storage, 1);
+
-                this.statusbar.btnReview.updateHint(this.statusbar.tipReview);
+                    tip.hide();
-            }, this);
+                    me.btnTurnReview.updateHint(this.tipReview);
-            tip.on('closeclick', function() {
+                },
-                tip.hide();
+                'closeclick': function() {
-                this.statusbar.btnReview.updateHint(this.statusbar.tipReview);
+                    tip.hide();
-            }, this);
+                    me.btnTurnReview.updateHint(this.tipReview);
+                }
+            });
+
             return tip;
         },
 

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

@@ -165,14 +165,30 @@ define([
         },
 
         onLaunch: function() {
+            var me = this;
+
             // Create toolbar view
             this.toolbar = this.createView('Toolbar');
 
             // this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
-            var me = this;
+            me.toolbar.on('render:before', function (cmp) {
+            });
+
             Common.NotificationCenter.on('app:ready', function () {
                 // me.setToolbarFolding(true);
             });
+
+            Common.NotificationCenter.on('app:face', function (config) {
+                var _btnsComment = [];
+                if ( config.canReview ) {
+                    var tab = {action: 'review', caption: 'Review'};
+                    var $panel = DE.getController('Common.Controllers.ReviewChanges').createToolbarPanel();
+
+                    if ( $panel ) {
+                        me.toolbar.addTab(tab, $panel, 3);
+                    }
+                }
+            });
         },
 
         onToolbarAfterRender: function(toolbar) {

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

@@ -79,6 +79,108 @@ define([
             this.fireEvent('langchanged', [this, item.value.code, item.caption]);
         }
 
+        function _onAppReady(config) {
+            var me = this;
+            me.btnZoomToPage.updateHint(me.tipFitPage);
+            me.btnZoomToWidth.updateHint(me.tipFitWidth);
+            me.btnZoomDown.updateHint(me.tipZoomOut + Common.Utils.String.platformKey('Ctrl+-'));
+            me.btnZoomUp.updateHint(me.tipZoomIn + Common.Utils.String.platformKey('Ctrl++'));
+            me.btnDocLanguage.updateHint(me.tipSetDocLang);
+            me.btnSetSpelling.updateHint(me.tipSetSpelling);
+
+            me.btnLanguage.updateHint(me.tipSetLang);
+            me.btnLanguage.cmpEl.on({
+                'show.bs.dropdown': function () {
+                    _.defer(function(){
+                        me.btnLanguage.cmpEl.find('ul').focus();
+                    }, 100);
+                },
+                'hide.bs.dropdown': function () {
+                    _.defer(function(){
+                        me.api.asc_enableKeyEvents(true);
+                    }, 100);
+                },
+                'click': function (e) {
+                    if (me.btnLanguage.isDisabled()) {
+                        return false;
+                    }
+                }
+            });
+            me.langMenu.on('item:click', _.bind(_clickLanguage,this));
+
+            me.cntZoom.updateHint(me.tipZoomFactor);
+            me.cntZoom.cmpEl.on({
+                'show.bs.dropdown': function () {
+                    _.defer(function(){
+                        me.cntZoom.cmpEl.find('ul').focus();
+                    }, 100);
+                },
+                'hide.bs.dropdown': function () {
+                    _.defer(function(){
+                        me.api.asc_enableKeyEvents(true);
+                    }, 100);
+                }
+            });
+
+            me.txtGoToPage.on({
+                    'keypress:after': function (input, e) {
+                        if (e.keyCode === Common.UI.Keys.RETURN) {
+                            var box = me.$el.find('#status-goto-box'),
+                                edit = box.find('input[type=text]'), page = parseInt(edit.val());
+                            if (!page || page-- > me.pages.get('count') || page < 0) {
+                                edit.select();
+                                return false;
+                            }
+
+                            box.focus();                        // for IE
+                            box.parent().removeClass('open');
+
+                            me.api.goToPage(page);
+                            me.api.asc_enableKeyEvents(true);
+
+                            return false;
+                        }
+                    },
+                    'keyup:after': function (input, e) {
+                        if (e.keyCode === Common.UI.Keys.ESC) {
+                            var box = me.$el.find('#status-goto-box');
+                            box.focus();                        // for IE
+                            box.parent().removeClass('open');
+                            me.api.asc_enableKeyEvents(true);
+                            return false;
+                        }
+                    }
+            });
+
+            var goto = me.$el.find('#status-goto-box');
+            goto.on('click', function() {
+                return false;
+            });
+            goto.parent().on({
+                'show.bs.dropdown': function () {
+                    me.txtGoToPage.setValue(me.api.getCurrentPage() + 1);
+                    me.txtGoToPage.checkValidate();
+                    var edit = me.txtGoToPage.$el.find('input');
+                    _.defer(function(){
+                        edit.focus().select();
+                    }, 100);
+                },
+                'hide.bs.dropdown': function () {
+                    var box = me.$el.find('#status-goto-box');
+                    if (me.api && box) {
+                        box.focus();                        // for IE
+                        box.parent().removeClass('open');
+
+                        me.api.asc_enableKeyEvents(true);
+                    }
+                }
+            });
+
+            me.zoomMenu.on('item:click', function(menu, item) {
+                me.fireEvent('zoom:value', [item.value]);
+            });
+        }
+
         if ( DE.Views.Statusbar )
             var LanguageDialog = DE.Views.Statusbar.LanguageDialog || {};
 
@@ -97,142 +199,65 @@ define([
                 this.pages = new DE.Models.Pages({current:1, count:1});
                 this.pages.on('change', _.bind(_updatePagesCaption,this));
                 this.state = {};
-            },
 
-            render: function () {
                 var me = this;
-                this.$el.html(this.template({
+                this.$layout = $(this.template({
                     textGotoPage: this.goToPageText,
                     textPageNumber: Common.Utils.String.format(this.pageIndexText, 1, 1)
                 }));
 
                 this.btnZoomToPage = new Common.UI.Button({
-                    el: $('#btn-zoom-topage',this.el),
-                    hint: this.tipFitPage,
                     hintAnchor: 'top',
                     toggleGroup: 'status-zoom',
                     enableToggle: true
                 });
 
                 this.btnZoomToWidth = new Common.UI.Button({
-                    el: $('#btn-zoom-towidth',this.el),
-                    hint: this.tipFitWidth,
                     hintAnchor: 'top',
                     toggleGroup: 'status-zoom',
                     enableToggle: true
                 });
 
+                this.cntZoom = new Common.UI.Button({
+                    hintAnchor: 'top'
+                });
+
                 this.btnZoomDown = new Common.UI.Button({
-                    el: $('#btn-zoom-down',this.el),
-                    hint: this.tipZoomOut + Common.Utils.String.platformKey('Ctrl+-'),
                     hintAnchor: 'top'
                 });
 
                 this.btnZoomUp = new Common.UI.Button({
-                    el: $('#btn-zoom-up',this.el),
-                    hint: this.tipZoomIn + Common.Utils.String.platformKey('Ctrl++'),
                     hintAnchor: 'top-right'
                 });
 
                 this.btnDocLanguage = new Common.UI.Button({
-                    el: $('#btn-doc-lang',this.el),
-                    hint: this.tipSetDocLang,
                     hintAnchor: 'top',
                     disabled: true
                 });
 
                 this.btnSetSpelling = new Common.UI.Button({
-                    el: $('#btn-doc-spell',this.el),
                     enableToggle: true,
-                    hint: this.tipSetSpelling,
                     hintAnchor: 'top'
                 });
 
-                this.btnReview = new Common.UI.Button({
+                this.btnLanguage = new Common.UI.Button({
-                    cls         : 'btn-toolbar',
+                    // el: panelLang,
-                    iconCls     : 'btn-ic-review',
+                    hintAnchor: 'top-left',
-                    hint        : this.tipReview,
+                    disabled: true
-                    hintAnchor: 'top',
-                    enableToggle: true,
-                    split       : true,
-                    menu        : new Common.UI.Menu({
-                        menuAlign: 'bl-tl',
-                        style: 'margin-top:-5px;',
-                        items: [
-                            this.mnuTrackChanges = new Common.UI.MenuItem({
-                                caption: this.textTrackChanges,
-                                checkable: true,
-                                value: 'track'
-                            }),
-                            this.mnuChangesPanel = new Common.UI.MenuItem({
-                                caption: this.textChangesPanel,
-                                checkable: true,
-                                value: 'panel'
-                            })
-                        ]
-                    })
                 });
-                this.btnReview.render($('#btn-doc-review'));
-                this.btnReviewCls = 'btn-ic-review';
 
-                var panelLang = $('.cnt-lang',this.el);
                 this.langMenu = new Common.UI.Menu({
                     style: 'margin-top:-5px;',
                     maxHeight: 300,
                     itemTemplate: _.template([
                         '<a id="<%= id %>" tabindex="-1" type="menuitem">',
-                            '<span class="lang-item-icon img-toolbarmenu lang-flag <%= iconCls %>"></span>',
+                        '<span class="lang-item-icon img-toolbarmenu lang-flag <%= iconCls %>"></span>',
-                            '<%= caption %>',
+                        '<%= caption %>',
                         '</a>'
                     ].join('')),
                     menuAlign: 'bl-tl'
                 });
 
-                this.btnLanguage = new Common.UI.Button({
-                    el: panelLang,
-                    hint: this.tipSetLang,
-                    hintAnchor: 'top-left',
-                    disabled: true
-                });
-                this.btnLanguage.cmpEl.on({
-                    'show.bs.dropdown': function () {
-                        _.defer(function(){
-                            me.btnLanguage.cmpEl.find('ul').focus();
-                        }, 100);
-                    },
-                    'hide.bs.dropdown': function () {
-                        _.defer(function(){
-                            me.api.asc_enableKeyEvents(true);
-                        }, 100);
-                    },
-                    'click': function (e) {
-                        if (me.btnLanguage.isDisabled()) {
-                            return false;
-                        }
-                    }
-                });
-
-                this.langMenu.render(panelLang);
-                this.langMenu.cmpEl.attr({tabindex: -1});
-
-                this.cntZoom = new Common.UI.Button({
-                    el: $('.cnt-zoom',this.el),
-                    hint: this.tipZoomFactor,
-                    hintAnchor: 'top'
-                });
-                this.cntZoom.cmpEl.on('show.bs.dropdown', function () {
-                        _.defer(function(){
-                            me.cntZoom.cmpEl.find('ul').focus();
-                        }, 100);
-                    }
-                );
-                this.cntZoom.cmpEl.on('hide.bs.dropdown', function () {
-                        _.defer(function(){
-                            me.api.asc_enableKeyEvents(true);
-                        }, 100);
-                    }
-                );
-
                 this.zoomMenu = new Common.UI.Menu({
                     style: 'margin-top:-5px;',
                     menuAlign: 'bl-tl',
@@ -246,16 +271,8 @@ define([
                         { caption: "200%", value: 200 }
                     ]
                 });
-                this.zoomMenu.render($('.cnt-zoom',this.el));
-                this.zoomMenu.cmpEl.attr({tabindex: -1});
-
-                this.langMenu.prevTip = 'en';
-                this.langMenu.on('item:click', _.bind(_clickLanguage,this));
-
-                // Go To Page
 
                 this.txtGoToPage = new Common.UI.InputField({
-                    el          : $('#status-goto-page', me.$el),
                     allowBlank  : true,
                     validateOnChange: true,
                     style       : 'width: 60px;',
@@ -269,58 +286,49 @@ define([
 
                         return me.txtPageNumInvalid;
                     }
-                }).on('keypress:after', function(input, e) {
-                        if (e.keyCode === Common.UI.Keys.RETURN) {
-                            var box = me.$el.find('#status-goto-box'),
-                                edit = box.find('input[type=text]'), page = parseInt(edit.val());
-                            if (!page || page-- > me.pages.get('count') || page < 0) {
-                                edit.select();
-                                return false;
-                            }
-
-                            box.focus();                        // for IE
-                            box.parent().removeClass('open');
-
-                            me.api.goToPage(page);
-                            me.api.asc_enableKeyEvents(true);
-
-                            return false;
-                        }
-                    }
-                ).on('keyup:after', function(input, e) {
-                        if (e.keyCode === Common.UI.Keys.ESC) {
-                            var box = me.$el.find('#status-goto-box');
-                            box.focus();                        // for IE
-                            box.parent().removeClass('open');
-                            me.api.asc_enableKeyEvents(true);
-                            return false;
-                        }
-                    }
-                );
-
-                var goto = this.$el.find('#status-goto-box');
-                goto.on('click', function() {
-                    return false;
                 });
-                goto.parent().on('show.bs.dropdown',
-                    function () {
-                        me.txtGoToPage.setValue(me.api.getCurrentPage() + 1);
-                        me.txtGoToPage.checkValidate();
-                        var edit = me.txtGoToPage.$el.find('input');
-                        _.defer(function(){edit.focus(); edit.select();}, 100);
 
-                    }
+                var promise = new Promise(function (accept, reject) {
-                );
+                    accept();
-                goto.parent().on('hide.bs.dropdown',
+                });
-                    function () { var box = me.$el.find('#status-goto-box');
-                        if (me.api && box) {
-                            box.focus();                        // for IE
-                            box.parent().removeClass('open');
 
-                            me.api.asc_enableKeyEvents(true);
+                Common.NotificationCenter.on('app:ready', function(mode) {
-                        }
+                    promise.then( _onAppReady.bind(this, mode) );
-                    }
+                }.bind(this));
-                );
+            },
+
+            render: function () {
+                var me = this;
+
+                function _btn_render(button, slot) {
+                    button.el = slot;
+                    button.render();
+                }
+
+                this.fireEvent('render:before', [this.$layout]);
+
+                _btn_render(me.btnZoomToPage, $('#btn-zoom-topage', me.$layout));
+                _btn_render(me.btnZoomToWidth, $('#btn-zoom-towidth', me.$layout));
+                _btn_render(me.cntZoom, $('.cnt-zoom',me.$layout));
+                _btn_render(me.btnZoomDown, $('#btn-zoom-down', me.$layout));
+                _btn_render(me.btnZoomUp, $('#btn-zoom-up', me.$layout));
+                _btn_render(me.btnDocLanguage, $('#btn-doc-lang', me.$layout));
+                _btn_render(me.btnSetSpelling, $('#btn-doc-spell', me.$layout));
+                _btn_render(me.txtGoToPage, $('#status-goto-page', me.$layout));
+
+                var panelLang = $('.cnt-lang', me.$layout);
+                _btn_render(me.btnLanguage, panelLang);
+
+                me.langMenu.render(panelLang);
+                me.zoomMenu.render($('.cnt-zoom',me.$layout));
+
+                me.langMenu.cmpEl.attr({tabindex: -1});
+                me.zoomMenu.cmpEl.attr({tabindex: -1});
+
+                this.$el.html(me.$layout);
+                this.fireEvent('render:after', [this]);
+
+                this.langMenu.prevTip = 'en';
 
                 return this;
             },
@@ -339,8 +347,6 @@ define([
 
             setMode: function(mode) {
                 this.mode = mode;
-                this.$el.find('.el-edit')[mode.isEdit?'show':'hide']();
-                this.$el.find('.el-review')[(mode.canReview && !mode.isLightVersion)?'show':'hide']();
             },
 
             setVisible: function(visible) {
@@ -397,11 +403,6 @@ define([
                 var langs = this.langMenu.items.length>0;
                 this.btnLanguage.setDisabled(disable || !langs);
                 this.btnDocLanguage.setDisabled(disable || !langs);
-                if (disable) {
-                    this.state.changespanel = this.mnuChangesPanel.checked;
-                }
-                this.mnuChangesPanel.setChecked(!disable && (this.state.changespanel==true));
-                this.btnReview.setDisabled(disable);
             },
 
             pageIndexText       : 'Page {0} of {1}',
@@ -415,7 +416,6 @@ define([
             tipSetDocLang       : 'Set Document Language',
             tipSetSpelling      : 'Turn on spell checking option',
             txtPageNumInvalid   : 'Page number invalid',
-            tipReview           : 'Review',
             textTrackChanges    : 'Track Changes',
             textChangesPanel    : 'Changes panel'
         }, DE.Views.Statusbar || {}));

apps/documenteditor/main/locale/en.json

@@ -197,6 +197,7 @@
   "Common.Views.ReviewChanges.txtPrev": "Previous",
   "Common.Views.ReviewChanges.txtNext": "Next",
   "Common.Views.ReviewChanges.txtTurnon": "Turn On",
+  "Common.Views.ReviewChanges.tipReview": "Review",
   "DE.Controllers.LeftMenu.leavePageText": "All unsaved changes in this document will be lost.<br> Click \"Cancel\" then \"Save\" to save them. Click \"OK\" to discard all the unsaved changes.",
   "DE.Controllers.LeftMenu.newDocumentTitle": "Unnamed document",
   "DE.Controllers.LeftMenu.notcriticalErrorTitle": "Warning",
@@ -313,6 +314,7 @@
   "DE.Controllers.Statusbar.textHasChanges": "New changes have been tracked",
   "DE.Controllers.Statusbar.textTrackChanges": "The document is opened with the Track Changes mode enabled",
   "DE.Controllers.Statusbar.zoomText": "Zoom {0}%",
+  "DE.Controllers.Statusbar.tipReview": "Review",
   "DE.Controllers.Toolbar.confirmAddFontName": "The font you are going to save is not available on the current device.<br>The text style will be displayed using one of the system fonts, the saved font will be used when it is available.<br>Do you want to continue?",
   "DE.Controllers.Toolbar.confirmDeleteFootnotes": "Do you want to delete all footnotes?",
   "DE.Controllers.Toolbar.notcriticalErrorTitle": "Warning",
@@ -1300,7 +1302,6 @@
   "DE.Views.Statusbar.textTrackChanges": "Track Changes",
   "DE.Views.Statusbar.tipFitPage": "Fit to Page",
   "DE.Views.Statusbar.tipFitWidth": "Fit to Width",
-  "DE.Views.Statusbar.tipReview": "Review",
   "DE.Views.Statusbar.tipSetDocLang": "Set Document Language",
   "DE.Views.Statusbar.tipSetLang": "Set Text Language",
   "DE.Views.Statusbar.tipSetSpelling": "Spell checking",