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

changes SE

Browse source
This commit is contained in:
OVSharova 2021-09-06 11:55:05 +03:00
parent f1e88946e5
commit d80ca330c1
16 changed files with 3784 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
test/spreadsheeteditor/main/index.html
View file

@ -10,6 +10,7 @@
<!-- debug begin -->
<link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
<link rel="stylesheet/less" type="text/css" href="resources/less/application.less" />
<link rel="stylesheet/less" type="text/css" href="resources/less/celleditor.less" />
<!-- debug end -->
<!-- splash -->
@ -204,6 +205,17 @@
</script>
<div class="viewer">
<div class="ce-group-name">
<input id="ce-cell-name" class="aslabel form-control" type="text">
<div id="ce-cell-name-menu"></div>
<button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
</div>
<div class="ce-group-expand">
<button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
</div>
<div class="ce-group-content">
<textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
</div>
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<ul id="worksheets" class="worksheet-list"></ul>
</div>
@ -257,6 +269,7 @@
<script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
<script type="text/javascript" src="../../../vendor/jszip-utils/jszip-utils.min.js"></script>
<script src="../../../vendor/requirejs/require.js"></script>
<script>
require.config({
@ -278,8 +291,14 @@
<script type="text/javascript" src="../../unit-tests/common/main/lib/util/LocalStorage.js"></script>
<script type="text/javascript" src="../../unit-tests/common/main/lib/util/utils.js"></script>
<script type="text/javascript" src="../../unit-tests/common/main/lib/view/LoadMask.js"></script>
<!--<script type="text/javascript" src="../../unit-tests/common/main/lib/component/BaseView.js"></script>
<script type="text/javascript" src="../../unit-tests/common/main/lib/core/application.js"></script>-->
<!--<script type="text/javascript" src="../../unit-tests/common/main/lib/view/modals.js"></script>
<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/modals.js"></script>-->
<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/modals.js"></script>
<script type="text/javascript" src="js/CellEditorView.js"></script>
<script type="text/javascript" src="js/CellEditorController.js"></script>-->
<script type="text/javascript" src="js/ApplicationView.js"></script>
<script type="text/javascript" src="js/ApplicationController.js"></script>
<script type="text/javascript" src="js/application.js"></script>

9
test/spreadsheeteditor/main/js/ApplicationController.js
View file

@ -134,7 +134,7 @@ SSE.ApplicationController = new(function(){
api.asc_registerCallback('asc_onRunAutostartMacroses', onRunAutostartMacroses);
api.asc_setDocInfo(docInfo);
api.asc_getEditorPermissions(config.licenseUrl, config.customerId);
api.asc_enableKeyEvents(true);
api.asc_enableKeyEvents(false);
// Common.Analytics.trackEvent('Load', 'Start');
}
@ -202,6 +202,7 @@ SSE.ApplicationController = new(function(){
hidePreloader();
onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
if ( permissions.print === false)
$('#idt-print').hide();
@ -241,6 +242,8 @@ SSE.ApplicationController = new(function(){
Common.Gateway.on('downloadas', onDownloadAs);
Common.Gateway.on('requestclose', onRequestClose);
SSE.ApplicationView.tools.get('#idt-fullscreen')
.on('click', function(){
common.utils.openLink(embedConfig.fullscreenUrl);
@ -379,7 +382,7 @@ SSE.ApplicationController = new(function(){
onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
api.asc_setViewMode(true);
//api.asc_setViewMode(true);
api.asc_LoadDocument();
}
@ -427,6 +430,8 @@ SSE.ApplicationController = new(function(){
}
me.loadMask && me.loadMask.hide();
/* if (type == Asc.c_oAscAsyncActionType.BlockInteraction && !( (id == Asc.c_oAscAsyncAction['LoadDocumentFonts'] || id == Asc.c_oAscAsyncAction['ApplyChanges']) && (this.dontCloseDummyComment || this.inTextareaControl || Common.Utils.ModalWindow.isVisible() || this.inFormControl) ))
this.onEditComplete(this.loadMask, {restorefocus:true});*/
}
}

41
test/spreadsheeteditor/main/js/ApplicationView.js
View file

@ -36,13 +36,39 @@ if (SSE === undefined) {
SSE.ApplicationView = new(function(){
var $btnTools;
var $btnTools
,$cellname
,$btnexpand
,$btnfunc
,btnNamedRanges;
// Initialize view
function createView(){
$cellname = $('#ce-cell-name');
$btnexpand = $('#ce-btn-expand');
$btnfunc = $('#ce-func-label');
$btnfunc.addClass('disabled');
/*btnNamedRanges = new Common.UI.Button({
parentEl: $('#ce-cell-name-menu'),
menu : new Common.UI.Menu({
style : 'min-width: 70px;max-width:400px;',
maxHeight: 250,
items: [
{ caption: this.textManager, value: 'manager' },
{ caption: '--' }
]
})
});
this.btnNamedRanges.setVisible(false);
this.btnNamedRanges.menu.setOffset(-81);*/
$btnTools = $('#box-tools button');
$btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
$btnTools.parent().append(
'<ul class="dropdown-menu pull-right">' +
@ -59,12 +85,25 @@ SSE.ApplicationView = new(function(){
function getTools(name) {
return $btnTools.parent().find(name);
}
function updateCellInfo(info) {
if (info) {
this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
}
}
function cellNameDisabled(disabled){
(disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
this.btnNamedRanges.setDisabled(disabled);
}
return {
create: createView
, tools: {
get: getTools
},
cell: {
updateInfo: updateCellInfo,
nameDisabled: cellNameDisabled
},
txtDownload: 'Download',
txtPrint: 'Print',

338
test/spreadsheeteditor/main/js/CellEditorController.js Normal file
View file

@ -0,0 +1,338 @@
/*
*
* (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
*
*/
/**
* CellEditor.js
*
* CellEditor Controller
*
* Created by Maxim Kadushkin on 08 April 2014
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
define([
'test/unit-tests/common/main/lib/core/application'
], function (Viewport) {
'use strict';
SSE.Controllers.CellEditor = Backbone.Controller.extend({
views: [
'CellEditorView'
],
events: function() {
return {
'keyup input#ce-cell-name': _.bind(this.onCellName,this),
'keyup textarea#ce-cell-content': _.bind(this.onKeyupCellEditor,this),
'blur textarea#ce-cell-content': _.bind(this.onBlurCellEditor,this),
'click button#ce-btn-expand': _.bind(this.expandEditorField,this),
'click button#ce-func-label': _.bind(this.onInsertFunction, this)
};
},
initialize: function() {
this.addListeners({
'CellEditor': {},
'Viewport': {
'layout:resizedrag': _.bind(this.onLayoutResize, this)
},
'Common.Views.Header': {
'formulabar:hide': function (state) {
this.editor.setVisible(!state);
common.localStorage.setBool('sse-hidden-formula', state);
Common.NotificationCenter.trigger('layout:changed', 'celleditor', state?'hidden':'showed');
}.bind(this)
}
});
},
setApi: function(api) {
this.api = api;
this.api.isCEditorFocused = false;
this.api.asc_registerCallback('asc_onSelectionNameChanged', _.bind(this.onApiCellSelection, this));
this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiDisconnect,this));
Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiDisconnect, this));
Common.NotificationCenter.on('cells:range', _.bind(this.onCellsRange, this));
this.api.asc_registerCallback('asc_onLockDefNameManager', _.bind(this.onLockDefNameManager, this));
this.api.asc_registerCallback('asc_onInputKeyDown', _.bind(this.onInputKeyDown, this));
return this;
},
setMode: function(mode) {
this.mode = mode;
this.editor.$btnfunc[this.mode.isEdit?'removeClass':'addClass']('disabled');
this.editor.btnNamedRanges.setVisible(this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge);
if ( this.mode.isEdit ) {
this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onApiSelectionChanged, this));
}
},
onInputKeyDown: function(e) {
if (Common.UI.Keys.UP === e.keyCode || Common.UI.Keys.DOWN === e.keyCode ||
Common.UI.Keys.TAB === e.keyCode || Common.UI.Keys.RETURN === e.keyCode || Common.UI.Keys.ESC === e.keyCode ||
Common.UI.Keys.LEFT === e.keyCode || Common.UI.Keys.RIGHT === e.keyCode) {
var menu = $('#menu-formula-selection'); // for formula menu
if (menu.hasClass('open'))
menu.find('.dropdown-menu').trigger('keydown', e);
}
},
onLaunch: function() {
this.editor = this.getView('CellEditor');
this.bindViewEvents(this.editor, this.events);
this.editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127
var val = common.localStorage.getItem('sse-celleditor-height');
this.editor.keep_height = (val!==null && parseInt(val)>0) ? parseInt(val) : 74;
if (common.localStorage.getBool('sse-celleditor-expand')) {
this.editor.$el.height(this.editor.keep_height);
this.onLayoutResize(undefined, 'cell:edit');
}
this.editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this))
.on('show:before', _.bind(this.onNameBeforeShow, this));
this.namedrange_locked = false;
},
onApiEditCell: function(state) {
if (this.viewmode) return; // signed file
if (state == Asc.c_oAscCellEditorState.editStart){
this.api.isCellEdited = true;
this.editor.cellNameDisabled(true);
} else if (state == Asc.c_oAscCellEditorState.editInCell) {
this.api.isCEditorFocused = 'clear';
} else if (state == Asc.c_oAscCellEditorState.editEnd) {
this.api.isCellEdited = false;
this.api.isCEditorFocused = false;
this.editor.cellNameDisabled(false);
}
this.editor.$btnfunc.toggleClass('disabled', state == Asc.c_oAscCellEditorState.editText);
},
onApiCellSelection: function(info) {
this.editor.updateCellInfo(info);
},
onApiSelectionChanged: function(info) {
if (this.viewmode) return; // signed file
var seltype = info.asc_getSelectionType(),
coauth_disable = (!this.mode.isEditMailMerge && !this.mode.isEditDiagram) ? (info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true) : false;
var is_chart_text = seltype == Asc.c_oAscSelectionType.RangeChartText,
is_chart = seltype == Asc.c_oAscSelectionType.RangeChart,
is_shape_text = seltype == Asc.c_oAscSelectionType.RangeShapeText,
is_shape = seltype == Asc.c_oAscSelectionType.RangeShape,
is_image = seltype == Asc.c_oAscSelectionType.RangeImage || seltype == Asc.c_oAscSelectionType.RangeSlicer,
is_mode_2 = is_shape_text || is_shape || is_chart_text || is_chart;
this.editor.$btnfunc.toggleClass('disabled', is_image || is_mode_2 || coauth_disable);
},
onApiDisconnect: function() {
this.mode.isEdit = false;
var controller = this.getApplication().getController('FormulaDialog');
if (controller) {
controller.hideDialog();
}
if (!this.mode.isEdit) {
$('#ce-func-label', this.editor.el).addClass('disabled');
this.editor.btnNamedRanges.setVisible(false);
}
},
onCellsRange: function(status) {
this.editor.cellNameDisabled(status != Asc.c_oAscSelectionDialogType.None);
this.editor.$btnfunc.toggleClass('disabled', status != Asc.c_oAscSelectionDialogType.None);
},
onLayoutResize: function(o, r) {
if (r == 'cell:edit') {
if (Math.floor(this.editor.$el.height()) > 19) {
if (!this.editor.$btnexpand.hasClass('btn-collapse')) {
this.editor.$el.addClass('expanded');
this.editor.$btnexpand['addClass']('btn-collapse');
}
o && common.localStorage.setItem('sse-celleditor-height', this.editor.$el.height());
o && common.localStorage.setBool('sse-celleditor-expand', true);
} else {
this.editor.$el.removeClass('expanded');
this.editor.$btnexpand['removeClass']('btn-collapse');
o && common.localStorage.setBool('sse-celleditor-expand', false);
}
}
},
onCellName: function(e) {
if (e.keyCode == Common.UI.Keys.RETURN){
var name = this.editor.$cellname.val();
if (name && name.length) {
this.api.asc_findCell(name);
}
Common.NotificationCenter.trigger('edit:complete', this.editor);
}
},
onBlurCellEditor: function() {
if (this.api.isCEditorFocused == 'clear')
this.api.isCEditorFocused = undefined;
else if (this.api.isCellEdited)
this.api.isCEditorFocused = true;
// if (Common.Utils.isIE && !$('#menu-formula-selection').hasClass('open')) {// for formula menu
// this.getApplication().getController('DocumentHolder').documentHolder.focus();
// }
},
onKeyupCellEditor: function(e) {
if(e.keyCode == Common.UI.Keys.RETURN && !e.altKey){
this.api.isCEditorFocused = 'clear';
}
},
expandEditorField: function() {
if ( Math.floor(this.editor.$el.height()) > 19) {
this.editor.keep_height = this.editor.$el.height();
this.editor.$el.height(19);
this.editor.$el.removeClass('expanded');
this.editor.$btnexpand['removeClass']('btn-collapse');
common.localStorage.setBool('sse-celleditor-expand', false);
} else {
this.editor.$el.height(this.editor.keep_height);
this.editor.$el.addClass('expanded');
this.editor.$btnexpand['addClass']('btn-collapse');
common.localStorage.setBool('sse-celleditor-expand', true);
}
Common.NotificationCenter.trigger('layout:changed', 'celleditor');
Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true});
},
onInsertFunction: function() {
if (this.viewmode) return; // signed file
if ( this.mode.isEdit && !this.editor.$btnfunc['hasClass']('disabled')) {
var controller = this.getApplication().getController('FormulaDialog');
if (controller) {
$('#ce-func-label', this.editor.el).blur();
controller.showDialog();
}
}
},
onNamedRangesMenu: function(menu, item) {
var me = this;
if (item.options.value=='manager') {
var wc = this.api.asc_getWorksheetsCount(),
i = -1,
items = [], sheetNames = [];
while (++i < wc) {
if (!this.api.asc_isWorksheetHidden(i)) {
sheetNames[i] = this.api.asc_getWorksheetName(i);
items.push({displayValue: sheetNames[i], value: i});
}
}
(new SSE.Views.NameManagerDlg({
api: this.api,
handler: function(result) {
Common.NotificationCenter.trigger('edit:complete', me.editor);
},
locked: this.namedrange_locked,
sheets: items,
sheetNames: sheetNames,
ranges: this.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.All),
props : this.api.asc_getDefaultDefinedName(),
sort : this.rangeListSort
})).on('close', function(win){
me.rangeListSort = win.getSettings();
}).show();
} else {
this.api.asc_findCell(item.caption);
Common.NotificationCenter.trigger('edit:complete', this.editor);
}
},
onNameBeforeShow: function() {
var names = this.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.WorksheetWorkbook, true),
rangesMenu = this.editor.btnNamedRanges.menu,
prev_name='';
rangesMenu.removeItems(2, rangesMenu.items.length-1);
names.sort(function(item1, item2) {
var n1 = item1.asc_getName(true).toLowerCase(),
n2 = item2.asc_getName(true).toLowerCase();
if (n1==n2) return 0;
return (n1<n2) ? -1 : 1;
});
_.each(names, function(field, index) {
var name = field.asc_getName(true);
if (prev_name !== name) {
rangesMenu.addItem(new Common.UI.MenuItem({
caption : name
}));
}
prev_name = name;
});
this.editor.btnNamedRanges.menu.items[0].setDisabled(!!this.api.asc_isProtectedSheet());
this.editor.btnNamedRanges.menu.items[1].setVisible(rangesMenu.items.length>2);
},
onLockDefNameManager: function(state) {
this.namedrange_locked = (state == Asc.c_oAscDefinedNameReason.LockDefNameManager);
},
SetDisabled: function(disabled) {
this.editor.$btnfunc[!disabled && this.mode.isEdit ?'removeClass':'addClass']('disabled');
this.editor.btnNamedRanges.setVisible(!disabled && this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge);
},
setPreviewMode: function(mode) {
if (this.viewmode === mode) return;
this.viewmode = mode;
this.editor.$btnfunc[!mode && this.mode.isEdit?'removeClass':'addClass']('disabled');
this.editor.cellNameDisabled(mode && !(this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge));
}
});
});

106
test/spreadsheeteditor/main/js/CellEditorView.js Normal file
View file

@ -0,0 +1,106 @@
/*
*
* (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
*
*/
/**
* CellEdit.js
*
* Created by Maxim Kadushkin on 04 April 2014
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!spreadsheeteditor/main/template/CellEditor.template',
'test/unit-tests/common/main/lib/component/BaseView'
], function (template) {
'use strict';
SSE.Views.CellEditor = Common.UI.BaseView.extend(_.extend({
template: _.template(template),
initialize: function (options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
},
render: function () {
$(this.el).html(this.template());
this.btnNamedRanges = new Common.UI.Button({
parentEl: $('#ce-cell-name-menu'),
menu : new Common.UI.Menu({
style : 'min-width: 70px;max-width:400px;',
maxHeight: 250,
items: [
{ caption: this.textManager, value: 'manager' },
{ caption: '--' }
]
})
});
this.btnNamedRanges.setVisible(false);
this.btnNamedRanges.menu.setOffset(-81);
this.$cellname = $('#ce-cell-name', this.el);
this.$btnexpand = $('#ce-btn-expand', this.el);
this.$btnfunc = $('#ce-func-label', this.el);
var me = this;
this.$cellname.on('focus', function(e){
var txt = me.$cellname[0];
txt.selectionStart = 0;
txt.selectionEnd = txt.value.length;
txt.scrollLeft = txt.scrollWidth;
});
this.$btnfunc.addClass('disabled');
this.$btnfunc.tooltip({
title : this.tipFormula,
placement : 'cursor'
});
return this;
},
updateCellInfo: function(info) {
if (info) {
this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
}
},
cellNameDisabled: function(disabled){
(disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
this.btnNamedRanges.setDisabled(disabled);
},
tipFormula: 'Insert Function',
textManager: 'Manager'
}, SSE.Views.CellEditor || {}));
});

159
test/spreadsheeteditor/main/resources/less/celleditor.less Normal file
View file

@ -0,0 +1,159 @@
// Common styles
@import "../../../../unit-tests/common/main/resources/less/colors-table-ie-fix.less";
@import "../../../../unit-tests/common/main/resources/less/variables.less";
@import "../../../../unit-tests/common/main/resources/less/colors-table.less";
#cell-editing-box {
--pixel-ratio-factor: 1;
border-bottom: solid @scaled-one-px-value-ie @border-toolbar-ie;
border-bottom: solid @scaled-one-px-value @border-toolbar;
border-left: solid @scaled-one-px-value-ie @border-toolbar-ie;
border-left: solid @scaled-one-px-value @border-toolbar;
min-height: 20px;
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
.ce-group-name {
float: left;
height: 20px;
//border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
//border-bottom: @scaled-one-px-value solid @border-toolbar;
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
#ce-cell-name {
width: 100px;
height: 19px;
height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1)));
padding: 0px 19px 0 4px;
vertical-align: top;
display: inline-block;
border: 0 none;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar;
transition: none;
-webkit-transition: none;
box-shadow: 0 @scaled-one-px-value-ie 0 0 @border-toolbar-ie;
box-shadow: 0 @scaled-one-px-value 0 0 @border-toolbar;
&[disabled] {
color: @border-preview-select-ie;
color: @border-preview-select;
opacity: 0.5;
}
}
#ce-cell-name-menu {
display: inline-block;
position: absolute;
left: 80px;
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
button {
background-color: @background-normal-ie;
background-color: @background-normal;
height: 19px;
&.disabled {
opacity: 0.5;
}
&:active:not(.disabled),
&.active:not(.disabled){
.caret {
border-color: @icon-normal;
}
}
}
.dropdown-menu a {
overflow: hidden;
text-overflow: ellipsis;
}
}
#ce-func-label {
height: 20px;
margin-left: -3px;
.border-radius(0);
&.disabled {
opacity: 0.4;
}
}
}
&:not(.expanded) {
#ce-func-label {
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar;
}
}
.ce-group-expand {
float: right;
//height: 20px;
height: 100%;
background-color: @background-normal-ie;
background-color: @background-normal;
}
.ce-group-content {
margin: 0 16px 0 120px;
height: 100%;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar;
#ce-cell-content {
height: 100%;
resize: none;
min-height: 19px;
border: 0 none;
font-size: 12px;
line-height: 18px;
padding-bottom: 0;
&[disabled] {
color: @border-preview-select-ie;
color: @border-preview-select;
opacity: 0.5;
}
}
}
#ce-cell-name, #ce-cell-content {
border-radius: 0;
}
&+.layout-resizer {
border-top: 0 none;
border-bottom: 0 none;
&.move {
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-top: @scaled-one-px-value solid @border-toolbar;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar;
opacity: 0.4;
}
}
}
#ce-btn-expand {
width: 16px;
height: 18px;
.border-radius(0);
background: transparent;
padding: 0 2px 0;
.caret {
transition: transform .2s;
border-color: @icon-normal;
}
&.btn-collapse {
.caret {
transform: rotate(45deg);
}
}
}

11
test/spreadsheeteditor/main/template/CellEditor.template Normal file
View file

@ -0,0 +1,11 @@
<div class="ce-group-name">
<input id="ce-cell-name" class="aslabel form-control" type="text">
<div id="ce-cell-name-menu"></div>
<button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
</div>
<div class="ce-group-expand">
<button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
</div>
<div class="ce-group-content">
<textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
</div>

117
test/unit-tests/common/main/lib/component/BaseView.js Normal file
View file

@ -0,0 +1,117 @@
/*
*
* (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
*
*/
/**
* BaseView.js
*
* Created by Alexander Yuzhin on 1/17/14
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
if (Common === undefined)
var Common = {};
define([
'backbone'
], function (Backbone) {
'use strict';
Common.UI = _.extend(Common.UI || {}, {
Keys : {
BACKSPACE: 8,
TAB: 9,
RETURN: 13,
SHIFT: 16,
CTRL: 17,
ALT: 18,
ESC: 27,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
DELETE: 46,
HOME: 36,
END: 35,
SPACE: 32,
PAGEUP: 33,
PAGEDOWN: 34,
INSERT: 45,
EQUALITY_FF:61,
NUM_PLUS: 107,
NUM_MINUS: 109,
F1: 112,
F2: 113,
F3: 114,
F4: 115,
F5: 116,
F6: 117,
F7: 118,
F8: 119,
F9: 120,
F10: 121,
F11: 122,
F12: 123,
MINUS_FF: 173,
EQUALITY: 187,
MINUS: 189
},
BaseView: Backbone.View.extend({
isSuspendEvents: false,
initialize : function(options) {
this.options = this.options ? _({}).extend(this.options, options) : options;
},
setVisible: function(visible) {
return this[visible ? 'show': 'hide']();
},
isVisible: function() {
return $(this.el).is(":visible");
},
suspendEvents: function() {
this.isSuspendEvents = true;
},
resumeEvents: function() {
this.isSuspendEvents = false;
}
}),
getId: function(prefix) {
return _.uniqueId(prefix || "asc-gen");
}
});
});

774
test/unit-tests/common/main/lib/component/Button.js Normal file
View file

@ -0,0 +1,774 @@
/*
*
* (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
*
*/
/**
* Button.js
*
* Created by Alexander Yuzhin on 1/20/14
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
/**
* Using template
*
* A simple button with text:
* <button type="button" class="btn" id="id-button">Caption</button>
*
* A simple button with icon:
* <button type="button" class="btn" id="id-button"><span class="icon">&nbsp;</span></button>
*
* A button with menu:
* <div class="btn-group" id="id-button">
* <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
* <span class="icon">&nbsp;</span>
* <span class="caret"></span>
* </button>
* <ul class="dropdown-menu" role="menu">
* </ul>
* </div>
*
* A split button:
* <div class="btn-group split" id="id-button">
* <button type="button" class="btn"><span class="icon">&nbsp;</span></button>
* <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
* <span class="caret"></span>
* <span class="sr-only"></span>
* </button>
* <ul class="dropdown-menu" role="menu">
* </ul>
* </div>
*
* A useful classes of button size
*
* - `'small'`
* - `'normal'`
* - `'large'`
* - `'huge'`
*
* A useful classes of button type
*
* - `'default'`
* - `'active'`
*
*
* Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
*
* Example usage:
* new Common.UI.Button({
* el: $('#id'),
* enableToggle: true
* });
*
*
* @property {Boolean} disabled
* True if this button is disabled. Read-only.
*
* disabled: false,
*
*
* @property {Boolean} pressed
* True if this button is pressed (only if enableToggle = true). Read-only.
*
* pressed: false,
*
*
* @cfg {Boolean} [allowDepress=true]
* False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
*
* @cfg {String/Object} hint
* The tooltip for the button - can be a string to be used as bootstrap tooltip
*
*/
if (Common === undefined)
var Common = {};
define([
'unit-tests/common/main/lib/component/BaseView',
'unit-tests/common/main/lib/component/ToggleManager'
], function () {
'use strict';
window.createButtonSet = function() {
function ButtonsArray(args) {};
ButtonsArray.prototype = new Array;
ButtonsArray.prototype.constructor = ButtonsArray;
var _disabled = false;
ButtonsArray.prototype.add = function(button) {
button.setDisabled(_disabled);
this.push(button);
};
ButtonsArray.prototype.setDisabled = function(disable) {
// if ( _disabled != disable ) //bug when disable buttons outside the group
{
_disabled = disable;
this.forEach( function(button) {
button.setDisabled(disable);
});
}
};
ButtonsArray.prototype.toggle = function(state, suppress) {
this.forEach(function(button) {
button.toggle(state, suppress);
});
};
ButtonsArray.prototype.pressed = function() {
return this.some(function(button) {
return button.pressed;
});
};
ButtonsArray.prototype.contains = function(id) {
return this.some(function(button) {
return button.id == id;
});
};
ButtonsArray.prototype.concat = function () {
var args = Array.prototype.slice.call(arguments);
var result = Array.prototype.slice.call(this);
args.forEach(function(sub){
if (sub instanceof Array )
Array.prototype.push.apply(result, sub);
else if (sub)
result.push(sub);
});
return result;
};
var _out_array = Object.create(ButtonsArray.prototype);
for ( var i in arguments ) {
_out_array.add(arguments[i]);
}
return _out_array;
};
var templateBtnIcon =
'<% if ( iconImg ) { %>' +
'<img src="<%= iconImg %>">' +
'<% } else { %>' +
'<% if (/svgicon/.test(iconCls)) {' +
'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
'<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
'} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
'<% } %>';
var templateHugeCaption =
'<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>> ' +
'<div class="inner-box-icon">' +
templateBtnIcon +
'</div>' +
'<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' +
'</div>' +
'</button>';
var templateHugeMenuCaption =
'<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
'<div class="inner-box-icon">' +
templateBtnIcon +
'</div>' +
'<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' +
'<i class="caret"></i>' +
'</div>' +
'</button>' +
'</div>';
var templateHugeSplitCaption =
'<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
'<button type="button" class="btn <%= cls %> inner-box-icon">' +
'<span class="btn-fixflex-hcenter">' +
templateBtnIcon +
'</span>' +
'</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
'<span class="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %></span>' +
'<i class="caret"></i>' +
'</span>' +
'</button>' +
'</div>';
Common.UI.Button = Common.UI.BaseView.extend({
options : {
id : null,
hint : false,
enableToggle : false,
allowDepress : true,
toggleGroup : null,
cls : '',
iconCls : '',
caption : '',
menu : null,
disabled : false,
pressed : false,
split : false,
visible : true,
dataHint : '',
dataHintDirection: '',
dataHintOffset: '0, 0'
},
template: _.template([
'<% var applyicon = function() { %>',
'<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>',
// '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
'<% if (iconCls != "") { ' +
' if (/svgicon/.test(iconCls)) {' +
'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
'<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
'} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
'}} %>',
'<% } %>',
'<% if ( !menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>',
'<% applyicon() %>',
'<span class="caption"><%= caption %></span>',
'</button>',
'<% } else if (split == false) {%>',
'<div class="btn-group" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>',
'<% applyicon() %>',
'<span class="caption"><%= caption %></span>',
'<span class="inner-box-caret">' +
'<i class="caret"></i>' +
'</span>',
'</button>',
'</div>',
'<% } else { %>',
'<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn <%= cls %>">',
'<% applyicon() %>',
'<span class="caption"><%= caption %></span>',
'</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>',
'<i class="caret"></i>',
'<span class="sr-only"></span>',
'</button>',
'</div>',
'<% } %>'
].join('')),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
var me = this;
me.id = me.options.id || Common.UI.getId();
me.hint = me.options.hint;
me.enableToggle = me.options.enableToggle;
me.allowDepress = me.options.allowDepress;
me.cls = me.options.cls;
me.iconCls = me.options.iconCls;
me.menu = me.options.menu;
me.split = me.options.split;
me.toggleGroup = me.options.toggleGroup;
me.disabled = me.options.disabled;
me.visible = me.options.visible;
me.pressed = me.options.pressed;
me.caption = me.options.caption;
me.template = me.options.template || me.template;
me.style = me.options.style;
me.rendered = false;
if (me.options.el) {
me.render();
} else if (me.options.parentEl)
me.render(me.options.parentEl);
},
render: function(parentEl) {
var me = this;
me.trigger('render:before', me);
me.cmpEl = me.$el || $(me.el);
if (parentEl) {
me.setElement(parentEl, false);
if (!me.rendered) {
if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) {
if ( me.split === true ) {
!!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, ''));
this.template = _.template(templateHugeSplitCaption);
} else
if ( !!me.menu ) {
this.template = _.template(templateHugeMenuCaption);
} else {
this.template = _.template(templateHugeCaption);
}
}
me.cmpEl = $(this.template({
id : me.id,
cls : me.cls,
iconCls : me.iconCls,
iconImg : me.options.iconImg,
menu : me.menu,
split : me.split,
disabled : me.disabled,
pressed : me.pressed,
caption : me.caption,
style : me.style,
dataHint : me.options.dataHint,
dataHintDirection: me.options.dataHintDirection,
dataHintOffset: me.options.dataHintOffset,
dataHintTitle: me.options.dataHintTitle
}));
if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))
me.menu.render(me.cmpEl);
parentEl.html(me.cmpEl);
me.$icon = me.$el.find('.icon');
}
}
if (!me.rendered) {
var el = me.cmpEl,
isGroup = el.hasClass('btn-group'),
isSplit = el.hasClass('split');
if (me.options.hint) {
var modalParents = me.cmpEl.closest('.asc-window');
if (typeof me.options.hint == 'object' && me.options.hint.length>1 && $('button', el).length>0) {
var btnEl = $('button', el);
me.btnEl = $(btnEl[0]);
me.btnMenuEl = $(btnEl[1]);
} else {
me.btnEl = me.cmpEl;
me.btnEl.attr('data-toggle', 'tooltip');
}
me.btnEl.tooltip({
title : (typeof me.options.hint == 'string') ? me.options.hint : me.options.hint[0],
placement : me.options.hintAnchor||'cursor'
});
me.btnMenuEl && me.btnMenuEl.tooltip({
title : me.options.hint[1],
placement : me.options.hintAnchor||'cursor'
});
if (modalParents.length > 0) {
me.btnEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
me.btnMenuEl && me.btnMenuEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
var onModalClose = function(dlg) {
if (modalParents[0] !== dlg.$window[0]) return;
var tip = me.btnEl.data('bs.tooltip');
if (tip) {
if (tip.dontShow===undefined)
tip.dontShow = true;
tip.hide();
}
Common.NotificationCenter.off({'modal:close': onModalClose});
};
Common.NotificationCenter.on({'modal:close': onModalClose});
}
}
if (_.isString(me.toggleGroup)) {
me.enableToggle = true;
}
var buttonHandler = function(e) {
if (!me.disabled && e.which == 1) {
me.doToggle();
if (me.options.hint) {
var tip = me.btnEl.data('bs.tooltip');
if (tip) {
if (tip.dontShow===undefined)
tip.dontShow = true;
tip.hide();
}
}
me.trigger('click', me, e);
}
};
var doSplitSelect = function(select, element, e) {
if (!select) {
// Is mouse under button
var isUnderMouse = false;
$('button', el).each(function(index, button){
if ($(button).is(':hover')) {
isUnderMouse = true;
return false;
}
});
if (!isUnderMouse) {
el.removeClass('over');
$('button', el).removeClass('over');
}
}
if ( element == 'button') {
if (!select && (me.enableToggle && me.allowDepress && me.pressed))
return;
if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
e.preventDefault();
return;
}
$('button:first', el).toggleClass('active', select);
} else
$('[data-toggle^=dropdown]', el).toggleClass('active', select);
el.toggleClass('active', select);
};
var menuHandler = function(e) {
if (!me.disabled && e.which == 1) {
if (isSplit) {
if (me.options.hint) {
var tip = (me.btnMenuEl ? me.btnMenuEl : me.btnEl).data('bs.tooltip');
if (tip) {
if (tip.dontShow===undefined)
tip.dontShow = true;
tip.hide();
}
}
var isOpen = el.hasClass('open');
doSplitSelect(!isOpen, 'arrow', e);
}
}
};
var doSetActiveState = function(e, state) {
if (isSplit) {
doSplitSelect(state, 'button', e);
} else {
el.toggleClass('active', state);
$('button', el).toggleClass('active', state);
}
};
var splitElement;
var onMouseDown = function (e) {
splitElement = e.currentTarget.className.match(/dropdown/) ? 'arrow' : 'button';
doSplitSelect(true, splitElement, e);
$(document).on('mouseup', onMouseUp);
};
var onMouseUp = function (e) {
doSplitSelect(false, splitElement, e);
$(document).off('mouseup', onMouseUp);
};
var onAfterHideMenu = function(e, isFromInputControl) {
me.cmpEl.find('.dropdown-toggle').blur();
if (me.cmpEl.hasClass('active') !== me.pressed)
me.cmpEl.trigger('button.internal.active', [me.pressed]);
};
if (isGroup) {
if (isSplit) {
$('[data-toggle^=dropdown]', el).on('mousedown', _.bind(menuHandler, this));
$('button', el).on('mousedown', _.bind(onMouseDown, this));
(me.options.width>0) && $('button:first', el).css('width', me.options.width - $('[data-toggle^=dropdown]', el).outerWidth());
}
el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow'));
el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true, 'arrow'));
el.on('hidden.bs.dropdown', _.bind(onAfterHideMenu, me));
$('button:first', el).on('click', buttonHandler);
} else {
el.on('click', buttonHandler);
}
el.on('button.internal.active', _.bind(doSetActiveState, me));
el.on('mouseover', function(e) {
if (!me.disabled) {
me.cmpEl.addClass('over');
me.trigger('mouseover', me, e);
}
});
el.on('mouseout', function(e) {
me.cmpEl.removeClass('over');
if (!me.disabled) {
me.trigger('mouseout', me, e);
}
});
// Register the button in the toggle manager
Common.UI.ToggleManager.register(me);
}
me.rendered = true;
if (me.pressed) {
me.toggle(me.pressed, true);
}
if (me.disabled) {
me.setDisabled(!(me.disabled=false));
}
if (!me.visible) {
me.setVisible(me.visible);
}
me.trigger('render:after', me);
return this;
},
doToggle: function(){
var me = this;
if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
me.toggle();
}
},
toggle: function(toggle, suppressEvent) {
var state = toggle === undefined ? !this.pressed : !!toggle;
this.pressed = state;
if (this.cmpEl)
this.cmpEl.trigger('button.internal.active', [state]);
if (!suppressEvent)
this.trigger('toggle', this, state);
},
click: function(opts) {
if ( !this.disabled ) {
this.doToggle();
this.trigger('click', this, opts);
}
},
isActive: function() {
if (this.enableToggle)
return this.pressed;
return this.cmpEl.hasClass('active')
},
setDisabled: function(disabled) {
if (this.rendered && this.disabled != disabled) {
var el = this.cmpEl,
isGroup = el.hasClass('btn-group'),
me = this;
disabled = (disabled===true);
if (disabled !== el.hasClass('disabled')) {
var decorateBtn = function(button) {
button.toggleClass('disabled', disabled);
if (!me.options.allowMouseEventsOnDisabled)
(disabled) ? button.attr({disabled: disabled}) : button.removeAttr('disabled');
};
decorateBtn(el);
isGroup && decorateBtn(el.children('button'));
}
if ((disabled || !Common.Utils.isGecko) && this.options.hint) {
var tip = this.btnEl.data('bs.tooltip');
if (tip) {
disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !disabled);
}
if (this.btnMenuEl) {
tip = this.btnMenuEl.data('bs.tooltip');
if (tip) {
disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !disabled);
}
}
}
if (disabled && this.menu && _.isObject(this.menu) && this.menu.rendered && this.menu.isVisible())
setTimeout(function(){ me.menu.hide()}, 1);
if ( !!me.options.signals ) {
var opts = me.options.signals;
if ( !(opts.indexOf('disabled') < 0) ) {
me.trigger('disabled', me, disabled);
}
}
}
this.disabled = disabled;
},
isDisabled: function() {
return this.disabled;
},
setIconCls: function(cls) {
var btnIconEl = $(this.el).find('.icon'),
oldCls = this.iconCls;
this.iconCls = cls;
if (/svgicon/.test(this.iconCls)) {
var icon = /svgicon\s(\S+)/.exec(this.iconCls);
btnIconEl.find('use.zoom-int').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1]: '');
btnIconEl.find('use.zoom-grit').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1] + '-150' : '');
} else {
btnIconEl.removeClass(oldCls);
btnIconEl.addClass(cls || '');
}
},
changeIcon: function(opts) {
var me = this;
if ( opts && (opts.curr || opts.next) && me.$icon) {
!!opts.curr && (me.$icon.removeClass(opts.curr));
!!opts.next && !me.$icon.hasClass(opts.next) && (me.$icon.addClass(opts.next));
if ( !!me.options.signals ) {
if ( !(me.options.signals.indexOf('icon:changed') < 0) ) {
me.trigger('icon:changed', me, opts);
}
}
}
},
hasIcon: function(iconcls) {
return this.$icon.hasClass(iconcls);
},
setVisible: function(visible) {
if (this.cmpEl) this.cmpEl.toggleClass('hidden', !visible);
this.visible = visible;
},
isVisible: function() {
return (this.cmpEl) ? this.cmpEl.is(":visible") : $(this.el).is(":visible");
},
updateHint: function(hint) {
this.options.hint = hint;
if (!this.rendered) return;
var cmpEl = this.cmpEl,
modalParents = cmpEl.closest('.asc-window');
if (!this.btnEl) {
if (typeof this.options.hint == 'object' && this.options.hint.length>1 && $('button', cmpEl).length>0) {
var btnEl = $('button', cmpEl);
this.btnEl = $(btnEl[0]);
this.btnMenuEl = $(btnEl[1]);
} else {
this.btnEl = cmpEl;
this.btnEl.attr('data-toggle', 'tooltip');
}
}
if (this.btnEl.data('bs.tooltip'))
this.btnEl.removeData('bs.tooltip');
if (this.btnMenuEl && this.btnMenuEl.data('bs.tooltip'))
this.btnMenuEl.removeData('bs.tooltip');
this.btnEl.tooltip({
title : (typeof hint == 'string') ? hint : hint[0],
placement : this.options.hintAnchor||'cursor'
});
this.btnMenuEl && this.btnMenuEl.tooltip({
title : hint[1],
placement : this.options.hintAnchor||'cursor'
});
if (modalParents.length > 0) {
this.btnEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
this.btnMenuEl && this.btnMenuEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
}
if (this.disabled || !Common.Utils.isGecko) {
var tip = this.btnEl.data('bs.tooltip');
if (tip) {
this.disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !this.disabled);
}
if (this.btnMenuEl) {
tip = this.btnMenuEl.data('bs.tooltip');
if (tip) {
this.disabled && tip.hide();
!Common.Utils.isGecko && (tip.enabled = !this.disabled);
}
}
}
},
setCaption: function(caption) {
if (this.caption != caption) {
this.caption = caption;
if (this.rendered) {
var captionNode = this.cmpEl.find('.caption');
if (captionNode.length > 0) {
captionNode.text(caption);
} else {
this.cmpEl.find('button:first').addBack().filter('button').text(caption);
}
}
}
},
setMenu: function (m) {
if (m && _.isObject(m) && _.isFunction(m.render)){
this.menu = m;
if (this.rendered)
this.menu.render(this.cmpEl);
}
}
});
});

115
test/unit-tests/common/main/lib/component/ToggleManager.js Normal file
View file

@ -0,0 +1,115 @@
/*
*
* (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
*
*/
/**
* ToggleManager.js
*
* Created by Alexander Yuzhin on 1/28/14
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
if (Common === undefined)
var Common = {};
define([
'unit-tests/common/main/lib/component/BaseView'
], function () {
'use strict';
var groups = {};
function toggleGroup(cmp, state) {
var g, i, l;
if (state) {
g = groups[cmp.toggleGroup];
for (i = 0, l = g.length; i < l; i++) {
if (g[i] !== cmp) {
if (g[i].isActive) {
g[i].isActive() && g[i].toggle(false);
} else {
g[i].toggle(false);
}
}
}
}
}
/**
* Private utility class used by component
*/
Common.UI.ToggleManager = {
register: function(cmp) {
if (!cmp.toggleGroup) {
return;
}
var group = groups[cmp.toggleGroup];
if (!group) {
group = groups[cmp.toggleGroup] = [];
}
group.push(cmp);
cmp.on('toggle', toggleGroup);
},
unregister: function(cmp) {
if (!cmp.toggleGroup) {
return;
}
var group = groups[cmp.toggleGroup];
if (group) {
_.without(group, cmp);
cmp.off('toggle', toggleGroup);
}
},
/**
* Gets the toggled components in the passed group or null
* @param {String} group
* @return {Common.UI.BaseView}
*/
getToggled: function(group) {
var g = groups[group],
i = 0,
len;
if (g) {
for (len = g.length; i < len; i++) {
if (g[i].pressed === true ||
g[i].checked === true) {
return g[i];
}
}
}
return null;
}
}
});

