[DE embedded] Show loader mask

apps/common/embed/lib/util/utils.js

@@ -84,6 +84,14 @@
                 _user.group && (_user.fullname = (_user.group).toString() + AscCommon.UserInfoParser.getSeparator() + _user.fullname);
                 _user.guest = !_user.name;
                 return _user;
+            },
+
+            fixedDigits: function(num, digits, fill) {
+                (fill===undefined) && (fill = '0');
+                var strfill = "",
+                    str = num.toString();
+                for (var i=str.length; i<digits; i++) strfill += fill;
+                return strfill + str;
             }
         };
     })();

apps/common/embed/lib/view/LoadMask.js

@@ -0,0 +1,99 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2021
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  LoadMask.js
+ *
+ *  Displays loading mask over selected element(s) or component. Accepts both single and multiple selectors.
+ *
+ *  Created by Julia Radzhabova 24.06.2021
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+!window.common && (window.common = {});
+!common.view && (common.view = {});
+
+common.view.LoadMask = function(owner) {
+    var tpl = '<div class="asc-loadmask-body" role="presentation" tabindex="-1">' +
+                '<i id="loadmask-spinner" class="asc-loadmask-image"></i>' +
+                '<div class="asc-loadmask-title"></div>' +
+               '</div>';
+    var ownerEl = owner || $(document.body),
+        loaderEl,
+        maskedEl,
+        title = '',
+        timerId = 0,
+        rendered = false;
+    return {
+
+        show: function(){
+            if (!loaderEl || !maskedEl) {
+                loaderEl = $(tpl);
+                maskedEl = $('<div class="asc-loadmask"></div>');
+            }
+
+            $('.asc-loadmask-title', loaderEl).html(title);
+
+            // show mask after 500 ms if it wont be hided
+            if (!rendered) {
+                timerId = setTimeout(function () {
+                    ownerEl.append(maskedEl);
+                    ownerEl.append(loaderEl);
+
+                    loaderEl.css('min-width', $('.asc-loadmask-title', loaderEl).width() + 105);
+                },500);
+            }
+        },
+
+        hide: function() {
+            if (timerId) {
+                clearTimeout(timerId);
+                timerId = 0;
+            }
+            maskedEl && maskedEl.remove();
+            loaderEl && loaderEl.remove();
+            maskedEl = loaderEl = null;
+        },
+
+        setTitle: function(text) {
+            title = text;
+
+            if (ownerEl && loaderEl){
+                var el = $('.asc-loadmask-title', loaderEl);
+                el.html(title);
+                loaderEl.css('min-width', el.width() + 105);
+            }
+        }
+    }
+};
+

apps/common/embed/resources/less/common.less

@@ -53,6 +53,8 @@
 @import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
 
 
+@import "loadmask.less";
+
 @toolbarBorderColor:            #dbdbdb;
 @toolbarBorderShadowColor:      #FAFAFA;
 @toolbarTopColor:               #F7F7F7;

apps/common/embed/resources/less/loadmask.less

@@ -0,0 +1,74 @@
+@loadmask-zindex: 10000;
+@loadmask-image-height: 28px;
+@loadmask-image-width: 28px;
+@loadmask-small-image-height: 20px;
+@loadmask-small-image-width: 20px;
+@background-loader-ie: fade(#000, 65%);
+@background-loader: fade(#181818, 90%);
+@text-contrast-background-ie: #fff;
+@text-contrast-background: #fff;
+
+.asc-loadmask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  zoom: 1;
+  background-color: transparent;
+  z-index: @loadmask-zindex;
+}
+
+.asc-loadmask-body {
+  position: absolute;
+  z-index: @loadmask-zindex + 1;
+  padding: 24px;
+  line-height: @loadmask-image-height;
+  border: none;
+  background-image: none;
+  background-color: @background-loader-ie;
+  background-color: @background-loader;
+  color: @text-contrast-background-ie;
+  color: @text-contrast-background;
+  border-radius: 6px;
+
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%);
+
+  & > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .asc-loadmask-image {
+    background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=)";
+    height: 28px;
+    width: 28px;
+    float: left;
+    margin-left: 8px;
+  }
+
+  .asc-loadmask-title {
+    font-size: 13px;
+    margin: 0 8px 0 12px;
+    white-space: pre-wrap;
+  }
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#loadmask-spinner {
+  animation-duration: .8s;
+  animation-name: rotation;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}

apps/documenteditor/embed/index.html

@@ -222,11 +222,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-->
@@ -257,6 +252,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>

apps/documenteditor/embed/index.html.deploy

@@ -214,11 +214,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-->

apps/documenteditor/embed/index_loader.html

@@ -323,11 +323,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>

apps/documenteditor/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-->

apps/documenteditor/embed/js/ApplicationController.js

@@ -45,6 +45,8 @@ DE.ApplicationController = new(function(){
         btnSubmit,
         _submitFail, $submitedTooltip, $requiredTooltip;
 
+    var LoadingDocument = -256;
+
     // Initialize analytics
     // -------------------------
 
@@ -168,14 +170,19 @@ DE.ApplicationController = new(function(){
                     btnSubmit.attr({disabled: true});
                     btnSubmit.css("pointer-events", "none");
                 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);
+            if (!me.loadMask)
-            showMask();
+                me.loadMask = new common.view.LoadMask();
+            me.loadMask.setTitle(text);
+            me.loadMask.show();
         }
     }
 
@@ -192,7 +199,7 @@ DE.ApplicationController = new(function(){
                 $submitedTooltip.show();
             }
         }
-        hideMask();
+        me.loadMask && me.loadMask.hide();
     }
 
     function onDocMouseMoveStart() {
@@ -272,6 +279,7 @@ DE.ApplicationController = new(function(){
 
     function onDocumentContentReady() {
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var zf = (config.customization && config.customization.zoom ? parseInt(config.customization.zoom) : -2);
         (zf == -1) ? api.zoomFitToPage() : ((zf == -2) ? api.zoomFitToWidth() : api.zoom(zf>0 ? zf : 100));
@@ -542,24 +550,15 @@ DE.ApplicationController = new(function(){
         else
             $parent.css('padding-right', _left_width - _right_width);
 
+        onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
         api.asc_LoadDocument();
         api.Resize();
     }
 
-    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 onError(id, level, errData) {
@@ -574,6 +573,7 @@ DE.ApplicationController = new(function(){
         }
 
         hidePreloader();
+        onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
         var message;
 

build/documenteditor.json

@@ -412,6 +412,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/documenteditor/embed/js/ApplicationView.js",