From 2edcfb779be863f0f061fe8ab31fbed3d23b28bf Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 25 Jun 2021 00:48:20 +0300
Subject: [PATCH] [PE embedded][SSE embedded] Show loader mask

---
 apps/common/embed/lib/view/LoadMask.js        |  2 ++
 apps/presentationeditor/embed/index.html      |  6 +---
 .../embed/index.html.deploy                   |  5 ---
 .../embed/index_loader.html                   |  6 +---
 .../embed/index_loader.html.deploy            |  5 ---
 .../embed/js/ApplicationController.js         | 31 +++++++++----------
 apps/spreadsheeteditor/embed/index.html       |  6 +---
 .../spreadsheeteditor/embed/index.html.deploy |  5 ---
 .../spreadsheeteditor/embed/index_loader.html |  6 +---
 .../embed/index_loader.html.deploy            |  5 ---
 .../embed/js/ApplicationController.js         | 31 +++++++++----------
 build/presentationeditor.json                 |  1 +
 build/spreadsheeteditor.json                  |  1 +
 13 files changed, 38 insertions(+), 72 deletions(-)

diff --git a/apps/common/embed/lib/view/LoadMask.js b/apps/common/embed/lib/view/LoadMask.js
index 901114b5a..87f15409b 100644
--- a/apps/common/embed/lib/view/LoadMask.js
+++ b/apps/common/embed/lib/view/LoadMask.js
@@ -66,6 +66,7 @@ common.view.LoadMask = function(owner) {
 
             // show mask after 500 ms if it wont be hided
             if (!rendered) {
+                rendered = true;
                 timerId = setTimeout(function () {
                     ownerEl.append(maskedEl);
                     ownerEl.append(loaderEl);
@@ -83,6 +84,7 @@ common.view.LoadMask = function(owner) {
             maskedEl && maskedEl.remove();
             loaderEl && loaderEl.remove();
             maskedEl = loaderEl = null;
+            rendered = false;
         },
 
         setTitle: function(text) {
diff --git a/apps/presentationeditor/embed/index.html b/apps/presentationeditor/embed/index.html
index b0baf0920..991f9b627 100644
--- a/apps/presentationeditor/embed/index.html
+++ b/apps/presentationeditor/embed/index.html
@@ -273,11 +273,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -307,6 +302,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>
diff --git a/apps/presentationeditor/embed/index.html.deploy b/apps/presentationeditor/embed/index.html.deploy
index 5db22646c..a3a0347ab 100644
--- a/apps/presentationeditor/embed/index.html.deploy
+++ b/apps/presentationeditor/embed/index.html.deploy
@@ -267,11 +267,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
diff --git a/apps/presentationeditor/embed/index_loader.html b/apps/presentationeditor/embed/index_loader.html
index 5d725ac73..e90de1d35 100644
--- a/apps/presentationeditor/embed/index_loader.html
+++ b/apps/presentationeditor/embed/index_loader.html
@@ -322,11 +322,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -349,6 +344,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>
diff --git a/apps/presentationeditor/embed/index_loader.html.deploy b/apps/presentationeditor/embed/index_loader.html.deploy
index cb929d1b1..ee5f914c6 100644
--- a/apps/presentationeditor/embed/index_loader.html.deploy
+++ b/apps/presentationeditor/embed/index_loader.html.deploy
@@ -315,11 +315,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
diff --git a/apps/presentationeditor/embed/js/ApplicationController.js b/apps/presentationeditor/embed/js/ApplicationController.js
index 6f4ca8d87..78df5f6a2 100644
--- a/apps/presentationeditor/embed/js/ApplicationController.js
+++ b/apps/presentationeditor/embed/js/ApplicationController.js
@@ -43,6 +43,8 @@ PE.ApplicationController = new(function(){
         ttOffset = [0, -10],
         labelDocName;
 
+    var LoadingDocument = -256;
+
     // Initialize analytics
     // -------------------------
 
@@ -156,19 +158,24 @@ PE.ApplicationController = new(function(){
             case Asc.c_oAscAsyncAction['Print']:
                 text = me.downloadTextText;
                 break;
+            case LoadingDocument:
+                text = me.textLoadingDocument + '           ';
+                break;
             default:
                 text = me.waitText;
                 break;
         }
 
         if (type == Asc.c_oAscAsyncActionType['BlockInteraction']) {
-            $('#id-loadmask .cmd-loader-title').html(text);
-            showMask();
+            if (!me.loadMask)
+                me.loadMask = new common.view.LoadMask();
+            me.loadMask.setTitle(text);
+            me.loadMask.show();
         }
     }
 
     function onLongActionEnd(){
-        hideMask();
+        me.loadMask && me.loadMask.hide();
     }
 
     function onDocMouseMoveStart() {
@@ -244,6 +251,7 @@ PE.ApplicationController = new(function(){
             onPlayStart();
         }
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -1);
         (zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
@@ -469,6 +477,7 @@ PE.ApplicationController = new(function(){
         else
             $parent.css('padding-right', _left_width - _right_width);
 
+        onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
         api.asc_setViewMode(true);
         api.asc_LoadDocument();
         api.Resize();
@@ -476,7 +485,7 @@ PE.ApplicationController = new(function(){
 
     function onOpenDocument(progress) {
         var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-        $('#loadmask-text').html(me.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
+        me.loadMask && me.loadMask.setTitle(me.textLoadingDocument + ': ' + common.utils.fixedDigits(Math.min(Math.round(proc*100), 100), 3, "  ") + '%');
     }
 
     var isplaymode;
@@ -505,17 +514,6 @@ PE.ApplicationController = new(function(){
             $('#page-number').val(number);
     }
 
-    function showMask() {
-        $('#id-loadmask').modal({
-            backdrop: 'static',
-            keyboard: false
-        });
-    }
-
-    function hideMask() {
-        $('#id-loadmask').modal('hide');
-    }
-
     function onError(id, level, errData) {
         if (id == Asc.c_oAscError.ID.LoadingScriptError) {
             $('#id-critical-error-title').text(me.criticalErrorTitle);
@@ -528,7 +526,8 @@ PE.ApplicationController = new(function(){
         }
 
         hidePreloader();
-
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+        
         var message;
 
         switch (id)
diff --git a/apps/spreadsheeteditor/embed/index.html b/apps/spreadsheeteditor/embed/index.html
index a7eb4880a..c21511fc4 100644
--- a/apps/spreadsheeteditor/embed/index.html
+++ b/apps/spreadsheeteditor/embed/index.html
@@ -246,11 +246,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -283,6 +278,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>
diff --git a/apps/spreadsheeteditor/embed/index.html.deploy b/apps/spreadsheeteditor/embed/index.html.deploy
index 13573b703..50678b73f 100644
--- a/apps/spreadsheeteditor/embed/index.html.deploy
+++ b/apps/spreadsheeteditor/embed/index.html.deploy
@@ -238,11 +238,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
diff --git a/apps/spreadsheeteditor/embed/index_loader.html b/apps/spreadsheeteditor/embed/index_loader.html
index f703fe302..dffe44305 100644
--- a/apps/spreadsheeteditor/embed/index_loader.html
+++ b/apps/spreadsheeteditor/embed/index_loader.html
@@ -321,11 +321,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
@@ -351,6 +346,7 @@
       <script type="text/javascript" src="../../common/Analytics.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/LocalStorage.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/LoadMask.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
       <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>
diff --git a/apps/spreadsheeteditor/embed/index_loader.html.deploy b/apps/spreadsheeteditor/embed/index_loader.html.deploy
index 56166bc85..097125983 100644
--- a/apps/spreadsheeteditor/embed/index_loader.html.deploy
+++ b/apps/spreadsheeteditor/embed/index_loader.html.deploy
@@ -313,11 +313,6 @@
           </div>
       </div>
 
-      <div id="id-loadmask" class="hide modal cmd-loader-body">
-          <div class="cmd-loader-image"></div>
-          <div class="cmd-loader-title">Please wait...</div>
-      </div>
-
       <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
 
       <!--vendor-->
diff --git a/apps/spreadsheeteditor/embed/js/ApplicationController.js b/apps/spreadsheeteditor/embed/js/ApplicationController.js
index e2a5a7031..c2dd584da 100644
--- a/apps/spreadsheeteditor/embed/js/ApplicationController.js
+++ b/apps/spreadsheeteditor/embed/js/ApplicationController.js
@@ -45,6 +45,8 @@ SSE.ApplicationController = new(function(){
         ttOffset = [6, -15],
         labelDocName;
 
+    var LoadingDocument = -256;
+
     // Initialize analytics
     // -------------------------
 
@@ -196,6 +198,7 @@ SSE.ApplicationController = new(function(){
 
     function onDocumentContentReady() {
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         if ( permissions.print === false)
             $('#idt-print').hide();
@@ -230,6 +233,7 @@ SSE.ApplicationController = new(function(){
         api.asc_registerCallback('asc_onDownloadUrl',           onDownloadUrl);
         api.asc_registerCallback('asc_onPrint',                 onPrint);
         api.asc_registerCallback('asc_onPrintUrl',              onPrintUrl);
+        api.asc_registerCallback('asc_onStartAction',           onLongActionBegin);
 
         Common.Gateway.on('processmouse',       onProcessMouse);
         Common.Gateway.on('downloadas',         onDownloadAs);
@@ -371,24 +375,14 @@ SSE.ApplicationController = new(function(){
         else
             $parent.css('padding-right', _left_width - _right_width);
 
+        onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
         api.asc_setViewMode(true);
         api.asc_LoadDocument();
     }
     
-    function showMask() {
-        $('#id-loadmask').modal({
-            backdrop: 'static',
-            keyboard: false
-        });
-    }
-
-    function hideMask() {
-        $('#id-loadmask').modal('hide');
-    }
-
     function onOpenDocument(progress) {
         var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-        $('#loadmask-text').html(me.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
+        me.loadMask && me.loadMask.setTitle(me.textLoadingDocument + ': ' + common.utils.fixedDigits(Math.min(Math.round(proc*100), 100), 3, "  ") + '%');
     }
 
     function onLongActionBegin(type, id){
@@ -398,14 +392,19 @@ SSE.ApplicationController = new(function(){
             case Asc.c_oAscAsyncAction['Print']:
                 text = me.downloadTextText;
                 break;
+            case LoadingDocument:
+                text = me.textLoadingDocument + '           ';
+                break;
             default:
                 text = me.waitText;
                 break;
         }
 
         if (type == Asc.c_oAscAsyncActionType['BlockInteraction']) {
-            $('#id-loadmask .cmd-loader-title').html(text);
-            showMask();
+            if (!me.loadMask)
+                me.loadMask = new common.view.LoadMask();
+            me.loadMask.setTitle(text);
+            me.loadMask.show();
         }
     }
 
@@ -424,7 +423,7 @@ SSE.ApplicationController = new(function(){
                     break;
             }
 
-            hideMask();
+            me.loadMask && me.loadMask.hide();
         }
     }
 
@@ -440,6 +439,7 @@ SSE.ApplicationController = new(function(){
         }
 
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var message;
 
@@ -625,7 +625,6 @@ SSE.ApplicationController = new(function(){
         });
 
         if (api){
-            api.asc_registerCallback('asc_onStartAction',           onLongActionBegin);
             api.asc_registerCallback('asc_onEndAction',             onLongActionEnd);
             api.asc_registerCallback('asc_onError',                 onError);
             api.asc_registerCallback('asc_onOpenDocumentProgress',  onOpenDocument);
diff --git a/build/presentationeditor.json b/build/presentationeditor.json
index ccddf34cd..14f0dd739 100644
--- a/build/presentationeditor.json
+++ b/build/presentationeditor.json
@@ -416,6 +416,7 @@
                 "../apps/common/Analytics.js",
                 "../apps/common/embed/lib/util/LocalStorage.js",
                 "../apps/common/embed/lib/util/utils.js",
+                "../apps/common/embed/lib/view/LoadMask.js",
                 "../apps/common/embed/lib/view/modals.js",
                 "../apps/common/embed/lib/controller/modals.js",
                 "../apps/presentationeditor/embed/js/ApplicationView.js",
diff --git a/build/spreadsheeteditor.json b/build/spreadsheeteditor.json
index 8d3be3fb9..67a466ff3 100644
--- a/build/spreadsheeteditor.json
+++ b/build/spreadsheeteditor.json
@@ -429,6 +429,7 @@
                 "../apps/common/Analytics.js",
                 "../apps/common/embed/lib/util/LocalStorage.js",
                 "../apps/common/embed/lib/util/utils.js",
+                "../apps/common/embed/lib/view/LoadMask.js",
                 "../apps/common/embed/lib/view/modals.js",
                 "../apps/common/embed/lib/controller/modals.js",
                 "../apps/spreadsheeteditor/embed/js/ApplicationView.js",