78
test/unit-tests/common/main/lib/core/NotificationCenter.js Normal file
View file

@ -0,0 +1,78 @@
/*
*
* (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
*
*/
/**
* NotificationCenter.js
*
* A pub-sub object that can be used to decouple various parts
* of an application through event-driven architecture.
*
* Created by Alexander Yuzhin on 1/21/14
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
/**
* Using:
*
* Common.NotificationCenter.on("foo", function(){
* alert("bar");
* });
*
* Common.NotificationCenter.trigger("foo"); // => alert box "bar"
*
*/
if (Common === undefined)
var Common = {};
define([
'backbone'
], function (Backbone) {
'use strict';
var NotificationCenter = function(){};
// Copy the basic Backbone.Events on to the event aggregator
_.extend(NotificationCenter.prototype, Backbone.Events);
if(typeof Common.NotificationCenter == 'undefined') {
// Method to create new Common.NotificationCenter class
NotificationCenter.extend = Backbone.Model.extend;
Common.NotificationCenter = new NotificationCenter();
}
else {
throw ('Native Common.NotificationCenter instance already defined.')
}
});

565
test/unit-tests/common/main/lib/core/application.js Normal file
View file

@ -0,0 +1,565 @@
(function(){
var resolveNamespace = function(className, root) {
var parts = className.split('.'),
current = root || window;
for(var a = 0, b = parts.length; a < b; a++) {
current = current[parts[a]] || {};
}
return current;
};
/**
* @class Backbone.Application
* @cfg {Object} options The list of options available within Application
*/
var Application = function(options) {
_.extend(this, options || {});
this.eventbus = new EventBus({application: this});
this.createApplicationNamespace();
this.initialize.apply(this, arguments);
if (this.autoCreate !== false)
$($.proxy(this.onReady, this));
};
_.extend(Application.prototype, {
/**
* @cfg {Object} nameSpace (required)
* Define the application namespace
*/
nameSpace: 'Application',
models: {},
collections: {},
controllers: {},
/**
* @cfg allocationMap Define the inner structure of our application object
* @cfg allocationMap.model The key for models map
* @cfg allocationMap.collection The key for collections map
* @cfg allocationMap.controller The key for controllers map
* @cfg allocationMap.view The key for views map
*/
allocationMap: {
model: 'Models',
collection: 'Collections',
controller: 'Controllers',
view: 'Views'
},
/**
* Function to create inner structure of the application using {@link #allocationMap allocationMap} config
*/
createApplicationNamespace: function() {
var nameSpace = window;
// create global reference in the defined namespace
if(this.nameSpace) {
// if it wasn't already defined, create it
if(typeof nameSpace[this.nameSpace] == 'undefined') {
nameSpace[this.nameSpace] = {}
}
}
// let's have a link to the application namespace
// this way we will be able to get all references to Models, Collections and Controllers
// using given namespace
nameSpace[this.nameSpace] = this;
_.each(this.allocationMap, function(name, key) {
this[name] = this[name] || {};
}, this);
},
/**
* Function that will be called during application instance creation
*/
initialize: function() {},
/**
* Called when DOM is ready. This is global callback is used to:
* * Used to initialize controllers and execute {@link Backbone.Controller#onLaunch onLaunch} callback
* * Execute {@link Backbone.Application#launch launch} callback
*/
onReady: function() {
this.start();
},
start: function() {
// initialize controllers
this.initializeControllers(this.controllers || {});
// call to controller.onLaunch callback
this.launchControllers();
// call application.launch callback
this.launch.call(this);
},
/**
* Function that will convert string identifier into the instance reference
* @param {String} type Type of instance that should be resolved. See {@link #allocationMap} for valid values
* @param {String[]} classes The list of class references
* @return {Object} The objects map
*/
getClasseRefs: function(type, classes) {
var hashMap = {},
allocationMap = this.allocationMap[type],
root = this[allocationMap];
_.each(classes, function(cls) {
hashMap[cls] = resolveNamespace(cls, (cls.indexOf('.') > -1) ? window : root);
}, this);
return hashMap;
},
/**
* Function that will loop through all application controllers and create their instances
* Additionally, read the list of models and collections from each controller and save the reference within application
*/
initializeControllers: function(controllers) {
this.controllers = {};
_.each(controllers, function(ctrl) {
var root = (ctrl.indexOf('.') > -1) ? window : this[this.allocationMap.controller],
classReference = resolveNamespace(ctrl, root),
id = ctrl.split('.').pop();
var controller = new classReference({
id: ctrl,
application: this
});
controller.views = this.getClasseRefs('view', controller.views || []);
_.extend(this.models, this.getClasseRefs('model', controller.models || []));
_.extend(this.collections, this.getClasseRefs('collection', controller.collections || {}));
this.buildCollections();
this.controllers[ctrl] = controller;
}, this);
},
/**
* Launch all controllers using {@link Backbone.Controller#onLaunch callback}
*/
launchControllers: function() {
_.each(this.controllers, function(ctrl, id) {
ctrl.onLaunch(this);
}, this);
},
/**
* Called during application launch
* @template
*/
launch: function() {},
/**
* Function to add event listeners to the {@link #Backbone.EventBus EventBus}
*/
addListeners: function(listeners, controller) {
this.eventbus.addListeners(listeners, controller)
},
/**
* Getter to retreive link to the particular controller instance by name
* @param {String} name
* @return {Backbone.Controller} The controller instance
*/
getController: function(name) {
return this.controllers[name];
},
/**
* Getter to retrieve link to the particular model instance by name
* If model instance isn't created, create it
* @param {String} name
* @return {Backbone.Model} The model instance
*/
getModel: function(name) {
this._modelsCache = this._modelsCache || {};
var model = this._modelsCache[name],
modelClass = this.getModelConstructor(name);
if(!model && modelClass) {
model = this.createModel(name);
this._modelsCache[name] = model;
}
return model || null;
},
/**
* Getter to retrieve link to the particular model constructor by name
* @param {String} name
* @return {Backbone.Model} The model constructor
*/
getModelConstructor: function(name) {
return this.models[name];
},
/**
* Function to create new model instance
* @param {String} name The name of the model that needs to be created
* @param {Object} [options] The list of option that should be passed to the model constructor
*/
createModel: function(name, options) {
var modelClass = this.getModelConstructor(name),
model = null;
if (modelClass)
model = new modelClass(_.extend(options || {}));
return model;
},
/**
* Getter to retrieve link to the particular collection instance by name
* If collection instance isn't created, create it
* @param {String} name
* @return {Backbone.Collection} The collection instance
*/
getCollection: function(name) {
this._collectionsCache = this._collectionsCache || {};
var collection = this._collectionsCache[name],
collectionClass = this.getCollectionConstructor(name);
if(!collection && collectionClass) {
collection = this.createCollection(name);
this._collectionsCache[name] = collection;
}
return collection || null;
},
/**
* Getter to retrieve link to the particular collection constructor
* @param {String} name
* @return {Backbone.Collection} The collection constructor
*/
getCollectionConstructor: function(name) {
return this.collections[name];
},
/**
* Function to create new collection instance
* @param {String} name The name of the collection that needs to be created
*/
createCollection: function(name) {
var collectionClass = this.getCollectionConstructor(name),
collection = null;
if (collectionClass)
collection = new collectionClass();
return collection;
},
/**
* Function that will loop throught the list of collection constructors and create instances
*/
buildCollections: function() {
_.each(this.collections, function(collection, alias) {
this.getCollection(alias);
}, this);
}
});
// Since we are using Backbone let's make sure that there are no conflicts in namespaces
if(typeof Backbone.Application == 'undefined') {
Backbone.Application = Application;
/**
* @method extend
* Method to create new Backbone.Application class
* @static
*/
Backbone.Application.extend = Backbone.Model.extend;
}
else {
throw ('Native Backbone.Application instance already defined.')
}
/**
* @class Backbone.Controller
* @cfg {Object} options The list of options available within Controller
*/
var Controller = function(options) {
_.extend(this, options || {});
this.initialize.apply(this, arguments);
};
_.extend(Controller.prototype, {
name: null,
views: {},
models: {},
collections: {},
initialize: function(options) {
},
/**
* Add new listener to the application event bus
* Delegate to {@link Backbone.Application#addListeners addListeners} callback
*/
addListeners: function(listeners) {
this.getApplication().addListeners(listeners, this);
},
/**
* Called after application launch
* @template
*/
onLaunch: function(application) {
},
/**
* Getter that will return the reference to the application instance
*/
getApplication: function() {
return this.application;
},
/**
* Getter that will return the reference to the view instance
*/
getView: function(name) {
return this._viewsCache[name];
},
/**
* Getter that will return the reference to the view constructor by name
* @param {String} name
* @return {Backbone.View} The view constructor
*/
getViewConstructor: function(name) {
return this.views[name];
},
/**
* Function to create a new view instance
* All views are cached within _viewsCache hash map
* @param {String} name
* @param {Object} options Options to be passed within view constructor
* @return {Backbone.View} The view instance
*/
createView: function(name, options) {
var view = this.getViewConstructor(name),
viewOptions = _.extend(options || {}, {
alias: name
});
this._viewsCache = this._viewsCache || {};
this._viewsCache[name] = new view(viewOptions);
this._viewsCache[name].options = _.extend({}, viewOptions);
return this._viewsCache[name];
},
/**
* Method to get model instance reference by name
* Delegate to {@link Backbone.Application#getModel getModel} method
*/
getModel: function(name) {
return this.application.getModel(name);
},
/**
* Method to get model constructor reference by name
* Delegate to {@link Backbone.Application#getModelConstructor getModelConstructor} method
*/
getModelConstructor: function(name) {
return this.application.getModelConstructor(name);
},
/**
* Method to create model instance by name
* Delegate to {@link Backbone.Application#createModel createModel} method
*/
createModel: function(name, options) {
return this.application.createModel(name)
},
/**
* Delegate method to get collection instance reference by name
* Delegate to {@link Backbone.Application#getCollection getCollection} method
*/
getCollection: function(name) {
return this.application.getCollection(name);
},
/**
* Delegate method to get collection constructor reference by name
* Delegate to {@link Backbone.Application#getCollectionConstructor getCollectionConstructor} method
*/
getCollectionConstructor: function(name) {
return this.application.getCollectionConstructor(name);
},
/**
* Delegate method to create collection instance
* Delegate to {@link Backbone.Application#createCollection createCollection} method
*/
createCollection: function(name) {
return this.application.createCollection(name);
},
/**
* Method to fire cross-controller event
* Delegate to {@link Backbone.Application#fireEvent fireEvent} method
*/
fireEvent: function(selector, event, args) {
this.application.eventbus.fireEvent(selector, event, args);
},
/**
* Method to bind events from controlling view to controller
* probably isn't safe, testing needed
*/
bindViewEvents: function(view, events) {
this.unbindViewEvents(view);
events = _.isFunction(events) ? events.call(this) : events;
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) method = this[events[key]];
var match = key.match(/^(\S+)\s*(.*)$/);
var eventName = match[1], selector = match[2];
method = _.bind(method, this);
eventName += '.bindViewEvents' + view.cid;
view.$el.on(eventName, selector, method);
}
return this;
},
/**
* Method to unbind events from view to controller
*
*/
unbindViewEvents: function(view) {
view.$el.off('.bindViewEvents' + view.cid);
return this;
}
});
if(typeof Backbone.Controller == 'undefined') {
Backbone.Controller = Controller;
/**
* @method extend
* Method to create new Backbone.Controller class
* @static
*/
Backbone.Controller.extend = Backbone.Model.extend;
}
else {
throw ('Native Backbone.Controller instance already defined.')
}
/**
* @class Backbone.EventBus
* @cfg {Object} options The list of options available within Controller
* @private
*/
var EventBus = function(options) {
var me = this;
_.extend(this, options || {});
_.extend(Backbone.View.prototype, {
alias: null,
hidden: false,
getAlias: function() {
return this.options.alias;
},
/**
* Instead of calling View.trigger lets use custom function
* It will notify the EventBus about new event
*/
fireEvent: function(event, args) {
this.trigger.apply(this, arguments);
me.fireEvent(this.getAlias(), event, args);
},
hide: function() {
this.$el.hide();
this.hidden = true;
},
show: function() {
this.$el.show();
this.hidden = false;
}
});
};
_.extend(EventBus.prototype, {
pool: {},
/**
* Add new listeners to the event bus
*/
addListeners: function(selectors, controller) {
this.pool[controller.id] = this.pool[controller.id] || {};
var pool = this.pool[controller.id];
if(_.isArray(selectors)) {
_.each(selectors, function(selector) {
this.addListeners(selector, controller);
}, this)
}
else if(_.isObject(selectors)) {
_.each(selectors, function(listeners, selector) {
_.each(listeners, function(listener, event) {
pool[selector] = pool[selector] || {};
pool[selector][event] = pool[selector][event] || [];
pool[selector][event].push(listener);
}, this);
}, this)
}
},
/**
* Execute event listener by given selector and event name
*/
fireEvent: function(selector, event, args) {
var application = this.getApplication();
_.each(this.pool, function(eventsPoolByAlias, controllerId) {
var events = eventsPoolByAlias[selector];
if(events) {
var listeners = events[event],
controller = application.getController(controllerId);
_.each(listeners, function(fn) {
fn.apply(controller, args);
});
}
}, this);
},
getApplication: function() {
return this.application;
}
});
// Since we are using Backbone let's make sure that there are no conflicts in namespaces
if(typeof Backbone.EventBus == 'undefined') {
Backbone.EventBus = EventBus;
}
else {
throw ('Native Backbone.Application instance already defined.')
}
})();

