[DE forms] Refactoring

apps/common/forms/resources/less/common.less

@@ -99,10 +99,6 @@
 @iconSpriteCommonPath:          "../../../../common/forms/resources/img/glyphicons.png";
 @icon-socnet-size: 40px;
 
-.input-xs {
-    .input-size(@input-height-small - 8px; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
-}
-
 .embed-body {
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
@@ -178,8 +174,7 @@
 
         .item {
             input {
-                display: inline-block;
+                font-size: inherit;
-                width: 35px;
                 padding: 0;
                 text-align: right;
             }
@@ -305,7 +300,7 @@
     }
 
     &:active:not(:disabled) {
-        &, .btn-icon {
+        & {
             background-position-y: -@icon-height !important;
         }
 
@@ -424,18 +419,6 @@
 
 // Modals
 // -------------------------
-.modal {
-    .modal-header {
-        //padding: 5px 15px;
-    }
-
-    .modal-footer {
-        //border-top: none;
-    }
-
-    //&.in .modal-dialog { .translate(0, 100%)}
-}
-
 .share-buttons {
     ul {
         width: 244px;
@@ -599,12 +582,6 @@
     float: left;
     margin: -3px 4px 0 -24px;
 }
-.btn-icon {
-    width: 22px;
-    height: 22px;
-    display: inline-block;
-    vertical-align: middle;
-}
 
 .modal-dialog {
     margin-top: 100px;
@@ -675,7 +652,7 @@
 }
 
 #page-number {
-    &.masked {
+    .masked {
         cursor: pointer;
     }
 }
@@ -701,13 +678,6 @@
     }
 }
 
-.form-control {
-    &:focus {
-        -webkit-box-shadow: none;
-        box-shadow: none;
-    }
-}
-
 .submit-tooltip {
     position: absolute;
     z-index: 1000;

apps/documenteditor/forms/app/controller/ApplicationController.js

@@ -234,7 +234,6 @@ define([
                     if (id == Asc.c_oAscError.ID.EditingError) {
                         Common.NotificationCenter.trigger('api:disconnect', true); // enable download and print
                     }
-                    this.onEditComplete();
                 }, this);
             }
 
@@ -245,11 +244,7 @@ define([
         },
 
         hidePreloader: function() {
-            (new Promise(function(resolve, reject) {
+            $('#loading-mask').fadeOut('slow');
-                resolve();
-            })).then(function() {
-                $('#loading-mask').hide().remove();
-            });
         },
 
         onOpenDocument: function(progress) {
@@ -265,7 +260,7 @@ define([
         },
 
         onCurrentPage: function(number) {
-            $('#page-number').val(number + 1);
+            this.view.txtGoToPage.setValue(number + 1);
         },
 
         loadConfig: function(data) {
@@ -549,8 +544,6 @@ define([
 
         setLongActionView: function(action) {
             var title = '', text = '', force = false;
-
-            var text = '';
             switch (action.id)
             {
                 case Asc.c_oAscAsyncAction['Print']:
@@ -947,33 +940,84 @@ define([
             Common.Gateway.on('downloadas',         _.bind(this.onDownloadAs, this));
             Common.Gateway.on('requestclose',       _.bind(this.onRequestClose, this));
 
+            this.attachUIEvents();
+
+            Common.Gateway.documentReady();
+            Common.Analytics.trackEvent('Load', 'Complete');
+        },
+
+        onOptionsClick: function(menu, item, e) {
+            switch (item.value) {
+                case 'fullscr':
+                    this.onHyperlinkClick(this.embedConfig.fullscreenUrl);
+                    break;
+                case 'download':
+                    if ( !!this.embedConfig.saveUrl ){
+                        this.onHyperlinkClick(this.embedConfig.saveUrl);
+                    } else if (this.api && this.appOptions.canPrint){
+                        this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
+                    }
+                    Common.Analytics.trackEvent('Save');
+                    break;
+                case 'print':
+                    this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
+                    Common.Analytics.trackEvent('Print');
+                    break;
+                case 'close':
+                    if (this.appOptions.customization && this.appOptions.customization.goback) {
+                        if (this.appOptions.customization.goback.requestClose && this.appOptions.canRequestClose)
+                            Common.Gateway.requestClose();
+                        else if (this.appOptions.customization.goback.url)
+                            window.parent.location.href = this.appOptions.customization.goback.url;
+                    }
+                    break;
+                case 'download-docx':
+                    this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.DOCX));
+                    Common.Analytics.trackEvent('Save');
+                    break;
+                case 'download-pdf':
+                    this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF));
+                    Common.Analytics.trackEvent('Save');
+                    break;
+                case 'share':
+                    break;
+                case 'embed':
+                    break;
+            }
+        },
+
+        attachUIEvents: function() {
+            var me = this;
+
+            // zoom
             $('#id-btn-zoom-in').on('click', this.api.zoomIn.bind(this.api));
             $('#id-btn-zoom-out').on('click', this.api.zoomOut.bind(this.api));
             this.view.btnOptions.menu.on('item:click', _.bind(this.onOptionsClick, this));
 
-            var $pagenum = $('#page-number');
+            // pages
+            var $pagenum = this.view.txtGoToPage._input;
+            this.view.txtGoToPage.on({
+                'changed:after': function(input, newValue, oldValue){
+                    var newPage = parseInt(newValue);
+
+                    if ( newPage > maxPages ) newPage = maxPages;
+                    if (newPage < 2 || isNaN(newPage)) newPage = 1;
+
+                    me.api.goToPage(newPage-1);
+                },
+                'inputleave': function(){ $pagenum.blur();}
+            });
             $pagenum.on({
-                'keyup': function(e){
+                'focusin' : function(e) {
-                    if ( e.keyCode == 13 ){
-                        var newPage = parseInt($('#page-number').val());
-
-                        if ( newPage > maxPages ) newPage = maxPages;
-                        if (newPage < 2 || isNaN(newPage)) newPage = 1;
-
-                        me.api.goToPage(newPage-1);
-                        $pagenum.blur();
-                    }
-                }
-                , 'focusin' : function(e) {
                     $pagenum.removeClass('masked');
-                }
+                    $pagenum.select();
-                , 'focusout': function(e){
+                },
+                'focusout': function(e){
                     !$pagenum.hasClass('masked') && $pagenum.addClass('masked');
                 }
             });
-
             $('#pages').on('click', function(e) {
-                $pagenum.focus();
+                setTimeout(function() {$pagenum.focus().select();}, 10);
             });
 
             // TODO: add asc_hasRequiredFields to sdk
@@ -1027,48 +1071,6 @@ define([
                     }, 2000);
                 }
             });
-            Common.Gateway.documentReady();
-            Common.Analytics.trackEvent('Load', 'Complete');
-        },
-
-        onOptionsClick: function(menu, item, e) {
-            switch (item.value) {
-                case 'fullscr':
-                    this.onHyperlinkClick(this.embedConfig.fullscreenUrl);
-                    break;
-                case 'download':
-                    if ( !!this.embedConfig.saveUrl ){
-                        this.onHyperlinkClick(this.embedConfig.saveUrl);
-                    } else if (this.api && this.appOptions.canPrint){
-                        this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
-                    }
-                    Common.Analytics.trackEvent('Save');
-                    break;
-                case 'print':
-                    this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
-                    Common.Analytics.trackEvent('Print');
-                    break;
-                case 'close':
-                    if (this.appOptions.customization && this.appOptions.customization.goback) {
-                        if (this.appOptions.customization.goback.requestClose && this.appOptions.canRequestClose)
-                            Common.Gateway.requestClose();
-                        else if (this.appOptions.customization.goback.url)
-                            window.parent.location.href = this.appOptions.customization.goback.url;
-                    }
-                    break;
-                case 'download-docx':
-                    this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.DOCX));
-                    Common.Analytics.trackEvent('Save');
-                    break;
-                case 'download-pdf':
-                    this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF));
-                    Common.Analytics.trackEvent('Save');
-                    break;
-                case 'share':
-                    break;
-                case 'embed':
-                    break;
-            }
         },
 
         errorDefaultMessage     : 'Error code: %1',

apps/documenteditor/forms/app/view/ApplicationView.js

@@ -3,6 +3,7 @@ define([
     'underscore',
     'backbone',
     'common/main/lib/util/utils',
+    'common/main/lib/component/InputField',
     'common/main/lib/component/Button',
     'common/main/lib/component/Menu',
     'common/main/lib/component/Calendar'
@@ -53,6 +54,15 @@ define([
             });
             this.btnPrev.render($('#id-btn-prev-field'));
 
+            this.txtGoToPage = new Common.UI.InputField({
+                el: $('#page-number'),
+                cls: 'masked',
+                allowBlank  : true,
+                style       : 'width: 35px;',
+                value: '1',
+                maskExp: /[0-9]/
+            });
+
             return this;
         },
 

apps/documenteditor/forms/index.html

@@ -198,7 +198,9 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <div id="id-pages" class="item margin-right-small" style="vertical-align: middle;"><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="id-pages" class="item margin-right-small" style="vertical-align: middle;">
+                  <div id="page-number" style="display: inline-block; vertical-align: middle;"></div><span class="text" id="pages" tabindex="-1">of 1</span>
+              </div>
               <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-left-small margin-right-small colored"><span class="caption"></span></button></div>
               <span id="box-tools"></span>
           </div>