From bf8c9f1941476ffe6d4f5d576c699fad46449ca0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 13 Dec 2016 17:13:54 +0300 Subject: [PATCH] [PE mobile] Edit slide transition. --- .../mobile/app/controller/edit/EditSlide.js | 155 ++++++++++++- .../mobile/app/template/EditSlide.template | 219 +++++++++++++++--- .../mobile/app/view/edit/EditSlide.js | 155 ++++++++++++- 3 files changed, 489 insertions(+), 40 deletions(-) diff --git a/apps/presentationeditor/mobile/app/controller/edit/EditSlide.js b/apps/presentationeditor/mobile/app/controller/edit/EditSlide.js index 4a13077ea..cc5ef5e9b 100644 --- a/apps/presentationeditor/mobile/app/controller/edit/EditSlide.js +++ b/apps/presentationeditor/mobile/app/controller/edit/EditSlide.js @@ -51,7 +51,11 @@ define([ var _stack = [], _slideObject = undefined, _themes = [], - _themeId = -1; + _themeId = -1, + _effect = Asc.c_oAscSlideTransitionTypes.None, + _effectType = -1, + _effectDuration = 2000, + _effectDelay = 10000; return { models: [], @@ -69,6 +73,11 @@ define([ 'page:show': this.onPageShow } }); + + var me = this; + uiApp.onPageBack('editslide-effect-type editslide-effect', function (page) { + me.initSettings('#edit-slide-transition'); + }); }, setApi: function (api) { @@ -115,6 +124,23 @@ define([ $('.container-edit .slide-theme .row div').removeClass('active').single('click', _.buffered(me.onThemeClick, 100, me)); $('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active'); + } else if (pageId == '#edit-slide-transition') { + me._initTransitionView(); + $('#slide-apply-all').single('click', _.bind(me.onApplyAll, me)); + + $('#edit-slide-duration .button').single('click', _.bind(me.onDuration, me)); + $('#edit-slide-start-click input:checkbox').single('change', _.bind(me.onStartClick, me)); + + $('#edit-slide-delay input:checkbox').single('change', _.bind(me.onDelayCheck, me)); + $('#edit-slide-delay .item-content:nth-child(2) input').single('change touchend', _.buffered(me.onDelay, 100, me)); + $('#edit-slide-delay .item-content:nth-child(2) input').single('input', _.bind(me.onDelayChanging, me)); + } else if (pageId == '#editslide-effect') { + $('#page-editslide-effect input').val([_effect]); + $('#page-editslide-effect li').single('click', _.buffered(me.onEffectClick, 100, me)); + } else if (pageId == '#editslide-effect-type') { + me.getView('EditSlide').renderEffectTypes(); + $('#page-editslide-effect-type input').val([_effectType]); + $('#page-editslide-effect-type li').single('click', _.buffered(me.onEffectTypeClick, 100, me)); } } }, @@ -147,6 +173,33 @@ define([ paletteFillColor && paletteFillColor.select(color); }, + _initTransitionView: function () { + var me = this; + + var timing = _slideObject.get_timing(); + if (timing) { + _effect = timing.get_TransitionType(); + me.getView('EditSlide').fillEffectTypes(_effect); + $('#edit-slide-effect .item-after').text(me.getView('EditSlide').getEffectName(_effect)); + $('#edit-slide-effect-type').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None); + $('#edit-slide-duration').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None); + + _effectType = timing.get_TransitionOption(); + $('#edit-slide-effect-type .item-after').text((_effect != Asc.c_oAscSlideTransitionTypes.None) ? me.getView('EditSlide').getEffectTypeName(_effectType) : ''); + + _effectDuration = timing.get_TransitionDuration(); + $('#edit-slide-duration .item-after label').text((_effectDuration!==null && _effectDuration!==undefined) ? (parseInt(_effectDuration/1000.) + ' ' + me.textSec) : ''); + + $('#edit-slide-start-click input:checkbox').prop('checked', !!timing.get_SlideAdvanceOnMouseClick()); + $('#edit-slide-delay input:checkbox').prop('checked', !!timing.get_SlideAdvanceAfter()); + $('#edit-slide-delay .item-content:nth-child(2)').toggleClass('disabled',!timing.get_SlideAdvanceAfter()); + + _effectDelay = timing.get_SlideAdvanceDuration(); + $('#edit-slide-delay .item-content:nth-child(2) .item-after').text((_effectDelay!==null && _effectDelay!==undefined) ? (parseInt(_effectDelay/1000.) + ' ' + me.textSec) : ''); + $('#edit-slide-delay .item-content:nth-child(2) input').val([(_effectDelay!==null && _effectDelay!==undefined) ? parseInt(_effectDelay/1000.) : 0]); + } + }, + // Public getSlide: function () { @@ -213,6 +266,102 @@ define([ $('.container-edit .slide-layout li').single('click', _.buffered(this.onLayoutClick, 100, this)); }, + onEffectClick: function (e) { + var $target = $(e.currentTarget).find('input'); + + if ($target && this.api) { + _effect = parseFloat($target.prop('value')); + _effectType = this.getView('EditSlide').fillEffectTypes(_effect); + + var props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + timing.put_TransitionType(_effect); + timing.put_TransitionOption(_effectType); + props.put_timing(timing); + this.api.SetSlideProps(props); + } + }, + + onEffectTypeClick: function (e) { + var $target = $(e.currentTarget).find('input'); + + if ($target && this.api) { + _effectType = parseFloat($target.prop('value')); + + var props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + timing.put_TransitionType(_effect); + timing.put_TransitionOption(_effectType); + props.put_timing(timing); + this.api.SetSlideProps(props); + } + }, + + onDuration: function (e) { + var $button = $(e.currentTarget), + duration = parseInt(_effectDuration/1000); + + if ($button.hasClass('decrement')) { + duration = Math.max(0, --duration); + } else { + duration = Math.min(300, ++duration); + } + _effectDuration = duration * 1000; + $('#edit-slide-duration .item-after label').text(duration + ' ' + this.textSec); + + var props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + timing.put_TransitionDuration(_effectDuration); + props.put_timing(timing); + this.api.SetSlideProps(props); + }, + + onStartClick: function (e) { + var $checkbox = $(e.currentTarget); + + var props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + timing.put_SlideAdvanceOnMouseClick($checkbox.is(':checked')); + props.put_timing(timing); + this.api.SetSlideProps(props); + }, + + onDelayCheck: function (e) { + var $checkbox = $(e.currentTarget); + + $('#edit-slide-delay .item-content:nth-child(2)').toggleClass('disabled',!$checkbox.is(':checked')); + + var props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + timing.put_SlideAdvanceAfter($checkbox.is(':checked')); + timing.put_SlideAdvanceDuration(_effectDelay); + props.put_timing(timing); + this.api.SetSlideProps(props); + }, + + onDelay: function (e) { + var $target = $(e.currentTarget), + delay = $target.val(); + + _effectDelay = delay * 1000; + $('#edit-slide-delay .item-content:nth-child(2) .item-after').text(delay + ' ' + this.textSec); + + var props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + timing.put_SlideAdvanceDuration(_effectDelay); + props.put_timing(timing); + this.api.SetSlideProps(props); + }, + + onDelayChanging: function (e) { + var $target = $(e.currentTarget); + $('#edit-slide-delay .item-content:nth-child(2) .item-after').text($target.val() + ' ' + this.textSec); + }, + + onApplyAll: function (e) { + this.api.SlideTimingApplyToAll(); + }, + // API handlers onApiFocusObject: function (objects) { @@ -280,7 +429,9 @@ define([ }); return slideExist; - } + }, + + textSec: 's' }; })(), PE.Controllers.EditSlide || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/template/EditSlide.template b/apps/presentationeditor/mobile/app/template/EditSlide.template index 41adaedea..08ec4382a 100644 --- a/apps/presentationeditor/mobile/app/template/EditSlide.template +++ b/apps/presentationeditor/mobile/app/template/EditSlide.template @@ -60,58 +60,94 @@ - -
+ +
<% if (!android) { %><%= scope.textBack %><% } %>
-
<%= scope.textReorder %>
+
<%= scope.textTransition %>
<% if (phone) { %><% } %>
-
+
+
+
+ +
+
+
@@ -119,7 +155,122 @@
- +
+
+
+
<% if (!android) { %><%= scope.textBack %><% } %>
+
<%= scope.textEffect %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %><%= scope.textBack %><% } %>
+
<%= scope.textType %>
+
<% if (phone) { %><% } %>
+
+
+
+
+
    +
