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

Hint manager: make navigation

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-25 11:07:13 +03:00
parent bc30f42a8d
commit 9f5a6f1f6e
2 changed files with 127 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,37 +57,47 @@ Common.UI.HintManager = new(function() {
_currentHints = [], _currentHints = [],
_inputLetters = ''; _inputLetters = '';
var _showHints = function(type) { var _showHints = function () {
if (type === 'next') { _inputLetters = '';
_removeHints(); if (_currentHints.length === 0)
_currentLevel++;
_getHints(); _getHints();
} else if (type === 'prev') { if (_currentHints.length > 0) {
_removeHints(); _hintVisible = true;
_currentLevel--; _currentHints.forEach(function(item) {
_getHints(); item.show()
if (_currentLevel === -1) });
_hintVisible = false; } else
} else { _hintVisible = false;
_hintVisible = !_hintVisible; };
_getHints();
} var _hideHints = function() {
_hintVisible = false;
_currentHints && _currentHints.forEach(function(item) {
item.hide()
});
};
var _nextLevel = function() {
_removeHints();
_currentHints.length = 0;
_currentControls.length = 0;
_currentLevel++;
};
var _prevLevel = function() {
_removeHints();
_currentHints.length = 0;
_currentControls.length = 0;
_currentLevel--;
}; };
var _getControls = function() { var _getControls = function() {
if (!_controls[_currentLevel]) { /*if (!_controls[_currentLevel]) {
_controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray(); _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
if (_currentLevel === 0 && !_controls[_currentLevel]) }*/
_controls[_currentLevel] = $('[data-hint=0]').toArray(); _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
}
_currentControls = []; _currentControls = [];
var arr = []; var arr = _controls[_currentLevel];
if (_currentLevel === 0) {
arr = arr.concat(_controls[_currentLevel]);
!$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1]));
} else
arr = _controls[_currentLevel];
var visibleItems = arr.filter(function (item) { var visibleItems = arr.filter(function (item) {
return $(item).is(':visible'); return $(item).is(':visible');
}); });
@ -104,7 +114,6 @@ Common.UI.HintManager = new(function() {
} }
} }
} }
console.log(visibleItems);
visibleItems.forEach(function (item, index) { visibleItems.forEach(function (item, index) {
var el = $(item); var el = $(item);
el.attr('data-hint-title', _arrLetters[index].toUpperCase()); el.attr('data-hint-title', _arrLetters[index].toUpperCase());
@ -114,29 +123,34 @@ Common.UI.HintManager = new(function() {
}; };
var _getHints = function() { var _getHints = function() {
_removeHints(); if (_currentControls.length === 0)
_getControls(); _getControls();
_currentControls.forEach(function(item, index) { _currentControls.forEach(function(item, index) {
var disabled = item.hasClass('disabled'); if (!item.hasClass('disabled')) {
var classes = 'hint-div' + (disabled ? ' disabled' : ''); var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
var hint = $('<div style="" class="' + classes + '">' + item.attr('data-hint-title') + '</div>'); var direction = item.attr('data-hint-direction');
var direction = item.attr('data-hint-direction'); var offset = item.offset();
var offset = item.offset(); if (direction === 'top')
if (direction === 'top') hint.css({left: offset.left + (item.outerWidth() - 20) / 2, top: offset.top - 16});
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top - 3}); else if (direction === 'right')
else if (direction === 'right') hint.css({
hint.css({left: offset.left + item.outerWidth() - 4, top: offset.top + (item.outerHeight()-20)/2}); left: offset.left + item.outerWidth() - 4,
else if (direction === 'left') top: offset.top + (item.outerHeight() - 20) / 2
hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight()-20)/2}); });
else if (direction === 'left-bottom') else if (direction === 'left')
hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()}); hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight() - 20) / 2});
else else if (direction === 'left-bottom')
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight() - 3}); hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()});
$(document.body).append(hint); else
hint.css({
left: offset.left + (item.outerWidth() - 20) / 2,
top: offset.top + item.outerHeight() - 3
});
$(document.body).append(hint);
_currentHints.push(hint); _currentHints.push(hint);
}
}); });
console.log(_currentHints);
}; };
var _removeHints = function() { var _removeHints = function() {
@ -151,16 +165,30 @@ Common.UI.HintManager = new(function() {
_getAlphabetLetters(); _getAlphabetLetters();
}.bind(this)); }.bind(this));
$(document).on('keyup', function(e) { $(document).on('keyup', function(e) {
if (e.keyCode == Common.UI.Keys.ALT &&_isAlt) { if (e.keyCode == Common.UI.Keys.ALT && _isAlt) {
e.preventDefault(); e.preventDefault();
_showHints('current'); if (!_hintVisible) {
if ($('.toolbar-fullview-panel').is(':visible') && _currentLevel === 0) {
_nextLevel();
} else {
_currentLevel = 0;
}
_showHints();
} else {
_hideHints();
}
} }
_isAlt = false; _isAlt = false;
}); });
$(document).on('keydown', function(e) { $(document).on('keydown', function(e) {
if (_hintVisible) { if (_hintVisible) {
if (e.keyCode == Common.UI.Keys.ESC ) { if (e.keyCode == Common.UI.Keys.ESC ) {
_showHints('prev'); if (_currentLevel === 0) {
_hideHints();
} else {
_prevLevel();
_showHints();
}
} else if ((e.keyCode > 47 && e.keyCode < 58 || e.keyCode > 64 && e.keyCode < 91) && e.key) { } else if ((e.keyCode > 47 && e.keyCode < 58 || e.keyCode > 64 && e.keyCode < 91) && e.key) {
var curr; var curr;
_inputLetters = _inputLetters + String.fromCharCode(e.keyCode).toUpperCase(); _inputLetters = _inputLetters + String.fromCharCode(e.keyCode).toUpperCase();
@ -172,19 +200,15 @@ Common.UI.HintManager = new(function() {
} }
} }
if (curr) { if (curr) {
console.log(curr);
curr && curr.trigger(jQuery.Event('click', {which: 1})); curr && curr.trigger(jQuery.Event('click', {which: 1}));
_showHints('next'); _nextLevel();
_showHints();
} }
} }
e.preventDefault(); e.preventDefault();
} }
_isAlt = (e.keyCode == Common.UI.Keys.ALT); _isAlt = (e.keyCode == Common.UI.Keys.ALT);
if (_isAlt) {
_inputLetters = '';
}
console.log(_currentLevel);
}); });
}; };

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

