[PE mobile] Edit slide transition.
This commit is contained in:
parent
e8f6a536f8
commit
bf8c9f1941
|
@ -51,7 +51,11 @@ define([
|
||||||
var _stack = [],
|
var _stack = [],
|
||||||
_slideObject = undefined,
|
_slideObject = undefined,
|
||||||
_themes = [],
|
_themes = [],
|
||||||
_themeId = -1;
|
_themeId = -1,
|
||||||
|
_effect = Asc.c_oAscSlideTransitionTypes.None,
|
||||||
|
_effectType = -1,
|
||||||
|
_effectDuration = 2000,
|
||||||
|
_effectDelay = 10000;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
models: [],
|
models: [],
|
||||||
|
@ -69,6 +73,11 @@ define([
|
||||||
'page:show': this.onPageShow
|
'page:show': this.onPageShow
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var me = this;
|
||||||
|
uiApp.onPageBack('editslide-effect-type editslide-effect', function (page) {
|
||||||
|
me.initSettings('#edit-slide-transition');
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
setApi: function (api) {
|
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 .row div').removeClass('active').single('click', _.buffered(me.onThemeClick, 100, me));
|
||||||
$('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active');
|
$('.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);
|
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
|
// Public
|
||||||
|
|
||||||
getSlide: function () {
|
getSlide: function () {
|
||||||
|
@ -213,6 +266,102 @@ define([
|
||||||
$('.container-edit .slide-layout li').single('click', _.buffered(this.onLayoutClick, 100, this));
|
$('.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
|
// API handlers
|
||||||
|
|
||||||
onApiFocusObject: function (objects) {
|
onApiFocusObject: function (objects) {
|
||||||
|
@ -280,7 +429,9 @@ define([
|
||||||
});
|
});
|
||||||
|
|
||||||
return slideExist;
|
return slideExist;
|
||||||
}
|
},
|
||||||
|
|
||||||
|
textSec: 's'
|
||||||
};
|
};
|
||||||
})(), PE.Controllers.EditSlide || {}))
|
})(), PE.Controllers.EditSlide || {}))
|
||||||
});
|
});
|
|
@ -60,58 +60,94 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Reorder view -->
|
<!-- Transition view -->
|
||||||
<div id="edit-slide-reorder">
|
<div id="edit-slide-transition">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
<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="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 class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page shape-reorder">
|
<div class="page">
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div class="list-block">
|
<div class="list-block">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a data-type="all-up" class="item-link no-indicator">
|
<div id="edit-slide-effect" class="item-content item-link">
|
||||||
<div class="item-content">
|
<div class="item-inner">
|
||||||
<div class="item-media"><i class="icon icon-move-foreground"></i></div>
|
<div class="item-title label"><%= scope.textEffect %></div>
|
||||||
<div class="item-inner">
|
<div class="item-after"><%= scope.textNone %></div>
|
||||||
<div class="item-title"><%= scope.textToForeground %></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a data-type="all-down" class="item-link no-indicator">
|
<div id="edit-slide-effect-type" class="item-content item-link">
|
||||||
<div class="item-content">
|
<div class="item-inner">
|
||||||
<div class="item-media"><i class="icon icon-move-background"></i></div>
|
<div class="item-title label"><%= scope.textType %></div>
|
||||||
<div class="item-inner">
|
<div class="item-after"></div>
|
||||||
<div class="item-title"><%= scope.textToBackground %></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li id="edit-slide-duration">
|
||||||
<a data-type="move-up" class="item-link no-indicator">
|
<div class="item-content">
|
||||||
<div class="item-content">
|
<div class="item-inner">
|
||||||
<div class="item-media"><i class="icon icon-move-forward"></i></div>
|
<div class="item-title"><%= scope.textDuration %></div>
|
||||||
<div class="item-inner">
|
<div class="item-after splitter">
|
||||||
<div class="item-title"><%= scope.textForward %></div>
|
<% 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>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<a data-type="move-down" class="item-link no-indicator">
|
</div>
|
||||||
<div data-type="move-down" class="item-content">
|
<div class="list-block">
|
||||||
<div class="item-media"><i class="icon icon-move-backward"></i></div>
|
<ul>
|
||||||
<div class="item-inner">
|
<li id="edit-slide-start-click">
|
||||||
<div class="item-title"><%= scope.textBackward %></div>
|
<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>
|
</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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -119,7 +155,122 @@
|
||||||
</div>
|
</div>
|
||||||
</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 id="edit-slide-layout">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
|
@ -134,7 +285,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Replace view -->
|
<!-- Theme view -->
|
||||||
<div id="edit-slide-theme">
|
<div id="edit-slide-theme">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
|
|
|
@ -50,7 +50,8 @@ define([
|
||||||
|
|
||||||
PE.Views.EditSlide = Backbone.View.extend(_.extend((function() {
|
PE.Views.EditSlide = Backbone.View.extend(_.extend((function() {
|
||||||
// private
|
// private
|
||||||
var _layouts = [];
|
var _layouts = [],
|
||||||
|
_arrCurrentEffectTypes = [];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// el: '.view-main',
|
// el: '.view-main',
|
||||||
|
@ -63,6 +64,40 @@ define([
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||||
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, 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 () {
|
initEvents: function () {
|
||||||
|
@ -72,6 +107,8 @@ define([
|
||||||
$('#slide-change-layout').single('click', _.bind(me.showLayout, me));
|
$('#slide-change-layout').single('click', _.bind(me.showLayout, me));
|
||||||
$('#slide-transition').single('click', _.bind(me.showTransition, me));
|
$('#slide-transition').single('click', _.bind(me.showTransition, me));
|
||||||
$('#slide-style').single('click', _.bind(me.showStyle, 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();
|
me.initControls();
|
||||||
},
|
},
|
||||||
|
@ -157,6 +194,14 @@ define([
|
||||||
this.showPage('#edit-slide-transition');
|
this.showPage('#edit-slide-transition');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
showEffect: function () {
|
||||||
|
this.showPage('#editslide-effect');
|
||||||
|
},
|
||||||
|
|
||||||
|
showEffectType: function () {
|
||||||
|
this.showPage('#editslide-effect-type');
|
||||||
|
},
|
||||||
|
|
||||||
updateLayouts: function () {
|
updateLayouts: function () {
|
||||||
_layouts = Common.SharedSettings.get('slidelayouts');
|
_layouts = Common.SharedSettings.get('slidelayouts');
|
||||||
this.renderLayouts();
|
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',
|
textTheme: 'Theme',
|
||||||
textStyle: 'Style',
|
textStyle: 'Style',
|
||||||
textLayout: 'Layout',
|
textLayout: 'Layout',
|
||||||
|
@ -236,10 +350,43 @@ define([
|
||||||
textDuplicateSlide: 'Duplicate Slide',
|
textDuplicateSlide: 'Duplicate Slide',
|
||||||
textBack: 'Back',
|
textBack: 'Back',
|
||||||
textFill: 'Fill',
|
textFill: 'Fill',
|
||||||
textEffects: 'Effects',
|
textEffect: 'Effect',
|
||||||
textSize: 'Size',
|
textType: 'Type',
|
||||||
|
textDuration: 'Duration',
|
||||||
textColor: 'Color',
|
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 || {}))
|
})(), PE.Views.EditSlide || {}))
|
||||||
});
|
});
|
Loading…
Reference in a new issue