Merge pull request #1493 from ONLYOFFICE/fix/Repeat-and-duration-for-animation
Repeat and duration for animation
This commit is contained in:
Julia Radzhabova
GitHub
commit
40d55acd90
|
|
@ -65,7 +65,6 @@ define([
|
|||
'PE.Views.Animation': {
|
||||
'animation:preview': _.bind(this.onPreviewClick, this),
|
||||
'animation:parameters': _.bind(this.onParameterClick, this),
|
||||
'animation:duration': _.bind(this.onDurationChange, this),
|
||||
'animation:selecteffect': _.bind(this.onEffectSelect, this),
|
||||
'animation:delay': _.bind(this.onDelayChange, this),
|
||||
'animation:animationpane': _.bind(this.onAnimationPane, this),
|
||||
|
|
@ -79,7 +78,10 @@ define([
|
|||
'animation:movelater': _.bind(this.onMoveLater, this),
|
||||
'animation:repeatchange': _.bind(this.onRepeatChange, this),
|
||||
'animation:repeatfocusin': _.bind(this.onRepeatComboOpen, this),
|
||||
'animation:repeatselected': _.bind(this.onRepeatSelected, this)
|
||||
'animation:repeatselected': _.bind(this.onRepeatSelected, this),
|
||||
'animation:durationchange': _.bind(this.onDurationChange, this),
|
||||
'animation:durationfocusin': _.bind(this.onRepeatComboOpen, this),
|
||||
'animation:durationselected': _.bind(this.onDurationSelected, this)
|
||||
|
||||
},
|
||||
'Toolbar': {
|
||||
|
|
@ -180,16 +182,50 @@ define([
|
|||
},
|
||||
|
||||
addNewEffect: function (type, group, groupName, replace) {
|
||||
if (this._state.Effect == type) return;
|
||||
if (this._state.Effect == type && this._state.EffectGroup == group && replace) return;
|
||||
var parameter = this.view.setMenuParameters(type, groupName, undefined);
|
||||
this.api.asc_AddAnimation(group, type, (parameter != undefined)?parameter:0, replace);
|
||||
this._state.EffectGroups = group;
|
||||
this.api.asc_AddAnimation(group, type, (parameter != undefined)?parameter:0, replace, !Common.Utils.InternalSettings.get("pe-animation-no-preview"));
|
||||
this._state.EffectGroup = group;
|
||||
this._state.Effect = type;
|
||||
},
|
||||
|
||||
onDurationChange: function(field, newValue, oldValue, eOpts) {
|
||||
onDurationChange: function(before,combo, record, e) {
|
||||
var value,
|
||||
me = this;
|
||||
if(before)
|
||||
{
|
||||
var item = combo.store.findWhere({
|
||||
displayValue: record.value
|
||||
});
|
||||
|
||||
if (!item) {
|
||||
var expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(' + me.view.txtSec + ')?\\s*$');
|
||||
if (!expr.exec(record.value)) {
|
||||
combo.setValue(this._state.Duration, this._state.Duration>=0 ? this._state.Duration + ' ' + this.view.txtSec : 1);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
value = Common.Utils.String.parseFloat(record.value);
|
||||
if(!record.displayValue)
|
||||
value = value > 600 ? 600 :
|
||||
value < 0 ? 0.01 : parseFloat(value.toFixed(2));
|
||||
|
||||
combo.setValue(value);
|
||||
this.setDuration(value);
|
||||
}
|
||||
},
|
||||
|
||||
onDurationSelected: function (combo, record) {
|
||||
this.setDuration(record.value);
|
||||
},
|
||||
|
||||
setDuration: function(valueRecord) {
|
||||
if (this.api) {
|
||||
this.AnimationProperties.asc_putDuration(field.getNumberValue() * 1000);
|
||||
var value = valueRecord < 0 ? valueRecord : valueRecord * 1000;
|
||||
this.AnimationProperties.asc_putDuration(value);
|
||||
this.api.asc_SetAnimationProperties(this.AnimationProperties);
|
||||
}
|
||||
},
|
||||
|
|
@ -200,6 +236,7 @@ define([
|
|||
this.api.asc_SetAnimationProperties(this.AnimationProperties);
|
||||
}
|
||||
},
|
||||
|
||||
onRepeatChange: function (before,combo, record, e){
|
||||
var value,
|
||||
me = this;
|
||||
|
|
@ -211,15 +248,9 @@ define([
|
|||
|
||||
if (!item) {
|
||||
value = /^\+?(\d*(\.|,).?\d+)$|^\+?(\d+(\.|,)?\d*)$/.exec(record.value);
|
||||
|
||||
if (!value) {
|
||||
value = this._state.Repeat;
|
||||
combo.setRawValue(value);
|
||||
if(isNaN(record.value)) {
|
||||
record.value = value;
|
||||
if(value < 0)
|
||||
record.displayValue = combo.store.findWhere({value: value}).get('displayValue');
|
||||
}
|
||||
combo.setValue(this._state.Repeat, this._state.Repeat>=0 ? this._state.Repeat : 1);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -231,17 +262,18 @@ define([
|
|||
value < 1 ? 1 : Math.floor((value+0.4)*2)/2;
|
||||
|
||||
combo.setValue(value);
|
||||
|
||||
if (this.api) {
|
||||
this.AnimationProperties.asc_putRepeatCount(value);
|
||||
this.api.asc_SetAnimationProperties(this.AnimationProperties);
|
||||
}
|
||||
this.setRepeat(value);
|
||||
}
|
||||
},
|
||||
|
||||
onRepeatSelected: function (combo, record) {
|
||||
this.setRepeat(record.value);
|
||||
},
|
||||
|
||||
setRepeat: function(valueRecord) {
|
||||
if (this.api) {
|
||||
this.AnimationProperties.asc_putRepeatCount(record.value);
|
||||
var value = valueRecord < 0 ? valueRecord : valueRecord * 1000;
|
||||
this.AnimationProperties.asc_putRepeatCount(value);
|
||||
this.api.asc_SetAnimationProperties(this.AnimationProperties);
|
||||
}
|
||||
},
|
||||
|
|
@ -339,7 +371,7 @@ define([
|
|||
if (this._state.Effect !== value || this._state.EffectGroup !== group) {
|
||||
this._state.Effect = value;
|
||||
this._state.EffectGroup = group;
|
||||
|
||||
this.setViewRepeatAndDuration(this._state.EffectGroup, this._state.Effect);
|
||||
group = view.listEffects.groups.findWhere({value: this._state.EffectGroup});
|
||||
item = store.findWhere(group ? {group: group.get('id'), value: this._state.Effect} : {value: this._state.Effect});
|
||||
if (item) {
|
||||
|
|
@ -397,12 +429,12 @@ define([
|
|||
this._state.noAnimationParam = view.setMenuParameters(this._state.Effect, _.findWhere(this.EffectGroups,{value: this._state.EffectGroup}).id, this._state.EffectOption)===undefined;
|
||||
|
||||
value = this.AnimationProperties.asc_getDuration();
|
||||
if (Math.abs(this._state.Duration - value) > 0.001 ||
|
||||
(this._state.Duration === null || value === null) && (this._state.Duration !== value) ||
|
||||
(this._state.Duration === undefined || value === undefined) && (this._state.Duration !== value)) {
|
||||
this._state.Duration = value;
|
||||
view.numDuration.setValue((this._state.Duration !== null && this._state.Duration !== undefined) ? this._state.Duration / 1000. : '', true);
|
||||
}
|
||||
this._state.Duration = (value>=0) ? value/1000 : value ; // undefined or <0
|
||||
if (this._state.noAnimationDuration)
|
||||
view.cmbDuration.setValue('');
|
||||
else
|
||||
view.cmbDuration.setValue(this._state.Duration, this._state.Duration>=0 ? this._state.Duration + ' ' + this.view.txtSec : 1);
|
||||
|
||||
value = this.AnimationProperties.asc_getDelay();
|
||||
if (Math.abs(this._state.Delay - value) > 0.001 ||
|
||||
(this._state.Delay === null || value === null) && (this._state.Delay !== value) ||
|
||||
|
|
@ -410,8 +442,12 @@ define([
|
|||
this._state.Delay = value;
|
||||
view.numDelay.setValue((this._state.Delay !== null && this._state.Delay !== undefined) ? this._state.Delay / 1000. : '', true);
|
||||
}
|
||||
this._state.Repeat = this.AnimationProperties.asc_getRepeatCount();
|
||||
view.cmbRepeat.setValue( this._state.Repeat !== undefined ? this._state.Repeat : 1);
|
||||
value =this.AnimationProperties.asc_getRepeatCount();
|
||||
this._state.Repeat = (value<0) ? value : value/1000;
|
||||
if (this._state.noAnimationRepeat)
|
||||
view.cmbRepeat.setValue('');
|
||||
else
|
||||
view.cmbRepeat.setValue( this._state.Repeat, this._state.Repeat>=0 ? this._state.Repeat : 1);
|
||||
|
||||
this._state.StartSelect = this.AnimationProperties.asc_getStartType();
|
||||
view.cmbStart.setValue(this._state.StartSelect!==undefined ? this._state.StartSelect : AscFormat.NODE_TYPE_CLICKEFFECT);
|
||||
|
|
@ -429,6 +465,7 @@ define([
|
|||
this.setTriggerList();
|
||||
}
|
||||
this.setLocked();
|
||||
|
||||
},
|
||||
|
||||
setTriggerList: function (){
|
||||
|
|
@ -444,6 +481,32 @@ define([
|
|||
this.view.cmbTrigger.menu.items[0].setChecked(this._state.trigger == this.view.triggers.ClickSequence);
|
||||
},
|
||||
|
||||
setViewRepeatAndDuration: function(group, type) {
|
||||
if(type == AscFormat.ANIM_PRESET_NONE) return;
|
||||
|
||||
this._state.noAnimationDuration = this._state.noAnimationRepeat = false;
|
||||
if((group == AscFormat.PRESET_CLASS_ENTR && type == AscFormat.ENTRANCE_APPEAR) || (group == AscFormat.PRESET_CLASS_EXIT && type == AscFormat.EXIT_DISAPPEAR)) {
|
||||
this._state.noAnimationDuration = this._state.noAnimationRepeat = true;
|
||||
}
|
||||
else if((group == AscFormat.PRESET_CLASS_EMPH) &&
|
||||
(type == AscFormat.EMPHASIS_BOLD_REVEAL || type == AscFormat.EMPHASIS_TRANSPARENCY)) {
|
||||
this._state.noAnimationRepeat = true;
|
||||
if(this.view.cmbDuration.store.length == 6) {
|
||||
this.view.cmbDuration.store.add([{value: AscFormat.untilNextClick, displayValue: this.view.textUntilNextClick},
|
||||
{value: AscFormat.untilNextSlide, displayValue: this.view.textUntilEndOfSlide}]);
|
||||
this.view.cmbDuration.setData(this.view.cmbDuration.store.models);
|
||||
}
|
||||
}
|
||||
|
||||
if((this.view.cmbDuration.store.length == 8) && ((this._state.EffectGroup != AscFormat.PRESET_CLASS_EMPH) ||
|
||||
((this._state.EffectGroup == AscFormat.PRESET_CLASS_EMPH) && (this._state.Effect != AscFormat.EMPHASIS_BOLD_REVEAL) && (this._state.Effect != AscFormat.EMPHASIS_TRANSPARENCY)))) {
|
||||
this.view.cmbDuration.store.pop();
|
||||
this.view.cmbDuration.store.pop();
|
||||
this.view.cmbDuration.setData(this.view.cmbDuration.store.models);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onActiveTab: function(tab) {
|
||||
if (tab == 'animate') {
|
||||
this._state.onactivetab = true;
|
||||
|
|
@ -472,7 +535,10 @@ define([
|
|||
this.lockToolbar(PE.enumLock.noMoveAnimationEarlier, this._state.noMoveAnimationEarlier);
|
||||
if (PE.enumLock.noAnimationPreview != undefined)
|
||||
this.lockToolbar(PE.enumLock.noAnimationPreview, this._state.noAnimationPreview);
|
||||
|
||||
if (PE.enumLock.noAnimationRepeat != undefined)
|
||||
this.lockToolbar(PE.enumLock.noAnimationRepeat, this._state.noAnimationRepeat);
|
||||
if (PE.enumLock.noAnimationDuration != undefined)
|
||||
this.lockToolbar(PE.enumLock.noAnimationDuration, this._state.noAnimationDuration);
|
||||
}
|
||||
|
||||
}, PE.Controllers.Animation || {}));
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@
|
|||
<div class="group small">
|
||||
<div class="elset font-normal">
|
||||
<label id="animation-duration"></label>
|
||||
<span id="animation-spin-duration" class="btn-slot text spinner" ></span>
|
||||
<span id="animation-spin-duration" style="width: 96px; " class="btn-slot"></span>
|
||||
</div>
|
||||
<div class="elset font-normal">
|
||||
<div class="btn-slot text" id="animation-trigger"></div>
|
||||
|
|
|
|||
|
|
@ -98,9 +98,21 @@ define([
|
|||
}, me));
|
||||
}
|
||||
|
||||
if (me.numDuration) {
|
||||
me.numDuration.on('change', function(bth) {
|
||||
me.fireEvent('animation:duration', [me.numDuration]);
|
||||
if (me.cmbDuration) {
|
||||
me.cmbDuration.on('changed:before', function (combo, record, e) {
|
||||
me.fireEvent('animation:durationchange', [true, combo, record, e]);
|
||||
}, me);
|
||||
me.cmbDuration.on('changed:after', function (combo, record, e) {
|
||||
me.fireEvent('animation:durationchange', [false, combo, record, e]);
|
||||
}, me);
|
||||
me.cmbDuration.on('selected', function (combo, record) {
|
||||
me.fireEvent('animation:durationselected', [combo, record]);
|
||||
}, me);
|
||||
me.cmbDuration.on('show:after', function (combo) {
|
||||
me.fireEvent('animation:durationfocusin', [true, combo]);
|
||||
}, me);
|
||||
me.cmbDuration.on('combo:focusin', function (combo) {
|
||||
me.fireEvent('animation:durationfocusin', [false, combo]);
|
||||
}, me);
|
||||
}
|
||||
|
||||
|
|
@ -118,11 +130,11 @@ define([
|
|||
}
|
||||
|
||||
if (me.cmbRepeat) {
|
||||
me.cmbRepeat.on('changed:before', function (combo, record) {
|
||||
me.fireEvent('animation:repeatchange', [true, combo, record]);
|
||||
me.cmbRepeat.on('changed:before', function (combo, record, e) {
|
||||
me.fireEvent('animation:repeatchange', [true, combo, record, e]);
|
||||
}, me);
|
||||
me.cmbRepeat.on('changed:after', function (combo, record) {
|
||||
me.fireEvent('animation:repeatchange', [false, combo, record]);
|
||||
me.cmbRepeat.on('changed:after', function (combo, record, e) {
|
||||
me.fireEvent('animation:repeatchange', [false, combo, record, e]);
|
||||
}, me);
|
||||
me.cmbRepeat.on('selected', function (combo, record) {
|
||||
me.fireEvent('animation:repeatselected', [combo, record]);
|
||||
|
|
@ -270,20 +282,25 @@ define([
|
|||
|
||||
this.lockedControls.push(this.btnAddAnimation);
|
||||
|
||||
this.numDuration = new Common.UI.MetricSpinner({
|
||||
this.cmbDuration = new Common.UI.ComboBox({
|
||||
el: this.$el.find('#animation-spin-duration'),
|
||||
step: 1,
|
||||
width: 55,
|
||||
value: '',
|
||||
defaultUnit: this.txtSec,
|
||||
maxValue: 300,
|
||||
minValue: 0,
|
||||
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation],
|
||||
cls: 'input-group-nr',
|
||||
menuStyle: 'min-width: 100%;',
|
||||
editable: true,
|
||||
data: [
|
||||
{value: 20, displayValue: this.str20},
|
||||
{value: 5, displayValue: this.str5},
|
||||
{value: 3, displayValue: this.str3},
|
||||
{value: 2, displayValue: this.str2},
|
||||
{value: 1, displayValue: this.str1},
|
||||
{value: 0.5, displayValue: this.str0_5}
|
||||
],
|
||||
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.noAnimationDuration],
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'top',
|
||||
dataHintOffset: 'small'
|
||||
});
|
||||
this.lockedControls.push(this.numDuration);
|
||||
this.lockedControls.push(this.cmbDuration);
|
||||
|
||||
this.cmbTrigger = new Common.UI.Button({
|
||||
parentEl: $('#animation-trigger'),
|
||||
|
|
@ -361,7 +378,7 @@ define([
|
|||
cls: 'input-group-nr',
|
||||
menuStyle: 'min-width: 100%;',
|
||||
editable: true,
|
||||
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation],
|
||||
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.noAnimationRepeat],
|
||||
data: [
|
||||
{value: 1, displayValue: this.textNoRepeat},
|
||||
{value: 2, displayValue: "2"},
|
||||
|
|
@ -474,9 +491,9 @@ define([
|
|||
this.btnAnimationPane && this.btnAnimationPane.render(this.$el.find('#animation-button-pane'));
|
||||
this.btnAddAnimation && this.btnAddAnimation.render(this.$el.find('#animation-button-add-effect'));
|
||||
this.cmbStart && this.cmbStart.render(this.$el.find('#animation-start'));
|
||||
this.renderComponent('#animation-spin-duration', this.numDuration);
|
||||
//this.renderComponent('#animation-spin-duration', this.cmbDuration);
|
||||
this.renderComponent('#animation-spin-delay', this.numDelay);
|
||||
this.renderComponent('#animation-spin-repeat', this.cmbRepeat);
|
||||
//this.renderComponent('#animation-spin-repeat', this.cmbRepeat);
|
||||
this.$el.find("#animation-duration").innerText = this.strDuration;
|
||||
this.$el.find("#animation-delay").innerText = this.strDelay;
|
||||
this.$el.find("#animation-label-start").innerText = this.strStart;
|
||||
|
|
@ -489,8 +506,6 @@ define([
|
|||
element.parent().append(obj.el);
|
||||
},
|
||||
|
||||
|
||||
|
||||
show: function () {
|
||||
Common.UI.BaseView.prototype.show.call(this);
|
||||
this.fireEvent('show', this);
|
||||
|
|
@ -556,7 +571,13 @@ define([
|
|||
textMoveLater: 'Move Later',
|
||||
textNoRepeat: '(none)',
|
||||
textUntilNextClick: 'Until Next Click',
|
||||
textUntilEndOfSlide: 'Until End of Slide'
|
||||
textUntilEndOfSlide: 'Until End of Slide',
|
||||
str20: '20 s (Extremely Slow)',
|
||||
str5: '5 s (Very Slow)',
|
||||
str3: '3 s (Slow)',
|
||||
str2: '2 s (Medium)',
|
||||
str1: '1 s (Fast)',
|
||||
str0_5: '0.5 s (Very Fast)'
|
||||
}
|
||||
}()), PE.Views.Animation || {}));
|
||||
|
||||
|
|
|
|||
|
|
@ -119,14 +119,16 @@ define([
|
|||
this.lstEffectList = new Common.UI.ListView({
|
||||
el : $('#animation-list'),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="list-item" style=""><%= displayValue %></div>'),
|
||||
scroll : true
|
||||
scrollAlwaysVisible: true,
|
||||
tabindex: 1
|
||||
});
|
||||
this.lstEffectList.on('item:select', _.bind(this.onEffectListItem,this));
|
||||
|
||||
this.chPreview = new Common.UI.CheckBox({
|
||||
el : $('#animation-setpreview'),
|
||||
labelText : this.textPreviewEffect
|
||||
});
|
||||
labelText : this.textPreviewEffect,
|
||||
value: !Common.Utils.InternalSettings.get("pe-animation-no-preview")
|
||||
}).on('change', _.bind(this.onPreviewChange, this));
|
||||
|
||||
this.cmbGroup.setValue(this._state.activeGroupValue);
|
||||
this.fillLevel();
|
||||
|
|
@ -134,6 +136,14 @@ define([
|
|||
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
|
||||
},
|
||||
|
||||
getFocusedComponents: function() {
|
||||
return [ this.cmbGroup, this.cmbLevel, this.lstEffectList, this.chPreview];
|
||||
},
|
||||
|
||||
getDefaultFocusableComponent: function () {
|
||||
return this.lstEffectList;
|
||||
},
|
||||
|
||||
onGroupSelect: function (combo, record) {
|
||||
this._state.activeGroup = record.id;
|
||||
this._state.activeGroupValue = record.value;
|
||||
|
|
@ -164,6 +174,7 @@ define([
|
|||
if(!item)
|
||||
item = this.lstEffectList.store.at(0);
|
||||
this.lstEffectList.selectRecord(item);
|
||||
this.lstEffectList.scrollToRecord(item, true);
|
||||
this._state.activeEffect = item.get('value');
|
||||
},
|
||||
|
||||
|
|
@ -173,6 +184,10 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
onPreviewChange: function (field, newValue, oldValue, eOpts) {
|
||||
Common.Utils.InternalSettings.set("pe-animation-no-preview", field.getValue()!=='checked');
|
||||
},
|
||||
|
||||
onBtnClick: function (event)
|
||||
{
|
||||
this._handleInput(event.currentTarget.attributes['result'].value);
|
||||
|
|
|
|||
|
|
@ -93,7 +93,9 @@ define([
|
|||
noTriggerObjects: 'no-trigger-objects',
|
||||
noMoveAnimationEarlier: 'no-move-animation-earlier',
|
||||
noMoveAnimationLater: 'no-move-animation-later',
|
||||
noAnimationPreview: 'no-animation-preview'
|
||||
noAnimationPreview: 'no-animation-preview',
|
||||
noAnimationRepeat: 'no-animation-repeat',
|
||||
noAnimationDuration: 'no-animation-duration'
|
||||
};
|
||||
|
||||
PE.Views.Toolbar = Common.UI.Mixtbar.extend(_.extend((function(){
|
||||
|
|
|
|||
|
|
@ -1305,6 +1305,15 @@
|
|||
"PE.Views.Animation.txtParameters": "Parameters",
|
||||
"PE.Views.Animation.txtPreview": "Preview",
|
||||
"PE.Views.Animation.txtSec": "s",
|
||||
"PE.Views.Animation.textNoRepeat": "(none)",
|
||||
"PE.Views.Animation.textUntilNextClick": "Until Next Click",
|
||||
"PE.Views.Animation.textUntilEndOfSlide": "Until End of Slide",
|
||||
"PE.Views.Animation.str20": "20 s (Extremely Slow)",
|
||||
"PE.Views.Animation.str5": "5 s (Very Slow)",
|
||||
"PE.Views.Animation.str3": "3 s (Slow)",
|
||||
"PE.Views.Animation.str2": "2 s (Medium)",
|
||||
"PE.Views.Animation.str1": "1 s (Fast)",
|
||||
"PE.Views.Animation.str0_5": "0.5 s (Very Fast)",
|
||||
"PE.Views.AnimationDialog.textPreviewEffect": "Preview Effect",
|
||||
"PE.Views.AnimationDialog.textTitle": "More Effects",
|
||||
"PE.Views.ChartSettings.textAdvanced": "Show advanced settings",
|
||||
|
|
|
|||
Loading…
Reference in a new issue