@ -186,7 +186,9 @@ define([
id: 'id-toolbar-btn-bold', id: 'id-toolbar-btn-bold',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-bold', iconCls: 'toolbar__icon btn-bold',
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnBold); this.paragraphControls.push(this.btnBold);
@ -194,7 +196,9 @@ define([
id: 'id-toolbar-btn-italic', id: 'id-toolbar-btn-italic',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-italic', iconCls: 'toolbar__icon btn-italic',
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnItalic); this.paragraphControls.push(this.btnItalic);
@ -202,7 +206,9 @@ define([
id: 'id-toolbar-btn-underline', id: 'id-toolbar-btn-underline',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-underline', iconCls: 'toolbar__icon btn-underline',
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnUnderline); this.paragraphControls.push(this.btnUnderline);
@ -210,7 +216,9 @@ define([
id: 'id-toolbar-btn-strikeout', id: 'id-toolbar-btn-strikeout',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-strikeout', iconCls: 'toolbar__icon btn-strikeout',
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnStrikeout); this.paragraphControls.push(this.btnStrikeout);
@ -219,7 +227,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-superscript', iconCls: 'toolbar__icon btn-superscript',
enableToggle: true, enableToggle: true,
toggleGroup: 'superscriptGroup' toggleGroup: 'superscriptGroup',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnSuperscript); this.paragraphControls.push(this.btnSuperscript);
@ -228,7 +238,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-subscript', iconCls: 'toolbar__icon btn-subscript',
enableToggle: true, enableToggle: true,
toggleGroup: 'superscriptGroup' toggleGroup: 'superscriptGroup',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnSubscript); this.paragraphControls.push(this.btnSubscript);
@ -312,7 +324,9 @@ define([
iconCls: 'toolbar__icon btn-align-left', iconCls: 'toolbar__icon btn-align-left',
enableToggle: true, enableToggle: true,
allowDepress: false, allowDepress: false,
toggleGroup: 'alignGroup' toggleGroup: 'alignGroup',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnAlignLeft); this.paragraphControls.push(this.btnAlignLeft);
@ -322,7 +336,9 @@ define([
iconCls: 'toolbar__icon btn-align-center', iconCls: 'toolbar__icon btn-align-center',
enableToggle: true, enableToggle: true,
allowDepress: false, allowDepress: false,
toggleGroup: 'alignGroup' toggleGroup: 'alignGroup',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnAlignCenter); this.paragraphControls.push(this.btnAlignCenter);
@ -332,7 +348,9 @@ define([
iconCls: 'toolbar__icon btn-align-right', iconCls: 'toolbar__icon btn-align-right',
enableToggle: true, enableToggle: true,
allowDepress: false, allowDepress: false,
toggleGroup: 'alignGroup' toggleGroup: 'alignGroup',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnAlignRight); this.paragraphControls.push(this.btnAlignRight);
@ -342,7 +360,9 @@ define([
iconCls: 'toolbar__icon btn-align-just', iconCls: 'toolbar__icon btn-align-just',
enableToggle: true, enableToggle: true,
allowDepress: false, allowDepress: false,
toggleGroup: 'alignGroup' toggleGroup: 'alignGroup',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnAlignJust); this.paragraphControls.push(this.btnAlignJust);
@ -350,14 +370,18 @@ define([
this.btnDecLeftOffset = new Common.UI.Button({ this.btnDecLeftOffset = new Common.UI.Button({
id: 'id-toolbar-btn-decoffset', id: 'id-toolbar-btn-decoffset',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-decoffset' iconCls: 'toolbar__icon btn-decoffset',
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnDecLeftOffset); this.paragraphControls.push(this.btnDecLeftOffset);
this.btnIncLeftOffset = new Common.UI.Button({ this.btnIncLeftOffset = new Common.UI.Button({
id: 'id-toolbar-btn-incoffset', id: 'id-toolbar-btn-incoffset',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-incoffset' iconCls: 'toolbar__icon btn-incoffset',
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnIncLeftOffset); this.paragraphControls.push(this.btnIncLeftOffset);
@ -375,7 +399,9 @@ define([
{caption: '2.5', value: 2.5, checkable: true, toggleGroup: 'linesize'}, {caption: '2.5', value: 2.5, checkable: true, toggleGroup: 'linesize'},
{caption: '3.0', value: 3.0, checkable: true, toggleGroup: 'linesize'} {caption: '3.0', value: 3.0, checkable: true, toggleGroup: 'linesize'}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnLineSpace); this.paragraphControls.push(this.btnLineSpace);
@ -402,7 +428,9 @@ define([
enableToggle: true, enableToggle: true,
toggleGroup: 'markersGroup', toggleGroup: 'markersGroup',
split: true, split: true,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnMarkers); this.paragraphControls.push(this.btnMarkers);
this.textOnlyControls.push(this.btnMarkers); this.textOnlyControls.push(this.btnMarkers);
@ -414,7 +442,9 @@ define([
enableToggle: true, enableToggle: true,
toggleGroup: 'markersGroup', toggleGroup: 'markersGroup',
split: true, split: true,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnNumbers); this.paragraphControls.push(this.btnNumbers);
this.textOnlyControls.push(this.btnNumbers); this.textOnlyControls.push(this.btnNumbers);
@ -423,7 +453,9 @@ define([
id: 'id-toolbar-btn-multilevels', id: 'id-toolbar-btn-multilevels',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-multilevels', iconCls: 'toolbar__icon btn-multilevels',
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnMultilevels); this.paragraphControls.push(this.btnMultilevels);
this.textOnlyControls.push(this.btnMultilevels); this.textOnlyControls.push(this.btnMultilevels);