diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 0cd5d86d8..336625810 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -11,6 +11,7 @@ import SideContainerToggler from "./side_pannels/SideContainerToggler"; import JitsiPopover from "./util/JitsiPopover"; import messageHandler from "./util/MessageHandler"; import UIUtil from "./util/UIUtil"; +import { activateTooltips } from './util/Tooltip'; import UIEvents from "../../service/UI/UIEvents"; import EtherpadManager from './etherpad/Etherpad'; import SharedVideoManager from './shared_video/SharedVideo'; @@ -232,7 +233,7 @@ UI.initConference = function () { // (2) APP.conference as means of communication between the participants. followMeHandler = new FollowMe(APP.conference, UI); - UIUtil.activateTooltips(); + activateTooltips(); }; UI.mucJoined = function () { diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index ca5b4b061..1524189b5 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -18,6 +18,7 @@ const logger = require("jitsi-meet-logger").getLogger(__filename); import UIEvents from "../../../service/UI/UIEvents"; import UIUtil from '../util/UIUtil'; +import { setTooltip } from '../util/Tooltip'; import VideoLayout from '../videolayout/VideoLayout'; import { setToolboxEnabled } from '../../../react/features/toolbox'; @@ -323,7 +324,7 @@ var Recording = { initRecordingButton() { const selector = $('#toolbar_button_record'); - UIUtil.setTooltip(selector, 'liveStreaming.buttonTooltip', 'right'); + setTooltip(selector, 'liveStreaming.buttonTooltip', 'right'); selector.addClass(this.baseClass); selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip); diff --git a/modules/UI/util/Tooltip.js b/modules/UI/util/Tooltip.js new file mode 100644 index 000000000..88ad7b44f --- /dev/null +++ b/modules/UI/util/Tooltip.js @@ -0,0 +1,86 @@ +/* global $, APP, AJS */ + +/** + * Associates tooltip element position (in the terms of + * {@link UIUtil#setTooltip} which do not look like CSS position) with + * AUI tooltip gravity. + */ +const TOOLTIP_POSITIONS = { + 'bottom': 'n', + 'bottom-left': 'ne', + 'bottom-right': 'nw', + 'left': 'e', + 'right': 'w', + 'top': 's', + 'top-left': 'se', + 'top-right': 'sw' +}; + +/** + * Sets a global handler for all tooltips. Once invoked, create a new + * tooltip by merely updating a DOM node with the appropriate class (e.g. + * tooltip-n) and the attribute content. + */ +export function activateTooltips() { + AJS.$('[data-tooltip]').tooltip({ + gravity() { + return this.getAttribute('data-tooltip'); + }, + + title() { + return this.getAttribute('content'); + }, + + html: true, // Handle multiline tooltips. + + // The following two prevent tooltips from being stuck: + hoverable: false, // Make custom tooltips behave like native ones. + live: true // Attach listener to document element. + }); +} + +/** + * Sets the tooltip to the given element. + * + * @param element the element to set the tooltip to + * @param key the tooltip data-i18n key + * @param position the position of the tooltip in relation to the element + */ +export function setTooltip(element, key, position) { + if (element) { + const selector = element.jquery ? element : $(element); + + selector.attr('data-tooltip', TOOLTIP_POSITIONS[position]); + selector.attr('data-i18n', `[content]${key}`); + + APP.translation.translateElement(selector); + } +} + +/** + * Sets the tooltip to the given element, but instead of using translation + * key uses text value. + * + * @param element the element to set the tooltip to + * @param text the tooltip text + * @param position the position of the tooltip in relation to the element + */ +export function setTooltipText(element, text, position) { + if (element) { + removeTooltip(element); + + element.setAttribute('data-tooltip', TOOLTIP_POSITIONS[position]); + element.setAttribute('content', text); + } +} + +/** + * Removes the tooltip to the given element. + * + * @param element the element to remove the tooltip from + */ +export function removeTooltip(element) { + element.removeAttribute('data-tooltip', ''); + element.removeAttribute('data-i18n',''); + element.removeAttribute('content',''); +} diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 4beda5e3e..b7ed9771c 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -1,22 +1,4 @@ -/* global $, APP, AJS, interfaceConfig */ - -import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut'; - -/** - * Associates tooltip element position (in the terms of - * {@link UIUtil#setTooltip} which do not look like CSS position) with - * AUI tooltip gravity. - */ -const TOOLTIP_POSITIONS = { - 'bottom': 'n', - 'bottom-left': 'ne', - 'bottom-right': 'nw', - 'left': 'e', - 'right': 'w', - 'top': 's', - 'top-left': 'se', - 'top-right': 'sw' -}; +/* global $, interfaceConfig */ /** * Associates the default display type with corresponding CSS class @@ -126,92 +108,6 @@ const IndicatorFontSizes = { context.putImageData(imgData, 0, 0); }, - /** - * Sets a global handler for all tooltips. Once invoked, create a new - * tooltip by merely updating a DOM node with the appropriate class (e.g. - * tooltip-n) and the attribute content. - */ - activateTooltips() { - AJS.$('[data-tooltip]').tooltip({ - gravity() { - return this.getAttribute('data-tooltip'); - }, - - title() { - return this.getAttribute('content'); - }, - - html: true, // Handle multiline tooltips. - - // The following two prevent tooltips from being stuck: - hoverable: false, // Make custom tooltips behave like native ones. - live: true // Attach listener to document element. - }); - }, - - /** - * Sets the tooltip to the given element. - * - * @param element the element to set the tooltip to - * @param key the tooltip data-i18n key - * @param position the position of the tooltip in relation to the element - */ - setTooltip(element, key, position) { - if (element) { - const selector = element.jquery ? element : $(element); - - selector.attr('data-tooltip', TOOLTIP_POSITIONS[position]); - selector.attr('data-i18n', `[content]${key}`); - - APP.translation.translateElement(selector); - } - }, - - /** - * Sets the tooltip to the given element, but instead of using translation - * key uses text value. - * - * @param element the element to set the tooltip to - * @param text the tooltip text - * @param position the position of the tooltip in relation to the element - */ - setTooltipText(element, text, position) { - if (element) { - UIUtil.removeTooltip(element); - - element.setAttribute('data-tooltip', TOOLTIP_POSITIONS[position]); - element.setAttribute('content', text); - } - }, - - /** - * Removes the tooltip to the given element. - * - * @param element the element to remove the tooltip from - */ - removeTooltip(element) { - element.removeAttribute('data-tooltip', ''); - element.removeAttribute('data-i18n',''); - element.removeAttribute('content',''); - }, - - /** - * Internal util function for generating tooltip title. - * - * @param element - * @returns {string|*} - * @private - */ - _getTooltipText(element) { - let title = element.getAttribute('content'); - let shortcut = element.getAttribute('shortcut'); - if(shortcut) { - let shortcutString = KeyboardShortcut.getShortcutTooltip(shortcut); - title += ` ${shortcutString}`; - } - return title; - }, - /** * Inserts given child element as the first one into the container. * @param container the container to which new child element will be added diff --git a/react/features/filmstrip/components/web/BaseIndicator.js b/react/features/filmstrip/components/web/BaseIndicator.js index c413c15b2..56e7392a7 100644 --- a/react/features/filmstrip/components/web/BaseIndicator.js +++ b/react/features/filmstrip/components/web/BaseIndicator.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import UIUtil from '../../../../../modules/UI/util/UIUtil'; +import { setTooltip } from '../../../../../modules/UI/util/Tooltip'; /** * React {@code Component} for showing an icon with a tooltip. @@ -116,7 +116,7 @@ class BaseIndicator extends Component { _setTooltip() { // TODO Replace UIUtil with an AtlasKit component when a suitable one // becomes available for tooltips. - UIUtil.setTooltip( + setTooltip( this._rootElement, this.props.tooltipKey, 'top' diff --git a/react/features/toolbox/actions.web.js b/react/features/toolbox/actions.web.js index 6b226f0f8..c7b61e993 100644 --- a/react/features/toolbox/actions.web.js +++ b/react/features/toolbox/actions.web.js @@ -3,7 +3,8 @@ import Recording from '../../../modules/UI/recording/Recording'; import SideContainerToggler from '../../../modules/UI/side_pannels/SideContainerToggler'; -import UIUtil from '../../../modules/UI/util/UIUtil'; + +import { removeTooltip } from '../../../modules/UI/util/Tooltip'; import UIEvents from '../../../service/UI/UIEvents'; import { @@ -226,7 +227,7 @@ export function setProfileButtonUnclickable(unclickable: boolean): Function { unclickable })); - UIUtil.removeTooltip(document.getElementById('toolbar_button_profile')); + removeTooltip(document.getElementById('toolbar_button_profile')); }; } diff --git a/react/features/toolbox/components/ToolbarButton.web.js b/react/features/toolbox/components/ToolbarButton.web.js index e639c82df..ec92cf162 100644 --- a/react/features/toolbox/components/ToolbarButton.web.js +++ b/react/features/toolbox/components/ToolbarButton.web.js @@ -4,7 +4,10 @@ import React from 'react'; import { translate } from '../../base/i18n'; -import UIUtil from '../../../../modules/UI/util/UIUtil'; +import { + setTooltip, + setTooltipText +} from '../../../../modules/UI/util/Tooltip'; import AbstractToolbarButton from './AbstractToolbarButton'; import { @@ -214,11 +217,11 @@ class ToolbarButton extends AbstractToolbarButton { if (!button.unclickable) { if (button.tooltipText) { - UIUtil.setTooltipText(this.button, + setTooltipText(this.button, button.tooltipText, tooltipPosition); } else { - UIUtil.setTooltip(this.button, + setTooltip(this.button, button.tooltipKey, tooltipPosition); }