Merge pull request #2121 from ONLYOFFICE/fix/Bug-40224

For Bug 40224

apps/documenteditor/main/app/template/StatusBar.template

@@ -7,6 +7,10 @@
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
+    <div class="separator short"></div>
+    <div class="status-group">
+        <div id="slot-status-btn-info" style="display: inline-block;" class="margin-top-small"></div>
+    </div>
     <div class="status-group" style="width:100%; text-align:center;">
         <label id="label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
     </div>

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

@@ -161,6 +161,8 @@ define([
                 me.fireEvent('zoom:value', [item.value]);
             });
 
+            me.btnDocInfo.menu.on('show:after', _.bind(this.onDocInfoShow, this));
+
             me.onChangeProtectDocument();
         }
 
@@ -289,6 +291,36 @@ define([
                     }
                 });
 
+                var template = _.template(
+                    // '<a id="<%= id %>" tabindex="-1" type="menuitem">' +
+                    '<div style="display: flex;padding: 5px 20px;line-height: 16px;">' +
+                        '<div style="flex-grow: 1;"><%= caption %></div>' +
+                        '<div style="word-break: normal; margin-left: 20px; min-width: 35px;text-align: right;"><%= options.value%></div>' +
+                    '</div>'
+                    // '</a>'
+                );
+
+                this.btnDocInfo = new Common.UI.Button({
+                    cls         : 'btn-toolbar no-caret',
+                    caption     : this.txtWordCount,
+                    iconCls: 'toolbar__icon word-count',
+                    hintAnchor  : 'top-left',
+                    dataHint    : '0',
+                    dataHintDirection: 'top',
+                    menu: new Common.UI.Menu({
+                        style: 'margin-top:-5px;',
+                        menuAlign: 'bl-tl',
+                        itemTemplate: template,
+                        items: [
+                            { caption: this.txtPages, value: 0 },
+                            { caption: this.txtParagraphs, value: 0 },
+                            { caption: this.txtWords, value: 0 },
+                            { caption: this.txtSymbols, value: 0 },
+                            { caption: this.txtSpaces, value: 0 }
+                        ]
+                    })
+                });
+
                 var promise = new Promise(function (accept, reject) {
                     accept();
                 });
@@ -320,6 +352,7 @@ define([
                     me.btnLanguage.setMenu(me.langMenu);
                     me.langMenu.prevTip = 'en';
                 }
+                me.btnDocInfo.render($('#slot-status-btn-info', me.$layout));
 
                 if (config.canUseSelectHandTools) {
                     _btn_render(me.btnSelectTool, $('#btn-select-tool', me.$layout));
@@ -341,11 +374,14 @@ define([
                 if (this.api) {
                     this.api.asc_registerCallback('asc_onCountPages',   _.bind(_onCountPages, this));
                     this.api.asc_registerCallback('asc_onCurrentPage',  _.bind(_onCurrentPage, this));
+                    this.api.asc_registerCallback('asc_onGetDocInfoStart', _.bind(this.onGetDocInfoStart, this));
+                    this.api.asc_registerCallback('asc_onGetDocInfoStop', _.bind(this.onGetDocInfoEnd, this));
+                    this.api.asc_registerCallback('asc_onDocInfo', _.bind(this.onDocInfo, this));
+                    this.api.asc_registerCallback('asc_onGetDocInfoEnd', _.bind(this.onGetDocInfoEnd, this));
                     this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onApiCoAuthoringDisconnect, this));
                     Common.NotificationCenter.on('api:disconnect',      _.bind(this.onApiCoAuthoringDisconnect, this));
                     Common.NotificationCenter.on('protect:doclock', _.bind(this.onChangeProtectDocument, this));
                 }
-
                 return this;
 
             },
@@ -428,6 +464,50 @@ define([
                 }
             },
 
+            onDocInfoShow: function() {
+                this.api && this.api.startGetDocInfo();
+            },
+
+            onGetDocInfoStart: function() {
+                this.infoObj = {PageCount: 0, WordsCount: 0, ParagraphCount: 0, SymbolsCount: 0, SymbolsWSCount:0};
+            },
+
+            onDocInfo: function(obj) {
+                if (obj && this.btnDocInfo && this.btnDocInfo.menu) {
+                    if (obj.get_PageCount()>-1)
+                        this.btnDocInfo.menu.items[0].options.value = obj.get_PageCount();
+                    if (obj.get_ParagraphCount()>-1)
+                        this.btnDocInfo.menu.items[1].options.value = obj.get_ParagraphCount();
+                    if (obj.get_WordsCount()>-1)
+                        this.btnDocInfo.menu.items[2].options.value = obj.get_WordsCount();
+                    if (obj.get_SymbolsCount()>-1)
+                        this.btnDocInfo.menu.items[3].options.value = obj.get_SymbolsCount();
+                    if (obj.get_SymbolsWSCount()>-1)
+                        this.btnDocInfo.menu.items[4].options.value = obj.get_SymbolsWSCount();
+                    if (!this.timerDocInfo) { // start timer for filling info
+                        var me = this;
+                        this.timerDocInfo = setInterval(function(){
+                            me.fillDocInfo();
+                        }, 300);
+                        this.fillDocInfo();
+                    }
+                }
+            },
+
+            onGetDocInfoEnd: function() {
+                clearInterval(this.timerDocInfo);
+                this.timerDocInfo = undefined;
+                this.fillDocInfo();
+            },
+
+            fillDocInfo:  function() {
+                if (!this.btnDocInfo || !this.btnDocInfo.menu || !this.btnDocInfo.menu.isVisible()) return;
+
+                this.btnDocInfo.menu.items.forEach(function(item){
+                    $(item.el).html(item.template({id: item.id, caption : item.caption, options : item.options}));
+                });
+            },
+
             onApiCoAuthoringDisconnect: function() {
                 this.setMode({isDisconnected:true});
                 this.SetDisabled(true);
@@ -445,7 +525,13 @@ define([
             textTrackChanges    : 'Track Changes',
             textChangesPanel    : 'Changes panel',
             tipSelectTool       : 'Select tool',
-            tipHandTool         : 'Hand tool'
+            tipHandTool         : 'Hand tool',
+            txtWordCount: 'Word count',
+            txtPages: 'Pages',
+            txtWords: 'Words',
+            txtParagraphs: 'Paragraphs',
+            txtSymbols: 'Symbols',
+            txtSpaces: 'Symbols with spaces'
         }, DE.Views.Statusbar || {}));
     }
 );

