[DE embedded] Show tooltip for disabled submit button

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

@@ -712,4 +712,56 @@
     -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;
+    }
 }

apps/documenteditor/embed/js/ApplicationController.js

@@ -43,7 +43,7 @@ DE.ApplicationController = new(function(){
         labelDocName,
         appOptions = {},
         btnSubmit,
-        _submitFail, $submitedTooltip;
+        _submitFail, $submitedTooltip, $requiredTooltip;
 
     // Initialize analytics
     // -------------------------
@@ -181,12 +181,14 @@ DE.ApplicationController = new(function(){
     function onLongActionEnd(type, id){
         if (id==Asc.c_oAscAsyncAction['Submit']) {
             btnSubmit.removeAttr('disabled');
-            if (!$submitedTooltip) {
+            if (!_submitFail) {
-                $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
+                if (!$submitedTooltip) {
-                $(document.body).append($submitedTooltip);
+                    $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
-                $submitedTooltip.on('click', function() {$submitedTooltip.hide();});
+                    $(document.body).append($submitedTooltip);
+                    $submitedTooltip.on('click', function() {$submitedTooltip.hide();});
+                }
+                $submitedTooltip.show();
             }
-            !_submitFail && $submitedTooltip.show();
         }
         hideMask();
     }
@@ -251,6 +253,11 @@ DE.ApplicationController = new(function(){
         common.utils.dialogPrint(url, api);
     }
 
+    function onFillRequiredFields() {
+        btnSubmit && btnSubmit.removeAttr('disabled');
+        $requiredTooltip && $requiredTooltip.hide();
+    }
+
     function hidePreloader() {
         $('#loading-mask').fadeOut('slow');
     }
@@ -326,6 +333,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 +414,24 @@ DE.ApplicationController = new(function(){
             $pagenum.focus();
         });
 
+        // TODO: add asc_hasRequiredFields to sdk
+        /*
+        if (appOptions.canSubmitForms && api.asc_hasRequiredFields()) {
+            btnSubmit.attr({disabled: true});
+            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);
+                });
+                $requiredTooltip.show();
+            }
+        }
+        */
+
         var documentMoveTimer;
         var ismoved = false;
         $(document).mousemove(function(event){
@@ -757,6 +783,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",