[SSE mobile] Fix bug 34113; Add Filter Options: Clear, Delete Filter, Selection Of Values
This commit is contained in:
Julia Svinareva
parent
3dc3027773
commit
b541c0ddbf
|
|
@ -1,7 +1,8 @@
|
|||
// Container
|
||||
.phone.ios {
|
||||
.container-edit,
|
||||
.container-collaboration {
|
||||
.container-collaboration,
|
||||
.container-filter {
|
||||
.navbar {
|
||||
.hairline(top, @toolbarBorderColor);
|
||||
}
|
||||
|
|
@ -17,7 +18,8 @@
|
|||
.container-edit,
|
||||
.container-add,
|
||||
.container-settings,
|
||||
.container-collaboration {
|
||||
.container-collaboration,
|
||||
.container-filter {
|
||||
&.popover {
|
||||
width: 360px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
.phone.android {
|
||||
.container-edit,
|
||||
.container-collaboration {
|
||||
.container-collaboration,
|
||||
.container-filter {
|
||||
|
||||
.page-content {
|
||||
.list-block:first-child {
|
||||
|
|
@ -15,7 +16,8 @@
|
|||
.container-edit,
|
||||
.container-add,
|
||||
.container-settings,
|
||||
.container-collaboration {
|
||||
.container-collaboration,
|
||||
.container-filter {
|
||||
&.popover {
|
||||
width: 360px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5845,7 +5845,8 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
|
|||
margin-left: 10px;
|
||||
}
|
||||
.phone.ios .container-edit .navbar:before,
|
||||
.phone.ios .container-collaboration .navbar:before {
|
||||
.phone.ios .container-collaboration .navbar:before,
|
||||
.phone.ios .container-filter .navbar:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -5861,23 +5862,27 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
|
|||
transform-origin: 50% 0%;
|
||||
}
|
||||
html.pixel-ratio-2 .phone.ios .container-edit .navbar:before,
|
||||
html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before {
|
||||
html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before,
|
||||
html.pixel-ratio-2 .phone.ios .container-filter .navbar:before {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
html.pixel-ratio-3 .phone.ios .container-edit .navbar:before,
|
||||
html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before {
|
||||
html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before,
|
||||
html.pixel-ratio-3 .phone.ios .container-filter .navbar:before {
|
||||
-webkit-transform: scaleY(0.33);
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
.phone.ios .container-edit .page-content .list-block:first-child,
|
||||
.phone.ios .container-collaboration .page-content .list-block:first-child {
|
||||
.phone.ios .container-collaboration .page-content .list-block:first-child,
|
||||
.phone.ios .container-filter .page-content .list-block:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.container-edit.popover,
|
||||
.container-add.popover,
|
||||
.container-settings.popover,
|
||||
.container-collaboration.popover {
|
||||
.container-collaboration.popover,
|
||||
.container-filter.popover {
|
||||
width: 360px;
|
||||
}
|
||||
.settings.popup .list-block ul,
|
||||
|
|
|
|||
|
|
@ -5629,13 +5629,15 @@ a.item-link,
|
|||
opacity: 1;
|
||||
}
|
||||
.phone.android .container-edit .page-content .list-block:first-child,
|
||||
.phone.android .container-collaboration .page-content .list-block:first-child {
|
||||
.phone.android .container-collaboration .page-content .list-block:first-child,
|
||||
.phone.android .container-filter .page-content .list-block:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.container-edit.popover,
|
||||
.container-add.popover,
|
||||
.container-settings.popover,
|
||||
.container-collaboration.popover {
|
||||
.container-collaboration.popover,
|
||||
.container-filter.popover {
|
||||
width: 360px;
|
||||
}
|
||||
.settings.popup .list-block,
|
||||
|
|
|
|||
|
|
@ -5845,7 +5845,8 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
|
|||
margin-left: 10px;
|
||||
}
|
||||
.phone.ios .container-edit .navbar:before,
|
||||
.phone.ios .container-collaboration .navbar:before {
|
||||
.phone.ios .container-collaboration .navbar:before,
|
||||
.phone.ios .container-filter .navbar:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -5861,23 +5862,27 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
|
|||
transform-origin: 50% 0%;
|
||||
}
|
||||
html.pixel-ratio-2 .phone.ios .container-edit .navbar:before,
|
||||
html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before {
|
||||
html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before,
|
||||
html.pixel-ratio-2 .phone.ios .container-filter .navbar:before {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
html.pixel-ratio-3 .phone.ios .container-edit .navbar:before,
|
||||
html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before {
|
||||
html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before,
|
||||
html.pixel-ratio-3 .phone.ios .container-filter .navbar:before {
|
||||
-webkit-transform: scaleY(0.33);
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
.phone.ios .container-edit .page-content .list-block:first-child,
|
||||
.phone.ios .container-collaboration .page-content .list-block:first-child {
|
||||
.phone.ios .container-collaboration .page-content .list-block:first-child,
|
||||
.phone.ios .container-filter .page-content .list-block:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.container-edit.popover,
|
||||
.container-add.popover,
|
||||
.container-settings.popover,
|
||||
.container-collaboration.popover {
|
||||
.container-collaboration.popover,
|
||||
.container-filter.popover {
|
||||
width: 360px;
|
||||
}
|
||||
.settings.popup .list-block ul,
|
||||
|
|
|
|||
|
|
@ -5629,13 +5629,15 @@ a.item-link,
|
|||
opacity: 1;
|
||||
}
|
||||
.phone.android .container-edit .page-content .list-block:first-child,
|
||||
.phone.android .container-collaboration .page-content .list-block:first-child {
|
||||
.phone.android .container-collaboration .page-content .list-block:first-child,
|
||||
.phone.android .container-filter .page-content .list-block:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.container-edit.popover,
|
||||
.container-add.popover,
|
||||
.container-settings.popover,
|
||||
.container-collaboration.popover {
|
||||
.container-collaboration.popover,
|
||||
.container-filter.popover {
|
||||
width: 360px;
|
||||
}
|
||||
.settings.popup .list-block,
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@ require([
|
|||
,'AddOther'
|
||||
,'AddLink'
|
||||
,'Collaboration'
|
||||
,'FilterOptions'
|
||||
]
|
||||
});
|
||||
|
||||
|
|
@ -205,6 +206,7 @@ require([
|
|||
,'spreadsheeteditor/mobile/app/controller/add/AddOther'
|
||||
,'spreadsheeteditor/mobile/app/controller/add/AddLink'
|
||||
,'spreadsheeteditor/mobile/app/controller/Collaboration'
|
||||
,'spreadsheeteditor/mobile/app/controller/FilterOptions'
|
||||
], function() {
|
||||
window.compareVersions = true;
|
||||
app.start();
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ require([
|
|||
,'AddOther'
|
||||
,'AddLink'
|
||||
,'Collaboration'
|
||||
,'FilterOptions'
|
||||
]
|
||||
});
|
||||
|
||||
|
|
@ -216,6 +217,7 @@ require([
|
|||
,'spreadsheeteditor/mobile/app/controller/add/AddOther'
|
||||
,'spreadsheeteditor/mobile/app/controller/add/AddLink'
|
||||
,'spreadsheeteditor/mobile/app/controller/Collaboration'
|
||||
,'spreadsheeteditor/mobile/app/controller/FilterOptions'
|
||||
], function() {
|
||||
app.start();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -88,6 +88,9 @@ define([
|
|||
|
||||
setMode: function (mode) {
|
||||
_isEdit = mode.isEdit;
|
||||
if (_isEdit) {
|
||||
this.api.asc_registerCallback('asc_onSetAFDialog', _.bind(this.onApiFilterOptions, this));
|
||||
}
|
||||
},
|
||||
|
||||
// When our application is ready, lets get started
|
||||
|
|
@ -351,6 +354,13 @@ define([
|
|||
this.isDisconnected = true;
|
||||
},
|
||||
|
||||
onApiFilterOptions: function(config) {
|
||||
if(_isEdit) {
|
||||
SSE.getController('FilterOptions').showModal();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
warnMergeLostData: 'Operation can destroy data in the selected cells.<br>Continue?',
|
||||
menuCopy: 'Copy',
|
||||
menuCut: 'Cut',
|
||||
|
|
|
|||
329
apps/spreadsheeteditor/mobile/app/controller/FilterOptions.js
Normal file
329
apps/spreadsheeteditor/mobile/app/controller/FilterOptions.js
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System SIA 2010-2019
|
||||
*
|
||||
* 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 20A-12 Ernesta Birznieka-Upisha
|
||||
* street, Riga, Latvia, EU, LV-1050.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* FilterOptions.js
|
||||
* Spreadsheet Editor
|
||||
*
|
||||
* Created by Julia Svinareva on 13/6/19
|
||||
* Copyright (c) 2019 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
define([
|
||||
'core',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'spreadsheeteditor/mobile/app/view/FilterOptions'
|
||||
], function (core, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Controllers.FilterOptions = Backbone.Controller.extend(_.extend((function() {
|
||||
// Private
|
||||
var rootView,
|
||||
dataFilter,
|
||||
indChecked = [];
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'FilterOptions'
|
||||
],
|
||||
|
||||
initialize: function() {
|
||||
var me = this;
|
||||
me.addListeners({
|
||||
'FilterOptions': {
|
||||
'page:show' : me.onPageShow
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
this.api.asc_registerCallback('asc_onSetAFDialog', _.bind(this.setSettings, this));
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
this.createView('FilterOptions').render();
|
||||
},
|
||||
|
||||
setMode: function(mode) {
|
||||
this.appConfig = mode;
|
||||
},
|
||||
|
||||
showModal: function(x,y) {
|
||||
var me = this,
|
||||
isAndroid = Framework7.prototype.device.android === true,
|
||||
modalView,
|
||||
mainView = SSE.getController('Editor').getView('Editor').f7View;
|
||||
|
||||
uiApp.closeModal();
|
||||
|
||||
if (Common.SharedSettings.get('phone')) {
|
||||
modalView = $$(uiApp.pickerModal(
|
||||
'<div class="picker-modal settings container-filter">' +
|
||||
'<div class="view filter-root-view navbar-through">' +
|
||||
this.getView('FilterOptions').rootLayout() +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
)).on('opened', function () {
|
||||
if (_.isFunction(me.api.asc_OnShowContextMenu)) {
|
||||
me.api.asc_OnShowContextMenu()
|
||||
}
|
||||
}).on('close', function (e) {
|
||||
mainView.showNavbar();
|
||||
}).on('closed', function () {
|
||||
if (_.isFunction(me.api.asc_OnHideContextMenu)) {
|
||||
me.api.asc_OnHideContextMenu()
|
||||
}
|
||||
});
|
||||
mainView.hideNavbar();
|
||||
} else {
|
||||
modalView = uiApp.popover(
|
||||
'<div class="popover settings container-filter">' +
|
||||
'<div class="popover-angle"></div>' +
|
||||
'<div class="popover-inner">' +
|
||||
'<div class="content-block">' +
|
||||
'<div class="view popover-view filter-root-view navbar-through">' +
|
||||
this.getView('FilterOptions').rootLayout() +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
);
|
||||
}
|
||||
|
||||
if (Framework7.prototype.device.android === true) {
|
||||
$$('.view.filter-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
|
||||
$$('.view.filter-root-view .navbar').prependTo('.view.filter-root-view > .pages > .page');
|
||||
}
|
||||
|
||||
rootView = uiApp.addView('.filter-root-view', {
|
||||
dynamicNavbar: true,
|
||||
domCache: true
|
||||
});
|
||||
|
||||
Common.NotificationCenter.trigger('filtercontainer:show');
|
||||
this.onPageShow(this.getView('FilterOptions'));
|
||||
|
||||
SSE.getController('Toolbar').getView('Toolbar').hideSearch();
|
||||
},
|
||||
|
||||
rootView : function() {
|
||||
return rootView;
|
||||
},
|
||||
|
||||
onPageShow: function(view, pageId) {
|
||||
var me = this;
|
||||
var $clearFilter = $("#btn-clear-filter"),
|
||||
$deleteFilter = $("#btn-delete-filter");
|
||||
this.setClearDisable();
|
||||
$clearFilter.single('click', _.bind(me.onClickClearFilter, me));
|
||||
$deleteFilter.single('click', _.bind(me.onClickDeleteFilter, me));
|
||||
this.setDataFilterCells();
|
||||
},
|
||||
|
||||
setSettings: function(config) {
|
||||
dataFilter = config;
|
||||
},
|
||||
|
||||
onClickClearFilter: function () {
|
||||
var me = this;
|
||||
if (me.api)
|
||||
me.api.asc_clearFilter();
|
||||
for(var i=0; i<indChecked.length; i++) {
|
||||
indChecked[i] = true;
|
||||
}
|
||||
setTimeout(function () {
|
||||
me.updateCell();
|
||||
},20);
|
||||
$('[name="filter-cell"]').prop('checked', true);
|
||||
$('[name="filter-cell-all"]').prop('checked', true);
|
||||
},
|
||||
|
||||
onClickDeleteFilter: function () {
|
||||
var formatTableInfo = this.api.asc_getCellInfo().asc_getFormatTableInfo();
|
||||
var tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
|
||||
if (this.api)
|
||||
this.api.asc_changeAutoFilter(tablename, Asc.c_oAscChangeFilterOptions.filter, false);
|
||||
},
|
||||
|
||||
setClearDisable: function() {
|
||||
var $clearFilter = $("#btn-clear-filter");
|
||||
var arr = dataFilter.asc_getValues();
|
||||
var lenCheck = arr.filter(function (item) {
|
||||
return item.visible == true;
|
||||
}).length;
|
||||
if (lenCheck == arr.length) {
|
||||
$clearFilter.addClass("disabled");
|
||||
} else {
|
||||
$clearFilter.removeClass("disabled");
|
||||
}
|
||||
},
|
||||
|
||||
setDataFilterCells: function() {
|
||||
function isNumeric(value) {
|
||||
return !isNaN(parseFloat(value)) && isFinite(value);
|
||||
}
|
||||
var me = this,
|
||||
isnumber, value,
|
||||
index = 0, throughIndex = 0,
|
||||
selectedCells = 0,
|
||||
arrCells = [],
|
||||
idxs = [];
|
||||
|
||||
dataFilter.asc_getValues().forEach(function (item) {
|
||||
value = item.asc_getText();
|
||||
isnumber = isNumeric(value);
|
||||
|
||||
if (idxs[throughIndex]==undefined) {
|
||||
idxs[throughIndex] = item.asc_getVisible();
|
||||
}
|
||||
|
||||
arrCells.push({
|
||||
id : index++,
|
||||
selected : false,
|
||||
allowSelected : true,
|
||||
cellvalue : value ? value : me.textEmptyItem,
|
||||
value : isnumber ? value : (value.length > 0 ? value: me.textEmptyItem),
|
||||
intval : isnumber ? parseFloat(value) : undefined,
|
||||
strval : !isnumber ? value : '',
|
||||
groupid : '1',
|
||||
check : idxs[throughIndex],
|
||||
throughIndex : throughIndex
|
||||
});
|
||||
if (idxs[throughIndex]) selectedCells++;
|
||||
|
||||
++throughIndex;
|
||||
});
|
||||
|
||||
indChecked = idxs;
|
||||
|
||||
if(arrCells.length > 0) {
|
||||
var templateItemCell = _.template([
|
||||
'<% _.each(cells, function (cell) { %>',
|
||||
'<li>' +
|
||||
'<label class="label-radio item-content">' +
|
||||
'<input id="<%= cell.throughIndex %>" type="checkbox" name="filter-cell" value="<%= cell.cellvalue%>"/>' +
|
||||
'<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>' +
|
||||
'<div class="item-inner">' +
|
||||
'<div class="item-title"><%= cell.cellvalue%></div>' +
|
||||
'</div>' +
|
||||
'</label>' +
|
||||
'</li>',
|
||||
'<% }); %>'].join(''));
|
||||
var templateListCells = _.template(
|
||||
'<ul>' +
|
||||
'<li>' +
|
||||
'<label class="label-radio item-content">' +
|
||||
'<input type="checkbox" name="filter-cell-all" />' +
|
||||
'<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>' +
|
||||
'<div class="item-inner">' +
|
||||
'<div class="item-title"><%= textSelectAll %></div>' +
|
||||
'</div>' +
|
||||
'</label>' +
|
||||
'</li>' +
|
||||
templateItemCell({cells: arrCells, android: Framework7.prototype.device.android}) +
|
||||
'</ul>');
|
||||
$('#list-cells').html(templateListCells({textSelectAll: this.textSelectAll, android: Framework7.prototype.device.android}));
|
||||
|
||||
var $filterCell = $('[name="filter-cell"]'),
|
||||
$filterCellAll = $('[name="filter-cell-all"]');
|
||||
$filterCell.single('change', _.bind(me.updateCell, me));
|
||||
$filterCellAll.single('change', _.bind(me.updateCell, me));
|
||||
|
||||
if(selectedCells == arrCells.length) {
|
||||
$filterCellAll.prop('checked', true);
|
||||
$filterCell.prop('checked', true);
|
||||
} else {
|
||||
for(var i=0; i<arrCells.length; i++) {
|
||||
$filterCell.eq(i).prop('checked', idxs[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
updateCell: function(e) {
|
||||
var me = this;
|
||||
// Checkbox change
|
||||
var $filterCell = $('[name="filter-cell"]'),
|
||||
$filterCellAll = $('[name="filter-cell-all"]'),
|
||||
filterCellChecked = $('[name="filter-cell"]:checked').length,
|
||||
filterCellCheckedAll = $('[name="filter-cell"]').length;
|
||||
if(e) {
|
||||
if (e.target.name == "filter-cell") {
|
||||
if (filterCellChecked < filterCellCheckedAll) {
|
||||
$filterCellAll.prop('checked', false);
|
||||
} else if (filterCellChecked === filterCellCheckedAll) {
|
||||
$filterCellAll.prop('checked', true);
|
||||
}
|
||||
indChecked[e.target.id] = e.target.checked;
|
||||
}
|
||||
// Select All change
|
||||
if (e.target.name == "filter-cell-all") {
|
||||
var checkAll = false;
|
||||
if (e.target.checked) {
|
||||
$filterCell.prop('checked', true);
|
||||
checkAll = true;
|
||||
} else {
|
||||
$filterCell.prop('checked', false);
|
||||
checkAll = false;
|
||||
}
|
||||
for (var i = 0; i < indChecked.length; i++) {
|
||||
indChecked[i] = checkAll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var arrCells = dataFilter.asc_getValues();
|
||||
arrCells.forEach(function(item, index) {
|
||||
item.asc_setVisible(indChecked[index]);
|
||||
});
|
||||
dataFilter.asc_getFilterObj().asc_setType(Asc.c_oAscAutoFilterTypes.Filters);
|
||||
this.api.asc_applyAutoFilter(dataFilter);
|
||||
|
||||
me.setClearDisable();
|
||||
|
||||
},
|
||||
|
||||
textEmptyItem: '{Blanks}',
|
||||
textSelectAll: 'Select All'
|
||||
|
||||
|
||||
|
||||
}
|
||||
})(), SSE.Controllers.FilterOptions || {}))
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!-- Root view -->
|
||||
<div id="filter-root-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="center sliding"><%= scope.textFilter %></div>
|
||||
<div class="right sliding close-filter"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages">
|
||||
<div class="page" data-page="filter-root-view">
|
||||
<div class="page-content">
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li id="btn-clear-filter">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textClearFilter %></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="btn-delete-filter">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title"><%= scope.textDeleteFilter %></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="list-cells" class="list-block">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
146
apps/spreadsheeteditor/mobile/app/view/FilterOptions.js
Normal file
146
apps/spreadsheeteditor/mobile/app/view/FilterOptions.js
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System SIA 2010-2019
|
||||
*
|
||||
* 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 20A-12 Ernesta Birznieka-Upisha
|
||||
* street, Riga, Latvia, EU, LV-1050.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* FilterOptions.js
|
||||
* Spreadsheet Editor
|
||||
*
|
||||
* Created by Julia Svinareva on 13/6/19
|
||||
* Copyright (c) 2019 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'text!spreadsheeteditor/mobile/app/template/FilterOptions.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function (settingsTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Views.FilterOptions = Backbone.View.extend(_.extend((function() {
|
||||
// private
|
||||
|
||||
return {
|
||||
|
||||
template: _.template(settingsTemplate),
|
||||
|
||||
events: {
|
||||
//
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
Common.NotificationCenter.on('filtercontainer:show', _.bind(this.initEvents, this));
|
||||
this.on('page:show', _.bind(this.updateItemHandlers, this));
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
Common.Utils.addScrollIfNeed('.view[data-page=filter-root-view] .pages', '.view[data-page=filter-root-view] .page');
|
||||
me.updateItemHandlers();
|
||||
},
|
||||
|
||||
initControls: function() {
|
||||
//
|
||||
},
|
||||
|
||||
// Render layout
|
||||
render: function() {
|
||||
this.layout = $('<div/>').append(this.template({
|
||||
android : Common.SharedSettings.get('android'),
|
||||
phone : Common.SharedSettings.get('phone'),
|
||||
orthography: Common.SharedSettings.get('sailfish'),
|
||||
scope : this
|
||||
}));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
updateItemHandlers: function () {
|
||||
var selectorsDynamicPage = [
|
||||
'.page[data-page=filter-root-view]'
|
||||
].map(function (selector) {
|
||||
return selector + ' a.item-link[data-page]';
|
||||
}).join(', ');
|
||||
|
||||
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
|
||||
},
|
||||
|
||||
onItemClick: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
page = $target.data('page');
|
||||
|
||||
if (page && page.length > 0 ) {
|
||||
this.showPage(page);
|
||||
}
|
||||
},
|
||||
|
||||
rootLayout: function () {
|
||||
if (this.layout) {
|
||||
var $layour = this.layout.find('#filter-root-view'),
|
||||
isPhone = Common.SharedSettings.get('phone');
|
||||
|
||||
return $layour.html();
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
showPage: function(templateId, animate) {
|
||||
var rootView = SSE.getController('FilterOptions').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(),
|
||||
animatePages: animate !== false
|
||||
});
|
||||
|
||||
this.fireEvent('page:show', [this, templateId]);
|
||||
}
|
||||
},
|
||||
|
||||
textFilter: 'Filter Options',
|
||||
textClearFilter: 'Clear Filter',
|
||||
textDeleteFilter: 'Delete Filter'
|
||||
|
||||
}
|
||||
})(), SSE.Views.FilterOptions || {}))
|
||||
});
|
||||
|
|
@ -188,10 +188,6 @@ define([
|
|||
$('.settings .sortdown').single('click', function (e) {me.fireEvent('insert:sort',['down']);});
|
||||
$('.settings .sortup').single('click', function (e) {me.fireEvent('insert:sort',['up']);});
|
||||
|
||||
// temporary hidden
|
||||
// TODO: make filter's options menu
|
||||
$('.settings #other-chb-insfilter').parents('.list-block').hide();
|
||||
|
||||
$('.settings #other-chb-insfilter input:checkbox').single('change', function (e) {
|
||||
var $checkbox = $(e.currentTarget);
|
||||
me.fireEvent('insert:filter', [$checkbox.is(':checked')]);
|
||||
|
|
|
|||
|
|
@ -5845,7 +5845,8 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
|
|||
margin-left: 10px;
|
||||
}
|
||||
.phone.ios .container-edit .navbar:before,
|
||||
.phone.ios .container-collaboration .navbar:before {
|
||||
.phone.ios .container-collaboration .navbar:before,
|
||||
.phone.ios .container-filter .navbar:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -5861,23 +5862,27 @@ html:not(.phone) #editor-navbar.navbar .left a + a {
|
|||
transform-origin: 50% 0%;
|
||||
}
|
||||
html.pixel-ratio-2 .phone.ios .container-edit .navbar:before,
|
||||
html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before {
|
||||
html.pixel-ratio-2 .phone.ios .container-collaboration .navbar:before,
|
||||
html.pixel-ratio-2 .phone.ios .container-filter .navbar:before {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
html.pixel-ratio-3 .phone.ios .container-edit .navbar:before,
|
||||
html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before {
|
||||
html.pixel-ratio-3 .phone.ios .container-collaboration .navbar:before,
|
||||
html.pixel-ratio-3 .phone.ios .container-filter .navbar:before {
|
||||
-webkit-transform: scaleY(0.33);
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
.phone.ios .container-edit .page-content .list-block:first-child,
|
||||
.phone.ios .container-collaboration .page-content .list-block:first-child {
|
||||
.phone.ios .container-collaboration .page-content .list-block:first-child,
|
||||
.phone.ios .container-filter .page-content .list-block:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.container-edit.popover,
|
||||
.container-add.popover,
|
||||
.container-settings.popover,
|
||||
.container-collaboration.popover {
|
||||
.container-collaboration.popover,
|
||||
.container-filter.popover {
|
||||
width: 360px;
|
||||
}
|
||||
.settings.popup .list-block ul,
|
||||
|
|
|
|||
|
|
@ -5639,13 +5639,15 @@ textarea {
|
|||
user-select: text;
|
||||
}
|
||||
.phone.android .container-edit .page-content .list-block:first-child,
|
||||
.phone.android .container-collaboration .page-content .list-block:first-child {
|
||||
.phone.android .container-collaboration .page-content .list-block:first-child,
|
||||
.phone.android .container-filter .page-content .list-block:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.container-edit.popover,
|
||||
.container-add.popover,
|
||||
.container-settings.popover,
|
||||
.container-collaboration.popover {
|
||||
.container-collaboration.popover,
|
||||
.container-filter.popover {
|
||||
width: 360px;
|
||||
}
|
||||
.settings.popup .list-block,
|
||||
|
|
|
|||
Loading…
Reference in a new issue