Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Make position image setting in form settings

Browse source
This commit is contained in:
JuliaSvinareva 2021-08-05 01:27:55 +03:00
parent b634ce9493
commit f466027c0f
4 changed files with 94 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/resources/less/slider.less
View file

@ -39,10 +39,12 @@
padding-top: 0;
padding-left: 7px;
.track {
position: absolute;
@track-height: 4px;
height: 100%;
height: calc(100% + @track-height);
width: @track-height;
margin-left: 0;
margin-top: -@track-height / 2;
}
.thumb {
@thumb-width: 12px;

1
apps/documenteditor/main/app/template/FormSettings.template
View file

@ -95,6 +95,7 @@
</div>
<div class="row">
<div id="form-img-slider-position-x"></div>
<label id="form-img-slider-value"></label>
</div>
</div>
</td>

86
apps/documenteditor/main/app/view/FormSettings.js
View file

@ -423,6 +423,9 @@ define([
this.cmbScale.on('changed:after', this.onScaleChanged.bind(this));
this.cmbScale.on('hide:after', this.onHideMenus.bind(this));
this.imagePositionPreview = $markup.findById('#form-img-example');
this.imagePositionLabel = $markup.findById('#form-img-slider-value');
this.sldrPreviewPositionX = new Common.UI.SingleSlider({
el: $('#form-img-slider-position-x'),
width: 116,
@ -430,6 +433,9 @@ define([
maxValue: 100,
value: 50
});
this.sldrPreviewPositionX.on('change', _.bind(this.onImagePositionChange, this, 'x'));
this.sldrPreviewPositionX.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'x'));
this.lockedControls.push(this.sldrPreviewPositionX);
this.sldrPreviewPositionY = new Common.UI.SingleSlider({
el: $('#form-img-slider-position-y'),
@ -439,6 +445,13 @@ define([
value: 50,
direction: 'vertical'
});
this.sldrPreviewPositionY.on('change', _.bind(this.onImagePositionChange, this, 'y'));
this.sldrPreviewPositionY.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'y'));
this.lockedControls.push(this.sldrPreviewPositionY);
var xValue = this.sldrPreviewPositionX.getValue(),
yValue = this.sldrPreviewPositionY.getValue();
this.imagePositionLabel.text(xValue + ',' + yValue);
this.updateMetricUnit();
this.UpdateThemeColors();
@ -923,6 +936,22 @@ define([
this.cmbScale.setValue(val);
this._state.scaleFlag=val;
}
val = pictPr.get_ShiftX() * 100;
if (this._state.imgPositionX !== val) {
this.sldrPreviewPositionX.setValue(val);
this._state.imgPositionX = val;
}
val = pictPr.get_ShiftY() * 100;
if (this._state.imgPositionY !== val) {
this.sldrPreviewPositionY.setValue(val);
this._state.imgPositionY = val;
}
this.imagePositionLabel.text(Math.round(this._state.imgPositionX) + ',' + Math.round(this._state.imgPositionY));
val = ((130 - 80) * this._state.imgPositionX) / 100 - 1;
this.imagePositionPreview.css({'left': val + 'px'});
val = (130 - 80) * (100 - this._state.imgPositionY) / 100 - 1;
this.imagePositionPreview.css({'top': val + 'px'});
}
var formTextPr = props.get_TextFormPr();
@ -1128,6 +1157,63 @@ define([
this.btnListDown.setDisabled(disabled || this._state.DisabledControls);
},
onImagePositionChange: function (type, field, newValue, oldValue) {
var value;
if (type === 'x') {
value = ((130 - 80) * newValue) / 100 - 1;
this.imagePositionPreview.css({'left': value + 'px'});
this._state.imgPositionX = newValue;
} else {
value = (130 - 80) * (100 - newValue) / 100 - 1;
this.imagePositionPreview.css({'top': value + 'px'});
this._state.imgPositionY = newValue;
}
if (_.isUndefined(this._state.imgPositionX)) {
this._state.imgPositionX = 50;
} else if (_.isUndefined(this._state.imgPositionY)) {
this._state.imgPositionY = 50;
}
this.imagePositionLabel.text(Math.round(this._state.imgPositionX) + ',' + Math.round(this._state.imgPositionY));
if (this._sendUndoPoint) {
this.api.setStartPointHistory();
this._sendUndoPoint = false;
this.updateslider = setInterval(_.bind(this.imgPositionApplyFunc, this, type), 100);
}
},
onImagePositionChangeComplete: function (type, field, newValue, oldValue) {
clearInterval(this.updateslider);
if (type === 'x') {
this._state.imgPositionX = newValue;
} else {
this._state.imgPositionY = newValue;
}
if (!this._sendUndoPoint) { // start point was added
this.api.setEndPointHistory();
this.imgPositionApplyFunc(type);
}
this._sendUndoPoint = true;
},
imgPositionApplyFunc: function (type) {
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
var pictPr = this._originalPictProps || new AscCommon.CSdtPictureFormPr();
var val;
if (type === 'x') {
val = this._state.imgPositionX / 100;
pictPr.put_ShiftX(val);
} else {
val = this._state.imgPositionY / 100;
pictPr.put_ShiftY(val);
}
props.put_PictureFormPr(pictPr);
this.api.asc_SetContentControlProperties(props, this.internalId);
this.fireEvent('editcomplete', this);
}
},
textField: 'Text Field',
textKey: 'Key',
textPlaceholder: 'Placeholder',

4
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -193,4 +193,8 @@
margin-top: 7px;
margin-left: 4px;
}
#form-img-slider-value {
margin-left: 10px;
margin-top: 4px;
}
}