Merge pull request #271 from ONLYOFFICE/feature/placeholders
Feature/placeholders
This commit is contained in:
commit
6c2c246cb9
|
@ -88,6 +88,11 @@ define([
|
|||
this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.setPlaceholder();
|
||||
Common.UI.Window.prototype.show.apply(this, arguments);
|
||||
},
|
||||
|
||||
setChartData: function(data) {
|
||||
this._chartData = data;
|
||||
if (this._isExternalDocReady)
|
||||
|
@ -143,6 +148,14 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
setPlaceholder: function(placeholder) {
|
||||
this._placeholder = placeholder;
|
||||
},
|
||||
|
||||
getPlaceholder: function() {
|
||||
return this._placeholder;
|
||||
},
|
||||
|
||||
textSave: 'Save & Exit',
|
||||
textClose: 'Close',
|
||||
textTitle: 'Chart Editor'
|
||||
|
|
|
@ -112,7 +112,7 @@ define([
|
|||
if (this.api) {
|
||||
( diagramEditor.isEditMode() )
|
||||
? this.api.asc_editChartDrawingObject(data)
|
||||
: this.api.asc_addChartDrawingObject(data);
|
||||
: this.api.asc_addChartDrawingObject(data, diagramEditor.getPlaceholder());
|
||||
}
|
||||
}, this));
|
||||
diagramEditor.on('hide', _.bind(function(cmp, message) {
|
||||
|
|
|
@ -325,7 +325,10 @@ define([
|
|||
});
|
||||
meEl.on('click', function(e){
|
||||
if (e.target.localName == 'canvas') {
|
||||
meEl.focus();
|
||||
if (me._preventClick)
|
||||
me._preventClick = false;
|
||||
else
|
||||
meEl.focus();
|
||||
}
|
||||
});
|
||||
meEl.on('mousedown', function(e){
|
||||
|
@ -675,18 +678,6 @@ define([
|
|||
me.mode.isEdit = false;
|
||||
};
|
||||
|
||||
var onDoubleClickOnChart = function(chart) {
|
||||
if (me.mode.isEdit && !me._isDisabled) {
|
||||
var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
|
||||
|
||||
if (diagramEditor && chart) {
|
||||
diagramEditor.setEditMode(true);
|
||||
diagramEditor.show();
|
||||
diagramEditor.setChartData(new Asc.asc_CChartBinary(chart));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var onTextLanguage = function(langid) {
|
||||
me._currLang.id = langid;
|
||||
};
|
||||
|
@ -1581,12 +1572,18 @@ define([
|
|||
|
||||
if (me.mode.isEdit===true) {
|
||||
me.api.asc_registerCallback('asc_onDialogAddHyperlink', _.bind(onDialogAddHyperlink, me));
|
||||
me.api.asc_registerCallback('asc_doubleClickOnChart', onDoubleClickOnChart);
|
||||
me.api.asc_registerCallback('asc_doubleClickOnChart', _.bind(me.editChartClick, me));
|
||||
me.api.asc_registerCallback('asc_onSpellCheckVariantsFound', _.bind(onSpellCheckVariantsFound, me));
|
||||
me.api.asc_registerCallback('asc_onShowSpecialPasteOptions', _.bind(onShowSpecialPasteOptions, me));
|
||||
me.api.asc_registerCallback('asc_onHideSpecialPasteOptions', _.bind(onHideSpecialPasteOptions, me));
|
||||
me.api.asc_registerCallback('asc_ChangeCropState', _.bind(onChangeCropState, me));
|
||||
|
||||
me.api.asc_registerCallback('asc_onHidePlaceholderActions', _.bind(me.onHidePlaceholderActions, me));
|
||||
me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Image, _.bind(me.onInsertImage, me, true));
|
||||
me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.ImageUrl, _.bind(me.onInsertImageUrl, me, true));
|
||||
me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Chart, _.bind(me.onClickPlaceholderChart, me));
|
||||
me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Table, _.bind(me.onClickPlaceholderTable, me));
|
||||
me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Video, _.bind(me.onClickPlaceholder, me, AscCommon.PlaceholderButtonType.Video));
|
||||
me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Audio, _.bind(me.onClickPlaceholder, me, AscCommon.PlaceholderButtonType.Audio));
|
||||
}
|
||||
me.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(onCoAuthoringDisconnect, me));
|
||||
Common.NotificationCenter.on('api:disconnect', _.bind(onCoAuthoringDisconnect, me));
|
||||
|
@ -1701,15 +1698,17 @@ define([
|
|||
}
|
||||
},
|
||||
/** coauthoring end **/
|
||||
editChartClick: function(){
|
||||
var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
|
||||
if (diagramEditor) {
|
||||
diagramEditor.setEditMode(true);
|
||||
diagramEditor.show();
|
||||
editChartClick: function(chart, placeholder){
|
||||
if (this.mode.isEdit && !this._isDisabled) {
|
||||
var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
|
||||
|
||||
var chart = this.api.asc_getChartObject();
|
||||
if (chart) {
|
||||
if (diagramEditor) {
|
||||
diagramEditor.setEditMode(chart===undefined || typeof chart == 'object'); //edit from doubleclick or context menu
|
||||
diagramEditor.show();
|
||||
if (typeof chart !== 'object')
|
||||
chart = this.api.asc_getChartObject(chart, placeholder);
|
||||
diagramEditor.setChartData(new Asc.asc_CChartBinary(chart));
|
||||
diagramEditor.setPlaceholder(placeholder);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -2662,7 +2661,7 @@ define([
|
|||
|
||||
var menuChartEdit = new Common.UI.MenuItem({
|
||||
caption : me.editChartText
|
||||
}).on('click', _.bind(me.editChartClick, me));
|
||||
}).on('click', _.bind(me.editChartClick, me, undefined));
|
||||
|
||||
var menuParagraphVAlign = new Common.UI.MenuItem({
|
||||
caption : me.vertAlignText,
|
||||
|
@ -2781,29 +2780,12 @@ define([
|
|||
caption : this.textFromFile
|
||||
}).on('click', function(item) {
|
||||
setTimeout(function(){
|
||||
if (me.api) me.api.ChangeImageFromFile();
|
||||
me.fireEvent('editcomplete', me);
|
||||
me.onInsertImage();
|
||||
}, 10);
|
||||
}),
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.textFromUrl
|
||||
}).on('click', function(item) {
|
||||
(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();
|
||||
})
|
||||
}).on('click', _.bind(me.onInsertImageUrl, me, false))
|
||||
]
|
||||
})
|
||||
});
|
||||
|
@ -3432,6 +3414,159 @@ define([
|
|||
this._isDisabled = state;
|
||||
},
|
||||
|
||||
onInsertImage: function(placeholder, obj, x, y) {
|
||||
if (this.api)
|
||||
(placeholder) ? this.api.asc_addImage(obj) : this.api.ChangeImageFromFile();
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onInsertImageUrl: function(placeholder, obj, x, y) {
|
||||
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 (placeholder)
|
||||
me.api.AddImageUrl(checkUrl, undefined, undefined, obj);
|
||||
else {
|
||||
var props = new Asc.asc_CImgProperty();
|
||||
props.put_ImageUrl(checkUrl);
|
||||
me.api.ImgApply(props, obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
me.fireEvent('editcomplete', me);
|
||||
}
|
||||
})).show();
|
||||
},
|
||||
|
||||
onClickPlaceholderChart: function(obj, x, y) {
|
||||
if (!this.api) return;
|
||||
var menu = this.placeholderMenuChart,
|
||||
menuContainer = menu ? this.cmpEl.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null,
|
||||
me = this;
|
||||
this._fromShowPlaceholder = true;
|
||||
Common.UI.Menu.Manager.hideAll();
|
||||
|
||||
if (!menu) {
|
||||
this.placeholderMenuChart = menu = new Common.UI.Menu({
|
||||
style: 'width: 435px;',
|
||||
items: [
|
||||
{template: _.template('<div id="id-placeholder-menu-chart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
|
||||
]
|
||||
});
|
||||
// Prepare menu container
|
||||
menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id));
|
||||
this.cmpEl.append(menuContainer);
|
||||
menu.render(menuContainer);
|
||||
menu.cmpEl.attr({tabindex: "-1"});
|
||||
menu.on('hide:after', function(){
|
||||
if (!me._fromShowPlaceholder)
|
||||
me.api.asc_uncheckPlaceholders();
|
||||
});
|
||||
|
||||
var picker = new Common.UI.DataView({
|
||||
el: $('#id-placeholder-menu-chart'),
|
||||
parentMenu: menu,
|
||||
showLast: false,
|
||||
// restoreHeight: 421,
|
||||
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
|
||||
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
||||
});
|
||||
picker.on('item:click', function (picker, item, record, e) {
|
||||
me.editChartClick(record.get('type'), obj);
|
||||
});
|
||||
}
|
||||
menuContainer.css({left: x, top : y});
|
||||
menuContainer.attr('data-value', 'prevent-canvas-click');
|
||||
this._preventClick = true;
|
||||
menu.show();
|
||||
|
||||
menu.alignPosition();
|
||||
_.delay(function() {
|
||||
menu.cmpEl.focus();
|
||||
}, 10);
|
||||
this._fromShowPlaceholder = false;
|
||||
},
|
||||
|
||||
onClickPlaceholderTable: function(obj, x, y) {
|
||||
if (!this.api) return;
|
||||
var menu = this.placeholderMenuTable,
|
||||
menuContainer = menu ? this.cmpEl.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null,
|
||||
me = this;
|
||||
this._fromShowPlaceholder = true;
|
||||
Common.UI.Menu.Manager.hideAll();
|
||||
|
||||
if (!menu) {
|
||||
this.placeholderMenuTable = menu = new Common.UI.Menu({
|
||||
items: [
|
||||
{template: _.template('<div id="id-placeholder-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
|
||||
{caption: me.mniCustomTable, value: 'custom'}
|
||||
]
|
||||
});
|
||||
// Prepare menu container
|
||||
menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id));
|
||||
this.cmpEl.append(menuContainer);
|
||||
menu.render(menuContainer);
|
||||
menu.cmpEl.attr({tabindex: "-1"});
|
||||
menu.on('hide:after', function(){
|
||||
if (!me._fromShowPlaceholder)
|
||||
me.api.asc_uncheckPlaceholders();
|
||||
});
|
||||
|
||||
var picker = new Common.UI.DimensionPicker({
|
||||
el: $('#id-placeholder-menu-tablepicker'),
|
||||
minRows: 8,
|
||||
minColumns: 10,
|
||||
maxRows: 8,
|
||||
maxColumns: 10
|
||||
});
|
||||
picker.on('select', function(picker, columns, rows){
|
||||
me.api.put_Table(columns, rows, obj);
|
||||
me.fireEvent('editcomplete', me);
|
||||
});
|
||||
menu.on('item:click', function(menu, item, e){
|
||||
if (item.value === 'custom') {
|
||||
(new Common.Views.InsertTableDialog({
|
||||
handler: function(result, value) {
|
||||
if (result == 'ok')
|
||||
me.api.put_Table(value.columns, value.rows, obj);
|
||||
me.fireEvent('editcomplete', me);
|
||||
}
|
||||
})).show();
|
||||
}
|
||||
});
|
||||
}
|
||||
menuContainer.css({left: x, top : y});
|
||||
menuContainer.attr('data-value', 'prevent-canvas-click');
|
||||
this._preventClick = true;
|
||||
menu.show();
|
||||
|
||||
menu.alignPosition();
|
||||
_.delay(function() {
|
||||
menu.cmpEl.focus();
|
||||
}, 10);
|
||||
this._fromShowPlaceholder = false;
|
||||
},
|
||||
|
||||
onHidePlaceholderActions: function() {
|
||||
this.placeholderMenuChart && this.placeholderMenuChart.hide();
|
||||
},
|
||||
|
||||
onClickPlaceholder: function(type, obj, x, y) {
|
||||
if (!this.api) return;
|
||||
if (type == AscCommon.PlaceholderButtonType.Video) {
|
||||
// this.api.addVideo(obj);
|
||||
} else if (type == AscCommon.PlaceholderButtonType.Audio) {
|
||||
// this.api.addAudio(obj);
|
||||
}
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
insertRowAboveText : 'Row Above',
|
||||
insertRowBelowText : 'Row Below',
|
||||
insertColumnLeftText : 'Column Left',
|
||||
|
@ -3607,7 +3742,8 @@ define([
|
|||
toDictionaryText: 'Add to Dictionary',
|
||||
txtPrintSelection: 'Print Selection',
|
||||
addToLayoutText: 'Add to Layout',
|
||||
txtResetLayout: 'Reset Slide'
|
||||
txtResetLayout: 'Reset Slide',
|
||||
mniCustomTable: 'Insert custom table'
|
||||
|
||||
}, PE.Views.DocumentHolder || {}));
|
||||
});
|
|
@ -1127,6 +1127,7 @@
|
|||
"PE.Views.DocumentHolder.txtUnderbar": "Bar under text",
|
||||
"PE.Views.DocumentHolder.txtUngroup": "Ungroup",
|
||||
"PE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
|
||||
"PE.Views.DocumentHolder.mniCustomTable": "Insert custom table",
|
||||
"PE.Views.DocumentPreview.goToSlideText": "Go to Slide",
|
||||
"PE.Views.DocumentPreview.slideIndexText": "Slide {0} of {1}",
|
||||
"PE.Views.DocumentPreview.txtClose": "Close slideshow",
|
||||
|
|
Loading…
Reference in a new issue