mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 12:55:34 +08:00
[PDFE] Change current page from toolbar
This commit is contained in:
Julia Radzhabova
@ -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([
|
||||
'<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');
|
||||
}
|
||||
},
|
||||
}
|
||||
})());
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 || {}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user