From 21a69cec60ec665fbc95b8d58fbdc1c1cfd18120 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 25 Aug 2023 18:17:48 +0300 Subject: [PATCH] [PDFE] Change current page from toolbar --- apps/common/main/lib/component/InputField.js | 88 ++++++++++++++++++- apps/common/main/resources/less/input.less | 38 ++++++++ apps/pdfeditor/main/app/controller/Toolbar.js | 43 ++++++++- .../main/app/template/Toolbar.template | 12 +++ apps/pdfeditor/main/app/view/Toolbar.js | 76 +++++++++++++++- 5 files changed, 250 insertions(+), 7 deletions(-) diff --git a/apps/common/main/lib/component/InputField.js b/apps/common/main/lib/component/InputField.js index 9d3d138c37..63c03ce784 100644 --- a/apps/common/main/lib/component/InputField.js +++ b/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 - ? this._input.attr('disabled', true) - : this._input.removeAttr('disabled'); + if (this.rendered) { + 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([ + '
', + ' ', + 'name="<%= name %>" ', + 'spellcheck="<%= spellcheck %>" ', + 'class="form-control <%= cls %>" ', + 'placeholder="<%= placeHolder %>" ', + 'value="<%= value %>"', + 'data-hint="<%= dataHint %>"', + 'data-hint-offset="<%= dataHintOffset %>"', + 'data-hint-direction="<%= dataHintDirection %>"', + '>', + '', + '' + + '
' + ].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'); + } + }, + } + })()); }); \ No newline at end of file diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less index d2c8f85a16..add44bec33 100644 --- a/apps/common/main/resources/less/input.less +++ b/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; + } } \ No newline at end of file diff --git a/apps/pdfeditor/main/app/controller/Toolbar.js b/apps/pdfeditor/main/app/controller/Toolbar.js index 4fd452e2a2..e42826dc29 100644 --- a/apps/pdfeditor/main/app/controller/Toolbar.js +++ b/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) { diff --git a/apps/pdfeditor/main/app/template/Toolbar.template b/apps/pdfeditor/main/app/template/Toolbar.template index 66d8c8eec9..6da2340a99 100644 --- a/apps/pdfeditor/main/app/template/Toolbar.template +++ b/apps/pdfeditor/main/app/template/Toolbar.template @@ -42,6 +42,18 @@
+
+
+ +
+
+ + + + +
+
+
diff --git a/apps/pdfeditor/main/app/view/Toolbar.js b/apps/pdfeditor/main/app/view/Toolbar.js index 1583b6a067..34ce222cdc 100644 --- a/apps/pdfeditor/main/app/view/Toolbar.js +++ b/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 || {})); });