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

Hint Manager: add direction exceptions for filter buttons, add ability to add specific hints to buttons

Browse source
This commit is contained in:
JuliaSvinareva 2021-06-23 18:41:38 +03:00
parent 6dba75830d
commit db54743eca
6 changed files with 65 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/common/main/lib/component/Button.js
View file

@ -194,7 +194,7 @@ define([
'<% } %>'; '<% } %>';
var templateHugeCaption = var templateHugeCaption =
'<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"> ' + '<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">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
@ -205,7 +205,7 @@ define([
var templateHugeMenuCaption = var templateHugeMenuCaption =
'<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' + '<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 %>">' + '<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">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
@ -223,7 +223,7 @@ define([
templateBtnIcon + templateBtnIcon +
'</span>' + '</span>' +
'</button>' + '</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 %>">' + '<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="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= caption %></span>' +
'<i class="caret"></i>' + '<i class="caret"></i>' +
@ -264,13 +264,13 @@ define([
'}} %>', '}} %>',
'<% } %>', '<% } %>',
'<% if ( !menu ) { %>', '<% if ( !menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">', '<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() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<% } else if (split == false) {%>', '<% } else if (split == false) {%>',
'<div class="btn-group" id="<%= id %>" style="<%= style %>">', '<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 %>">', '<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() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'<span class="inner-box-caret">' + '<span class="inner-box-caret">' +
@ -284,7 +284,7 @@ define([
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">', '<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>', '<i class="caret"></i>',
'<span class="sr-only"></span>', '<span class="sr-only"></span>',
'</button>', '</button>',
@ -356,7 +356,8 @@ define([
style : me.style, style : me.style,
dataHint : me.options.dataHint, dataHint : me.options.dataHint,
dataHintDirection: me.options.dataHintDirection, dataHintDirection: me.options.dataHintDirection,
dataHintOffset: me.options.dataHintOffset dataHintOffset: me.options.dataHintOffset,
dataHintTitle: me.options.dataHintTitle
})); }));
if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render)) if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))

45
apps/common/main/lib/component/HintManager.js
View file

@ -49,6 +49,7 @@ if (Common.UI === undefined) {
Common.UI.HintManager = new(function() { Common.UI.HintManager = new(function() {
var _lang = 'en', var _lang = 'en',
_arrAlphabet = [], _arrAlphabet = [],
_arrEnAlphabet = [],
_isAlt = false, _isAlt = false,
_hintVisible = false, _hintVisible = false,
_currentLevel = 0, _currentLevel = 0,
@ -132,9 +133,33 @@ Common.UI.HintManager = new(function() {
} else { } else {
_arrLetters = [..._arrAlphabet]; _arrLetters = [..._arrAlphabet];
} }
visibleItems.forEach(function (item, index) { var usedLetters = [];
if ((_currentSection.nodeType === 9 && $(['data-hint-title']).length > 0) ||
(_currentSection.nodeType !== 9 && _currentSection.find('[data-hint-title]').length > 0)) {
visibleItems.forEach(function (item) {
var el = $(item);
var title = el.attr('data-hint-title');
if (title) {
var ind = _arrEnAlphabet.indexOf(title.toLowerCase());
usedLetters.push(ind);
if (_lang !== 'en') {
console.log(_arrLetters[ind]);
el.attr('data-hint-title', _arrLetters[ind].toUpperCase());
}
}
});
}
var index = 0;
visibleItems.forEach(function (item) {
var el = $(item); var el = $(item);
el.attr('data-hint-title', _arrLetters[index].toUpperCase()); if (usedLetters.indexOf(index) !== -1) {
index++;
}
var title = el.attr('data-hint-title');
if (!title) {
el.attr('data-hint-title', _arrLetters[index].toUpperCase());
index++;
}
_currentControls.push(el); _currentControls.push(el);
}); });
}; };
@ -143,9 +168,20 @@ Common.UI.HintManager = new(function() {
if (_currentControls.length === 0) if (_currentControls.length === 0)
_getControls(); _getControls();
_currentControls.forEach(function(item, index) { _currentControls.forEach(function(item, index) {
if (!item.hasClass('disabled')) { if (!item.hasClass('disabled') && !item.parent().hasClass('disabled')) {
var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>'); var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
var direction = item.attr('data-hint-direction'); var direction = item.attr('data-hint-direction');
// exceptions
if (window.SSE && _currentSection.nodeType !== 9 &&
_currentSection.prop('id') === 'toolbar' && item.closest('.panel').attr('data-tab') === 'data') {
if (item.parent().hasClass('slot-sortdesc') || item.parent().hasClass('slot-btn-setfilter')) {
direction = 'top';
item.attr('data-hint-direction', 'top');
} else if (item.parent().hasClass('slot-btn-clear-filter') || item.parent().hasClass('slot-sortasc')) {
direction = 'bottom';
item.attr('data-hint-direction', 'bottom');
}
}
var offsets = item.attr('data-hint-offset'); var offsets = item.attr('data-hint-offset');
var applyOffset = offsets === 'big' ? 6 : (offsets === 'medium' ? 4 : (offsets === 'small' ? 2 : 0)); var applyOffset = offsets === 'big' ? 6 : (offsets === 'medium' ? 4 : (offsets === 'small' ? 2 : 0));
if (applyOffset) { if (applyOffset) {
@ -242,7 +278,7 @@ Common.UI.HintManager = new(function() {
_setCurrentSection('esc'); _setCurrentSection('esc');
_showHints(); _showHints();
} }
} else if ((e.keyCode > 47 && e.keyCode < 58 || e.keyCode > 64 && e.keyCode < 91) && e.key) { } else {
var curr; var curr;
_inputLetters = _inputLetters + String.fromCharCode(e.keyCode).toUpperCase(); _inputLetters = _inputLetters + String.fromCharCode(e.keyCode).toUpperCase();
for (var i = 0; i < _currentControls.length; i++) { for (var i = 0; i < _currentControls.length; i++) {
@ -299,6 +335,7 @@ Common.UI.HintManager = new(function() {
var _getAlphabetLetters = function () { var _getAlphabetLetters = function () {
Common.Utils.loadConfig('../../common/main/resources/alphabetletters/alphabetletters.json', function (langsJson) { Common.Utils.loadConfig('../../common/main/resources/alphabetletters/alphabetletters.json', function (langsJson) {
_arrAlphabet = langsJson[_lang]; _arrAlphabet = langsJson[_lang];
_arrEnAlphabet = langsJson['en'];
}); });
}; };

6
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -159,7 +159,8 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-copy', iconCls: 'toolbar__icon btn-copy',
dataHint: '1', dataHint: '1',
dataHintDirection: 'top' dataHintDirection: 'top',
dataHintTitle: 'C'
}); });
this.toolbarControls.push(this.btnCopy); this.toolbarControls.push(this.btnCopy);
@ -168,7 +169,8 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-paste', iconCls: 'toolbar__icon btn-paste',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintTitle: 'P'
}); });
this.paragraphControls.push(this.btnPaste); this.paragraphControls.push(this.btnPaste);

6
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -221,7 +221,8 @@ define([
iconCls: 'toolbar__icon btn-copy', iconCls: 'toolbar__icon btn-copy',
lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
dataHint: '1', dataHint: '1',
dataHintDirection: 'top' dataHintDirection: 'top',
dataHintTitle: 'C'
}); });
me.slideOnlyControls.push(me.btnCopy); me.slideOnlyControls.push(me.btnCopy);
@ -231,7 +232,8 @@ define([
iconCls: 'toolbar__icon btn-paste', iconCls: 'toolbar__icon btn-paste',
lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides], lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides],
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintTitle: 'P'
}); });
me.paragraphControls.push(me.btnPaste); me.paragraphControls.push(me.btnPaste);

8
apps/spreadsheeteditor/main/app/template/StatusBar.template
View file

@ -1,10 +1,10 @@
<div class="statusbar"> <div class="statusbar">
<div id="status-tabs-scroll" class="status-group"> <div id="status-tabs-scroll" class="status-group">
<button id="status-btn-tabfirst" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-firstitem">&nbsp;</i></button> <button id="status-btn-tabfirst" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="F"><i class="icon toolbar__icon btn-firstitem">&nbsp;</i></button>
<button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button> <button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="B"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
<button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button> <button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="N"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
<button id="status-btn-tablast" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-lastitem">&nbsp;</i></button> <button id="status-btn-tablast" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="L"><i class="icon toolbar__icon btn-lastitem">&nbsp;</i></button>
</div> </div>
<div id="status-addtabs-box" class="status-group"> <div id="status-addtabs-box" class="status-group">
<button id="status-btn-addtab" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button> <button id="status-btn-addtab" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>

6
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -181,7 +181,8 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-copy', iconCls : 'toolbar__icon btn-copy',
dataHint: '1', dataHint: '1',
dataHintDirection: 'top' dataHintDirection: 'top',
dataHintTitle: 'C'
}); });
me.btnPaste = new Common.UI.Button({ me.btnPaste = new Common.UI.Button({
@ -190,7 +191,8 @@ define([
iconCls : 'toolbar__icon btn-paste', iconCls : 'toolbar__icon btn-paste',
lock : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect], lock : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect],
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintTitle: 'P'
}); });
me.btnUndo = new Common.UI.Button({ me.btnUndo = new Common.UI.Button({