Merge pull request #910 from ONLYOFFICE/fix/de-fill-forms

Fix/de fill forms

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 {
@@ -712,4 +716,64 @@
     -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
     box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
     font-size: 11px;
+}
+
+.required-tooltip {
+    position: absolute;
+    z-index: 1000;
+
+    padding: 15px;
+    border-radius: 5px;
+    background-color: @btnColored;
+    color: #fff;
+    -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
+    font-size: 11px;
+
+    &.bottom-left {
+        border-top-right-radius: 0;
+        margin: 15px 0 0 0;
+
+        .tip-arrow {
+            position: absolute;
+            overflow: hidden;
+            right: 0;
+            top: -15px;
+            width: 15px;
+            height: 15px;
+            .box-shadow(8px 5px 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                content: '';
+                position: absolute;
+                top: 8px;
+                left: 8px;
+                background-color: @btnColored;
+                width: 15px;
+                height: 15px;
+
+                -moz-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                -o-transform: rotate(45deg);
+                transform: rotate(45deg);
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+    .close-div {
+        display: inline-block;
+        border: 1px solid #fff;
+        border-radius: 2px;
+        padding: 3px 12px;
+        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

@@ -43,7 +43,7 @@ DE.ApplicationController = new(function(){
         labelDocName,
         appOptions = {},
         btnSubmit,
-        _submitFail, $submitedTooltip;
+        _submitFail, $submitedTooltip, $requiredTooltip;
 
     // Initialize analytics
     // -------------------------
@@ -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,12 +182,15 @@ DE.ApplicationController = new(function(){
     function onLongActionEnd(type, id){
         if (id==Asc.c_oAscAsyncAction['Submit']) {
             btnSubmit.removeAttr('disabled');
-            if (!$submitedTooltip) {
+            btnSubmit.css("pointer-events", "auto");
-                $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
+            if (!_submitFail) {
-                $(document.body).append($submitedTooltip);
+                if (!$submitedTooltip) {
-                $submitedTooltip.on('click', function() {$submitedTooltip.hide();});
+                    $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
+                    $(document.body).append($submitedTooltip);
+                    $submitedTooltip.on('click', function() {$submitedTooltip.hide();});
+                }
+                $submitedTooltip.show();
             }
-            !_submitFail && $submitedTooltip.show();
         }
         hideMask();
     }
@@ -251,6 +255,14 @@ DE.ApplicationController = new(function(){
         common.utils.dialogPrint(url, api);
     }
 
+    function onFillRequiredFields() {
+        if (btnSubmit) {
+            btnSubmit.removeAttr('disabled');
+            btnSubmit.css("pointer-events", "auto");
+        }
+        $requiredTooltip && $requiredTooltip.hide();
+    }
+
     function hidePreloader() {
         $('#loading-mask').fadeOut('slow');
     }
@@ -326,6 +338,7 @@ DE.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_onFillRequiredFields',    onFillRequiredFields);
 
         Common.Gateway.on('processmouse',       onProcessMouse);
         Common.Gateway.on('downloadas',         onDownloadAs);
@@ -406,6 +419,37 @@ DE.ApplicationController = new(function(){
             $pagenum.focus();
         });
 
+        // 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>');
+                $(document.body).append($requiredTooltip);
+                $requiredTooltip.css({top : offset.top + btnSubmit.height() + 'px', left: offset.left + btnSubmit.outerWidth()/2 - $requiredTooltip.outerWidth() + 'px'});
+                $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'
+                });
+            }
+        }
+        */
+
         var documentMoveTimer;
         var ismoved = false;
         $(document).mousemove(function(event){
@@ -757,6 +801,8 @@ DE.ApplicationController = new(function(){
         errorSubmit: 'Submit failed.',
         errorEditingDownloadas: 'An error occurred during the work with the document.<br>Use the \'Download as...\' option to save the file backup copy to your computer hard drive.',
         textGuest: 'Guest',
-        textAnonymous: 'Anonymous'
+        textAnonymous: 'Anonymous',
+        textRequired: 'Fill all required fields to send form.',
+        textGotIt: 'Got it'
     }
 })();

apps/documenteditor/embed/locale/en.json

@@ -31,6 +31,8 @@
   "DE.ApplicationController.unknownErrorText": "Unknown error.",
   "DE.ApplicationController.unsupportedBrowserErrorText": "Your browser is not supported.",
   "DE.ApplicationController.waitText": "Please, wait...",
+  "DE.ApplicationController.textRequired": "Fill all required fields to send form.",
+  "DE.ApplicationController.textGotIt": "Got it",
   "DE.ApplicationView.txtDownload": "Download",
   "DE.ApplicationView.txtDownloadDocx": "Download as docx",
   "DE.ApplicationView.txtDownloadPdf": "Download as pdf",