phpbb/phpBB/adm/style/tooltip.js

/*
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
*/

(function($) { // Avoid conflicts with other libraries

"use strict";

var head_text, tooltip_mode, tooltips;
tooltips = [];

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

/**
* Enable tooltip replacements for selects
*/
function enable_tooltips_select(id, headline, sub_id) {
	var $links, 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';
	$('body').append(hold);

	if (id === null) {
		$links = $('.roles-options li');
	} else {
		$links = $('#' + id + ' .roles-options li');
	}

	$links.each(function () {
		var $this = $(this);

		if (sub_id) {
			if ($this.parent().attr('id').substr(0, sub_id.length) === sub_id) {
				prepare($this);
			}
		} else {
			prepare($this);
		}
	});

	tooltip_mode = 'select';
}

/**
* Prepare elements to replace
*/
function prepare($element) {
	var tooltip, text, desc, title;

	text = $element.attr('data-title');;

	if (text === null || text.length === 0) {
		return;
	}

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

	tooltips[$element.attr('data-id')] = tooltip;
	$element.on('mouseover', show_tooltip);
	$element.on('mouseout', hide_tooltip);

	if (tooltip_mode === 'link') {
		$element.onmousemove = locate;
	}
}

/**
* Show tooltip
*/
function show_tooltip(e) {
	var $this = $(e.target);
	$('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
	locate($this);
}

/**
* Hide tooltip
*/
function hide_tooltip(e) {
	var d = document.getElementById('_tooltip_container');
	if (d.childNodes.length > 0) {
		d.removeChild(d.firstChild);
	}
}

/**
* Set opacity on tooltip element
*/
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';
}

/**
* Create new element
*/
function create_element(tag, c) {
	var x = document.createElement(tag);
	x.className = c;
	x.style.display = 'block';
	return x;
}

/**
* Correct positioning of tooltip container
*/
function locate(e) {
	var offset;

	e = e.parent();
	offset = e.offset();

	if (tooltip_mode === 'link') {
		$('#_tooltip_container').css({
			top: offset.top + 20,
			left: offset.left - 20
		});
	} else {
		$('#_tooltip_container').css({
			top: offset.top + 30,
			left: offset.left - 205
		});
	}
}

$(function() {
	var $options;

	// Enable tooltips
	enable_tooltips_select('set-permissions', $('#set-permissions').attr('data-role-description'), 'role');

	$options = $('.roles-options li');

	// Prepare highlighting of select options and settings update
	$options.each(function () {
		$(this).on('mouseover', function (e) {
			var $this = $(this);
			$options.removeClass('roles-highlight');
			$this.addClass('roles-highlight');
		}).on('click', function (e) {
			var $this = $(this);

			// Update settings
			set_role_settings($this.attr('data-id'), $this.attr('data-target-id'));
			init_colours($this.attr('data-target-id').replace('advanced', ''));

			// Set selected setting
			$this.closest('.roles-options').children('span').text($this.text());
		});
	});
});

})(jQuery); // Avoid conflicts with other libraries