[SSE] Add slicer settings
This commit is contained in:
Julia Radzhabova
parent
c394393bba
commit
30c42cf26e
|
|
@ -0,0 +1,76 @@
|
||||||
|
<div id="id-adv-slicer-style" class="settings-panel active">
|
||||||
|
<div class="inner-content">
|
||||||
|
<div>
|
||||||
|
<div class="padding-small" style="display: inline-block;">
|
||||||
|
<label class="input-label"><%= scope.textHeader %></label>
|
||||||
|
<div id="sliceradv-text-header"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="padding-large" id="sliceradv-checkbox-header"></div>
|
||||||
|
<div style="padding-bottom: 4px;"><label class="header"><%= scope.strStyle %></label></div>
|
||||||
|
<div class="padding-large" id="sliceradv-combo-style" style="width: 100%;"></div>
|
||||||
|
<div style="padding-bottom: 4px;"><label class="header"><%= scope.strSize %></label></div>
|
||||||
|
<div>
|
||||||
|
<div class="padding-large" style="display: inline-block; margin-right: 5px;">
|
||||||
|
<label class="input-label"><%= scope.strWidth %></label>
|
||||||
|
<div id="sliceradv-spin-width"></div>
|
||||||
|
</div>
|
||||||
|
<div class="padding-large" style="display: inline-block;">
|
||||||
|
<label class="input-label"><%= scope.strHeight %></label>
|
||||||
|
<div id="sliceradv-spin-height"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="padding-bottom: 4px;"><label class="header"><%= scope.strButtons %></label></div>
|
||||||
|
<div>
|
||||||
|
<div style="display: inline-block; margin-right: 5px;">
|
||||||
|
<label class="input-label"><%= scope.strColumns %></label>
|
||||||
|
<div id="sliceradv-spin-columns"></div>
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; margin-right: 5px;">
|
||||||
|
<label class="input-label"><%= scope.strWidth %></label>
|
||||||
|
<div id="sliceradv-spin-col-width"></div>
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
<label class="input-label"><%= scope.strHeight %></label>
|
||||||
|
<div id="sliceradv-spin-col-height"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="id-adv-slicer-sorting" class="settings-panel">
|
||||||
|
<div class="inner-content" style="width: 100%;">
|
||||||
|
<div class="padding-small">
|
||||||
|
<label class="header"><%= scope.textSort %></label>
|
||||||
|
</div>
|
||||||
|
<div class="padding-large">
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
<div class="padding-small" id="sliceradv-radio-asc"></div>
|
||||||
|
<div class="padding-small" id="sliceradv-radio-desc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
<div class="padding-small" id="sliceradv-check-hide-nodata"></div>
|
||||||
|
<div class="padding-small" id="sliceradv-check-indicate-nodata"></div>
|
||||||
|
<div class="padding-small" id="sliceradv-check-show-nodata-last"></div>
|
||||||
|
<div class="padding-small" id="sliceradv-check-show-deleted"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="id-adv-slicer-references" class="settings-panel">
|
||||||
|
<div class="inner-content">
|
||||||
|
<div class="padding-large">
|
||||||
|
<label class="header" style="display: block;"><%= scope.textSourceName %></label>
|
||||||
|
<label class="input-label" id="sliceradv-lbl-source"></label>
|
||||||
|
</div>
|
||||||
|
<div class="padding-large">
|
||||||
|
<label class="header" style="display: block;"><%= scope.textFormulaName %></label>
|
||||||
|
<label class="input-label" id="sliceradv-lbl-formula"></label>
|
||||||
|
</div>
|
||||||
|
<div class="padding-large">
|
||||||
|
<label class="header"><%= scope.textName %></label>
|
||||||
|
<div id="sliceradv-text-name"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
372
apps/spreadsheeteditor/main/app/view/SlicerSettings.js
Normal file
372
apps/spreadsheeteditor/main/app/view/SlicerSettings.js
Normal file
|
|
@ -0,0 +1,372 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* (c) Copyright Ascensio System SIA 2010-2020
|
||||||
|
*
|
||||||
|
* 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
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* SlicerSettings.js
|
||||||
|
*
|
||||||
|
* Created by Julia Radzhabova on 14.04.2020
|
||||||
|
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
define([ 'text!spreadsheeteditor/main/app/template/SlicerSettings.template',
|
||||||
|
'common/main/lib/view/AdvancedSettingsWindow',
|
||||||
|
'common/main/lib/component/MetricSpinner',
|
||||||
|
'common/main/lib/component/CheckBox',
|
||||||
|
'common/main/lib/component/RadioBox',
|
||||||
|
'common/main/lib/component/ComboDataView'
|
||||||
|
], function (contentTemplate) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
SSE.Views.SlicerSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
|
||||||
|
options: {
|
||||||
|
contentWidth: 330,
|
||||||
|
height: 435,
|
||||||
|
toggleGroup: 'slicer-adv-settings-group',
|
||||||
|
storageName: 'sse-slicer-settings-adv-category'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize : function(options) {
|
||||||
|
var me = this;
|
||||||
|
_.extend(this.options, {
|
||||||
|
title: this.textTitle,
|
||||||
|
items: [
|
||||||
|
{panelId: 'id-adv-slicer-style', panelCaption: this.strStyleSize},
|
||||||
|
{panelId: 'id-adv-slicer-sorting', panelCaption: this.strSorting},
|
||||||
|
{panelId: 'id-adv-slicer-references', panelCaption: this.strReferences}
|
||||||
|
],
|
||||||
|
contentTemplate: _.template(contentTemplate)({
|
||||||
|
scope: this
|
||||||
|
})
|
||||||
|
}, options);
|
||||||
|
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
|
||||||
|
|
||||||
|
this._changedProps = null;
|
||||||
|
this._noApply = true;
|
||||||
|
this.spinners = [];
|
||||||
|
|
||||||
|
this._originalProps = this.options.props;
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
|
||||||
|
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
// Style & Size
|
||||||
|
this.inputHeader = new Common.UI.InputField({
|
||||||
|
el : $('#sliceradv-text-header'),
|
||||||
|
allowBlank : false,
|
||||||
|
blankError : me.txtEmpty,
|
||||||
|
style : 'width: 178px;'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.chHeader = new Common.UI.CheckBox({
|
||||||
|
el: $('#sliceradv-checkbox-header'),
|
||||||
|
labelText: this.strShowHeader
|
||||||
|
});
|
||||||
|
this.chHeader.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
if (this._changedProps) {
|
||||||
|
// this._changedProps.asc_putStrikeout(field.getValue()=='checked');
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
this.cmbSlicerStyle = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 50,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 272,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-spark-style',
|
||||||
|
minWidth: 190
|
||||||
|
});
|
||||||
|
this.cmbSlicerStyle.render($('#sliceradv-combo-style'));
|
||||||
|
this.cmbSlicerStyle.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbSlicerStyle.on('click', _.bind(this.onSelectSlicerStyle, this));
|
||||||
|
this.cmbSlicerStyle.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbSlicerStyle.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.numWidth = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#sliceradv-spin-width'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
defaultValue : 0,
|
||||||
|
value: '0 cm',
|
||||||
|
maxValue: 5963.9,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var numval = field.getNumberValue();
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
this.spinners.push(this.numWidth);
|
||||||
|
|
||||||
|
this.numHeight = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#sliceradv-spin-height'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
defaultValue : 0,
|
||||||
|
value: '0 cm',
|
||||||
|
maxValue: 5963.9,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var numval = field.getNumberValue();
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
this.spinners.push(this.numHeight);
|
||||||
|
|
||||||
|
this.numColWidth = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#sliceradv-spin-col-width'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
defaultValue : 0,
|
||||||
|
value: '0 cm',
|
||||||
|
maxValue: 5963.9,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numColWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var numval = field.getNumberValue();
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
this.spinners.push(this.numColWidth);
|
||||||
|
|
||||||
|
this.numColHeight = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#sliceradv-spin-col-height'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
defaultValue : 0,
|
||||||
|
value: '0 cm',
|
||||||
|
maxValue: 5963.9,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numColHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var numval = field.getNumberValue();
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
this.spinners.push(this.numColHeight);
|
||||||
|
|
||||||
|
this.numCols = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#sliceradv-spin-columns'),
|
||||||
|
step: 1,
|
||||||
|
width: 85,
|
||||||
|
defaultUnit : "",
|
||||||
|
defaultValue : 1,
|
||||||
|
value: '1',
|
||||||
|
allowDecimal: false,
|
||||||
|
maxValue: 20000,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numCols.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var numval = field.getNumberValue();
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
// Sorting & Filtering
|
||||||
|
|
||||||
|
this.radioAsc = new Common.UI.RadioBox({
|
||||||
|
el: $('#sliceradv-radio-asc'),
|
||||||
|
name: 'asc-radio-sliceradv-sort',
|
||||||
|
labelText: this.textAsc,
|
||||||
|
checked: true
|
||||||
|
});
|
||||||
|
this.radioAsc.on('change', _.bind(function(field, newValue, eOpts) {
|
||||||
|
if (newValue) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
this.radioDesc = new Common.UI.RadioBox({
|
||||||
|
el: $('#sliceradv-radio-desc'),
|
||||||
|
name: 'asc-radio-sliceradv-sort',
|
||||||
|
labelText: this.textDesc,
|
||||||
|
checked: false
|
||||||
|
});
|
||||||
|
this.radioDesc.on('change', _.bind(function(field, newValue, eOpts) {
|
||||||
|
if (newValue) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
this.chHideNoData = new Common.UI.CheckBox({
|
||||||
|
el: $('#sliceradv-check-hide-nodata'),
|
||||||
|
labelText: this.strHideNoData
|
||||||
|
});
|
||||||
|
this.chHideNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var checked = (field.getValue()=='checked');
|
||||||
|
this.chIndNoData.setDisabled(checked);
|
||||||
|
this.chShowNoData.setDisabled(checked || (this.chIndNoData.getValue()!='checked'));
|
||||||
|
this.chShowDel.setDisabled(checked);
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
this.chIndNoData = new Common.UI.CheckBox({
|
||||||
|
el: $('#sliceradv-check-indicate-nodata'),
|
||||||
|
labelText: this.strIndNoData
|
||||||
|
});
|
||||||
|
this.chIndNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
var checked = (field.getValue()=='checked');
|
||||||
|
this.chShowNoData.setDisabled(!checked);
|
||||||
|
if (this._changedProps) {
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
this.chShowNoData = new Common.UI.CheckBox({
|
||||||
|
el: $('#sliceradv-check-show-nodata-last'),
|
||||||
|
disabled: true,
|
||||||
|
labelText: this.strShowNoData
|
||||||
|
});
|
||||||
|
this.chShowNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
if (this._changedProps) {
|
||||||
|
// this._changedProps.asc_putStrikeout(field.getValue()=='checked');
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
this.chShowDel = new Common.UI.CheckBox({
|
||||||
|
el: $('#sliceradv-check-show-deleted'),
|
||||||
|
labelText: this.strShowDel
|
||||||
|
});
|
||||||
|
this.chShowDel.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||||
|
if (this._changedProps) {
|
||||||
|
// this._changedProps.asc_putStrikeout(field.getValue()=='checked');
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
// References
|
||||||
|
|
||||||
|
this.inputName = new Common.UI.InputField({
|
||||||
|
el : $('#sliceradv-text-name'),
|
||||||
|
allowBlank : false,
|
||||||
|
blankError : me.txtEmpty,
|
||||||
|
style : 'width: 178px;'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.lblSource = $('#sliceradv-lbl-source');
|
||||||
|
this.lblFormula = $('#sliceradv-lbl-formula');
|
||||||
|
|
||||||
|
this.on('show', function(obj) {
|
||||||
|
obj.getChild('.footer .primary').focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.afterRender();
|
||||||
|
},
|
||||||
|
|
||||||
|
getSettings: function() {
|
||||||
|
return this._changedProps;
|
||||||
|
},
|
||||||
|
|
||||||
|
_setDefaults: function(props) {
|
||||||
|
if (props ){
|
||||||
|
this._noApply = true;
|
||||||
|
|
||||||
|
// depents of data type
|
||||||
|
this.radioAsc.setCaption(this.textAsc + ' (' + this.textSmallLarge + ')' );
|
||||||
|
this.radioDesc.setCaption(this.textDesc + ' (' + this.textLargeSmall + ')' );
|
||||||
|
|
||||||
|
this.lblSource.text('Source name');
|
||||||
|
this.lblFormula.text('Name in formulas');
|
||||||
|
|
||||||
|
this._noApply = false;
|
||||||
|
|
||||||
|
this._changedProps = new Asc.asc_CParagraphProperty();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateMetricUnit: function() {
|
||||||
|
if (this.spinners) {
|
||||||
|
for (var i=0; i<this.spinners.length; i++) {
|
||||||
|
var spinner = this.spinners[i];
|
||||||
|
spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
afterRender: function() {
|
||||||
|
this.updateMetricUnit();
|
||||||
|
this._setDefaults(this._originalProps);
|
||||||
|
if (this.storageName) {
|
||||||
|
var value = Common.localStorage.getItem(this.storageName);
|
||||||
|
this.setActiveCategory((value!==null) ? parseInt(value) : 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onSelectSlicerStyle: function(combo, record) {
|
||||||
|
if (this._noApply) return;
|
||||||
|
|
||||||
|
if (this._changedProps) {
|
||||||
|
// this._changedProps.asc_setStyle(record.get('data'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
textTitle: 'Slicer Settings',
|
||||||
|
textHeader: 'Header',
|
||||||
|
strStyle: 'Style',
|
||||||
|
strSize: 'Size',
|
||||||
|
strWidth: 'Width',
|
||||||
|
strHeight: 'Height',
|
||||||
|
strButtons: 'Buttons',
|
||||||
|
strColumns: 'Columns',
|
||||||
|
textSort: 'Sort',
|
||||||
|
textSourceName: 'Source name',
|
||||||
|
textFormulaName: 'Name to use in formulas',
|
||||||
|
textName: 'Name',
|
||||||
|
strStyleSize: 'Style & Size',
|
||||||
|
strSorting: 'Sorting & Filtering',
|
||||||
|
strReferences: 'References',
|
||||||
|
txtEmpty: 'This field is required',
|
||||||
|
strShowHeader: 'Display header',
|
||||||
|
textAsc: 'Ascending',
|
||||||
|
textDesc: 'Descending',
|
||||||
|
textAZ: 'A to Z',
|
||||||
|
textZA: 'Z to A',
|
||||||
|
textOldNew: 'oldest to newest',
|
||||||
|
textNewOld: 'newest to oldest',
|
||||||
|
textSmallLarge: 'smallest to largest',
|
||||||
|
textLargeSmall: 'largest to smallest',
|
||||||
|
strHideNoData: 'Hide items with no data',
|
||||||
|
strIndNoData: 'Visually indicate items with no data',
|
||||||
|
strShowNoData: 'Show items with no data last',
|
||||||
|
strShowDel: 'Show items deleted from the data source'
|
||||||
|
|
||||||
|
}, SSE.Views.SlicerSettings || {}));
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue