mirror of
https://github.com/phpbb/phpbb.git
synced 2025-07-30 21:40:43 +02:00
say hello to role descriptions, role ordering and tooltips on role selects
git-svn-id: file:///svn/phpbb/trunk@5791 89ea8834-ac86-4346-8a33-228a782c2dd0
This commit is contained in:
223
phpBB/adm/style/tooltip.js
Normal file
223
phpBB/adm/style/tooltip.js
Normal file
@@ -0,0 +1,223 @@
|
||||
/*
|
||||
javascript for Bubble Tooltips by Alessandro Fulciniti
|
||||
- http://pro.html.it - http://web-graphics.com
|
||||
obtained from: http://web-graphics.com/mtarchive/001717.php
|
||||
|
||||
phpBB Development Team:
|
||||
- modified to adhere to our coding guidelines
|
||||
- integration into our design
|
||||
- added ability to perform tooltips on select elements
|
||||
- further adjustements
|
||||
*/
|
||||
|
||||
var head_text, tooltip_mode;
|
||||
|
||||
/**
|
||||
* Enable tooltip replacements for links
|
||||
*/
|
||||
function enable_tooltips_link(id, headline, sub_id)
|
||||
{
|
||||
var links, i, hold;
|
||||
|
||||
head_text = headline;
|
||||
|
||||
if (!document.getElementById || !document.getElementsByTagName)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
hold = document.createElement('span');
|
||||
hold.id = '_tooltip_container';
|
||||
hold.setAttribute('id', '_tooltip_container');
|
||||
hold.style.position = 'absolute';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(hold);
|
||||
|
||||
if (id == null)
|
||||
{
|
||||
links = document.getElementsByTagName('a');
|
||||
}
|
||||
else
|
||||
{
|
||||
links = document.getElementById(id).getElementsByTagName('a');
|
||||
}
|
||||
|
||||
for (i = 0; i < links.length; i++)
|
||||
{
|
||||
if (sub_id)
|
||||
{
|
||||
if (links[i].id.substr(0, sub_id.length) == sub_id)
|
||||
{
|
||||
prepare(links[i]);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
prepare(links[i]);
|
||||
}
|
||||
}
|
||||
|
||||
tooltip_mode = 'link';
|
||||
}
|
||||
|
||||
function enable_tooltips_select(id, headline, sub_id)
|
||||
{
|
||||
var links, i, hold;
|
||||
|
||||
head_text = headline;
|
||||
|
||||
if (!document.getElementById || !document.getElementsByTagName)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
hold = document.createElement('span');
|
||||
hold.id = '_tooltip_container';
|
||||
hold.setAttribute('id', '_tooltip_container');
|
||||
hold.style.position = 'absolute';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(hold);
|
||||
|
||||
if (id == null)
|
||||
{
|
||||
links = document.getElementsByTagName('option');
|
||||
}
|
||||
else
|
||||
{
|
||||
links = document.getElementById(id).getElementsByTagName('option');
|
||||
}
|
||||
|
||||
for (i = 0; i < links.length; i++)
|
||||
{
|
||||
if (sub_id)
|
||||
{
|
||||
if (links[i].parentNode.id.substr(0, sub_id.length) == sub_id)
|
||||
{
|
||||
prepare(links[i]);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
prepare(links[i]);
|
||||
}
|
||||
}
|
||||
|
||||
tooltip_mode = 'select';
|
||||
}
|
||||
|
||||
function prepare(element)
|
||||
{
|
||||
var tooltip, text, desc, title;
|
||||
|
||||
text = element.getAttribute('title');
|
||||
|
||||
if (text == null || text.length == 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
element.removeAttribute('title');
|
||||
tooltip = create_element('span', 'tooltip');
|
||||
|
||||
title = create_element('span', 'top');
|
||||
title.appendChild(document.createTextNode(head_text));
|
||||
tooltip.appendChild(title);
|
||||
|
||||
desc = create_element('span', 'bottom');
|
||||
desc.innerHTML = text;
|
||||
tooltip.appendChild(desc);
|
||||
|
||||
set_opacity(tooltip);
|
||||
|
||||
element.tooltip = tooltip;
|
||||
element.onmouseover = show_tooltip;
|
||||
element.onmouseout = hide_tooltip;
|
||||
}
|
||||
|
||||
function show_tooltip(e)
|
||||
{
|
||||
document.getElementById('_tooltip_container').appendChild(this.tooltip);
|
||||
locate(this);
|
||||
}
|
||||
|
||||
function hide_tooltip(e)
|
||||
{
|
||||
var d = document.getElementById('_tooltip_container');
|
||||
if (d.childNodes.length > 0)
|
||||
{
|
||||
d.removeChild(d.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
function set_opacity(element)
|
||||
{
|
||||
element.style.filter = 'alpha(opacity:95)';
|
||||
element.style.KHTMLOpacity = '0.95';
|
||||
element.style.MozOpacity = '0.95';
|
||||
element.style.opacity = '0.95';
|
||||
}
|
||||
|
||||
function create_element(tag, c)
|
||||
{
|
||||
var x = document.createElement(tag);
|
||||
x.className = c;
|
||||
x.style.display = 'block';
|
||||
return x;
|
||||
}
|
||||
|
||||
function locate(e)
|
||||
{
|
||||
var posx = 0;
|
||||
var posy = 0;
|
||||
|
||||
if (tooltip_mode == 'link')
|
||||
{
|
||||
if (e == null)
|
||||
{
|
||||
e = window.event;
|
||||
}
|
||||
|
||||
if (e.pageX || e.pageY)
|
||||
{
|
||||
posx = e.pageX;
|
||||
posy = e.pageY;
|
||||
}
|
||||
else if (e.clientX || e.clientY)
|
||||
{
|
||||
if (document.documentElement.scrollTop)
|
||||
{
|
||||
posx = e.clientX+document.documentElement.scrollLeft;
|
||||
posy = e.clientY+document.documentElement.scrollTop;
|
||||
}
|
||||
else
|
||||
{
|
||||
posx = e.clientX+document.body.scrollLeft;
|
||||
posy = e.clientY+document.body.scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('_tooltip_container').style.top=(posy+10) + 'px';
|
||||
document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
|
||||
}
|
||||
else
|
||||
{
|
||||
e = e.parentNode;
|
||||
|
||||
if (e.offsetParent)
|
||||
{
|
||||
for (var posx = 0, posy = 0; e.offsetParent; e = e.offsetParent)
|
||||
{
|
||||
posx += e.offsetLeft;
|
||||
posy += e.offsetTop;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
posx = e.offsetLeft;
|
||||
posy = e.offsetTop;
|
||||
}
|
||||
|
||||
document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
|
||||
document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user