Skip to content

Commit 422d37f

Browse files
JuliaRadzhabovaJuliaRadzhabova
committed
[PDF] Add button field settings
1 parent 2a64f9c commit 422d37f

File tree

4 files changed

+342
-5
lines changed

4 files changed

+342
-5
lines changed

‎apps/pdfeditor/main/app/template/FormSettings.template

+56
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@
1616
<div id="form-txt-pholder"></div>
1717
</td>
1818
</tr>
19+
<tr>
20+
<td class="padding-small form-button">
21+
<label class="input-label"><%= scope.textLayout %></label>
22+
<div id="form-combo-btn-layout" style="width: 100%;"></div>
23+
</td>
24+
</tr>
1925
</table>
2026
<table cols="2" role="presentation">
2127
<tr class="form-list-common">
@@ -125,6 +131,56 @@
125131
</td>
126132
</tr>
127133
</table>
134+
<table cols="1" role="presentation">
135+
<tr class="form-image">
136+
<td class="padding-small">
137+
<div class="separator horizontal"></div>
138+
</td>
139+
</tr>
140+
<tr class="form-image">
141+
<td>
142+
<label class="header padding-small"><%= scope.textPlacement %></label>
143+
</td>
144+
</tr>
145+
<tr class="form-image">
146+
<td class="padding-small">
147+
<label class="input-label"><%= scope.textScale %></label>
148+
<div id="form-combo-scale" style="width: 100%;"></div>
149+
</td>
150+
</tr>
151+
<tr class="form-image">
152+
<td class="padding-small">
153+
<label class="input-label"><%= scope.textHowScale %></label>
154+
<div id="form-combo-how-scale" style="width: 100%;"></div>
155+
</td>
156+
</tr>
157+
<tr class="form-image">
158+
<td class="padding-large">
159+
<div id="form-chb-fit"></div>
160+
</td>
161+
</tr>
162+
<tr class="form-image">
163+
<td class="padding-large">
164+
<div id="form-cnt-position" style="width: 100%;">
165+
<div class="row">
166+
<div id="form-img-position-preview">
167+
<div id="form-img-example"><%= scope.textImage %></div>
168+
</div>
169+
<div id="form-img-slider-position-y"></div>
170+
</div>
171+
<div class="row">
172+
<div id="form-img-slider-position-x"></div>
173+
<label id="form-img-slider-value"></label>
174+
</div>
175+
</div>
176+
</td>
177+
</tr>
178+
<!-- <tr class="form-image">-->
179+
<!-- <td class="padding-large">-->
180+
<!-- <div id="form-button-replace" style="width:100%;"></div>-->
181+
<!-- </td>-->
182+
<!-- </tr>-->
183+
</table>
128184
<table cols="2" role="presentation">
129185
<tr>
130186
<td colspan=2 class="padding-small">

‎apps/pdfeditor/main/app/view/FormSettings.js

