[DE embed] Add tooltip for disabled submit button

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

@@ -683,9 +683,13 @@
         border: 1px solid rgba(0,0,0,0.15);
         color: #333;
         font-weight: bold;
-        line-height: 26px;
         font-size: 11px;
         box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+
+        padding: 5px 12px;
+        white-space: pre-wrap;
+        text-align: left;
+        word-wrap: break-word;
     }
 
     .tooltip-arrow {
@@ -765,3 +769,11 @@
         margin-top: 10px;
     }
 }
+
+.tooltip {
+    .tooltip-inner {
+        .toolbar & {
+            font-weight: normal;
+        }
+    }
+}

apps/documenteditor/embed/index.html

@@ -198,7 +198,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>

apps/documenteditor/embed/index.html.deploy

@@ -190,7 +190,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>

apps/documenteditor/embed/index_loader.html

@@ -299,7 +299,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>

apps/documenteditor/embed/index_loader.html.deploy

@@ -291,7 +291,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>

apps/documenteditor/embed/js/ApplicationController.js

@@ -166,6 +166,7 @@ DE.ApplicationController = new(function(){
                     _submitFail = false;
                     $submitedTooltip && $submitedTooltip.hide();
                     btnSubmit.attr({disabled: true});
+                    btnSubmit.css("pointer-events", "none");
                 break;
             default:
                 text = me.waitText;
@@ -181,6 +182,7 @@ DE.ApplicationController = new(function(){
     function onLongActionEnd(type, id){
         if (id==Asc.c_oAscAsyncAction['Submit']) {
             btnSubmit.removeAttr('disabled');
+            btnSubmit.css("pointer-events", "auto");
             if (!_submitFail) {
                 if (!$submitedTooltip) {
                     $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
@@ -254,7 +256,10 @@ DE.ApplicationController = new(function(){
     }
 
     function onFillRequiredFields() {
-        btnSubmit && btnSubmit.removeAttr('disabled');
+        if (btnSubmit) {
+            btnSubmit.removeAttr('disabled');
+            btnSubmit.css("pointer-events", "auto");
+        }
         $requiredTooltip && $requiredTooltip.hide();
     }
 
@@ -417,7 +422,9 @@ DE.ApplicationController = new(function(){
         // TODO: add asc_hasRequiredFields to sdk
         /*
         if (appOptions.canSubmitForms && api.asc_hasRequiredFields()) {
+            var sgroup = $('#id-submit-group');
             btnSubmit.attr({disabled: true});
+            btnSubmit.css("pointer-events", "none");
             if (!common.localStorage.getItem("de-embed-hide-submittip")) {
                 var offset = btnSubmit.offset();
                 $requiredTooltip = $('<div class="required-tooltip bottom-left" style="display:none;"><div class="tip-arrow bottom-left"></div><div>' + me.textRequired + '</div><div class="close-div">' + me.textGotIt + '</div></div>');
@@ -426,8 +433,19 @@ DE.ApplicationController = new(function(){
                 $requiredTooltip.find('.close-div').on('click', function() {
                     $requiredTooltip.hide();
                     common.localStorage.setItem("de-embed-hide-submittip", 1);
+                    sgroup.attr('data-toggle', 'tooltip');
+                    sgroup.tooltip({
+                        title       : me.textRequired,
+                        placement   : 'bottom'
+                    });
                 });
                 $requiredTooltip.show();
+            } else {
+                sgroup.attr('data-toggle', 'tooltip');
+                sgroup.tooltip({
+                    title       : me.textRequired,
+                    placement   : 'bottom'
+                });
             }
         }
         */