Merge pull request #2937 from ONLYOFFICE/feature/anim-pane

Feature/anim pane

apps/presentationeditor/main/app/controller/Animation.js

@@ -112,6 +112,7 @@ define([
             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)
+            this.api.asc_registerCallback('asc_onCloseAnimPane',        _.bind(this.onCloseAnimPane, this));
             return this;
         },
 
@@ -172,7 +173,12 @@ define([
             this.addNewEffect(this._state.Effect, this._state.EffectGroup, groupName,true, this._state.EffectOption, undefined, color);
         },
 
-        onAnimationPane: function() {
+        onAnimationPane: function(btn) {
+            this.api.asc_ShowAnimPane(btn.pressed);
+        },
+
+        onCloseAnimPane: function () {
+            this.view.btnAnimationPane.toggle(false, true);
         },
 
         onAnimationAdditional: function(replace) { // replace or add new additional effect

apps/presentationeditor/main/app/controller/DocumentHolder.js

@@ -457,6 +457,8 @@ define([
             view.mnuRulers.on('click', _.bind(me.onRulersClick, me));
             view.menuTableEquationSettings.menu.on('item:click', _.bind(me.convertEquation, me));
             view.menuParagraphEquation.menu.on('item:click', _.bind(me.convertEquation, me));
+            view.timelineZoomMenu.on('item:click', _.bind(me.onTimelineZoom, me));
+            view.animEffectMenu.on('item:click', _.bind(me.onAnimEffect, me));
         },
 
         getView: function (name) {
@@ -490,6 +492,16 @@ define([
                     menu.cmpEl.attr({tabindex: "-1"});
                 }
 
+                if (event.get_Type() == Asc.c_oAscContextMenuTypes.AnimEffect) {
+                    showPoint[0] += event.get_ButtonWidth() + 2;
+                    showPoint[1] += event.get_ButtonHeight() + 2;
+                    menu.menuAlign = 'tr-br';
+                    if (me.documentHolder.cmpEl.offset().top + showPoint[1] + menu.menuRoot.outerHeight() > Common.Utils.innerHeight() - 10) {
+                        showPoint[1] -= event.get_ButtonHeight() + 4;
+                        menu.menuAlign = 'br-tr';
+                    }
+                }
+
                 menuContainer.css({
                     left: showPoint[0],
                     top : showPoint[1]
@@ -624,6 +636,10 @@ define([
             _.delay(function(){
                 if (event.get_Type() == Asc.c_oAscContextMenuTypes.Thumbnails) {
                     me.showPopupMenu.call(me, (me.mode.isEdit && !me._isDisabled) ? me.documentHolder.slideMenu : me.documentHolder.viewModeMenuSlide, {isSlideSelect: event.get_IsSlideSelect(), isSlideHidden: event.get_IsSlideHidden(), fromThumbs: true}, event);
+                } else if (event.get_Type() == Asc.c_oAscContextMenuTypes.TimelineZoom) {
+                    me.showPopupMenu.call(me, me.documentHolder.timelineZoomMenu, undefined, event);
+                } else if (event.get_Type() == Asc.c_oAscContextMenuTypes.AnimEffect) {
+                    me.showPopupMenu.call(me, me.documentHolder.animEffectMenu, {effect: event.get_EffectStartType()}, event);
                 } else {
                     me.showObjectMenu.call(me, event);
                 }
@@ -894,7 +910,7 @@ define([
                 var showPoint, ToolTip = '',
                     type = moveData.get_Type();
 
-                if (type===Asc.c_oAscMouseMoveDataTypes.Hyperlink || type===Asc.c_oAscMouseMoveDataTypes.Placeholder) {
+                if (type===Asc.c_oAscMouseMoveDataTypes.Hyperlink || type===Asc.c_oAscMouseMoveDataTypes.Placeholder || type===Asc.c_oAscMouseMoveDataTypes.EffectInfo) {
                     if (me.isTooltipHiding) {
                         me.mouseMoveData = moveData;
                         return;
@@ -931,6 +947,8 @@ define([
                                 ToolTip = me.documentHolder.txtInsSmartArt;
                                 break;
                         }
+                    } else if (type===Asc.c_oAscMouseMoveDataTypes.EffectInfo) {
+                        ToolTip = moveData.get_Info();
                     }
                     var recalc = false;
                     screenTip.isHidden = false;
@@ -2744,6 +2762,22 @@ define([
 
         editComplete: function() {
             this.documentHolder && this.documentHolder.fireEvent('editcomplete', this.documentHolder);
+        },
+
+        onTimelineZoom: function (menu, item) {
+            if (item.value === 'zoom-in') {
+                this.api.asc_ZoomInTimeline();
+            } else {
+                this.api.asc_ZoomOutTimeline();
+            }
+        },
+
+        onAnimEffect: function (menu, item) {
+            if (item.value === 'remove') {
+                this.api.asc_RemoveSelectedAnimEffects();
+            } else {
+                this.api.asc_SetSelectedAnimEffectsStartType(item.value);
+            }
         }
     });
 });

apps/presentationeditor/main/app/template/Toolbar.template

@@ -254,6 +254,10 @@
                         <div class="btn-slot text" id="animation-movelater"></div>
                     </div>
                 </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                    <span class="btn-slot text x-huge" id="animation-button-pane"></span>
+                </div>
             </section>
         </section>
     </section>

apps/presentationeditor/main/app/view/Animation.js

@@ -272,14 +272,14 @@ define([
                 this.lockedControls.push(this.btnParameters);
 
                 this.btnAnimationPane = new Common.UI.Button({
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                     caption: this.txtAnimationPane,
-                    split: true,
-                    iconCls: 'toolbar__icon btn-transition-apply-all',
+                    iconCls: 'toolbar__icon icon btn-animation-panel',
                     lock: [_set.slideDeleted, _set.noSlides, _set.timingLock],
+                    enableToggle: true,
                     dataHint: '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'medium'
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.btnAnimationPane);
 
@@ -484,6 +484,14 @@ define([
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function() {
+                    me.btnPreview.updateHint(me.txtPreview);
+                    me.btnParameters.updateHint(me.txtParameters);
+                    me.btnAnimationPane.updateHint(me.txtAnimationPane);
+                    me.btnAddAnimation.updateHint(me.txtAddEffect);
+                    me.cmbTrigger.updateHint(me.strTrigger);
+                    me.btnMoveEarlier.updateHint(me.textMoveEarlier);
+                    me.btnMoveLater.updateHint(me.textMoveLater);
+
                     me.btnAddAnimation.setMenu( new Common.UI.Menu({
                         style: 'width: 375px;padding-top: 12px;',
                         items: [

apps/presentationeditor/main/app/view/DocumentHolder.js

@@ -2418,6 +2418,87 @@ define([
                 if (!isFromInputControl) me.fireEvent('editcomplete', me);
             });
 
+            me.menuAnimZoomIn = new Common.UI.MenuItem({
+                caption: me.textZoomIn,
+                value: 'zoom-in'
+            });
+
+            me.menuAnimZoomOut = new Common.UI.MenuItem({
+                caption: me.textZoomOut,
+                value: 'zoom-out'
+            });
+
+            me.timelineZoomMenu = new Common.UI.Menu({
+                restoreHeightAndTop: true,
+                scrollToCheckedItem: false,
+                menuAlign: 'bl-tl',
+                style: 'min-width: auto;',
+                items: [
+                    me.menuAnimZoomIn,
+                    me.menuAnimZoomOut
+                ]
+            }).on('hide:after', function(menu, e, isFromInputControl) {
+                me.clearCustomItems(menu);
+                me.currentMenu = null;
+                if (me.suppressEditComplete) {
+                    me.suppressEditComplete = false;
+                    return;
+                }
+
+                if (!isFromInputControl) me.fireEvent('editcomplete', me);
+            });
+
+            me.menuAnimStartOnClick = new Common.UI.MenuItem({
+                caption: me.textStartOnClick,
+                checkable: true,
+                value: AscFormat.NODE_TYPE_CLICKEFFECT
+            });
+
+            me.menuAnimStartWithPrevious = new Common.UI.MenuItem({
+                caption: me.textStartWithPrevious,
+                checkable: true,
+                value: AscFormat.NODE_TYPE_WITHEFFECT
+            });
+
+            me.menuAnimStartAfterPrevious = new Common.UI.MenuItem({
+                caption: me.textStartAfterPrevious,
+                checkable: true,
+                value: AscFormat.NODE_TYPE_AFTEREFFECT
+            });
+
+            me.menuAnimRemove = new Common.UI.MenuItem({
+                caption: me.textRemove,
+                value: 'remove'
+            });
+
+            me.animEffectMenu = new Common.UI.Menu({
+                restoreHeightAndTop: true,
+                scrollToCheckedItem: false,
+                menuAlign: 'tr-br',
+                style: 'min-width: auto;',
+                initMenu: function(value){
+                    me.menuAnimStartOnClick.setChecked(value.effect === AscFormat.NODE_TYPE_CLICKEFFECT, true);
+                    me.menuAnimStartWithPrevious.setChecked(value.effect === AscFormat.NODE_TYPE_WITHEFFECT, true);
+                    me.menuAnimStartAfterPrevious.setChecked(value.effect === AscFormat.NODE_TYPE_AFTEREFFECT, true);
+                },
+                items: [
+                    me.menuAnimStartOnClick,
+                    me.menuAnimStartWithPrevious,
+                    me.menuAnimStartAfterPrevious,
+                    {caption: '--'},
+                    me.menuAnimRemove
+                ]
+            }).on('hide:after', function(menu, e, isFromInputControl) {
+                me.clearCustomItems(menu);
+                me.currentMenu = null;
+                if (me.suppressEditComplete) {
+                    me.suppressEditComplete = false;
+                    return;
+                }
+
+                if (!isFromInputControl) me.fireEvent('editcomplete', me);
+            });
+
             var nextpage = $('#id_buttonNextPage');
             nextpage.attr('data-toggle', 'tooltip');
             nextpage.tooltip({
@@ -2863,7 +2944,13 @@ define([
         txtInsTable: 'Insert table',
         txtInsVideo: 'Insert video',
         txtInsAudio: 'Insert audio',
-        txtInsSmartArt: 'Insert SmartArt'
+        txtInsSmartArt: 'Insert SmartArt',
+        textZoomIn: 'Zoom In',
+        textZoomOut: 'Zoom Out',
+        textStartOnClick: 'Start On Click',
+        textStartWithPrevious: 'Start With Previous',
+        textStartAfterPrevious: 'Start After Previous',
+        textRemove: 'Remove'
 
     }, PE.Views.DocumentHolder || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1893,6 +1893,12 @@
   "PE.Views.DocumentHolder.txtWarnUrl": "Clicking this link can be harmful to your device and data.<br>Are you sure you want to continue?",
   "PE.Views.DocumentHolder.unicodeText": "Unicode",
   "PE.Views.DocumentHolder.vertAlignText": "Vertical alignment",
+  "PE.Views.DocumentHolder.textZoomIn": "Zoom In",
+  "PE.Views.DocumentHolder.textZoomOut": "Zoom Out",
+  "PE.Views.DocumentHolder.textStartOnClick": "Start On Click",
+  "PE.Views.DocumentHolder.textStartWithPrevious": "Start With Previous",
+  "PE.Views.DocumentHolder.textStartAfterPrevious": "Start After Previous",
+  "PE.Views.DocumentHolder.textRemove": "Remove",
   "PE.Views.DocumentPreview.goToSlideText": "Go to slide",
   "PE.Views.DocumentPreview.slideIndexText": "Slide {0} of {1}",
   "PE.Views.DocumentPreview.txtClose": "Close slideshow",