/* 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 tooltips = []; /** * Enable tooltip replacements for selects * @param {string} id ID tag of select * @param {string} headline Text that should appear on top of tooltip * @param {string} subId Sub ID that should only be using tooltips (optional) */ phpbb.enableTooltipsSelect = function (id, headline, subId) { var $links, hold; hold = document.createElement('span'); hold.id = '_tooltip_container'; hold.setAttribute('id', '_tooltip_container'); hold.style.position = 'absolute'; $('body').append(hold); if (!id) { $links = $('.roles-options li'); } else { $links = $('.roles-options li', '#' + id); } $links.each(function () { var $this = $(this); if (subId) { if ($this.parent().attr('id').substr(0, subId.length) === subId) { phpbb.prepareTooltips($this, headline); } } else { phpbb.prepareTooltips($this, headline); } }); }; /** * Prepare elements to replace * * @param {object} $element Element to prepare for tooltips * @param {string} headText Text heading to display */ phpbb.prepareTooltips = function ($element, headText) { var tooltip, text, desc, title; text = $element.attr('data-title'); if (text === null || text.length === 0) { return; } title = phpbb.createElement('span', 'top'); title.appendChild(document.createTextNode(headText)); desc = phpbb.createElement('span', 'bottom'); desc.innerHTML = text; tooltip = phpbb.createElement('span', 'tooltip'); tooltip.appendChild(title); tooltip.appendChild(desc); tooltips[$element.attr('data-id')] = tooltip; $element.on('mouseover', phpbb.showTooltip); $element.on('mouseout', phpbb.hideTooltip); }; /** * Show tooltip * * @param {object} $element Element passed by .on() */ phpbb.showTooltip = function ($element) { var $this = $($element.target); $('#_tooltip_container').append(tooltips[$this.attr('data-id')]); phpbb.positionTooltip($this); }; /** * Hide tooltip */ phpbb.hideTooltip = function () { var d = document.getElementById('_tooltip_container'); if (d.childNodes.length > 0) { d.removeChild(d.firstChild); } }; /** * Create new element * * @param {string} tag HTML tag * @param {string} c Element's class * * @return {object} Created element */ phpbb.createElement = function (tag, c) { var x = document.createElement(tag); x.className = c; x.style.display = 'block'; return x; }; /** * Correct positioning of tooltip container * * @param {object} $element Tooltip element that should be positioned */ phpbb.positionTooltip = function ($element) { var offset; $element = $element.parent(); offset = $element.offset(); $('#_tooltip_container').css({ top: offset.top + 30, left: offset.left - 205 }); }; /** * Prepare roles drop down select */ phpbb.prepareRolesDropdown = function () { var $options = $('.roles-options li'); // Prepare highlighting of select options and settings update $options.each(function () { var $this = $(this); var $rolesOptions = $this.closest('.roles-options'); // Correctly show selected option if (typeof $this.attr('data-selected') !== 'undefined') { $this.closest('.roles-options').children('span').text($this.text()); } $this.on('mouseover', function () { var $this = $(this); $options.removeClass('roles-highlight'); $this.addClass('roles-highlight'); }).on('click', function () { 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 $rolesOptions.children('span').text($this.text()); $rolesOptions.children('input[type=hidden]').val($this.attr('data-id')); // Trigger hiding of selection options $('body').trigger('click'); }); }); }; // Run onload functions for RolesDropdown and tooltips $(function() { // Enable tooltips phpbb.enableTooltipsSelect('set-permissions', $('#set-permissions').attr('data-role-description'), 'role'); // Prepare dropdown phpbb.prepareRolesDropdown(); }); })(jQuery); // Avoid conflicts with other libraries