Skip to content

W
web-apps
Commit 17a9d769 authored by Julia Radzhabova's avatar Julia Radzhabova
Browse files
Options

[PE mobile] Edit chart settings.

parent e9c73ce8
Hide whitespace changes
Inline Side-by-side
Showing with 921 additions and 9 deletions
apps/presentationeditor/mobile/app-dev.js
View file @ 17a9d769
......@@ -145,7 +145,7 @@ require([
'EditImage',
'EditShape',
'EditSlide',
// 'EditChart',
'EditChart',
'EditLink',
'AddContainer',
'AddTable',
......@@ -211,7 +211,7 @@ require([
'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/EditChart',
'presentationeditor/mobile/app/controller/edit/EditLink',
'presentationeditor/mobile/app/controller/add/AddContainer',
'presentationeditor/mobile/app/controller/add/AddTable',
......
apps/presentationeditor/mobile/app.js
View file @ 17a9d769
......@@ -156,7 +156,7 @@ require([
'EditImage',
'EditShape',
'EditSlide',
// 'EditChart',
'EditChart',
'EditLink',
'AddContainer',
'AddTable',
......@@ -222,7 +222,7 @@ require([
'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/EditChart',
'presentationeditor/mobile/app/controller/edit/EditLink',
'presentationeditor/mobile/app/controller/add/AddContainer',
'presentationeditor/mobile/app/controller/add/AddTable',
......
apps/presentationeditor/mobile/app/controller/edit/EditChart.js 0 → 100644
View file @ 17a9d769
/*
*
* (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
*
*/
/**
* EditChart.js
* Presentation Editor
*
* Created by Julia Radzhabova on 12/19/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'presentationeditor/mobile/app/view/edit/EditChart',
'jquery',
'underscore',
'backbone'
], function (core, view, $, _, Backbone) {
'use strict';
PE.Controllers.EditChart = Backbone.Controller.extend(_.extend((function() {
// Private
var _stack = [],
_chartObject = undefined,
_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: [
'EditChart'
],
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
this.addListeners({
'EditChart': {
'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_onUpdateChartStyles', _.bind(me.onApiUpdateChartStyles, me));
},
onLaunch: function () {
this.createView('EditChart').render();
},
initEvents: function () {
var me = this;
$('#chart-remove').single('click', _.bind(me.onRemoveChart, me));
me.initSettings();
},
onPageShow: function (view, pageId) {
var me = this;
$('.chart-reorder a').single('click', _.bind(me.onReorder, me));
$('.chart-replace li').single('click', _.buffered(me.onReplace, 100, me));
$('#edit-chart-bordersize input').single('change touchend', _.buffered(me.onBorderSize, 100, me));
$('#edit-chart-bordersize input').single('input', _.bind(me.onBorderSizeChanging, me));
$('#tab-chart-type li').single('click', _.buffered(me.onType, 100, me));
me.initSettings(pageId);
},
initSettings: function (pageId) {
var me = this;
if (_chartObject) {
if (pageId == '#edit-chart-style') {
me._updateChartStyles(me.api.asc_getChartPreviews(_chartObject.getType()));
me._initStyleView();
} else if (pageId == '#edit-chart-border-color-view') {
me._initStyleView();
}
}
},
_initStyleView: function (updateStyles) {
var me = this,
chartProperties = _chartObject,
shapeProperties = _shapeObject,
paletteFillColor = me.getView('EditChart').paletteFillColor,
paletteBorderColor = me.getView('EditChart').paletteBorderColor;
// Style
var type = chartProperties.getType();
$('.chart-types li').removeClass('active');
$('.chart-types li[data-type=' + type + ']').addClass('active');
// Init style border size
var borderSize = shapeProperties.get_stroke().get_width() * 72.0 / 25.4;
$('#edit-chart-bordersize input').val([borderSizeTransform.sizeByIndex(borderSize)]);
$('#edit-chart-bordersize .item-after').text(borderSizeTransform.sizeByValue(borderSize) + ' ' + _metricText);
paletteFillColor && paletteFillColor.on('select', _.bind(me.onFillColor, me));
paletteBorderColor && paletteBorderColor.on('select', _.bind(me.onBorderColor, me));
var sdkColor, color;
// Init fill color
var fill = shapeProperties.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 = shapeProperties.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-chart-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)))
},
// Public
getChart: function () {
return _chartObject;
},
// Handlers
onType: function (e) {
var me = this,
$target = $(e.currentTarget),
type = $target.data('type');
var chart = new Asc.CAscChartProp();
chart.changeType(type);
me.api.ChartApply(chart);
$('.chart-types li').removeClass('active');
$target.addClass('active');
// Force update styles
me._updateChartStyles(me.api.asc_getChartPreviews(chart.getType()));
},
onStyle: function (e) {
var me = this,
$target = $(e.currentTarget),
type = $target.data('type');
var chart = new Asc.CAscChartProp();
chart.putStyle(type);
me.api.ChartApply(chart);
},
onRemoveChart: 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();
}
},
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-chart-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + _metricText);
},
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-chart-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 charts = [],
shapes = [];
_.each(_stack, function (object) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart)
charts.push(object);
else if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Shape && object.get_ObjectValue() && object.get_ObjectValue().get_FromChart()) {
shapes.push(object);
}
});
var getTopObject = function(array) {
if (array.length > 0) {
var object = array[array.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
};
_chartObject = getTopObject(charts);
_shapeObject = getTopObject(shapes);
},
onApiUpdateChartStyles: function () {
if (this.api && _chartObject) {
this._updateChartStyles(this.api.asc_getChartPreviews(_chartObject.getType()));
}
},
// Helpers
_updateChartStyles: function(styles) {
Common.SharedSettings.set('chartstyles', styles);
Common.NotificationCenter.trigger('chartstyles:load', styles);
$('#tab-chart-style li').single('click', _.bind(this.onStyle, this));
},
_closeIfNeed: function () {
if (!this._isChartInStack()) {
PE.getController('EditContainer').hideModal();
}
},
_isChartInStack: function () {
var chartExist = false;
_.some(_stack, function(object) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart && object.get_ObjectValue()) {
chartExist = true;
return true;
}
});
return chartExist;
}
};
})(), PE.Controllers.EditChart || {}))
});
\ No newline at end of file
apps/presentationeditor/mobile/app/controller/edit/EditContainer.js
View file @ 17a9d769
......@@ -328,9 +328,9 @@ define([
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
_settings.push('image');
} else if (Asc.c_oAscTypeSelectElement.Chart == type) {
// _settings.push('chart');
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Shape == type) {
_settings.push('chart');
// no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Shape == type && !object.get_ObjectValue().get_FromChart()) {
_settings.push('shape');
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
......
apps/presentationeditor/mobile/app/template/EditChart.template 0 → 100644
View file @ 17a9d769
<!-- Root view -->
<div id="edit-chart-root">
<div class="list-block">
<ul>
<li>
<a id="chart-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="chart-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">
<% if (!android) { %>
<ul>
<li>
<a id="chart-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveChart %></a>
</li>
</ul>
<% } else { %>
<a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveChart %></a>
<% } %>
</div>
</div>
<!-- Reorder view -->
<div id="edit-chart-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 chart-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>
<!-- Styles view -->
<div id="edit-chart-style">
<div class="navbar">
<div class="navbar-inner edit-chart-style" data-page="edit-chart-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-chart-type" data-type="type" class="tab-link active"><%= scope.textType %></a>
<a href="#tab-chart-style" data-type="style" class="tab-link"><%= scope.textStyle %></a>
<a href="#tab-chart-fill" data-type="fill" class="tab-link"><%= scope.textFill %></a>
<a href="#tab-chart-border" data-type="border" class="tab-link"><%= scope.textBorder %></a>
</div>
</div>
<% } else { %>
<div class="buttons-row">
<a href="#tab-chart-type" data-type="type" class="tab-link button active"><%= scope.textType %></a>
<a href="#tab-chart-style" data-type="style" class="tab-link button"><%= scope.textStyle %></a>
<a href="#tab-chart-fill" data-type="fill" class="tab-link button"><%= scope.textFill %></a>
<a href="#tab-chart-border" data-type="border" class="tab-link button"><%= scope.textBorder %></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-chart-style">
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab-chart-type" class="page-content tab active dataview chart-types">
<% _.each(types, function(row) { %>
<ul class="row">
<% _.each(row, function(type) { %>
<li data-type="<%= type.type %>">
<div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
</li>
<% }); %>
</ul>
<% }); %>
</div>
<div id="tab-chart-style" class="page-content tab dataview chart-styles">
<!--Styles-->
</div>
<div id="tab-chart-fill" class="page-content tab">
<!--Fill colors-->
</div>
<div id="tab-chart-border" class="page-content tab">
<div class="list-block">
<ul>
<li id="edit-chart-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-chart-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>
</div>
</div>
</div>
<!-- Border color view -->
<div id="edit-chart-border-color-view">
<div class="navbar">
<div class="navbar-inner" data-page="edit-chart-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-chart-border-color">
<div class="page-content">
<!--Color palette-->
</div>
</div>
</div>
\ No newline at end of file
apps/presentationeditor/mobile/app/view/edit/EditChart.js 0 → 100644
View file @ 17a9d769
/*
*
* (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
*
*/
/**
* EditChart.js
* Presentation Editor
*
* Created by Julia Radzhabova on 12/19/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!presentationeditor/mobile/app/template/EditChart.template',
'jquery',
'underscore',
'backbone'
], function (editTemplate, $, _, Backbone) {
'use strict';
PE.Views.EditChart = Backbone.View.extend(_.extend((function() {
// private
var _styles = [];
var _types = [
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'},
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'},
{ type: Asc.c_oAscChartTypeSettings.barStackedPer, thumb: 'chart-01.png'},
{ type: Asc.c_oAscChartTypeSettings.lineNormal, thumb: 'chart-06.png'},
{ type: Asc.c_oAscChartTypeSettings.lineStacked, thumb: 'chart-05.png'},
{ type: Asc.c_oAscChartTypeSettings.lineStackedPer, thumb: 'chart-04.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarNormal, thumb: 'chart-09.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStacked, thumb: 'chart-08.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer, thumb: 'chart-07.png'},
{ type: Asc.c_oAscChartTypeSettings.areaNormal, thumb: 'chart-12.png'},
{ type: Asc.c_oAscChartTypeSettings.areaStacked, thumb: 'chart-11.png'},
{ type: Asc.c_oAscChartTypeSettings.areaStackedPer, thumb: 'chart-10.png'},
{ type: Asc.c_oAscChartTypeSettings.pie, thumb: 'chart-13.png'},
{ type: Asc.c_oAscChartTypeSettings.doughnut, thumb: 'chart-14.png'},
{ type: Asc.c_oAscChartTypeSettings.pie3d, thumb: 'chart-22.png'},
{ type: Asc.c_oAscChartTypeSettings.scatter, thumb: 'chart-15.png'},
{ type: Asc.c_oAscChartTypeSettings.stock, thumb: 'chart-16.png'},
{ type: Asc.c_oAscChartTypeSettings.line3d, thumb: 'chart-21.png'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3d, thumb: 'chart-17.png'},
{ type: Asc.c_oAscChartTypeSettings.barStacked3d, thumb: 'chart-18.png'},
{ type: Asc.c_oAscChartTypeSettings.barStackedPer3d, thumb: 'chart-19.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarNormal3d, thumb: 'chart-25.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStacked3d, thumb: 'chart-24.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, thumb: 'chart-23.png'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'}
];
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));
Common.NotificationCenter.on('chartstyles:load', _.bind(this.onStylesLoad, this));
},
initEvents: function () {
var me = this;
$('#chart-style').single('click', _.bind(me.showStyle, me));
$('#chart-reorder').single('click', _.bind(me.showReorder, me));
$('#edit-chart-bordercolor').single('click', _.bind(me.showBorderColor, me));
$('.edit-chart-style .categories a').single('click', _.bind(me.showStyleCategory, me));
me.initControls();
me.renderStyles();
},
categoryShow: function(e) {
//
},
onStylesLoad: function () {
_styles = Common.SharedSettings.get('chartstyles');
this.renderStyles();
},
// Render layout
render: function () {
var elementsInRow = 3;
var groupsOfTypes = _.chain(_types).groupBy(function(element, index){
return Math.floor(index/elementsInRow);
}).toArray().value();
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
types : groupsOfTypes,
scope : this
}));
return this;
},
rootLayout: function () {
if (this.layout) {
return this.layout
.find('#edit-chart-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-chart-style] .list-block.inputs-list').removeClass('inputs-list');
},
renderStyles: function() {
var $styleContainer = $('#tab-chart-style');
if ($styleContainer.length > 0) {
var columns = parseInt($styleContainer.width() / 70), // magic
row = -1,
styles = [];
_.each(_styles, function (style, index) {
if (0 == index % columns) {
styles.push([]);
row++
}
styles[row].push(style);
});
var template = _.template([
'<% _.each(styles, function(row) { %>',
'<ul class="row">',
'<% _.each(row, function(style) { %>',
'<li data-type="<%= style.asc_getStyle() %>">',
'<img src="<%= style.asc_getImageUrl() %>" width="50px" height="50px">',
'</li>',
'<% }); %>',
'</ul>',
'<% }); %>'
].join(''), {
styles: styles
});
$styleContainer.html(template);
}
},
showStyle: function () {
var selector = '#edit-chart-style';
this.showPage(selector, true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-chart-fill'),
transparent: true
});
this.fireEvent('page:show', [this, selector]);
},
showReorder: function () {
this.showPage('#edit-chart-reorder');
},
showBorderColor: function () {
var selector = '#edit-chart-border-color-view';
this.showPage(selector, true);
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-chart-border-color] .page-content')
});
this.fireEvent('page:show', [this, selector]);
},
textStyle: 'Style',
textReorder: 'Reorder',
textRemoveChart: 'Remove Chart',
textBack: 'Back',
textToForeground: 'Bring to Foreground',
textToBackground: 'Send to Background',
textForward: 'Move Forward',
textBackward: 'Move Backward',
textType: 'Type',
textFill: 'Fill',
textBorder: 'Border',
textSize: 'Size',
textColor: 'Color'
}
})(), PE.Views.EditChart || {}))
});
\ No newline at end of file
apps/presentationeditor/mobile/resources/css/app-ios.css
View file @ 17a9d769
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/presentationeditor/mobile/resources/css/app-material.css
View file @ 17a9d769
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/presentationeditor/mobile/resources/less/app-ios.less
View file @ 17a9d769
......@@ -205,4 +205,20 @@ input, textarea {
height: 38px;
}
}
}
// Charts
.chart-types {
li {
width: 60px;
height: 60px;
margin: 6px;
.thumb {
width: 100%;
height: 100%;
background-size: contain;
}
}
}
\ No newline at end of file
apps/presentationeditor/mobile/resources/less/app-material.less
View file @ 17a9d769
......@@ -198,4 +198,20 @@ input, textarea {
height: 38px;
}
}
}
// Charts
.chart-types {
li {
width: 60px;
height: 60px;
margin: 6px;
.thumb {
width: 100%;
height: 100%;
background-size: contain;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7