[PE] Make animation pane

ONLYOFFICE · Apr 1, 2024 · 5eaf955 · 5eaf955
1 parent ba42d38
commit 5eaf955
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 7 deletions.
diff --git a/apps/presentationeditor/main/app/controller/DocumentHolder.js b/apps/presentationeditor/main/app/controller/DocumentHolder.js
@@ -457,6 +457,7 @@ 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));
         },
 
         getView: function (name) {
@@ -624,6 +625,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, {}, event);
                 } else {
                     me.showObjectMenu.call(me, event);
                 }
@@ -894,7 +899,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 || Asc.c_oAscMouseMoveDataTypes.EffectInfo) {
                     if (me.isTooltipHiding) {
                         me.mouseMoveData = moveData;
                         return;
@@ -931,6 +936,9 @@ define([
                                 ToolTip = me.documentHolder.txtInsSmartArt;
                                 break;
                         }
+                    } else if (type===Asc.c_oAscMouseMoveDataTypes.EffectInfo) {
+                        //ToolTip = moveData.get_Info();
+                        ToolTip = moveData.Info;
                     }
                     var recalc = false;
                     screenTip.isHidden = false;
@@ -2744,6 +2752,14 @@ 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();
+            }
         }
     });
 });
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/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>

diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js
@@ -272,14 +272,13 @@ 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',
                     lock: [_set.slideDeleted, _set.noSlides, _set.timingLock],
                     dataHint: '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'medium'
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.btnAnimationPane);
 

diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js
@@ -2418,6 +2418,79 @@ 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',
+                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
+            });
+
+            me.menuAnimStartWithPrevious = new Common.UI.MenuItem({
+                caption: me.textStartWithPrevious,
+                checkable: true
+            });
+
+            me.menuAnimStartAfterPrevious = new Common.UI.MenuItem({
+                caption: me.textStartAfterPrevious,
+                checkable: true
+            });
+
+            me.menuAnimRemove = new Common.UI.MenuItem({
+                caption: me.textRemove
+            });
+
+            me.animEffectMenu = new Common.UI.Menu({
+                restoreHeightAndTop: true,
+                scrollToCheckedItem: false,
+                menuAlign: 'tl-bl',
+                initMenu: function(value){
+
+                },
+                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 +2936,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 || {}));
 });