Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[sse mobile] Add format settings (page size, margins)

Browse source
This commit is contained in:
Julia Svinareva 2019-04-24 12:09:54 +03:00
parent c7d7500386
commit f05167627d
4 changed files with 313 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
apps/spreadsheeteditor/mobile/app/controller/Settings.js
View file

@ -53,7 +53,34 @@ define([
infoObj,
modalView,
_licInfo,
templateInsert;
templateInsert,
_pageSizesIndex = 0,
_pageSizesCurrent = [0, 0],
txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm),
_pageSizes = [
{ caption: 'US Letter', subtitle: Common.Utils.String.format('21,59{0} x 27,94{0}', txtCm), value: [215.9, 279.4] },
{ caption: 'US Legal', subtitle: Common.Utils.String.format('21,59{0} x 35,56{0}', txtCm), value: [215.9, 355.6] },
{ caption: 'A4', subtitle: Common.Utils.String.format('21{0} x 29,7{0}', txtCm), value: [210, 297] },
{ caption: 'A5', subtitle: Common.Utils.String.format('14,8{0} x 21{0}', txtCm), value: [148, 210] },
{ caption: 'B5', subtitle: Common.Utils.String.format('17,6{0} x 25{0}', txtCm), value: [176, 250] },
{ caption: 'Envelope #10', subtitle: Common.Utils.String.format('10,48{0} x 24,13{0}', txtCm), value: [104.8, 241.3] },
{ caption: 'Envelope DL', subtitle: Common.Utils.String.format('11{0} x 22{0}', txtCm), value: [110, 220] },
{ caption: 'Tabloid', subtitle: Common.Utils.String.format('27,94{0} x 43,18{0}', txtCm), value: [279.4, 431.8] },
{ caption: 'A3', subtitle: Common.Utils.String.format('29,7{0} x 42{0}', txtCm), value: [297, 420] },
{ caption: 'Tabloid Oversize', subtitle: Common.Utils.String.format('30,48{0} x 45,71{0}', txtCm), value: [304.8, 457.1] },
{ caption: 'ROC 16K', subtitle: Common.Utils.String.format('19,68{0} x 27,3{0}', txtCm), value: [196.8, 273] },
{ caption: 'Envelope Choukei 3', subtitle: Common.Utils.String.format('11,99{0} x 23,49{0}', txtCm), value: [119.9, 234.9] },
{ caption: 'Super B/A3', subtitle: Common.Utils.String.format('33,02{0} x 48,25{0}', txtCm), value: [330.2, 482.5] },
{ caption: 'A0', subtitle: Common.Utils.String.format('84,1{0} x 118,9{0}', txtCm), value: [841, 1189] },
{ caption: 'A1', subtitle: Common.Utils.String.format('59,4{0} x 84,1{0}', txtCm), value: [594, 841] },
{ caption: 'A2', subtitle: Common.Utils.String.format('42{0} x 59,4{0}', txtCm), value: [420, 594] },
{ caption: 'A6', subtitle: Common.Utils.String.format('10,5{0} x 14,8{0}', txtCm), value: [105, 148] }
];
var mm2Cm = function(mm) {
return parseFloat((mm/10.).toFixed(2));
};
return {
models: [],
@ -74,6 +101,10 @@ define([
}
}
});
this.localMarginProps = null;
},
setApi: function (api) {
@ -170,6 +201,10 @@ define([
Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content');
} else if ('#settings-spreadsheet-view' == pageId) {
me.initSpreadsheetSettings();
} else if ('#settings-page-size-view' == pageId) {
me.initSpreadsheetPageSize();
} else if ('#margins-view' == pageId) {
me.initSpreadsheetMargins();
}
},
@ -197,8 +232,102 @@ define([
$('.page[data-page=settings-spreadsheet-view] input:radio[name=table-orientation][value="1"]').prop( "checked", true );
}
$pageOrientation.single('change', _.bind(me.onOrientationChange, me));
//Init format
var $pageSize = $('#settings-spreadsheet-format');
this.changeCurrentPageSize(opt.asc_getWidth(), opt.asc_getHeight());
$pageSize.find('.item-title').text(_pageSizes[_pageSizesIndex]['caption']);
$pageSize.find('.item-subtitle').text(_pageSizes[_pageSizesIndex]['subtitle']);
},
changeCurrentPageSize: function(w, h) {
if (Math.abs(_pageSizesCurrent[0] - w) > 0.1 ||
Math.abs(_pageSizesCurrent[1] - h) > 0.1) {
_pageSizesCurrent = [w, h];
_.find(_pageSizes, function(size, index) {
if (Math.abs(size.value[0] - w) < 0.1 && Math.abs(size.value[1] - h) < 0.1) {
_pageSizesIndex = index;
}
}, this);
}
},
initSpreadsheetPageSize: function() {
this.getView('Settings').renderPageSizes(_pageSizes, _pageSizesIndex);
$('.page[data-page=settings-page-size-view] input:radio[name=spreadsheet-format]').single('change', _.bind(this.onFormatChange, this));
Common.Utils.addScrollIfNeed('.page[data-page=settings-page-size-view]', '.page[data-page=settings-page-size-view] .page-content');
},
onFormatChange: function(e) {
var rawValue = $(e.currentTarget).val(),
value = rawValue.split(',');
this.api.asc_changeDocSize(parseFloat(value[0]), parseFloat(value[1]), this.api.asc_getActiveWorksheetIndex());
this.initSpreadsheetSettings();
},
initSpreadsheetMargins: function() {
var me = this;
// Init page margins
var currentSheet = me.api.asc_getActiveWorksheetIndex(),
props = me.api.asc_getPageOptions(currentSheet);
me.localMarginProps = props.asc_getPageMargins();
var left = me.localMarginProps.asc_getLeft(),
top = me.localMarginProps.asc_getTop(),
right = me.localMarginProps.asc_getRight(),
bottom = me.localMarginProps.asc_getBottom();
if (me.localMarginProps) {
$('#spreadsheet-margin-top .item-after label').text(mm2Cm(top) + ' ' + txtCm);
$('#spreadsheet-margin-bottom .item-after label').text(mm2Cm(bottom) + ' ' + txtCm);
$('#spreadsheet-margin-left .item-after label').text(mm2Cm(left) + ' ' + txtCm);
$('#spreadsheet-margin-right .item-after label').text(mm2Cm(right) + ' ' + txtCm);
}
_.each(["top", "left", "bottom", "right"], function(align) {
$(Common.Utils.String.format('#spreadsheet-margin-{0} .button', align)).single('click', _.bind(me.onPageMarginsChange, me, align));
})
},
onPageMarginsChange: function (align, e) {
var me = this,
$button = $(e.currentTarget),
step = 1, // mm
txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm),
marginValue = null;
var maxMarginsH = 48.25,
maxMarginsW = 48.25;
switch (align) {
case 'left': marginValue = me.localMarginProps.asc_getLeft(); break;
case 'top': marginValue = me.localMarginProps.asc_getTop(); break;
case 'right': marginValue = me.localMarginProps.asc_getRight(); break;
case 'bottom': marginValue = me.localMarginProps.asc_getBottom(); break;
}
if ($button.hasClass('decrement')) {
marginValue = Math.max(0, marginValue - step);
} else {
marginValue = Math.min((align == 'left' || align == 'right') ? maxMarginsW : maxMarginsH, marginValue + step);
}
switch (align) {
case 'left': me.localMarginProps.asc_setLeft(marginValue); break;
case 'top': me.localMarginProps.asc_setTop(marginValue); break;
case 'right': me.localMarginProps.asc_setRight(marginValue); break;
case 'bottom': me.localMarginProps.asc_setBottom(marginValue); break;
}
$(Common.Utils.String.format('#document-margin-{0} .item-after label', align)).text(mm2Cm(marginValue) + ' ' + txtCm);
me.api.asc_changePageMargins( me.localMarginProps.asc_getLeft(), me.localMarginProps.asc_getRight(), me.localMarginProps.asc_getTop(), me.localMarginProps.asc_getBottom(), me.api.asc_getActiveWorksheetIndex());
me.initSpreadsheetMargins();
},
onOrientationChange: function(e) {
var value = $(e.currentTarget).attr('value');
this.api.asc_changePageOrient(Number(value) === Asc.c_oAscPageOrientation.PagePortrait, this.api.asc_getActiveWorksheetIndex());

123
apps/spreadsheeteditor/mobile/app/template/Settings.template
View file

@ -440,6 +440,30 @@
</li>
</ul>
</div>
<div class="content-block-title"><%= scope.textFormat %></div>
<div class="list-block media-list">
<ul>
<li>
<a id="settings-spreadsheet-format" class="item-link item-content" data-page="#settings-page-size-view">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title"><%= scope.textCustom %></div>
</div>
<div class="item-subtitle"><%= scope.textCustomSize %></div>
</div>
</a>
</li>
<li>
<a id="margin-settings" class="item-link item-content" data-page="#margins-view">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title"><%= scope.textMargins %></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li id="hide-headings">
@ -506,4 +530,103 @@
</div>
</div>
</div>
</div>
<!-- Spreadsheet Page Size view -->
<div id="settings-page-size-view">
<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.textSpreadsheetFormats %></div>
</div>
</div>
<div class="pages">
<div class="page" data-page="settings-page-size-view">
<div class="page-content">
<div class="list-block media-list">
<ul></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Margin settings view -->
<div id="margins-view">
<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.textMargins %></div>
</div>
</div>
<div class="pages">
<div class="page" data-page="margins-view">
<div class="page-content">
<div class="list-block">
<ul>
<li id="spreadsheet-margin-top">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textTop %></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>
<li id="spreadsheet-margin-bottom">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textBottom %></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>
<li id="spreadsheet-margin-left">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textLeft %></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>
<li id="spreadsheet-margin-right">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textRight %></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>
</div>

52
apps/spreadsheeteditor/mobile/app/view/Settings.js
View file

@ -175,6 +175,16 @@ define([
showSetSpreadsheet: function () {
this.showPage('#settings-spreadsheet-view');
$('#color-schemes').single('click', _.bind(this.showColorSchemes, this));
$('#settings-spreadsheet-format').single('click', _.bind(this.showPageSize, this));
$('#margin-settings').single('click', _.bind(this.showMargins, this));
},
showPageSize: function() {
this.showPage('#settings-page-size-view');
},
showMargins: function() {
this.showPage('#margins-view');
},
showDocumentInfo: function() {
@ -219,6 +229,37 @@ define([
}
},
renderPageSizes: function(sizes, selectIndex) {
var $pageFormats = $('.page[data-page=settings-page-size-view]'),
$list = $pageFormats.find('ul'),
items = [];
_.each(sizes, function (size, index) {
items.push(_.template([
'<li>',
'<label class="label-radio item-content">',
'<input type="radio" name="spreadsheet-format" value="<%= item.value %>" <% if (index == selectIndex) { %>checked="checked"<% } %> >',
'<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>',
'<div class="item-inner">',
'<div class="item-title-row">',
'<div class="item-title"><%= item.caption %></div>',
'</div>',
// '<div class="item-subtitle"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[0]).toFixed(2)) %><%= Common.Utils.Metric.getCurrentMetricName() %> x <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div>',
'<div class="item-subtitle"><%= item.subtitle %></div>',
'</div>',
'</label>',
'</li>'
].join(''))({
android: Framework7.prototype.device.android,
item: size,
index: index,
selectIndex: selectIndex
}));
});
$list.html(items.join(''));
},
unknownText: 'Unknown',
textFindAndReplace: 'Find and Replace',
textSettings: 'Settings',
@ -252,7 +293,16 @@ define([
textHideGridlines: 'Hide Gridlines',
textOrientation: 'Orientation',
textPortrait: 'Portrait',
textLandscape: 'Landscape'
textLandscape: 'Landscape',
textFormat: 'Format',
textSpreadsheetFormats: 'Spreadsheet Formats',
textCustom: 'Custom',
textCustomSize: 'Custom Size',
textMargins: 'Margins',
textTop: 'Top',
textLeft: 'Left',
textBottom: 'Bottom',
textRight: 'Right'
}
})(), SSE.Views.Settings || {}))
});

9
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -524,6 +524,15 @@
"SSE.Views.Settings.textOrientation": "Orientation",
"SSE.Views.Settings.textPortrait": "Portrait",
"SSE.Views.Settings.textLandscape": "Landscape",
"SSE.Views.Settings.textFormat": "Format",
"SSE.Views.Settings.textSpreadsheetFormats": "Spreadsheet Formats",
"SSE.Views.Settings.textCustom": "Custom",
"SSE.Views.Settings.textCustomSize": "Custom Size",
"SSE.Views.Settings.textMargins": "Margins",
"SSE.Views.Settings.textTop": "Top",
"SSE.Views.Settings.textLeft": "Left",
"SSE.Views.Settings.textBottom": "Bottom",
"SSE.Views.Settings.textRight": "Right",
"SSE.Views.Settings.unknownText": "Unknown",
"SSE.Views.Toolbar.textBack": "Back"
}