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

Hint manager: add attr in button component, add getting of unique name, add directions, add applying of the disable

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-20 20:02:11 +03:00
parent 71a6297b38
commit 4d30ec11e6
5 changed files with 66 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/common/main/lib/component/Button.js
View file

@ -245,7 +245,9 @@ define([
disabled : false,
pressed : false,
split : false,
visible : true
visible : true,
dataHint : '',
dataHintDirection: ''
},
template: _.template([
@ -261,13 +263,13 @@ define([
'}} %>',
'<% } %>',
'<% if ( !menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" >',
'<% applyicon() %>',
'<span class="caption"><%= caption %></span>',
'</button>',
'<% } else if (split == false) {%>',
'<div class="btn-group" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<% applyicon() %>',
'<span class="caption"><%= caption %></span>',
'<span class="inner-box-caret">' +
@ -277,11 +279,11 @@ define([
'</div>',
'<% } else { %>',
'<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn <%= cls %>">',
'<button type="button" class="btn <%= cls %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<% applyicon() %>',
'<span class="caption"><%= caption %></span>',
'</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<i class="caret"></i>',
'<span class="sr-only"></span>',
'</button>',
@ -350,7 +352,9 @@ define([
disabled : me.disabled,
pressed : me.pressed,
caption : me.caption,
style : me.style
style : me.style,
dataHint : me.options.dataHint,
dataHintDirection: me.options.dataHintDirection
}));
if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))

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

@ -81,12 +81,27 @@ Common.UI.HintManager = new(function() {
!$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1]));
} else
arr = _controls[_currentLevel+1];
arr.forEach(function(item, index) {
var el = $(item);
if (el.is(':visible')) {
el.attr('data-hint-title', String.fromCharCode(65 + index));
_currentControls.push(el);
var visibleItems = arr.filter(function (item) {
return $(item).is(':visible');
});
if (visibleItems.length > _arrLetters.length) {
var arrLength = _arrLetters.length;
var count = visibleItems.length - arrLength;
var arrIndexes = [];
for (var i = 0; arrIndexes.length < count; i++) {
var randInd = Math.floor(Math.random() * arrLength); //get random index
if (arrIndexes.indexOf(randInd) === -1 && randInd < arrLength - 1) {
arrIndexes.push(randInd);
_arrLetters[_arrLetters.length] = _arrLetters[randInd] + _arrLetters[randInd + 1];
_arrLetters[randInd] = _arrLetters[randInd] + _arrLetters[randInd];
}
}
}
console.log(_arrLetters);
visibleItems.forEach(function (item, index) {
var el = $(item);
el.attr('data-hint-title', _arrLetters[index].toUpperCase());
_currentControls.push(el);
});
return _currentControls;
};
@ -95,13 +110,21 @@ Common.UI.HintManager = new(function() {
_removeHints();
_getControls();
_currentControls.forEach(function(item, index) {
var offset = item.offset();
var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
var disabled = item.hasClass('disabled');
var classes = 'hint-div' + (disabled ? ' disabled' : '');
var hint = $('<div style="" class="' + classes + '">' + item.attr('data-hint-title') + '</div>');
var direction = item.attr('data-hint-direction');
if (direction=='right')
hint.css({left: offset.left + item.outerWidth(), top: offset.top + (item.outerHeight()-20)/2});
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() - 12});
else
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight()});
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight() - 3});
$(document.body).append(hint);
_currentHints.push(hint);

12
apps/common/main/lib/view/Header.js
View file

@ -85,7 +85,7 @@ define([
'<div class="hedset">' +
// '<span class="btn-slot text" id="slot-btn-users"></span>' +
'<section id="tlb-box-users" class="box-cousers dropdown"">' +
'<div class="btn-users">' +
'<div class="btn-users" data-hint="0">' +
'<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
'<label class="caption">&plus;</label>' +
'</div>' +
@ -415,7 +415,8 @@ define([
id: 'btn-goback',
cls: 'btn-header',
iconCls: 'toolbar__icon icon--inverse btn-goback',
split: true
split: true,
dataHint: '0'
});
storeUsers = this.options.storeUsers;
@ -428,7 +429,8 @@ define([
me.btnOptions = new Common.UI.Button({
cls: 'btn-header no-caret',
iconCls: 'toolbar__icon icon--inverse btn-ic-options',
menu: true
menu: true,
dataHint: '0'
});
me.mnuZoom = {options: {value: 100}};
@ -459,7 +461,9 @@ define([
return (new Common.UI.Button({
cls: 'btn-header',
iconCls: iconid,
disabled: disabled === true
disabled: disabled === true,
dataHint:'0',
dataHintDirection: 'left-bottom'
})).render(slot);
}

6
apps/common/main/resources/less/hint-manager.less
View file

@ -1,7 +1,8 @@
.hint-div {
position: absolute;
z-index: @zindex-navbar + 3;
width: 20px;
width: auto;
min-width: 20px;
text-align: center;
background-color: @background-alt-key-hint-ie;
background-color: @background-alt-key-hint;
@ -10,4 +11,7 @@
line-height: 18px;
padding: 0 4px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
&.disabled {
opacity: 0.4;
}
}

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

@ -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" 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" 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" 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" 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" 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" 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" 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" 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" 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" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
<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-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-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-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-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-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-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-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-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-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>
</div>
</div>