346
test/unit-tests/common/main/lib/core/keymaster.js Normal file
View file

@ -0,0 +1,346 @@
// keymaster.js
// (c) 2011-2013 Thomas Fuchs
// keymaster.js may be freely distributed under the MIT license.
//
// changesets: 833cf1a00fe2, e19d5b8a37fe
;(function(global){
var k,
_handlers = {},
_mods = { 16: false, 18: false, 17: false, 91: false },
_scope = 'all',
// modifier keys
_MODIFIERS = {
'⇧': 16, shift: 16,
'⌥': 18, alt: 18, option: 18,
'⌃': 17, ctrl: 17, control: 17,
'⌘': 91, command: 91
},
// special keys
_MAP = {
backspace: 8, tab: 9, clear: 12,
enter: 13, 'return': 13,
esc: 27, escape: 27, space: 32,
left: 37, up: 38,
right: 39, down: 40,
del: 46, 'delete': 46,
home: 36, end: 35,
pageup: 33, pagedown: 34,
',': 188, '.': 190, '/': 191,
'`': 192, '-': 189, '=': 187,
';': 186, '\'': 222,
'[': 219, ']': 221, '\\': 220,
'ff-': 173, 'ff=': 61
},
code = function(x){
return _MAP[x] || x.toUpperCase().charCodeAt(0);
},
_downKeys = [];
var locked;
for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
// IE doesn't support Array#indexOf, so have a simple replacement
function index(array, item){
var i = array.length;
while(i--) if(array[i]===item) return i;
return -1;
}
// for comparing mods before unassignment
function compareArray(a1, a2) {
if (a1.length != a2.length) return false;
for (var i = 0; i < a1.length; i++) {
if (a1[i] !== a2[i]) return false;
}
return true;
}
var modifierMap = {
16:'shiftKey',
18:'altKey',
17:'ctrlKey',
91:'metaKey'
};
function updateModifierKey(event) {
for(k in _mods) _mods[k] = event[modifierMap[k]];
};
// handle keydown event
function dispatch(event) {
var key, handler, k, i, modifiersMatch, scope;
key = event.keyCode;
if (Common.UI.HintManager.isHintVisible()) {
if (key === 112) {
Common.UI.HintManager.clearHints();
} else if (key !== 27) {
return;
}
}
if (index(_downKeys, key) == -1) {
_downKeys.push(key);
}
// if a modifier key, set the key.<modifierkeyname> property to true and return
if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
if(key in _mods) {
_mods[key] = true;
// 'assignKey' from inside this closure is exported to window.key
for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
return;
}
updateModifierKey(event);
// see if we need to ignore the keypress (filter() can can be overridden)
// by default ignore key presses if a select, textarea, or input is focused
if(!assignKey.filter.call(this, event)) return;
// abort if no potentially matching shortcuts found
if (!(key in _handlers)) return;
scope = getScope();
// for each potential shortcut
for (i = 0; i < _handlers[key].length; i++) {
handler = _handlers[key][i];
// see if it's in the current scope
if(handler.scope == scope || handler.scope == 'all'){
// check if modifiers match if any
modifiersMatch = handler.mods.length > 0;
for(k in _mods)
if((!_mods[k] && index(handler.mods, +k) > -1) ||
(_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
// call the handler and stop the event if neccessary
if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
if(locked===true || handler.locked || handler.method(event, handler)===false){
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(event.stopPropagation) event.stopPropagation();
if(event.cancelBubble) event.cancelBubble = true;
}
}
}
}
};
// unset modifier keys on keyup
function clearModifier(event){
var key = event.keyCode, k,
i = index(_downKeys, key);
// remove key from _downKeys
if (i >= 0) {
_downKeys.splice(i, 1);
}
if(key == 93 || key == 224) key = 91;
if(key in _mods) {
_mods[key] = false;
for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
}
};
function resetModifiers() {
for(k in _mods) _mods[k] = false;
for(k in _MODIFIERS) assignKey[k] = false;
};
// parse and assign shortcut
function assignKey(key, scope, method){
var keys, mods;
keys = getKeys(key);
if (method === undefined) {
method = scope;
scope = 'all';
}
// for each shortcut
for (var i = 0; i < keys.length; i++) {
// set modifier keys if any
mods = [];
key = keys[i].split('+');
if (key.length > 1){
mods = getMods(key);
key = [key[key.length-1]];
}
// convert to keycode and...
key = key[0]
key = code(key);
// ...store handler
if (!(key in _handlers)) _handlers[key] = [];
_handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
}
};
// unbind all handlers for given key in current scope
function unbindKey(key, scope) {
var multipleKeys, keys,
mods = [],
i, j, obj;
multipleKeys = getKeys(key);
for (j = 0; j < multipleKeys.length; j++) {
keys = multipleKeys[j].split('+');
if (keys.length > 1) {
mods = getMods(keys);
key = keys[keys.length - 1];
}
key = code(key);
if (scope === undefined) {
scope = getScope();
}
if (!_handlers[key]) {
return;
}
for (i in _handlers[key]) {
obj = _handlers[key][i];
// only clear handlers if correct scope and mods match
if (obj.scope === scope && compareArray(obj.mods, mods)) {
_handlers[key][i] = {};
}
}
}
};
// Returns true if the key with code 'keyCode' is currently down
// Converts strings into key codes.
function isPressed(keyCode) {
if (typeof(keyCode)=='string') {
keyCode = code(keyCode);
}
return index(_downKeys, keyCode) != -1;
}
function getPressedKeyCodes() {
return _downKeys.slice(0);
}
function filter(event){
var tagName = (event.target || event.srcElement).tagName;
// ignore keypressed in any elements that support keyboard data input
return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
}
// initialize key.<modifier> to false
for(k in _MODIFIERS) assignKey[k] = false;
// set current scope (default 'all')
function setScope(scope){ _scope = scope || 'all' };
function getScope(){ return _scope || 'all' };
// delete all handlers for a given scope
function deleteScope(scope){
var key, handlers, i;
for (key in _handlers) {
handlers = _handlers[key];
for (i = 0; i < handlers.length; ) {
if (handlers[i].scope === scope) handlers.splice(i, 1);
else i++;
}
}
};
// abstract key logic for assign and unassign
function getKeys(key) {
var keys;
key = key.replace(/\s/g, '');
keys = key.split(',');
if ((keys[keys.length - 1]) == '') {
keys[keys.length - 2] += ',';
}
return keys;
}
// abstract mods logic for assign and unassign
function getMods(key) {
var mods = key.slice(0, key.length - 1);
for (var mi = 0; mi < mods.length; mi++)
mods[mi] = _MODIFIERS[mods[mi]];
return mods;
}
// cross-browser events
function addEvent(object, event, method) {
if (object.addEventListener)
object.addEventListener(event, method, false);
else if(object.attachEvent)
object.attachEvent('on'+event, function(){ method(window.event) });
};
// set the handlers globally on document
addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
addEvent(document, 'keyup', clearModifier);
// reset modifiers to false whenever the window is (re)focused.
addEvent(window, 'focus', resetModifiers);
// store previously defined key
var previousKey = global.key;
// restore previously defined key and return reference to our key object
function noConflict() {
var k = global.key;
global.key = previousKey;
return k;
}
function setKeyOptions(key, scope, option, value) {
var keys, mods = [], i, obj;
var multipleKeys = getKeys(key);
for (var j = multipleKeys.length; j--; ) {
keys = multipleKeys[j].split('+');
if (keys.length > 1) {
mods = getMods(keys);
key = keys[keys.length - 1];
}
key = code(key);
if (scope === undefined) {
scope = getScope();
}
if (_handlers[key]) {
for (i in _handlers[key]) {
obj = _handlers[key][i];
if (obj.scope === scope && compareArray(obj.mods, mods)) {
_handlers[key][i][option] = value;
}
}
}
}
}
function suspend(key, scope) {
key ? setKeyOptions(key, scope, 'locked', true) : (locked = true);
}
function resume(key, scope) {
key ? setKeyOptions(key, scope, 'locked', false) : (locked = false);
}
// set window.key and window.key.set/get/deleteScope, and the default filter
global.key = assignKey;
global.key.setScope = setScope;
global.key.getScope = getScope;
global.key.deleteScope = deleteScope;
global.key.filter = filter;
global.key.isPressed = isPressed;
global.key.getPressedKeyCodes = getPressedKeyCodes;
global.key.noConflict = noConflict;
global.key.unbind = unbindKey;
global.key.suspend = suspend;
global.key.resume = resume;
if(typeof module !== 'undefined') module.exports = key;
})(this);

70
test/unit-tests/common/main/resources/less/colors-table-ie-fix.less Normal file
View file

@ -0,0 +1,70 @@
@toolbar-header-document-ie: #446995;
@toolbar-header-spreadsheet-ie: #40865c;
@toolbar-header-presentation-ie: #aa5252;
@background-normal-ie: #fff;
@background-toolbar-ie: #f1f1f1;
@background-toolbar-additional-ie: #f1f1f1;
@background-primary-dialog-button-ie: #7d858c;
@background-tab-underline-ie: #444;
@background-notification-popover-ie: #fcfed7;
@background-notification-badge-ie: #ffd112;
@background-scrim-ie: fade(#000, 20%);
@background-loader-ie: fade(#000, 65%);
@background-alt-key-hint-ie: #FFD938;
@highlight-button-hover-ie: #d8dadc;
@highlight-button-pressed-ie: #7d858c;
@highlight-button-pressed-hover-ie: #7d858c;
@highlight-primary-dialog-button-hover-ie: #666d73;
@highlight-header-button-hover-ie: fade(#fff, 20%);
@highlight-header-button-pressed-ie: fade(#000, 20%);
@highlight-toolbar-tab-underline-ie: #444;
@highlight-text-select-ie: #3494fb;
@border-toolbar-ie: #cbcbcb;
@border-divider-ie: #cbcbcb;
@border-regular-control-ie: #cfcfcf;
@border-toolbar-button-hover-ie: #d8dadc;
@border-preview-hover-ie: #cfcfcf;
@border-preview-select-ie: #848484;
@border-control-focus-ie: #848484;
@border-color-shading-ie: fade(#000, 20%);
@border-error-ie: #d9534f;
@text-normal-ie: #444;
@text-normal-pressed-ie: #fff;
@text-secondary-ie: #a5a5a5;
@text-tertiary-ie: #a5a5a5;
@text-link-ie: #acbfff;
@text-inverse-ie: #fff;
@text-toolbar-header-ie: #fff;
@text-contrast-background-ie: #fff;
@icon-normal-ie: #444;
@icon-normal-pressed-ie: #fff;
@icon-inverse-ie: #444;
@icon-toolbar-header-ie: fade(#fff, 80%);
@icon-notification-badge-ie: #000;
@icon-contrast-popover-ie: #fff;
@icon-success-ie: #5b9f27;
@canvas-scroll-thumb-hover-ie: #c0c0c0;
@canvas-scroll-thumb-border-hover-ie: #cbcbcb;
@button-header-normal-icon-offset-x-ie: -20px;
@button-header-active-icon-offset-x-ie: -20px;
@scaled-one-px-value-ie: 1px;
@component-disabled-opacity-ie: .4;
/*.ie {
.toolbar__icon.toolbar__icon-big {
@big-icon-background-image-ie: ~"url(@{app-image-const-path}/iconsbig.png)";
background-image: @big-icon-background-image-ie;
}
}*/
//@huge-icon-background-image-ie: ~"url(@{app-image-const-path}/iconshuge.png)";

239
test/unit-tests/common/main/resources/less/colors-table.less Normal file
View file

@ -0,0 +1,239 @@
@import "./colors-table-ie-fix.less";
// Brand colors
// -------------------------
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
:root {
--toolbar-header-document: #446995;
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
--background-normal: #fff;
--background-toolbar: #f7f7f7;
--background-toolbar-additional: #efefef;
--background-primary-dialog-button: #444;
--background-tab-underline: #444;
--background-notification-popover: #fcfed7;
--background-notification-badge: #ffd112;
--background-scrim: fade(#000, 20%);
--background-loader: fade(#181818, 90%);
--background-alt-key-hint: #FFD938;
--highlight-button-hover: #e0e0e0;
--highlight-button-pressed: #cbcbcb;
--highlight-button-pressed-hover: #bababa;
--highlight-primary-dialog-button-hover: #1c1c1c;
--highlight-header-button-hover: fade(#fff, 15%);
--highlight-header-button-pressed: fade(#fff, 25%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--border-toolbar: #cbcbcb;
--border-divider: #dfdfdf;
--border-regular-control: #c0c0c0;
--border-toolbar-button-hover: #e0e0e0;
--border-preview-hover: #bababa;
--border-preview-select: #888;
--border-control-focus: #848484;
--border-color-shading: fade(#000, 15%);
--border-error: #f62211;
--text-normal: fade(#000, 80%);
--text-normal-pressed: fade(#000, 80%);
--text-secondary: fade(#000, 60%);
--text-tertiary: fade(#000, 40%);
--text-link: #445799;
--text-link-hover: #445799;
--text-link-active: #445799;
--text-link-visited: #445799;
--text-inverse: #fff;
--text-toolbar-header: #fff;
--text-contrast-background: #fff;
--icon-normal: #444;
--icon-normal-pressed: #444;
--icon-inverse: #fff;
--icon-toolbar-header: #fff;
--icon-notification-badge: #000;
--icon-contrast-popover: #fff;
--icon-success: #090;
// Canvas
--canvas-background: #eee;
--canvas-content-background: #fff;
--canvas-page-border: #ccc;
--canvas-ruler-background: #fff;
--canvas-ruler-margins-background: #d9d9d9;
--canvas-ruler-mark: #555;
--canvas-ruler-handle-border: #555;
--canvas-ruler-handle-border-disabled: #aaa;
--canvas-high-contrast: #000;
--canvas-high-contrast-disabled: #666;
--canvas-cell-border: fade(#000, 10%);
--canvas-cell-title-hover: #dfdfdf;
--canvas-cell-title-selected: #cfcfcf;
--canvas-cell-title-border: #d8d8d8;
--canvas-cell-title-border-hover: #c9c9c9;
--canvas-cell-title-border-selected: #bbb;
--canvas-dark-cell-title: #444;
--canvas-dark-cell-title-hover: #666 ;
--canvas-dark-cell-title-selected: #111;
--canvas-dark-cell-title-border: #3d3d3d;
--canvas-dark-cell-title-border-hover: #5c5c5c;
--canvas-dark-cell-title-border-selected: #0f0f0f;
--canvas-scroll-thumb: #f7f7f7;
--canvas-scroll-thumb-hover: #c0c0c0;
--canvas-scroll-thumb-pressed: #adadad;
--canvas-scroll-thumb-border: #cbcbcb;
--canvas-scroll-thumb-border-hover: #cbcbcb;
--canvas-scroll-thumb-border-pressed: #adadad;
--canvas-scroll-arrow: #adadad;
--canvas-scroll-arrow-hover: #f7f7f7;
--canvas-scroll-arrow-pressed: #f7f7f7;
--canvas-scroll-thumb-target: #c0c0c0;
--canvas-scroll-thumb-target-hover: #f7f7f7;
--canvas-scroll-thumb-target-pressed: #f7f7f7;
// Others
//--button-small-normal-icon-offset-x: 0;
//--button-small-active-icon-offset-x: 0;
//--button-large-normal-icon-offset-x: 0;
//--button-large-active-icon-offset-x: 0;
//--button-huge-normal-icon-offset-x: 0;
//--button-huge-active-icon-offset-x: 0;
//--button-xhuge-normal-icon-offset-x: 0;
//--button-xhuge-active-icon-offset-x: 0;
--button-header-normal-icon-offset-x: -20px;
--button-header-active-icon-offset-x: -20px;
//--menu-icon-item-checked-offset-x: 0;
--modal-window-mask-opacity: 0.2;
--image-border-types-filter: none;
--image-border-types-filter-selected: none;
--component-normal-icon-filter: none;
--component-normal-icon-opacity: .8;
--component-hover-icon-opacity: .8;
--component-active-icon-opacity: 1;
--component-active-hover-icon-opacity: 1;
--component-disabled-opacity: .4;
--header-component-normal-icon-opacity: 1;
--header-component-hover-icon-opacity: 1;
--header-component-active-icon-opacity: 1;
--header-component-active-hover-icon-opacity: 1;
//--button-icon-opacity: 1;
}
// Background
// -------------------------
@background-normal: var(--background-normal);
@background-toolbar: var(--background-toolbar);
@background-toolbar-additional: var(--background-toolbar-additional);
@background-primary-dialog-button: var(--background-primary-dialog-button);
@background-tab-underline: var(--background-tab-underline);
@background-notification-popover: var(--background-notification-popover);
@background-notification-badge: var(--background-notification-badge);
@background-scrim: var(--background-scrim);
@background-loader: var(--background-loader);
@background-alt-key-hint: var(--background-alt-key-hint);
// Highlight
// -------------------------
@highlight-button-hover: var(--highlight-button-hover);
@highlight-button-pressed: var(--highlight-button-pressed);
@highlight-button-pressed-hover: var(--highlight-button-pressed-hover);
@highlight-primary-dialog-button-hover: var(--highlight-primary-dialog-button-hover);
@highlight-header-button-hover: var(--highlight-header-button-hover);
@highlight-header-button-pressed: var(--highlight-header-button-pressed);
@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
@highlight-text-select: var(--highlight-text-select);
// Border
// -------------------------
@border-toolbar: var(--border-toolbar);
@border-divider: var(--border-divider);
@border-regular-control: var(--border-regular-control);
@border-toolbar-button-hover: var(--border-toolbar-button-hover);
@border-preview-hover: var(--border-preview-hover);
@border-preview-select: var(--border-preview-select);
@border-control-focus: var(--border-control-focus);
@border-color-shading: var(--border-color-shading);
@border-error: var(--border-error);
// Text
// -------------------------
@text-normal: var(--text-normal);
@text-normal-pressed: var(--text-normal-pressed);
@text-secondary: var(--text-secondary);
@text-tertiary: var(--text-tertiary);
@text-link: var(--text-link);
@text-link-hover: var(--text-link-hover);
@text-link-active: var(--text-link-active);
@text-link-visited: var(--text-link-visited);
@text-inverse: var(--text-inverse);
@text-toolbar-header: var(--text-toolbar-header);
@text-contrast-background: var(--text-contrast-background);
@text-alt-key-hint: var(--text-alt-key-hint);
// Icon
// -------------------------
@icon-normal: var(--icon-normal);
@icon-normal-pressed: var(--icon-normal-pressed);
@icon-inverse: var(--icon-inverse);
@icon-toolbar-header: var(--icon-toolbar-header);
@icon-contrast-popover: var(--icon-contrast-popover);
@icon-notification-badge: var(--icon-notification-badge);
@icon-success: var(--icon-success);
@button-small-normal-icon-offset-x: var(--button-small-normal-icon-offset-x,0);
@button-small-active-icon-offset-x: var(--button-small-active-icon-offset-x,0);
@button-large-normal-icon-offset-x: var(--button-large-normal-icon-offset-x, 0);
@button-large-active-icon-offset-x: var(--button-large-active-icon-offset-x, 0);
@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
@button-xhuge-normal-icon-offset-x: var(--button-xhuge-normal-icon-offset-x, 0);
@button-xhuge-active-icon-offset-x: var(--button-xhuge-active-icon-offset-x, 0);
//@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
//@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0);
@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
@component-normal-icon-filter: var(--component-normal-icon-filter);
@component-normal-icon-opacity: var(--component-normal-icon-opacity, .8);
@component-hover-icon-opacity: var(--component-hover-icon-opacity, .8);
@component-active-icon-opacity: var(--component-active-icon-opacity, .8);
@component-active-hover-icon-opacity: var(--component-active-hover-icon-opacity, .8);
@component-disabled-opacity: var(--component-disabled-opacity, .4);
//@button-icon-opacity: var(--button-icon-opacity, 1);
@header-component-normal-icon-opacity: var(--header-component-normal-icon-opacity, 1);
@header-component-hover-icon-opacity: var(--header-component-hover-icon-opacity, 1);
@header-component-active-icon-opacity: var(--header-component-active-icon-opacity, 1);
@header-component-active-hover-icon-opacity: var(--header-component-active-hover-icon-opacity, 1);
@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);
@img-border-type-filter: var(--image-border-types-filter, none);
@img-border-type-filter-selected: var(--image-border-types-filter-selected, none);
// Canvas
// ---------------------------
@canvas-background: var(--canvas-background);
@canvas-content-background: var(--canvas-content-background);
@canvas-page-border: var(--canvas-page-border);
@canvas-scroll-thumb-hover: var(--canvas-scroll-thumb-hover);
@canvas-scroll-thumb-border-hover: var(--canvas-scroll-thumb-border-hover);

799
test/unit-tests/common/main/resources/less/variables.less Normal file
View file

@ -0,0 +1,799 @@
//
// Global values
// --------------------------------------------------
@pixel-ratio-factor: var(--pixel-ratio-factor, 1);
@scaled-one-px-value: var(--scaled-one-pixel, 1px);
@scaled-two-px-value: var(--scaled-two-pixel, 2px);
// Paths
// -------------------------
@app-image-path: "../../resources/img"; // use for data-uri(...)
@common-image-path: "../../../../common/main/resources/img"; // use for data-uri(...)
@app-image-const-path: "resources/img"; // use for url(...)
@common-image-const-path: "../../common/main/resources/img"; // use for url(...)
// Grays
// -------------------------
//@gray-deep: #444444; //rgb(68, 68, 68)
//@gray-darker: #848484; //rgb(132, 132, 132)
//@gray-dark: #cbcbcb; //rgb(203, 203, 203)
//@gray: #cfcfcf; //rgb(207, 207, 207)
//@gray-light: #f1f1f1; //rgb(241, 241, 241)
//@gray-lighter: #ededed; //rgb(237, 237, 237)
//@gray-soft: #adadad; //rgb(173, 173, 173)
//@primary: #7d858c; //rgb(125, 133, 140)
//@primary-hover: #666d73; //rgb(102, 109, 115)
//@secondary: #d8dadc; //rgb(216, 218, 220)
//@secondary-hover: #cbced1; //rgb(203, 206, 209)
//@black: #000000;
// Brand colors
// -------------------------
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding
// -------------------------
@body-bg: #fff;
@text-color: #cbcbcb; // @gray-dark
// Links
// -------------------------
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
@link-hover-decoration: underline;
// Typography
// -------------------------
@font-family-sans-serif: Arial, Helvetica, "Helvetica Neue", sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-tahoma: tahoma, arial, verdana, sans-serif;
@font-family-base: @font-family-sans-serif;
@font-size-base: 11px;
@font-size-large: 13px;
@font-size-small: 9px;
@font-size-h1: floor(@font-size-base * 2.6);
@font-size-h2: floor(@font-size-base * 2.15);
@font-size-h3: ceil(@font-size-base * 1.7);
@font-size-h4: ceil(@font-size-base * 1.25);
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85);
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base);
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
// Iconography
// -------------------------
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
@icon-src-base64: false;
@huge-icon-size: 37px;
@x-huge-icon-size: 45px;
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 1px;
@padding-base-horizontal: 3px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 1px;
@padding-small-horizontal: 3px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 2px;
@component-active-color: #fff;
@component-active-bg: #7d858c; // @primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
// Tables
// -------------------------
@table-cell-padding: 8px;
@table-condensed-cell-padding: 5px;
@table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-color: #ddd; // table and cell border
// Buttons
// -------------------------
@btn-font-weight: normal;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-link-disabled-color: #f1f1f1; // @gray-light;
// Allows for customizing button radius independently from global border radius
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-small: @border-radius-small;
// Forms
// -------------------------
@input-bg: #fff;
@input-bg-disabled: #ededed; // @gray-lighter;
@input-color: #000;
@input-border: #cfcfcf; // @gray;
@input-border-radius: @border-radius-base;
@input-border-radius-large: @border-radius-large;
@input-border-radius-small: @border-radius-small;
@input-border-focus: #66afe9;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
@input-color-placeholder: #cfcfcf; // @gray;
@input-height-base: (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@form-group-margin-bottom: 15px;
@legend-color: #cbcbcb; // @gray-dark
@legend-border-color: #e5e5e5;
@input-group-addon-bg: @input-bg;
@input-group-addon-border-color: @input-border;
// Disabled cursor for form controls and buttons.
@cursor-disabled: default;
// Dropdowns
// -------------------------
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@dropdown-link-color: #444; // @gray-deep;
@dropdown-link-hover-color: darken(#444, 5%); // darken(@gray-deep, 5%);
@dropdown-link-hover-bg: #d8dadc; // @secondary;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: #cfcfcf; // @gray;
@dropdown-header-color: #cfcfcf; // @gray;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
// Media queries breakpoints
// --------------------------------------------------
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Navbar collapse
// Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;
// Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Navbar
// -------------------------
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
//
// Reset inverted navbar basics
@navbar-inverse-color: #f1f1f1; // @gray-light;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: #f1f1f1; // @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
// Navs
// -------------------------
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: #ededed; // @gray-lighter;
@nav-disabled-link-color: #f1f1f1; // @gray-light;
@nav-disabled-link-hover-color: #f1f1f1; // @gray-light;
@nav-open-link-hover-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: #ededed; // @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: #cfcfcf; // @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
// Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
// Pagination
// -------------------------
@pagination-color: @link-color;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: #ededed; // @gray-lighter;
@pagination-hover-border: #ddd;
@pagination-active-bg: @brand-primary;
@pagination-active-color: #fff;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: #f1f1f1; // @gray-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
// Pager
// -------------------------
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: #f1f1f1; // @gray-light;
// Jumbotron
// -------------------------
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: #ededed; // @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil(@font-size-base * 1.5);
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
// Form states and alerts
// -------------------------
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Tooltips
// -------------------------
@tooltip-max-width: 200px;
@tooltip-color: #fff;
@tooltip-bg: #000;
@tooltip-opacity: .9;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
// -------------------------
@popover-bg: #fff;
@popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2);
@popover-fallback-border-color: #ccc;
@popover-title-bg: darken(@popover-bg, 3%);
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color: #999;
// Labels
// -------------------------
@label-default-bg: #f1f1f1; // @gray-light;
@label-primary-bg: @brand-primary;
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger;
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals
// -------------------------
@modal-inner-padding: 20px;
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
@modal-content-bg: #fff;
@modal-content-border-color: rgba(0,0,0,.2);
@modal-content-fallback-border-color: #999;
@modal-backdrop-bg: #000;
@modal-backdrop-opacity: .5;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
// Alerts
// -------------------------
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-color: #fff;
@progress-border-radius: @border-radius-base;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@list-group-border: #ddd;
@list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5;
@list-group-active-color: @component-active-color;
@list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg;
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
@list-group-disabled-color: #f1f1f1; // @gray-light;
@list-group-disabled-bg: #ededed; // @gray-lighter;
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333;
// Panels
// -------------------------
@panel-bg: #fff;
@panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-footer-bg: #f5f5f5;
//@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
//@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells
// -------------------------
@well-bg: #f5f5f5;
@well-border: darken(@well-bg, 7%);
// Badges
// -------------------------
@badge-color: #fff;
@badge-link-hover-color: #fff;
@badge-bg: #f1f1f1; // @gray-light;
@badge-active-color: @link-color;
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs
// -------------------------
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
@breadcrumb-bg: #f5f5f5;
@breadcrumb-color: #ccc;
@breadcrumb-active-color: #f1f1f1; // @gray-light;
@breadcrumb-separator: "/";
// Carousel
// ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
// Close
// ------------------------
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
// Code
// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
//@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
// Type
// ------------------------
@text-muted: #f1f1f1; // @gray-light;
@abbr-border-color: #f1f1f1; // @gray-light;
@headings-small-color: #f1f1f1; // @gray-light;
@blockquote-small-color: #f1f1f1; // @gray-light;
@blockquote-font-size: (@font-size-base * 1.25);
@blockquote-border-color: #ededed; // @gray-lighter;
@page-header-border-color: #ededed; // @gray-lighter;
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: #ededed; // @gray-lighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
@blockquote-font-size: (@font-size-base * 1.25);
@dl-horizontal-offset: @component-offset-horizontal;
@dl-horizontal-breakpoint: @grid-float-breakpoint;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg: @container-large-desktop;
// Texture offsets
// --------------------------------------------------
// Common components texture
@common-controls: "controls/common-controls.png";
@common-controls2x: "controls/common-controls@2x.png";
// Dialog alerts
@alerts-offset-x: 0;
@alerts-offset-y: 0;
// Dialog close
@but-close-offset-x: -26px;
@but-close-offset-y: -151px;
// Dropdown arrow
@arrow-small-offset-x: -85px;
@arrow-small-offset-y: -96px;
// Dropdown arrow up
@arrow-up-small-offset-x: -85px;
@arrow-up-small-offset-y: -104px;
// Dropdown arrow big
@arrow-big-offset-x: -41px;
@arrow-big-offset-y: -144px;
// Checkbox
@checkbox-offset-x: -35px;
@checkbox-offset-y: 0px;
// Radio button
@radio-offset-x: -35px;
@radio-offset-y: -65px;
// Menu check
@menu-check-offset-x: -41px;
@menu-check-offset-y: -172px;
// Multislider thumb
@slide-thumb-offset-x: -13px;
@slide-thumb-offset-y: -150px;
// Slider thumb
@multislide-thumb-offset-x: 0px;
@multislide-thumb-offset-y: -150px;
// Slider track
@slide-track-offset-x: 0px;
@slide-track-offset-y: -195px;
// Input error
@input-error-offset-x: -73px;
@input-error-offset-y: -170px;
// Input warning
@input-warning-offset-x: -57px;
@input-warning-offset-y: -170px;
// Spinner
@spinner-offset-x: -41px;
@spinner-offset-y: -187px;
// Search dialog
@search-dlg-offset-x: -36px;
@search-dlg-offset-y: -96px;
// No color
@nocolor-offset-x: 0;
@nocolor-offset-y: -137px;
// Plus
@plus-offset-x: -80px;
@plus-offset-y: -184px;
@dl-horizontal-offset: @component-offset-horizontal;
// Point at which .dl-horizontal becomes horizontal
@dl-horizontal-breakpoint: @grid-float-breakpoint;