Hint Manager: add showing current section, fix/add hints position

This commit is contained in:
JuliaSvinareva 2021-05-30 14:16:33 +03:00
parent 98268676f8
commit 7e14b4bcf5
11 changed files with 148 additions and 63 deletions

View file

@ -60,7 +60,7 @@ define([
'<div class="btn-group" id="<%= id %>">',
'<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
'<span>&nbsp;</span>',
'<span class="inner-box-caret">',
'<span class="inner-box-caret" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="caret"></i>',
'</span>',
'</button>',

View file

@ -89,13 +89,14 @@ define([
scrollAlwaysVisible: false,
takeFocusOnClose: false,
dataHint: '',
dataHintDirection: ''
dataHintDirection: '',
dataHintOffset: ''
},
template: _.template([
'<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<input type="text" class="form-control" spellcheck="false" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@ -151,7 +152,8 @@ define([
items : items,
scope : me,
dataHint : this.options.dataHint,
dataHintDirection: this.options.dataHintDirection
dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset
}));
if (this.itemsTemplate)
this.cmpEl.find('ul').html(

View file

@ -86,9 +86,9 @@ define([
return {
template: _.template([
'<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false"> ',
'<input type="text" class="form-control" spellcheck="false" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>"> ',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>"><span class="caret"></span></button>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<li class="divider">',
'<% _.each(items, function(item) { %>',

View file

@ -52,11 +52,26 @@ Common.UI.HintManager = new(function() {
_isAlt = false,
_hintVisible = false,
_currentLevel = 0,
_currentSection = document,
_controls = [],
_currentControls = [],
_currentHints = [],
_inputLetters = '';
var _setCurrentSection = function (btn) {
if (btn === 'esc') {
if (_currentLevel === 0) {
_currentSection = document;
}
return;
}
if ($('#file-menu-panel').is(':visible')) {
_currentSection = $('#file-menu-panel');
} else {
_currentSection = btn.closest('.hint-section') || document;
}
};
var _showHints = function () {
_inputLetters = '';
if (_currentHints.length === 0)
@ -104,7 +119,8 @@ Common.UI.HintManager = new(function() {
/*if (!_controls[_currentLevel]) {
_controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
}*/
_controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
_controls[_currentLevel] = $(_currentSection).find('[data-hint=' + (_currentLevel) + ']').toArray();
console.log(_controls[_currentLevel]);
_currentControls = [];
var arr = _controls[_currentLevel];
var visibleItems = arr.filter(function (item) {
@ -145,9 +161,14 @@ Common.UI.HintManager = new(function() {
});
else if (direction === 'left-top')
hint.css({
top: offset.top - 14 + offsets[0],
top: offset.top - 10 + offsets[0],
left: offset.left - 14 + offsets[1]
});
else if (direction === 'right-top')
hint.css({
top: offset.top - 16 + offsets[0],
left: offset.left + item.outerWidth() - 4 + offsets[1]
});
else if (direction === 'right')
hint.css({
top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0],
@ -165,7 +186,7 @@ Common.UI.HintManager = new(function() {
});
else
hint.css({
top: offset.top + item.outerHeight() - 3 + offsets[0],
top: offset.top + item.outerHeight() + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1]
});
$(document.body).append(hint);
@ -209,6 +230,7 @@ Common.UI.HintManager = new(function() {
_hideHints();
} else {
_prevLevel();
_setCurrentSection('esc');
_showHints();
}
} else if ((e.keyCode > 47 && e.keyCode < 58 || e.keyCode > 64 && e.keyCode < 91) && e.key) {
@ -223,11 +245,13 @@ Common.UI.HintManager = new(function() {
}
if (curr) {
if (curr.prop("tagName").toLowerCase() === 'input') {
curr.trigger(jQuery.Event('click', {which: 1}));
curr.focus();
_hideHints();
} else {
curr.trigger(jQuery.Event('click', {which: 1}));
_nextLevel();
_setCurrentSection(curr);
_showHints();
}
}

View file

@ -110,7 +110,10 @@ define([
hold : true,
speed : 'medium',
width : 90,
allowDecimal: true
allowDecimal: true,
dataHint : '',
dataHintDirection: '',
dataHintOffset: ''
},
disabled : false,
@ -118,7 +121,7 @@ define([
rendered : false,
template :
'<input type="text" class="form-control" spellcheck="false">' +
'<input type="text" class="form-control" spellcheck="false" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
'<div class="spinner-buttons">' +
'<button type="button" class="spinner-up"><i class="arrow"></i></button>' +
'<button type="button" class="spinner-down"><i class="arrow"></i></button>' +
@ -185,7 +188,13 @@ define([
render: function () {
var el = this.$el || $(this.el);
el.html(this.template);
var template = _.template(this.template);
el.html($(template({
dataHint : this.options.dataHint,
dataHintDirection: this.options.dataHintDirection,
dataHintOffset : this.options.dataHintOffset
})));
this.$input = el.find('.form-control');
this.rendered = true;

View file

@ -230,7 +230,8 @@ define([
caption: this.txtInvisibleSignature,
disabled: this._state.invisibleSignDisabled,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.btnsInvisibleSignature.push(button);
if (this._isSetEvents) {
@ -247,7 +248,8 @@ define([
disabled: this._state.disabled || this._state.disabledPassword,
visible: !this._state.hasPassword,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.btnsAddPwd.push(button);
if (this._isSetEvents) {
@ -264,7 +266,8 @@ define([
disabled: this._state.disabled || this._state.disabledPassword,
visible: this._state.hasPassword,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.btnsDelPwd.push(button);
if (this._isSetEvents) {
@ -281,7 +284,8 @@ define([
disabled: this._state.disabled || this._state.disabledPassword,
visible: this._state.hasPassword,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.btnsChangePwd.push(button);
if (this._isSetEvents) {

View file

@ -83,7 +83,7 @@
</tr>
<tr>
<td align="center" colspan=2>
<label class="link" id="paragraph-advanced-link"><%= scope.textAdvanced %></label>
<label class="link" id="paragraph-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="-4, 0"><%= scope.textAdvanced %></label>
</td>
</tr>
<tr class="finish-cell"></tr>

View file

@ -1,16 +1,16 @@
<div class="layout-region">
<div id="viewport-vbox-layout" class="layout-ct vbox">
<section class="layout-ct">
<div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
<div id="file-menu-panel" class="toolbar-fullview-panel hint-section" style="display:none;"></div>
</section>
<section id="app-title" class="layout-item"></section>
<div id="toolbar" class="layout-item"></div>
<div id="toolbar" class="layout-item hint-section"></div>
<div class="layout-item middle">
<div id="viewport-hbox-layout" class="layout-ct hbox">
<div id="left-menu" class="layout-item" style="width: 40px;"></div>
<div id="left-menu" class="layout-item hint-section" style="width: 40px;"></div>
<div id="about-menu-panel" class="left-menu-full-ct" style="display:none;"></div>
<div id="editor-container" class="layout-item"><div id="editor_sdk"></div></div>
<div id="right-menu" class="layout-item"></div>
<div id="right-menu" class="layout-item hint-section"></div>
<div id="left-panel-history" class="layout-item"></div>
</div>
</div>

View file

@ -210,7 +210,7 @@ define([
'</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">',
'<td class="left"><label><%= scope.txtProofing %></label></td>',
'<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="left-top"><%= scope.txtAutoCorrect %></button></div></td>',
'<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.txtAutoCorrect %></button></div></td>',
'</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">',
'<td class="left"><label><%= scope.txtInput %></label></td>',
@ -272,7 +272,7 @@ define([
'</tr>','<tr class="divider macros"></tr>',
'<tr class="fms-btn-apply">',
'<td class="left"></td>',
'<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
'<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>',
'</div>',
@ -280,7 +280,7 @@ define([
'<table style="margin: 10px 0;"><tbody>',
'<tr>',
'<td class="left"></td>',
'<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
'<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>',
'</div>'
@ -300,7 +300,7 @@ define([
el: $markup.findById('#fms-chb-input-mode'),
labelText: this.strInputMode,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
/** coauthoring begin **/
@ -308,7 +308,7 @@ define([
el: $markup.findById('#fms-chb-live-comment'),
labelText: this.strLiveComment,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
}).on('change', function(field, newValue, oldValue, eOpts){
me.chResolvedComment.setDisabled(field.getValue()!=='checked');
});
@ -317,7 +317,7 @@ define([
el: $markup.findById('#fms-chb-resolved-comment'),
labelText: this.strResolvedComment,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
/** coauthoring end **/
@ -325,21 +325,21 @@ define([
el: $markup.findById('#fms-chb-spell-check'),
labelText: this.strSpellCheckMode,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
this.chCompatible = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-compatible'),
labelText: this.textOldVersions,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
this.chAutosave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-autosave'),
labelText: this.strAutosave,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
}).on('change', function(field, newValue, oldValue, eOpts){
if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
me.cmbCoAuthMode.setValue(0);
@ -352,14 +352,14 @@ define([
el: $markup.findById('#fms-chb-forcesave'),
labelText: this.strForcesave,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
this.chAlignGuides = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-align-guides'),
labelText: this.strAlignGuides,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
this.cmbZoom = new Common.UI.ComboBox({
@ -384,7 +384,8 @@ define([
{ value: 200, displayValue: "200%" }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
/** coauthoring begin **/
@ -399,7 +400,8 @@ define([
{ value: 'last', displayValue: this.txtLast }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.cmbCoAuthMode = new Common.UI.ComboBox({
@ -412,7 +414,8 @@ define([
{ value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
}).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1);
@ -441,7 +444,8 @@ define([
{ value: 'custom', displayValue: this.txtCacheMode }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
@ -456,7 +460,8 @@ define([
{ value: Common.Utils.Metric.c_MetricUnits['inch'], displayValue: this.txtInch }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.cmbMacros = new Common.UI.ComboBox({
@ -471,7 +476,8 @@ define([
{ value: 1, displayValue: this.txtRunMacros, descValue: this.txtRunMacrosDesc }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
}).on('selected', function(combo, record) {
me.lblMacrosDesc.text(record.descValue);
});
@ -481,7 +487,7 @@ define([
el: $markup.findById('#fms-chb-paste-settings'),
labelText: this.strPasteButton,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left'
});
this.btnAutoCorrect = new Common.UI.Button({
@ -499,7 +505,8 @@ define([
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
],
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
$markup.find('.btn.primary').each(function(index, el){
@ -1015,7 +1022,7 @@ define([
'<table class="main" style="margin: 10px 0;">',
'<tr>',
'<td class="left"></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.okButtonText %></button></td>',
'</tr>',
'</table>',
'</div>'

View file

@ -117,7 +117,10 @@ define([
menuStyle: 'min-width: 85px;',
editable: false,
data: this._arrLineRule,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.cmbLineRule.setValue('');
this.lockedControls.push(this.cmbLineRule);
@ -130,7 +133,10 @@ define([
defaultUnit : "",
maxValue: 132,
minValue: 0.5,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.lockedControls.push(this.numLineHeight);
@ -144,7 +150,10 @@ define([
minValue: 0,
allowAuto : true,
autoText : this.txtAutoText,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.spinners.push(this.numSpacingBefore);
this.lockedControls.push(this.numSpacingBefore);
@ -159,7 +168,10 @@ define([
minValue: 0,
allowAuto : true,
autoText : this.txtAutoText,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.spinners.push(this.numSpacingAfter);
this.lockedControls.push(this.numSpacingAfter);
@ -167,7 +179,10 @@ define([
this.chAddInterval = new Common.UI.CheckBox({
el: $markup.findById('#paragraph-checkbox-add-interval'),
labelText: this.strSomeParagraphSpace,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: '-8, 0'
});
this.lockedControls.push(this.chAddInterval);
@ -175,7 +190,10 @@ define([
parentEl: $markup.findById('#paragraph-color-btn'),
disabled: this._locked,
transparent: true,
menu : true
menu: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-4, 0'
});
this.lockedControls.push(this.btnColor);
@ -188,7 +206,10 @@ define([
value: '0 cm',
maxValue: 55.87,
minValue: -55.87,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.spinners.push(this.numIndentsLeft);
this.lockedControls.push(this.numIndentsLeft);
@ -202,7 +223,10 @@ define([
value: '0 cm',
maxValue: 55.87,
minValue: -55.87,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.spinners.push(this.numIndentsRight);
this.lockedControls.push(this.numIndentsRight);
@ -214,7 +238,10 @@ define([
data: this._arrSpecial,
style: 'width: 85px;',
menuStyle : 'min-width: 85px;',
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.cmbSpecial.setValue('');
this.lockedControls.push(this.cmbSpecial);
@ -228,7 +255,10 @@ define([
value: '0 cm',
maxValue: 55.87,
minValue: 0,
disabled: this._locked
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
});
this.spinners.push(this.numSpecialBy);
this.lockedControls.push(this.numSpecialBy);

View file

@ -271,7 +271,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'left-bottom'
dataHintDirection: 'bottom',
dataHintOffset: '0, -16'
});
this.paragraphControls.push(this.btnHighlightColor);
this.textOnlyControls.push(this.btnHighlightColor);
@ -295,7 +296,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'left-bottom'
dataHintDirection: 'bottom',
dataHintOffset: '0, -16'
});
this.paragraphControls.push(this.btnFontColor);
@ -311,7 +313,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'left-bottom'
dataHintDirection: 'bottom',
dataHintOffset: '0, -16'
});
this.paragraphControls.push(this.btnParagraphColor);
this.textOnlyControls.push(this.btnParagraphColor);
@ -417,7 +420,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'top'
dataHintDirection: 'top',
dataHintOffset: '0, -6'
});
this.paragraphControls.push(this.btnLineSpace);
@ -435,7 +439,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'left-bottom'
dataHintDirection: 'bottom',
dataHintOffset: '0, -16'
});
this.toolbarControls.push(this.btnShowHidenChars);
@ -448,7 +453,8 @@ define([
split: true,
menu: true,
dataHint: '1',
dataHintDirection: 'left-top'
dataHintDirection: 'top',
dataHintOffset: '0, -16'
});
this.paragraphControls.push(this.btnMarkers);
this.textOnlyControls.push(this.btnMarkers);
@ -462,7 +468,8 @@ define([
split: true,
menu: true,
dataHint: '1',
dataHintDirection: 'left-top'
dataHintDirection: 'top',
dataHintOffset: '0, -16'
});
this.paragraphControls.push(this.btnNumbers);
this.textOnlyControls.push(this.btnNumbers);
@ -473,7 +480,8 @@ define([
iconCls: 'toolbar__icon btn-multilevels',
menu: true,
dataHint: '1',
dataHintDirection: 'top'
dataHintDirection: 'top',
dataHintOffset: '0, -6'
});
this.paragraphControls.push(this.btnMultilevels);
this.textOnlyControls.push(this.btnMultilevels);
@ -1125,7 +1133,8 @@ define([
restoreHeight: true
}),
dataHint: '1',
dataHintDirection: 'top'
dataHintDirection: 'top',
dataHintOffset: '0, -6'
});
this.toolbarControls.push(this.btnColorSchemas);
@ -1241,7 +1250,7 @@ define([
{value: 96, displayValue: "96"}
],
dataHint: '1',
dataHintDirection: 'left-top'
dataHintDirection: 'top'
});
this.paragraphControls.push(this.cmbFontSize);
@ -1252,7 +1261,7 @@ define([
hint: this.tipFontName,
store: new Common.Collections.Fonts(),
dataHint: '1',
dataHintDirection: 'left-top'
dataHintDirection: 'top'
});
this.paragraphControls.push(this.cmbFontName);