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

Сhanges for tab

Browse source
This commit is contained in:
OVSharova 2021-08-06 06:05:27 +03:00
parent 4054c1f3ec
commit ac7b7ca290
7 changed files with 296 additions and 266 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -131,8 +131,7 @@ define([
'add:slide' : this.onAddSlide.bind(this), 'add:slide' : this.onAddSlide.bind(this),
'change:slide' : this.onChangeSlide.bind(this), 'change:slide' : this.onChangeSlide.bind(this),
'change:compact' : this.onClickChangeCompact, 'change:compact' : this.onClickChangeCompact,
'add:chart' : this.onSelectChart, 'add:chart' : this.onSelectChart
'transit:settab' : this.setTrantitTab
}, },
'FileMenu': { 'FileMenu': {
'menu:hide': this.onFileMenu.bind(this, 'hide'), 'menu:hide': this.onFileMenu.bind(this, 'hide'),

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

@ -49,8 +49,7 @@ define([
PE.Controllers.Transitions = Backbone.Controller.extend(_.extend({ PE.Controllers.Transitions = Backbone.Controller.extend(_.extend({
models : [], models : [],
collections : [ collections : [],
],
views : [ views : [
'PE.Views.Transitions' 'PE.Views.Transitions'
], ],
@ -62,24 +61,27 @@ define([
initialize: function () { initialize: function () {
this.addListeners({ this.addListeners({
'PE.Views.Transitions': { 'PE.Views.Transitions': {
'transit:preview': _.bind(this.onPreviewClick, this), 'transit:preview': _.bind(this.onPreviewClick, this),
'transit:parametrs': _.bind(this.onParametrClick,this), 'transit:parametrs': _.bind(this.onParametrClick, this),
'transit:duration': _.bind(this.onDurationChange,this), 'transit:duration': _.bind(this.onDurationChange, this),
'transit:applytoall': _.bind(this.onApplyToAllClick,this), 'transit:applytoall': _.bind(this.onApplyToAllClick, this),
'transit:selecteffect': _.bind(this.onEffectSelect, this), 'transit:selecteffect': _.bind(this.onEffectSelect, this),
'transit:startonclick': _.bind(this.onStartOnClickChange,this), 'transit:startonclick': _.bind(this.onStartOnClickChange, this),
'transit:delay': _.bind(this.onDelayChange,this), 'transit:delay': _.bind(this.onDelayChange, this),
'transit:checkdelay': _.bind(this.onCheckDelayChange,this) 'transit:checkdelay': _.bind(this.onCheckDelayChange, this)
},
'Toolbar': {
'tab:active': _.bind(this.onActiveTab, this)
} }
}); });
}, },
onLaunch: function () { onLaunch: function () {
this._state = {}; this._state = {};
//Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
}, },
setConfig: function (config) { setConfig: function (config) {
this.appConfig = config.mode; this.appConfig = config.mode;
@ -88,7 +90,7 @@ define([
mode: config.mode mode: config.mode
}); });
return this; return this;
}, },
setApi: function (api) { setApi: function (api) {
this.api = api; this.api = api;
@ -96,43 +98,28 @@ define([
this.api.asc_registerCallback('asc_onCountPages', _.bind(this.onApiCountPagesRestricted, this)); this.api.asc_registerCallback('asc_onCountPages', _.bind(this.onApiCountPagesRestricted, this));
return this; return this;
}, },
onApiCountPagesRestricted: function (count){
if (this._state.no_slides !== (count<=0)) {
this._state.no_slides = (count<=0);
this.lockToolbar(PE.enumLock.noSlides, this._state.no_slides);
}
},
loadDocument: function(data) { onApiCountPagesRestricted: function (count) {
this.document = data.doc; /*if (this._state.no_slides !== (count <= 0))*/
}, this._state.no_slides = (count <= 0);
SetDisabled: function(state) {
/*if (this.dlgChanges)
this.dlgChanges.close();
this.view && this.view.SetDisabled(state, this.langs);*/
//this.setPreviewMode(state);
}, },
createToolbarPanel: function() { createToolbarPanel: function() {
return this.view.getPanel(); return this.view.getPanel();
}, },
getView: function(name) { getView: function(name) {
return !name && this.view ? return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name); this.view : Backbone.Controller.prototype.getView.call(this, name);
}, },
onAppReady: function (config) { onPreviewClick: function() {
var me = this;
},
onPreviewClick: function(){
if (this.api) { if (this.api) {
this.api.SlideTransitionPlay(); this.api.SlideTransitionPlay();
} }
}, },
onParametrClick: function (item){
onParametrClick: function (item) {
this.EffectType = item.value; this.EffectType = item.value;
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
@ -143,8 +130,9 @@ define([
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
}, },
onDurationChange: function(field, newValue, oldValue, eOpts){
if (this.api && !this._noApply) { onDurationChange: function(field, newValue, oldValue, eOpts) {
if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var transition = new Asc.CAscSlideTransition(); var transition = new Asc.CAscSlideTransition();
transition.put_TransitionDuration(field.getNumberValue()*1000); transition.put_TransitionDuration(field.getNumberValue()*1000);
@ -152,17 +140,19 @@ define([
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
}, },
onStartOnClickChange: function(field, newValue, oldValue, eOpts){
if (this.api && !this._noApply) { onStartOnClickChange: function(field, newValue, oldValue, eOpts) {
if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var transition = new Asc.CAscSlideTransition(); var transition = new Asc.CAscSlideTransition();
transition.put_SlideAdvanceOnMouseClick(field.getValue()=='checked'); transition.put_SlideAdvanceOnMouseClick(field.getValue() == 'checked');
props.put_transition(transition); props.put_transition(transition);
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
}, },
onDelayChange: function(field, newValue, oldValue, eOpts){
if (this.api && !this._noApply) { onDelayChange: function(field, newValue, oldValue, eOpts) {
if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var transition = new Asc.CAscSlideTransition(); var transition = new Asc.CAscSlideTransition();
transition.put_SlideAdvanceDuration(field.getNumberValue()*1000); transition.put_SlideAdvanceDuration(field.getNumberValue()*1000);
@ -170,30 +160,34 @@ define([
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
}, },
onCheckDelayChange: function(field, newValue, oldValue, eOpts){
this.view.numDelay.setDisabled(field.getValue()!=='checked'); onCheckDelayChange: function(field, newValue, oldValue, eOpts) {
if (this.api && !this._noApply) { this.view.numDelay.setDisabled(field.getValue() !== 'checked');
if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var transition = new Asc.CAscSlideTransition(); var transition = new Asc.CAscSlideTransition();
transition.put_SlideAdvanceAfter(field.getValue()=='checked'); transition.put_SlideAdvanceAfter(field.getValue() == 'checked');
props.put_transition(transition); props.put_transition(transition);
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
}, },
onApplyToAllClick: function (){
onApplyToAllClick: function () {
if (this.api) this.api.SlideTransitionApplyToAll(); if (this.api) this.api.SlideTransitionApplyToAll();
}, },
onEffectSelect:function (combo, record){
onEffectSelect: function (combo, record) {
var type = record.get('value'); var type = record.get('value');
if (this.Effect !== type && if (this.Effect !== type &&
!((this.Effect===Asc.c_oAscSlideTransitionTypes.Wipe || this.Effect===Asc.c_oAscSlideTransitionTypes.UnCover || this.Effect===Asc.c_oAscSlideTransitionTypes.Cover)&& !((this.Effect === Asc.c_oAscSlideTransitionTypes.Wipe || this.Effect === Asc.c_oAscSlideTransitionTypes.UnCover || this.Effect === Asc.c_oAscSlideTransitionTypes.Cover)&&
(type===Asc.c_oAscSlideTransitionTypes.Wipe || type===Asc.c_oAscSlideTransitionTypes.UnCover || type===Asc.c_oAscSlideTransitionTypes.Cover)) ) (type === Asc.c_oAscSlideTransitionTypes.Wipe || type === Asc.c_oAscSlideTransitionTypes.UnCover || type === Asc.c_oAscSlideTransitionTypes.Cover))) {
{ var parametr = this.view.setMenuParametrs(type);
var parametr=this.view.setMenuParametrs(type); if (parametr)
if(parametr)
this.onParametrClick(parametr); this.onParametrClick(parametr);
} }
this.Effect = type; this.Effect = type;
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var transition = new Asc.CAscSlideTransition(); var transition = new Asc.CAscSlideTransition();
@ -203,71 +197,45 @@ define([
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
}, },
onFocusObject:function(selectedObjects){
onFocusObject: function(selectedObjects) {
var me = this; var me = this;
for (var i=0; i<selectedObjects.length; i++) {
for (var i = 0; i<selectedObjects.length; i++) {
var eltype = selectedObjects[i].get_ObjectType(); var eltype = selectedObjects[i].get_ObjectType();
if (eltype === undefined) if (eltype === undefined)
continue; continue;
if (eltype == Asc.c_oAscTypeSelectElement.Slide) { if (eltype == Asc.c_oAscTypeSelectElement.Slide) {
var locked_transition = undefined,
var slide_deleted = undefined, pr = selectedObjects[i].get_ObjectValue();
locked_transition=undefined,
pr;
me._state.activated=me.view.toolbar.activated;
pr=selectedObjects[i].get_ObjectValue();
slide_deleted = pr.get_LockDelete();
locked_transition = pr.get_LockTransition(); locked_transition = pr.get_LockTransition();
// if (slide_deleted !== undefined && me._state.slidecontrolsdisable !== slide_deleted) { if (locked_transition !== undefined && me._state.lockedtransition !== locked_transition)
// if (me._state.activated) me._state.slidecontrolsdisable = slide_deleted; if (me.view.toolbar._state.activated) me._state.lockedtransition = locked_transition;
// me.lockToolbar(PE.enumLock.slideDeleted, slide_deleted);
// }
if (locked_transition !== undefined && me._state.lockedtransition !== locked_transition ) {
if (me._state.activated) me._state.lockedtransition = locked_transition;
me.lockToolbar(PE.enumLock.transitLock, locked_transition);
}
this.loadSettings(pr);
if (this._state.onactivetab) {
this.setLocked();
this.setSettings();
}
} }
this.changeSettings(pr);
} }
}, },
lockToolbar: function (causes, lock, opts) {
Common.Utils.lockControls(causes, lock, opts, this.view.lockedControls);
},
changeSettings:function (props){
var me=this.view;
loadSettings: function (props) {
var transition = props.get_transition(); var transition = props.get_transition();
if (transition) { if (transition) {
var value = transition.get_TransitionType(); this._state.Effect = transition.get_TransitionType();
var found = false; this._state.EffectType = transition.get_TransitionOption();
if (this._state.Effect !== value) {
var item = me.listEffects.store.findWhere({value: value});
if (item) {
found = true;
me.listEffects.menuPicker.selectRecord(item);
this._state.Effect = value;
} else
me.listEffects.menuPicker.selectRecord(me.listEffects.menuPicker.items[0]);
}
if (me.btnParametrs.menu.items.length>0) { var value = transition.get_TransitionDuration();
value = transition.get_TransitionOption();
me.setMenuParametrs(this._state.Effect, value);
this._state.EffectType = value;
}
value = transition.get_TransitionDuration();
if (Math.abs(this._state.Duration - value) > 0.001 || if (Math.abs(this._state.Duration - value) > 0.001 ||
(this._state.Duration === null || value === null) && (this._state.Duration !== value) || (this._state.Duration === null || value === null) && (this._state.Duration !== value) ||
(this._state.Duration === undefined || value === undefined) && (this._state.Duration !== value)) { (this._state.Duration === undefined || value === undefined) && (this._state.Duration !== value)) {
me.numDuration.setValue((value !== null && value !== undefined) ? value / 1000. : '', true);
this._state.Duration = value; this._state.Duration = value;
} }
@ -275,22 +243,51 @@ define([
if (Math.abs(this._state.Delay - value) > 0.001 || if (Math.abs(this._state.Delay - value) > 0.001 ||
(this._state.Delay === null || value === null) && (this._state.Delay !== value) || (this._state.Delay === null || value === null) && (this._state.Delay !== value) ||
(this._state.Delay === undefined || value === undefined) && (this._state.Delay !== value)) { (this._state.Delay === undefined || value === undefined) && (this._state.Delay !== value)) {
me.numDelay.setValue((value !== null && value !== undefined) ? value / 1000. : '', true);
this._state.Delay = value; this._state.Delay = value;
} }
value = transition.get_SlideAdvanceOnMouseClick(); this._state.OnMouseClick = transition.get_SlideAdvanceOnMouseClick();
if (this._state.OnMouseClick !== value) { this._state.AdvanceAfter = transition.get_SlideAdvanceAfter();
me.chStartOnClick.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
this._state.OnMouseClick = value;
}
value = transition.get_SlideAdvanceAfter();
if (this._state.AdvanceAfter !== value) {
me.chDelay.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
me.numDelay.setDisabled(me.chDelay.getValue() !== 'checked');
this._state.AdvanceAfter = value;
}
} }
},
onActiveTab: function(tab) {
if (tab == 'transit') {
this._state.onactivetab = true;
this.setLocked();
this.setSettings();
}
else this._state.onactivetab = false;
},
lockToolbar: function (causes, lock, opts) {
Common.Utils.lockControls(causes, lock, opts, this.view.lockedControls);
},
setLocked: function() {
if (this._state.lockedtransition != undefined)
this.lockToolbar(PE.enumLock.transitLock, this._state.lockedtransition);
if (this._state.no_slides != undefined)
this.lockToolbar(PE.enumLock.noSlides, this._state.no_slides);
},
setSettings: function () {
var me = this.view;
if (this._state.Effect !== undefined) {
var item = me.listEffects.store.findWhere({value: this._state.Effect});
me.listEffects.menuPicker.selectRecord(item ? item : me.listEffects.menuPicker.items[0]);
}
if (me.btnParametrs.menu.items.length > 0 && this._state.EffectType !== undefined)
me.setMenuParametrs(this._state.Effect, this._state.EffectType);
me.numDuration.setValue((this._state.Duration !== null && this._state.Duration !== undefined) ? this._state.Duration / 1000. : '', true);
me.numDelay.setValue((this._state.Delay !== null && this._state.Delay !== undefined) ? this._state.Delay / 1000. : '', true);
me.chStartOnClick.setValue((this._state.OnMouseClick !== null && this._state.OnMouseClick !== undefined) ? this._state.OnMouseClick : 'indeterminate', true);
me.chDelay.setValue((this._state.AdvanceAfter !== null && this._state.AdvanceAfter !== undefined) ? this._state.AdvanceAfter : 'indeterminate', true);
me.numDelay.setDisabled(me.chDelay.getValue() !== 'checked' || me.chDelay.disabled);
} }
}, PE.Controllers.Transitions || {})); }, PE.Controllers.Transitions || {}));
}); });

36
apps/presentationeditor/main/app/template/Transitions.template
View file

@ -1,36 +0,0 @@
<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>

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

@ -1039,7 +1039,6 @@ 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]);
_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);

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

@ -43,7 +43,6 @@
define([ define([
'text!presentationeditor/main/app/template/Transitions.template',
'common/main/lib/util/utils', 'common/main/lib/util/utils',
'common/main/lib/component/Button', 'common/main/lib/component/Button',
'common/main/lib/component/DataView', 'common/main/lib/component/DataView',
@ -52,55 +51,62 @@ define([
'presentationeditor/main/app/view/SlideSettings', 'presentationeditor/main/app/view/SlideSettings',
'common/main/lib/component/MetricSpinner', 'common/main/lib/component/MetricSpinner',
'common/main/lib/component/Window' 'common/main/lib/component/Window'
], function (template) { ], function () {
'use strict'; 'use strict';
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){
me.btnPreview.on('click', _.bind(function(btn){ if (me.btnPreview) {
me.btnPreview.on('click', _.bind(function(btn) {
me.fireEvent('transit:preview', [me.btnPreview]); me.fireEvent('transit:preview', [me.btnPreview]);
}, me)); }, me));
} }
if(me.btnParametrs) {
me.btnParametrs.on('click', function (e) { if (me.btnParameters) {
me.fireEvent('transit:parametrs', ['current']); me.btnParameters.on('click', function (e) {
me.fireEvent('transit:Parameters', ['current']);
}); });
me.btnParametrs.menu.on('item:click', function (menu, item, e) { me.btnParameters.menu.on('item:click', function (menu, item, e) {
me.fireEvent('transit:parametrs', [item]); me.fireEvent('transit:Parameters', [item]);
}); });
} }
if(me.btnApplyToAll){
me.btnApplyToAll.on('click', _.bind(function(btn){ if (me.btnApplyToAll) {
me.btnApplyToAll.on('click', _.bind(function(btn) {
me.fireEvent('transit:applytoall', [me.btnApplyToAll]); me.fireEvent('transit:applytoall', [me.btnApplyToAll]);
}, me)); }, me));
} }
if(me.numDuration){
if (me.numDuration) {
me.numDuration.on('change', function(bth) { me.numDuration.on('change', function(bth) {
me.fireEvent('transit:duration', [me.numDuration]); me.fireEvent('transit:duration', [me.numDuration]);
},me); }, me);
} }
if(me.numDelay){
if (me.numDelay) {
me.numDelay.on('change', function(bth) { me.numDelay.on('change', function(bth) {
me.fireEvent('transit:delay', [me.numDelay]); me.fireEvent('transit:delay', [me.numDelay]);
},me); }, me);
} }
if(me.chStartOnClick){
me.chStartOnClick.on('change',_.bind(function (e){ if (me.chStartOnClick) {
me.fireEvent('transit:startonclick',[ me.chStartOnClick,me.chStartOnClick.value, me.chStartOnClick.lastValue]); me.chStartOnClick.on('change', _.bind(function (e) {
},me)); me.fireEvent('transit:startonclick', [me.chStartOnClick, me.chStartOnClick.value, me.chStartOnClick.lastValue]);
}, me));
} }
if(me.chDelay){
me.chDelay.on('change',_.bind(function (e){ if (me.chDelay) {
me.fireEvent('transit:checkdelay',[ me.chDelay,me.chDelay.value, me.chDelay.lastValue]); me.chDelay.on('change', _.bind(function (e) {
},me)); me.fireEvent('transit:checkdelay', [me.chDelay, me.chDelay.value, me.chDelay.lastValue]);
}, me));
} }
} }
@ -112,22 +118,22 @@ define([
initialize: function (options) { initialize: function (options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
this.toolbar=options.toolbar; this.toolbar = options.toolbar;
this.appConfig = options.mode; this.appConfig = options.mode;
this.$el=this.toolbar.toolbar.$el.find('#transitions-panel'); this.$el = this.toolbar.toolbar.$el.find('#transitions-panel');
var _set=PE.enumLock; var _set = PE.enumLock;
this.lockedControls=[]; this.lockedControls = [];
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()},
{title: this.textFade, imageUrl:"btn-insertimage", value: Asc.c_oAscSlideTransitionTypes.Fade, id: Common.UI.getId()}, {title: this.textFade, imageUrl: "btn-insertimage", value: Asc.c_oAscSlideTransitionTypes.Fade, id: Common.UI.getId()},
{title: this.textPush, imageUrl:"btn-insertshape", value: Asc.c_oAscSlideTransitionTypes.Push, id: Common.UI.getId()}, {title: this.textPush, imageUrl: "btn-insertshape", value: Asc.c_oAscSlideTransitionTypes.Push, id: Common.UI.getId()},
{title: this.textWipe, imageUrl:"btn-insertchart", value: Asc.c_oAscSlideTransitionTypes.Wipe, id: Common.UI.getId()}, {title: this.textWipe, imageUrl: "btn-insertchart", value: Asc.c_oAscSlideTransitionTypes.Wipe, id: Common.UI.getId()},
{title: this.textSplit, imageUrl:"btn-textart", value: Asc.c_oAscSlideTransitionTypes.Split, id: Common.UI.getId()}, {title: this.textSplit, imageUrl: "btn-textart", value: Asc.c_oAscSlideTransitionTypes.Split, id: Common.UI.getId()},
{title: this.textUnCover, imageUrl:"btn-menu-comments", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()}, {title: this.textUnCover, imageUrl: "btn-menu-comments", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()},
{title: this.textCover, imageUrl:"btn-editheader", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()}, {title: this.textCover, imageUrl: "btn-editheader", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()},
{title: this.textClock, imageUrl:"btn-datetime", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()}, {title: this.textClock, imageUrl: "btn-datetime", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()},
{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.listEffects = new Common.UI.ComboDataView({ this.listEffects = new Common.UI.ComboDataView({
@ -135,7 +141,7 @@ define([
itemWidth: 87, itemWidth: 87,
itemHeight: 40, itemHeight: 40,
enableKeyEvents: true, enableKeyEvents: true,
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock], lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
beforeOpenHandler: function (e) { beforeOpenHandler: function (e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu; menu = cmp.openButton.menu;
@ -145,7 +151,7 @@ define([
menu.menuAlignEl = cmp.cmpEl; menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl'; menu.menuAlign = 'tl-tl';
menu.cmpEl.css({ menu.cmpEl.css({
'width': cmp.cmpEl.width()- cmp.openButton.$el.width(), 'width': cmp.cmpEl.width() - cmp.openButton.$el.width(),
'min-height': cmp.cmpEl.height() 'min-height': cmp.cmpEl.height()
}); });
} }
@ -164,41 +170,41 @@ define([
this.listEffects.menuPicker.store.add(this._arrEffectName); this.listEffects.menuPicker.store.add(this._arrEffectName);
this.listEffects.fieldPicker.itemTemplate = _.template([ this.listEffects.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class = "style" id = "<%= id %>">',
'<div class="btn btn-toolbar x-huge icon-top" style="width: ' + (this.listEffects.itemWidth) +'px;height: '+(this.listEffects.itemHeight)+'px;">', '<div class = "btn btn-toolbar x-huge icon-top" style = "width: ' + (this.listEffects.itemWidth) + 'px;height: ' + (this.listEffects.itemHeight) + 'px;">',
'<div class=" icon toolbar__icon <%= imageUrl %>"></div>', '<div class = " icon toolbar__icon <%= imageUrl %>"></div>',
'<div class="caption"><%= title %></div>', '<div class = "caption"><%= title %></div>',
'</div>', '</div>',
'</div>' '</div>'
].join('')); ].join(''));
this.listEffects.menuPicker.itemTemplate =this.listEffects.fieldPicker.itemTemplate; this.listEffects.menuPicker.itemTemplate = this.listEffects.fieldPicker.itemTemplate;
this.btnPreview = new Common.UI.Button({ this.btnPreview = new Common.UI.Button({
cls: 'btn-toolbar ',// x-huge icon-top', cls: 'btn-toolbar ', // x-huge icon-top',
caption: this.txtPreview, caption: this.txtPreview,
split: false, split: false,
iconCls: 'toolbar__icon btn-preview', iconCls: 'toolbar__icon btn-preview',
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.btnPreview); this.lockedControls.push(this.btnPreview);
this.btnParametrs = new Common.UI.Button({ this.btnParameters = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtParametrs, caption: this.txtParameters,
iconCls: 'toolbar__icon icon btn-insertshape', iconCls: 'toolbar__icon icon btn-insertshape',
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
maxHeight:115, maxHeight:115,
items: this.createParametrsMenuItems()}), items: this.createParametersMenuItems()}),
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.btnParametrs); this.lockedControls.push(this.btnParameters);
this.btnApplyToAll = new Common.UI.Button({ this.btnApplyToAll = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
caption: this.txtApplyToAll, caption: this.txtApplyToAll,
split: true, split: true,
iconCls: 'toolbar__icon btn-changeslide', iconCls: 'toolbar__icon btn-changeslide',
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.btnApplyToAll); this.lockedControls.push(this.btnApplyToAll);
@ -207,10 +213,10 @@ define([
step: 1, step: 1,
width: 50, width: 50,
value: '', value: '',
defaultUnit : this.txtSec, defaultUnit: this.txtSec,
maxValue: 300, maxValue: 300,
minValue: 0, minValue: 0,
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.numDuration); this.lockedControls.push(this.numDuration);
@ -219,24 +225,24 @@ define([
step: 1, step: 1,
width: 60, width: 60,
value: '', value: '',
defaultUnit : this.txtSec, defaultUnit: this.txtSec,
maxValue: 300, maxValue: 300,
minValue: 0, minValue: 0,
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.numDelay); this.lockedControls.push(this.numDelay);
this.chStartOnClick = new Common.UI.CheckBox({ this.chStartOnClick = new Common.UI.CheckBox({
el: this.$el.find('#transit-checkbox-startonclick'), el: this.$el.find('#transit-checkbox-startonclick'),
labelText: this.strStartOnClick, labelText: this.strStartOnClick,
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.chStartOnClick); this.lockedControls.push(this.chStartOnClick);
this.chDelay = new Common.UI.CheckBox({ this.chDelay = new Common.UI.CheckBox({
el: this.$el.find('#transit-checkbox-delay'), el: this.$el.find('#transit-checkbox-delay'),
labelText: this.strDelay, labelText: this.strDelay,
lock:[_set.slideDeleted,_set.noSlides,_set.disableOnStart,_set.transitLock] lock:[_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
}); });
this.lockedControls.push(this.chDelay); this.lockedControls.push(this.chDelay);
@ -248,21 +254,21 @@ define([
render: function (el) { render: function (el) {
this.boxSdk = $('#editor_sdk'); this.boxSdk = $('#editor_sdk');
if ( el ) el.html( this.getPanel() ); if (el) el.html(this.getPanel());
return this; return this;
}, },
createParametrsMenuItems: function() createParametersMenuItems: function()
{ {
var arrEffectType =[ var arrEffectType = [
{caption: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly}, {caption: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
{caption: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black}, {caption: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
{caption: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left}, {caption: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left},
{caption: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top}, {caption: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top},
{caption: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right}, {caption: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right},
{caption: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom}, {caption: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
{caption: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft}, {caption: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
{caption: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight}, {caption: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
{caption: this.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft}, {caption: this.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
{caption: this.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight}, {caption: this.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
{caption: this.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn}, {caption: this.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
@ -271,50 +277,50 @@ define([
{caption: this.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut}, {caption: this.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
{caption: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise}, {caption: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
{caption: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise}, {caption: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
{caption: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge}, {caption: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
{caption: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In}, {caption: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In},
{caption: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out}, {caption: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
{caption: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate} {caption: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
]; ];
var itemsMenu=[]; var itemsMenu = [];
_.each(arrEffectType, function (item){ _.each(arrEffectType, function (item) {
itemsMenu.push( itemsMenu.push({
{
caption: item.caption, caption: item.caption,
value: item.value, value: item.value,
checkable: true, checkable: true,
toggleGroup: 'effects' toggleGroup: 'effects'
} });
);
}); });
return itemsMenu; return itemsMenu;
}, },
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
(new Promise(function (accept, reject) { (new Promise(function (accept, reject) {
accept(); accept();
})).then(function(){ })).then(function() {
setEvents.call(me); setEvents.call(me);
}); });
}, },
getPanel: function () { getPanel: function () {
this.listEffects&&this.listEffects.render(this.$el.find('#transit-field-effects')); this.listEffects && this.listEffects.render(this.$el.find('#transit-field-effects'));
this.btnPreview && this.btnPreview.render(this.$el.find('#transit-button-preview')); this.btnPreview && this.btnPreview.render(this.$el.find('#transit-button-preview'));
this.btnParametrs && this.btnParametrs.render(this.$el.find('#transit-button-parametrs')); this.btnParameters && this.btnParameters.render(this.$el.find('#transit-button-Parameters'));
this.btnApplyToAll && this.btnApplyToAll.render(this.$el.find('#transit-button-apply')); this.btnApplyToAll && this.btnApplyToAll.render(this.$el.find('#transit-button-apply'));
this.renderComponent('#transit-spin-duration', this.numDuration); this.renderComponent('#transit-spin-duration', this.numDuration);
this.renderComponent('#transit-spin-delay', this.numDelay); this.renderComponent('#transit-spin-delay', this.numDelay);
this.renderComponent('#transit-checkbox-startonclick', this.chStartOnClick); this.renderComponent('#transit-checkbox-startonclick', this.chStartOnClick);
this.$el.find("#label-duration").innerText=this.strDuration; this.$el.find("#label-duration").innerText = this.strDuration;
this.$el.find("#label-delay").innerText=this.strDelay; this.$el.find("#label-delay").innerText = this.strDelay;
return this.$el; return this.$el;
}, },
renderComponent: function (compid, obj) renderComponent: function (compid, obj)
{ {
var element=this.$el.find(compid); var element = this.$el.find(compid);
element.parent().append(obj.el); element.parent().append(obj.el);
}, },
@ -323,68 +329,70 @@ define([
this.fireEvent('show', this); this.fireEvent('show', this);
}, },
getButtons: function (type){ getButtons: function (type) {
if (type===undefined) if (type === undefined)
return this.lockedControls; return this.lockedControls;
return []; return [];
}, },
setDisabled: function (state) { setDisabled: function (state) {
this.lockedControls && this.lockedControls.forEach(function (button){ this.lockedControls && this.lockedControls.forEach(function (button) {
button.setDisabled(state); button.setDisabled(state);
},this); }, this);
}, },
setMenuParametrs:function (effect,value) setMenuParameters: function (effect, value)
{ {
var minMax=[-1,-1]; var minMax = [-1, -1];
switch (effect) { switch (effect) {
case Asc.c_oAscSlideTransitionTypes.Fade: case Asc.c_oAscSlideTransitionTypes.Fade:
minMax=[0,1]; minMax = [0, 1];
break; break;
case Asc.c_oAscSlideTransitionTypes.Push: case Asc.c_oAscSlideTransitionTypes.Push:
minMax=[2, 5]; minMax = [2, 5];
break; break;
case Asc.c_oAscSlideTransitionTypes.Wipe: case Asc.c_oAscSlideTransitionTypes.Wipe:
minMax=[2, 9]; minMax = [2, 9];
break; break;
case Asc.c_oAscSlideTransitionTypes.Split: case Asc.c_oAscSlideTransitionTypes.Split:
minMax=[10, 13]; minMax = [10, 13];
break; break;
case Asc.c_oAscSlideTransitionTypes.UnCover: case Asc.c_oAscSlideTransitionTypes.UnCover:
minMax=[2, 9]; minMax = [2, 9];
break; break;
case Asc.c_oAscSlideTransitionTypes.Cover: case Asc.c_oAscSlideTransitionTypes.Cover:
minMax=[2, 9]; minMax = [2, 9];
break; break;
case Asc.c_oAscSlideTransitionTypes.Clock: case Asc.c_oAscSlideTransitionTypes.Clock:
minMax=[14, 16]; minMax = [14, 16];
break; break;
case Asc.c_oAscSlideTransitionTypes.Zoom: case Asc.c_oAscSlideTransitionTypes.Zoom:
minMax=[17,19]; minMax = [17, 19];
break; break;
} }
var selectedElement; var selectedElement;
_.each(this.btnParametrs.menu.items,function (element,index){ _.each(this.btnParameters.menu.items, function (element, index) {
if(((index<minMax[0])||(index>minMax[1]))) if (((index < minMax[0])||(index > minMax[1])))
element.$el.css('display','none'); element.$el.css('display', 'none');
else { else {
element.$el.css('display',''); element.$el.css('display', '');
if (value != undefined) { if (value != undefined) {
if (value == element.value) if (value == element.value) selectedElement = element;
selectedElement = element;
} }
} }
}); });
if (selectedElement == undefined)
if(selectedElement==undefined) selectedElement = this.btnParameters.menu.items[minMax[0]];
selectedElement=this.btnParametrs.menu.items[minMax[0]];
if(effect!=Asc.c_oAscSlideTransitionTypes.None) if (effect != Asc.c_oAscSlideTransitionTypes.None)
selectedElement.setChecked(true); selectedElement.setChecked(true);
if(!this.listEffects.isDisabled()) { if (!this.listEffects.isDisabled()) {
this.numDelay.setDisabled(this.chDelay.getValue()!=='checked'); this.numDelay.setDisabled(this.chDelay.getValue() !== 'checked');
this.btnParametrs.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None); this.btnParameters.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
this.btnPreview.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None); this.btnPreview.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
this.numDuration.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None); this.numDuration.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
} }
@ -392,9 +400,9 @@ define([
}, },
txtSec:'s', txtSec: 's',
txtPreview:'Preview', txtPreview: 'Preview',
txtParametrs: 'Parametrs', txtParameters: 'Parameters',
txtApplyToAll: 'Apply to All Slides', txtApplyToAll: 'Apply to All Slides',
strDuration: 'Duration', strDuration: 'Duration',
strDelay: 'Delay', strDelay: 'Delay',

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

@ -2008,5 +2008,42 @@
"PE.Views.Toolbar.txtScheme8": "Flow", "PE.Views.Toolbar.txtScheme8": "Flow",
"PE.Views.Toolbar.txtScheme9": "Foundry", "PE.Views.Toolbar.txtScheme9": "Foundry",
"PE.Views.Toolbar.txtSlideAlign": "Align to Slide", "PE.Views.Toolbar.txtSlideAlign": "Align to Slide",
"PE.Views.Toolbar.txtUngroup": "Ungroup" "PE.Views.Toolbar.txtUngroup": "Ungroup",
"PE.Views.Transitions.txtSec": "s",
"PE.Views.Transitions.txtPreview": "Preview",
"PE.Views.Transitions.txtParameters": "Parameters",
"PE.Views.Transitions.txtApplyToAll": "Apply to All Slides",
"PE.Views.Transitions.strDuration": "Duration",
"PE.Views.Transitions.strDelay": "Delay",
"PE.Views.Transitions.strStartOnClick": "Start On Click",
"PE.Views.Transitions.textNone": "None",
"PE.Views.Transitions.textFade": "Fade",
"PE.Views.Transitions.textPush": "Push",
"PE.Views.Transitions.textWipe": "Wipe",
"PE.Views.Transitions.textSplit": "Split",
"PE.Views.Transitions.textUnCover": "UnCover",
"PE.Views.Transitions.textCover": "Cover",
"PE.Views.Transitions.textClock": "Clock",
"PE.Views.Transitions.textZoom": "Zoom",
"PE.Views.Transitions.textSmoothly": "Smoothly",
"PE.Views.Transitions.textBlack": "Through Black",
"PE.Views.Transitions.textLeft": "Left",
"PE.Views.Transitions.textTop": "Top",
"PE.Views.Transitions.textRight": "Right",
"PE.Views.Transitions.textBottom": "Bottom",
"PE.Views.Transitions.textTopLeft": "Top-Left",
"PE.Views.Transitions.textTopRight": "Top-Right",
"PE.Views.Transitions.textBottomLeft": "Bottom-Left",
"PE.Views.Transitions.textBottomRight": "Bottom-Right",
"PE.Views.Transitions.textVerticalIn": "Vertical In",
"PE.Views.Transitions.textVerticalOut": "Vertical Out",
"PE.Views.Transitions.textHorizontalIn": "Horizontal In",
"PE.Views.Transitions.textHorizontalOut": "Horizontal Out",
"PE.Views.Transitions.textClockwise": "Clockwise",
"PE.Views.Transitions.textCounterclockwise": "Counterclockwise",
"PE.Views.Transitions.textWedge": "Wedge",
"PE.Views.Transitions.textZoomIn": "Zoom In",
"PE.Views.Transitions.textZoomOut": "Zoom Out",
"PE.Views.Transitions.textZoomRotate": "Zoom and Rotate",
"PE.Views.Toolbar.textTabTransitions": "Transitions"
} }

28
apps/presentationeditor/main/resources/less/transitions.less
View file

@ -17,6 +17,7 @@
border-color: @border-preview-select; border-color: @border-preview-select;
} }
.style{ .style{
background: transparent; background: transparent;
} }
@ -24,7 +25,7 @@
.btn { .btn {
border: none; border: none;
&:hover { &:hover {
background-color: transparent; background: transparent;
} }
.icon .icon
{ {
@ -33,4 +34,29 @@
} }
} }
.combo-dataview
{
&.disabled {
.item {
&:hover:not(.selected) {
border-color: transparent;
}
.btn{
background: transparent;
cursor: default;
&:active,
&.active {
.icon {opacity: @component-normal-icon-opacity;}
}
}
}
}
}
.spinner
{
margin-left: 10px;
}
} }