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

[PE][SSE] Bug 42913: load image for filling shape, slide and replacing image from storage.

Browse source
This commit is contained in:
Julia Radzhabova 2020-05-13 17:20:58 +03:00
parent c4aac9cde3
commit fc4de46980
16 changed files with 394 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -368,6 +368,8 @@ define([
this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onApiMathTypes, this));
this.api.asc_registerCallback('asc_onContextMenu', _.bind(this.onContextMenu, this));
this.api.asc_registerCallback('asc_onTextLanguage', _.bind(this.onTextLanguage, this));
Common.NotificationCenter.on('storage:image-load', _.bind(this.openImageFromStorage, this));
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
} else if (this.mode.isRestrictedEdit) {
this.api.asc_registerCallback('asc_onCountPages', _.bind(this.onApiCountPagesRestricted, this));
}
@ -1453,26 +1455,36 @@ define([
}
})).show();
} else if (opts === 'storage') {
if (this.toolbar.mode.canRequestInsertImage) {
Common.Gateway.requestInsertImage();
} else {
(new Common.Views.SelectFileDlg({
fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
})).on('selectfile', function(obj, file){
me.insertImage(file);
}).show();
}
Common.NotificationCenter.trigger('storage:image-load', 'add');
}
},
insertImage: function(data) {
if (data && data.url) {
openImageFromStorage: function(type) {
var me = this;
if (this.toolbar.mode.canRequestInsertImage) {
Common.Gateway.requestInsertImage(type);
} else {
(new Common.Views.SelectFileDlg({
fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
})).on('selectfile', function(obj, file){
file && (file.c = type);
me.insertImage(file);
}).show();
}
},
insertImageFromStorage: function(data) {
if (data && data.url && (!data.c || data.c=='add')) {
this.toolbar.fireEvent('insertimage', this.toolbar);
this.api.AddImageUrl(data.url, undefined, data.token);// for loading from storage
Common.component.Analytics.trackEvent('ToolBar', 'Image');
}
},
insertImage: function(data) { // gateway
Common.NotificationCenter.trigger('storage:image-insert', data);
},
onInsertText: function(status) {
if ( status == 'begin' ) {
this._addAutoshape(true, 'textRect');

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

@ -60,20 +60,12 @@
</tr>
<tr>
<td colspan=2>
<label class="header" id="image-lbl-replace" ><%= scope.textInsert %></label>
</td>
</tr>
<tr>
<td width="50%">
<button type="button" class="btn btn-text-default" id="image-button-from-file" style="width:85px;"><%= scope.textFromFile %></button>
</td>
<td width="50%">
<button type="button" class="btn btn-text-default" id="image-button-from-url" style="width:85px;"><%= scope.textFromUrl %></button>
<div id="image-button-replace" style="width:100%;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100px;"><%= scope.textEdit %></button>
<button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
</td>
</tr>
<tr>

7
apps/presentationeditor/main/app/template/ShapeSettings.template
View file

@ -17,11 +17,8 @@
<div id="shape-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
<table cols="2" style="width: 100%;">
<tr>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="shape-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
</td>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="shape-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
<td colspan="2" class="padding-small">
<div id="shape-button-replace" style="width:100%;"></div>
</td>
</tr>
<tr>

7
apps/presentationeditor/main/app/template/SlideSettings.template
View file

@ -17,11 +17,8 @@
<div id="slide-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
<table cols="2" style="width: 100%;">
<tr>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="slide-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
</td>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="slide-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
<td colspan="2" class="padding-small">
<div id="slide-button-replace" style="width:100%;"></div>
</td>
</tr>
<tr>

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

@ -97,9 +97,14 @@ define([
if (this.api) {
this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
}
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
return this;
},
setMode: function(mode) {
this.mode = mode;
},
updateMetricUnit: function() {
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(2) + ' ' + Common.Utils.Metric.getCurrentMetricName();
@ -114,15 +119,24 @@ define([
});
this.lockedControls.push(this.btnOriginalSize);
this.btnInsertFromFile = new Common.UI.Button({
el: $('#image-button-from-file')
this.btnSelectImage = new Common.UI.Button({
parentEl: $('#image-button-replace'),
cls: 'btn-text-menu-default',
caption: this.textInsert,
style: "width:100%;",
menu: new Common.UI.Menu({
style: 'min-width: 194px;',
maxHeight: 200,
items: [
{caption: this.textFromFile, value: 0},
{caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2}
]
})
});
this.lockedControls.push(this.btnInsertFromFile);
this.btnInsertFromUrl = new Common.UI.Button({
el: $('#image-button-from-url')
});
this.lockedControls.push(this.btnInsertFromUrl);
this.lockedControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
this.btnEditObject = new Common.UI.Button({
el: $('#image-button-edit-object')
@ -130,14 +144,6 @@ define([
this.lockedControls.push(this.btnEditObject);
this.btnOriginalSize.on('click', _.bind(this.setOriginalSize, this));
this.btnInsertFromFile.on('click', _.bind(function(btn){
if (this._isFromFile) return;
this._isFromFile = true;
if (this.api) this.api.ChangeImageFromFile();
this.fireEvent('editcomplete', this);
this._isFromFile = false;
}, this));
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
this.btnEditObject.on('click', _.bind(function(btn){
if (this.api) this.api.asc_startEditCurrentOleObject();
this.fireEvent('editcomplete', this);
@ -228,7 +234,6 @@ define([
this.lockedControls.push(this.btnFlipH);
this.linkAdvanced = $('#image-advanced-link');
this.lblReplace = $('#image-lbl-replace');
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
},
@ -264,10 +269,8 @@ define([
var pluginGuid = props.asc_getPluginGuid();
value = (pluginGuid !== null && pluginGuid !== undefined); // undefined - only images are selected, null - selected images and ole-objects
if (this._state.isOleObject!==value) {
this.btnInsertFromUrl.setVisible(!value);
this.btnInsertFromFile.setVisible(!value);
this.btnSelectImage.setVisible(!value);
this.btnEditObject.setVisible(value);
this.lblReplace.text(value ? this.textEditObject : this.textInsert);
this.btnRotate270.setDisabled(value);
this.btnRotate90.setDisabled(value);
this.btnFlipV.setDisabled(value);
@ -279,8 +282,7 @@ define([
var plugin = PE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
this.btnEditObject.setDisabled(plugin===null || plugin ===undefined || this._locked);
} else {
this.btnInsertFromUrl.setDisabled(pluginGuid===null || this._locked);
this.btnInsertFromFile.setDisabled(pluginGuid===null || this._locked);
this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
}
}
},
@ -303,25 +305,43 @@ define([
}
},
insertFromUrl: function() {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
var props = new Asc.asc_CImgProperty();
props.put_ImageUrl(checkUrl);
me.api.ImgApply(props);
}
}
}
me.fireEvent('editcomplete', me);
}
})).show();
insertImageFromStorage: function(data) {
if (data && data.url && data.c=='change') {
var props = new Asc.asc_CImgProperty();
props.put_ImageUrl(data.url, data.token);
this.api.ImgApply(props);
}
},
onImageSelect: function(menu, item) {
if (item.value==1) {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
var props = new Asc.asc_CImgProperty();
props.put_ImageUrl(checkUrl);
me.api.ImgApply(props);
}
}
}
me.fireEvent('editcomplete', me);
}
})).show();
} else if (item.value==2) {
Common.NotificationCenter.trigger('storage:image-load', 'change');
} else {
if (this._isFromFile) return;
this._isFromFile = true;
if (this.api) this.api.ChangeImageFromFile();
this.fireEvent('editcomplete', this);
this._isFromFile = false;
}
},
openAdvancedSettings: function(e) {
if (this.linkAdvanced.hasClass('disabled')) return;
@ -448,7 +468,7 @@ define([
textCrop: 'Crop',
textCropFill: 'Fill',
textCropFit: 'Fit',
textFitSlide: 'Fit to Slide'
textFitSlide: 'Fit to Slide',
textFromStorage: 'From Storage'
}, PE.Views.ImageSettings || {}));
});

4
apps/presentationeditor/main/app/view/RightMenu.js
View file

@ -228,7 +228,9 @@ define([
},
setMode: function(mode) {
this.imageSettings && this.imageSettings.setMode(mode);
this.shapeSettings && this.shapeSettings.setMode(mode);
this.slideSettings && this.slideSettings.setMode(mode);
},
onBtnMenuClick: function(btn, e) {

103
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -146,9 +146,14 @@ define([
this.api.asc_setInterfaceDrawImagePlaceShape('shape-texture-img');
this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
}
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
return this;
},
setMode: function(mode) {
this.mode = mode;
},
onFillSrcSelect: function(combo, record) {
this.ShowHideElem(record.value);
switch (record.value){
@ -630,31 +635,54 @@ define([
this.fireEvent('editcomplete', this);
},
insertFromUrl: function() {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
if (me.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.put_fill( new Asc.asc_CFillBlip());
fill.get_fill().put_type(me.BlipFillType);
fill.get_fill().put_url(checkUrl);
insertImageFromStorage: function(data) {
if (data && data.url && data.c=='fill') {
if (this.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.put_fill( new Asc.asc_CFillBlip());
fill.get_fill().put_type(this.BlipFillType);
fill.get_fill().put_url(data.url, data.token);
props.put_fill(fill);
me.api.ShapeApply(props);
props.put_fill(fill);
this.api.ShapeApply(props);
}
}
},
onImageSelect: function(menu, item) {
if (item.value==1) {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
if (me.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.put_fill( new Asc.asc_CFillBlip());
fill.get_fill().put_type(me.BlipFillType);
fill.get_fill().put_url(checkUrl);
props.put_fill(fill);
me.api.ShapeApply(props);
}
}
}
}
me.fireEvent('editcomplete', me);
}
me.fireEvent('editcomplete', me);
}
})).show();
})).show();
} else if (item.value==2) {
Common.NotificationCenter.trigger('storage:image-load', 'fill');
} else {
if (this.api) this.api.ChangeShapeImageFromFile(this.BlipFillType);
this.fireEvent('editcomplete', this);
}
},
openAdvancedSettings: function(e) {
@ -1119,21 +1147,24 @@ define([
});
this.fillControls.push(this.cmbPattern);
this.btnInsertFromFile = new Common.UI.Button({
el: $('#shape-button-from-file')
this.btnSelectImage = new Common.UI.Button({
parentEl: $('#shape-button-replace'),
cls: 'btn-text-menu-default',
caption: this.textSelectImage,
style: "width:100%;",
menu: new Common.UI.Menu({
style: 'min-width: 194px;',
maxHeight: 200,
items: [
{caption: this.textFromFile, value: 0},
{caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2}
]
})
});
this.fillControls.push(this.btnInsertFromFile);
this.btnInsertFromUrl = new Common.UI.Button({
el: $('#shape-button-from-url')
});
this.fillControls.push(this.btnInsertFromUrl);
this.btnInsertFromFile.on('click', _.bind(function(btn){
if (this.api) this.api.ChangeShapeImageFromFile(this.BlipFillType);
this.fireEvent('editcomplete', this);
}, this));
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
this.fillControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
this._arrFillType = [
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@ -1712,6 +1743,8 @@ define([
textHint90: 'Rotate 90° Clockwise',
textHintFlipV: 'Flip Vertically',
textHintFlipH: 'Flip Horizontally',
strShadow: 'Show shadow'
strShadow: 'Show shadow',
textFromStorage: 'From Storage',
textSelectImage: 'Select Picture'
}, PE.Views.ShapeSettings || {}));
});

102
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -292,9 +292,14 @@ define([
this.api.SetInterfaceDrawImagePlaceSlide('slide-texture-img');
this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
}
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
return this;
},
setMode: function(mode) {
this.mode = mode;
},
onFillSrcSelect: function(combo, record) {
this.ShowHideElem(record.value);
switch (record.value){
@ -640,31 +645,54 @@ define([
}
},
insertFromUrl: function() {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
if (me.BlipFillType !== null) {
var props = new Asc.CAscSlideProps();
var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.put_fill( new Asc.asc_CFillBlip());
fill.get_fill().put_type(me.BlipFillType);
fill.get_fill().put_url(checkUrl);
insertImageFromStorage: function(data) {
if (data && data.url && data.c=='slide') {
if (this.BlipFillType !== null) {
var props = new Asc.CAscSlideProps();
var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.put_fill( new Asc.asc_CFillBlip());
fill.get_fill().put_type(this.BlipFillType);
fill.get_fill().put_url(data.url, data.token);
props.put_background(fill);
me.api.SetSlideProps(props);
props.put_background(fill);
this.api.SetSlideProps(props);
}
}
},
onImageSelect: function(menu, item) {
if (item.value==1) {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
if (me.BlipFillType !== null) {
var props = new Asc.CAscSlideProps();
var fill = new Asc.asc_CShapeFill();
fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.put_fill( new Asc.asc_CFillBlip());
fill.get_fill().put_type(me.BlipFillType);
fill.get_fill().put_url(checkUrl);
props.put_background(fill);
me.api.SetSlideProps(props);
}
}
}
}
me.fireEvent('editcomplete', me);
}
me.fireEvent('editcomplete', me);
}
})).show();
})).show();
} else if (item.value==2) {
Common.NotificationCenter.trigger('storage:image-load', 'slide');
} else {
if (this.api) this.api.ChangeSlideImageFromFile(this.BlipFillType);
this.fireEvent('editcomplete', this);
}
},
createDelayedControls: function() {
@ -692,20 +720,24 @@ define([
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
this.FillItems.push(this.cmbPattern);
this.btnInsertFromFile = new Common.UI.Button({
el: $('#slide-button-from-file')
this.btnSelectImage = new Common.UI.Button({
parentEl: $('#slide-button-replace'),
cls: 'btn-text-menu-default',
caption: this.textSelectImage,
style: "width:100%;",
menu: new Common.UI.Menu({
style: 'min-width: 194px;',
maxHeight: 200,
items: [
{caption: this.textFromFile, value: 0},
{caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2}
]
})
});
this.btnInsertFromFile.on('click', _.bind(function(btn){
if (this.api) this.api.ChangeSlideImageFromFile(this.BlipFillType);
this.fireEvent('editcomplete', this);
}, this));
this.FillItems.push(this.btnInsertFromFile);
this.btnInsertFromUrl = new Common.UI.Button({
el: $('#slide-button-from-url')
});
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
this.FillItems.push(this.btnInsertFromUrl);
this.FillItems.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
this._arrFillType = [
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@ -1534,6 +1566,8 @@ define([
textGradient: 'Gradient',
textSec: 's',
strSlideNum: 'Show Slide Number',
strDateTime: 'Show Date and Time'
strDateTime: 'Show Date and Time',
textFromStorage: 'From Storage',
textSelectImage: 'Select Picture'
}, PE.Views.SlideSettings || {}));
});

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

@ -1313,6 +1313,7 @@
"PE.Views.ImageSettings.textRotation": "Rotation",
"PE.Views.ImageSettings.textSize": "Size",
"PE.Views.ImageSettings.textWidth": "Width",
"PE.Views.ImageSettings.textFromStorage": "From Storage",
"PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
"PE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
"PE.Views.ImageSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
@ -1445,6 +1446,8 @@
"PE.Views.ShapeSettings.txtNoBorders": "No Line",
"PE.Views.ShapeSettings.txtPapyrus": "Papyrus",
"PE.Views.ShapeSettings.txtWood": "Wood",
"PE.Views.ShapeSettings.textFromStorage": "From Storage",
"PE.Views.ShapeSettings.textSelectImage": "Select Picture",
"PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
"PE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
"PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
@ -1572,6 +1575,8 @@
"PE.Views.SlideSettings.txtLeather": "Leather",
"PE.Views.SlideSettings.txtPapyrus": "Papyrus",
"PE.Views.SlideSettings.txtWood": "Wood",
"PE.Views.SlideSettings.textFromStorage": "From Storage",
"PE.Views.SlideSettings.textSelectImage": "Select Picture",
"PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",
"PE.Views.SlideshowSettings.textTitle": "Show Settings",
"PE.Views.SlideSizeSettings.strLandscape": "Landscape",

34
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -399,6 +399,8 @@ define([
this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onApiMathTypes, this));
this.api.asc_registerCallback('asc_onContextMenu', _.bind(this.onContextMenu, this));
Common.NotificationCenter.on('storage:image-load', _.bind(this.openImageFromStorage, this));
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
}
this.api.asc_registerCallback('asc_onInitEditorStyles', _.bind(this.onApiInitEditorStyles, this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onApiCoAuthoringDisconnect, this));
@ -852,26 +854,36 @@ define([
}
})).show();
} else if (item.value === 'storage') {
if (this.toolbar.mode.canRequestInsertImage) {
Common.Gateway.requestInsertImage();
} else {
(new Common.Views.SelectFileDlg({
fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
})).on('selectfile', function(obj, file){
me.insertImage(file);
}).show();
}
Common.NotificationCenter.trigger('storage:image-load', 'add');
}
},
insertImage: function(data) {
if (data && data.url) {
openImageFromStorage: function(type) {
var me = this;
if (this.toolbar.mode.canRequestInsertImage) {
Common.Gateway.requestInsertImage(type);
} else {
(new Common.Views.SelectFileDlg({
fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
})).on('selectfile', function(obj, file){
file && (file.c = type);
me.insertImage(file);
}).show();
}
},
insertImageFromStorage: function(data) {
if (data && data.url && (!data.c || data.c=='add')) {
this.toolbar.fireEvent('insertimage', this.toolbar);
this.api.asc_addImageDrawingObject(data.url, undefined, data.token);// for loading from storage
Common.component.Analytics.trackEvent('ToolBar', 'Image');
}
},
insertImage: function(data) { // gateway
Common.NotificationCenter.trigger('storage:image-insert', data);
},
onHyperlink: function(btn) {
var me = this;
var win,

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

@ -62,20 +62,12 @@
</tr>
<tr>
<td colspan=2>
<label class="header" id="image-lbl-replace"><%= scope.textInsert %></label>
</td>
</tr>
<tr>
<td width="50%">
<button type="button" class="btn btn-text-default" id="image-button-from-file" style="width:85px;"><%= scope.textFromFile %></button>
</td>
<td width="50%">
<button type="button" class="btn btn-text-default" id="image-button-from-url" style="width:85px;"><%= scope.textFromUrl %></button>
<div id="image-button-replace" style="width:100%;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100px;"><%= scope.textEdit %></button>
<button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
</td>
</tr>
<tr>

7
apps/spreadsheeteditor/main/app/template/ShapeSettings.template
View file

@ -17,11 +17,8 @@
<div id="shape-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
<table cols="2" style="width: 100%;">
<tr>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="shape-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
</td>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="shape-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
<td colspan="2" class="padding-small">
<div id="shape-button-replace" style="width:100%;"></div>
</td>
</tr>
<tr>

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

@ -101,9 +101,14 @@ define([
if (this.api) {
this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
}
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
return this;
},
setMode: function(mode) {
this.mode = mode;
},
updateMetricUnit: function() {
if (this.spinners) {
for (var i=0; i<this.spinners.length; i++) {
@ -166,15 +171,24 @@ define([
});
this.lockedControls.push(this.btnOriginalSize);
this.btnInsertFromFile = new Common.UI.Button({
el: $('#image-button-from-file')
this.btnSelectImage = new Common.UI.Button({
parentEl: $('#image-button-replace'),
cls: 'btn-text-menu-default',
caption: this.textInsert,
style: "width:100%;",
menu: new Common.UI.Menu({
style: 'min-width: 194px;',
maxHeight: 200,
items: [
{caption: this.textFromFile, value: 0},
{caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2}
]
})
});
this.lockedControls.push(this.btnInsertFromFile);
this.btnInsertFromUrl = new Common.UI.Button({
el: $('#image-button-from-url')
});
this.lockedControls.push(this.btnInsertFromUrl);
this.lockedControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
this.btnEditObject = new Common.UI.Button({
el: $('#image-button-edit-object')
@ -186,20 +200,10 @@ define([
this.spnWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
this.spnHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
this.btnOriginalSize.on('click', _.bind(this.setOriginalSize, this));
this.btnInsertFromFile.on('click', _.bind(function(btn){
if (this._isFromFile) return;
this._isFromFile = true;
if (this.api) this.api.asc_changeImageFromFile();
Common.NotificationCenter.trigger('edit:complete', this);
this._isFromFile = false;
}, this));
this.btnEditObject.on('click', _.bind(function(btn){
if (this.api) this.api.asc_startEditCurrentOleObject();
Common.NotificationCenter.trigger('edit:complete', this);
}, this));
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
this.lblReplace = $('#image-lbl-replace');
var w = this.btnOriginalSize.cmpEl.outerWidth();
this.btnCrop = new Common.UI.Button({
@ -355,10 +359,8 @@ define([
var pluginGuid = props.asc_getPluginGuid();
value = (pluginGuid !== null && pluginGuid !== undefined);
if (this._state.isOleObject!==value) {
this.btnInsertFromUrl.setVisible(!value);
this.btnInsertFromFile.setVisible(!value);
this.btnSelectImage.setVisible(!value);
this.btnEditObject.setVisible(value);
this.lblReplace.text(value ? this.textEditObject : this.textInsert);
this.btnRotate270.setDisabled(value);
this.btnRotate90.setDisabled(value);
this.btnFlipV.setDisabled(value);
@ -370,8 +372,7 @@ define([
var plugin = SSE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
this.btnEditObject.setDisabled(plugin===null || plugin ===undefined || this._locked);
} else {
this.btnInsertFromUrl.setDisabled(pluginGuid===null || this._locked);
this.btnInsertFromFile.setDisabled(pluginGuid===null || this._locked);
this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
}
}
},
@ -430,23 +431,41 @@ define([
}
},
insertFromUrl: function() {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
var props = new Asc.asc_CImgProperty();
props.asc_putImageUrl(checkUrl);
me.api.asc_setGraphicObjectProps(props);
insertImageFromStorage: function(data) {
if (data && data.url && data.c=='change') {
var props = new Asc.asc_CImgProperty();
props.asc_putImageUrl(data.url, data.token);
this.api.asc_setGraphicObjectProps(props);
}
},
onImageSelect: function(menu, item) {
if (item.value==1) {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
var props = new Asc.asc_CImgProperty();
props.asc_putImageUrl(checkUrl);
me.api.asc_setGraphicObjectProps(props);
}
}
}
Common.NotificationCenter.trigger('edit:complete', me);
}
Common.NotificationCenter.trigger('edit:complete', me);
}
})).show();
})).show();
} else if (item.value==2) {
Common.NotificationCenter.trigger('storage:image-load', 'change');
} else {
if (this._isFromFile) return;
this._isFromFile = true;
if (this.api) this.api.asc_changeImageFromFile();
Common.NotificationCenter.trigger('edit:complete', this);
this._isFromFile = false;
}
},
_changeCropState: function(state) {
@ -531,6 +550,7 @@ define([
textHintFlipH: 'Flip Horizontally',
textCrop: 'Crop',
textCropFill: 'Fill',
textCropFit: 'Fit'
textCropFit: 'Fit',
textFromStorage: 'From Storage'
}, SSE.Views.ImageSettings || {}));
});

2
apps/spreadsheeteditor/main/app/view/RightMenu.js
View file

@ -250,6 +250,8 @@ define([
setMode: function(mode) {
this.mode = mode;
this.imageSettings && this.imageSettings.setMode(mode);
this.shapeSettings && this.shapeSettings.setMode(mode);
return this;
},

106
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -147,9 +147,14 @@ define([
this.api.asc_setInterfaceDrawImagePlaceShape('shape-texture-img');
this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
}
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
return this;
},
setMode: function(mode) {
this.mode = mode;
},
onFillSrcSelect: function(combo, record) {
this.ShowHideElem(record.value);
switch (record.value){
@ -649,32 +654,56 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
insertFromUrl: function() {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
if (me.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill();
fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.asc_putFill( new Asc.asc_CFillBlip());
fill.asc_getFill().asc_putType(me.BlipFillType);
fill.asc_getFill().asc_putUrl(checkUrl);
insertImageFromStorage: function(data) {
if (data && data.url && data.c=='fill') {
if (this.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill();
fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.asc_putFill( new Asc.asc_CFillBlip());
fill.asc_getFill().asc_putType(this.BlipFillType);
fill.asc_getFill().asc_putUrl(data.url, data.token);
props.asc_putFill(fill);
me.imgprops.asc_putShapeProperties(props);
me.api.asc_setGraphicObjectProps(me.imgprops);
props.asc_putFill(fill);
this.imgprops.asc_putShapeProperties(props);
this.api.asc_setGraphicObjectProps(this.imgprops);
}
}
},
onImageSelect: function(menu, item) {
if (item.value==1) {
var me = this;
(new Common.Views.ImageFromUrlDialog({
handler: function(result, value) {
if (result == 'ok') {
if (me.api) {
var checkUrl = value.replace(/ /g, '');
if (!_.isEmpty(checkUrl)) {
if (me.BlipFillType !== null) {
var props = new Asc.asc_CShapeProperty();
var fill = new Asc.asc_CShapeFill();
fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_BLIP);
fill.asc_putFill( new Asc.asc_CFillBlip());
fill.asc_getFill().asc_putType(me.BlipFillType);
fill.asc_getFill().asc_putUrl(checkUrl);
props.asc_putFill(fill);
me.imgprops.asc_putShapeProperties(props);
me.api.asc_setGraphicObjectProps(me.imgprops);
}
}
}
}
Common.NotificationCenter.trigger('edit:complete', me);
}
Common.NotificationCenter.trigger('edit:complete', me);
}
})).show();
})).show();
} else if (item.value==2) {
Common.NotificationCenter.trigger('storage:image-load', 'fill');
} else {
if (this.api) this.api.asc_changeShapeImageFromFile(this.BlipFillType);
Common.NotificationCenter.trigger('edit:complete', this);
}
},
openAdvancedSettings: function(e) {
@ -1143,21 +1172,24 @@ define([
});
this.fillControls.push(this.cmbPattern);
this.btnInsertFromFile = new Common.UI.Button({
el: $('#shape-button-from-file')
this.btnSelectImage = new Common.UI.Button({
parentEl: $('#shape-button-replace'),
cls: 'btn-text-menu-default',
caption: this.textSelectImage,
style: "width:100%;",
menu: new Common.UI.Menu({
style: 'min-width: 194px;',
maxHeight: 200,
items: [
{caption: this.textFromFile, value: 0},
{caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2}
]
})
});
this.fillControls.push(this.btnInsertFromFile);
this.btnInsertFromUrl = new Common.UI.Button({
el: $('#shape-button-from-url')
});
this.fillControls.push(this.btnInsertFromUrl);
this.btnInsertFromFile.on('click', _.bind(function(btn){
if (this.api) this.api.asc_changeShapeImageFromFile(this.BlipFillType);
Common.NotificationCenter.trigger('edit:complete', this);
}, this));
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
this.fillControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
this._arrFillType = [
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@ -1740,6 +1772,8 @@ define([
textHint90: 'Rotate 90° Clockwise',
textHintFlipV: 'Flip Vertically',
textHintFlipH: 'Flip Horizontally',
strShadow: 'Show shadow'
strShadow: 'Show shadow',
textFromStorage: 'From Storage',
textSelectImage: 'Select Picture'
}, SSE.Views.ShapeSettings || {}));
});

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

@ -1831,6 +1831,7 @@
"SSE.Views.ImageSettings.textRotation": "Rotation",
"SSE.Views.ImageSettings.textSize": "Size",
"SSE.Views.ImageSettings.textWidth": "Width",
"SSE.Views.ImageSettings.textFromStorage": "From Storage",
"SSE.Views.ImageSettingsAdvanced.textAbsolute": "Don't move or size with cells",
"SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
"SSE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
@ -2173,6 +2174,8 @@
"SSE.Views.ShapeSettings.txtNoBorders": "No Line",
"SSE.Views.ShapeSettings.txtPapyrus": "Papyrus",
"SSE.Views.ShapeSettings.txtWood": "Wood",
"SSE.Views.ShapeSettings.textFromStorage": "From Storage",
"SSE.Views.ShapeSettings.textSelectImage": "Select Picture",
"SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
"SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
"SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",