Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE mobile] Edit slide transition.

Browse source
This commit is contained in:
Julia Radzhabova 2016-12-13 17:13:54 +03:00
parent e8f6a536f8
commit bf8c9f1941
3 changed files with 489 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
apps/presentationeditor/mobile/app/controller/edit/EditSlide.js
View file

@ -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 || {}))
});

209
apps/presentationeditor/mobile/app/template/EditSlide.template
View file

@ -60,58 +60,94 @@
</div>
</div>
<!-- Reorder view -->
<div id="edit-slide-reorder">
<!-- Transition view -->
<div id="edit-slide-transition">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding"><%= scope.textReorder %></div>
<div class="center sliding"><%= scope.textTransition %></div>
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
</div>
</div>
<div class="page shape-reorder">
<div class="page">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="all-up" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-move-foreground"></i></div>
<div id="edit-slide-effect" class="item-content item-link">
<div class="item-inner">
<div class="item-title"><%= scope.textToForeground %></div>
<div class="item-title label"><%= scope.textEffect %></div>
<div class="item-after"><%= scope.textNone %></div>
</div>
</div>
</a>
</li>
<li>
<a data-type="all-down" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-move-background"></i></div>
<div id="edit-slide-effect-type" class="item-content item-link">
<div class="item-inner">
<div class="item-title"><%= scope.textToBackground %></div>
<div class="item-title label"><%= scope.textType %></div>
<div class="item-after"></div>
</div>
</div>
</a>
</li>
<li>
<a data-type="move-up" class="item-link no-indicator">
<li id="edit-slide-duration">
<div class="item-content">
<div class="item-media"><i class="icon icon-move-forward"></i></div>
<div class="item-inner">
<div class="item-title"><%= scope.textForward %></div>
<div class="item-title"><%= scope.textDuration %></div>
<div class="item-after splitter">
<% if (!android) { %><label></label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label></label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li id="edit-slide-start-click">
<div class="item-inner item-content">
<div class="item-title"><%= scope.textStartOnClick %></div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox" name="slide-start-click">
<div class="checkbox"></div>
</label>
</div>
</div>
</li>
<li id="edit-slide-delay">
<div class="item-content item-inner">
<div class="item-title"><%= scope.textDelay %></div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox" name="slide-delay-click">
<div class="checkbox"></div>
</label>
</div>
</div>
<div class="item-content item-inner">
<div class="item-input">
<div class="range-slider">
<input type="range" min="0" max="300" value="0" step="1">
</div>
</div>
<div class="item-after value"></div>
</div>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li>
<a data-type="move-down" class="item-link no-indicator">
<div data-type="move-down" class="item-content">
<div class="item-media"><i class="icon icon-move-backward"></i></div>
<div class="item-inner">
<div class="item-title"><%= scope.textBackward %></div>
</div>
</div>
</a>
<% if (android) { %>
<a id="slide-apply-all" class="button button-raised button-fill" style="margin: 20px 16px;"><%= scope.textApplyAll %></a>
<% } else { %>
<a id="slide-apply-all" class="item-link list-button" style="text-align: center;"><%= scope.textApplyAll %></a>
<% } %>
</li>
</ul>
</div>
@ -119,7 +155,122 @@
</div>
</div>
<!-- Replace layout -->
<div id="editslide-effect">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding"><%= scope.textEffect %></div>
</div>
</div>
<div class="page" id="page-editslide-effect" data-page="editslide-effect">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="0">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textNone %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="1">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textFade %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="2">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textPush %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="3">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textWipe %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="4">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textSplit %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="5">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textUnCover %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="6">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textCover %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="7">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textClock %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="editslide-effect" value="8">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textZoom %></div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Layout view -->
<div id="editslide-effect-type">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding"><%= scope.textType %></div>
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
</div>
</div>
<div class="page" id="page-editslide-effect-type" data-page="editslide-effect-type">
<div class="page-content">
<div class="list-block"><ul>
</ul></div>
</div>
</div>
</div>
<!-- Layout view -->
<div id="edit-slide-layout">
<div class="navbar">
<div class="navbar-inner">
@ -134,7 +285,7 @@
</div>
</div>
<!-- Replace view -->
<!-- Theme view -->
<div id="edit-slide-theme">
<div class="navbar">
<div class="navbar-inner">

155
apps/presentationeditor/mobile/app/view/edit/EditSlide.js
View file

@ -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) { %>',
'<li>',
'<label class="label-radio item-content">',
'<input type="radio" name="editslide-effect-type" value="<%= item.value %>">',
'<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>',
'<div class="item-inner">',
'<div class="item-title"><%= item.displayValue %></div>',
'</div>',
'</label>',
'</li>',
'<% }); %>'
].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<this._arrEffect.length; i++) {
if (this._arrEffect[i].value == effect) return this._arrEffect[i].displayValue;
}
return '';
},
getEffectTypeName: function(type) {
for (var i=0; i<_arrCurrentEffectTypes.length; i++) {
if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue;
}
return '';
},
textTheme: 'Theme',
textStyle: 'Style',
textLayout: 'Layout',
@ -236,10 +350,43 @@ define([
textDuplicateSlide: 'Duplicate Slide',
textBack: 'Back',
textFill: 'Fill',
textEffects: 'Effects',
textSize: 'Size',
textEffect: 'Effect',
textType: 'Type',
textDuration: 'Duration',
textColor: 'Color',
textOpacity: 'Opacity'
textOpacity: 'Opacity',
textNone: 'None',
textFade: 'Fade',
textPush: 'Push',
textWipe: 'Wipe',
textSplit: 'Split',
textUnCover: 'UnCover',
textCover: 'Cover',
textClock: 'Clock',
textZoom: 'Zoom',
textSmoothly: 'Smoothly',
textBlack: 'Through Black',
textLeft: 'Left',
textTop: 'Top',
textRight: 'Right',
textBottom: 'Bottom',
textTopLeft: 'Top-Left',
textTopRight: 'Top-Right',
textBottomLeft: 'Bottom-Left',
textBottomRight: 'Bottom-Right',
textVerticalIn: 'Vertical In',
textVerticalOut: 'Vertical Out',
textHorizontalIn: 'Horizontal In',
textHorizontalOut: 'Horizontal Out',
textClockwise: 'Clockwise',
textCounterclockwise: 'Counterclockwise',
textWedge: 'Wedge',
textZoomIn: 'Zoom In',
textZoomOut: 'Zoom Out',
textZoomRotate: 'Zoom and Rotate',
textStartOnClick: 'Start On Click',
textDelay: 'Delay',
textApplyAll: 'Apply to All Slides'
}
})(), PE.Views.EditSlide || {}))
});