apps/documenteditor/main/locale/en.json

@@ -2731,6 +2731,12 @@
   "DE.Views.Statusbar.tipZoomIn": "Zoom in",
   "DE.Views.Statusbar.tipZoomOut": "Zoom out",
   "DE.Views.Statusbar.txtPageNumInvalid": "Page number invalid",
+  "DE.Views.Statusbar.txtWordCount": "Word count",
+  "DE.Views.Statusbar.txtPages": "Pages",
+  "DE.Views.Statusbar.txtWords": "Words",
+  "DE.Views.Statusbar.txtParagraphs": "Paragraphs",
+  "DE.Views.Statusbar.txtSymbols": "Symbols",
+  "DE.Views.Statusbar.txtSpaces": "Symbols with spaces",
   "DE.Views.StyleTitleDialog.textHeader": "Create new style",
   "DE.Views.StyleTitleDialog.textNextStyle": "Next paragraph style",
   "DE.Views.StyleTitleDialog.textTitle": "Title",

apps/documenteditor/main/locale/ru.json

@@ -2730,6 +2730,12 @@
   "DE.Views.Statusbar.tipZoomIn": "Увеличить",
   "DE.Views.Statusbar.tipZoomOut": "Уменьшить",
   "DE.Views.Statusbar.txtPageNumInvalid": "Неправильный номер страницы",
+  "DE.Views.Statusbar.txtWordCount": "Количество слов",
+  "DE.Views.Statusbar.txtPages": "Страницы",
+  "DE.Views.Statusbar.txtWords": "Слова",
+  "DE.Views.Statusbar.txtParagraphs": "Абзацы",
+  "DE.Views.Statusbar.txtSymbols": "Символы",
+  "DE.Views.Statusbar.txtSpaces": "Символы с пробелами",
   "DE.Views.StyleTitleDialog.textHeader": "Создание нового стиля",
   "DE.Views.StyleTitleDialog.textNextStyle": "Стиль следующего абзаца",
   "DE.Views.StyleTitleDialog.textTitle": "Название",

apps/documenteditor/main/resources/less/statusbar.less

@@ -66,7 +66,8 @@
         }
     }
 
-    #btn-cnt-lang {
+    #btn-cnt-lang,
+    #slot-status-btn-info {
         button {
             font-weight: 700;
         }