[PE mobile] Edit slide transition.
This commit is contained in:
parent
e8f6a536f8
commit
bf8c9f1941
|
@ -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 || {}))
|
||||
});
|
|
@ -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 class="item-inner">
|
||||
<div class="item-title"><%= scope.textToForeground %></div>
|
||||
</div>
|
||||
<div id="edit-slide-effect" class="item-content item-link">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label"><%= scope.textEffect %></div>
|
||||
<div class="item-after"><%= scope.textNone %></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</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 class="item-inner">
|
||||
<div class="item-title"><%= scope.textToBackground %></div>
|
||||
</div>
|
||||
<div id="edit-slide-effect-type" class="item-content item-link">
|
||||
<div class="item-inner">
|
||||
<div class="item-title label"><%= scope.textType %></div>
|
||||
<div class="item-after"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a data-type="move-up" class="item-link no-indicator">
|
||||
<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>
|
||||
<li id="edit-slide-duration">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<div class="item-after value"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<% 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">
|
||||
|
|
|
@ -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 || {}))
|
||||
});
|
Loading…
Reference in a new issue