Hint manager: make navigation
This commit is contained in:
JuliaSvinareva
parent
bc30f42a8d
commit
9f5a6f1f6e
|
|
@ -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)
|
||||
if (_currentHints.length > 0) {
|
||||
_hintVisible = true;
|
||||
_currentHints.forEach(function(item) {
|
||||
item.show()
|
||||
});
|
||||
} else
|
||||
_hintVisible = false;
|
||||
} else {
|
||||
_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() {
|
||||
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();
|
||||
}
|
||||
|
||||
_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();
|
||||
if (_currentControls.length === 0)
|
||||
_getControls();
|
||||
_currentControls.forEach(function(item, index) {
|
||||
var disabled = item.hasClass('disabled');
|
||||
var classes = 'hint-div' + (disabled ? ' disabled' : '');
|
||||
var hint = $('<div style="" class="' + classes + '">' + item.attr('data-hint-title') + '</div>');
|
||||
if (!item.hasClass('disabled')) {
|
||||
var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
|
||||
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});
|
||||
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});
|
||||
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});
|
||||
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});
|
||||
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() {
|
||||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue