Hint manager: make navigation for levels
This commit is contained in:
JuliaSvinareva
parent
4d30ec11e6
commit
bc30f42a8d
|
|
@ -51,36 +51,43 @@ Common.UI.HintManager = new(function() {
|
|||
_arrLetters = [],
|
||||
_isAlt = false,
|
||||
_hintVisible = false,
|
||||
_currentLevel = -1,
|
||||
_currentLevel = 0,
|
||||
_controls = [],
|
||||
_currentControls = [],
|
||||
_currentHints = [];
|
||||
_currentHints = [],
|
||||
_inputLetters = '';
|
||||
|
||||
var _showHints = function() {
|
||||
_hintVisible = !_hintVisible;
|
||||
if (_hintVisible) {
|
||||
var _showHints = function(type) {
|
||||
if (type === 'next') {
|
||||
_removeHints();
|
||||
_currentLevel++;
|
||||
_getHints();
|
||||
} else {
|
||||
} else if (type === 'prev') {
|
||||
_removeHints();
|
||||
_currentLevel--;
|
||||
_getHints();
|
||||
if (_currentLevel === -1)
|
||||
_hintVisible = false;
|
||||
} else {
|
||||
_hintVisible = !_hintVisible;
|
||||
_getHints();
|
||||
}
|
||||
};
|
||||
|
||||
var _getControls = function() {
|
||||
if (!_controls[_currentLevel + 1]) {
|
||||
_controls[_currentLevel + 1] = $('[data-hint=' + (_currentLevel + 1) + ']').toArray();
|
||||
if (_currentLevel==0 && !_controls[_currentLevel])
|
||||
if (!_controls[_currentLevel]) {
|
||||
_controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
|
||||
if (_currentLevel === 0 && !_controls[_currentLevel])
|
||||
_controls[_currentLevel] = $('[data-hint=0]').toArray();
|
||||
}
|
||||
|
||||
_currentControls = [];
|
||||
var arr = [];
|
||||
if (_currentLevel==0) {
|
||||
if (_currentLevel === 0) {
|
||||
arr = arr.concat(_controls[_currentLevel]);
|
||||
!$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1]));
|
||||
} else
|
||||
arr = _controls[_currentLevel+1];
|
||||
arr = _controls[_currentLevel];
|
||||
var visibleItems = arr.filter(function (item) {
|
||||
return $(item).is(':visible');
|
||||
});
|
||||
|
|
@ -97,7 +104,7 @@ Common.UI.HintManager = new(function() {
|
|||
}
|
||||
}
|
||||
}
|
||||
console.log(_arrLetters);
|
||||
console.log(visibleItems);
|
||||
visibleItems.forEach(function (item, index) {
|
||||
var el = $(item);
|
||||
el.attr('data-hint-title', _arrLetters[index].toUpperCase());
|
||||
|
|
@ -122,13 +129,14 @@ Common.UI.HintManager = new(function() {
|
|||
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() - 12});
|
||||
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);
|
||||
});
|
||||
console.log(_currentHints);
|
||||
};
|
||||
|
||||
var _removeHints = function() {
|
||||
|
|
@ -145,32 +153,38 @@ Common.UI.HintManager = new(function() {
|
|||
$(document).on('keyup', function(e) {
|
||||
if (e.keyCode == Common.UI.Keys.ALT &&_isAlt) {
|
||||
e.preventDefault();
|
||||
_showHints();
|
||||
_showHints('current');
|
||||
}
|
||||
_isAlt = false;
|
||||
});
|
||||
$(document).on('keydown', function(e) {
|
||||
if (_hintVisible) {
|
||||
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) {
|
||||
var curr;
|
||||
_inputLetters = _inputLetters + String.fromCharCode(e.keyCode).toUpperCase();
|
||||
for (var i = 0; i < _currentControls.length; 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;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (curr) {
|
||||
_showHints();
|
||||
console.log(curr);
|
||||
curr && curr.trigger(jQuery.Event('click', {which: 1}));
|
||||
_showHints('next');
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
_isAlt = (e.keyCode == Common.UI.Keys.ALT);
|
||||
if (_isAlt) {
|
||||
_inputLetters = '';
|
||||
}
|
||||
console.log(_currentLevel);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -102,13 +102,15 @@ define([
|
|||
toggleGroup : null,
|
||||
iconCls : '',
|
||||
menu : null,
|
||||
canFocused : true
|
||||
canFocused : true,
|
||||
dataHint : '',
|
||||
dataHintDirection: ''
|
||||
},
|
||||
|
||||
tagName : 'li',
|
||||
|
||||
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)) { %>',
|
||||
'<span class="menu-item-icon <%= iconCls %>"></span>',
|
||||
'<% } %>',
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div id="view-left-menu" class="tool-menu left">
|
||||
<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"> </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"> </i></button>
|
||||
<!-- /** 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"> </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"> </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"> </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"> </i></button>
|
||||
<!-- /** 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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </i></button>
|
||||
</div>
|
||||
<div class="left-panel" style="">
|
||||
<!-- /** coauthoring begin **/ -->
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@
|
|||
</div>
|
||||
<div class="tool-menu-btns">
|
||||
<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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,7 +88,9 @@ define([
|
|||
el : $markup.elementById('#fm-btn-save'),
|
||||
action : 'save',
|
||||
caption : this.btnSaveCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
if ( !!this.options.miSave ) {
|
||||
|
|
@ -100,42 +102,54 @@ define([
|
|||
el : $markup.elementById('#fm-btn-edit'),
|
||||
action : 'edit',
|
||||
caption : this.btnToEditCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miDownload = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-download'),
|
||||
action : 'saveas',
|
||||
caption : this.btnDownloadCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miSaveCopyAs = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-save-copy'),
|
||||
action : 'save-copy',
|
||||
caption : this.btnSaveCopyAsCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miSaveAs = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-save-desktop'),
|
||||
action : 'save-desktop',
|
||||
caption : this.btnSaveAsCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miPrint = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-print'),
|
||||
action : 'print',
|
||||
caption : this.btnPrintCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miRename = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-rename'),
|
||||
action : 'rename',
|
||||
caption : this.btnRenameCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
if ( !!this.options.miRename ) {
|
||||
|
|
@ -147,7 +161,9 @@ define([
|
|||
el : $markup.elementById('#fm-btn-protect'),
|
||||
action : 'protect',
|
||||
caption : this.btnProtectCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
if ( !!this.options.miProtect ) {
|
||||
|
|
@ -159,35 +175,45 @@ define([
|
|||
el : $markup.elementById('#fm-btn-recent'),
|
||||
action : 'recent',
|
||||
caption : this.btnRecentFilesCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miNew = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-create'),
|
||||
action : 'new',
|
||||
caption : this.btnCreateNewCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miAccess = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-rights'),
|
||||
action : 'rights',
|
||||
caption : this.btnRightsCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miHistory = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-history'),
|
||||
action : 'history',
|
||||
caption : this.btnHistoryCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.miHelp = new Common.UI.MenuItem({
|
||||
el : $markup.elementById('#fm-btn-help'),
|
||||
action : 'help',
|
||||
caption : this.btnHelpCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
});
|
||||
|
||||
this.items = [];
|
||||
|
|
@ -196,7 +222,9 @@ define([
|
|||
el : $markup.elementById('#fm-btn-return'),
|
||||
action : 'back',
|
||||
caption : this.btnCloseMenuCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
}),
|
||||
this.miSave,
|
||||
this.miEdit,
|
||||
|
|
@ -212,7 +240,9 @@ define([
|
|||
el : $markup.elementById('#fm-btn-info'),
|
||||
action : 'info',
|
||||
caption : this.btnInfoCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
}),
|
||||
this.miAccess,
|
||||
this.miHistory,
|
||||
|
|
@ -220,7 +250,9 @@ define([
|
|||
el : $markup.elementById('#fm-btn-settings'),
|
||||
action : 'opts',
|
||||
caption : this.btnSettingsCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
}),
|
||||
this.miHelp,
|
||||
new Common.UI.MenuItem({
|
||||
|
|
@ -228,7 +260,9 @@ define([
|
|||
// el : _get_el('fm-btn-back'),
|
||||
action : 'exit',
|
||||
caption : this.btnBackCaption,
|
||||
canFocused: false
|
||||
canFocused: false,
|
||||
dataHint: 1,
|
||||
dataHintDirection: 'right'
|
||||
})
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue