Merge branches 'feature/new-mobile' and 'feature/new-mobile' of https://github.com/ONLYOFFICE/web-apps into feature/new-mobile
This commit is contained in:
Alexander Yuzhin
commit
677af5ae2d
|
|
@ -307,7 +307,7 @@ define([
|
|||
return;
|
||||
}
|
||||
|
||||
_styles = [],
|
||||
_styles = [];
|
||||
_styleTumbSize = {
|
||||
width : styles.STYLE_THUMBNAIL_WIDTH / uiApp.device.pixelRatio,
|
||||
height : styles.STYLE_THUMBNAIL_HEIGHT / uiApp.device.pixelRatio
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -144,6 +144,7 @@ require([
|
|||
'EditTable',
|
||||
'EditImage',
|
||||
'EditShape',
|
||||
'EditSlide',
|
||||
// 'EditChart',
|
||||
'EditLink',
|
||||
'AddContainer',
|
||||
|
|
@ -209,6 +210,7 @@ require([
|
|||
'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||
'presentationeditor/mobile/app/controller/edit/EditImage',
|
||||
'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||
'presentationeditor/mobile/app/controller/edit/EditSlide',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditChart',
|
||||
'presentationeditor/mobile/app/controller/edit/EditLink',
|
||||
'presentationeditor/mobile/app/controller/add/AddContainer',
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ require([
|
|||
'EditTable',
|
||||
'EditImage',
|
||||
'EditShape',
|
||||
'EditSlide',
|
||||
// 'EditChart',
|
||||
'EditLink',
|
||||
'AddContainer',
|
||||
|
|
@ -220,6 +221,7 @@ require([
|
|||
'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||
'presentationeditor/mobile/app/controller/edit/EditImage',
|
||||
'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||
'presentationeditor/mobile/app/controller/edit/EditSlide',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditChart',
|
||||
'presentationeditor/mobile/app/controller/edit/EditLink',
|
||||
'presentationeditor/mobile/app/controller/add/AddContainer',
|
||||
|
|
|
|||
|
|
@ -423,8 +423,7 @@ define([
|
|||
var zf = (value!==null) ? parseInt(value) : (me.appOptions.customization && me.appOptions.customization.zoom ? parseInt(me.appOptions.customization.zoom) : -1);
|
||||
(zf == -1) ? me.api.zoomFitToPage() : ((zf == -2) ? me.api.zoomFitToWidth() : me.api.zoom(zf>0 ? zf : 100));
|
||||
|
||||
|
||||
Common.localStorage.setItem("de-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
|
||||
Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
|
||||
|
||||
me.api.asc_registerCallback('asc_onStartAction', _.bind(me.onLongActionBegin, me));
|
||||
me.api.asc_registerCallback('asc_onEndAction', _.bind(me.onLongActionEnd, me));
|
||||
|
|
|
|||
|
|
@ -74,10 +74,10 @@ define([
|
|||
initEvents: function () {
|
||||
var me = this;
|
||||
me.getView('AddSlide').updateLayouts(_layouts);
|
||||
$('#add-slide .slide-layout li').single('click', _.buffered(me.onStyleClick, 100, me));
|
||||
$('#add-slide .slide-layout li').single('click', _.buffered(me.onLayoutClick, 100, me));
|
||||
},
|
||||
|
||||
onStyleClick: function (e) {
|
||||
onLayoutClick: function (e) {
|
||||
var me = this,
|
||||
$target = $(e.currentTarget),
|
||||
type = $target.data('type');
|
||||
|
|
@ -115,7 +115,7 @@ define([
|
|||
Common.NotificationCenter.trigger('slidelayouts:load', _layouts);
|
||||
|
||||
this.getView('AddSlide').updateLayouts(_layouts);
|
||||
$('#add-slide .slide-layout li').single('click', _.buffered(me.onStyleClick, 100, me));
|
||||
$('#add-slide .slide-layout li').single('click', _.buffered(me.onLayoutClick, 100, me));
|
||||
},
|
||||
|
||||
textTableSize: 'Table Size',
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ define([
|
|||
editors.push({
|
||||
caption: me.textSlide,
|
||||
id: 'edit-slide',
|
||||
layout: PE.getController('EditText').getView('EditSlide').rootLayout()
|
||||
layout: PE.getController('EditSlide').getView('EditSlide').rootLayout()
|
||||
})
|
||||
}
|
||||
if (_.contains(_settings, 'text')) {
|
||||
|
|
@ -324,7 +324,7 @@ define([
|
|||
_settings.push('table');
|
||||
no_text = false;
|
||||
} else if (Asc.c_oAscTypeSelectElement.Slide == type) {
|
||||
// _settings.push('slide');
|
||||
_settings.push('slide');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
|
||||
_settings.push('image');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Chart == type) {
|
||||
|
|
|
|||
286
apps/presentationeditor/mobile/app/controller/edit/EditSlide.js
Normal file
286
apps/presentationeditor/mobile/app/controller/edit/EditSlide.js
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'core',
|
||||
'presentationeditor/mobile/app/view/edit/EditSlide'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
PE.Controllers.EditSlide = Backbone.Controller.extend(_.extend((function() {
|
||||
// Private
|
||||
var _stack = [],
|
||||
_slideObject = undefined,
|
||||
_themes = [],
|
||||
_themeId = -1;
|
||||
|
||||
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
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_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);
|
||||
},
|
||||
|
||||
// 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));
|
||||
},
|
||||
|
||||
// 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;
|
||||
}
|
||||
};
|
||||
})(), PE.Controllers.EditSlide || {}))
|
||||
});
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<li>
|
||||
<div id="add-link-type" class="item-content item-link">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textLinkType %></div>
|
||||
<div class="item-title label"><%= scope.textLinkType %></div>
|
||||
<div class="item-after"><%= scope.textExternalLink %></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
166
apps/presentationeditor/mobile/app/template/EditSlide.template
Normal file
166
apps/presentationeditor/mobile/app/template/EditSlide.template
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-slide-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="slide-theme" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textTheme %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="slide-change-layout" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textLayout %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="slide-transition" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textTransition %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="slide-style" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textStyle %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<% if (android) { %>
|
||||
<a id="slide-duplicate" class="button button-raised button-fill" style="margin: 20px 16px;"><%= scope.textDuplicateSlide %></a>
|
||||
<% } else { %>
|
||||
<a id="slide-duplicate" class="item-link list-button" style="text-align: center;"><%= scope.textDuplicateSlide %></a>
|
||||
<% } %>
|
||||
</li>
|
||||
<li>
|
||||
<% if (android) { %>
|
||||
<a id="slide-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveSlide %></a>
|
||||
<% } else { %>
|
||||
<a id="slide-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveSlide %></a>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reorder view -->
|
||||
<div id="edit-slide-reorder">
|
||||
<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="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-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>
|
||||
</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 class="item-inner">
|
||||
<div class="item-title"><%= scope.textToBackground %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Replace layout -->
|
||||
<div id="edit-slide-layout">
|
||||
<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.textLayout %></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">
|
||||
<div class="page-content dataview slide-layout" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Replace view -->
|
||||
<div id="edit-slide-theme">
|
||||
<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.textTheme %></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">
|
||||
<div class="page-content dataview slide-theme" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles view -->
|
||||
<div id="edit-slide-style">
|
||||
<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.textFill %></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" data-page="edit-slide-style">
|
||||
<div class="page-content">
|
||||
<!--Fill colors-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
245
apps/presentationeditor/mobile/app/view/edit/EditSlide.js
Normal file
245
apps/presentationeditor/mobile/app/view/edit/EditSlide.js
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2016
|
||||
*
|
||||
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* 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) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'text!presentationeditor/mobile/app/template/EditSlide.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
PE.Views.EditSlide = Backbone.View.extend(_.extend((function() {
|
||||
// private
|
||||
var _layouts = [];
|
||||
|
||||
return {
|
||||
// el: '.view-main',
|
||||
|
||||
template: _.template(editTemplate),
|
||||
|
||||
events: {
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
$('#slide-theme').single('click', _.bind(me.showTheme, me));
|
||||
$('#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));
|
||||
|
||||
me.initControls();
|
||||
},
|
||||
|
||||
categoryShow: function(e) {
|
||||
// if ('edit-slide' == $(e.currentTarget).prop('id')) {
|
||||
// this.initEvents();
|
||||
// }
|
||||
},
|
||||
|
||||
// Render layout
|
||||
render: function () {
|
||||
this.layout = $('<div/>').append(this.template({
|
||||
android : Common.SharedSettings.get('android'),
|
||||
phone : Common.SharedSettings.get('phone'),
|
||||
scope : this
|
||||
}));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
rootLayout: function () {
|
||||
if (this.layout) {
|
||||
return this.layout
|
||||
.find('#edit-slide-root')
|
||||
.html();
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
initControls: function () {
|
||||
//
|
||||
},
|
||||
|
||||
showPage: function (templateId, suspendEvent) {
|
||||
var rootView = PE.getController('EditContainer').rootView;
|
||||
|
||||
if (rootView && this.layout) {
|
||||
var $content = this.layout.find(templateId);
|
||||
|
||||
// Android fix for navigation
|
||||
if (Framework7.prototype.device.android) {
|
||||
$content.find('.page').append($content.find('.navbar'));
|
||||
}
|
||||
|
||||
rootView.router.load({
|
||||
content: $content.html()
|
||||
});
|
||||
|
||||
if (suspendEvent !== true) {
|
||||
this.fireEvent('page:show', [this, templateId]);
|
||||
}
|
||||
|
||||
this.initEvents();
|
||||
}
|
||||
},
|
||||
|
||||
showStyle: function () {
|
||||
this.showPage('#edit-slide-style', true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-slide-style] .page-content'),
|
||||
transparent: true
|
||||
});
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-slide-style']);
|
||||
},
|
||||
|
||||
showLayout: function () {
|
||||
this.showPage('#edit-slide-layout', true);
|
||||
|
||||
this.renderLayouts();
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-slide-layout']);
|
||||
},
|
||||
|
||||
showTheme: function () {
|
||||
this.showPage('#edit-slide-theme');
|
||||
},
|
||||
|
||||
showTransition: function () {
|
||||
this.showPage('#edit-slide-transition');
|
||||
},
|
||||
|
||||
updateLayouts: function () {
|
||||
_layouts = Common.SharedSettings.get('slidelayouts');
|
||||
this.renderLayouts();
|
||||
},
|
||||
|
||||
renderLayouts: function() {
|
||||
var $layoutContainer = $('.container-edit .slide-layout');
|
||||
if ($layoutContainer.length > 0 && _layouts.length>0) {
|
||||
var columns = parseInt(($layoutContainer.width()-20) / (_layouts[0].itemWidth+2)), // magic
|
||||
row = -1,
|
||||
layouts = [];
|
||||
|
||||
_.each(_layouts, function (layout, index) {
|
||||
if (0 == index % columns) {
|
||||
layouts.push([]);
|
||||
row++
|
||||
}
|
||||
layouts[row].push(layout);
|
||||
});
|
||||
|
||||
var template = _.template([
|
||||
'<% _.each(layouts, function(row) { %>',
|
||||
'<ul class="row">',
|
||||
'<% _.each(row, function(item) { %>',
|
||||
'<li data-type="<%= item.idx %>">',
|
||||
'<img src="<%= item.imageUrl %>" width="<%= item.itemWidth %>" height="<%= item.itemHeight %>">',
|
||||
'</li>',
|
||||
'<% }); %>',
|
||||
'</ul>',
|
||||
'<% }); %>'
|
||||
].join(''), {
|
||||
layouts: layouts
|
||||
});
|
||||
|
||||
$layoutContainer.html(template);
|
||||
}
|
||||
},
|
||||
|
||||
renderThemes: function() {
|
||||
var $themeContainer = $('.container-edit .slide-theme'),
|
||||
_arr = PE.getController('EditSlide').getThemes();
|
||||
|
||||
if ($themeContainer.length > 0 && _arr.length>0) {
|
||||
var columns = parseInt(($themeContainer.width()-20) / 95), // magic
|
||||
row = -1,
|
||||
themes = [];
|
||||
|
||||
_.each(_arr, function (theme, index) {
|
||||
if (0 == index % columns) {
|
||||
themes.push([]);
|
||||
row++
|
||||
}
|
||||
themes[row].push(theme);
|
||||
});
|
||||
|
||||
var template = _.template([
|
||||
'<% _.each(themes, function(row) { %>',
|
||||
'<div class="row">',
|
||||
'<% _.each(row, function(theme) { %>',
|
||||
'<div data-type="<%= theme.themeId %>"><img src="<%= theme.imageUrl %>"></div>',
|
||||
'<% }); %>',
|
||||
'</div>',
|
||||
'<% }); %>'
|
||||
].join(''), {
|
||||
themes: themes
|
||||
});
|
||||
|
||||
$themeContainer.html(template);
|
||||
}
|
||||
},
|
||||
|
||||
textTheme: 'Theme',
|
||||
textStyle: 'Style',
|
||||
textLayout: 'Layout',
|
||||
textTransition: 'Transition',
|
||||
textRemoveSlide: 'Delete Slide',
|
||||
textDuplicateSlide: 'Duplicate Slide',
|
||||
textBack: 'Back',
|
||||
textFill: 'Fill',
|
||||
textEffects: 'Effects',
|
||||
textSize: 'Size',
|
||||
textColor: 'Color',
|
||||
textOpacity: 'Opacity'
|
||||
}
|
||||
})(), PE.Views.EditSlide || {}))
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -185,9 +185,24 @@ input, textarea {
|
|||
padding: 1px;
|
||||
|
||||
img {
|
||||
width: 119px;
|
||||
height: 67px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Slide theme
|
||||
|
||||
.slide-theme {
|
||||
.row {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
|
||||
width: 85px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -178,9 +178,24 @@ input, textarea {
|
|||
padding: 1px;
|
||||
|
||||
img {
|
||||
width: 119px;
|
||||
height: 67px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Slide theme
|
||||
|
||||
.slide-theme {
|
||||
.row {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
|
||||
width: 85px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue