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

Hint manager: make navigation for levels

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-21 20:07:39 +03:00
parent 4d30ec11e6
commit bc30f42a8d
5 changed files with 103 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,36 +51,43 @@ Common.UI.HintManager = new(function() {
_arrLetters = [], _arrLetters = [],
_isAlt = false, _isAlt = false,
_hintVisible = false, _hintVisible = false,
_currentLevel = -1, _currentLevel = 0,
_controls = [], _controls = [],
_currentControls = [], _currentControls = [],
_currentHints = []; _currentHints = [],
_inputLetters = '';
var _showHints = function() { var _showHints = function(type) {
_hintVisible = !_hintVisible; if (type === 'next') {
if (_hintVisible) { _removeHints();
_currentLevel++; _currentLevel++;
_getHints(); _getHints();
} else { } else if (type === 'prev') {
_removeHints(); _removeHints();
_currentLevel--; _currentLevel--;
_getHints();
if (_currentLevel === -1)
_hintVisible = false;
} else {
_hintVisible = !_hintVisible;
_getHints();
} }
}; };
var _getControls = function() { var _getControls = function() {
if (!_controls[_currentLevel + 1]) { if (!_controls[_currentLevel]) {
_controls[_currentLevel + 1] = $('[data-hint=' + (_currentLevel + 1) + ']').toArray(); _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
if (_currentLevel==0 && !_controls[_currentLevel]) if (_currentLevel === 0 && !_controls[_currentLevel])
_controls[_currentLevel] = $('[data-hint=0]').toArray(); _controls[_currentLevel] = $('[data-hint=0]').toArray();
} }
_currentControls = []; _currentControls = [];
var arr = []; var arr = [];
if (_currentLevel==0) { if (_currentLevel === 0) {
arr = arr.concat(_controls[_currentLevel]); arr = arr.concat(_controls[_currentLevel]);
!$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1])); !$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1]));
} else } else
arr = _controls[_currentLevel+1]; arr = _controls[_currentLevel];
var visibleItems = arr.filter(function (item) { var visibleItems = arr.filter(function (item) {
return $(item).is(':visible'); return $(item).is(':visible');
}); });
@ -97,7 +104,7 @@ Common.UI.HintManager = new(function() {
} }
} }
} }
console.log(_arrLetters); 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());
@ -122,13 +129,14 @@ Common.UI.HintManager = new(function() {
else if (direction === 'left') else if (direction === 'left')
hint.css({left: offset.left - 18, 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-bottom')
hint.css({left: offset.left - 8, top: offset.top + item.outerHeight() - 12}); hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()});
else else
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight() - 3}); hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight() - 3});
$(document.body).append(hint); $(document.body).append(hint);
_currentHints.push(hint); _currentHints.push(hint);
}); });
console.log(_currentHints);
}; };
var _removeHints = function() { var _removeHints = function() {
@ -145,32 +153,38 @@ Common.UI.HintManager = new(function() {
$(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(); _showHints('current');
} }
_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(); _showHints('prev');
} 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();
for (var i = 0; i < _currentControls.length; i++) { for (var i = 0; i < _currentControls.length; i++) {
var item = _currentControls[i]; var item = _currentControls[i];
if (item.attr('data-hint-title').charCodeAt(0) == e.keyCode) { // for latin chars if (item.attr('data-hint-title') === _inputLetters) {
curr = item; curr = item;
break; break;
} }
} }
if (curr) { if (curr) {
_showHints(); console.log(curr);
curr && curr.trigger(jQuery.Event('click', {which: 1})); curr && curr.trigger(jQuery.Event('click', {which: 1}));
_showHints('next');
} }
} }
e.preventDefault(); e.preventDefault();
} }
_isAlt = (e.keyCode == Common.UI.Keys.ALT); _isAlt = (e.keyCode == Common.UI.Keys.ALT);
if (_isAlt) {
_inputLetters = '';
}
console.log(_currentLevel);
}); });
}; };

6
apps/common/main/lib/component/MenuItem.js
View file

