ref(UIUtil): Move all tooltip functions into another file
This commit is contained in:
parent
fe59084979
commit
91e75bf7b9
|
@ -11,6 +11,7 @@ import SideContainerToggler from "./side_pannels/SideContainerToggler";
|
||||||
import JitsiPopover from "./util/JitsiPopover";
|
import JitsiPopover from "./util/JitsiPopover";
|
||||||
import messageHandler from "./util/MessageHandler";
|
import messageHandler from "./util/MessageHandler";
|
||||||
import UIUtil from "./util/UIUtil";
|
import UIUtil from "./util/UIUtil";
|
||||||
|
import { activateTooltips } from './util/Tooltip';
|
||||||
import UIEvents from "../../service/UI/UIEvents";
|
import UIEvents from "../../service/UI/UIEvents";
|
||||||
import EtherpadManager from './etherpad/Etherpad';
|
import EtherpadManager from './etherpad/Etherpad';
|
||||||
import SharedVideoManager from './shared_video/SharedVideo';
|
import SharedVideoManager from './shared_video/SharedVideo';
|
||||||
|
@ -232,7 +233,7 @@ UI.initConference = function () {
|
||||||
// (2) APP.conference as means of communication between the participants.
|
// (2) APP.conference as means of communication between the participants.
|
||||||
followMeHandler = new FollowMe(APP.conference, UI);
|
followMeHandler = new FollowMe(APP.conference, UI);
|
||||||
|
|
||||||
UIUtil.activateTooltips();
|
activateTooltips();
|
||||||
};
|
};
|
||||||
|
|
||||||
UI.mucJoined = function () {
|
UI.mucJoined = function () {
|
||||||
|
|
|
@ -18,6 +18,7 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
|
||||||
|
|
||||||
import UIEvents from "../../../service/UI/UIEvents";
|
import UIEvents from "../../../service/UI/UIEvents";
|
||||||
import UIUtil from '../util/UIUtil';
|
import UIUtil from '../util/UIUtil';
|
||||||
|
import { setTooltip } from '../util/Tooltip';
|
||||||
import VideoLayout from '../videolayout/VideoLayout';
|
import VideoLayout from '../videolayout/VideoLayout';
|
||||||
|
|
||||||
import { setToolboxEnabled } from '../../../react/features/toolbox';
|
import { setToolboxEnabled } from '../../../react/features/toolbox';
|
||||||
|
@ -323,7 +324,7 @@ var Recording = {
|
||||||
initRecordingButton() {
|
initRecordingButton() {
|
||||||
const selector = $('#toolbar_button_record');
|
const selector = $('#toolbar_button_record');
|
||||||
|
|
||||||
UIUtil.setTooltip(selector, 'liveStreaming.buttonTooltip', 'right');
|
setTooltip(selector, 'liveStreaming.buttonTooltip', 'right');
|
||||||
|
|
||||||
selector.addClass(this.baseClass);
|
selector.addClass(this.baseClass);
|
||||||
selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
|
selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
|
||||||
|
|
|
@ -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','');
|
||||||
|
}
|
|
@ -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
|
* Associates the default display type with corresponding CSS class
|
||||||
|
@ -126,92 +108,6 @@ const IndicatorFontSizes = {
|
||||||
context.putImageData(imgData, 0, 0);
|
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.
|
* Inserts given child element as the first one into the container.
|
||||||
* @param container the container to which new child element will be added
|
* @param container the container to which new child element will be added
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
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.
|
* React {@code Component} for showing an icon with a tooltip.
|
||||||
|
@ -116,7 +116,7 @@ class BaseIndicator extends Component {
|
||||||
_setTooltip() {
|
_setTooltip() {
|
||||||
// TODO Replace UIUtil with an AtlasKit component when a suitable one
|
// TODO Replace UIUtil with an AtlasKit component when a suitable one
|
||||||
// becomes available for tooltips.
|
// becomes available for tooltips.
|
||||||
UIUtil.setTooltip(
|
setTooltip(
|
||||||
this._rootElement,
|
this._rootElement,
|
||||||
this.props.tooltipKey,
|
this.props.tooltipKey,
|
||||||
'top'
|
'top'
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
import Recording from '../../../modules/UI/recording/Recording';
|
import Recording from '../../../modules/UI/recording/Recording';
|
||||||
import SideContainerToggler
|
import SideContainerToggler
|
||||||
from '../../../modules/UI/side_pannels/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 UIEvents from '../../../service/UI/UIEvents';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -226,7 +227,7 @@ export function setProfileButtonUnclickable(unclickable: boolean): Function {
|
||||||
unclickable
|
unclickable
|
||||||
}));
|
}));
|
||||||
|
|
||||||
UIUtil.removeTooltip(document.getElementById('toolbar_button_profile'));
|
removeTooltip(document.getElementById('toolbar_button_profile'));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,10 @@ import React from 'react';
|
||||||
|
|
||||||
import { translate } from '../../base/i18n';
|
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 AbstractToolbarButton from './AbstractToolbarButton';
|
||||||
import {
|
import {
|
||||||
|
@ -214,11 +217,11 @@ class ToolbarButton extends AbstractToolbarButton {
|
||||||
|
|
||||||
if (!button.unclickable) {
|
if (!button.unclickable) {
|
||||||
if (button.tooltipText) {
|
if (button.tooltipText) {
|
||||||
UIUtil.setTooltipText(this.button,
|
setTooltipText(this.button,
|
||||||
button.tooltipText,
|
button.tooltipText,
|
||||||
tooltipPosition);
|
tooltipPosition);
|
||||||
} else {
|
} else {
|
||||||
UIUtil.setTooltip(this.button,
|
setTooltip(this.button,
|
||||||
button.tooltipKey,
|
button.tooltipKey,
|
||||||
tooltipPosition);
|
tooltipPosition);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue