2021-10-15 01:15:43 +00:00
/ *
*
* ( 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 20 A - 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
*
* View
*
* Created by Olga . Sharova on 13.10 . 21
* Copyright ( c ) 2021 Ascensio System SIA . All rights reserved .
*
* /
define ( [
'common/main/lib/util/utils' ,
'common/main/lib/component/Button' ,
'common/main/lib/component/DataView' ,
'common/main/lib/component/ComboDataView' ,
'common/main/lib/component/Layout' ,
'presentationeditor/main/app/view/SlideSettings' ,
'common/main/lib/component/MetricSpinner' ,
'common/main/lib/component/Window'
] , function ( ) {
'use strict' ;
PE . Views . Animation = Common . UI . BaseView . extend ( _ . extend ( ( function ( ) {
function setEvents ( ) {
var me = this ;
if ( me . listEffects ) {
me . listEffects . on ( 'click' , _ . bind ( function ( combo , record ) {
me . fireEvent ( 'animation:selecteffect' , [ combo , record ] ) ;
} , me ) ) ;
2021-12-06 22:13:24 +00:00
me . listEffectsMore . on ( 'click' , _ . bind ( function ( ) {
2021-12-23 10:53:47 +00:00
me . fireEvent ( 'animation:additional' , [ me . listEffects . menuPicker . getSelectedRec ( ) . get ( 'value' ) != AscFormat . ANIM _PRESET _NONE ] ) ; // replace effect
2021-12-06 22:13:24 +00:00
} , me ) ) ;
2021-10-15 01:15:43 +00:00
}
2021-12-10 18:39:27 +00:00
2021-12-07 08:36:30 +00:00
me . btnAddAnimation && me . btnAddAnimation . menu . on ( 'item:click' , function ( menu , item , e ) {
( item . value == 'more' ) && me . fireEvent ( 'animation:additional' , [ false ] ) ; // add effect
} ) ;
2021-12-10 18:39:27 +00:00
2021-10-15 01:15:43 +00:00
if ( me . btnPreview ) {
me . btnPreview . on ( 'click' , _ . bind ( function ( btn ) {
me . fireEvent ( 'animation:preview' , [ me . btnPreview ] ) ;
} , me ) ) ;
}
2021-12-07 05:40:03 +00:00
if ( me . cmbTrigger )
{
me . cmbTrigger . menu . on ( 'item:click' , _ . bind ( function ( menu , item , e ) {
me . fireEvent ( 'animation:trigger' , [ item ] ) ;
} , me ) ) ;
me . btnClickOf . menu . on ( 'item:click' , _ . bind ( function ( menu , item , e ) {
me . fireEvent ( 'animation:triggerclickof' , [ item ] ) ;
} , me ) ) ;
}
2021-10-15 01:15:43 +00:00
if ( me . btnParameters ) {
me . btnParameters . menu . on ( 'item:click' , function ( menu , item , e ) {
2021-10-24 00:14:52 +00:00
me . fireEvent ( 'animation:parameters' , [ item . value ] ) ;
2021-10-15 01:15:43 +00:00
} ) ;
}
if ( me . btnAnimationPane ) {
me . btnAnimationPane . on ( 'click' , _ . bind ( function ( btn ) {
me . fireEvent ( 'animation:animationpane' , [ me . btnAnimationPane ] ) ;
} , me ) ) ;
}
2022-01-17 23:55:01 +00:00
if ( me . cmbDuration ) {
2022-01-19 18:34:20 +00:00
me . cmbDuration . on ( 'changed:before' , function ( combo , record , e ) {
me . fireEvent ( 'animation:durationchange' , [ true , combo , record , e ] ) ;
2022-01-17 23:55:01 +00:00
} , me ) ;
2022-01-19 18:34:20 +00:00
me . cmbDuration . on ( 'changed:after' , function ( combo , record , e ) {
me . fireEvent ( 'animation:durationchange' , [ false , combo , record , e ] ) ;
2022-01-17 23:55:01 +00:00
} , 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 ] ) ;
2021-10-15 01:15:43 +00:00
} , me ) ;
}
if ( me . numDelay ) {
me . numDelay . on ( 'change' , function ( bth ) {
me . fireEvent ( 'animation:delay' , [ me . numDelay ] ) ;
} , me ) ;
}
if ( me . cmbStart ) {
me . cmbStart . on ( 'selected' , function ( combo , record )
{
me . fireEvent ( 'animation:startselect' , [ combo , record ] )
2021-12-01 05:08:41 +00:00
} ) ;
2021-10-15 01:15:43 +00:00
}
2022-01-12 01:32:04 +00:00
if ( me . cmbRepeat ) {
2022-01-19 18:34:20 +00:00
me . cmbRepeat . on ( 'changed:before' , function ( combo , record , e ) {
me . fireEvent ( 'animation:repeatchange' , [ true , combo , record , e ] ) ;
2022-01-12 01:32:04 +00:00
} , me ) ;
2022-01-19 18:34:20 +00:00
me . cmbRepeat . on ( 'changed:after' , function ( combo , record , e ) {
me . fireEvent ( 'animation:repeatchange' , [ false , combo , record , e ] ) ;
2022-01-12 01:32:04 +00:00
} , me ) ;
me . cmbRepeat . on ( 'selected' , function ( combo , record ) {
me . fireEvent ( 'animation:repeatselected' , [ combo , record ] ) ;
} , me ) ;
2022-01-13 02:33:27 +00:00
me . cmbRepeat . on ( 'show:after' , function ( combo ) {
2022-01-13 14:44:20 +00:00
me . fireEvent ( 'animation:repeatfocusin' , [ true , combo ] ) ;
2022-01-12 01:32:04 +00:00
} , me ) ;
2022-01-13 02:33:27 +00:00
me . cmbRepeat . on ( 'combo:focusin' , function ( combo ) {
me . fireEvent ( 'animation:repeatfocusin' , [ false , combo ] ) ;
2021-10-24 00:14:52 +00:00
} , me ) ;
}
2021-11-29 08:40:47 +00:00
if ( me . chRewind ) {
me . chRewind . on ( 'change' , _ . bind ( function ( e ) {
me . fireEvent ( 'animation:checkrewind' , [ me . chRewind , me . chRewind . value , me . chRewind . lastValue ] ) ;
} , me ) ) ;
}
2021-12-10 18:39:27 +00:00
me . btnMoveEarlier && me . btnMoveEarlier . on ( 'click' , _ . bind ( function ( btn ) {
me . fireEvent ( 'animation:moveearlier' , [ me . btnMoveEarlier ] ) ;
} , me ) ) ;
me . btnMoveLater && me . btnMoveLater . on ( 'click' , _ . bind ( function ( btn ) {
me . fireEvent ( 'animation:movelater' , [ me . btnMoveLater ] ) ;
} , me ) ) ;
2021-10-15 01:15:43 +00:00
}
return {
// el: '#transitions-panel',
options : { } ,
initialize : function ( options ) {
2021-12-07 05:40:03 +00:00
this . triggers = {
ClickSequence : 0 ,
ClickOf : 1
}
2021-12-17 14:53:49 +00:00
this . allEffects = [ { group : 'none' , value : AscFormat . ANIM _PRESET _NONE , iconCls : 'animation-none' , displayValue : this . textNone } ] . concat ( Common . define . effectData . getEffectFullData ( ) ) ;
2021-10-15 01:15:43 +00:00
Common . UI . BaseView . prototype . initialize . call ( this , options ) ;
this . toolbar = options . toolbar ;
this . appConfig = options . mode ;
this . $el = this . toolbar . toolbar . $el . find ( '#animation-panel' ) ;
var _set = PE . enumLock ;
this . lockedControls = [ ] ;
2021-12-17 14:53:49 +00:00
this . _arrEffectName = [ { group : 'none' , value : AscFormat . ANIM _PRESET _NONE , iconCls : 'animation-none' , displayValue : this . textNone } ] . concat ( Common . define . effectData . getEffectData ( ) ) ;
2021-12-23 10:53:47 +00:00
_ . forEach ( this . _arrEffectName , function ( elm ) { elm . tip = elm . displayValue ; } ) ;
2021-11-22 08:54:14 +00:00
this . _arrEffectOptions = [ ] ;
2022-01-13 11:38:22 +00:00
var itemWidth = 88 ,
2021-12-02 21:41:39 +00:00
itemHeight = 40 ;
2021-12-06 22:13:24 +00:00
this . listEffectsMore = new Common . UI . MenuItem ( {
caption : this . textMoreEffects
} ) ;
2021-10-15 01:15:43 +00:00
this . listEffects = new Common . UI . ComboDataView ( {
2021-12-06 21:46:00 +00:00
cls : 'combo-transitions combo-animation' ,
2021-12-02 21:41:39 +00:00
itemWidth : itemWidth ,
itemHeight : itemHeight ,
itemTemplate : _ . template ( [
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">' ,
'<div class = "icon toolbar__icon <%= iconCls %>"></div>' ,
'<div class = "caption"><%= displayValue %></div>' ,
'</div>'
] . join ( '' ) ) ,
groups : new Common . UI . DataViewGroupStore ( [ { id : 'none' , value : - 10 , caption : this . textNone } ] . concat ( Common . define . effectData . getEffectGroupData ( ) ) ) ,
store : new Common . UI . DataViewStore ( this . _arrEffectName ) ,
2021-12-08 22:26:38 +00:00
additionalMenuItems : [ { caption : '--' } , this . listEffectsMore ] ,
2021-10-15 01:15:43 +00:00
enableKeyEvents : true ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
dataHintDirection : 'bottom' ,
dataHintOffset : '-16, 0' ,
2021-12-23 20:23:05 +00:00
delayRenderTips : true ,
2021-10-15 01:15:43 +00:00
beforeOpenHandler : function ( e ) {
var cmp = this ,
menu = cmp . openButton . menu ;
if ( menu . cmpEl ) {
menu . menuAlignEl = cmp . cmpEl ;
menu . menuAlign = 'tl-tl' ;
menu . cmpEl . css ( {
'width' : cmp . cmpEl . width ( ) - cmp . openButton . $el . width ( ) ,
'min-height' : cmp . cmpEl . height ( )
} ) ;
}
if ( cmp . menuPicker . scroller ) {
cmp . menuPicker . scroller . update ( {
includePadding : true ,
suppressScrollX : true
} ) ;
}
cmp . removeTips ( ) ;
}
} ) ;
this . lockedControls . push ( this . listEffects ) ;
this . btnPreview = new Common . UI . Button ( {
2021-12-10 05:24:06 +00:00
cls : 'btn-toolbar x-huge icon-top' , // x-huge icon-top',
2021-10-15 01:15:43 +00:00
caption : this . txtPreview ,
split : false ,
2022-01-20 15:39:25 +00:00
iconCls : 'toolbar__icon animation-preview' ,
2021-12-17 10:24:50 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noAnimationPreview ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
2021-12-23 12:53:38 +00:00
dataHintDirection : 'bottom' ,
dataHintOffset : 'small'
2021-10-15 01:15:43 +00:00
} ) ;
this . lockedControls . push ( this . btnPreview ) ;
this . btnParameters = new Common . UI . Button ( {
cls : 'btn-toolbar x-huge icon-top' ,
caption : this . txtParameters ,
2022-01-20 15:39:25 +00:00
iconCls : 'toolbar__icon icon animation-none' ,
2021-11-22 08:54:14 +00:00
menu : new Common . UI . Menu ( { items : [ ] } ) ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation , _set . noAnimationParam ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
dataHintDirection : 'bottom' ,
dataHintOffset : 'small'
} ) ;
this . lockedControls . push ( this . btnParameters ) ;
this . btnAnimationPane = new Common . UI . Button ( {
cls : 'btn-toolbar' ,
caption : this . txtAnimationPane ,
split : true ,
iconCls : 'toolbar__icon transition-apply-all' ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
dataHintDirection : 'left' ,
dataHintOffset : 'medium'
} ) ;
this . lockedControls . push ( this . btnAnimationPane ) ;
2021-10-24 00:14:52 +00:00
this . btnAddAnimation = new Common . UI . Button ( {
2021-10-29 01:15:38 +00:00
cls : 'btn-toolbar x-huge icon-top' ,
2021-10-15 01:15:43 +00:00
caption : this . txtAddEffect ,
2022-01-20 15:39:25 +00:00
iconCls : 'toolbar__icon icon add-animation' ,
2021-10-29 01:15:38 +00:00
menu : true ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
2021-10-29 01:15:38 +00:00
dataHintDirection : 'bottom' ,
dataHintOffset : 'small'
2021-10-15 01:15:43 +00:00
} ) ;
2021-12-03 03:46:24 +00:00
2021-10-24 00:14:52 +00:00
this . lockedControls . push ( this . btnAddAnimation ) ;
2021-10-15 01:15:43 +00:00
2022-01-17 23:55:01 +00:00
this . cmbDuration = new Common . UI . ComboBox ( {
2021-10-15 01:15:43 +00:00
el : this . $el . find ( '#animation-spin-duration' ) ,
2022-01-17 23:55:01 +00:00
cls : 'input-group-nr' ,
menuStyle : 'min-width: 100%;' ,
editable : true ,
data : [
2022-01-19 18:34:20 +00:00
{ 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 }
2022-01-17 23:55:01 +00:00
] ,
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation , _set . noAnimationDuration ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
dataHintDirection : 'top' ,
dataHintOffset : 'small'
} ) ;
2022-01-17 23:55:01 +00:00
this . lockedControls . push ( this . cmbDuration ) ;
2021-10-15 01:15:43 +00:00
2021-12-07 05:40:03 +00:00
this . cmbTrigger = new Common . UI . Button ( {
2021-12-09 01:10:01 +00:00
parentEl : $ ( '#animation-trigger' ) ,
cls : 'btn-toolbar' ,
2022-01-20 15:39:25 +00:00
iconCls : 'toolbar__icon btn-trigger' ,
2021-12-09 01:10:01 +00:00
caption : this . strTrigger ,
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation , _set . noTriggerObjects ] ,
menu : new Common . UI . Menu ( {
items : [
{
caption : this . textOnClickSequence ,
checkable : true ,
toggleGroup : 'animtrigger' ,
value : this . triggers . ClickSequence
} ,
{
value : this . triggers . ClickOf ,
caption : this . textOnClickOf ,
menu : new Common . UI . Menu ( {
2021-12-10 18:39:27 +00:00
menuAlign : 'tl-tr' ,
2021-12-09 01:10:01 +00:00
items : [ ]
} )
} ]
} ) ,
dataHint : '1' ,
dataHintDirection : 'left' ,
dataHintOffset : 'medium'
} ) ;
2021-10-29 01:15:38 +00:00
this . lockedControls . push ( this . cmbTrigger ) ;
2021-12-07 05:40:03 +00:00
this . btnClickOf = this . cmbTrigger . menu . items [ 1 ] ;
2021-10-29 01:15:38 +00:00
2021-10-15 01:15:43 +00:00
this . numDelay = new Common . UI . MetricSpinner ( {
el : this . $el . find ( '#animation-spin-delay' ) ,
step : 1 ,
2021-12-23 10:53:47 +00:00
width : 55 ,
2021-10-15 01:15:43 +00:00
value : '' ,
defaultUnit : this . txtSec ,
maxValue : 300 ,
minValue : 0 ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation ] ,
2021-10-15 01:15:43 +00:00
dataHint : '1' ,
dataHintDirection : 'bottom' ,
dataHintOffset : 'big'
} ) ;
this . lockedControls . push ( this . numDelay ) ;
this . cmbStart = new Common . UI . ComboBox ( {
cls : 'input-group-nr' ,
2021-12-23 10:53:47 +00:00
menuStyle : 'min-width: 100%;' ,
editable : false ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation ] ,
2021-10-15 01:15:43 +00:00
data : [
2021-11-29 08:40:47 +00:00
{ value : AscFormat . NODE _TYPE _CLICKEFFECT , displayValue : this . textStartOnClick } ,
{ value : AscFormat . NODE _TYPE _WITHEFFECT , displayValue : this . textStartWithPrevious } ,
{ value : AscFormat . NODE _TYPE _AFTEREFFECT , displayValue : this . textStartAfterPrevious }
2021-10-15 01:15:43 +00:00
] ,
dataHint : '1' ,
2021-12-23 17:10:50 +00:00
dataHintDirection : 'top' ,
dataHintOffset : 'small'
2021-10-15 01:15:43 +00:00
} ) ;
this . lockedControls . push ( this . cmbStart ) ;
2021-10-24 00:14:52 +00:00
this . chRewind = new Common . UI . CheckBox ( {
el : this . $el . find ( '#animation-checkbox-rewind' ) ,
labelText : this . strRewind ,
2021-12-08 22:26:38 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation ] ,
2021-10-24 00:14:52 +00:00
dataHint : '1' ,
dataHintDirection : 'left' ,
dataHintOffset : 'small'
} ) ;
this . lockedControls . push ( this . chRewind ) ;
2022-01-12 01:32:04 +00:00
this . cmbRepeat = new Common . UI . ComboBox ( {
2021-10-24 00:14:52 +00:00
el : this . $el . find ( '#animation-spin-repeat' ) ,
2022-01-12 01:32:04 +00:00
cls : 'input-group-nr' ,
menuStyle : 'min-width: 100%;' ,
editable : true ,
2022-01-17 23:55:01 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation , _set . noAnimationRepeat ] ,
2022-01-12 01:32:04 +00:00
data : [
{ value : 1 , displayValue : this . textNoRepeat } ,
{ value : 2 , displayValue : "2" } ,
{ value : 3 , displayValue : "3" } ,
{ value : 4 , displayValue : "4" } ,
{ value : 5 , displayValue : "5" } ,
{ value : 10 , displayValue : "10" } ,
{ value : AscFormat . untilNextClick , displayValue : this . textUntilNextClick } ,
{ value : AscFormat . untilNextSlide , displayValue : this . textUntilEndOfSlide }
] ,
2021-10-24 00:14:52 +00:00
dataHint : '1' ,
2021-12-23 12:53:38 +00:00
dataHintDirection : 'top' ,
dataHintOffset : 'small'
2021-10-24 00:14:52 +00:00
} ) ;
2022-01-12 01:32:04 +00:00
this . lockedControls . push ( this . cmbRepeat ) ;
2021-10-29 01:15:38 +00:00
2021-12-10 18:39:27 +00:00
this . btnMoveEarlier = new Common . UI . Button ( {
parentEl : $ ( '#animation-moveearlier' ) ,
cls : 'btn-toolbar' ,
iconCls : 'toolbar__icon btn-arrow-up' ,
style : 'min-width: 82px' ,
caption : this . textMoveEarlier ,
2021-12-17 00:30:16 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation , _set . noTriggerObjects , _set . noMoveAnimationEarlier ] ,
2021-12-10 18:39:27 +00:00
dataHint : '1' ,
dataHintDirection : 'left' ,
dataHintOffset : 'medium'
} ) ;
this . lockedControls . push ( this . btnMoveEarlier ) ;
this . btnMoveLater = new Common . UI . Button ( {
parentEl : $ ( '#animation-movelater' ) ,
cls : 'btn-toolbar' ,
iconCls : 'toolbar__icon btn-arrow-down' ,
style : 'min-width: 82px' ,
caption : this . textMoveLater ,
2021-12-17 00:30:16 +00:00
lock : [ _set . slideDeleted , _set . noSlides , _set . noGraphic , _set . noAnimation , _set . noTriggerObjects , _set . noMoveAnimationLater ] ,
2021-12-10 18:39:27 +00:00
dataHint : '1' ,
dataHintDirection : 'left' ,
dataHintOffset : 'medium'
} ) ;
this . lockedControls . push ( this . btnMoveLater ) ;
2021-10-15 01:15:43 +00:00
this . $el . find ( '#animation-duration' ) . text ( this . strDuration ) ;
this . $el . find ( '#animation-delay' ) . text ( this . strDelay ) ;
this . $el . find ( '#animation-label-start' ) . text ( this . strStart ) ;
2021-10-24 00:14:52 +00:00
this . $el . find ( '#animation-repeat' ) . text ( this . strRepeat ) ;
2021-10-15 01:15:43 +00:00
Common . NotificationCenter . on ( 'app:ready' , this . onAppReady . bind ( this ) ) ;
} ,
render : function ( el ) {
this . boxSdk = $ ( '#editor_sdk' ) ;
if ( el ) el . html ( this . getPanel ( ) ) ;
return this ;
} ,
onAppReady : function ( config ) {
var me = this ;
( new Promise ( function ( accept , reject ) {
accept ( ) ;
} ) ) . then ( function ( ) {
2021-12-02 22:36:15 +00:00
me . btnAddAnimation . setMenu ( new Common . UI . Menu ( {
2021-12-17 21:16:39 +00:00
style : 'width: 375px;padding-top: 12px;' ,
2021-12-02 22:36:15 +00:00
items : [
2021-12-07 08:36:30 +00:00
{ template : _ . template ( '<div id="id-toolbar-menu-addanimation" class="menu-animation"></div>' ) } ,
{ caption : '--' } ,
{
caption : me . textMoreEffects ,
value : 'more'
}
2021-12-02 22:36:15 +00:00
]
} ) ) ;
2022-01-13 11:38:22 +00:00
var itemWidth = 88 ,
2021-12-02 22:36:15 +00:00
itemHeight = 40 ;
var onShowBefore = function ( menu ) {
var picker = new Common . UI . DataView ( {
el : $ ( '#id-toolbar-menu-addanimation' ) ,
parentMenu : menu ,
2021-12-07 08:36:30 +00:00
outerMenu : { menu : me . btnAddAnimation . menu , index : 0 } ,
2021-12-02 22:36:15 +00:00
showLast : false ,
2021-12-07 08:36:30 +00:00
restoreHeight : 300 ,
style : 'max-height: 300px;' ,
scrollAlwaysVisible : true ,
2021-12-02 22:36:15 +00:00
groups : new Common . UI . DataViewGroupStore ( Common . define . effectData . getEffectGroupData ( ) ) ,
store : new Common . UI . DataViewStore ( Common . define . effectData . getEffectData ( ) ) ,
itemTemplate : _ . template ( [
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">' ,
'<div class = "icon toolbar__icon <%= iconCls %>"></div>' ,
'<div class = "caption"><%= displayValue %></div>' ,
'</div>'
] . join ( '' ) )
} ) ;
picker . on ( 'item:click' , function ( picker , item , record , e ) {
if ( record )
me . fireEvent ( 'animation:addanimation' , [ picker , record ] ) ;
} ) ;
menu . off ( 'show:before' , onShowBefore ) ;
2021-12-07 08:36:30 +00:00
me . btnAddAnimation . menu . setInnerMenu ( [ { menu : picker , index : 0 } ] ) ;
2021-12-02 22:36:15 +00:00
} ;
me . btnAddAnimation . menu . on ( 'show:before' , onShowBefore ) ;
2021-12-07 08:36:30 +00:00
setEvents . call ( me ) ;
2021-10-15 01:15:43 +00:00
} ) ;
} ,
getPanel : function ( ) {
this . listEffects && this . listEffects . render ( this . $el . find ( '#animation-field-effects' ) ) ;
this . btnPreview && this . btnPreview . render ( this . $el . find ( '#animation-button-preview' ) ) ;
this . btnParameters && this . btnParameters . render ( this . $el . find ( '#animation-button-parameters' ) ) ;
this . btnAnimationPane && this . btnAnimationPane . render ( this . $el . find ( '#animation-button-pane' ) ) ;
2021-10-24 00:14:52 +00:00
this . btnAddAnimation && this . btnAddAnimation . render ( this . $el . find ( '#animation-button-add-effect' ) ) ;
2021-10-29 01:15:38 +00:00
this . cmbStart && this . cmbStart . render ( this . $el . find ( '#animation-start' ) ) ;
2022-01-17 23:55:01 +00:00
//this.renderComponent('#animation-spin-duration', this.cmbDuration);
2021-10-15 01:15:43 +00:00
this . renderComponent ( '#animation-spin-delay' , this . numDelay ) ;
2022-01-17 23:55:01 +00:00
//this.renderComponent('#animation-spin-repeat', this.cmbRepeat);
2021-10-15 01:15:43 +00:00
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 ;
2021-10-24 00:14:52 +00:00
this . $el . find ( "#animation-repeat" ) . innerText = this . strRepeat ;
2021-10-15 01:15:43 +00:00
return this . $el ;
} ,
2021-10-29 01:15:38 +00:00
renderComponent : function ( compid , obj ) {
2021-10-15 01:15:43 +00:00
var element = this . $el . find ( compid ) ;
element . parent ( ) . append ( obj . el ) ;
} ,
show : function ( ) {
Common . UI . BaseView . prototype . show . call ( this ) ;
this . fireEvent ( 'show' , this ) ;
} ,
getButtons : function ( type ) {
2021-12-08 22:26:38 +00:00
return this . lockedControls ;
2021-10-15 01:15:43 +00:00
} ,
2022-01-20 10:22:41 +00:00
setMenuParameters : function ( effectId , effectGroup , option ) // option = undefined - for add new effect or when selected 2 equal effects with different option (subtype)
2021-10-15 01:15:43 +00:00
{
2021-12-23 12:53:38 +00:00
var arrEffectOptions ;
2021-12-20 16:07:49 +00:00
var effect = _ . findWhere ( this . allEffects , { group : effectGroup , value : effectId } ) ;
2021-12-23 12:53:38 +00:00
if ( effect )
arrEffectOptions = Common . define . effectData . getEffectOptionsData ( effect . group , effect . value ) ;
2021-12-03 03:46:24 +00:00
if ( ! arrEffectOptions ) {
this . btnParameters . menu . removeAll ( ) ;
this . _effectId = effectId
return undefined ;
}
2021-10-15 01:15:43 +00:00
var selectedElement ;
2021-12-03 03:46:24 +00:00
if ( this . _effectId != effectId ) {
this . btnParameters . menu . removeAll ( ) ;
arrEffectOptions . forEach ( function ( opt , index ) {
opt . checkable = true ;
opt . toggleGroup = 'animateeffects' ;
2021-11-22 08:54:14 +00:00
this . btnParameters . menu . addItem ( opt ) ;
2021-12-03 03:46:24 +00:00
( opt . value == option ) && ( selectedElement = this . btnParameters . menu . items [ index ] ) ;
2021-11-22 08:54:14 +00:00
} , this ) ;
}
else {
2022-01-20 10:22:41 +00:00
this . btnParameters . menu . clearAll ( ) ;
2021-12-03 03:46:24 +00:00
this . btnParameters . menu . items . forEach ( function ( opt ) {
( opt . value == option ) && ( selectedElement = opt ) ;
} ) ;
2021-10-15 01:15:43 +00:00
}
2022-01-20 10:22:41 +00:00
selectedElement && selectedElement . setChecked ( true ) ;
2021-12-03 03:46:24 +00:00
this . _effectId = effectId ;
2022-01-20 10:22:41 +00:00
return selectedElement ? selectedElement . value : this . btnParameters . menu . items [ 0 ] . value ;
2021-10-15 01:15:43 +00:00
} ,
txtSec : 's' ,
txtPreview : 'Preview' ,
txtParameters : 'Parameters' ,
txtAnimationPane : 'Animation Pane' ,
2021-10-24 00:14:52 +00:00
txtAddEffect : 'Add animation' ,
2021-10-15 01:15:43 +00:00
strDuration : 'Duration' ,
strDelay : 'Delay' ,
strStart : 'Start' ,
2021-10-24 00:14:52 +00:00
strRewind : 'Rewind' ,
strRepeat : 'Repeat' ,
2021-10-29 01:15:38 +00:00
strTrigger : 'Trigger' ,
2021-10-15 01:15:43 +00:00
textStartOnClick : 'On Click' ,
2021-11-29 08:40:47 +00:00
textStartWithPrevious : 'With Previous' ,
2021-10-15 01:15:43 +00:00
textStartAfterPrevious : 'After Previous' ,
2021-12-07 05:40:03 +00:00
textOnClickSequence : 'On Click Sequence' ,
textOnClickOf : 'On Click of' ,
2021-12-06 22:13:24 +00:00
textNone : 'None' ,
2021-12-08 22:26:38 +00:00
textMultiple : 'Multiple' ,
2021-12-10 18:39:27 +00:00
textMoreEffects : 'Show More Effects' ,
textMoveEarlier : 'Move Earlier' ,
2022-01-12 01:32:04 +00:00
textMoveLater : 'Move Later' ,
textNoRepeat : '(none)' ,
textUntilNextClick : 'Until Next Click' ,
2022-01-19 18:34:20 +00:00
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)'
2021-10-15 01:15:43 +00:00
}
} ( ) ) , PE . Views . Animation || { } ) ) ;
2021-12-06 22:13:24 +00:00
} ) ;