/* * * (c) Copyright Ascensio System SIA 2010-2021 * * This program is a free software product. You can redistribute it and/or * modify it under the terms of the GNU Affero General Public License (AGPL) * version 3 as published by the Free Software Foundation. In accordance with * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect * that Ascensio System SIA expressly excludes the warranty of non-infringement * of any third-party rights. * * This program is distributed WITHOUT ANY WARRANTY; without even the implied * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html * * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha * street, Riga, Latvia, EU, LV-1050. * * The interactive user interfaces in modified source and object code versions * of the Program must display Appropriate Legal Notices, as required under * Section 5 of the GNU AGPL version 3. * * Pursuant to Section 7(b) of the License you must retain the original Product * logo when distributing the program. Pursuant to Section 7(e) we decline to * grant you any rights under trademark law for use of our trademarks. * * All the Product's GUI elements, including illustrations and icon sets, as * well as technical writing content are licensed under the terms of the * Creative Commons Attribution-ShareAlike 4.0 International. See the License * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode * */ /** * HintManager.js * * Created by Julia Radzhabova on 21.04.2021 * Copyright (c) 2021 Ascensio System SIA. All rights reserved. * */ /** * Example usage with simple items: * * * * * * Example usage with components: * * new Common.UI.Button({ * ... * dataHint: '1', // '0' - tabs in toolbar, left and right menu, statusbar; * // '1' - file menu, contents of toolbar tabs, contents of right and left panels * dataHintDirection: 'bottom', // top, bottom, right, left, left-top * dataHintOffset: 'small', // big - 6px, medium - 4px, small - 2px * dataHintTitle : 'S' * }); * * new Common.UI.CheckBox({ * ... * dataHint: '1', * dataHintDirection: 'left', * dataHintOffset: 'small' * }); * * new Common.UI.ComboBox({ * ... * dataHint: '1', * dataHintDirection: 'bottom', * dataHintOffset: 'big' * }); * * new Common.UI.InputField({ * ... * dataHint: '1', * dataHintDirection: 'left', * dataHintOffset: 'small' * }); * * new Common.UI.MetricSpinner({ * ... * dataHint: '1', * dataHintDirection: 'bottom', * dataHintOffset: 'big' * }); * * new Common.UI.RadioBox({ * ... * dataHint: '1', * dataHintDirection: 'left', * dataHintOffset: 'small' * }); */ if (Common === undefined) var Common = {}; if (Common.UI === undefined) { Common.UI = {}; } Common.UI.HintManager = new(function() { var _lang = 'en', _arrAlphabet = [], _arrEnAlphabet = [], _arrQwerty = [], _arrEnQwerty = [], _needShow = false, _hintVisible = false, _currentLevel = 0, _currentSection = document, _currentControls = [], _currentHints = [], _inputLetters = '', _isComplete = false, _isLockedKeyEvents = false, _inputTimer, _isDocReady = false, _isEditDiagram = false, _usedTitles = [], _appPrefix, _staticHints = { // for desktop buttons "btnhome": 'K' }; var _api; var _setCurrentSection = function (btn, section) { if (section) { _currentSection = section; return; } if (btn === 'esc') { if (_currentLevel === 0) { _currentSection = document; } return; } if (_isEditDiagram) { _currentSection = [$(window.parent.document).find('.advanced-settings-dlg:visible')[0], window.document]; } else if ($('#file-menu-panel').is(':visible')) { _currentSection = $('#file-menu-panel'); } else { _currentSection = (btn && btn.closest('.hint-section')) || document; } }; var _lockedKeyEvents = function (isLocked) { if (_api) { _isLockedKeyEvents = isLocked; _api.asc_enableKeyEvents(!isLocked); } }; var _showHints = function () { _inputLetters = ''; if (_currentLevel === 0) { Common.NotificationCenter.trigger('toolbar:collapse'); } if (_currentHints.length === 0 || ($('#file-menu-panel').is(':visible' || _isEditDiagram) && _currentLevel === 1)) { _getHints(); } if (_currentHints.length > 0) { !_isLockedKeyEvents && _lockedKeyEvents(true); _hintVisible = true; _currentHints.forEach(function(item) { item.show(); }); _inputTimer = setInterval(function () { if (_inputLetters.length > 0) { _inputLetters = ''; } }, 5000); } else { _hintVisible = false; } Common.NotificationCenter.trigger('hints:show', _hintVisible, _currentLevel); }; var _hideHints = function() { _hintVisible = false; _currentHints && _currentHints.forEach(function(item) { item.remove() }); clearInterval(_inputTimer); Common.NotificationCenter.trigger('hints:show', false); }; var _nextLevel = function(level) { _removeHints(); _currentHints.length = 0; _currentControls.length = 0; if (level !== undefined) { _currentLevel = level; } else { _currentLevel++; } }; var _prevLevel = function() { _removeHints(); _currentHints.length = 0; _currentControls.length = 0; _currentLevel--; }; var _getLetters = function(countButtons) { var arr = _arrAlphabet.slice(), firstFreeLetter, ind; for (var i = 0; i < _arrAlphabet.length, !firstFreeLetter; i++) { if (_usedTitles.indexOf(_arrAlphabet[i]) === -1) { firstFreeLetter = _arrAlphabet[i]; ind = i; } } arr[ind] = firstFreeLetter + _arrAlphabet[0]; for (var i = 0; arr.length < countButtons; i++) { var addTip = firstFreeLetter + _arrAlphabet[i]; if (addTip !== arr[ind]) { arr.push(firstFreeLetter + _arrAlphabet[i]); } } return arr; }; var _getLetterInUILanguage = function (letter) { var l = letter; if (_arrAlphabet.indexOf(l) === -1) { var ind = _arrEnAlphabet.indexOf(l); l = _arrAlphabet[ind]; } return l; }; var _isItemDisabled = function (item) { return (item.hasClass('disabled') || item.parent().hasClass('disabled') || item.attr('disabled')); }; var _getControls = function() { _currentControls = []; _usedTitles = []; var arr = [], arrItemsWithTitle = []; if (_.isArray(_currentSection)) { _currentSection.forEach(function (section) { arr = arr.concat($(section).find('[data-hint=' + (_currentLevel) + ']').toArray()); arrItemsWithTitle = arrItemsWithTitle.concat($(section).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray()); }); } else { arr = $(_currentSection).find('[data-hint=' + (_currentLevel) + ']').toArray(); arrItemsWithTitle = $(_currentSection).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray(); } var visibleItems = arr.filter(function (item) { return $(item).is(':visible'); }); var visibleItemsWithTitle = arrItemsWithTitle.filter(function (item) { return $(item).is(':visible'); }); if (visibleItems.length === visibleItemsWithTitle.length) { // all buttons have data-hint-title visibleItems.forEach(function (item) { var el = $(item); if (_lang !== 'en') { var title = el.attr('data-hint-title').toLowerCase(), firstLetter = title.substr(0, 1); if (_arrAlphabet.indexOf(firstLetter) === -1) { // tip is in English var newTip = ''; for (var i = 0; i < title.length; i++) { var letter = title.substr(i, 1), ind = _arrEnAlphabet.indexOf(letter); newTip = newTip + _arrAlphabet[ind].toUpperCase(); } el.attr('data-hint-title', newTip); } } _currentControls.push(el); }); return; } var _arrLetters = [], _usedLetters = []; if (_currentLevel === 0) { for (var key in _staticHints) { var t = _staticHints[key].toLowerCase(); _usedTitles.push(t); _usedLetters.push(_arrAlphabet.indexOf(t)); } } if (visibleItems.length > _arrAlphabet.length) { visibleItemsWithTitle.forEach(function (item) { var t = $(item).data('hint-title').toLowerCase(); t = _getLetterInUILanguage(t); _usedTitles.push(t); }); _arrLetters = _getLetters(visibleItems.length + (_currentLevel === 0 ? _.size(_staticHints) : 0)); } else { _arrLetters = _arrAlphabet.slice(); } if (arrItemsWithTitle.length > 0) { visibleItems.forEach(function (item) { var el = $(item); var title = el.attr('data-hint-title'); if (title) { var ind = _arrEnAlphabet.indexOf(title.toLowerCase()); if (ind === -1) { // we have already changed _usedLetters.push(_arrAlphabet.indexOf(title.toLowerCase())); } else { _usedLetters.push(ind); if (_lang !== 'en') { el.attr('data-hint-title', _arrLetters[ind].toUpperCase()); } } } }); } var index = 0; visibleItems.forEach(function (item) { var el = $(item); while (_usedLetters.indexOf(index) !== -1) { index++; } var title = el.attr('data-hint-title'); if (!title) { el.attr('data-hint-title', _arrLetters[index].toUpperCase()); index++; } _currentControls.push(el); }); }; var _getHints = function() { var docH = _isEditDiagram ? (window.parent.innerHeight * Common.Utils.zoom()) : (Common.Utils.innerHeight() - 20), docW = _isEditDiagram ? (window.parent.innerWidth * Common.Utils.zoom()) : (Common.Utils.innerWidth()), section = _isEditDiagram ? _currentSection[0] : _currentSection, topSection = _currentLevel !== 0 && $(section).length > 0 && !_isEditDiagram ? $(section).offset().top : 0, bottomSection = _currentLevel !== 0 && $(section).length > 0 && !_isEditDiagram ? topSection + $(section).height() : docH; if ($(section).prop('id') === 'toolbar' && $(section).outerHeight() < $(section).find('.box-controls').outerHeight()) { bottomSection += $(section).find('.box-controls').outerHeight(); } if (_currentControls.length === 0) _getControls(); _currentControls.forEach(function(item, index) { if (!_isItemDisabled(item)) { var leftBorder = 0, rightBorder = docW; if (!_isEditDiagram && $(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0) || ($('#about-menu-panel').is(':visible') && item.closest('.hint-section').prop('id') === 'right-menu')) { // don't show right menu hints when about is visible return; } if (window.SSE && item.parent().prop('id') === 'statusbar_bottom') { var $statusbar = item.parent(); if (item.offset().left > $statusbar.offset().left + $statusbar.width()) { return; } } if (_currentLevel === 0 && item.closest('.tabs.short').length > 0) { var blockTabs = item.closest('.tabs.short'); leftBorder = blockTabs.offset().left; rightBorder = leftBorder + blockTabs.width(); if (!item.hasClass('scroll')) { leftBorder += 20; rightBorder -= 20; } } var hint = $('