+
+
+
+ +
@@ -134,7 +285,7 @@
- +
diff --git a/apps/presentationeditor/mobile/app/view/edit/EditSlide.js b/apps/presentationeditor/mobile/app/view/edit/EditSlide.js index f47051338..b2387deb6 100644 --- a/apps/presentationeditor/mobile/app/view/edit/EditSlide.js +++ b/apps/presentationeditor/mobile/app/view/edit/EditSlide.js @@ -50,7 +50,8 @@ define([ PE.Views.EditSlide = Backbone.View.extend(_.extend((function() { // private - var _layouts = []; + var _layouts = [], + _arrCurrentEffectTypes = []; return { // el: '.view-main', @@ -63,6 +64,40 @@ define([ initialize: function () { Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this)); Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this)); + + this._arrEffectType = [ + {displayValue: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly}, + {displayValue: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black}, + {displayValue: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left}, + {displayValue: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top}, + {displayValue: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right}, + {displayValue: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom}, + {displayValue: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft}, + {displayValue: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight}, + {displayValue: this.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft}, + {displayValue: this.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight}, + {displayValue: this.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn}, + {displayValue: this.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut}, + {displayValue: this.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn}, + {displayValue: this.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut}, + {displayValue: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise}, + {displayValue: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise}, + {displayValue: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge}, + {displayValue: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In}, + {displayValue: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out}, + {displayValue: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate} + ]; + this._arrEffect = [ + {displayValue: this.textNone, value: Asc.c_oAscSlideTransitionTypes.None}, + {displayValue: this.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade}, + {displayValue: this.textPush, value: Asc.c_oAscSlideTransitionTypes.Push}, + {displayValue: this.textWipe, value: Asc.c_oAscSlideTransitionTypes.Wipe}, + {displayValue: this.textSplit, value: Asc.c_oAscSlideTransitionTypes.Split}, + {displayValue: this.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover}, + {displayValue: this.textCover, value: Asc.c_oAscSlideTransitionTypes.Cover}, + {displayValue: this.textClock, value: Asc.c_oAscSlideTransitionTypes.Clock}, + {displayValue: this.textZoom, value: Asc.c_oAscSlideTransitionTypes.Zoom} + ]; }, initEvents: function () { @@ -72,6 +107,8 @@ define([ $('#slide-change-layout').single('click', _.bind(me.showLayout, me)); $('#slide-transition').single('click', _.bind(me.showTransition, me)); $('#slide-style').single('click', _.bind(me.showStyle, me)); + $('#edit-slide-effect').single('click', _.bind(me.showEffect, me)); + $('#edit-slide-effect-type').single('click', _.bind(me.showEffectType, me)); me.initControls(); }, @@ -157,6 +194,14 @@ define([ this.showPage('#edit-slide-transition'); }, + showEffect: function () { + this.showPage('#editslide-effect'); + }, + + showEffectType: function () { + this.showPage('#editslide-effect-type'); + }, + updateLayouts: function () { _layouts = Common.SharedSettings.get('slidelayouts'); this.renderLayouts(); @@ -228,6 +273,75 @@ define([ } }, + renderEffectTypes: function() { + var $typeContainer = $('#page-editslide-effect-type .list-block ul'); + if ($typeContainer.length > 0 && _arrCurrentEffectTypes.length>0) { + var template = _.template([ + '<% _.each(types, function(item) { %>', + '
  • ', + '', + '
    • ', + '<% }); %>' + ].join(''), { + android : Common.SharedSettings.get('android'), + types: _arrCurrentEffectTypes + }); + + $typeContainer.html(template); + } + }, + + fillEffectTypes: function (type) { + _arrCurrentEffectTypes = []; + switch (type) { + case Asc.c_oAscSlideTransitionTypes.Fade: + _arrCurrentEffectTypes.push(this._arrEffectType[0], this._arrEffectType[1]); + break; + case Asc.c_oAscSlideTransitionTypes.Push: + _arrCurrentEffectTypes = this._arrEffectType.slice(2, 6); + break; + case Asc.c_oAscSlideTransitionTypes.Wipe: + _arrCurrentEffectTypes = this._arrEffectType.slice(2, 10); + break; + case Asc.c_oAscSlideTransitionTypes.Split: + _arrCurrentEffectTypes = this._arrEffectType.slice(10, 14); + break; + case Asc.c_oAscSlideTransitionTypes.UnCover: + _arrCurrentEffectTypes = this._arrEffectType.slice(2, 10); + break; + case Asc.c_oAscSlideTransitionTypes.Cover: + _arrCurrentEffectTypes = this._arrEffectType.slice(2, 10); + break; + case Asc.c_oAscSlideTransitionTypes.Clock: + _arrCurrentEffectTypes = this._arrEffectType.slice(14, 17); + break; + case Asc.c_oAscSlideTransitionTypes.Zoom: + _arrCurrentEffectTypes = this._arrEffectType.slice(17); + break; + } + return (_arrCurrentEffectTypes.length>0) ? _arrCurrentEffectTypes[0].value : -1; + }, + + getEffectName: function(effect) { + for (var i=0; i