Commit e9c73ce8 authored by Alexander Yuzhin's avatar Alexander Yuzhin

[SE mobile] Add editing of shape

parent ccc40403
......@@ -55,7 +55,7 @@ define(
//Extend jQuery functions
jQuery.fn.extend( {
single: function(types, selector, data, fn) {
return this.off(types, selector, fn).on(types, selector, data, fn);
return this.off(types).on(types, selector, data, fn);
}
});
......
......@@ -127,7 +127,7 @@ require([
// ,'EditParagraph'
// ,'EditTable'
// ,'EditImage'
// ,'EditShape'
,'EditShape'
,'EditChart'
// ,'EditHyperlink'
,'AddContainer'
......@@ -198,7 +198,7 @@ require([
// ,'spreadsheeteditor/mobile/app/controller/edit/EditParagraph'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditTable'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditImage'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditShape'
,'spreadsheeteditor/mobile/app/controller/edit/EditShape'
,'spreadsheeteditor/mobile/app/controller/edit/EditChart'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditHyperlink'
,'spreadsheeteditor/mobile/app/controller/add/AddContainer'
......
......@@ -57,7 +57,6 @@ define([
_shapeObject = undefined,
_borderInfo = {color: '000000', width: 1},
_metricText = Common.Utils.Metric.getCurrentMetricName(),
_reverseAxis = false,
_isEdit = false;
var borderSizeTransform = (function() {
......@@ -528,7 +527,8 @@ define([
// Handlers
onRemoveChart: function () {
console.debug('REMOVE CHART')
this.api.asc_Remove();
SSE.getController('EditContainer').hideModal();
},
onReorder: function(e) {
......
......@@ -565,6 +565,10 @@ define([
if (isChart) {
_settings.push('chart');
} else if (isShape) {
_settings.push('shape');
} else if (isImage) {
_settings.push('image');
} else {
_settings.push('cell');
}
......
This diff is collapsed.
<!-- Root view -->
<div id="edit-paragraph-root">
<div class="list-block">
<ul>
<li>
<a id="paragraph-background" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Background</div>
<div class="item-after"><div class="color-preview"></div></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li>
<a id="paragraph-advanced" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Advanced settings</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="content-block-title">Paragraph styles</div>
<div id="paragraph-list" class="list-block">
<ul></ul>
</div>
</div>
<!-- Background color view -->
<div id="edit-paragraph-color">
<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>Back</span><% } %></a></div>
<div class="center sliding">Background</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-paragraph-color">
<div class="page-content">
</div>
</div>
</div>
<!-- Advanced view -->
<div id="edit-paragraph-advanced">
<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>Back</span><% } %></a></div>
<div class="center sliding">Advanced</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-paragraph-advanced">
<div class="page-content">
<div class="content-block-title">Distance from text</div>
<div class="list-block">
<ul>
<li id="paragraph-distance-before">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Before</div>
<div class="item-after splitter">
<% if (!android) { %><label>Auto</label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label>Auto</label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</li>
<li id="paragraph-distance-after">
<div class="item-content">
<div class="item-inner">
<div class="item-title">After</div>
<div class="item-after splitter">
<% if (!android) { %><label>Auto</label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label>Auto</label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li id="paragraph-space">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Space Between Paragraphs</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li id="paragraph-page-break">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Page Break Before</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li id="paragraph-page-orphan">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Orphan Control</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li id="paragraph-page-keeptogether">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Keep Lines Together</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li id="paragraph-page-keepnext">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Keep with Next</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -158,7 +158,7 @@ define([
return;
}
$('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
$('.container-edit a.item-link[data-page]').single('click', _.buffered(this.onItemClick, 100, this));
},
showPage: function (templateId, suspendEvent) {
......
......@@ -173,7 +173,7 @@ define([
return;
}
$('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
$('.container-edit a.item-link[data-page]').single('click', _.buffered(this.onItemClick, 100, this));
$('.edit-chart-style.subnavbar.categories a').single('click', function () {
$('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
......
/*
*
* (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
*
* Created by Alexander Yuzhin on 12/19/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!spreadsheeteditor/mobile/app/template/EditShape.template',
'jquery',
'underscore',
'backbone'
], function (editTemplate, $, _, Backbone) {
'use strict';
SSE.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));
this.on('page:show', _.bind(this.updateItemHandlers, this));
},
initEvents: function () {
var me = this;
$('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
me.updateItemHandlers();
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'),
imgpath : '../../common/mobile/resources/img/shapes',
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 () {
//
},
updateItemHandlers: function () {
if ($('#edit-shape').length < 1) {
return;
}
$('.container-edit a.item-link[data-page]').single('click', _.buffered(this.onItemClick, 100, this));
},
showPage: function (templateId, suspendEvent) {
var rootView = SSE.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');
},
onItemClick: function (e) {
var $target = $(e.currentTarget),
page = $target.data('page');
if (page && page.length > 0 ) {
this.showPage(page);
}
},
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'
}
})(), SSE.Views.EditShape || {}))
});
\ 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