445 lines
18 KiB
JavaScript
445 lines
18 KiB
JavaScript
/*
|
|
*
|
|
* (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
|
|
*
|
|
*/
|
|
/**
|
|
* FormulaDialog.js
|
|
*
|
|
* Add formula to cell dialog
|
|
*
|
|
* Created by Alexey.Musinov on 11/04/14
|
|
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
|
*
|
|
*/
|
|
|
|
define([
|
|
'common/main/lib/component/Window',
|
|
'spreadsheeteditor/main/app/collection/FormulaGroups'
|
|
], function () {
|
|
'use strict';
|
|
|
|
SSE.Views = SSE.Views || {};
|
|
SSE.Views.FormulaDialog = Common.UI.Window.extend(_.extend({
|
|
|
|
applyFunction: undefined,
|
|
|
|
initialize : function (options) {
|
|
var t = this,
|
|
_options = {};
|
|
|
|
_.extend(_options, {
|
|
width : 375,
|
|
height : 490,
|
|
header : true,
|
|
cls : 'formula-dlg',
|
|
contentTemplate : '',
|
|
title : t.txtTitle,
|
|
items : [],
|
|
buttons: null
|
|
}, options);
|
|
|
|
this.template = options.template || [
|
|
'<div class="box" style="height:' + (_options.height - 85) + 'px;">',
|
|
'<div class="content-panel" >',
|
|
'<div id="formula-dlg-search" style="height:22px; margin-bottom:10px;"></div>',
|
|
'<label class="header">' + t.textGroupDescription + '</label>',
|
|
'<div id="formula-dlg-combo-group" class="input-group-nr" style=""></div>',
|
|
'<label class="header" style="margin-top: 10px">' + t.textListDescription + '</label>',
|
|
'<div id="formula-dlg-combo-functions" class="combo-functions"></div>',
|
|
'<label id="formula-dlg-args" style="margin-top: 7px">' + '</label>',
|
|
'<label id="formula-dlg-desc" style="margin-top: 4px; display: block;">' + '</label>',
|
|
'</div>',
|
|
'</div>',
|
|
'<div class="separator horizontal"></div>',
|
|
'<div class="footer center">',
|
|
'<button id="formula-dlg-btn-ok" class="btn normal dlg-btn primary" result="ok" style="width: 86px;">' + this.okButtonText + '</button>',
|
|
'<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
|
|
'</div>'
|
|
].join('');
|
|
|
|
this.api = options.api;
|
|
this.formulasGroups = options.formulasGroups;
|
|
this.handler = options.handler;
|
|
|
|
_options.tpl = _.template(this.template)(_options);
|
|
|
|
Common.UI.Window.prototype.initialize.call(this, _options);
|
|
},
|
|
render: function () {
|
|
Common.UI.Window.prototype.render.call(this);
|
|
|
|
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
|
|
|
|
var me = this;
|
|
this.inputSearch = new Common.UI.InputField({
|
|
el : $('#formula-dlg-search', this.$window),
|
|
allowBlank : true,
|
|
placeHolder : this.txtSearch,
|
|
validateOnChange : true,
|
|
validation : function () { return true; }
|
|
}).on ('changing', function (input, value) {
|
|
if (value.length) {
|
|
value = value.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
|
|
me.filter = value.toLowerCase();
|
|
} else {
|
|
me.filter = undefined;
|
|
}
|
|
me.filterFormulas();
|
|
});
|
|
|
|
this.btnOk = new Common.UI.Button({
|
|
el: $('#formula-dlg-btn-ok')
|
|
});
|
|
|
|
this.syntaxLabel = $('#formula-dlg-args');
|
|
this.descLabel = $('#formula-dlg-desc');
|
|
this.fillFormulasGroups();
|
|
},
|
|
|
|
getFocusedComponents: function() {
|
|
return [this.inputSearch, this.cmbFuncGroup, this.cmbListFunctions];
|
|
},
|
|
|
|
getDefaultFocusableComponent: function () {
|
|
return this.inputSearch;
|
|
},
|
|
|
|
show: function (group) {
|
|
if (this.$window) {
|
|
var main_width, main_height, top, left, win_height = this.initConfig.height;
|
|
|
|
if (window.innerHeight === undefined) {
|
|
main_width = document.documentElement.offsetWidth;
|
|
main_height = document.documentElement.offsetHeight;
|
|
} else {
|
|
main_width = Common.Utils.innerWidth();
|
|
main_height = Common.Utils.innerHeight();
|
|
}
|
|
|
|
top = (parseInt(main_height, 10) - parseInt(win_height, 10)) / 2;
|
|
left = (parseInt(main_width, 10) - parseInt(this.initConfig.width, 10)) / 2;
|
|
|
|
this.$window.css('left', Math.floor(left));
|
|
this.$window.css('top', Math.floor(top));
|
|
}
|
|
|
|
Common.UI.Window.prototype.show.call(this);
|
|
|
|
group && this.cmbFuncGroup.setValue(group);
|
|
(group || this.cmbFuncGroup.getValue()=='Last10') && this.fillFunctions(this.cmbFuncGroup.getValue());
|
|
|
|
this.inputSearch.setValue('');
|
|
this._preventCloseCellEditor = false;
|
|
},
|
|
|
|
hide: function () {
|
|
var val = this.cmbFuncGroup.getValue();
|
|
(val=='Recommended') && (val = 'Last10');
|
|
if (this.cmbFuncGroup.store.length>0 && this.cmbFuncGroup.store.at(0).get('value')=='Recommended') {
|
|
this.cmbFuncGroup.store.shift();
|
|
this.cmbFuncGroup.onResetItems();
|
|
}
|
|
this.cmbFuncGroup.setValue(val);
|
|
this.recommended = this.filter = undefined;
|
|
|
|
Common.UI.Window.prototype.hide.call(this);
|
|
|
|
!this._preventCloseCellEditor && this.api.asc_closeCellEditor(true);
|
|
},
|
|
|
|
onBtnClick: function (event) {
|
|
this._handleInput(event.currentTarget.attributes['result'].value);
|
|
},
|
|
onDblClickFunction: function () {
|
|
this._handleInput('ok');
|
|
},
|
|
onSelectGroup: function (combo, record) {
|
|
if (!_.isUndefined(record) && !_.isUndefined(record.value)) {
|
|
record.value && this.fillFunctions(record.value);
|
|
}
|
|
|
|
this.onUpdateFocus();
|
|
},
|
|
onSelectFunction: function (listView, itemView, record) {
|
|
var funcId, functions, func;
|
|
|
|
if (this.formulasGroups && record) {
|
|
this.applyFunction = {name: record.get('value'), origin: record.get('origin')};
|
|
this.syntaxLabel.text(this.applyFunction.name + record.get('args'));
|
|
this.descLabel.text(record.get('desc'));
|
|
}
|
|
},
|
|
onPrimary: function(list, record, event) {
|
|
this._handleInput('ok');
|
|
},
|
|
|
|
_handleInput: function(state) {
|
|
if (this.handler && state == 'ok') {
|
|
if (this.btnOk.isDisabled())
|
|
return;
|
|
this._preventCloseCellEditor = true;
|
|
this.handler.call(this, this.applyFunction);
|
|
}
|
|
|
|
this.hide();
|
|
},
|
|
|
|
onUpdateFocus: function () {
|
|
if (this.cmbListFunctions) {
|
|
_.delay(function (me) {
|
|
me.cmbListFunctions.focus();
|
|
}, 100, this);
|
|
}
|
|
},
|
|
|
|
//
|
|
|
|
fillFormulasGroups: function () {
|
|
if (this.formulasGroups) {
|
|
|
|
var lang = Common.Utils.InternalSettings.get("sse-settings-func-locale");
|
|
if (_.isEmpty(lang)) lang = 'en';
|
|
|
|
var i, groupsListItems = [], length = this.formulasGroups.length;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
var group = this.formulasGroups.at(i);
|
|
if (group.get('functions').length) {
|
|
groupsListItems.push({
|
|
value : group.get('name'),
|
|
displayValue : group.get('caption')
|
|
});
|
|
}
|
|
}
|
|
|
|
if (!this.cmbFuncGroup) {
|
|
this.cmbFuncGroup = new Common.UI.ComboBox({
|
|
el : $('#formula-dlg-combo-group'),
|
|
menuStyle : 'min-width: 100%;',
|
|
cls : 'input-group-nr',
|
|
data : groupsListItems,
|
|
editable : false,
|
|
takeFocusOnClose: true
|
|
});
|
|
this.cmbFuncGroup.on('selected', _.bind(this.onSelectGroup, this));
|
|
} else {
|
|
this.cmbFuncGroup.setData(groupsListItems);
|
|
}
|
|
this.cmbFuncGroup.setValue('Last10');
|
|
this.fillFunctions('Last10');
|
|
|
|
this.allFunctions = new Common.UI.DataViewStore();
|
|
var group = this.formulasGroups.findWhere({name : 'All'});
|
|
group && this.allFunctions.reset(group.get('functions'));
|
|
}
|
|
},
|
|
fillFunctions: function (name) {
|
|
if (this.formulasGroups) {
|
|
|
|
if (!this.cmbListFunctions && !this.functions) {
|
|
this.functions = new Common.UI.DataViewStore();
|
|
|
|
this.cmbListFunctions = new Common.UI.ListView({
|
|
el: $('#formula-dlg-combo-functions'),
|
|
store: this.functions,
|
|
tabindex: 1,
|
|
cls: 'dbl-clickable'
|
|
});
|
|
|
|
this.cmbListFunctions.on('item:select', _.bind(this.onSelectFunction, this));
|
|
this.cmbListFunctions.on('item:dblclick', _.bind(this.onDblClickFunction, this));
|
|
this.cmbListFunctions.on('entervalue', _.bind(this.onPrimary, this));
|
|
this.cmbListFunctions.onKeyDown = _.bind(this.onKeyDown, this);
|
|
this.onUpdateFocus();
|
|
}
|
|
|
|
if (this.functions) {
|
|
this.functions.reset();
|
|
|
|
var functions = null;
|
|
if (name=='Recommended') {
|
|
functions = this.recommended;
|
|
} else {
|
|
var group = this.formulasGroups.findWhere({name : name});
|
|
group && (functions = group.get('functions'));
|
|
}
|
|
var length = functions ? functions.length : 0;
|
|
for (var i = 0; i < length; ++i) {
|
|
this.functions.push(new Common.UI.DataViewModel({
|
|
id : functions[i].get('index'),
|
|
selected : i < 1,
|
|
allowSelected : true,
|
|
value : functions[i].get('name'),
|
|
args : functions[i].get('args'),
|
|
desc : functions[i].get('desc'),
|
|
origin : functions[i].get('origin')
|
|
}));
|
|
}
|
|
|
|
this.applyFunction = length ? {name: functions[0].get('name'), origin: functions[0].get('origin')} : undefined;
|
|
|
|
this.syntaxLabel.text(length ? this.applyFunction.name + functions[0].get('args') : '');
|
|
this.descLabel.text(length ? functions[0].get('desc') : '');
|
|
this.cmbListFunctions.scroller.update({
|
|
minScrollbarLength : 40,
|
|
alwaysVisibleY : true
|
|
});
|
|
this.btnOk.setDisabled(!length);
|
|
}
|
|
}
|
|
},
|
|
|
|
filterFormulas: function() {
|
|
if (!this.filter) {
|
|
this.cmbFuncGroup.setValue('Last10');
|
|
this.fillFunctions('Last10');
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
filter_reg = new RegExp(me.filter, 'ig'),
|
|
arr = this.allFunctions.filter(function(item) {
|
|
return !!item.get('name').match(filter_reg);
|
|
});
|
|
if (arr.length>0) {
|
|
if (this.cmbFuncGroup.store.at(0).get('value')!='Recommended') {
|
|
this.cmbFuncGroup.store.unshift({value: 'Recommended', displayValue: this.txtRecommended});
|
|
this.cmbFuncGroup.onResetItems();
|
|
}
|
|
var idx = _.findIndex(arr, function(item) {
|
|
return (item.get('name').toLowerCase()===me.filter);
|
|
});
|
|
if (idx>0) {
|
|
var removed = arr.splice(idx, 1);
|
|
arr.unshift(removed[0]);
|
|
}
|
|
} else if (arr.length==0 && this.cmbFuncGroup.store.length>0 && this.cmbFuncGroup.store.at(0).get('value')=='Recommended') {
|
|
this.cmbFuncGroup.store.shift();
|
|
this.cmbFuncGroup.onResetItems();
|
|
}
|
|
this.cmbFuncGroup.setValue('Recommended');
|
|
this.recommended = arr;
|
|
this.fillFunctions('Recommended');
|
|
},
|
|
|
|
onKeyDown: function (e, event) {
|
|
var i = 0, record = null,
|
|
parent = this,
|
|
me = this.cmbListFunctions,
|
|
charVal = '',
|
|
value = '',
|
|
firstRecord = null,
|
|
recSelect = false,
|
|
innerEl = null,
|
|
isEqualSelectRecord = false,
|
|
selectRecord = null,
|
|
needNextRecord = false;
|
|
|
|
if (me.disabled) return;
|
|
if (_.isUndefined(undefined)) event = e;
|
|
|
|
function selectItem (item) {
|
|
me.selectRecord(item);
|
|
parent.onScrollToRecordCustom.call(me, item);
|
|
|
|
innerEl = $(me.el).find('.inner');
|
|
me.scroller.scrollTop(innerEl.scrollTop(), 0);
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
charVal = e.key;
|
|
if (e.keyCode > 64 && e.keyCode < 91 && charVal && charVal.length) {
|
|
charVal = charVal.toLocaleLowerCase();
|
|
selectRecord = me.store.findWhere({selected: true});
|
|
if (selectRecord) {
|
|
value = selectRecord.get('value');
|
|
isEqualSelectRecord = (value && value.length && value[0].toLocaleLowerCase() === charVal)
|
|
}
|
|
|
|
for (i = 0; i < me.store.length; ++i) {
|
|
record = me.store.at(i);
|
|
value = record.get('value');
|
|
|
|
if (value[0].toLocaleLowerCase() === charVal) {
|
|
|
|
if (null === firstRecord) firstRecord = record;
|
|
|
|
if (isEqualSelectRecord) {
|
|
if (selectRecord === record) {
|
|
isEqualSelectRecord = false;
|
|
}
|
|
|
|
continue;
|
|
}
|
|
|
|
if (record.get('selected')) continue;
|
|
|
|
selectItem(record);
|
|
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (firstRecord) {
|
|
selectItem(firstRecord);
|
|
return;
|
|
}
|
|
}
|
|
|
|
Common.UI.DataView.prototype.onKeyDown.call(me, e, event);
|
|
},
|
|
|
|
onScrollToRecordCustom: function (record) {
|
|
var innerEl = $(this.el).find('.inner');
|
|
var inner_top = innerEl.offset().top;
|
|
var div = innerEl.find('#' + record.get('id')).parent();
|
|
var div_top = div.offset().top;
|
|
|
|
if (div_top < inner_top || div_top+div.height() > inner_top + innerEl.height()) {
|
|
if (this.scroller) {
|
|
this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top, 0);
|
|
} else {
|
|
innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top);
|
|
}
|
|
}
|
|
},
|
|
|
|
textGroupDescription: 'Select Function Group',
|
|
textListDescription: 'Select Function',
|
|
sDescription: 'Description',
|
|
txtTitle: 'Insert Function',
|
|
txtSearch: 'Search',
|
|
txtRecommended: 'Recommended'
|
|
|
|
}, SSE.Views.FormulaDialog || {}));
|
|
}); |