+226-4
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ define([
9292
this.ComboSettings = el.find('.form-combo');
9393
this.CheckSettings = el.find('.form-checkbox');
9494
this.RadioOnlySettings = el.find('.form-radiobox');
95+
this.ButtonSettings = el.find('.form-button');
96+
this.ImageOnlySettings = el.find('.form-image');
9597
},
9698

9799
createDelayedElements: function() {
@@ -448,6 +450,103 @@ define([
448450
this.chUnison.on('change', this.onChUnison.bind(this));
449451
this.lockedControls.push(this.chUnison);
450452

453+
// button
454+
this.cmbLayout = new Common.UI.ComboBox({
455+
el: $markup.findById('#form-combo-btn-layout'),
456+
cls: 'input-group-nr',
457+
menuStyle: 'min-width: 100%;',
458+
editable: false,
459+
data: [
460+
{displayValue: this.textTextOnly, value: AscPDF.Api.Types.position.textOnly},
461+
{displayValue: this.textIconOnly, value: AscPDF.Api.Types.position.iconOnly},
462+
{displayValue: this.textIconTop, value: AscPDF.Api.Types.position.iconTextV},
463+
{displayValue: this.textLabelTop, value: AscPDF.Api.Types.position.textIconV},
464+
{displayValue: this.textIconLeft, value: AscPDF.Api.Types.position.iconTextH},
465+
{displayValue: this.textLabelLeft, value: AscPDF.Api.Types.position.textIconH},
466+
{displayValue: this.textOverlay, value: AscPDF.Api.Types.position.overlay}
467+
],
468+
dataHint: '1',
469+
dataHintDirection: 'bottom',
470+
dataHintOffset: 'big'
471+
});
472+
this.cmbLayout.setValue(AscPDF.Api.Types.position.textOnly);
473+
this.cmbLayout.on('selected', this.onLayoutChanged.bind(this));
474+
this.lockedControls.push(this.cmbLayout);
475+
476+
this.chFit = new Common.UI.CheckBox({
477+
el: $markup.findById('#form-chb-fit'),
478+
labelText: this.textFitBounds,
479+
dataHint: '1',
480+
dataHintDirection: 'left',
481+
dataHintOffset: 'small'
482+
});
483+
this.chFit.on('change', this.onChFit.bind(this));
484+
this.lockedControls.push(this.chFit);
485+
486+
this.cmbScale = new Common.UI.ComboBox({
487+
el: $markup.findById('#form-combo-scale'),
488+
cls: 'input-group-nr',
489+
menuStyle: 'min-width: 100%;',
490+
editable: false,
491+
data: [{ displayValue: this.textAlways, value: AscPDF.Api.Types.scaleWhen.always },
492+
{ displayValue: this.textNever, value: AscPDF.Api.Types.scaleWhen.never },
493+
{ displayValue: this.textTooBig, value: AscPDF.Api.Types.scaleWhen.tooBig },
494+
{ displayValue: this.textTooSmall, value: AscPDF.Api.Types.scaleWhen.tooSmall }],
495+
dataHint: '1',
496+
dataHintDirection: 'bottom',
497+
dataHintOffset: 'big'
498+
});
499+
this.cmbScale.setValue(AscPDF.Api.Types.scaleWhen.always);
500+
this.lockedControls.push(this.cmbScale);
501+
this.cmbScale.on('selected', this.onScaleChanged.bind(this));
502+
this.cmbScale.on('changed:after', this.onScaleChanged.bind(this));
503+
this.cmbScale.on('hide:after', this.onHideMenus.bind(this));
504+
505+
this.cmbHowScale = new Common.UI.ComboBox({
506+
el: $markup.findById('#form-combo-how-scale'),
507+
cls: 'input-group-nr',
508+
menuStyle: 'min-width: 100%;',
509+
editable: false,
510+
data: [{ displayValue: this.textProportional, value: AscPDF.Api.Types.scaleHow.proportional },
511+
{ displayValue: this.textAnamorphic, value: AscPDF.Api.Types.scaleHow.anamorphic }],
512+
dataHint: '1',
513+
dataHintDirection: 'bottom',
514+
dataHintOffset: 'big'
515+
});
516+
this.cmbHowScale.setValue(AscPDF.Api.Types.scaleHow.proportional);
517+
this.lockedControls.push(this.cmbHowScale);
518+
this.cmbHowScale.on('selected', this.onHowScaleChanged.bind(this));
519+
this.cmbHowScale.on('changed:after', this.onHowScaleChanged.bind(this));
520+
this.cmbHowScale.on('hide:after', this.onHideMenus.bind(this));
521+
522+
this.imagePositionPreview = $markup.findById('#form-img-example');
523+
this.imagePositionLabel = $markup.findById('#form-img-slider-value');
524+
525+
this.sldrPreviewPositionX = new Common.UI.SingleSlider({
526+
el: $markup.findById('#form-img-slider-position-x'),
527+
width: 116,
528+
minValue: 0,
529+
maxValue: 100,
530+
value: 50
531+
});
532+
this.sldrPreviewPositionX.on('change', _.bind(this.onImagePositionChange, this, 'x'));
533+
this.sldrPreviewPositionX.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'x'));
534+
535+
this.sldrPreviewPositionY = new Common.UI.SingleSlider({
536+
el: $markup.findById('#form-img-slider-position-y'),
537+
width: 116,
538+
minValue: 0,
539+
maxValue: 100,
540+
value: 50,
541+
direction: 'vertical'
542+
});
543+
this.sldrPreviewPositionY.on('change', _.bind(this.onImagePositionChange, this, 'y'));
544+
this.sldrPreviewPositionY.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'y'));
545+
546+
var xValue = this.sldrPreviewPositionX.getValue(),
547+
yValue = this.sldrPreviewPositionY.getValue();
548+
this.imagePositionLabel.text(xValue + ',' + yValue);
549+
451550
this.UpdateThemeColors();
452551
},
453552

