440 lines
18 KiB
JavaScript
440 lines
18 KiB
JavaScript
/*
|
|
*
|
|
* (c) Copyright Ascensio System SIA 2010-2019
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
|
|
* street, Riga, Latvia, EU, LV-1050.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* EditSlide.js
|
|
* Presentation Editor
|
|
*
|
|
* Created by Julia Radzhabova on 12/07/16
|
|
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
|
*
|
|
*/
|
|
|
|
define([
|
|
'core',
|
|
'presentationeditor/mobile/app/view/edit/EditSlide',
|
|
'jquery',
|
|
'underscore',
|
|
'backbone'
|
|
], function (core, view, $, _, Backbone) {
|
|
'use strict';
|
|
|
|
PE.Controllers.EditSlide = Backbone.Controller.extend(_.extend((function() {
|
|
// Private
|
|
var _stack = [],
|
|
_slideObject = undefined,
|
|
_themes = [],
|
|
_themeId = -1,
|
|
_effect = Asc.c_oAscSlideTransitionTypes.None,
|
|
_effectType = -1,
|
|
_effectDuration = 2000,
|
|
_effectDelay = 10000;
|
|
|
|
return {
|
|
models: [],
|
|
collections: [],
|
|
views: [
|
|
'EditSlide'
|
|
],
|
|
|
|
initialize: function () {
|
|
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
|
Common.NotificationCenter.on('slidelayouts:load', _.bind(this.updateLayouts, this));
|
|
|
|
this.addListeners({
|
|
'EditSlide': {
|
|
'page:show': this.onPageShow
|
|
}
|
|
});
|
|
|
|
var me = this;
|
|
uiApp.onPageBack('editslide-effect-type editslide-effect', function (page) {
|
|
me.initSettings('#edit-slide-transition');
|
|
});
|
|
},
|
|
|
|
setApi: function (api) {
|
|
var me = this;
|
|
me.api = api;
|
|
|
|
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
|
|
me.api.asc_registerCallback('asc_onInitEditorStyles', _.bind(me.onApiInitEditorStyles, me));
|
|
me.api.asc_registerCallback('asc_onUpdateThemeIndex', _.bind(me.onApiUpdateThemeIndex, me));
|
|
},
|
|
|
|
onLaunch: function () {
|
|
this.createView('EditSlide').render();
|
|
},
|
|
|
|
initEvents: function () {
|
|
var me = this;
|
|
|
|
$('#slide-remove').single('click', _.bind(me.onRemoveSlide, me));
|
|
$('#slide-duplicate').single('click', _.bind(me.onDuplicateSlide, me));
|
|
|
|
me.initSettings();
|
|
},
|
|
|
|
onPageShow: function (view, pageId) {
|
|
var me = this;
|
|
me.initSettings(pageId);
|
|
},
|
|
|
|
initSettings: function (pageId) {
|
|
var me = this;
|
|
|
|
if (_slideObject) {
|
|
if (pageId == '#edit-slide-style') {
|
|
me._initStyleView();
|
|
|
|
var paletteFillColor = me.getView('EditSlide').paletteFillColor;
|
|
paletteFillColor && paletteFillColor.on('select', _.bind(me.onFillColor, me));
|
|
|
|
} else if (pageId == '#edit-slide-layout') {
|
|
$('.container-edit .slide-layout li').single('click', _.buffered(me.onLayoutClick, 100, me));
|
|
} else if (pageId == '#edit-slide-theme') {
|
|
this.getView('EditSlide').renderThemes();
|
|
|
|
$('.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));
|
|
}
|
|
}
|
|
},
|
|
|
|
_initStyleView: function () {
|
|
var me = this,
|
|
paletteFillColor = me.getView('EditSlide').paletteFillColor;
|
|
|
|
var sdkColor, color;
|
|
|
|
// Init fill color
|
|
var fill = _slideObject.get_background(),
|
|
fillType = fill.get_type();
|
|
|
|
color = 'transparent';
|
|
|
|
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
|
|
fill = fill.get_fill();
|
|
sdkColor = fill.get_color();
|
|
|
|
if (sdkColor) {
|
|
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
|
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
|
|
} else {
|
|
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
|
|
}
|
|
}
|
|
}
|
|
|
|
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 () {
|
|
return _slideObject;
|
|
},
|
|
|
|
getThemes: function () {
|
|
return _themes || [];
|
|
},
|
|
|
|
// Handlers
|
|
|
|
onLayoutClick: function (e) {
|
|
var me = this,
|
|
$target = $(e.currentTarget),
|
|
type = $target.data('type');
|
|
|
|
me.api.ChangeLayout(type);
|
|
},
|
|
|
|
onThemeClick: function (e) {
|
|
var me = this,
|
|
$target = $(e.currentTarget),
|
|
type = $target.data('type');
|
|
|
|
$('.container-edit .slide-theme div').removeClass('active');
|
|
$target.addClass('active');
|
|
|
|
me.api.ChangeTheme(type);
|
|
},
|
|
|
|
onRemoveSlide: function () {
|
|
this.api.DeleteSlide();
|
|
PE.getController('EditContainer').hideModal();
|
|
},
|
|
|
|
onDuplicateSlide: function () {
|
|
this.api.DublicateSlide();
|
|
PE.getController('EditContainer').hideModal();
|
|
},
|
|
|
|
onFillColor: function(palette, color) {
|
|
var me = this;
|
|
|
|
if (me.api) {
|
|
var props = new Asc.CAscSlideProps();
|
|
var fill = new Asc.asc_CShapeFill();
|
|
|
|
if (color == 'transparent') {
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
|
|
fill.put_fill(null);
|
|
} else {
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
|
|
fill.put_fill(new Asc.asc_CFillSolid());
|
|
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
|
}
|
|
props.put_background(fill);
|
|
me.api.SetSlideProps(props);
|
|
}
|
|
},
|
|
|
|
updateLayouts: function(layouts){
|
|
this.getView('EditSlide').updateLayouts();
|
|
$('.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) {
|
|
_stack = objects;
|
|
|
|
var slides = [];
|
|
|
|
_.each(_stack, function (object) {
|
|
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Slide) {
|
|
slides.push(object);
|
|
}
|
|
});
|
|
|
|
if (slides.length > 0) {
|
|
var object = slides[slides.length - 1]; // get top slide
|
|
_slideObject = object.get_ObjectValue();
|
|
} else {
|
|
_slideObject = undefined;
|
|
}
|
|
},
|
|
|
|
onApiInitEditorStyles: function(themes) {
|
|
if (themes) {
|
|
window.styles_loaded = false;
|
|
|
|
var me = this,
|
|
defaultThemes = themes[0] || [],
|
|
docThemes = themes[1] || [];
|
|
|
|
_themes = [];
|
|
|
|
_.each(defaultThemes.concat(docThemes), function(theme) {
|
|
_themes.push({
|
|
imageUrl: theme.get_Image(),
|
|
themeId : theme.get_Index()
|
|
});
|
|
});
|
|
|
|
window.styles_loaded = true;
|
|
}
|
|
},
|
|
|
|
onApiUpdateThemeIndex: function(themeId) {
|
|
_themeId = themeId;
|
|
$('.container-edit .slide-theme .row div').removeClass('active');
|
|
$('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active');
|
|
},
|
|
|
|
// Helpers
|
|
|
|
_closeIfNeed: function () {
|
|
if (!this._isSlideInStack()) {
|
|
PE.getController('EditContainer').hideModal();
|
|
}
|
|
},
|
|
|
|
_isSlideInStack: function () {
|
|
var slideExist = false;
|
|
|
|
_.some(_stack, function(object) {
|
|
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Slide) {
|
|
slideExist = true;
|
|
return true;
|
|
}
|
|
});
|
|
|
|
return slideExist;
|
|
},
|
|
|
|
textSec: 's'
|
|
};
|
|
})(), PE.Controllers.EditSlide || {}))
|
|
}); |