@ -102,13 +102,15 @@ define([
toggleGroup : null, toggleGroup : null,
iconCls : '', iconCls : '',
menu : null, menu : null,
canFocused : true canFocused : true,
dataHint : '',
dataHintDirection: ''
}, },
tagName : 'li', tagName : 'li',
template: _.template([ template: _.template([
'<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >', '<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; %> >',
'<% if (!_.isEmpty(iconCls)) { %>', '<% if (!_.isEmpty(iconCls)) { %>',
'<span class="menu-item-icon <%= iconCls %>"></span>', '<span class="menu-item-icon <%= iconCls %>"></span>',
'<% } %>', '<% } %>',

14
apps/documenteditor/main/app/template/LeftMenu.template
View file

@ -1,14 +1,14 @@
<div id="view-left-menu" class="tool-menu left"> <div id="view-left-menu" class="tool-menu left">
<div class="tool-menu-btns"> <div class="tool-menu-btns">
<button id="left-btn-search" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button> <button id="left-btn-search" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
<!-- /** coauthoring begin **/ --> <!-- /** coauthoring begin **/ -->
<button id="left-btn-comments" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target="left-panel-comments"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button> <button id="left-btn-comments" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target="left-panel-comments"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button>
<button id="left-btn-chat" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target="left-panel-chat"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button> <button id="left-btn-chat" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target="left-panel-chat"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button>
<!-- /** coauthoring end **/ --> <!-- /** coauthoring end **/ -->
<button id="left-btn-plugins" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-plugin">&nbsp;</i></button> <button id="left-btn-plugins" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-plugin">&nbsp;</i></button>
<button id="left-btn-navigation" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-navigation">&nbsp;</i></button> <button id="left-btn-navigation" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-navigation">&nbsp;</i></button>
<button id="left-btn-support" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-support">&nbsp;</i></button> <button id="left-btn-support" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-support">&nbsp;</i></button>
<button id="left-btn-about" class="btn btn-category" data-hint="1" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button> <button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
</div> </div>
<div class="left-panel" style=""> <div class="left-panel" style="">
<!-- /** coauthoring begin **/ --> <!-- /** coauthoring begin **/ -->

20
apps/documenteditor/main/app/template/RightMenu.template
View file

@ -23,15 +23,15 @@
</div> </div>
<div class="tool-menu-btns"> <div class="tool-menu-btns">
<div class="ct-btn-category arrow-left"></div> <div class="ct-btn-category arrow-left"></div>
<button id="id-right-menu-text" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button> <button id="id-right-menu-text" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button>
<button id="id-right-menu-table" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button> <button id="id-right-menu-table" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button>
<button id="id-right-menu-image" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-image-settings"><i class="icon toolbar__icon btn-menu-image">&nbsp;</i></button> <button id="id-right-menu-image" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-image-settings"><i class="icon toolbar__icon btn-menu-image">&nbsp;</i></button>
<button id="id-right-menu-header" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-header-settings"><i class="icon toolbar__icon btn-menu-header">&nbsp;</i></button> <button id="id-right-menu-header" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-header-settings"><i class="icon toolbar__icon btn-menu-header">&nbsp;</i></button>
<button id="id-right-menu-shape" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button> <button id="id-right-menu-shape" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button>
<button id="id-right-menu-chart" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button> <button id="id-right-menu-chart" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button>
<button id="id-right-menu-textart" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button> <button id="id-right-menu-textart" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
<button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" data-hint="1" data-hint-direction="left" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button> <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
<button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" data-hint="1" data-hint-direction="left" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button> <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
<button id="id-right-menu-form" class="btn btn-category arrow-left hidden" data-hint="1" data-hint-direction="left" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button> <button id="id-right-menu-form" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
</div> </div>
</div> </div>

68
apps/documenteditor/main/app/view/FileMenu.js
View file

@ -88,7 +88,9 @@ define([
el : $markup.elementById('#fm-btn-save'), el : $markup.elementById('#fm-btn-save'),
action : 'save', action : 'save',
caption : this.btnSaveCaption, caption : this.btnSaveCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
if ( !!this.options.miSave ) { if ( !!this.options.miSave ) {
@ -100,42 +102,54 @@ define([
el : $markup.elementById('#fm-btn-edit'), el : $markup.elementById('#fm-btn-edit'),
action : 'edit', action : 'edit',
caption : this.btnToEditCaption, caption : this.btnToEditCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miDownload = new Common.UI.MenuItem({ this.miDownload = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-download'), el : $markup.elementById('#fm-btn-download'),
action : 'saveas', action : 'saveas',
caption : this.btnDownloadCaption, caption : this.btnDownloadCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miSaveCopyAs = new Common.UI.MenuItem({ this.miSaveCopyAs = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-save-copy'), el : $markup.elementById('#fm-btn-save-copy'),
action : 'save-copy', action : 'save-copy',
caption : this.btnSaveCopyAsCaption, caption : this.btnSaveCopyAsCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miSaveAs = new Common.UI.MenuItem({ this.miSaveAs = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-save-desktop'), el : $markup.elementById('#fm-btn-save-desktop'),
action : 'save-desktop', action : 'save-desktop',
caption : this.btnSaveAsCaption, caption : this.btnSaveAsCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miPrint = new Common.UI.MenuItem({ this.miPrint = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-print'), el : $markup.elementById('#fm-btn-print'),
action : 'print', action : 'print',
caption : this.btnPrintCaption, caption : this.btnPrintCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miRename = new Common.UI.MenuItem({ this.miRename = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-rename'), el : $markup.elementById('#fm-btn-rename'),
action : 'rename', action : 'rename',
caption : this.btnRenameCaption, caption : this.btnRenameCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
if ( !!this.options.miRename ) { if ( !!this.options.miRename ) {
@ -147,7 +161,9 @@ define([
el : $markup.elementById('#fm-btn-protect'), el : $markup.elementById('#fm-btn-protect'),
action : 'protect', action : 'protect',
caption : this.btnProtectCaption, caption : this.btnProtectCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
if ( !!this.options.miProtect ) { if ( !!this.options.miProtect ) {
@ -159,35 +175,45 @@ define([
el : $markup.elementById('#fm-btn-recent'), el : $markup.elementById('#fm-btn-recent'),
action : 'recent', action : 'recent',
caption : this.btnRecentFilesCaption, caption : this.btnRecentFilesCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miNew = new Common.UI.MenuItem({ this.miNew = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-create'), el : $markup.elementById('#fm-btn-create'),
action : 'new', action : 'new',
caption : this.btnCreateNewCaption, caption : this.btnCreateNewCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miAccess = new Common.UI.MenuItem({ this.miAccess = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-rights'), el : $markup.elementById('#fm-btn-rights'),
action : 'rights', action : 'rights',
caption : this.btnRightsCaption, caption : this.btnRightsCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miHistory = new Common.UI.MenuItem({ this.miHistory = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-history'), el : $markup.elementById('#fm-btn-history'),
action : 'history', action : 'history',
caption : this.btnHistoryCaption, caption : this.btnHistoryCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.miHelp = new Common.UI.MenuItem({ this.miHelp = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-help'), el : $markup.elementById('#fm-btn-help'),
action : 'help', action : 'help',
caption : this.btnHelpCaption, caption : this.btnHelpCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}); });
this.items = []; this.items = [];
@ -196,7 +222,9 @@ define([
el : $markup.elementById('#fm-btn-return'), el : $markup.elementById('#fm-btn-return'),
action : 'back', action : 'back',
caption : this.btnCloseMenuCaption, caption : this.btnCloseMenuCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}), }),
this.miSave, this.miSave,
this.miEdit, this.miEdit,
@ -212,7 +240,9 @@ define([
el : $markup.elementById('#fm-btn-info'), el : $markup.elementById('#fm-btn-info'),
action : 'info', action : 'info',
caption : this.btnInfoCaption, caption : this.btnInfoCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}), }),
this.miAccess, this.miAccess,
this.miHistory, this.miHistory,
@ -220,7 +250,9 @@ define([
el : $markup.elementById('#fm-btn-settings'), el : $markup.elementById('#fm-btn-settings'),
action : 'opts', action : 'opts',
caption : this.btnSettingsCaption, caption : this.btnSettingsCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}), }),
this.miHelp, this.miHelp,
new Common.UI.MenuItem({ new Common.UI.MenuItem({
@ -228,7 +260,9 @@ define([
// el : _get_el('fm-btn-back'), // el : _get_el('fm-btn-back'),
action : 'exit', action : 'exit',
caption : this.btnBackCaption, caption : this.btnBackCaption,
canFocused: false canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
}) })
); );