web-apps/apps/presentationeditor/main/app/controller/Animation.js
2022-01-18 02:55:01 +03:00

562 lines
26 KiB
JavaScript

/*
*
* (c) Copyright Ascensio System SIA 2010-2019
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
* street, Riga, Latvia, EU, LV-1050.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* Animation.js
*
* Created by Olga.Animation on 13.10.21
* Copyright (c) 2021 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'jquery',
'underscore',
'backbone',
'presentationeditor/main/app/view/Animation',
'presentationeditor/main/app/view/AnimationDialog'
], function () {
'use strict';
PE.Controllers.Animation = Backbone.Controller.extend(_.extend({
models : [],
collections : [],
views : [
'PE.Views.Animation'
],
options: {
alias: 'Animation'
},
sdkViewName : '#id_main',
initialize: function () {
this.addListeners({
'PE.Views.Animation': {
'animation:preview': _.bind(this.onPreviewClick, this),
'animation:parameters': _.bind(this.onParameterClick, this),
'animation:selecteffect': _.bind(this.onEffectSelect, this),
'animation:delay': _.bind(this.onDelayChange, this),
'animation:animationpane': _.bind(this.onAnimationPane, this),
'animation:addanimation': _.bind(this.onAddAnimation, this),
'animation:startselect': _.bind(this.onStartSelect, this),
'animation:checkrewind': _.bind(this.onCheckRewindChange,this),
'animation:additional': _.bind(this.onAnimationAdditional, this),
'animation:trigger': _.bind(this.onTriggerClick, this),
'animation:triggerclickof': _.bind(this.onTriggerClickOfClick, this),
'animation:moveearlier': _.bind(this.onMoveEarlier, this),
'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:durationchange': _.bind(this.onDurationChange, this),
'animation:durationfocusin': _.bind(this.onRepeatComboOpen, this),
'animation:durationselected': _.bind(this.onDurationSelected, this)
},
'Toolbar': {
'tab:active': _.bind(this.onActiveTab, this)
}
});
},
onLaunch: function () {
this._state = {};
},
setConfig: function (config) {
this.appConfig = config.mode;
this.EffectGroups = Common.define.effectData.getEffectGroupData();
this.view = this.createView('PE.Views.Animation', {
toolbar : config.toolbar,
mode : config.mode
});
return this;
},
setApi: function (api) {
this.api = api;
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onFocusObject, this));
this.api.asc_registerCallback('asc_onCountPages', _.bind(this.onApiCountPages, this));
this.api.asc_registerCallback('asc_onAnimPreviewStarted', _.bind(this.onAnimPreviewStarted, this));
this.api.asc_registerCallback('asc_onAnimPreviewFinished', _.bind(this.onAnimPreviewFinished, this));
this.api.asc_onShowAnimTab(!!this._state.onactivetab)
return this;
},
onApiCountPages: function (count) {
if (this._state.no_slides !== (count<=0)) {
this._state.no_slides = (count<=0);
this.lockToolbar(PE.enumLock.noSlides, this._state.no_slides);
}
},
createToolbarPanel: function() {
return this.view.getPanel();
},
getView: function(name) {
return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name);
},
onPreviewClick: function() {
if (this._state.playPreview)
this.api.asc_StopAnimationPreview();
else
this.api.asc_StartAnimationPreview();
},
onAnimPreviewStarted: function () {
this._state.playPreview = true;
this.view.btnPreview.setIconCls('toolbar__icon transition-zoom');
},
onAnimPreviewFinished: function ()
{
this._state.playPreview = false;
this.view.btnPreview.setIconCls('toolbar__icon transition-fade');
},
onParameterClick: function (value) {
if(this.api && this.AnimationProperties) {
this.AnimationProperties.asc_putSubtype(value);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onAnimationPane: function() {
},
onAnimationAdditional: function(replace) { // replace or add new additional effect
var me = this;
(new PE.Views.AnimationDialog({
api : this.api,
activeEffect : this._state.Effect,
groupValue : this._state.EffectGroup,
handler : function(result, value) {
if (result == 'ok') {
if (me.api) {
me.addNewEffect(value.activeEffect, value.activeGroupValue, value.activeGroup, replace);
}
}
}
})).show();
},
onAddAnimation: function(picker, record) {
var type = record.get('value');
var group = _.findWhere(this.EffectGroups, {id: record.get('group')}).value;
this.addNewEffect(type, group, record.get('group'), false);
},
addNewEffect: function (type, group, groupName, replace) {
if (this._state.Effect == type) return;
var parameter = this.view.setMenuParameters(type, groupName, undefined);
this.api.asc_AddAnimation(group, type, (parameter != undefined)?parameter:0, replace);
this._state.EffectGroup = group;
this._state.Effect = type;
},
onDurationChange: function(before,combo, record, e) {
var value,
me = this;
if(before)
{
var item = combo.store.findWhere({
displayValue: record.value
});
if (!item) {
value = /^\+?(\d*(\.|,).?\d+)$|^\+?(\d+(\.|,)?\d*)$/.exec(record.value);
if (!value) {
value = this._state.Duration;
combo.setRawValue(value);
if(isNaN(record.value)) {
record.value = value;
if(value < 0)
record.displayValue = combo.store.findWhere({value: value}).get('displayValue');
}
return false;
}
}
} else {
value = Common.Utils.String.parseFloat(record.value);
if(!record.displayValue)
value = value > 600 ? 600 :
value < 0 ? 0.01 : value.toFixed(2);
combo.setValue(value);
this.setDuration(value);
}
},
onDurationSelected: function (combo, record) {
this.setDuration(record.value);
},
setDuration: function(valueRecord) {
if (this.api) {
var value = valueRecord < 0 ? valueRecord : valueRecord * 1000;
this.AnimationProperties.asc_putDuration(value);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onDelayChange: function(field, newValue, oldValue, eOpts) {
if (this.api) {
this.AnimationProperties.asc_putDelay(field.getNumberValue() * 1000);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onRepeatChange: function (before,combo, record, e){
var value,
me = this;
if(before)
{
var item = combo.store.findWhere({
displayValue: record.value
});
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');
}
return false;
}
}
} else {
value = Common.Utils.String.parseFloat(record.value);
if(!record.displayValue)
value = value > 9999 ? 9999 :
value < 1 ? 1 : Math.floor((value+0.4)*2)/2;
combo.setValue(value);
this.setRepeat(value);
}
},
onRepeatSelected: function (combo, record) {
this.setRepeat(record.value);
},
setRepeat: function(valueRecord) {
if (this.api) {
var value = valueRecord < 0 ? valueRecord : valueRecord * 1000;
this.AnimationProperties.asc_putRepeatCount(value);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onRepeatComboOpen: function(needfocus, combo) {
_.delay(function() {
var input = $('input', combo.cmpEl).select();
if (needfocus) input.focus();
else if (!combo.isMenuOpen()) input.one('mouseup', function (e) { e.preventDefault(); });
}, 10);
},
onMoveEarlier: function () {
if(this.api) {
this.api.asc_moveAnimationEarlier();
}
},
onMoveLater: function () {
if(this.api) {
this.api.asc_moveAnimationLater();
}
},
onTriggerClick: function (value) {
if(this.api) {
if(value.value == this.view.triggers.ClickSequence) {
this.AnimationProperties.asc_putTriggerClickSequence(true);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
}
},
onTriggerClickOfClick: function (value)
{
if(this.api) {
this.AnimationProperties.asc_putTriggerClickSequence(false);
this.AnimationProperties.asc_putTriggerObjectClick(value.caption);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onEffectSelect: function (combo, record) {
if (this.api) {
var type = record.get('value');
var group = (type != AscFormat.ANIM_PRESET_NONE) ? _.findWhere(this.EffectGroups, {id: record.get('group')}).value : undefined;
this.addNewEffect(type, group, record.get('group'),this._state.Effect != AscFormat.ANIM_PRESET_NONE);
}
},
onStartSelect: function (combo, record) {
if (this.api) {
this.AnimationProperties.asc_putStartType(record.value);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onCheckRewindChange: function (field, newValue, oldValue, eOpts) {
if (this.api && this.AnimationProperties) {
this.AnimationProperties.asc_putRewind(field.getValue() == 'checked');
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
},
onFocusObject: function(selectedObjects) {
this.AnimationProperties = null;
for (var i = 0; i<selectedObjects.length; i++) {
if (selectedObjects[i].get_ObjectType() == Asc.c_oAscTypeSelectElement.Animation) {
this.AnimationProperties = selectedObjects[i].get_ObjectValue();
}
}
if (this._state.onactivetab)
this.setSettings();
},
setSettings: function () {
this._state.noGraphic = this._state.noAnimation = this._state.noAnimationParam = this._state.noTriggerObjects = this._state.noMoveAnimationLater = this._state.noMoveAnimationEarlier = true;
this._state.noAnimationPreview = !this.api.asc_canStartAnimationPreview();
if (this.AnimationProperties) {
this._state.noGraphic = false;
this._state.noMoveAnimationLater = !this.api.asc_canMoveAnimationLater();
this._state.noMoveAnimationEarlier = !this.api.asc_canMoveAnimationEarlier();
var item,
view = this.view,
store = view.listEffects.store,
fieldStore = view.listEffects.fieldPicker.store,
value = this.AnimationProperties.asc_getType(),
group = this.AnimationProperties.asc_getClass();
(value == undefined) && (value = AscFormat.ANIM_PRESET_NONE);
this._state.noAnimation = (value === AscFormat.ANIM_PRESET_NONE);
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) {
var forceFill = false;
if (!item.get('isCustom')) { // remove custom effect from list if not-custom is selected
var rec = store.findWhere({isCustom: true});
forceFill = !!rec;
store.remove(rec);
}
if (this._state.Effect!==AscFormat.ANIM_PRESET_MULTIPLE) { // remove "multiple" item if one effect is selected
var rec = fieldStore.findWhere({value: AscFormat.ANIM_PRESET_MULTIPLE});
forceFill = forceFill || !!rec;
fieldStore.remove(rec);
}
view.listEffects.selectRecord(item);
view.listEffects.fillComboView(item, true, forceFill);
view.btnParameters.setIconCls('toolbar__icon icon ' + item.get('iconCls'));
} else {
store.remove(store.findWhere({isCustom: true})); // remove custom effects
if (this._state.Effect==AscFormat.ANIM_PRESET_MULTIPLE) { // add and select "multiple" item
view.listEffects.fillComboView(store.at(0), false, true);
fieldStore.remove(fieldStore.at(fieldStore.length-1));
view.listEffects.fieldPicker.selectRecord(fieldStore.add(new Common.UI.DataViewModel({
group: 'none',
value: AscFormat.ANIM_PRESET_MULTIPLE,
iconCls: 'animation-multiple',
displayValue: view.textMultiple
}), {at:1}));
view.listEffects.menuPicker.deselectAll();
} else { // add custom effect to appropriate group
if (group) {
var items = store.where({group: group.get('id')});
var index = (items && items.length>0) ? store.indexOf(items.at(items.length-1)) : store.length-1;
var rec = _.findWhere(Common.define.effectData.getEffectFullData(), {group: group.get('id'), value: this._state.Effect});
item = store.add(new Common.UI.DataViewModel({
group: group.get('id'),
value: this._state.Effect,
iconCls: group.get('iconClsCustom'),
displayValue: rec ? rec.displayValue : '',
isCustom: true
}), {at:index+1});
view.listEffects.selectRecord(item);
view.listEffects.fillComboView(item, true, true);
view.btnParameters.setIconCls('toolbar__icon icon ' + item.get('iconCls'));
} else {
view.listEffects.fieldPicker.deselectAll();
view.listEffects.menuPicker.deselectAll();
}
}
}
}
this._state.EffectOption = this.AnimationProperties.asc_getSubtype();
if (this._state.EffectOption !== undefined && this._state.EffectOption !== null)
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();
this._state.Duration = (value<0) ? value : value/1000;
view.cmbDuration.setValue( this._state.Duration !== undefined ? this._state.Duration : 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) ||
(this._state.Delay === undefined || value === undefined) && (this._state.Delay !== value)) {
this._state.Delay = value;
view.numDelay.setValue((this._state.Delay !== null && this._state.Delay !== undefined) ? this._state.Delay / 1000. : '', true);
}
value =this.AnimationProperties.asc_getRepeatCount();
this._state.Repeat = (value<0) ? value : value/1000;
view.cmbRepeat.setValue( this._state.Repeat !== undefined ? 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);
this._state.Rewind = this.AnimationProperties.asc_getRewind();
view.chRewind.setValue(!!this._state.Rewind, true);
if(this.AnimationProperties.asc_getTriggerClickSequence()) {
this._state.trigger = view.triggers.ClickSequence;
this._state.TriggerValue = true;
} else {
this._state.trigger = view.triggers.ClickOf;
this._state.TriggerValue = this.AnimationProperties.asc_getTriggerObjectClick();
}
this.setTriggerList();
}
this.setLocked();
},
setTriggerList: function (){
var me = this;
this.objectNames = this.api.asc_getCurSlideObjectsNames();
this._state.noTriggerObjects = !this.objectNames || this.objectNames.length<1;
this.view.btnClickOf.menu.removeAll();
var btnMemnu=this.view.btnClickOf.menu;
this.objectNames.forEach(function (item){
btnMemnu.addItem({ caption: item, checkable: true, toggleGroup: 'animtrigger', checked: item===me._state.TriggerValue});
});
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.setData([{value: 20, displayValue: 20},
{value: 5, displayValue: 5},
{value: 3, displayValue: 3},
{value: 2, displayValue: 2},
{value: 1, displayValue: 1},
{value: 0.5, displayValue: 0.5},
{value: AscFormat.untilNextClick, displayValue: this.view.textUntilNextClick},
{value: AscFormat.untilNextSlide, displayValue: this.view.textUntilEndOfSlide}]);
}
}
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.setData([{value: 20, displayValue: 20},
{value: 5, displayValue: 5},
{value: 3, displayValue: 3},
{value: 2, displayValue: 2},
{value: 1, displayValue: 1},
{value: 0.5, displayValue: 0.5}]);
}
},
onActiveTab: function(tab) {
if (tab == 'animate') {
this._state.onactivetab = true;
this.setSettings();
}
else this._state.onactivetab = false;
this.api && this.api.asc_onShowAnimTab(!!this._state.onactivetab);
},
lockToolbar: function (causes, lock, opts) {
Common.Utils.lockControls(causes, lock, opts, this.view.lockedControls);
},
setLocked: function() {
if (this._state.noGraphic != undefined)
this.lockToolbar(PE.enumLock.noGraphic, this._state.noGraphic);
if (this._state.noAnimation != undefined)
this.lockToolbar(PE.enumLock.noAnimation, this._state.noAnimation);
if (this._state.noAnimationParam != undefined)
this.lockToolbar(PE.enumLock.noAnimationParam, this._state.noAnimationParam);
if (this._state.noTriggerObjects != undefined)
this.lockToolbar(PE.enumLock.noTriggerObjects, this._state.noTriggerObjects);
if (this._state.noMoveAnimationLater != undefined)
this.lockToolbar(PE.enumLock.noMoveAnimationLater, this._state.noMoveAnimationLater);
if (this._state.noMoveAnimationEarlier != undefined)
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 || {}));
});