[PE mobile] Added text and paragraph settings.
This commit is contained in:
Julia Radzhabova
parent
4e61dc351c
commit
49cef9fad2
|
|
@ -140,8 +140,8 @@ require([
|
||||||
// 'DocumentHolder',
|
// 'DocumentHolder',
|
||||||
'Settings',
|
'Settings',
|
||||||
'EditContainer',
|
'EditContainer',
|
||||||
// 'EditText',
|
'EditText',
|
||||||
// 'EditParagraph',
|
'EditParagraph',
|
||||||
// 'EditTable',
|
// 'EditTable',
|
||||||
// 'EditImage',
|
// 'EditImage',
|
||||||
// 'EditShape',
|
// 'EditShape',
|
||||||
|
|
@ -205,8 +205,8 @@ require([
|
||||||
// 'presentationeditor/mobile/app/controller/DocumentHolder',
|
// 'presentationeditor/mobile/app/controller/DocumentHolder',
|
||||||
'presentationeditor/mobile/app/controller/Settings',
|
'presentationeditor/mobile/app/controller/Settings',
|
||||||
'presentationeditor/mobile/app/controller/edit/EditContainer',
|
'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/EditParagraph',
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditTable',
|
// 'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditImage',
|
// 'presentationeditor/mobile/app/controller/edit/EditImage',
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditShape',
|
// 'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||||
|
|
|
||||||
|
|
@ -147,12 +147,12 @@ require([
|
||||||
'Editor',
|
'Editor',
|
||||||
'Toolbar',
|
'Toolbar',
|
||||||
// 'Search',
|
// 'Search',
|
||||||
'Main'
|
'Main',
|
||||||
// 'DocumentHolder',
|
// 'DocumentHolder',
|
||||||
// 'Settings',
|
// 'Settings',
|
||||||
// 'EditContainer',
|
// 'EditContainer',
|
||||||
// 'EditText',
|
'EditText',
|
||||||
// 'EditParagraph',
|
'EditParagraph'
|
||||||
// 'EditTable',
|
// 'EditTable',
|
||||||
// 'EditImage',
|
// 'EditImage',
|
||||||
// 'EditShape',
|
// 'EditShape',
|
||||||
|
|
@ -212,12 +212,12 @@ require([
|
||||||
'presentationeditor/mobile/app/controller/Editor',
|
'presentationeditor/mobile/app/controller/Editor',
|
||||||
'presentationeditor/mobile/app/controller/Toolbar',
|
'presentationeditor/mobile/app/controller/Toolbar',
|
||||||
// 'presentationeditor/mobile/app/controller/Search',
|
// 'presentationeditor/mobile/app/controller/Search',
|
||||||
'presentationeditor/mobile/app/controller/Main'
|
'presentationeditor/mobile/app/controller/Main',
|
||||||
// 'presentationeditor/mobile/app/controller/DocumentHolder',
|
// 'presentationeditor/mobile/app/controller/DocumentHolder',
|
||||||
// 'presentationeditor/mobile/app/controller/Settings',
|
// 'presentationeditor/mobile/app/controller/Settings',
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditContainer',
|
'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/EditParagraph'
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditTable',
|
// 'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditImage',
|
// 'presentationeditor/mobile/app/controller/edit/EditImage',
|
||||||
// 'presentationeditor/mobile/app/controller/edit/EditShape',
|
// 'presentationeditor/mobile/app/controller/edit/EditShape',
|
||||||
|
|
|
||||||
|
|
@ -109,13 +109,20 @@ define([
|
||||||
editors = [];
|
editors = [];
|
||||||
|
|
||||||
// TODO: Debug only
|
// TODO: Debug only
|
||||||
editors.push(me._emptyEditController());
|
// editors.push(me._emptyEditController());
|
||||||
return editors;
|
// return editors;
|
||||||
|
|
||||||
|
|
||||||
if (_settings.length < 0) {
|
if (_settings.length < 0) {
|
||||||
editors.push(me._emptyEditController());
|
editors.push(me._emptyEditController());
|
||||||
} else {
|
} else {
|
||||||
|
if (_.contains(_settings, 'slide')) {
|
||||||
|
editors.push({
|
||||||
|
caption: me.textSlide,
|
||||||
|
id: 'edit-text',
|
||||||
|
layout: PE.getController('EditText').getView('EditSlide').rootLayout()
|
||||||
|
})
|
||||||
|
}
|
||||||
if (_.contains(_settings, 'text')) {
|
if (_.contains(_settings, 'text')) {
|
||||||
editors.push({
|
editors.push({
|
||||||
caption: me.textText,
|
caption: me.textText,
|
||||||
|
|
@ -319,35 +326,33 @@ define([
|
||||||
onApiFocusObject: function (objects) {
|
onApiFocusObject: function (objects) {
|
||||||
_settings = [];
|
_settings = [];
|
||||||
|
|
||||||
// Paragraph : 0,
|
var no_text = true;
|
||||||
// Table : 1,
|
|
||||||
// Image : 2,
|
|
||||||
// Header : 3,
|
|
||||||
// Shape : 4,
|
|
||||||
// Slide : 5,
|
|
||||||
// Chart : 6,
|
|
||||||
// MailMerge : 7,
|
|
||||||
// TextArt : 8
|
|
||||||
|
|
||||||
_.each(objects, function(object) {
|
_.each(objects, function(object) {
|
||||||
var type = object.get_ObjectType();
|
var type = object.get_ObjectType();
|
||||||
|
|
||||||
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
|
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
|
||||||
_settings.push('text', 'paragraph');
|
_settings.push('paragraph');
|
||||||
|
no_text = false;
|
||||||
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
|
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
|
||||||
_settings.push('table');
|
// _settings.push('table');
|
||||||
|
no_text = false;
|
||||||
|
} else if (Asc.c_oAscTypeSelectElement.Slide == type) {
|
||||||
|
// _settings.push('slide');
|
||||||
|
no_text = false;
|
||||||
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
|
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
|
||||||
if (object.get_ObjectValue().get_ChartProperties()) {
|
// _settings.push('image');
|
||||||
_settings.push('chart');
|
} else if (Asc.c_oAscTypeSelectElement.Chart == type) {
|
||||||
} else if (object.get_ObjectValue().get_ShapeProperties()) {
|
// _settings.push('chart');
|
||||||
_settings.push('shape');
|
no_text = false;
|
||||||
} else {
|
} else if (Asc.c_oAscTypeSelectElement.Shape == type) {
|
||||||
_settings.push('image');
|
// _settings.push('shape');
|
||||||
}
|
no_text = false;
|
||||||
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
|
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
|
||||||
_settings.push('hyperlink');
|
// _settings.push('hyperlink');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if (!no_text)
|
||||||
|
_settings.unshift('text');
|
||||||
|
|
||||||
// Exclude shapes if chart exist
|
// Exclude shapes if chart exist
|
||||||
if (_settings.indexOf('chart') > -1) {
|
if (_settings.indexOf('chart') > -1) {
|
||||||
|
|
@ -364,7 +369,8 @@ define([
|
||||||
textShape: 'Shape',
|
textShape: 'Shape',
|
||||||
textImage: 'Image',
|
textImage: 'Image',
|
||||||
textChart: 'Chart',
|
textChart: 'Chart',
|
||||||
textHyperlink: 'Hyperlink'
|
textHyperlink: 'Hyperlink',
|
||||||
|
textSlide: 'Slide'
|
||||||
|
|
||||||
}
|
}
|
||||||
})(), PE.Controllers.EditContainer || {}))
|
})(), PE.Controllers.EditContainer || {}))
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,321 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* (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
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EditParagraph.js
|
||||||
|
* Presentation Editor
|
||||||
|
*
|
||||||
|
* Created by Alexander Yuzhin on 10/14/16
|
||||||
|
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'core',
|
||||||
|
'presentationeditor/mobile/app/view/edit/EditParagraph'
|
||||||
|
], function (core) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
PE.Controllers.EditParagraph = Backbone.Controller.extend(_.extend((function() {
|
||||||
|
// Private
|
||||||
|
var _stack = [],
|
||||||
|
_paragraphInfo = {},
|
||||||
|
_paragraphObject = undefined,
|
||||||
|
metricText = Common.Utils.Metric.getCurrentMetricName();
|
||||||
|
|
||||||
|
return {
|
||||||
|
models: [],
|
||||||
|
collections: [],
|
||||||
|
views: [
|
||||||
|
'EditParagraph'
|
||||||
|
],
|
||||||
|
|
||||||
|
initialize: function () {
|
||||||
|
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||||
|
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
|
||||||
|
|
||||||
|
this.addListeners({
|
||||||
|
'EditParagraph': {
|
||||||
|
'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_onListType', _.bind(me.onApiBullets, me));
|
||||||
|
me.api.asc_registerCallback('asc_onPrAlign', _.bind(me.onApiParagraphAlign, me));
|
||||||
|
me.api.asc_registerCallback('asc_canIncreaseIndent', _.bind(me.onApiCanIncreaseIndent, me));
|
||||||
|
me.api.asc_registerCallback('asc_canDecreaseIndent', _.bind(me.onApiCanDecreaseIndent, me));
|
||||||
|
me.api.asc_registerCallback('asc_onLineSpacing', _.bind(me.onApiLineSpacing, me));
|
||||||
|
me.api.asc_registerCallback('asc_onVerticalTextAlign', _.bind(me.onApiVerticalTextAlign, me));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
onLaunch: function () {
|
||||||
|
this.createView('EditParagraph').render();
|
||||||
|
},
|
||||||
|
|
||||||
|
initEvents: function () {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
$('#paragraph-align .button').single('click', _.bind(me.onParagraphAlign, me));
|
||||||
|
$('#paragraph-valign .button').single('click', _.bind(me.onParagraphVAlign, me));
|
||||||
|
$('#font-moveleft, #font-moveright').single('click', _.bind(me.onParagraphMove, me));
|
||||||
|
|
||||||
|
$('#paragraph-distance-before .button').single('click', _.bind(me.onDistanceBefore, me));
|
||||||
|
$('#paragraph-distance-after .button').single('click', _.bind(me.onDistanceAfter, me));
|
||||||
|
|
||||||
|
me.initSettings();
|
||||||
|
},
|
||||||
|
|
||||||
|
categoryShow: function (e) {
|
||||||
|
var $target = $(e.currentTarget);
|
||||||
|
|
||||||
|
if ($target && $target.prop('id') === 'edit-paragraph') {
|
||||||
|
this.initSettings();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onPageShow: function (view, pageId) {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
$('#page-text-linespacing li').single('click', _.buffered(me.onLineSpacing, 100, me));
|
||||||
|
$('.dataview.bullets li').single('click', _.buffered(me.onBullet, 100, me));
|
||||||
|
$('.dataview.numbers li').single('click', _.buffered(me.onNumber, 100, me));
|
||||||
|
|
||||||
|
me.initSettings(pageId);
|
||||||
|
},
|
||||||
|
|
||||||
|
initSettings: function (pageId) {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
me.api && me.api.UpdateInterfaceState();
|
||||||
|
|
||||||
|
if (_paragraphObject) {
|
||||||
|
_paragraphInfo.spaceBefore = _paragraphObject.get_Spacing().get_Before() < 0 ? _paragraphObject.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_Before());
|
||||||
|
_paragraphInfo.spaceAfter = _paragraphObject.get_Spacing().get_After() < 0 ? _paragraphObject.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_After());
|
||||||
|
$('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : _paragraphInfo.spaceBefore + ' ' + metricText);
|
||||||
|
$('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : _paragraphInfo.spaceAfter + ' ' + metricText);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
onParagraphAlign: function (e) {
|
||||||
|
var $target = $(e.currentTarget);
|
||||||
|
|
||||||
|
if ($target) {
|
||||||
|
var id = $target.attr('id'),
|
||||||
|
type = 1;
|
||||||
|
|
||||||
|
if ('font-just' == id) {
|
||||||
|
type = 3;
|
||||||
|
} else if ('font-right' == id) {
|
||||||
|
type = 0;
|
||||||
|
} else if ('font-center' == id) {
|
||||||
|
type = 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#paragraph-align .button').removeClass('active');
|
||||||
|
$target.addClass('active');
|
||||||
|
|
||||||
|
this.api.put_PrAlign(type);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onParagraphVAlign: function (e) {
|
||||||
|
var $target = $(e.currentTarget);
|
||||||
|
|
||||||
|
if ($target) {
|
||||||
|
var id = $target.attr('id'),
|
||||||
|
type = Asc.c_oAscVAlign.Bottom;
|
||||||
|
|
||||||
|
if ('font-top' == id) {
|
||||||
|
type = Asc.c_oAscVAlign.Top;
|
||||||
|
} else if ('font-middle' == id) {
|
||||||
|
type = Asc.c_oAscVAlign.Center;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#paragraph-align .button').removeClass('active');
|
||||||
|
$target.addClass('active');
|
||||||
|
|
||||||
|
this.api.setVerticalAlign(type);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onParagraphMove: function (e) {
|
||||||
|
var $target = $(e.currentTarget);
|
||||||
|
|
||||||
|
if ($target && this.api) {
|
||||||
|
var id = $target.attr('id');
|
||||||
|
|
||||||
|
if ('font-moveleft' == id) {
|
||||||
|
this.api.DecreaseIndent();
|
||||||
|
} else {
|
||||||
|
this.api.IncreaseIndent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLineSpacing: function (e) {
|
||||||
|
var $target = $(e.currentTarget).find('input');
|
||||||
|
|
||||||
|
if ($target && this.api) {
|
||||||
|
var value = parseFloat($target.prop('value')),
|
||||||
|
LINERULE_AUTO = 1;
|
||||||
|
|
||||||
|
this.api.put_PrLineSpacing(LINERULE_AUTO, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onBullet: function (e) {
|
||||||
|
var $bullet = $(e.currentTarget),
|
||||||
|
type = $bullet.data('type');
|
||||||
|
|
||||||
|
$('.dataview.bullets li').removeClass('active');
|
||||||
|
$bullet.addClass('active');
|
||||||
|
|
||||||
|
this.api.put_ListType(0, parseInt(type));
|
||||||
|
},
|
||||||
|
|
||||||
|
onNumber: function (e) {
|
||||||
|
var $number = $(e.currentTarget),
|
||||||
|
type = $number.data('type');
|
||||||
|
|
||||||
|
$('.dataview.numbers li').removeClass('active');
|
||||||
|
$number.addClass('active');
|
||||||
|
|
||||||
|
this.api.put_ListType(1, parseInt(type));
|
||||||
|
},
|
||||||
|
|
||||||
|
onDistanceBefore: function (e) {
|
||||||
|
var $button = $(e.currentTarget),
|
||||||
|
distance = _paragraphInfo.spaceBefore;
|
||||||
|
|
||||||
|
if ($button.hasClass('decrement')) {
|
||||||
|
distance = Math.max(-1, --distance);
|
||||||
|
} else {
|
||||||
|
distance = Math.min(100, ++distance);
|
||||||
|
}
|
||||||
|
|
||||||
|
_paragraphInfo.spaceBefore = distance;
|
||||||
|
|
||||||
|
$('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : (_paragraphInfo.spaceBefore) + ' ' + metricText);
|
||||||
|
|
||||||
|
this.api.put_LineSpacingBeforeAfter(0, (_paragraphInfo.spaceBefore < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceBefore));
|
||||||
|
},
|
||||||
|
|
||||||
|
onDistanceAfter: function (e) {
|
||||||
|
var $button = $(e.currentTarget),
|
||||||
|
distance = _paragraphInfo.spaceAfter;
|
||||||
|
|
||||||
|
if ($button.hasClass('decrement')) {
|
||||||
|
distance = Math.max(-1, --distance);
|
||||||
|
} else {
|
||||||
|
distance = Math.min(100, ++distance);
|
||||||
|
}
|
||||||
|
|
||||||
|
_paragraphInfo.spaceAfter = distance;
|
||||||
|
|
||||||
|
$('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : (_paragraphInfo.spaceAfter) + ' ' + metricText);
|
||||||
|
|
||||||
|
this.api.put_LineSpacingBeforeAfter(1, (_paragraphInfo.spaceAfter < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceAfter));
|
||||||
|
},
|
||||||
|
|
||||||
|
// API handlers
|
||||||
|
|
||||||
|
onApiFocusObject: function (objects) {
|
||||||
|
_stack = objects;
|
||||||
|
|
||||||
|
var paragraphs = [];
|
||||||
|
|
||||||
|
_.each(_stack, function(object) {
|
||||||
|
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
|
||||||
|
paragraphs.push(object);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (paragraphs.length > 0) {
|
||||||
|
var object = paragraphs[paragraphs.length - 1]; // get top
|
||||||
|
_paragraphObject = object.get_ObjectValue();
|
||||||
|
} else {
|
||||||
|
_paragraphObject = undefined;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiBullets: function(data) {
|
||||||
|
var type = data.get_ListType(),
|
||||||
|
subtype = data.get_ListSubType();
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 0:
|
||||||
|
$('.dataview.bullets li[data-type=' + subtype + ']').addClass('active');
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
$('.dataview.numbers li[data-type=' + subtype + ']').addClass('active');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiParagraphAlign: function(align) {
|
||||||
|
$('#font-right').toggleClass('active', align===0);
|
||||||
|
$('#font-left').toggleClass('active', align===1);
|
||||||
|
$('#font-center').toggleClass('active', align===2);
|
||||||
|
$('#font-just').toggleClass('active', align===3);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiVerticalTextAlign: function(align) {
|
||||||
|
$('#font-top').toggleClass('active', align===Asc.c_oAscVAlign.Top);
|
||||||
|
$('#font-middle').toggleClass('active', align===Asc.c_oAscVAlign.Center);
|
||||||
|
$('#font-bottom').toggleClass('active', align===Asc.c_oAscVAlign.Bottom);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiLineSpacing: function(vc) {
|
||||||
|
var line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
|
||||||
|
|
||||||
|
$('#page-text-linespacing input').val([line]);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
onApiCanIncreaseIndent: function(value) {
|
||||||
|
$('#font-moveright').toggleClass('disabled', !value);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiCanDecreaseIndent: function(value) {
|
||||||
|
$('#font-moveleft').toggleClass('disabled', !value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})(), PE.Controllers.EditParagraph || {}))
|
||||||
|
});
|
||||||
433
apps/presentationeditor/mobile/app/controller/edit/EditText.js
Normal file
433
apps/presentationeditor/mobile/app/controller/edit/EditText.js
Normal file
|
|
@ -0,0 +1,433 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* (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
|
||||||
|
* Presentation Editor
|
||||||
|
*
|
||||||
|
* Created by Alexander Yuzhin on 10/4/16
|
||||||
|
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'core',
|
||||||
|
'presentationeditor/mobile/app/view/edit/EditText'
|
||||||
|
], function (core) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
PE.Controllers.EditText = Backbone.Controller.extend(_.extend((function() {
|
||||||
|
var _fontsArray = [],
|
||||||
|
_stack = [],
|
||||||
|
_paragraphObject = undefined,
|
||||||
|
_fontInfo = {};
|
||||||
|
|
||||||
|
function onApiLoadFonts(fonts, select) {
|
||||||
|
_.each(fonts, function(font){
|
||||||
|
var fontId = font.asc_getFontId();
|
||||||
|
_fontsArray.push({
|
||||||
|
id : fontId,
|
||||||
|
name : font.asc_getFontName(),
|
||||||
|
// displayValue: font.asc_getFontName(),
|
||||||
|
imgidx : font.asc_getFontThumbnail(),
|
||||||
|
type : font.asc_getFontType()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
Common.NotificationCenter.trigger('fonts:load', _fontsArray, select);
|
||||||
|
}
|
||||||
|
|
||||||
|
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_onInitEditorFonts', _.bind(onApiLoadFonts, me));
|
||||||
|
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
|
||||||
|
me.api.asc_registerCallback('asc_onFontFamily', _.bind(me.onApiChangeFont, me));
|
||||||
|
me.api.asc_registerCallback('asc_onFontSize', _.bind(me.onApiFontSize, me));
|
||||||
|
me.api.asc_registerCallback('asc_onBold', _.bind(me.onApiBold, me));
|
||||||
|
me.api.asc_registerCallback('asc_onItalic', _.bind(me.onApiItalic, me));
|
||||||
|
me.api.asc_registerCallback('asc_onUnderline', _.bind(me.onApiUnderline, me));
|
||||||
|
me.api.asc_registerCallback('asc_onStrikeout', _.bind(me.onApiStrikeout, me));
|
||||||
|
me.api.asc_registerCallback('asc_onVerticalAlign', _.bind(me.onApiVerticalAlign, me));
|
||||||
|
me.api.asc_registerCallback('asc_onTextColor', _.bind(me.onApiTextColor, me));
|
||||||
|
|
||||||
|
// me.api.asc_registerCallback('asc_onUpdateThemeIndex', _.bind(this.onApiUpdateThemeIndex, this));
|
||||||
|
// me.api.asc_registerCallback('asc_onCanGroup', _.bind(this.onApiCanGroup, this));
|
||||||
|
// me.api.asc_registerCallback('asc_onCanUnGroup', _.bind(this.onApiCanUnGroup, this));
|
||||||
|
// me.api.asc_registerCallback('asc_onPresentationSize', _.bind(this.onApiPageSize, this));
|
||||||
|
// me.api.asc_registerCallback('asc_onInitEditorStyles', _.bind(this.onApiInitEditorStyles, this));
|
||||||
|
},
|
||||||
|
|
||||||
|
onLaunch: function () {
|
||||||
|
this.createView('EditText').render();
|
||||||
|
},
|
||||||
|
|
||||||
|
initEvents: function () {
|
||||||
|
var me = this;
|
||||||
|
$('#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-strikethrough').single('click', _.bind(me.onStrikethrough, me));
|
||||||
|
|
||||||
|
me.initSettings();
|
||||||
|
},
|
||||||
|
|
||||||
|
onPageShow: function (view, pageId) {
|
||||||
|
var me = this,
|
||||||
|
paletteTextColor = me.getView('EditText').paletteTextColor;
|
||||||
|
|
||||||
|
$('#text-additional li').single('click', _.buffered(me.onAdditional, 100, me));
|
||||||
|
$('#page-text-linespacing li').single('click', _.buffered(me.onLineSpacing, 100, me));
|
||||||
|
$('#font-size .button').single('click', _.bind(me.onFontSize, me));
|
||||||
|
$('#letter-spacing .button').single('click', _.bind(me.onLetterSpacing, me));
|
||||||
|
|
||||||
|
$('.dataview.bullets li').single('click', _.buffered(me.onBullet, 100, me));
|
||||||
|
$('.dataview.numbers li').single('click', _.buffered(me.onNumber, 100, me));
|
||||||
|
|
||||||
|
paletteTextColor && paletteTextColor.on('select', _.bind(me.onTextColor, me));
|
||||||
|
|
||||||
|
me.initSettings(pageId);
|
||||||
|
},
|
||||||
|
|
||||||
|
initSettings: function (pageId) {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
me.api && me.api.UpdateInterfaceState(); // TODO: refactor me
|
||||||
|
|
||||||
|
if (_paragraphObject) {
|
||||||
|
var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]');
|
||||||
|
var $inputTextCaps = $('#text-additional input[name=text-caps]');
|
||||||
|
|
||||||
|
_paragraphObject.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough');
|
||||||
|
_paragraphObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough');
|
||||||
|
|
||||||
|
_paragraphObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small');
|
||||||
|
_paragraphObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all');
|
||||||
|
|
||||||
|
_fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing());
|
||||||
|
$('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Public
|
||||||
|
|
||||||
|
getFonts: function() {
|
||||||
|
return _fontsArray;
|
||||||
|
},
|
||||||
|
|
||||||
|
getStack: function() {
|
||||||
|
return _stack;
|
||||||
|
},
|
||||||
|
|
||||||
|
getFontInfo: function () {
|
||||||
|
return _fontInfo;
|
||||||
|
},
|
||||||
|
|
||||||
|
getParagraph: function () {
|
||||||
|
return _paragraphObject;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
|
||||||
|
onBold: function (e) {
|
||||||
|
var pressed = this._toggleButton(e);
|
||||||
|
|
||||||
|
if (this.api) {
|
||||||
|
this.api.put_TextPrBold(pressed);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onItalic: function (e) {
|
||||||
|
var pressed = this._toggleButton(e);
|
||||||
|
|
||||||
|
if (this.api) {
|
||||||
|
this.api.put_TextPrItalic(pressed);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onUnderline: function (e) {
|
||||||
|
var pressed = this._toggleButton(e);
|
||||||
|
|
||||||
|
if (this.api) {
|
||||||
|
this.api.put_TextPrUnderline(pressed);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onStrikethrough: function (e) {
|
||||||
|
var pressed = this._toggleButton(e);
|
||||||
|
|
||||||
|
if (this.api) {
|
||||||
|
this.api.put_TextPrStrikeout(pressed);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdditionalStrikethrough : function ($target) {
|
||||||
|
var value = $target.prop('value'),
|
||||||
|
checked = $target.prop('checked'),
|
||||||
|
paragraphProps = new Asc.asc_CParagraphProperty();
|
||||||
|
|
||||||
|
if ('strikethrough' == value) {
|
||||||
|
paragraphProps.put_DStrikeout(false);
|
||||||
|
paragraphProps.put_Strikeout(checked);
|
||||||
|
} else {
|
||||||
|
paragraphProps.put_DStrikeout(checked);
|
||||||
|
paragraphProps.put_Strikeout(false);
|
||||||
|
}
|
||||||
|
this.api.paraApply(paragraphProps);
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdditionalScript : function ($target) {
|
||||||
|
var value = $target.prop('value'),
|
||||||
|
checked = $target.prop('checked');
|
||||||
|
|
||||||
|
if ('superscript' == value) {
|
||||||
|
this.api.put_TextPrBaseline(checked ? 1 : 0);
|
||||||
|
} else {
|
||||||
|
this.api.put_TextPrBaseline(checked ? 2 : 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdditionalCaps : function ($target) {
|
||||||
|
var value = $target.prop('value'),
|
||||||
|
checked = $target.prop('checked'),
|
||||||
|
paragraphProps = new Asc.asc_CParagraphProperty();
|
||||||
|
|
||||||
|
if ('small' == value) {
|
||||||
|
paragraphProps.put_AllCaps(false);
|
||||||
|
paragraphProps.put_SmallCaps(checked);
|
||||||
|
} else {
|
||||||
|
paragraphProps.put_AllCaps(checked);
|
||||||
|
paragraphProps.put_SmallCaps(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.api.paraApply(paragraphProps);
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdditional: function(e) {
|
||||||
|
var me = this,
|
||||||
|
$target = $(e.currentTarget).find('input'),
|
||||||
|
prevValue = $target.prop('prevValue');
|
||||||
|
|
||||||
|
if (prevValue == $target.prop('value')) {
|
||||||
|
$target.prop('checked', false);
|
||||||
|
prevValue = null;
|
||||||
|
} else {
|
||||||
|
$target.prop('checked', true);
|
||||||
|
prevValue = $target.prop('value');
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#page-text-additional input[name="'+ $target.prop('name') +'"]').prop('prevValue', prevValue);
|
||||||
|
|
||||||
|
var radioName = $target.prop('name');
|
||||||
|
if ('text-strikethrough' == radioName) {
|
||||||
|
me.onAdditionalStrikethrough($target);
|
||||||
|
} else if ('text-script' == radioName) {
|
||||||
|
me.onAdditionalScript($target);
|
||||||
|
} else if ('text-caps' == radioName){
|
||||||
|
me.onAdditionalCaps($target);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onFontClick: function (view, e) {
|
||||||
|
var $item = $(e.currentTarget).find('input');
|
||||||
|
|
||||||
|
if ($item) {
|
||||||
|
this.api.put_TextPrFontName($item.prop('value'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onFontSize: function (e) {
|
||||||
|
var $button = $(e.currentTarget),
|
||||||
|
fontSize = _fontInfo.size;
|
||||||
|
|
||||||
|
if ($button.hasClass('decrement')) {
|
||||||
|
_.isUndefined(fontSize) ? this.api.FontSizeOut() : fontSize = Math.max(1, --fontSize);
|
||||||
|
} else {
|
||||||
|
_.isUndefined(fontSize) ? this.api.FontSizeIn() : fontSize = Math.min(100, ++fontSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (! _.isUndefined(fontSize)) {
|
||||||
|
this.api.put_TextPrFontSize(fontSize);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLetterSpacing: function (e) {
|
||||||
|
var $button = $(e.currentTarget),
|
||||||
|
spacing = _fontInfo.letterSpacing;
|
||||||
|
|
||||||
|
if ($button.hasClass('decrement')) {
|
||||||
|
spacing = Math.max(-100, --spacing);
|
||||||
|
} else {
|
||||||
|
spacing = Math.min(100, ++spacing);
|
||||||
|
}
|
||||||
|
_fontInfo.letterSpacing = spacing;
|
||||||
|
|
||||||
|
$('#letter-spacing .item-after label').text(spacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
|
||||||
|
|
||||||
|
var properties = new Asc.asc_CParagraphProperty();
|
||||||
|
properties.put_TextSpacing(Common.Utils.Metric.fnRecalcToMM(spacing));
|
||||||
|
|
||||||
|
this.api.paraApply(properties);
|
||||||
|
},
|
||||||
|
|
||||||
|
onTextColor: function (palette, color) {
|
||||||
|
// $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr);
|
||||||
|
|
||||||
|
if (this.api) {
|
||||||
|
this.api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// API handlers
|
||||||
|
|
||||||
|
onApiFocusObject: function (objects) {
|
||||||
|
_stack = objects;
|
||||||
|
|
||||||
|
var paragraphs = [];
|
||||||
|
|
||||||
|
_.each(_stack, function(object) {
|
||||||
|
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
|
||||||
|
paragraphs.push(object);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (paragraphs.length > 0) {
|
||||||
|
var object = paragraphs[paragraphs.length - 1]; // get top
|
||||||
|
_paragraphObject = object.get_ObjectValue();
|
||||||
|
} else {
|
||||||
|
_paragraphObject = undefined;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiChangeFont: function(font) {
|
||||||
|
var name = (_.isFunction(font.get_Name) ? font.get_Name() : font.asc_getName()) || this.textFonts;
|
||||||
|
_fontInfo.name = name;
|
||||||
|
|
||||||
|
$('#font-fonts .item-title').html(name);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiFontSize: function(size) {
|
||||||
|
_fontInfo.size = size;
|
||||||
|
var displaySize = _fontInfo.size;
|
||||||
|
|
||||||
|
_.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);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiBold: function(on) {
|
||||||
|
$('#font-bold').toggleClass('active', on);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiItalic: function(on) {
|
||||||
|
$('#font-italic').toggleClass('active', on);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiUnderline: function(on) {
|
||||||
|
$('#font-underline').toggleClass('active', on);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiStrikeout: function(on) {
|
||||||
|
$('#font-strikethrough').toggleClass('active', on);
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiVerticalAlign: function(typeBaseline) {
|
||||||
|
var value;
|
||||||
|
|
||||||
|
typeBaseline==1 && (value = 'superscript');
|
||||||
|
typeBaseline==2 && (value = 'subscript');
|
||||||
|
|
||||||
|
if (!_.isUndefined(value)) {
|
||||||
|
$('#text-additional input[name=text-script]').val([value]).prop('prevValue', value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onApiTextColor: function (color) {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
if (color.get_auto()) {
|
||||||
|
// on auto
|
||||||
|
} else {
|
||||||
|
var palette = me.getView('EditText').paletteTextColor,
|
||||||
|
clr;
|
||||||
|
|
||||||
|
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());
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#font-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (palette) {
|
||||||
|
palette.select(clr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
_toggleButton: function (e) {
|
||||||
|
return $(e.currentTarget).toggleClass('active').hasClass('active');
|
||||||
|
},
|
||||||
|
|
||||||
|
textFonts: 'Fonts',
|
||||||
|
textAuto: 'Auto',
|
||||||
|
textPt: 'pt'
|
||||||
|
}
|
||||||
|
})(), PE.Controllers.EditText || {}))
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
<!-- Root view -->
|
||||||
|
<div id="edit-paragraph-root">
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li><div id="paragraph-align" class="item-content buttons">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="row">
|
||||||
|
<a id="font-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||||
|
<a id="font-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||||
|
<a id="font-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||||
|
<a id="font-just" class="button no-ripple"><i class="icon icon-text-align-jast"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></li>
|
||||||
|
<li><div id="paragraph-valign" class="item-content buttons">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="row">
|
||||||
|
<a id="font-top" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
|
||||||
|
<a id="font-middle" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
|
||||||
|
<a id="font-bottom" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></li>
|
||||||
|
<li><div class="item-content buttons">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="row">
|
||||||
|
<a id="font-moveleft" class="button no-ripple"><i class="icon icon-de-indent"></i></a>
|
||||||
|
<a id="font-moveright" class="button no-ripple"><i class="icon icon-in-indent"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></li>
|
||||||
|
<li><a id="font-bullets" class="item-link">
|
||||||
|
<div class="item-content">
|
||||||
|
<% if (!android) { %><div class="item-media"><i class="icon icon-bullets"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textBullets %></div>
|
||||||
|
</div>
|
||||||
|
</div></a></li>
|
||||||
|
<li><a id="font-numbers" class="item-link">
|
||||||
|
<div class="item-content">
|
||||||
|
<% if (!android) { %><div class="item-media"><i class="icon icon-numbers"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textNumbers %></div>
|
||||||
|
</div>
|
||||||
|
</div></a></li>
|
||||||
|
<li><a id="font-line-spacing" class="item-link">
|
||||||
|
<div class="item-content">
|
||||||
|
<% if (!android) { %><div class="item-media"><i class="icon icon-linespacing"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textLineSpacing %></div>
|
||||||
|
</div>
|
||||||
|
</div></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content-block-title"><%= scope.textFromText %></div>
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li id="paragraph-distance-before">
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textBefore %></div>
|
||||||
|
<div class="item-after splitter">
|
||||||
|
<% if (!android) { %><label><%= scope.textAuto %></label><% } %>
|
||||||
|
<p class="buttons-row">
|
||||||
|
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||||
|
<% if (android) { %><label><%= scope.textAuto %></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"><%= scope.textAfter %></div>
|
||||||
|
<div class="item-after splitter">
|
||||||
|
<% if (!android) { %><label><%= scope.textAuto %></label><% } %>
|
||||||
|
<p class="buttons-row">
|
||||||
|
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
|
||||||
|
<% if (android) { %><label><%= scope.textAuto %></label><% } %>
|
||||||
|
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Line Spacing view -->
|
||||||
|
<div id="edit-text-linespacing">
|
||||||
|
<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></a></div>
|
||||||
|
<div class="center sliding"><%= scope.textLineSpacing %></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" id="page-text-linespacing" data-page="edit-text-additional">
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="line-spacing" value="1">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">1.0</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="line-spacing" value="1.15">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">1.15</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="line-spacing" value="1.5">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">1.5</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="line-spacing" value="2">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">2.0</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="line-spacing" value="2.5">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">2.5</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="line-spacing" value="3">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">3.0</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bullets view -->
|
||||||
|
<div id="edit-text-bullets">
|
||||||
|
<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></a></div>
|
||||||
|
<div class="center sliding"><%= scope.textBullets %></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" id="page-text-bullets">
|
||||||
|
<div class="page-content dataview bullets">
|
||||||
|
<% _.each(bullets, function(row) { %>
|
||||||
|
<ul class="row">
|
||||||
|
<% _.each(row, function(bullet) { %>
|
||||||
|
<li data-type="<%= bullet.type %>">
|
||||||
|
<% if (bullet.thumb.length < 1) { %>
|
||||||
|
<div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
|
||||||
|
<% } else { %>
|
||||||
|
<div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
|
||||||
|
<% } %>
|
||||||
|
</li>
|
||||||
|
<% }); %>
|
||||||
|
</ul>
|
||||||
|
<% }); %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Numbers view -->
|
||||||
|
<div id="edit-text-numbers">
|
||||||
|
<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></a></div>
|
||||||
|
<div class="center sliding"><%= scope.textNumbers %></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" id="page-text-numbers">
|
||||||
|
<div class="page-content dataview numbers">
|
||||||
|
<% _.each(numbers, function(row) { %>
|
||||||
|
<ul class="row">
|
||||||
|
<% _.each(row, function(number) { %>
|
||||||
|
<li data-type="<%= number.type %>">
|
||||||
|
<% if (number.thumb.length < 1) { %>
|
||||||
|
<div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
|
||||||
|
<% } else { %>
|
||||||
|
<div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
|
||||||
|
<% } %>
|
||||||
|
</li>
|
||||||
|
<% }); %>
|
||||||
|
</ul>
|
||||||
|
<% }); %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
194
apps/presentationeditor/mobile/app/template/EditText.template
Normal file
194
apps/presentationeditor/mobile/app/template/EditText.template
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
<!-- Root view -->
|
||||||
|
<div id="edit-text-root">
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li><a id="font-fonts" class="item-link">
|
||||||
|
<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>
|
||||||
|
<a id="font-strikethrough" class="button" style="text-decoration: line-through">S</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></li>
|
||||||
|
<li>
|
||||||
|
<a id="font-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><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textFontColor %></div>
|
||||||
|
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a id="font-additional" class="item-link">
|
||||||
|
<div class="item-content">
|
||||||
|
<% if (!android) { %><div class="item-media"><i class="icon icon-text-additional"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textAdditionalFormat %></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</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-font-page">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Font 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></a></div>
|
||||||
|
<div class="center sliding"><%= scope.textFontColors %></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-font-color">
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="list-block" style="<% if (!android) { %>margin-bottom: -36px;<% } %>">
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Additional view -->
|
||||||
|
<div id="edit-text-additional">
|
||||||
|
<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></a></div>
|
||||||
|
<div class="center sliding"><%= scope.textAdditional %></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" id="page-text-additional" data-page="edit-text-additional">
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="list-block" id="text-additional">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="text-strikethrough" value="strikethrough">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textStrikethrough %></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="text-strikethrough" value="double-strikethrough">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textDblStrikethrough %></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="text-script" value="superscript">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textDblSuperscript %></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="text-script" value="subscript">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textSubscript %></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="text-caps" value="small">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textSmallCaps %></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="label-radio item-content">
|
||||||
|
<input type="radio" name="text-caps" value="all">
|
||||||
|
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textAllCaps %></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li id="letter-spacing" id="letter-spacing">
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><%= scope.textLetterSpacing %></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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
172
apps/presentationeditor/mobile/app/view/edit/EditParagraph.js
Normal file
172
apps/presentationeditor/mobile/app/view/edit/EditParagraph.js
Normal file
|
|
@ -0,0 +1,172 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* (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
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EditParagraph.js
|
||||||
|
* Presentation Editor
|
||||||
|
*
|
||||||
|
* Created by Alexander Yuzhin on 10/14/16
|
||||||
|
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'text!presentationeditor/mobile/app/template/EditParagraph.template',
|
||||||
|
'jquery',
|
||||||
|
'underscore',
|
||||||
|
'backbone'
|
||||||
|
], function (editTemplate, $, _, Backbone) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
PE.Views.EditParagraph = Backbone.View.extend(_.extend((function() {
|
||||||
|
// private
|
||||||
|
|
||||||
|
var _bullets = [
|
||||||
|
[
|
||||||
|
{type: -1, thumb: ''},
|
||||||
|
{type: 1, thumb: 'bullet-01.png'},
|
||||||
|
{type: 2, thumb: 'bullet-02.png'},
|
||||||
|
{type: 3, thumb: 'bullet-03.png'}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{type: 4, thumb: 'bullet-04.png'},
|
||||||
|
{type: 5, thumb: 'bullet-05.png'},
|
||||||
|
{type: 6, thumb: 'bullet-06.png'},
|
||||||
|
{type: 7, thumb: 'bullet-07.png'}
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
var _numbers = [
|
||||||
|
[
|
||||||
|
{type: -1, thumb: ''},
|
||||||
|
{type: 4, thumb: 'number-01.png'},
|
||||||
|
{type: 5, thumb: 'number-02.png'},
|
||||||
|
{type: 6, thumb: 'number-03.png'}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{type: 1, thumb: 'number-04.png'},
|
||||||
|
{type: 2, thumb: 'number-05.png'},
|
||||||
|
{type: 3, thumb: 'number-06.png'},
|
||||||
|
{type: 7, thumb: 'number-07.png'}
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
// el: '.view-main',
|
||||||
|
|
||||||
|
template: _.template(editTemplate),
|
||||||
|
|
||||||
|
events: {
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function () {
|
||||||
|
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||||
|
},
|
||||||
|
|
||||||
|
initEvents: function () {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
$('#font-line-spacing').single('click', _.bind(me.showLineSpacing, me));
|
||||||
|
$('#font-bullets').single('click', _.bind(me.showBullets, me));
|
||||||
|
$('#font-numbers').single('click', _.bind(me.showNumbers, me));
|
||||||
|
|
||||||
|
PE.getController('EditParagraph').initSettings();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Render layout
|
||||||
|
render: function () {
|
||||||
|
this.layout = $('<div/>').append(this.template({
|
||||||
|
android : Common.SharedSettings.get('android'),
|
||||||
|
phone : Common.SharedSettings.get('phone'),
|
||||||
|
scope : this,
|
||||||
|
bullets : _bullets,
|
||||||
|
numbers : _numbers
|
||||||
|
}));
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
rootLayout: function () {
|
||||||
|
if (this.layout) {
|
||||||
|
return this.layout
|
||||||
|
.find('#edit-paragraph-root')
|
||||||
|
.html();
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showLineSpacing: function () {
|
||||||
|
this.showPage('#edit-text-linespacing');
|
||||||
|
},
|
||||||
|
|
||||||
|
showBullets: function () {
|
||||||
|
this.showPage('#edit-text-bullets');
|
||||||
|
},
|
||||||
|
|
||||||
|
showNumbers: function () {
|
||||||
|
this.showPage('#edit-text-numbers');
|
||||||
|
},
|
||||||
|
|
||||||
|
textBack: 'Back',
|
||||||
|
textFromText: 'Distance from Text',
|
||||||
|
textBefore: 'Before',
|
||||||
|
textAfter: 'After',
|
||||||
|
textLineSpacing: 'Line Spacing',
|
||||||
|
textBullets: 'Bullets',
|
||||||
|
textNone: 'None',
|
||||||
|
textNumbers: 'Numbers'
|
||||||
|
}
|
||||||
|
})(), PE.Views.EditParagraph || {}))
|
||||||
|
});
|
||||||
189
apps/presentationeditor/mobile/app/view/edit/EditText.js
Normal file
189
apps/presentationeditor/mobile/app/view/edit/EditText.js
Normal file
|
|
@ -0,0 +1,189 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* (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
|
||||||
|
* Presentation Editor
|
||||||
|
*
|
||||||
|
* Created by Alexander Yuzhin on 10/4/16
|
||||||
|
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'text!presentationeditor/mobile/app/template/EditText.template',
|
||||||
|
'jquery',
|
||||||
|
'underscore',
|
||||||
|
'backbone',
|
||||||
|
'common/mobile/lib/component/ThemeColorPalette'
|
||||||
|
], function (editTemplate, $, _, Backbone) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
PE.Views.EditText = Backbone.View.extend(_.extend((function() {
|
||||||
|
// private
|
||||||
|
var _fontsList,
|
||||||
|
_editTextController;
|
||||||
|
|
||||||
|
return {
|
||||||
|
// el: '.view-main',
|
||||||
|
|
||||||
|
template: _.template(editTemplate),
|
||||||
|
|
||||||
|
events: {
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function () {
|
||||||
|
_editTextController = PE.getController('EditText');
|
||||||
|
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||||
|
},
|
||||||
|
|
||||||
|
initEvents: function () {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
$('#font-fonts').single('click', _.bind(me.showFonts, me));
|
||||||
|
$('#font-color').single('click', _.bind(me.showFontColor, me));
|
||||||
|
$('#font-additional').single('click', _.bind(me.showAdditional, me));
|
||||||
|
|
||||||
|
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 () {
|
||||||
|
//
|
||||||
|
},
|
||||||
|
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showFonts: function () {
|
||||||
|
this.showPage('#edit-text-fonts');
|
||||||
|
|
||||||
|
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>'
|
||||||
|
);
|
||||||
|
|
||||||
|
_fontsList = uiApp.virtualList('#font-list.virtual-list', {
|
||||||
|
items: PE.getController('EditText').getFonts(),
|
||||||
|
template: $template.html(),
|
||||||
|
onItemsAfterInsert: function (list, fragment) {
|
||||||
|
var fontInfo = _editTextController.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));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
showFontColor: function () {
|
||||||
|
this.showPage('#edit-text-color', true);
|
||||||
|
|
||||||
|
this.paletteTextColor = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('.page[data-page=edit-text-font-color] .page-content')
|
||||||
|
});
|
||||||
|
|
||||||
|
this.fireEvent('page:show', [this, '#edit-text-color']);
|
||||||
|
},
|
||||||
|
|
||||||
|
showAdditional: function () {
|
||||||
|
this.showPage('#edit-text-additional');
|
||||||
|
},
|
||||||
|
|
||||||
|
textFonts: 'Fonts',
|
||||||
|
textFontColor: 'Font Color',
|
||||||
|
textAdditionalFormat: 'Additional Formatting',
|
||||||
|
textBack: 'Back',
|
||||||
|
textSize: 'Size',
|
||||||
|
textFontColors: 'Font Colors',
|
||||||
|
textAutomatic: 'Automatic',
|
||||||
|
textAdditional: 'Additional',
|
||||||
|
textStrikethrough: 'Strikethrough',
|
||||||
|
textDblStrikethrough: 'Double Strikethrough',
|
||||||
|
textDblSuperscript: 'Superscript',
|
||||||
|
textSubscript: 'Subscript',
|
||||||
|
textSmallCaps: 'Small Caps',
|
||||||
|
textAllCaps: 'All Caps',
|
||||||
|
textLetterSpacing: 'Letter Spacing'
|
||||||
|
}
|
||||||
|
})(), PE.Views.EditText || {}))
|
||||||
|
});
|
||||||
|
|
@ -6500,3 +6500,36 @@ i.icon.icon-link {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #DF6737;
|
background-color: #DF6737;
|
||||||
}
|
}
|
||||||
|
.bullets ul,
|
||||||
|
.numbers ul {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.bullets li,
|
||||||
|
.numbers li {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-right: 1px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
html.pixel-ratio-2 .bullets li,
|
||||||
|
html.pixel-ratio-2 .numbers li {
|
||||||
|
border: 0.5px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
html.pixel-ratio-3 .bullets li,
|
||||||
|
html.pixel-ratio-3 .numbers li {
|
||||||
|
border: 0.33px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
.bullets li .thumb,
|
||||||
|
.numbers li .thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.bullets li .thumb label,
|
||||||
|
.numbers li .thumb label {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 34%;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6099,3 +6099,36 @@ textarea {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #DF6737;
|
background-color: #DF6737;
|
||||||
}
|
}
|
||||||
|
.bullets ul,
|
||||||
|
.numbers ul {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.bullets li,
|
||||||
|
.numbers li {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-right: 1px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
html.pixel-ratio-2 .bullets li,
|
||||||
|
html.pixel-ratio-2 .numbers li {
|
||||||
|
border: 0.5px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
html.pixel-ratio-3 .bullets li,
|
||||||
|
html.pixel-ratio-3 .numbers li {
|
||||||
|
border: 0.33px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
.bullets li .thumb,
|
||||||
|
.numbers li .thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.bullets li .thumb label,
|
||||||
|
.numbers li .thumb label {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 34%;
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 581 B |
Binary file not shown.
|
After Width: | Height: | Size: 645 B |
Binary file not shown.
|
After Width: | Height: | Size: 387 B |
Binary file not shown.
|
After Width: | Height: | Size: 634 B |
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -126,3 +126,43 @@ input, textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bullets and numbers
|
||||||
|
|
||||||
|
.bullets,
|
||||||
|
.numbers {
|
||||||
|
ul {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-right: 1px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
html.pixel-ratio-2 & {
|
||||||
|
border: 0.5px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
html.pixel-ratio-3 & {
|
||||||
|
border: 0.33px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: @white;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 34%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -120,3 +120,43 @@ input, textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bullets and numbers
|
||||||
|
|
||||||
|
.bullets,
|
||||||
|
.numbers {
|
||||||
|
ul {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-right: 1px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
html.pixel-ratio-2 & {
|
||||||
|
border: 0.5px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
html.pixel-ratio-3 & {
|
||||||
|
border: 0.33px solid #c4c4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: @white;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 34%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue