Commit 97ec7f09 authored by Julia Radzhabova's avatar Julia Radzhabova

[PE mobile] Join text and paragraph settings into one panel Text.

parent 39c860a8
...@@ -141,7 +141,7 @@ require([ ...@@ -141,7 +141,7 @@ require([
'Settings', 'Settings',
'EditContainer', 'EditContainer',
'EditText', 'EditText',
'EditParagraph', // 'EditParagraph',
// 'EditTable', // 'EditTable',
// 'EditImage', // 'EditImage',
// 'EditShape', // 'EditShape',
...@@ -206,7 +206,7 @@ require([ ...@@ -206,7 +206,7 @@ require([
'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',
......
...@@ -151,8 +151,8 @@ require([ ...@@ -151,8 +151,8 @@ require([
// 'DocumentHolder', // 'DocumentHolder',
// 'Settings', // 'Settings',
// 'EditContainer', // 'EditContainer',
'EditText', 'EditText'
'EditParagraph' // 'EditParagraph'
// 'EditTable', // 'EditTable',
// 'EditImage', // 'EditImage',
// 'EditShape', // 'EditShape',
...@@ -216,8 +216,8 @@ require([ ...@@ -216,8 +216,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',
......
...@@ -119,7 +119,7 @@ define([ ...@@ -119,7 +119,7 @@ define([
if (_.contains(_settings, 'slide')) { if (_.contains(_settings, 'slide')) {
editors.push({ editors.push({
caption: me.textSlide, caption: me.textSlide,
id: 'edit-text', id: 'edit-slide',
layout: PE.getController('EditText').getView('EditSlide').rootLayout() layout: PE.getController('EditText').getView('EditSlide').rootLayout()
}) })
} }
...@@ -130,13 +130,6 @@ define([ ...@@ -130,13 +130,6 @@ define([
layout: PE.getController('EditText').getView('EditText').rootLayout() layout: PE.getController('EditText').getView('EditText').rootLayout()
}) })
} }
if (_.contains(_settings, 'paragraph')) {
editors.push({
caption: me.textParagraph,
id: 'edit-paragraph',
layout: PE.getController('EditParagraph').getView('EditParagraph').rootLayout()
})
}
if (_.contains(_settings, 'table')) { if (_.contains(_settings, 'table')) {
editors.push({ editors.push({
caption: me.textTable, caption: me.textTable,
...@@ -331,7 +324,6 @@ define([ ...@@ -331,7 +324,6 @@ define([
var type = object.get_ObjectType(); var type = object.get_ObjectType();
if (Asc.c_oAscTypeSelectElement.Paragraph == type) { if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
_settings.push('paragraph');
no_text = false; no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Table == type) { } else if (Asc.c_oAscTypeSelectElement.Table == type) {
// _settings.push('table'); // _settings.push('table');
...@@ -364,7 +356,6 @@ define([ ...@@ -364,7 +356,6 @@ define([
textSettings: 'Settings', textSettings: 'Settings',
textText: 'Text', textText: 'Text',
textParagraph: 'Paragraph',
textTable: 'Table', textTable: 'Table',
textShape: 'Shape', textShape: 'Shape',
textImage: 'Image', textImage: 'Image',
......
/*
*
* (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 || {}))
});
\ No newline at end of file
...@@ -50,7 +50,9 @@ define([ ...@@ -50,7 +50,9 @@ define([
var _fontsArray = [], var _fontsArray = [],
_stack = [], _stack = [],
_paragraphObject = undefined, _paragraphObject = undefined,
_fontInfo = {}; _fontInfo = {},
_paragraphInfo = {},
metricText = Common.Utils.Metric.getCurrentMetricName();
function onApiLoadFonts(fonts, select) { function onApiLoadFonts(fonts, select) {
_.each(fonts, function(font){ _.each(fonts, function(font){
...@@ -76,6 +78,7 @@ define([ ...@@ -76,6 +78,7 @@ define([
initialize: function () { initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this)); Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
this.addListeners({ this.addListeners({
'EditText': { 'EditText': {
...@@ -100,6 +103,13 @@ define([ ...@@ -100,6 +103,13 @@ define([
me.api.asc_registerCallback('asc_onVerticalAlign', _.bind(me.onApiVerticalAlign, 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_onTextColor', _.bind(me.onApiTextColor, 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));
// me.api.asc_registerCallback('asc_onUpdateThemeIndex', _.bind(this.onApiUpdateThemeIndex, this)); // 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_onCanGroup', _.bind(this.onApiCanGroup, this));
// me.api.asc_registerCallback('asc_onCanUnGroup', _.bind(this.onApiCanUnGroup, this)); // me.api.asc_registerCallback('asc_onCanUnGroup', _.bind(this.onApiCanUnGroup, this));
...@@ -118,7 +128,22 @@ define([ ...@@ -118,7 +128,22 @@ define([
$('#font-underline').single('click', _.bind(me.onUnderline, me)); $('#font-underline').single('click', _.bind(me.onUnderline, me));
$('#font-strikethrough').single('click', _.bind(me.onStrikethrough, me)); $('#font-strikethrough').single('click', _.bind(me.onStrikethrough, me));
me.initSettings(); $('#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-text') {
this.initSettings();
}
}, },
onPageShow: function (view, pageId) { onPageShow: function (view, pageId) {
...@@ -144,17 +169,24 @@ define([ ...@@ -144,17 +169,24 @@ define([
me.api && me.api.UpdateInterfaceState(); // TODO: refactor me me.api && me.api.UpdateInterfaceState(); // TODO: refactor me
if (_paragraphObject) { if (_paragraphObject) {
var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]'); if (pageId == '#edit-text-additional') {
var $inputTextCaps = $('#text-additional input[name=text-caps]'); 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_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough');
_paragraphObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough'); _paragraphObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough');
_paragraphObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small'); _paragraphObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small');
_paragraphObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all'); _paragraphObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all');
_fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing()); _fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing());
$('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()); $('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
}
_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);
} }
}, },
...@@ -327,6 +359,127 @@ define([ ...@@ -327,6 +359,127 @@ define([
} }
}, },
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 // API handlers
onApiFocusObject: function (objects) { onApiFocusObject: function (objects) {
...@@ -346,6 +499,7 @@ define([ ...@@ -346,6 +499,7 @@ define([
} else { } else {
_paragraphObject = undefined; _paragraphObject = undefined;
} }
$('#edit-text div.edit-paragraph')[(paragraphs.length > 0) ? 'show' : 'hide']();
}, },
onApiChangeFont: function(font) { onApiChangeFont: function(font) {
...@@ -420,6 +574,47 @@ define([ ...@@ -420,6 +574,47 @@ define([
} }
}, },
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);
},
// Helpers // Helpers
_toggleButton: function (e) { _toggleButton: function (e) {
return $(e.currentTarget).toggleClass('active').hasClass('active'); return $(e.currentTarget).toggleClass('active').hasClass('active');
......
<!-- 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>
...@@ -42,6 +42,93 @@ ...@@ -42,6 +42,93 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="list-block edit-paragraph">
<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-valign-top"></i></a>
<a id="font-middle" class="button no-ripple"><i class="icon icon-text-valign-middle"></i></a>
<a id="font-bottom" class="button no-ripple"><i class="icon icon-text-valign-bottom"></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 edit-paragraph"><%= scope.textFromText %></div>
<div class="list-block edit-paragraph">
<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> </div>
<!-- Fonts view --> <!-- Fonts view -->
...@@ -191,4 +278,132 @@ ...@@ -191,4 +278,132 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<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>
/*
*
* (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 || {}))
});
\ No newline at end of file
...@@ -54,6 +54,36 @@ define([ ...@@ -54,6 +54,36 @@ define([
var _fontsList, var _fontsList,
_editTextController; _editTextController;
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 { return {
// el: '.view-main', // el: '.view-main',
...@@ -73,8 +103,12 @@ define([ ...@@ -73,8 +103,12 @@ define([
$('#font-fonts').single('click', _.bind(me.showFonts, me)); $('#font-fonts').single('click', _.bind(me.showFonts, me));
$('#font-color').single('click', _.bind(me.showFontColor, me)); $('#font-color').single('click', _.bind(me.showFontColor, me));
$('#font-additional').single('click', _.bind(me.showAdditional, me)); $('#font-additional').single('click', _.bind(me.showAdditional, me));
$('#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));
me.initControls(); me.initControls();
PE.getController('EditText').initSettings();
}, },
// Render layout // Render layout
...@@ -82,7 +116,9 @@ define([ ...@@ -82,7 +116,9 @@ define([
this.layout = $('<div/>').append(this.template({ this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'), android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'), phone : Common.SharedSettings.get('phone'),
scope : this scope : this,
bullets : _bullets,
numbers : _numbers
})); }));
return this; return this;
...@@ -169,6 +205,18 @@ define([ ...@@ -169,6 +205,18 @@ define([
this.showPage('#edit-text-additional'); this.showPage('#edit-text-additional');
}, },
showLineSpacing: function () {
this.showPage('#edit-text-linespacing');
},
showBullets: function () {
this.showPage('#edit-text-bullets');
},
showNumbers: function () {
this.showPage('#edit-text-numbers');
},
textFonts: 'Fonts', textFonts: 'Fonts',
textFontColor: 'Font Color', textFontColor: 'Font Color',
textAdditionalFormat: 'Additional Formatting', textAdditionalFormat: 'Additional Formatting',
...@@ -183,7 +231,14 @@ define([ ...@@ -183,7 +231,14 @@ define([
textSubscript: 'Subscript', textSubscript: 'Subscript',
textSmallCaps: 'Small Caps', textSmallCaps: 'Small Caps',
textAllCaps: 'All Caps', textAllCaps: 'All Caps',
textLetterSpacing: 'Letter Spacing' textLetterSpacing: 'Letter Spacing',
textFromText: 'Distance from Text',
textBefore: 'Before',
textAfter: 'After',
textLineSpacing: 'Line Spacing',
textBullets: 'Bullets',
textNone: 'None',
textNumbers: 'Numbers'
} }
})(), PE.Views.EditText || {})) })(), PE.Views.EditText || {}))
}); });
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -195,4 +195,19 @@ i.icon { ...@@ -195,4 +195,19 @@ i.icon {
height: 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="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>'); .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="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></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>');
}
} }
\ No newline at end of file
...@@ -165,6 +165,21 @@ i.icon { ...@@ -165,6 +165,21 @@ i.icon {
height: 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="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>'); .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="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></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>');
}
} }
// Overwrite color for toolbar // Overwrite color for toolbar
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment