Merge branch 'feature/new-mobile'
This commit is contained in:
Maxim Kadushkin
commit
abdb11649a
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -124,7 +124,7 @@ require([
|
|||
,'Settings'
|
||||
,'EditContainer'
|
||||
,'EditCell'
|
||||
// ,'EditParagraph'
|
||||
,'EditText'
|
||||
// ,'EditTable'
|
||||
,'EditImage'
|
||||
,'EditShape'
|
||||
|
|
@ -195,7 +195,7 @@ require([
|
|||
,'spreadsheeteditor/mobile/app/controller/Settings'
|
||||
,'spreadsheeteditor/mobile/app/controller/edit/EditContainer'
|
||||
,'spreadsheeteditor/mobile/app/controller/edit/EditCell'
|
||||
// ,'spreadsheeteditor/mobile/app/controller/edit/EditParagraph'
|
||||
,'spreadsheeteditor/mobile/app/controller/edit/EditText'
|
||||
// ,'spreadsheeteditor/mobile/app/controller/edit/EditTable'
|
||||
,'spreadsheeteditor/mobile/app/controller/edit/EditImage'
|
||||
,'spreadsheeteditor/mobile/app/controller/edit/EditShape'
|
||||
|
|
|
|||
|
|
@ -167,7 +167,10 @@ define([
|
|||
|
||||
initRootPage: function () {
|
||||
$('#chart-remove').single('click', _.bind(this.onRemoveChart, this));
|
||||
this.updateAxisProps(_chartObject.get_ChartProperties().getType());
|
||||
|
||||
if (!_.isUndefined(_chartObject)) {
|
||||
this.updateAxisProps(_chartObject.get_ChartProperties().getType());
|
||||
}
|
||||
},
|
||||
|
||||
initStylePage: function () {
|
||||
|
|
|
|||
|
|
@ -150,6 +150,13 @@ define([
|
|||
layout: SSE.getController('EditChart').getView('EditChart').rootLayout()
|
||||
})
|
||||
}
|
||||
if (_.contains(_settings, 'text')) {
|
||||
editors.push({
|
||||
caption: me.textText,
|
||||
id: 'edit-text',
|
||||
layout: SSE.getController('EditText').getView('EditText').rootLayout()
|
||||
})
|
||||
}
|
||||
if (_.contains(_settings, 'hyperlink')) {
|
||||
editors.push({
|
||||
caption: me.textHyperlink,
|
||||
|
|
@ -563,10 +570,19 @@ define([
|
|||
// if (showMenu) this.showPopupMenu(documentHolder.ssMenu, {}, event);
|
||||
// }
|
||||
|
||||
if (isChart) {
|
||||
|
||||
if (isChart || isTextChart) {
|
||||
_settings.push('chart');
|
||||
} else if (isShape) {
|
||||
|
||||
if (isTextChart) {
|
||||
_settings.push('text');
|
||||
}
|
||||
} else if (isShape || isTextShape) {
|
||||
_settings.push('shape');
|
||||
|
||||
if (isTextShape) {
|
||||
_settings.push('text');
|
||||
}
|
||||
} else if (isImage) {
|
||||
_settings.push('image');
|
||||
} else {
|
||||
|
|
@ -584,6 +600,7 @@ define([
|
|||
textShape: 'Shape',
|
||||
textImage: 'Image',
|
||||
textChart: 'Chart',
|
||||
textText: 'Text',
|
||||
textHyperlink: 'Hyperlink'
|
||||
|
||||
}
|
||||
|
|
|
|||
360
apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
Normal file
360
apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
/*
|
||||
*
|
||||
* (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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* EditText.js
|
||||
* Spreadsheet Editor
|
||||
*
|
||||
* Created by Alexander Yuzhin on 12/21/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'core',
|
||||
'spreadsheeteditor/mobile/app/view/edit/EditText',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (core, view, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Controllers.EditText = Backbone.Controller.extend(_.extend((function() {
|
||||
// Private
|
||||
var TextType = {inUnknown: 0, inChart: 1, inShape: 2};
|
||||
|
||||
var _textIn = TextType.inUnknown,
|
||||
_fontInfo = undefined,
|
||||
_cellInfo = undefined,
|
||||
_isEdit = false;
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'EditText'
|
||||
],
|
||||
|
||||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
|
||||
this.addListeners({
|
||||
'EditText': {
|
||||
'page:show' : this.onPageShow,
|
||||
'font:click' : this.onFontClick
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function (api) {
|
||||
var me = this;
|
||||
me.api = api;
|
||||
|
||||
me.api.asc_registerCallback('asc_onSelectionChanged', _.bind(me.onApiSelectionChanged, me));
|
||||
me.api.asc_registerCallback('asc_onEditorSelectionChanged', _.bind(me.onApiEditorSelectionChanged, me));
|
||||
},
|
||||
|
||||
setMode: function (mode) {
|
||||
_isEdit = ('edit' === mode);
|
||||
},
|
||||
|
||||
onPageShow: function (view, pageId) {
|
||||
var me = this;
|
||||
|
||||
me.initSettings(pageId);
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
this.createView('EditText').render();
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
me.initSettings();
|
||||
},
|
||||
|
||||
initSettings: function (pageId) {
|
||||
if ($('#edit-text').length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
var me = this;
|
||||
|
||||
if ('#edit-text-fonts' == pageId) {
|
||||
me.initFontsPage();
|
||||
} else if ('#edit-text-color' == pageId) {
|
||||
me.initTextColorPage();
|
||||
} else {
|
||||
me.initRootPage();
|
||||
}
|
||||
},
|
||||
|
||||
initRootPage: function () {
|
||||
if (_.isUndefined(_fontInfo)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var me = this;
|
||||
|
||||
|
||||
// Init font name
|
||||
var fontName = _fontInfo.asc_getName() || this.textFonts;
|
||||
$('#font-fonts .item-title').html(fontName);
|
||||
|
||||
|
||||
// Init font size
|
||||
var displaySize = _fontInfo.asc_getSize();
|
||||
_.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt;
|
||||
|
||||
$('#font-fonts .item-after span:first-child').html(displaySize);
|
||||
$('#font-size .item-after label').html(displaySize);
|
||||
|
||||
|
||||
// Init font style
|
||||
$('#font-bold').toggleClass('active', _fontInfo.asc_getBold() === true);
|
||||
$('#font-italic').toggleClass('active', _fontInfo.asc_getItalic() === true);
|
||||
$('#font-underline').toggleClass('active', _fontInfo.asc_getUnderline() === true);
|
||||
|
||||
|
||||
// Init font color
|
||||
var color = _fontInfo.asc_getColor(),
|
||||
clr = me._sdkToThemeColor(color);
|
||||
|
||||
$('#text-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
|
||||
|
||||
|
||||
// Align
|
||||
$('#edit-text-align-block').css('display', (_textIn == TextType.inShape) ? 'block' : 'none');
|
||||
|
||||
var hAlign = _cellInfo.asc_getHorAlign() || 'left',
|
||||
vAlign = _cellInfo.asc_getVertAlign() || 'bottom';
|
||||
|
||||
$('#font-left').toggleClass('active', hAlign==='left');
|
||||
$('#font-center').toggleClass('active', hAlign==='center');
|
||||
$('#font-right').toggleClass('active', hAlign==='right');
|
||||
$('#font-just').toggleClass('active', hAlign==='justify');
|
||||
$('#font-top').toggleClass('active', vAlign==='top');
|
||||
$('#font-middle').toggleClass('active', vAlign==='center');
|
||||
$('#font-bottom').toggleClass('active', vAlign==='bottom');
|
||||
|
||||
// Handlers
|
||||
$('#font-bold').single('click', _.bind(me.onBold, me));
|
||||
$('#font-italic').single('click', _.bind(me.onItalic, me));
|
||||
$('#font-underline').single('click', _.bind(me.onUnderline, me));
|
||||
$('#font-left').single('click', _.bind(me.onHAlign, me, 'left'));
|
||||
$('#font-center').single('click', _.bind(me.onHAlign, me, 'center'));
|
||||
$('#font-right').single('click', _.bind(me.onHAlign, me, 'right'));
|
||||
$('#font-just').single('click', _.bind(me.onHAlign, me, 'justify'));
|
||||
$('#font-top').single('click', _.bind(me.onVAlign, me, 'top'));
|
||||
$('#font-middle').single('click', _.bind(me.onVAlign, me, 'center'));
|
||||
$('#font-bottom').single('click', _.bind(me.onVAlign, me, 'bottom'));
|
||||
},
|
||||
|
||||
initFontsPage: function () {
|
||||
var me = this,
|
||||
displaySize = _fontInfo.size;
|
||||
|
||||
_.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt;
|
||||
|
||||
$('#font-size .item-after label').html(displaySize);
|
||||
$('#font-size .button').single('click', _.bind(me.onFontSize, me));
|
||||
|
||||
_.defer(function () {
|
||||
me.getView('EditText').renderFonts();
|
||||
}, me);
|
||||
},
|
||||
|
||||
initTextColorPage: function () {
|
||||
var me = this,
|
||||
color = me._sdkToThemeColor(_fontInfo.color),
|
||||
palette = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-text-color] .page-content')
|
||||
});
|
||||
|
||||
if (palette) {
|
||||
palette.select(color);
|
||||
palette.on('select', _.bind(me.onTextColor, me));
|
||||
}
|
||||
},
|
||||
|
||||
// Handlers
|
||||
|
||||
onFontSize: function (e) {
|
||||
var me = this,
|
||||
$button = $(e.currentTarget),
|
||||
fontSize = _fontInfo.size;
|
||||
|
||||
if ($button.hasClass('decrement')) {
|
||||
_.isUndefined(fontSize) ? me.api.asc_decreaseFontSize() : fontSize = Math.max(1, --fontSize);
|
||||
} else {
|
||||
_.isUndefined(fontSize) ? me.api.asc_increaseFontSize() : fontSize = Math.min(100, ++fontSize);
|
||||
}
|
||||
|
||||
if (! _.isUndefined(fontSize)) {
|
||||
me.api.asc_setCellFontSize(fontSize);
|
||||
}
|
||||
},
|
||||
|
||||
onFontClick: function (view, e) {
|
||||
var $item = $(e.currentTarget).find('input');
|
||||
|
||||
if ($item) {
|
||||
this.api.asc_setCellFontName($item.prop('value'));
|
||||
}
|
||||
},
|
||||
|
||||
onBold: function (e) {
|
||||
var pressed = this._toggleButton(e);
|
||||
|
||||
if (this.api) {
|
||||
this.api.asc_setCellBold(pressed);
|
||||
}
|
||||
},
|
||||
|
||||
onItalic: function (e) {
|
||||
var pressed = this._toggleButton(e);
|
||||
|
||||
if (this.api) {
|
||||
this.api.asc_setCellItalic(pressed);
|
||||
}
|
||||
},
|
||||
|
||||
onUnderline: function (e) {
|
||||
var pressed = this._toggleButton(e);
|
||||
|
||||
if (this.api) {
|
||||
this.api.asc_setCellUnderline(pressed);
|
||||
}
|
||||
},
|
||||
|
||||
onHAlign: function(type, e) {
|
||||
var $target = $(e.currentTarget);
|
||||
|
||||
$target.parent('.row').find('a.button').removeClass('active');
|
||||
$target.addClass('active');
|
||||
|
||||
this.api.asc_setCellAlign(type);
|
||||
},
|
||||
|
||||
onVAlign: function(type, e) {
|
||||
var $target = $(e.currentTarget);
|
||||
|
||||
$target.parent('.row').find('a.button').removeClass('active');
|
||||
$target.addClass('active');
|
||||
|
||||
this.api.asc_setCellVertAlign(type);
|
||||
},
|
||||
|
||||
|
||||
onTextColor:function (palette, color) {
|
||||
this.api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
$('#text-color .color-preview').css('background-color', '#' + (_.isObject(color) ? color.color : color));
|
||||
},
|
||||
|
||||
onHAlignChange: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
type = $target.prop('value');
|
||||
|
||||
this.api.asc_setCellAlign(type);
|
||||
},
|
||||
|
||||
onVAlignChange: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
type = $target.prop('value');
|
||||
|
||||
this.api.asc_setCellVertAlign(type);
|
||||
},
|
||||
|
||||
// Public
|
||||
|
||||
getFontInfo: function () {
|
||||
return _fontInfo;
|
||||
},
|
||||
|
||||
// API handlers
|
||||
|
||||
onApiSelectionChanged: function(info) {
|
||||
if (!_isEdit) {
|
||||
return;
|
||||
}
|
||||
|
||||
_cellInfo = info;
|
||||
_fontInfo = info.asc_getFont();
|
||||
|
||||
var selectType = info.asc_getFlags().asc_getSelectionType();
|
||||
|
||||
switch (selectType) {
|
||||
case Asc.c_oAscSelectionType.RangeChartText: _textIn = TextType.inChart; break;
|
||||
case Asc.c_oAscSelectionType.RangeShapeText: _textIn = TextType.inShape; break;
|
||||
default: _textIn = TextType.inUnknown;
|
||||
}
|
||||
},
|
||||
|
||||
onApiEditorSelectionChanged: function(fontObj) {
|
||||
if (!_isEdit) {
|
||||
return;
|
||||
}
|
||||
|
||||
_fontInfo = fontObj;
|
||||
},
|
||||
|
||||
// Helpers
|
||||
|
||||
_toggleButton: function (e) {
|
||||
return $(e.currentTarget).toggleClass('active').hasClass('active');
|
||||
},
|
||||
|
||||
_sdkToThemeColor: function (color) {
|
||||
var clr = 'transparent';
|
||||
|
||||
if (color) {
|
||||
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||
clr = {
|
||||
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
|
||||
effectValue: color.get_value()
|
||||
}
|
||||
} else {
|
||||
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
||||
}
|
||||
}
|
||||
|
||||
return clr;
|
||||
},
|
||||
|
||||
textFonts: 'Fonts',
|
||||
textAuto: 'Auto',
|
||||
textPt: 'pt'
|
||||
};
|
||||
})(), SSE.Controllers.EditText || {}))
|
||||
});
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<li>
|
||||
<a id="text-color" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
|
||||
<% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textTextColor %></div>
|
||||
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<li>
|
||||
<a id="fill-color" class="item-link">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
|
||||
<% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textFillColor %></div>
|
||||
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
|
||||
|
|
|
|||
119
apps/spreadsheeteditor/mobile/app/template/EditText.template
Normal file
119
apps/spreadsheeteditor/mobile/app/template/EditText.template
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<!-- Root view -->
|
||||
<div id="edit-text-root">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="font-fonts" class="item-link" data-page="#edit-text-fonts">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textFonts %></div>
|
||||
<div class="item-after" style="color: #000;"><span></span><span style="margin-left: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="font-bold" class="button"><b>B</b></a>
|
||||
<a id="font-italic" class="button"><i>I</i></a>
|
||||
<a id="font-underline" class="button" style="text-decoration: underline;">U</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="text-color" class="item-link" data-page="#edit-text-color">
|
||||
<div class="item-content">
|
||||
<% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textTextColor %></div>
|
||||
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block" id="edit-text-align-block">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="font-left" class="button no-ripple" data-value="left"><i class="icon icon-text-align-left"></i></a>
|
||||
<a id="font-center" class="button no-ripple" data-value="center"><i class="icon icon-text-align-center"></i></a>
|
||||
<a id="font-right" class="button no-ripple" data-value="right"><i class="icon icon-text-align-right"></i></a>
|
||||
<a id="font-just" class="button no-ripple" data-value="justify"><i class="icon icon-text-align-justify"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content buttons">
|
||||
<div class="item-inner">
|
||||
<div class="row">
|
||||
<a id="font-top" class="button no-ripple" data-value="top"><i class="icon icon-text-valign-top"></i></a>
|
||||
<a id="font-middle" class="button no-ripple" data-value="center"><i class="icon icon-text-valign-middle"></i></a>
|
||||
<a id="font-bottom" class="button no-ripple" data-value="bottom"><i class="icon icon-text-valign-bottom"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fonts view -->
|
||||
<div id="edit-text-fonts">
|
||||
<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.textFonts %></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-text-fonts">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="font-size">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textSize %></div>
|
||||
<div class="item-after splitter">
|
||||
<% if (!android) { %><label></label><% } %>
|
||||
<p class="buttons-row">
|
||||
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||
<% if (android) { %><label></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="content-block-title"><%= scope.textFonts %></div>
|
||||
<div id="font-list" class="list-block virtual-list">
|
||||
<!-- Fonts List -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text color view -->
|
||||
<div id="edit-text-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><%= scope.textBack %></span><% } %></a></div>
|
||||
<div class="center sliding"><%= scope.textTextColor %></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-text-color">
|
||||
<div class="page-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
183
apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
Normal file
183
apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
/*
|
||||
*
|
||||
* (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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* EditText.js
|
||||
* Spreadsheet Editor
|
||||
*
|
||||
* Created by Alexander Yuzhin on 12/21/16
|
||||
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'text!spreadsheeteditor/mobile/app/template/EditText.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Views.EditText = Backbone.View.extend(_.extend((function() {
|
||||
// private
|
||||
var _fontsArray = [];
|
||||
return {
|
||||
// el: '.view-main',
|
||||
|
||||
template: _.template(editTemplate),
|
||||
|
||||
events: {
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
Common.NotificationCenter.on('fonts:load', _.bind(this.onApiFontsLoad, this));
|
||||
this.on('page:show', _.bind(this.updateItemHandlers, this));
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
me.updateItemHandlers();
|
||||
me.initControls();
|
||||
},
|
||||
|
||||
// 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-text-root')
|
||||
.html();
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
initControls: function () {
|
||||
//
|
||||
},
|
||||
|
||||
updateItemHandlers: function () {
|
||||
var selectorsDynamicPage = [
|
||||
'#edit-text'
|
||||
].map(function (selector) {
|
||||
return selector + ' a.item-link[data-page]';
|
||||
}).join(', ');
|
||||
|
||||
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, 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();
|
||||
}
|
||||
},
|
||||
|
||||
renderFonts: function () {
|
||||
var me = this,
|
||||
$template = $(
|
||||
'<div>' +
|
||||
'<li>' +
|
||||
'<label class="label-radio item-content">' +
|
||||
'<input type="radio" name="font-name" value="{{name}}">' +
|
||||
(Framework7.prototype.device.android ? '<div class="item-media"><i class="icon icon-form-radio"></i></div>' : '') +
|
||||
'<div class="item-inner">' +
|
||||
'<div class="item-title" style="font-family: \'{{name}}\';">{{name}}</div>' +
|
||||
'</div>' +
|
||||
'</label>' +
|
||||
'</li>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
uiApp.virtualList('#font-list.virtual-list', {
|
||||
items: _fontsArray,
|
||||
template: $template.html(),
|
||||
onItemsAfterInsert: function (list, fragment) {
|
||||
var fontInfo = SSE.getController('EditText').getFontInfo();
|
||||
$('#font-list input[name=font-name]').val([fontInfo.name]);
|
||||
|
||||
$('#font-list li').single('click', _.buffered(function (e) {
|
||||
me.fireEvent('font:click', [me, e]);
|
||||
}, 100));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onItemClick: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
page = $target.data('page');
|
||||
|
||||
if (page && page.length > 0 ) {
|
||||
this.showPage(page);
|
||||
}
|
||||
},
|
||||
|
||||
onApiFontsLoad: function (fonts, selcted) {
|
||||
_fontsArray = fonts;
|
||||
},
|
||||
|
||||
textBack: 'Back',
|
||||
textFonts: 'Fonts',
|
||||
textTextColor: 'Text Color',
|
||||
textFillColor: 'Fill Color',
|
||||
textSize: 'Size'
|
||||
}
|
||||
})(), SSE.Views.EditText || {}))
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -68,32 +68,32 @@ i.icon {
|
|||
&.icon-text-align-center {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-justify {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-left {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-right {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-valign-top {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
|
||||
.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="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
|
||||
}
|
||||
&.icon-text-valign-middle {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
|
||||
.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="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
|
||||
}
|
||||
&.icon-text-valign-bottom {
|
||||
width: 22px;
|
||||
|
|
|
|||
|
|
@ -58,22 +58,37 @@ i.icon {
|
|||
&.icon-text-align-center {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-justify {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-left {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-align-right {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
|
||||
.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><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
|
||||
}
|
||||
&.icon-text-valign-top {
|
||||
width: 22px;
|
||||
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="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
|
||||
}
|
||||
&.icon-text-valign-middle {
|
||||
width: 22px;
|
||||
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="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
|
||||
}
|
||||
&.icon-text-valign-bottom {
|
||||
width: 22px;
|
||||
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>');
|
||||
}
|
||||
&.icon-insimage {
|
||||
width: 22px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue