[PDFE] Change current page from toolbar

apps/common/main/lib/component/InputField.js

@@ -155,7 +155,7 @@ define([
                 if (!me.rendered) {
                     var el = this.cmpEl;
 
-                    this._input = this.cmpEl.find('input').addBack().filter('input');
+                    this._input = this.cmpEl.find('input').addBack().filter('input').first();
 
                     if (this.editable) {
                         this._input.on('blur',   _.bind(this.onInputChanged, this));
@@ -290,9 +290,11 @@ define([
                 disabled = !!disabled;
                 this.disabled = disabled;
                 $(this.el).toggleClass('disabled', disabled);
-                disabled
+                if (this.rendered) {
-                    ? this._input.attr('disabled', true)
+                    disabled
-                    : this._input.removeAttr('disabled');
+                        ? this._input.attr('disabled', true)
+                        : this._input.removeAttr('disabled');
+                }
             },
 
             isDisabled: function() {
@@ -730,4 +732,82 @@ define([
             textDate: 'Select date'
         }
     })());
+
+    Common.UI.InputFieldFixed = Common.UI.InputField.extend((function() {
+        return {
+            options : {
+                id          : null,
+                cls         : '',
+                style       : '',
+                value       : '',
+                fixedValue  : '',
+                type        : 'text',
+                name        : '',
+                validation  : null,
+                allowBlank  : true,
+                placeHolder : '',
+                blankError  : null,
+                spellcheck  : false,
+                maskExp     : '',
+                validateOnChange: false,
+                validateOnBlur: true,
+                disabled: false,
+                editable: true,
+                btnHint: ''
+            },
+
+            template: _.template([
+                '<div class="input-field input-field-fixed" style="<%= style %>">',
+                    '<input ',
+                    'type=<%= type %> ',
+                    'name="<%= name %>" ',
+                    'spellcheck="<%= spellcheck %>" ',
+                    'class="form-control <%= cls %>" ',
+                    'placeholder="<%= placeHolder %>" ',
+                    'value="<%= value %>"',
+                    'data-hint="<%= dataHint %>"',
+                    'data-hint-offset="<%= dataHintOffset %>"',
+                    'data-hint-direction="<%= dataHintDirection %>"',
+                    '>',
+                '<span class="input-error"></span>',
+                '<input class="fixed-text form-control" type="text" readonly="readonly">' +
+                '</div>'
+            ].join('')),
+
+            initialize : function(options) {
+                this.fixedValue = options.fixedValue;
+
+                Common.UI.InputField.prototype.initialize.call(this, options);
+            },
+
+            render : function(parentEl) {
+                Common.UI.InputField.prototype.render.call(this, parentEl);
+
+                if (this.fixedValue)
+                    this.setFixedValue(this.fixedValue);
+
+                return this;
+            },
+
+            setFixedValue: function(value) {
+                this.fixedValue = value;
+
+                if (this.rendered){
+                    this.cmpEl.find('input.fixed-text').addBack().filter('input.fixed-text').val(value);
+                }
+            },
+
+            setDisabled: function(disabled) {
+                disabled = !!disabled;
+                this.disabled = disabled;
+                $(this.el).toggleClass('disabled', disabled);
+                if (this.rendered) {
+                    var inputs = this.cmpEl.find('input').addBack().filter('input')
+                    disabled
+                        ? inputs.attr('disabled', true)
+                        : inputs.removeAttr('disabled');
+                }
+            },
+        }
+    })());
 });

apps/common/main/resources/less/input.less

@@ -168,4 +168,42 @@ textarea.form-control:focus {
     input {
         .padding-x(3px, 20px);
     }
+}
+
+.input-field-fixed {
+    position: relative;
+
+    input:not(.fixed-text) {
+        .text-align-right();
+        padding-right: 50%;
+        padding-right: calc(50% + 4px);
+        .rtl & {
+            padding-left: 50%;
+            padding-right: 0;
+        }
+    }
+
+    .fixed-text {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 50%;
+        width: calc(50% + 4px);
+        border-color: transparent;
+        background: transparent;
+        .text-align-left();
+        .font-size-normal();
+        padding-left: 2px;
+        padding-right: 2px;
+        cursor: default;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+        }
+    }
+    &.disabled .fixed-text {
+        opacity: @component-disabled-opacity-ie;
+        opacity: @component-disabled-opacity;
+    }
 }

apps/pdfeditor/main/app/controller/Toolbar.js

@@ -66,7 +66,8 @@ define([
                 can_copycut: undefined,
                 clrstrike: undefined,
                 clrunderline: undefined,
-                clrhighlight: undefined
+                clrhighlight: undefined,
+                pageCount: 1
             };
             this.editMode = true;
             this.binding = {};
@@ -160,7 +161,7 @@ define([
             /**
              * UI Events
              */
-
+            var me = this;
             toolbar.btnPrint.on('click',                                _.bind(this.onPrint, this));
             toolbar.btnPrint.on('disabled',                             _.bind(this.onBtnChangeState, this, 'print:disabled'));
             toolbar.btnSave.on('click',                                 _.bind(this.onSave, this));
@@ -188,6 +189,15 @@ define([
             toolbar.mnuHighlightTransparent.on('click',                 _.bind(this.onHighlightTransparentClick, this));
             toolbar.btnHideComments.on('click',                         _.bind(this.onHideCommentsClick, this));
             toolbar.btnRotate.on('click',                               _.bind(this.onRotateClick, this));
+            toolbar.fieldPages.on('changed:after',                      _.bind(this.onPagesChanged, this));
+            toolbar.fieldPages.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me.toolbar);});
+            toolbar.fieldPages.cmpEl && toolbar.fieldPages.cmpEl.on('focus', 'input.form-control', function() {
+                setTimeout(function(){toolbar.fieldPages._input && toolbar.fieldPages._input.select();}, 1);
+            });
+            toolbar.btnFirstPage.on('click',                            _.bind(this.onGotoPage, this, 'first'));
+            toolbar.btnLastPage.on('click',                             _.bind(this.onGotoPage, this, 'last'));
+            toolbar.btnPrevPage.on('click',                             _.bind(this.onGotoPage, this, 'prev'));
+            toolbar.btnNextPage.on('click',                             _.bind(this.onGotoPage, this, 'next'));
 
             this.onBtnChangeState('undo:disabled', toolbar.btnUndo, toolbar.btnUndo.isDisabled());
             this.onBtnChangeState('redo:disabled', toolbar.btnRedo, toolbar.btnRedo.isDisabled());
@@ -208,6 +218,8 @@ define([
                 this.api.asc_registerCallback('asc_onCanCopyCut', _.bind(this.onApiCanCopyCut, this));
                 this.api.asc_registerCallback('asc_onContextMenu', _.bind(this.onContextMenu, this));
             }
+            this.api.asc_registerCallback('asc_onCountPages',   _.bind(this.onCountPages, this));
+            this.api.asc_registerCallback('asc_onCurrentPage',  _.bind(this.onCurrentPage, this));
         },
 
         onChangeCompactView: function(view, compact) {
@@ -232,6 +244,33 @@ define([
             this.toolbar.collapse();
         },
 
+        onCountPages: function(count) {
+            this._state.pageCount = count;
+            this.toolbar && this.toolbar.fieldPages && this.toolbar.fieldPages.setFixedValue('/ ' + count);
+        },
+
+        onCurrentPage: function(value) {
+            this.toolbar && this.toolbar.fieldPages && this.toolbar.fieldPages.setValue(value + 1);
+        },
+
+        onPagesChanged: function() {
+            var value = parseInt(this.toolbar.fieldPages.getValue());
+            if (value>this._state.pageCount)
+                value = this._state.pageCount;
+            this.api && this.api.goToPage(value-1);
+        },
+
+        onGotoPage: function (type, btn, e) {
+            if (!this.api) return;
+
+            if (type==='first')
+                this.api.goToPage(0);
+            else if (type==='last')
+                this.api.goToPage(this._state.pageCount-1);
+            else
+                this.api.goToPage(this.api.getCurrentPage() + (type==='next' ? 1 : -1));
+        },
+
         onApiCanRevert: function(which, can) {
             if (which=='undo') {
                 if (this._state.can_undo !== can) {

apps/pdfeditor/main/app/template/Toolbar.template

@@ -42,6 +42,18 @@
         </section>
         <section class="box-panels">
             <section class="panel" data-tab="home">
+                <div class="group small">
+                    <div class="elset">
+                        <span class="btn-slot" id="slot-btn-pages" style="width: 95px"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot" id="slot-btn-first-page"></span>
+                        <span class="btn-slot margin-left-5" id="slot-btn-prev-page"></span>
+                        <span class="btn-slot margin-left-5" id="slot-btn-next-page"></span>
+                        <span class="btn-slot margin-left-5" id="slot-btn-last-page"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-rotate"></span>
                 </div>

apps/pdfeditor/main/app/view/Toolbar.js

@@ -352,7 +352,68 @@ define([
                     });
                     this.paragraphControls.push(this.btnHighlight);
 
+                    this.fieldPages = new Common.UI.InputFieldFixed({
+                        id: 'id-toolbar-txt-pages',
+                        style       : 'width: 100%;',
+                        maskExp     : /[0-9]/,
+                        allowBlank  : true,
+                        validateOnChange: false,
+                        fixedValue: '/ 1',
+                        value: 1,
+                        lock: [_set.disableOnStart],
+                        validation  : function(value) {
+                            if (/(^[0-9]+$)/.test(value)) {
+                                value = parseInt(value);
+                                if (value===undefined || value===null || value<1)
+                                    me.fieldPages.setValue(me.api.getCurrentPage()+1);
+                            } else
+                                me.fieldPages.setValue(me.api.getCurrentPage()+1);
+
+                            return true;
+                        }
+                    });
+                    this.toolbarControls.push(this.fieldPages);
+
+                    this.btnFirstPage = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-first-page',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-first-page',
+                        lock: [_set.disableOnStart],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+                    this.toolbarControls.push(this.btnFirstPage);
+
+                    this.btnLastPage = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-last-page',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-last-page',
+                        lock: [_set.disableOnStart],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+                    this.toolbarControls.push(this.btnLastPage);
+
+                    this.btnPrevPage = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-prev-page',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-prev-page',
+                        lock: [_set.disableOnStart],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+                    this.toolbarControls.push(this.btnPrevPage);
                     //
+                    this.btnNextPage = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-next-page',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-next-page',
+                        lock: [_set.disableOnStart],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+                    this.toolbarControls.push(this.btnNextPage);
+
                     // Menus
                     //
 
@@ -456,6 +517,11 @@ define([
                 _injectComponent('#slot-btn-highlight', this.btnHighlight);
                 _injectComponent('#slot-btn-hide-comments', this.btnHideComments);
                 _injectComponent('#slot-btn-rotate', this.btnRotate);
+                _injectComponent('#slot-btn-pages', this.fieldPages);
+                _injectComponent('#slot-btn-first-page', this.btnFirstPage);
+                _injectComponent('#slot-btn-last-page', this.btnLastPage);
+                _injectComponent('#slot-btn-prev-page', this.btnPrevPage);
+                _injectComponent('#slot-btn-next-page', this.btnNextPage);
 
                 this.btnPrint.menu && this.btnPrint.$el.addClass('split');
                 return $host;
@@ -575,6 +641,10 @@ define([
                 this.btnHighlight.updateHint(this.textHighlight);
                 this.btnHideComments.updateHint(this.tipHideComments);
                 this.btnRotate.updateHint(this.tipRotate);
+                this.btnFirstPage.updateHint(this.tipFirstPage);
+                this.btnLastPage.updateHint(this.tipLastPage);
+                this.btnPrevPage.updateHint(this.tipPrevPage);
+                this.btnNextPage.updateHint(this.tipNextPage);
             },
 
             onToolbarAfterRender: function(toolbar) {
@@ -744,7 +814,11 @@ define([
             capBtnHideComments: 'Hide Comments',
             tipHideComments: 'Hide comments',
             capBtnRotate: 'Rotate',
-            tipRotate: 'Rotate pages'
+            tipRotate: 'Rotate pages',
+            tipFirstPage: 'Go to the first page',
+            tipLastPage: 'Go to the last page',
+            tipPrevPage: 'Go to the previous page',
+            tipNextPage: 'Go to the next page'
         }
     })(), PDFE.Views.Toolbar || {}));
 });