[PE mobile] Added shape settings.
This commit is contained in:
Julia Radzhabova
parent
4eeefe4e1c
commit
c38fac9012
|
|
@ -144,7 +144,7 @@ require([
|
|||
// 'EditParagraph',
|
||||
// 'EditTable',
|
||||
// 'EditImage',
|
||||
// 'EditShape',
|
||||
'EditShape',
|
||||
// 'EditChart',
|
||||
// 'EditHyperlink',
|
||||
'AddContainer'
|
||||
|
|
@ -209,7 +209,7 @@ require([
|
|||
// 'presentationeditor/mobile/app/controller/edit/EditParagraph',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditImage',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||
'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditChart',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditHyperlink',
|
||||
'presentationeditor/mobile/app/controller/add/AddContainer'
|
||||
|
|
|
|||
|
|
@ -151,11 +151,11 @@ require([
|
|||
// 'DocumentHolder',
|
||||
// 'Settings',
|
||||
// 'EditContainer',
|
||||
'EditText'
|
||||
'EditText',
|
||||
// 'EditParagraph'
|
||||
// 'EditTable',
|
||||
// 'EditImage',
|
||||
// 'EditShape',
|
||||
'EditShape'
|
||||
// 'EditChart',
|
||||
// 'EditHyperlink',
|
||||
// 'AddContainer',
|
||||
|
|
@ -216,11 +216,11 @@ require([
|
|||
// 'presentationeditor/mobile/app/controller/DocumentHolder',
|
||||
// 'presentationeditor/mobile/app/controller/Settings',
|
||||
'presentationeditor/mobile/app/controller/edit/EditContainer',
|
||||
'presentationeditor/mobile/app/controller/edit/EditText'
|
||||
'presentationeditor/mobile/app/controller/edit/EditText',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditParagraph'
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditImage',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||
'presentationeditor/mobile/app/controller/edit/EditShape'
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditChart',
|
||||
// 'presentationeditor/mobile/app/controller/edit/EditHyperlink',
|
||||
// 'presentationeditor/mobile/app/controller/add/AddContainer',
|
||||
|
|
|
|||
|
|
@ -337,7 +337,7 @@ define([
|
|||
// _settings.push('chart');
|
||||
no_text = false;
|
||||
} else if (Asc.c_oAscTypeSelectElement.Shape == type) {
|
||||
// _settings.push('shape');
|
||||
_settings.push('shape');
|
||||
no_text = false;
|
||||
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
|
||||
// _settings.push('hyperlink');
|
||||
|
|
|
|||
383
apps/presentationeditor/mobile/app/controller/edit/EditShape.js
Normal file
383
apps/presentationeditor/mobile/app/controller/edit/EditShape.js
Normal file
|
|
@ -0,0 +1,383 @@
|
|||
/*
|
||||
*
|
||||
* (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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* EditShape.js
|
||||
* Presentation Editor
|
||||
*
|
||||
* Created by Julia Radzhabova on 11/25/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'core',
|
||||
'presentationeditor/mobile/app/view/edit/EditShape'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
PE.Controllers.EditShape = Backbone.Controller.extend(_.extend((function() {
|
||||
// Private
|
||||
var _stack = [],
|
||||
_shapeObject = undefined,
|
||||
_metricText = Common.Utils.Metric.getCurrentMetricName();
|
||||
|
||||
var borderSizeTransform = (function() {
|
||||
var _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||
|
||||
return {
|
||||
sizeByIndex: function (index) {
|
||||
if (index < 1) return _sizes[0];
|
||||
if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
|
||||
return _sizes[index];
|
||||
},
|
||||
|
||||
sizeByValue: function (value) {
|
||||
var index = 0;
|
||||
_.each(_sizes, function (size, idx) {
|
||||
if (Math.abs(size - value) < 0.25) {
|
||||
index = idx;
|
||||
}
|
||||
});
|
||||
return _sizes[index];
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'EditShape'
|
||||
],
|
||||
|
||||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
|
||||
this.addListeners({
|
||||
'EditShape': {
|
||||
'page:show': this.onPageShow
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function (api) {
|
||||
var me = this;
|
||||
me.api = api;
|
||||
|
||||
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
this.createView('EditShape').render();
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
$('#shape-remove').single('click', _.bind(me.onRemoveShape, me));
|
||||
|
||||
me.initSettings();
|
||||
},
|
||||
|
||||
onPageShow: function (view, pageId) {
|
||||
var me = this;
|
||||
|
||||
$('.shape-reorder a').single('click', _.bind(me.onReorder, me));
|
||||
$('.shape-replace li').single('click', _.buffered(me.onReplace, 100, me));
|
||||
|
||||
$('#edit-shape-bordersize input').single('change touchend', _.buffered(me.onBorderSize, 100, me));
|
||||
$('#edit-shape-bordersize input').single('input', _.bind(me.onBorderSizeChanging, me));
|
||||
$('#edit-shape-effect input').single('change touchend', _.buffered(me.onOpacity, 100, me));
|
||||
$('#edit-shape-effect input').single('input', _.bind(me.onOpacityChanging, me));
|
||||
|
||||
me.initSettings(pageId);
|
||||
},
|
||||
|
||||
initSettings: function (pageId) {
|
||||
var me = this;
|
||||
|
||||
// me.api && me.api.UpdateInterfaceState();
|
||||
|
||||
if (_shapeObject) {
|
||||
if (pageId == '#edit-shape-style' || pageId == '#edit-shape-border-color-view') {
|
||||
me._initStyleView();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_initStyleView: function () {
|
||||
var me = this,
|
||||
paletteFillColor = me.getView('EditShape').paletteFillColor,
|
||||
paletteBorderColor = me.getView('EditShape').paletteBorderColor;
|
||||
|
||||
// Init style border size
|
||||
var borderSize = _shapeObject.get_stroke().get_width() * 72.0 / 25.4;
|
||||
$('#edit-shape-bordersize input').val([borderSizeTransform.sizeByIndex(borderSize)]);
|
||||
$('#edit-shape-bordersize .item-after').text(borderSizeTransform.sizeByValue(borderSize) + ' ' + _metricText);
|
||||
|
||||
// Init style opacity
|
||||
$('#edit-shape-effect input').val([_shapeObject.get_fill().transparent ? _shapeObject.get_fill().transparent / 2.55 : 100]);
|
||||
$('#edit-shape-effect .item-after').text($('#edit-shape-effect input').val() + ' ' + "%");
|
||||
|
||||
paletteFillColor && paletteFillColor.on('select', _.bind(me.onFillColor, me));
|
||||
paletteBorderColor && paletteBorderColor.on('select', _.bind(me.onBorderColor, me));
|
||||
|
||||
var sdkColor, color;
|
||||
|
||||
// Init fill color
|
||||
var fill = _shapeObject.get_fill(),
|
||||
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);
|
||||
|
||||
// Init border color
|
||||
var stroke = _shapeObject.get_stroke(),
|
||||
strokeType = stroke.get_type();
|
||||
|
||||
color = 'transparent';
|
||||
|
||||
if (stroke && strokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||
sdkColor = stroke.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());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
paletteBorderColor && paletteBorderColor.select(color);
|
||||
$('#edit-shape-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)))
|
||||
},
|
||||
|
||||
// Public
|
||||
|
||||
getShape: function () {
|
||||
return _shapeObject;
|
||||
},
|
||||
|
||||
// Handlers
|
||||
|
||||
onRemoveShape: function () {
|
||||
this.api.asc_Remove();
|
||||
PE.getController('EditContainer').hideModal();
|
||||
},
|
||||
|
||||
onReorder: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
type = $target.data('type');
|
||||
|
||||
if ('all-up' == type) {
|
||||
this.api.shapes_bringToFront();
|
||||
} else if ('all-down' == type) {
|
||||
this.api.shapes_bringToBack();
|
||||
} else if ('move-up' == type) {
|
||||
this.api.shapes_bringForward();
|
||||
} else if ('move-down' == type) {
|
||||
this.api.shapes_bringBackward();
|
||||
}
|
||||
},
|
||||
|
||||
onReplace: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
type = $target.data('type');
|
||||
|
||||
this.api.ChangeShapeType(type);
|
||||
},
|
||||
|
||||
onBorderSize: function (e) {
|
||||
var me = this,
|
||||
$target = $(e.currentTarget),
|
||||
value = $target.val(),
|
||||
shape = new Asc.asc_CShapeProperty(),
|
||||
stroke = new Asc.asc_CStroke(),
|
||||
currentColor = Common.Utils.ThemeColor.getRgbColor('000000');
|
||||
|
||||
value = borderSizeTransform.sizeByIndex(parseInt(value));
|
||||
|
||||
var currentStroke = _shapeObject.get_stroke();
|
||||
|
||||
if (currentStroke) {
|
||||
var currentStrokeType = currentStroke.get_type();
|
||||
|
||||
if (currentStrokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||
currentColor = currentStroke.get_color();
|
||||
}
|
||||
}
|
||||
|
||||
if (value < 0.01) {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||
} else {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||
stroke.put_color(currentColor);
|
||||
stroke.asc_putPrstDash(currentStroke.asc_getPrstDash());
|
||||
stroke.put_width(value * 25.4 / 72.0);
|
||||
}
|
||||
|
||||
shape.put_stroke(stroke);
|
||||
|
||||
me.api.ShapeApply(shape);
|
||||
},
|
||||
|
||||
onBorderSizeChanging: function (e) {
|
||||
var $target = $(e.currentTarget);
|
||||
$('#edit-shape-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + _metricText);
|
||||
},
|
||||
|
||||
onOpacity: function (e) {
|
||||
var me = this,
|
||||
$target = $(e.currentTarget),
|
||||
value = $target.val(),
|
||||
fill = new Asc.asc_CShapeFill(),
|
||||
shape = new Asc.asc_CShapeProperty();
|
||||
|
||||
fill.put_transparent(parseInt(value * 2.55));
|
||||
shape.put_fill(fill);
|
||||
|
||||
me.api.ShapeApply(shape);
|
||||
},
|
||||
|
||||
onOpacityChanging: function (e) {
|
||||
var $target = $(e.currentTarget);
|
||||
$('#edit-shape-effect .item-after').text($target.val() + ' %');
|
||||
},
|
||||
|
||||
onFillColor: function(palette, color) {
|
||||
var me = this;
|
||||
|
||||
if (me.api) {
|
||||
var shape = new Asc.asc_CShapeProperty(),
|
||||
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));
|
||||
}
|
||||
|
||||
shape.put_fill(fill);
|
||||
|
||||
me.api.ShapeApply(shape);
|
||||
}
|
||||
},
|
||||
|
||||
onBorderColor: function (palette, color) {
|
||||
var me = this;
|
||||
|
||||
$('#edit-shape-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
|
||||
|
||||
if (me.api && _shapeObject) {
|
||||
var shape = new Asc.asc_CShapeProperty(),
|
||||
stroke = new Asc.asc_CStroke();
|
||||
|
||||
if (_shapeObject.get_stroke().get_width() < 0.01) {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||
} else {
|
||||
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
stroke.put_width(_shapeObject.get_stroke().get_width());
|
||||
stroke.asc_putPrstDash(_shapeObject.get_stroke().asc_getPrstDash());
|
||||
}
|
||||
|
||||
shape.put_stroke(stroke);
|
||||
|
||||
me.api.ShapeApply(shape);
|
||||
}
|
||||
},
|
||||
|
||||
// API handlers
|
||||
|
||||
onApiFocusObject: function (objects) {
|
||||
_stack = objects;
|
||||
|
||||
var shapes = [];
|
||||
|
||||
_.each(_stack, function (object) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Shape) {
|
||||
shapes.push(object);
|
||||
}
|
||||
});
|
||||
|
||||
if (shapes.length > 0) {
|
||||
var object = shapes[shapes.length - 1]; // get top shape
|
||||
_shapeObject = object.get_ObjectValue();
|
||||
} else {
|
||||
_shapeObject = undefined;
|
||||
}
|
||||
},
|
||||
|
||||
// Helpers
|
||||
|
||||
_closeIfNeed: function () {
|
||||
if (!this._isShapeInStack()) {
|
||||
PE.getController('EditContainer').hideModal();
|
||||
}
|
||||
},
|
||||
|
||||
_isShapeInStack: function () {
|
||||
var shapeExist = false;
|
||||
|
||||
_.some(_stack, function(object) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Shape) {
|
||||
shapeExist = true;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
return shapeExist;
|
||||
}
|
||||
};
|
||||
})(), PE.Controllers.EditShape || {}))
|
||||
});
|
||||
228
apps/presentationeditor/mobile/app/template/EditShape.template
Normal file
228
apps/presentationeditor/mobile/app/template/EditShape.template
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-shape-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="shape-style" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textStyle %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="shape-replace" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textReplace %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="shape-reorder" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textReorder %></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<% if (android) { %>
|
||||
<a id="shape-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveShape %></a>
|
||||
<% } else { %>
|
||||
<a id="shape-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveShape %></a>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reorder view -->
|
||||
<div id="edit-shape-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 view -->
|
||||
<div id="edit-shape-replace">
|
||||
<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.textReplace %></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-replace">
|
||||
<div class="page-content dataview shapes">
|
||||
<% _.each(shapes, function(row) { %>
|
||||
<ul class="row">
|
||||
<% _.each(row, function(shape) { %>
|
||||
<li data-type="<%= shape.type %>">
|
||||
<div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% }); %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles view -->
|
||||
<div id="edit-shape-style">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner edit-shape-style" data-page="edit-shape-style">
|
||||
<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 categories">
|
||||
<% if (android) { %>
|
||||
<div class="toolbar tabbar">
|
||||
<div data-page="index" class="toolbar-inner">
|
||||
<a href="#tab-shape-fill" data-type="fill" class="tab-link active"><%= scope.textFill %></a>
|
||||
<a href="#tab-shape-border" data-type="border" class="tab-link"><%= scope.textBorder %></a>
|
||||
<a href="#tab-shape-effects" data-type="effects" class="tab-link"><%= scope.textEffects %></a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="buttons-row">
|
||||
<a href="#tab-shape-fill" data-type="fill" class="tab-link button active"><%= scope.textFill %></a>
|
||||
<a href="#tab-shape-border" data-type="border" class="tab-link button"><%= scope.textBorder %></a>
|
||||
<a href="#tab-shape-effects" data-type="effects" class="tab-link button"><%= scope.textEffects %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
</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-shape-style">
|
||||
<div class="tabs-animated-wrap">
|
||||
<div class="tabs">
|
||||
<div id="tab-shape-fill" class="page-content tab active">
|
||||
<!--Fill colors-->
|
||||
</div>
|
||||
<div id="tab-shape-border" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-shape-bordersize">
|
||||
<div style="padding: 15px 0 0 15px;"><%= scope.textSize %></div>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="7" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 pt</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="edit-shape-bordercolor" class="item-link">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textColor %></div>
|
||||
<div class="item-after"><div class="color-preview"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-shape-effects" class="page-content tab">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="edit-shape-effect">
|
||||
<div style="padding: 15px 0 0 15px;"><%= scope.textOpacity %></div>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-input">
|
||||
<div class="range-slider">
|
||||
<input type="range" min="0" max="100" value="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after value">0 %</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Border color view -->
|
||||
<div id="edit-shape-border-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-shape-border-color">
|
||||
<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.textColor %></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-shape-border-color">
|
||||
<div class="page-content">
|
||||
<!--Color palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
188
apps/presentationeditor/mobile/app/view/edit/EditShape.js
Normal file
188
apps/presentationeditor/mobile/app/view/edit/EditShape.js
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
/*
|
||||
*
|
||||
* (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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* EditShape.js
|
||||
* Presentation Editor
|
||||
*
|
||||
* Created by Julia Radzhabova on 11/25/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'text!presentationeditor/mobile/app/template/EditShape.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
PE.Views.EditShape = Backbone.View.extend(_.extend((function() {
|
||||
// private
|
||||
|
||||
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;
|
||||
|
||||
$('#shape-style').single('click', _.bind(me.showStyle, me));
|
||||
$('#shape-replace').single('click', _.bind(me.showReplace, me));
|
||||
$('#shape-reorder').single('click', _.bind(me.showReorder, me));
|
||||
$('#edit-shape-bordercolor').single('click', _.bind(me.showBorderColor, me));
|
||||
|
||||
$('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
|
||||
|
||||
me.initControls();
|
||||
},
|
||||
|
||||
categoryShow: function(e) {
|
||||
// if ('edit-shape' == $(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'),
|
||||
shapes : Common.SharedSettings.get('shapes'),
|
||||
scope : this
|
||||
}));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
rootLayout: function () {
|
||||
if (this.layout) {
|
||||
return this.layout
|
||||
.find('#edit-shape-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();
|
||||
}
|
||||
},
|
||||
|
||||
showStyleCategory: function (e) {
|
||||
// remove android specific style
|
||||
$('.page[data-page=edit-shape-style] .list-block.inputs-list').removeClass('inputs-list');
|
||||
},
|
||||
|
||||
showStyle: function () {
|
||||
var selector = '#edit-shape-style';
|
||||
this.showPage(selector, true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-shape-fill'),
|
||||
transparent: true
|
||||
});
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showReplace: function () {
|
||||
this.showPage('#edit-shape-replace');
|
||||
},
|
||||
|
||||
showReorder: function () {
|
||||
this.showPage('#edit-shape-reorder');
|
||||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var selector = '#edit-shape-border-color-view';
|
||||
this.showPage(selector, true);
|
||||
|
||||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-shape-border-color] .page-content')
|
||||
});
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
textStyle: 'Style',
|
||||
textReplace: 'Replace',
|
||||
textReorder: 'Reorder',
|
||||
textRemoveShape: 'Remove Shape',
|
||||
textBack: 'Back',
|
||||
textToForeground: 'Bring to Foreground',
|
||||
textToBackground: 'Send to Background',
|
||||
textForward: 'Move Forward',
|
||||
textBackward: 'Move Backward',
|
||||
textFill: 'Fill',
|
||||
textBorder: 'Border',
|
||||
textEffects: 'Effects',
|
||||
textSize: 'Size',
|
||||
textColor: 'Color',
|
||||
textOpacity: 'Opacity'
|
||||
}
|
||||
})(), PE.Views.EditShape || {}))
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -210,4 +210,27 @@ i.icon {
|
|||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
|
||||
}
|
||||
|
||||
// Reorder
|
||||
|
||||
&.icon-move-backward {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
|
||||
}
|
||||
&.icon-move-forward {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
|
||||
}
|
||||
&.icon-move-background {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
|
||||
}
|
||||
&.icon-move-foreground {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
|
||||
}
|
||||
}
|
||||
|
|
@ -180,6 +180,29 @@ i.icon {
|
|||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
|
||||
}
|
||||
|
||||
// Reorder
|
||||
|
||||
&.icon-move-backward {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
|
||||
}
|
||||
&.icon-move-forward {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
|
||||
}
|
||||
&.icon-move-background {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
|
||||
}
|
||||
&.icon-move-foreground {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
// Overwrite color for toolbar
|
||||
|
|
|
|||
Loading…
Reference in a new issue