[PE SSE] Add smartarts
This commit is contained in:
JuliaSvinareva
parent
72886c7837
commit
47afd293fc
|
|
@ -135,7 +135,9 @@ define([
|
|||
'duplicate:check' : this.onDuplicateCheck.bind(this),
|
||||
'change:slide' : this.onChangeSlide.bind(this),
|
||||
'change:compact' : this.onClickChangeCompact,
|
||||
'add:chart' : this.onSelectChart
|
||||
'add:chart' : this.onSelectChart,
|
||||
'generate:smartart' : this.generateSmartArt,
|
||||
'insert:smartart' : this.onInsertSmartArt
|
||||
},
|
||||
'FileMenu': {
|
||||
'menu:hide': this.onFileMenu.bind(this, 'hide'),
|
||||
|
|
@ -405,6 +407,8 @@ define([
|
|||
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_onCanCopyCut', _.bind(this.onApiCanCopyCut, this));
|
||||
this.api.asc_registerCallback('asc_onBeginSmartArtPreview', _.bind(this.onApiBeginSmartArtPreview, this));
|
||||
this.api.asc_registerCallback('asc_onAddSmartArtPreview', _.bind(this.onApiAddSmartArtPreview, this));
|
||||
} else if (this.mode.isRestrictedEdit) {
|
||||
this.api.asc_registerCallback('asc_onCountPages', _.bind(this.onApiCountPagesRestricted, this));
|
||||
}
|
||||
|
|
@ -2687,6 +2691,43 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
generateSmartArt: function (groupName) {
|
||||
this.api.asc_generateSmartArtPreviews(groupName);
|
||||
},
|
||||
|
||||
onApiBeginSmartArtPreview: function () {
|
||||
this.smartArtGroups = this.toolbar.btnInsertSmartArt.menu.items;
|
||||
this.smartArtData = Common.define.smartArt.getSmartArtData();
|
||||
},
|
||||
|
||||
onApiAddSmartArtPreview: function (previews) {
|
||||
previews.forEach(_.bind(function (preview) {
|
||||
var image = preview.asc_getImage(),
|
||||
sectionId = preview.asc_getSectionId(),
|
||||
section = _.findWhere(this.smartArtData, {sectionId: sectionId}),
|
||||
item = _.findWhere(section.items, {type: image.asc_getName()}),
|
||||
menu = _.findWhere(this.smartArtGroups, {value: sectionId}).menuPicker;
|
||||
if (item) {
|
||||
var arr = [{
|
||||
tip: item.tip,
|
||||
value: item.type,
|
||||
imageUrl: image.asc_getImage()
|
||||
}];
|
||||
if (menu.store.length < 1) {
|
||||
menu.store.reset(arr);
|
||||
} else {
|
||||
menu.store.add(arr);
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
onInsertSmartArt: function (value) {
|
||||
if (this.api) {
|
||||
this.api.asc_createSmartArt(value);
|
||||
}
|
||||
},
|
||||
|
||||
textEmptyImgUrl : 'You need to specify image URL.',
|
||||
textWarning : 'Warning',
|
||||
textFontSizeErr : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 300',
|
||||
|
|
|
|||
|
|
@ -127,6 +127,7 @@
|
|||
<span class="btn-slot text x-huge" id="slot-btn-instextart"></span>
|
||||
<span class="btn-slot text x-huge slot-insertimg"></span>
|
||||
<span class="btn-slot text x-huge" id="slot-btn-insertchart"></span>
|
||||
<span class="btn-slot text x-huge" id="slot-btn-inssmartart"></span>
|
||||
</div>
|
||||
<div class="separator long invisible"></div>
|
||||
<div class="group small" id="slot-combo-insertshape"></div>
|
||||
|
|
|
|||
|
|
@ -764,6 +764,19 @@ define([
|
|||
});
|
||||
me.slideOnlyControls.push(me.btnInsertChart);
|
||||
|
||||
this.btnInsertSmartArt = new Common.UI.Button({
|
||||
id: 'tlbtn-insertsmartart',
|
||||
cls: 'btn-toolbar x-huge icon-top',
|
||||
iconCls: 'toolbar__icon smart-art',
|
||||
lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||
caption: me.capBtnInsSmartArt,
|
||||
menu: true,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'small'
|
||||
});
|
||||
me.slideOnlyControls.push(this.btnInsertSmartArt);
|
||||
|
||||
me.btnInsertEquation = new Common.UI.Button({
|
||||
id: 'tlbtn-insertequation',
|
||||
cls: 'btn-toolbar x-huge icon-top',
|
||||
|
|
@ -1259,6 +1272,7 @@ define([
|
|||
_injectComponent('#slot-btn-columns', this.btnColumns);
|
||||
_injectComponent('#slot-btn-arrange-shape', this.btnShapeArrange);
|
||||
_injectComponent('#slot-btn-align-shape', this.btnShapeAlign);
|
||||
_injectComponent('#slot-btn-inssmartart', this.btnInsertSmartArt);
|
||||
_injectComponent('#slot-btn-insertequation', this.btnInsertEquation);
|
||||
_injectComponent('#slot-btn-inssymbol', this.btnInsertSymbol);
|
||||
_injectComponent('#slot-btn-insertlink', this.btnInsertHyperlink);
|
||||
|
|
@ -1393,6 +1407,7 @@ define([
|
|||
this.btnColumns.updateHint(this.tipColumns);
|
||||
this.btnInsertTable.updateHint(this.tipInsertTable);
|
||||
this.btnInsertChart.updateHint(this.tipInsertChart);
|
||||
this.btnInsertSmartArt.updateHint(this.tipInsertSmartArt);
|
||||
this.btnInsertEquation.updateHint(this.tipInsertEquation);
|
||||
this.btnInsertSymbol.updateHint(this.tipInsertSymbol);
|
||||
this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
|
||||
|
|
@ -1471,6 +1486,60 @@ define([
|
|||
};
|
||||
this.btnInsertChart.menu.on('show:before', onShowBefore);
|
||||
|
||||
this.btnInsertSmartArt.setMenu(new Common.UI.Menu({
|
||||
cls: 'shifted-right',
|
||||
items: []
|
||||
}));
|
||||
|
||||
var smartArtData = Common.define.smartArt.getSmartArtData();
|
||||
smartArtData.forEach(function (item, index) {
|
||||
var length = item.items.length,
|
||||
width = 399;
|
||||
if (length < 5) {
|
||||
width = length * (70 + 8) + 9; // 4px margin + 4px margin
|
||||
}
|
||||
me.btnInsertSmartArt.menu.addItem({
|
||||
caption: item.caption,
|
||||
value: item.sectionId,
|
||||
itemId: item.id,
|
||||
iconCls: item.icon ? 'menu__icon ' + item.icon : undefined,
|
||||
menu: new Common.UI.Menu({
|
||||
items: [
|
||||
{template: _.template('<div id="' + item.id + '" class="menu-add-smart-art" style="width: ' + width + 'px; height: 500px; margin-left: 5px;"></div>')}
|
||||
],
|
||||
menuAlign: 'tl-tr',
|
||||
})});
|
||||
});
|
||||
var onShowBeforeSmartArt = function (menu) { // + <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
|
||||
me.btnInsertSmartArt.menu.items.forEach(function (item, index) {
|
||||
item.$el.one('mouseenter', function () {
|
||||
me.fireEvent('generate:smartart', [item.value]);
|
||||
item.$el.mouseenter();
|
||||
});
|
||||
item.menuPicker = new Common.UI.DataView({
|
||||
el: $('#' + item.options.itemId),
|
||||
parentMenu: me.btnInsertSmartArt.menu.items[index].menu,
|
||||
itemTemplate: _.template([
|
||||
'<div>',
|
||||
'<img src="<%= imageUrl %>" width="' + 70 + '" height="' + 70 + '" />',
|
||||
'</div>'
|
||||
].join('')),
|
||||
store: new Common.UI.DataViewStore(),
|
||||
delayRenderTips: true,
|
||||
scrollAlwaysVisible: true,
|
||||
showLast: false
|
||||
});
|
||||
item.menuPicker.on('item:click', function(picker, item, record, e) {
|
||||
if (record) {
|
||||
me.fireEvent('insert:smartart', [record.get('value')]);
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', me);
|
||||
});
|
||||
});
|
||||
menu.off('show:before', onShowBeforeSmartArt);
|
||||
};
|
||||
this.btnInsertSmartArt.menu.on('show:before', onShowBeforeSmartArt);
|
||||
|
||||
var onShowBeforeTextArt = function (menu) {
|
||||
var collection = PE.getCollection('Common.Collections.TextArt');
|
||||
if (collection.length<1)
|
||||
|
|
@ -1991,6 +2060,7 @@ define([
|
|||
textShowCurrent: 'Show from Current slide',
|
||||
textShowSettings: 'Show Settings',
|
||||
tipInsertEquation: 'Insert Equation',
|
||||
tipInsertSmartArt: 'Insert SmartArt',
|
||||
tipChangeChart: 'Change Chart Type',
|
||||
capInsertText: 'Text',
|
||||
capInsertTextArt: 'Text Art',
|
||||
|
|
@ -2023,6 +2093,7 @@ define([
|
|||
textListSettings: 'List Settings',
|
||||
capBtnAddComment: 'Add Comment',
|
||||
capBtnInsSymbol: 'Symbol',
|
||||
capBtnInsSmartArt: 'SmartArt',
|
||||
tipInsertSymbol: 'Insert symbol',
|
||||
capInsertAudio: 'Audio',
|
||||
capInsertVideo: 'Video',
|
||||
|
|
|
|||
|
|
@ -85,7 +85,9 @@ define([
|
|||
'insert:textart': this.onInsertTextart,
|
||||
'change:scalespn': this.onClickChangeScaleInMenu.bind(me),
|
||||
'click:customscale': this.onScaleClick.bind(me),
|
||||
'home:open' : this.onHomeOpen
|
||||
'home:open' : this.onHomeOpen,
|
||||
'generate:smartart' : this.generateSmartArt,
|
||||
'insert:smartart' : this.onInsertSmartArt
|
||||
},
|
||||
'FileMenu': {
|
||||
'menu:hide': me.onFileMenu.bind(me, 'hide'),
|
||||
|
|
@ -488,6 +490,8 @@ define([
|
|||
this.api.asc_registerCallback('asc_onUnLockCFManager', _.bind(this.onUnLockCFManager, this));
|
||||
this.api.asc_registerCallback('asc_onZoomChanged', _.bind(this.onApiZoomChange, this));
|
||||
Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this));
|
||||
this.api.asc_registerCallback('asc_onBeginSmartArtPreview', _.bind(this.onApiBeginSmartArtPreview, this));
|
||||
this.api.asc_registerCallback('asc_onAddSmartArtPreview', _.bind(this.onApiAddSmartArtPreview, this));
|
||||
} else if (config.isEditOle) {
|
||||
Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this));
|
||||
} else if (config.isRestrictedEdit) {
|
||||
|
|
@ -4715,6 +4719,43 @@ define([
|
|||
Common.component.Analytics.trackEvent('ToolBar', 'Vertical align');
|
||||
},
|
||||
|
||||
generateSmartArt: function (groupName) {
|
||||
this.api.asc_generateSmartArtPreviews(groupName);
|
||||
},
|
||||
|
||||
onApiBeginSmartArtPreview: function () {
|
||||
this.smartArtGroups = this.toolbar.btnInsertSmartArt.menu.items;
|
||||
this.smartArtData = Common.define.smartArt.getSmartArtData();
|
||||
},
|
||||
|
||||
onApiAddSmartArtPreview: function (previews) {
|
||||
previews.forEach(_.bind(function (preview) {
|
||||
var image = preview.asc_getImage(),
|
||||
sectionId = preview.asc_getSectionId(),
|
||||
section = _.findWhere(this.smartArtData, {sectionId: sectionId}),
|
||||
item = _.findWhere(section.items, {type: image.asc_getName()}),
|
||||
menu = _.findWhere(this.smartArtGroups, {value: sectionId}).menuPicker;
|
||||
if (item) {
|
||||
var arr = [{
|
||||
tip: item.tip,
|
||||
value: item.type,
|
||||
imageUrl: image.asc_getImage()
|
||||
}];
|
||||
if (menu.store.length < 1) {
|
||||
menu.store.reset(arr);
|
||||
} else {
|
||||
menu.store.add(arr);
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
onInsertSmartArt: function (value) {
|
||||
if (this.api) {
|
||||
this.api.asc_createSmartArt(value);
|
||||
}
|
||||
},
|
||||
|
||||
textEmptyImgUrl : 'You need to specify image URL.',
|
||||
warnMergeLostData : 'Operation can destroy data in the selected cells.<br>Continue?',
|
||||
textWarning : 'Warning',
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@
|
|||
<span class="btn-slot text x-huge" id="slot-btn-instextart"></span>
|
||||
<span class="btn-slot text x-huge" id="slot-btn-inschart"></span>
|
||||
<span class="btn-slot text x-huge" id="slot-btn-inssparkline"></span>
|
||||
<span class="btn-slot text x-huge" id="slot-btn-inssmartart"></span>
|
||||
</div>
|
||||
<div class="separator long"></div>
|
||||
<div class="group">
|
||||
|
|
|
|||
|
|
@ -1195,6 +1195,18 @@ define([
|
|||
dataHintOffset: 'small'
|
||||
});
|
||||
|
||||
this.btnInsertSmartArt = new Common.UI.Button({
|
||||
id: 'tlbtn-insertsmartart',
|
||||
cls: 'btn-toolbar x-huge icon-top',
|
||||
iconCls: 'toolbar__icon smart-art',
|
||||
lock: [_set.editCell, _set.lostConnect, _set.coAuth, _set['Objects']],
|
||||
caption: me.capBtnInsSmartArt,
|
||||
menu: true,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'small'
|
||||
});
|
||||
|
||||
me.btnInsertShape = new Common.UI.Button({
|
||||
id : 'tlbtn-insertshape',
|
||||
cls : 'btn-toolbar x-huge icon-top',
|
||||
|
|
@ -2259,6 +2271,7 @@ define([
|
|||
_injectComponent('#slot-btn-search', this.btnSearch);
|
||||
_injectComponent('#slot-btn-inschart', this.btnInsertChart);
|
||||
_injectComponent('#slot-btn-inssparkline', this.btnInsertSparkline);
|
||||
_injectComponent('#slot-btn-inssmartart', this.btnInsertSmartArt);
|
||||
_injectComponent('#slot-field-styles', this.listStyles);
|
||||
_injectComponent('#slot-btn-chart', this.btnEditChart);
|
||||
_injectComponent('#slot-btn-chart-data', this.btnEditChartData);
|
||||
|
|
@ -2329,6 +2342,7 @@ define([
|
|||
_updateHint(this.btnInsertImage, this.tipInsertImage);
|
||||
_updateHint(this.btnInsertChart, this.tipInsertChartSpark);
|
||||
_updateHint(this.btnInsertSparkline, this.tipInsertSpark);
|
||||
_updateHint(this.btnInsertSmartArt, this.tipInsertSmartArt);
|
||||
_updateHint(this.btnInsertText, this.tipInsertText);
|
||||
_updateHint(this.btnInsertTextArt, this.tipInsertTextart);
|
||||
_updateHint(this.btnInsertHyperlink, this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
|
||||
|
|
@ -2539,6 +2553,62 @@ define([
|
|||
this.btnInsertChart.menu.on('show:before', onShowBefore);
|
||||
}
|
||||
|
||||
if (this.btnInsertSmartArt) {
|
||||
this.btnInsertSmartArt.setMenu(new Common.UI.Menu({
|
||||
cls: 'shifted-right',
|
||||
items: []
|
||||
}));
|
||||
|
||||
var smartArtData = Common.define.smartArt.getSmartArtData();
|
||||
smartArtData.forEach(function (item, index) {
|
||||
var length = item.items.length,
|
||||
width = 399;
|
||||
if (length < 5) {
|
||||
width = length * (70 + 8) + 9; // 4px margin + 4px margin
|
||||
}
|
||||
me.btnInsertSmartArt.menu.addItem({
|
||||
caption: item.caption,
|
||||
value: item.sectionId,
|
||||
itemId: item.id,
|
||||
iconCls: item.icon ? 'menu__icon ' + item.icon : undefined,
|
||||
menu: new Common.UI.Menu({
|
||||
items: [
|
||||
{template: _.template('<div id="' + item.id + '" class="menu-add-smart-art" style="width: ' + width + 'px; height: 500px; margin-left: 5px;"></div>')}
|
||||
],
|
||||
menuAlign: 'tl-tr',
|
||||
})});
|
||||
});
|
||||
var onShowBeforeSmartArt = function (menu) { // + <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
|
||||
me.btnInsertSmartArt.menu.items.forEach(function (item, index) {
|
||||
item.$el.one('mouseenter', function () {
|
||||
me.fireEvent('generate:smartart', [item.value]);
|
||||
item.$el.mouseenter();
|
||||
});
|
||||
item.menuPicker = new Common.UI.DataView({
|
||||
el: $('#' + item.options.itemId),
|
||||
parentMenu: me.btnInsertSmartArt.menu.items[index].menu,
|
||||
itemTemplate: _.template([
|
||||
'<div>',
|
||||
'<img src="<%= imageUrl %>" width="' + 70 + '" height="' + 70 + '" />',
|
||||
'</div>'
|
||||
].join('')),
|
||||
store: new Common.UI.DataViewStore(),
|
||||
delayRenderTips: true,
|
||||
scrollAlwaysVisible: true,
|
||||
showLast: false
|
||||
});
|
||||
item.menuPicker.on('item:click', function(picker, item, record, e) {
|
||||
if (record) {
|
||||
me.fireEvent('insert:smartart', [record.get('value')]);
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', me);
|
||||
});
|
||||
});
|
||||
menu.off('show:before', onShowBeforeSmartArt);
|
||||
};
|
||||
this.btnInsertSmartArt.menu.on('show:before', onShowBeforeSmartArt);
|
||||
}
|
||||
|
||||
if ( this.btnInsertSparkline ) {
|
||||
this.btnInsertSparkline.setMenu(new Common.UI.Menu({
|
||||
style: 'width: 166px;padding: 5px 0 10px;',
|
||||
|
|
@ -3311,6 +3381,8 @@ define([
|
|||
tipHAligh: 'Horizontal Align',
|
||||
tipVAligh: 'Vertical Align',
|
||||
tipSelectAll: 'Select all',
|
||||
tipCut: 'Cut'
|
||||
tipCut: 'Cut',
|
||||
tipInsertSmartArt: 'Insert SmartArt',
|
||||
capBtnInsSmartArt: 'SmartArt'
|
||||
}, SSE.Views.Toolbar || {}));
|
||||
});
|
||||
Loading…
Reference in a new issue