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

[PE][SSE] Add crop for images

Browse source
This commit is contained in:
Julia Radzhabova 2019-04-09 10:22:01 +03:00
parent 4aa5927bec
commit e9e63d0c87
6 changed files with 144 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/presentationeditor/main/app/template/ImageSettings.template
View file

@ -17,6 +17,11 @@
<button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="image-button-crop" style="width: 100px;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>

65
apps/presentationeditor/main/app/view/ImageSettings.js
View file

@ -93,6 +93,9 @@ define([
setApi: function(api) {
this.api = api;
if (this.api) {
this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
}
return this;
},
@ -139,6 +142,37 @@ define([
this.fireEvent('editcomplete', this);
}, this));
this.btnCrop = new Common.UI.Button({
cls: 'btn-text-split-default',
caption: this.textCrop,
split: true,
enableToggle: true,
allowDepress: true,
width: 100,
menu : new Common.UI.Menu({
style : 'min-width: 100px;',
items: [
{
caption: this.textCrop,
checkable: true,
allowDepress: true,
value: 0
},
{
caption: this.textCropFill,
value: 1
},
{
caption: this.textCropFit,
value: 2
}]
})
});
this.btnCrop.render( $('#image-button-crop')) ;
this.btnCrop.on('click', _.bind(this.onCrop, this));
this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
this.lockedControls.push(this.btnCrop);
this.btnRotate270 = new Common.UI.Button({
cls: 'btn-toolbar',
iconCls: 'rotate-270',
@ -312,6 +346,31 @@ define([
}
},
_changeCropState: function(state) {
this.btnCrop.toggle(state, true);
this.btnCrop.menu.items[0].setChecked(state, true);
},
onCrop: function(btn, e) {
if (this.api) {
btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
}
this.fireEvent('editcomplete', this);
},
onCropMenu: function(menu, item) {
if (this.api) {
if (item.value == 1) {
this.api.asc_cropFill();
} else if (item.value == 2) {
this.api.asc_cropFit();
} else {
item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
}
}
this.fireEvent('editcomplete', this);
},
onBtnRotateClick: function(btn) {
var properties = new Asc.asc_CImgProperty();
properties.asc_putRotAdd((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
@ -343,6 +402,7 @@ define([
});
this.linkAdvanced.toggleClass('disabled', disable);
}
this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop());
},
textSize: 'Size',
@ -361,7 +421,10 @@ define([
textHint270: 'Rotate 90° Counterclockwise',
textHint90: 'Rotate 90° Clockwise',
textHintFlipV: 'Flip Vertically',
textHintFlipH: 'Flip Horizontally'
textHintFlipH: 'Flip Horizontally',
textCrop: 'Crop',
textCropFill: 'Fill',
textCropFit: 'Fit'
}, PE.Views.ImageSettings || {}));
});

3
apps/presentationeditor/main/locale/en.json
View file

@ -1240,6 +1240,9 @@
"PE.Views.ImageSettings.textRotation": "Rotation",
"PE.Views.ImageSettings.textSize": "Size",
"PE.Views.ImageSettings.textWidth": "Width",
"PE.Views.ImageSettings.textCrop": "Crop",
"PE.Views.ImageSettings.textCropFill": "Fill",
"PE.Views.ImageSettings.textCropFit": "Fit",
"PE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
"PE.Views.ImageSettingsAdvanced.okButtonText": "OK",
"PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",

5
apps/spreadsheeteditor/main/app/template/ImageSettings.template
View file

@ -24,6 +24,11 @@
<button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="image-button-crop" style="width: 100px;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>

65
apps/spreadsheeteditor/main/app/view/ImageSettings.js
View file

@ -97,6 +97,9 @@ define([
setApi: function(api) {
if ( api == undefined ) return;
this.api = api;
if (this.api) {
this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
}
return this;
},
@ -195,6 +198,37 @@ define([
this.lblReplace = $('#image-lbl-replace');
this.btnCrop = new Common.UI.Button({
cls: 'btn-text-split-default',
caption: this.textCrop,
split: true,
enableToggle: true,
allowDepress: true,
width: 100,
menu : new Common.UI.Menu({
style : 'min-width: 100px;',
items: [
{
caption: this.textCrop,
checkable: true,
allowDepress: true,
value: 0
},
{
caption: this.textCropFill,
value: 1
},
{
caption: this.textCropFit,
value: 2
}]
})
});
this.btnCrop.render( $('#image-button-crop')) ;
this.btnCrop.on('click', _.bind(this.onCrop, this));
this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
this.lockedControls.push(this.btnCrop);
this.btnRotate270 = new Common.UI.Button({
cls: 'btn-toolbar',
iconCls: 'rotate-270',
@ -410,6 +444,31 @@ define([
})).show();
},
_changeCropState: function(state) {
this.btnCrop.toggle(state, true);
this.btnCrop.menu.items[0].setChecked(state, true);
},
onCrop: function(btn, e) {
if (this.api) {
btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
}
this.fireEvent('editcomplete', this);
},
onCropMenu: function(menu, item) {
if (this.api) {
if (item.value == 1) {
this.api.asc_cropFill();
} else if (item.value == 2) {
this.api.asc_cropFit();
} else {
item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
}
}
this.fireEvent('editcomplete', this);
},
onBtnRotateClick: function(btn) {
var properties = new Asc.asc_CImgProperty();
properties.asc_putRotAdd((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
@ -441,6 +500,7 @@ define([
});
this.linkAdvanced.toggleClass('disabled', disable);
}
this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop());
},
textKeepRatio: 'Constant Proportions',
@ -460,6 +520,9 @@ define([
textHint270: 'Rotate 90° Counterclockwise',
textHint90: 'Rotate 90° Clockwise',
textHintFlipV: 'Flip Vertically',
textHintFlipH: 'Flip Horizontally'
textHintFlipH: 'Flip Horizontally',
textCrop: 'Crop',
textCropFill: 'Fill',
textCropFit: 'Fit'
}, SSE.Views.ImageSettings || {}));
});

3
apps/spreadsheeteditor/main/locale/en.json
View file

@ -1605,6 +1605,9 @@
"SSE.Views.ImageSettings.textRotation": "Rotation",
"SSE.Views.ImageSettings.textSize": "Size",
"SSE.Views.ImageSettings.textWidth": "Width",
"SSE.Views.ImageSettings.textCrop": "Crop",
"SSE.Views.ImageSettings.textCropFill": "Fill",
"SSE.Views.ImageSettings.textCropFit": "Fit",
"SSE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
"SSE.Views.ImageSettingsAdvanced.okButtonText": "Ok",
"SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",