Global handler for tooltips
This commit is contained in:
parent
c437f64f35
commit
212798ad19
|
@ -329,6 +329,8 @@ UI.initConference = function () {
|
|||
// to the UI (depending on the moderator role of the local participant) and
|
||||
// (2) APP.conference as means of communication between the participants.
|
||||
followMeHandler = new FollowMe(APP.conference, UI);
|
||||
|
||||
UIUtil.activateTooltips();
|
||||
};
|
||||
|
||||
UI.mucJoined = function () {
|
||||
|
|
|
@ -84,6 +84,39 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
|
|||
context.putImageData(imgData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets global handler for all tooltips. Once this function is invoked
|
||||
* all you need to create new tooltip is to update DOM node with
|
||||
* appropriate class (ex. "tooltip-n") and "content" attribute.
|
||||
*/
|
||||
activateTooltips: function () {
|
||||
var positions = [
|
||||
{side: 'top', gravity: 's'},
|
||||
{side: 'left', gravity: 'e'},
|
||||
{side: 'right', gravity: 'w'},
|
||||
{side: 'bottom', gravity: 'n'},
|
||||
{side: 'top-left', gravity: 'se'},
|
||||
{side: 'top-right', gravity: 'sw'},
|
||||
{side: 'bottom-left', gravity: 'ne'},
|
||||
{side: 'bottom-right', gravity: 'nw'}
|
||||
];
|
||||
|
||||
function getTitle () {
|
||||
return this.getAttribute('content');
|
||||
}
|
||||
|
||||
positions.forEach(function (config) {
|
||||
AJS.$('.tooltip-' + config.gravity).tooltip({
|
||||
gravity: config.gravity,
|
||||
title: getTitle,
|
||||
html: true, // handle multiline tooltips
|
||||
// two options to prevent tooltips from being stuck:
|
||||
live: true, // attach listener to document element
|
||||
hoverable: false // make custom tooltips to behave like native
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the tooltip to the given element.
|
||||
*
|
||||
|
@ -103,13 +136,13 @@ import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
|
|||
'top-right': 'sw'
|
||||
};
|
||||
|
||||
element.setAttribute("data-i18n", "[content]" + key);
|
||||
APP.translation.translateElement($(element));
|
||||
$(element).each(function () {
|
||||
var el = $(this);
|
||||
|
||||
AJS.$(element).tooltip({
|
||||
gravity: positions[position],
|
||||
title: this._getTooltipText.bind(this, element),
|
||||
html: true
|
||||
el.addClass('tooltip-' + positions[position])
|
||||
.attr("data-i18n", "[content]" + key);
|
||||
|
||||
APP.translation.translateElement(el);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue