ref(UIUtil): Move all tooltip functions into another file

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 () {

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);

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 <tt>position</tt>) with
+ * AUI tooltip <tt>gravity</tt>.
+ */
+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.
+ * <tt>tooltip-n</tt>) and the attribute <tt>content</tt>.
+ */
+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','');
+}

modules/UI/util/UIUtil.js

@@ -1,22 +1,4 @@
-/* global $, APP, AJS, interfaceConfig */
+/* global $, interfaceConfig */
-
-import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
-
-/**
- * Associates tooltip element position (in the terms of
- * {@link UIUtil#setTooltip} which do not look like CSS <tt>position</tt>) with
- * AUI tooltip <tt>gravity</tt>.
- */
-const TOOLTIP_POSITIONS = {
-    'bottom': 'n',
-    'bottom-left': 'ne',
-    'bottom-right': 'nw',
-    'left': 'e',
-    'right': 'w',
-    'top': 's',
-    'top-left': 'se',
-    'top-right': 'sw'
-};
 
 /**
  * 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.
-     * <tt>tooltip-n</tt>) and the attribute <tt>content</tt>.
-     */
-    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

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'

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'));
     };
 }
 

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);
                 }