From 9f5a6f1f6e65251776ff3aa97a9c0e85cdf91837 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 25 May 2021 11:07:13 +0300 Subject: [PATCH] Hint manager: make navigation --- apps/common/main/lib/component/HintManager.js | 134 +++++++++++------- apps/documenteditor/main/app/view/Toolbar.js | 64 ++++++--- 2 files changed, 127 insertions(+), 71 deletions(-) diff --git a/apps/common/main/lib/component/HintManager.js b/apps/common/main/lib/component/HintManager.js index 92c8112f2..aade42311 100644 --- a/apps/common/main/lib/component/HintManager.js +++ b/apps/common/main/lib/component/HintManager.js @@ -57,37 +57,47 @@ Common.UI.HintManager = new(function() { _currentHints = [], _inputLetters = ''; - var _showHints = function(type) { - if (type === 'next') { - _removeHints(); - _currentLevel++; + var _showHints = function () { + _inputLetters = ''; + if (_currentHints.length === 0) _getHints(); - } else if (type === 'prev') { - _removeHints(); - _currentLevel--; - _getHints(); - if (_currentLevel === -1) - _hintVisible = false; - } else { - _hintVisible = !_hintVisible; - _getHints(); - } + if (_currentHints.length > 0) { + _hintVisible = true; + _currentHints.forEach(function(item) { + item.show() + }); + } else + _hintVisible = false; + }; + + 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() { - if (!_controls[_currentLevel]) { + /*if (!_controls[_currentLevel]) { _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray(); - if (_currentLevel === 0 && !_controls[_currentLevel]) - _controls[_currentLevel] = $('[data-hint=0]').toArray(); - } - + }*/ + _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray(); _currentControls = []; - var arr = []; - if (_currentLevel === 0) { - arr = arr.concat(_controls[_currentLevel]); - !$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1])); - } else - arr = _controls[_currentLevel]; + var arr = _controls[_currentLevel]; var visibleItems = arr.filter(function (item) { return $(item).is(':visible'); }); @@ -104,7 +114,6 @@ Common.UI.HintManager = new(function() { } } } - console.log(visibleItems); visibleItems.forEach(function (item, index) { var el = $(item); el.attr('data-hint-title', _arrLetters[index].toUpperCase()); @@ -114,29 +123,34 @@ Common.UI.HintManager = new(function() { }; var _getHints = function() { - _removeHints(); - _getControls(); + if (_currentControls.length === 0) + _getControls(); _currentControls.forEach(function(item, index) { - var disabled = item.hasClass('disabled'); - var classes = 'hint-div' + (disabled ? ' disabled' : ''); - var hint = $('
' + item.attr('data-hint-title') + '
'); - var direction = item.attr('data-hint-direction'); - var offset = item.offset(); - if (direction === 'top') - hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top - 3}); - else if (direction === 'right') - hint.css({left: offset.left + item.outerWidth() - 4, top: offset.top + (item.outerHeight()-20)/2}); - else if (direction === 'left') - hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight()-20)/2}); - else if (direction === 'left-bottom') - hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()}); - else - hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight() - 3}); - $(document.body).append(hint); + if (!item.hasClass('disabled')) { + var hint = $('
' + item.attr('data-hint-title') + '
'); + var direction = item.attr('data-hint-direction'); + var offset = item.offset(); + if (direction === 'top') + hint.css({left: offset.left + (item.outerWidth() - 20) / 2, top: offset.top - 16}); + else if (direction === 'right') + hint.css({ + left: offset.left + item.outerWidth() - 4, + top: offset.top + (item.outerHeight() - 20) / 2 + }); + else if (direction === 'left') + hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight() - 20) / 2}); + else if (direction === 'left-bottom') + hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()}); + 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() { @@ -151,16 +165,30 @@ Common.UI.HintManager = new(function() { _getAlphabetLetters(); }.bind(this)); $(document).on('keyup', function(e) { - if (e.keyCode == Common.UI.Keys.ALT &&_isAlt) { + if (e.keyCode == Common.UI.Keys.ALT && _isAlt) { e.preventDefault(); - _showHints('current'); + if (!_hintVisible) { + if ($('.toolbar-fullview-panel').is(':visible') && _currentLevel === 0) { + _nextLevel(); + } else { + _currentLevel = 0; + } + _showHints(); + } else { + _hideHints(); + } } _isAlt = false; }); $(document).on('keydown', function(e) { if (_hintVisible) { 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) { var curr; _inputLetters = _inputLetters + String.fromCharCode(e.keyCode).toUpperCase(); @@ -172,19 +200,15 @@ Common.UI.HintManager = new(function() { } } if (curr) { - console.log(curr); curr && curr.trigger(jQuery.Event('click', {which: 1})); - _showHints('next'); + _nextLevel(); + _showHints(); } } e.preventDefault(); } _isAlt = (e.keyCode == Common.UI.Keys.ALT); - if (_isAlt) { - _inputLetters = ''; - } - console.log(_currentLevel); }); }; diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 6790eb9eb..a835bc8e6 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -186,7 +186,9 @@ define([ id: 'id-toolbar-btn-bold', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-bold', - enableToggle: true + enableToggle: true, + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnBold); @@ -194,7 +196,9 @@ define([ id: 'id-toolbar-btn-italic', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-italic', - enableToggle: true + enableToggle: true, + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnItalic); @@ -202,7 +206,9 @@ define([ id: 'id-toolbar-btn-underline', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-underline', - enableToggle: true + enableToggle: true, + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnUnderline); @@ -210,7 +216,9 @@ define([ id: 'id-toolbar-btn-strikeout', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-strikeout', - enableToggle: true + enableToggle: true, + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnStrikeout); @@ -219,7 +227,9 @@ define([ cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-superscript', enableToggle: true, - toggleGroup: 'superscriptGroup' + toggleGroup: 'superscriptGroup', + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnSuperscript); @@ -228,7 +238,9 @@ define([ cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-subscript', enableToggle: true, - toggleGroup: 'superscriptGroup' + toggleGroup: 'superscriptGroup', + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnSubscript); @@ -312,7 +324,9 @@ define([ iconCls: 'toolbar__icon btn-align-left', enableToggle: true, allowDepress: false, - toggleGroup: 'alignGroup' + toggleGroup: 'alignGroup', + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnAlignLeft); @@ -322,7 +336,9 @@ define([ iconCls: 'toolbar__icon btn-align-center', enableToggle: true, allowDepress: false, - toggleGroup: 'alignGroup' + toggleGroup: 'alignGroup', + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnAlignCenter); @@ -332,7 +348,9 @@ define([ iconCls: 'toolbar__icon btn-align-right', enableToggle: true, allowDepress: false, - toggleGroup: 'alignGroup' + toggleGroup: 'alignGroup', + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnAlignRight); @@ -342,7 +360,9 @@ define([ iconCls: 'toolbar__icon btn-align-just', enableToggle: true, allowDepress: false, - toggleGroup: 'alignGroup' + toggleGroup: 'alignGroup', + dataHint: '1', + dataHintDirection: 'bottom' }); this.paragraphControls.push(this.btnAlignJust); @@ -350,14 +370,18 @@ define([ this.btnDecLeftOffset = new Common.UI.Button({ id: 'id-toolbar-btn-decoffset', cls: 'btn-toolbar', - iconCls: 'toolbar__icon btn-decoffset' + iconCls: 'toolbar__icon btn-decoffset', + dataHint: '1', + dataHintDirection: 'top' }); this.paragraphControls.push(this.btnDecLeftOffset); this.btnIncLeftOffset = new Common.UI.Button({ id: 'id-toolbar-btn-incoffset', cls: 'btn-toolbar', - iconCls: 'toolbar__icon btn-incoffset' + iconCls: 'toolbar__icon btn-incoffset', + dataHint: '1', + dataHintDirection: 'top' }); this.paragraphControls.push(this.btnIncLeftOffset); @@ -375,7 +399,9 @@ define([ {caption: '2.5', value: 2.5, checkable: true, toggleGroup: 'linesize'}, {caption: '3.0', value: 3.0, checkable: true, toggleGroup: 'linesize'} ] - }) + }), + dataHint: '1', + dataHintDirection: 'top' }); this.paragraphControls.push(this.btnLineSpace); @@ -402,7 +428,9 @@ define([ enableToggle: true, toggleGroup: 'markersGroup', split: true, - menu: true + menu: true, + dataHint: '1', + dataHintDirection: 'top' }); this.paragraphControls.push(this.btnMarkers); this.textOnlyControls.push(this.btnMarkers); @@ -414,7 +442,9 @@ define([ enableToggle: true, toggleGroup: 'markersGroup', split: true, - menu: true + menu: true, + dataHint: '1', + dataHintDirection: 'top' }); this.paragraphControls.push(this.btnNumbers); this.textOnlyControls.push(this.btnNumbers); @@ -423,7 +453,9 @@ define([ id: 'id-toolbar-btn-multilevels', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-multilevels', - menu: true + menu: true, + dataHint: '1', + dataHintDirection: 'top' }); this.paragraphControls.push(this.btnMultilevels); this.textOnlyControls.push(this.btnMultilevels);