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

Reinclude Tab Transitions

Browse source
This commit is contained in:
OVSharova 2021-07-30 20:22:42 +03:00
parent ed42b9979e
commit 8f8d5e5a49
6 changed files with 101 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/presentationeditor/main/app/controller/Main.js
View file

@ -1232,9 +1232,6 @@ define([
reviewController = application.getController('Common.Controllers.ReviewChanges'); reviewController = application.getController('Common.Controllers.ReviewChanges');
reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document}); reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document});
var transitController = application.getController('Transitions');
transitController.setMode(me.appOptions).setConfig(me.api);
if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode) if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode)
var toolbarController = application.getController('Toolbar'); var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api); toolbarController && toolbarController.setApi(me.api);

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

@ -52,6 +52,7 @@ define([
'common/main/lib/view/SymbolTableDialog', 'common/main/lib/view/SymbolTableDialog',
'common/main/lib/util/define', 'common/main/lib/util/define',
'presentationeditor/main/app/collection/SlideThemes', 'presentationeditor/main/app/collection/SlideThemes',
'presentationeditor/main/app/controller/Transitions',
'presentationeditor/main/app/view/Toolbar', 'presentationeditor/main/app/view/Toolbar',
'presentationeditor/main/app/view/DateTimeDialog', 'presentationeditor/main/app/view/DateTimeDialog',
'presentationeditor/main/app/view/HeaderFooterDialog', 'presentationeditor/main/app/view/HeaderFooterDialog',
@ -2387,10 +2388,11 @@ define([
this.attachUIEvents(this.toolbar); this.attachUIEvents(this.toolbar);
}, },
setTrantitTab:function (el){ setTrantitTab:function (el){
var $panel = this.getApplication().getController('Transitions').createToolbarPanel(); /* var $panel = this.getApplication().getController('Transitions').createToolbarPanel();
if ( $panel ) { if ( $panel ) {
el.find('#transitions-panel').replaceWith($panel); el.find('#transitions-panel').replaceWith($panel);
} }*/
// var $panel = this.getApplication().getController('Transitions').createToolbarPanel()
}, },
onAppShowed: function (config) { onAppShowed: function (config) {
var me = this; var me = this;
@ -2402,8 +2404,8 @@ define([
} else } else
if ( config.customization && config.customization.compactToolbar ) if ( config.customization && config.customization.compactToolbar )
compactview = true; compactview = true;
}
}
me.toolbar.render(_.extend({compactview: compactview}, config)); me.toolbar.render(_.extend({compactview: compactview}, config));
var tab = {action: 'review', caption: me.toolbar.textTabCollaboration}; var tab = {action: 'review', caption: me.toolbar.textTabCollaboration};
@ -2412,15 +2414,13 @@ define([
me.toolbar.addTab(tab, $panel, 4); me.toolbar.addTab(tab, $panel, 4);
me.toolbar.setVisible('review', config.isEdit || config.canViewReview || config.canCoAuthoring && config.canComments); me.toolbar.setVisible('review', config.isEdit || config.canViewReview || config.canCoAuthoring && config.canComments);
} }
/*var tab = {action: 'transit', caption: me.toolbar.textTabTransitions};
var $panel = me.getApplication().getController('Transitions').createToolbarPanel();
if ( $panel ) {
me.toolbar.addTab(tab, $panel, 3);
me.toolbar.setVisible('transit', true);
}*/
if ( config.isEdit ) { if ( config.isEdit ) {
me.toolbar.setMode(config); me.toolbar.setMode(config);
var transitController = me.getApplication().getController('Transitions');
transitController.setApi(me.api).setConfig({toolbar: me.toolbar,mode:config}).createToolbarPanel();
me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled')); me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
if (!(config.customization && config.customization.compactHeader)) { if (!(config.customization && config.customization.compactHeader)) {

18
apps/presentationeditor/main/app/controller/Transitions.js
View file

@ -80,18 +80,26 @@ define([
this._state = {}; this._state = {};
//Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); //Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
}, },
setConfig: function ( api) { setConfig: function (config) {
this.setApi(api); this.appConfig = config.mode;
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onFocusObject, this)); //this.setApi(config.api);
this.view = this.createView('PE.Views.Transitions', {
toolbar: config.toolbar,
mode: config.mode
});
return this; return this;
}, },
setApi: function (api) { setApi: function (api) {
this.api = api; this.api = api;
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onFocusObject, this));
return this;
}, },
setMode: function(mode) { setMode: function(mode) {
this.appConfig = mode; this.appConfig = mode;
this.view = this.createView('PE.Views.Transitions', { mode: mode }); //this.view = this.createView('PE.Views.Transitions', { mode: mode });
return this; return this;
}, },
@ -217,7 +225,7 @@ define([
me.listEffects.menuPicker.selectRecord(me.listEffects.menuPicker.items[0]); me.listEffects.menuPicker.selectRecord(me.listEffects.menuPicker.items[0]);
} }
if (me.btnParametrs.menu) { if (me.btnParametrs.menu.items.length>0) {
value = transition.get_TransitionOption(); value = transition.get_TransitionOption();
me.setMenuParametrs(this._state.Effect, value); me.setMenuParametrs(this._state.Effect, value);
this._state.EffectType = value; this._state.EffectType = value;

37
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -142,7 +142,42 @@
<span class="btn-slot text x-huge" id="slot-btn-insvideo"></span> <span class="btn-slot text x-huge" id="slot-btn-insvideo"></span>
</div> </div>
</section> </section>
<section id="transitions-panel" class="panel" data-tab="transit"> </section> <section id="transitions-panel" class="panel" data-tab="transit">
<div class="group flex small" id="transit-field-effects" style=" width: 700px; min-width: 300px;"></div>
<div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parametrs"></span>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset font-normal">
<label>Duration</label>
<span id="transit-spin-duration" class="btn-slot text spinner"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="transit-button-preview"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="transit-checkbox-startonclick"></span>
</div>
<div class="elset font-normal">
<span class="btn-slot text" id="transit-checkbox-delay"></span>
<div id="transit-spin-delay" class="btn-slot text spinner"></div>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text " id="transit-button-apply"></span>
</div>
<div class="elset">
<span class="btn-slot text x-huge"></span>
</div>
</div>
</section>
</section> </section>
</section> </section>
</div> </div>

2
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1038,7 +1038,7 @@ define([
var _injectComponent = function (id, cmp) { var _injectComponent = function (id, cmp) {
Common.Utils.injectComponent($host.find(id), cmp); Common.Utils.injectComponent($host.find(id), cmp);
}; };
this.fireEvent('transit:settab',[$host]); //this.fireEvent('transit:settab',[$host]);
_injectComponent('#slot-field-fontname', this.cmbFontName); _injectComponent('#slot-field-fontname', this.cmbFontName);
_injectComponent('#slot-field-fontsize', this.cmbFontSize); _injectComponent('#slot-field-fontsize', this.cmbFontSize);
_injectComponent('#slot-btn-changeslide', this.btnChangeSlide); _injectComponent('#slot-btn-changeslide', this.btnChangeSlide);

80
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -58,15 +58,13 @@ define([
PE.Views.Transitions = Common.UI.BaseView.extend(_.extend((function(){ PE.Views.Transitions = Common.UI.BaseView.extend(_.extend((function(){
function setEvents() { function setEvents() {
var me = this; var me = this;
if(me.listEffects) if(me.listEffects){
{
me.listEffects.on('click', _.bind(function (combo,record){ me.listEffects.on('click', _.bind(function (combo,record){
me.fireEvent('transit:selecteffect',[combo,record]); me.fireEvent('transit:selecteffect',[combo,record]);
},me)); },me));
} }
if(me.btnPreview) if(me.btnPreview){
{
me.btnPreview.on('click', _.bind(function(btn){ me.btnPreview.on('click', _.bind(function(btn){
me.fireEvent('transit:preview', [me.btnPreview]); me.fireEvent('transit:preview', [me.btnPreview]);
}, me)); }, me));
@ -82,8 +80,7 @@ define([
}); });
} }
if(me.btnApplyToAll) if(me.btnApplyToAll){
{
me.btnApplyToAll.on('click', _.bind(function(btn){ me.btnApplyToAll.on('click', _.bind(function(btn){
me.fireEvent('transit:applytoall', [me.btnApplyToAll]); me.fireEvent('transit:applytoall', [me.btnApplyToAll]);
}, me)); }, me));
@ -98,14 +95,12 @@ define([
me.fireEvent('transit:delay', [me.numDelay]); me.fireEvent('transit:delay', [me.numDelay]);
},me); },me);
} }
if(me.chStartOnClick) if(me.chStartOnClick){
{
me.chStartOnClick.on('change',_.bind(function (e){ me.chStartOnClick.on('change',_.bind(function (e){
me.fireEvent('transit:startonclick',[ me.chStartOnClick,me.chStartOnClick.value, me.chStartOnClick.lastValue]); me.fireEvent('transit:startonclick',[ me.chStartOnClick,me.chStartOnClick.value, me.chStartOnClick.lastValue]);
},me)); },me));
} }
if(me.chDelay) if(me.chDelay){
{
me.chDelay.on('change',_.bind(function (e){ me.chDelay.on('change',_.bind(function (e){
me.fireEvent('transit:checkdelay',[ me.chDelay,me.chDelay.value, me.chDelay.lastValue]); me.fireEvent('transit:checkdelay',[ me.chDelay,me.chDelay.value, me.chDelay.lastValue]);
},me)); },me));
@ -118,13 +113,12 @@ define([
options: {}, options: {},
initialize: function (options) { initialize: function (options) {
this.$el=$(_.template(template)( {Duration:this.strDuration} )); this.toolbar = options.toolbar;
this.SladeSettings=PE.Views.ShapeSettings; this.appConfig = options.mode;
this.$el=options.toolbar.$el.find('#transitions-panel');
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
this.appConfig = options.mode; this.appConfig = options.mode;
var filter = Common.localStorage.getKeysFilter();
this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
this._arrEffectName = [ this._arrEffectName = [
{title: this.textNone, imageUrl:"btn-text", value: Asc.c_oAscSlideTransitionTypes.None, id: Common.UI.getId()}, {title: this.textNone, imageUrl:"btn-text", value: Asc.c_oAscSlideTransitionTypes.None, id: Common.UI.getId()},
@ -138,29 +132,6 @@ define([
{title: this.textZoom, imageUrl:"btn-addslide", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()} {title: this.textZoom, imageUrl:"btn-addslide", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
]; ];
this._arrEffectType = [
{caption: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly, checkable: true, toggleGroup: 'effects'},
{caption: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black, checkable: true, toggleGroup: 'effects'},
{caption: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left, checkable: true, toggleGroup: 'effects'},
{caption: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top, checkable: true, toggleGroup: 'effects'},
{caption: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right, checkable: true, toggleGroup: 'effects'},
{caption: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom, checkable: true, toggleGroup: 'effects'},
{caption: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft, checkable: true, toggleGroup: 'effects'},
{caption: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight, checkable: true, toggleGroup: 'effects'},
{caption: this.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft, checkable: true, toggleGroup: 'effects'},
{caption: this.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight, checkable: true, toggleGroup: 'effects'},
{caption: this.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn, checkable: true, toggleGroup: 'effects'},
{caption: this.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut, checkable: true, toggleGroup: 'effects'},
{caption: this.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn, checkable: true, toggleGroup: 'effects'},
{caption: this.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut, checkable: true, toggleGroup: 'effects'},
{caption: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise, checkable: true, toggleGroup: 'effects'},
{caption: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise, checkable: true, toggleGroup: 'effects'},
{caption: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge, checkable: true, toggleGroup: 'effects'},
{caption: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In, checkable: true, toggleGroup: 'effects'},
{caption: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out, checkable: true, toggleGroup: 'effects'},
{caption: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate, checkable: true, toggleGroup: 'effects'}
];
this.listEffects = new Common.UI.ComboDataView({ this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-styles', cls: 'combo-styles',
itemWidth: 87, itemWidth: 87,
@ -214,7 +185,7 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtParametrs, caption: this.txtParametrs,
iconCls: 'toolbar__icon icon btn-insertshape', iconCls: 'toolbar__icon icon btn-insertshape',
menu: new Common.UI.Menu({items:this._arrEffectType}) menu: new Common.UI.Menu({items: this.createParametrsMenuItems()})
}); });
this.btnApplyToAll = new Common.UI.Button({ this.btnApplyToAll = new Common.UI.Button({
@ -263,6 +234,39 @@ define([
return this; return this;
}, },
createParametrsMenuItems: function()
{
var arrEffectType = [
{caption: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
{caption: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
{caption: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left},
{caption: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top},
{caption: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right},
{caption: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
{caption: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
{caption: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
{caption: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
{caption: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
{caption: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
{caption: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In},
{caption: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
{caption: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
];
var itemsMenu=[];
_.each(arrEffectType, function (item){
itemsMenu.push(
{
caption: item.caption,
value: item.value,
checkable: true,
toggleGroup: 'effects',
disabled:false
}
);
});
return itemsMenu;
},
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
(new Promise(function (accept, reject) { (new Promise(function (accept, reject) {