haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
hristoterezov 2017-07-26 16:00:10 -05:00 committed by virtuacoplenny
parent fe59084979
commit 91e75bf7b9
7 changed files with 102 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/UI/UI.js
View File

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

3
modules/UI/recording/Recording.js
View File

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

86
modules/UI/util/Tooltip.js Normal file
View File

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

106
modules/UI/util/UIUtil.js
View File

@ -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 <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'
};
/* 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.
* <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

4
react/features/filmstrip/components/web/BaseIndicator.js
View File

@ -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'

5
react/features/toolbox/actions.web.js
View File

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

9
react/features/toolbox/components/ToolbarButton.web.js
View File

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