@@ -710,6 +809,70 @@ define([
710809
}
711810
},
712811

812+
onLayoutChanged: function(combo, record) {
813+
if (this.api && !this._noApply) {
814+
this._state.Layout = undefined;
815+
this.api.SetButtonLayout(record.value);
816+
this.fireEvent('editcomplete', this);
817+
}
818+
},
819+
820+
onChFit: function(field, newValue, oldValue, eOpts){
821+
if (this.api && !this._noApply) {
822+
this.api.SetButtonFitBounds(field.getValue()==='checked');
823+
this.fireEvent('editcomplete', this);
824+
}
825+
},
826+
827+
onScaleChanged: function(combo, record) {
828+
if (this.api && !this._noApply) {
829+
this._state.Scale = undefined;
830+
this.api.SetButtonScaleWhen(record.value);
831+
this.fireEvent('editcomplete', this);
832+
}
833+
},
834+
835+
onHowScaleChanged: function(combo, record) {
836+
if (this.api && !this._noApply) {
837+
this._state.HowScale = undefined;
838+
this.api.SetButtonScaleHow(record.value);
839+
this.fireEvent('editcomplete', this);
840+
}
841+
},
842+
843+
onImagePositionChange: function (type, field, newValue, oldValue) {
844+
var value = ((130 - 80) * newValue) / 100 - 1;
845+
if (type === 'x') {
846+
this.imagePositionPreview.css({'left': value + 'px'});
847+
this._state.imgPositionX = newValue;
848+
} else {
849+
this.imagePositionPreview.css({'top': value + 'px'});
850+
this._state.imgPositionY = newValue;
851+
}
852+
if (_.isUndefined(this._state.imgPositionX)) {
853+
this._state.imgPositionX = 50;
854+
} else if (_.isUndefined(this._state.imgPositionY)) {
855+
this._state.imgPositionY = 50;
856+
}
857+
this.imagePositionLabel.text(Math.round(this._state.imgPositionX) + ',' + Math.round(this._state.imgPositionY));
858+
},
859+
860+
onImagePositionChangeComplete: function (type, field, newValue, oldValue) {
861+
if (type === 'x') {
862+
this._state.imgPositionX = newValue;
863+
} else {
864+
this._state.imgPositionY = newValue;
865+
}
866+
this.imgPositionApplyFunc(type);
867+
},
868+
869+
imgPositionApplyFunc: function (type) {
870+
if (this.api && !this._noApply) {
871+
this.api.SetButtonIconPos(this._state.imgPositionX / 100, this._state.imgPositionY / 100);
872+
this.fireEvent('editcomplete', this);
873+
}
874+
},
875+
713876
ChangeSettings: function(props, isShape) {
714877
if (this._initSettings)
715878
this.createDelayedElements();
@@ -918,9 +1081,60 @@ define([
9181081
this.disableListButtons();
9191082
}
9201083

921-
if (type == AscPDF.FIELD_TYPES.button)
1084+
if (type === AscPDF.FIELD_TYPES.button) {
9221085
// this.labelFormName.text(props.is_Signature() ? this.textSignature : this.textImage);
923-
this.labelFormName.text(this.textImage);
1086+
this.labelFormName.text(this.textButton);
1087+
if (specProps) {
1088+
val = specProps.asc_getLayout();
1089+
if (this._state.Layout!==val) {
1090+
this.cmbLayout.setValue(val, '');
1091+
this._state.Layout=val;
1092+
}
1093+
1094+
if (val!==AscPDF.Api.Types.position.textOnly) {
1095+
val = specProps.asc_getScaleWhen();
1096+
if (this._state.Scale!==val) {
1097+
this.cmbScale.setValue(val, '');
1098+
this._state.Scale=val;
1099+
}
1100+
1101+
val = specProps.asc_getScaleHow();
1102+
if (this._state.HowScale!==val) {
1103+
this.cmbHowScale.setValue(val, '');
1104+
this._state.HowScale=val;
1105+
}
1106+
1107+
val = specProps.asc_getIconPos();
1108+
if (val) {
1109+
var x = val.X * 100,
1110+
y = val.Y * 100;
1111+
if (this._state.imgPositionX !== x) {
1112+
this.sldrPreviewPositionX.setValue(x);
1113+
this._state.imgPositionX = x;
1114+
}
1115+
if (this._state.imgPositionY !== y) {
1116+
this.sldrPreviewPositionY.setValue(y);
1117+
this._state.imgPositionY = y;
1118+
}
1119+
this.imagePositionLabel.text(Math.round(this._state.imgPositionX) + ',' + Math.round(this._state.imgPositionY));
1120+
val = ((130 - 80) * this._state.imgPositionX) / 100 - 1;
1121+
this.imagePositionPreview.css({'left': val + 'px'});
1122+
val = ((130 - 80) * this._state.imgPositionY) / 100 - 1;
1123+
this.imagePositionPreview.css({'top': val + 'px'});
1124+
}
1125+
1126+
val = specProps.asc_getFitBounds();
1127+
if ( this._state.Fit!==val ) {
1128+
this.chFit.setValue(!!val, true);
1129+
this._state.Fit=val;
1130+
}
1131+
this.chFit.setDisabled(this._state.Scale === AscPDF.Api.Types.scaleWhen.never || this._state.DisabledControls);
1132+
var disableSliders = this._state.Scale === AscPDF.Api.Types.scaleWhen.always && !this._state.Fit || this._state.DisabledControls;
1133+
this.sldrPreviewPositionX.setDisabled(disableSliders);
1134+
this.sldrPreviewPositionY.setDisabled(disableSliders);
1135+
}
1136+
}
1137+
}
9241138

9251139
if (type == AscPDF.FIELD_TYPES.checkbox || type == AscPDF.FIELD_TYPES.radiobutton) {
9261140
var isCheckbox = type == AscPDF.FIELD_TYPES.checkbox;
@@ -959,7 +1173,7 @@ define([
9591173

9601174
this._noApply = false;
9611175

962-
if (this.type !== type)
1176+
if (this.type !== type || type === AscPDF.FIELD_TYPES.button)
9631177
this.showHideControls(type, specProps);
9641178

9651179
if (this.type !== type)
@@ -1062,14 +1276,20 @@ define([
10621276
this.spnCombChars.setDisabled(!isComb || this._state.DisabledControls);
10631277
this.chMaxChars.setDisabled(isComb || this._state.DisabledControls);
10641278
this.spnMaxChars.setDisabled(isComb || this.chMaxChars.getValue()!=='checked' || this._state.DisabledControls);
1279+
this.chFit.setDisabled(this._state.Scale === AscPDF.Api.Types.scaleWhen.never || this._state.DisabledControls);
1280+
var disableSliders = this._state.Scale === AscPDF.Api.Types.scaleWhen.always && !this._state.Fit || this._state.DisabledControls;
1281+
this.sldrPreviewPositionX.setDisabled(disableSliders);
1282+
this.sldrPreviewPositionY.setDisabled(disableSliders);
10651283
},
10661284

10671285
showHideControls: function(type, specProps) {
10681286
var isCombobox = type === AscPDF.FIELD_TYPES.combobox,
10691287
isText = type === AscPDF.FIELD_TYPES.text,
10701288
isListbox = type === AscPDF.FIELD_TYPES.listbox,
10711289
isCheck = type === AscPDF.FIELD_TYPES.checkbox,
1072-
isRadio = type === AscPDF.FIELD_TYPES.radiobutton;
1290+
isRadio = type === AscPDF.FIELD_TYPES.radiobutton,
1291+
isButton = type === AscPDF.FIELD_TYPES.button,
1292+
isImage = isButton && (specProps.asc_getLayout()!==AscPDF.Api.Types.position.textOnly);
10731293
this.PlaceholderSettings.toggleClass('hidden', !(isCombobox || isText));
10741294
this.AutofitSettings.toggleClass('hidden', !(isCombobox || isText));
10751295
this.ListSettings.toggleClass('hidden', !(isCombobox || isListbox));
@@ -1078,6 +1298,8 @@ define([
10781298
this.ListboxOnlySettings.toggleClass('hidden', !isListbox);
10791299
this.CheckSettings.toggleClass('hidden', !(isCheck || isRadio));
10801300
this.RadioOnlySettings.toggleClass('hidden', !isRadio);
1301+
this.ButtonSettings.toggleClass('hidden', !isButton);
1302+
this.ImageOnlySettings.toggleClass('hidden', !isImage);
10811303
}
10821304

10831305
}, PDFE.Views.FormSettings || {}));

‎apps/pdfeditor/main/locale/en.json

+21-1
Original file line numberDiff line numberDiff line change
@@ -1379,7 +1379,8 @@
13791379
"PDFE.Views.FormSettings.textPlaceholder": "Placeholder",
13801380
"PDFE.Views.FormSettings.textRadiobox": "Radio button",
13811381
"PDFE.Views.FormSettings.textName": "Name",
1382-
"PDFE.Views.FormSettings.textImage": "Button",
1382+
"PDFE.Views.FormSettings.textButton": "Button",
1383+
"PDFE.Views.FormSettings.textImage": "Image",
13831384
"PDFE.Views.FormSettings.textColor": "Color",
13841385
"PDFE.Views.FormSettings.textBackgroundColor": "Background color",
13851386
"PDFE.Views.FormSettings.textRequired": "Required",
@@ -1422,6 +1423,25 @@
14221423
"PDFE.Views.FormSettings.textCircle": "Circle",
14231424
"PDFE.Views.FormSettings.textStar": "Star",
14241425
"PDFE.Views.FormSettings.textUnison": "Buttons with the same name and choice are selected in unison",
1426+
"PDFE.Views.FormSettings.textLayout": "Layout",
1427+
"PDFE.Views.FormSettings.textScale": "When to scale",
1428+
"PDFE.Views.FormSettings.textHowScale": "Scale",
1429+
"PDFE.Views.FormSettings.textSelectImage": "Select Image",
1430+
"PDFE.Views.FormSettings.textTextOnly": "Label only",
1431+
"PDFE.Views.FormSettings.textIconOnly": "Icon only",
1432+
"PDFE.Views.FormSettings.textIconTop": "Icon top, label bottom",
1433+
"PDFE.Views.FormSettings.textLabelTop": "Label top, icon bottom",
1434+
"PDFE.Views.FormSettings.textIconLeft": "Icon left, label right",
1435+
"PDFE.Views.FormSettings.textLabelLeft": "Label left, icon right",
1436+
"PDFE.Views.FormSettings.textOverlay": "Label over icon",
1437+
"PDFE.Views.FormSettings.textPlacement": "Icon placement",
1438+
"PDFE.Views.FormSettings.textFitBounds": "Fit to bounds",
1439+
"PDFE.Views.FormSettings.textProportional": "Proportionally",
1440+
"PDFE.Views.FormSettings.textAnamorphic": "Nonproportionally",
1441+
"PDFE.Views.FormSettings.textAlways": "Always",
1442+
"PDFE.Views.FormSettings.textNever": "Never",
1443+
"PDFE.Views.FormSettings.textTooBig": "Image is too big",
1444+
"PDFE.Views.FormSettings.textTooSmall": "Image is too small",
14251445
"PDFE.Views.FormsTab.capBtnCheckBox": "Checkbox",
14261446
"PDFE.Views.FormsTab.capBtnComboBox": "Combo Box",
14271447
"PDFE.Views.FormsTab.capBtnDownloadForm": "Download As PDF",

0 commit comments

Comments
 (0)