Merge pull request #3661 from marc1706/ticket/6466

[ticket/6466] Use jQuery and custom dropdown for permission roles tooltips

phpBB/adm/style/acp_permissions.html

@@ -327,14 +327,9 @@
 	<br class="responsive-hide" /><br class="responsive-hide" />
 
 	<!-- include tooltip file -->
-	<script type="text/javascript" src="style/tooltip.js"></script>
-	<script type="text/javascript">
-	// <![CDATA[
-		window.onload = function(){enable_tooltips_select('set-permissions', '{LA_ROLE_DESCRIPTION}', 'role')};
-	// ]]>
-	</script>
+	<!-- INCLUDEJS tooltip.js -->
 
-	<form id="set-permissions" method="post" action="{U_ACTION}">
+	<form id="set-permissions" method="post" action="{U_ACTION}" data-role-description="{L_ROLE_DESCRIPTION}">
 
 	{S_HIDDEN_FIELDS}
 

phpBB/adm/style/admin.css

@@ -1858,6 +1858,7 @@ li.pagination ul {
 	color: #000;
 	text-align: center;
 	border: 1px solid #AAA;
+	opacity: .95;
 }
 
 .tooltip span.top {
@@ -2435,6 +2436,39 @@ fieldset.permissions .padding {
 	display: none !important;
 }
 
+.roles-options > .dropdown {
+	left: auto;
+	top: 3em;
+	width: 250px;
+}
+
+.roles-options {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+	width: 250px;
+}
+
+.roles-options > span {
+	border: 1px solid #DEDEDE;
+	border-radius: 3px;
+	padding: 4px;
+	width: 250px;
+	display: block;
+	background: url('../images/arrow_down.gif') no-repeat 245px .7em;
+}
+
+.roles-options li {
+	list-style: none;
+}
+
+.roles-highlight {
+	background-color: #1e90ff;
+	color: #fff;
+}
+
 
 /* Classes for additional tasks
 ---------------------------------------- */

phpBB/adm/style/permission_mask.html

@@ -39,11 +39,23 @@
 		</div>
 		<dl class="permissions-simple">
 			<dt style="width: 20%"><label for="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}">{L_ROLE}{L_COLON}</label></dt>
-			<!-- IF p_mask.f_mask.S_ROLE_OPTIONS -->
-				<dd style="margin-{S_CONTENT_FLOW_BEGIN}{L_COLON} 20%"><select id="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" name="role[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]" onchange="set_role_settings(this.options[selectedIndex].value, 'advanced{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}'); init_colours('{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}')">{p_mask.f_mask.S_ROLE_OPTIONS}</select></dd>
-			<!-- ELSE -->
+			{% if role_options %}
+				<dd style="margin-{S_CONTENT_FLOW_BEGIN}{L_COLON} 20%">
+					<div class="dropdown-container dropdown-button-control roles-options" data-alt-text="{LA_ROLE_DESCRIPTION}">
+						<span title="Roles" class="button icon-button tools-icon dropdown-trigger dropdown-select">{L_NO_ROLE_ASSIGNED}</span>
+						<div class="dropdown hidden">
+							<ul class="dropdown-contents" id="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" >
+								{% for role in loops.role_options %}
+									<li data-id="{{ role.ID }}" data-target-id="advanced{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" data-title="{{ role.TITLE }}"{% if role.SELECTED == true %} data-selected="{{ role.SELECTED }}"{% endif %}>{{ role.ROLE_NAME }}</li>
+								{% endfor %}
+							</ul>
+						</div>
+						<input type="hidden" name="role[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]"{% if S_ROLE_ID %}value="{{ S_ROLE_ID }}"{% endif %} />
+					</div>
+				</dd>
+			{% else %}
 				<dd>{L_NO_ROLE_AVAILABLE}</dd>
-			<!-- ENDIF -->
+			{% endif %}
 		</dl>
 	<!-- ENDIF -->
 

phpBB/adm/style/tooltip.js

@@ -10,206 +10,196 @@ phpBB Development Team:
 	- further adjustements
 */
 
-var head_text, tooltip_mode;
+(function($) { // Avoid conflicts with other libraries
+
+'use strict';
+
+var tooltips = [];
 
 /**
-* Enable tooltip replacements for links
+ * 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)
 */
-function enable_tooltips_link(id, headline, sub_id) {
-	var links, i, hold;
+phpbb.enableTooltipsSelect = function (id, headline, subId) {
+	var $links, hold;
 
-	head_text = headline;
+	hold = $('<span />', {
+		id:		'_tooltip_container',
+		css: {
+			position: 'absolute'
+		}
+	});
 
-	if (!document.getElementById || !document.getElementsByTagName) {
-		return;
-	}
+	$('body').append(hold);
 
-	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');
+	if (!id) {
+		$links = $('.roles-options li');
 	} else {
-		links = document.getElementById(id).getElementsByTagName('a');
+		$links = $('.roles-options li', '#' + id);
 	}
 
-	for (i = 0; i < links.length; i++) {
-		if (sub_id) {
-			if (links[i].id.substr(0, sub_id.length) === sub_id) {
-				prepare(links[i]);
+	$links.each(function () {
+		var $this = $(this);
+
+		if (subId) {
+			if ($this.parent().attr('id').substr(0, subId.length) === subId) {
+				phpbb.prepareTooltips($this, headline);
 			}
 		} else {
-			prepare(links[i]);
+			phpbb.prepareTooltips($this, headline);
 		}
-	}
-
-	tooltip_mode = 'link';
-}
+	});
+};
 
 /**
-* Enable tooltip replacements for selects
+ * Prepare elements to replace
+ *
+ * @param {jQuery} $element Element to prepare for tooltips
+ * @param {string} headText Text heading to display
 */
-function enable_tooltips_select(id, headline, sub_id) {
-	var links, i, hold;
+phpbb.prepareTooltips = function ($element, headText) {
+	var $tooltip, text, $desc, $title;
 
-	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';
-}
-
-/**
-* Prepare elements to replace
-*/
-function prepare(element) {
-	var tooltip, text, desc, title;
-
-	text = element.getAttribute('title');
+	text = $element.attr('data-title');
 
 	if (text === null || text.length === 0) {
 		return;
 	}
 
-	element.removeAttribute('title');
-	tooltip = create_element('span', 'tooltip');
+	$title = $('<span />', {
+		class: 'top',
+		css: {
+			display:	'block'
+		}
+	})
+		.append(document.createTextNode(headText));
 
-	title = create_element('span', 'top');
-	title.appendChild(document.createTextNode(head_text));
-	tooltip.appendChild(title);
+	$desc = $('<span />', {
+		class: 'bottom',
+		html: text,
+		css: {
+			display: 'block'
+		}
+	});
 
-	desc = create_element('span', 'bottom');
-	desc.innerHTML = text;
-	tooltip.appendChild(desc);
+	$tooltip = $('<span />', {
+		class: 'tooltip',
+		css: {
+			display: 'block'
+		}
+	})
+		.append($title)
+		.append($desc);
 
-	set_opacity(tooltip);
-
-	element.tooltip = tooltip;
-	element.onmouseover = show_tooltip;
-	element.onmouseout = hide_tooltip;
-
-	if (tooltip_mode === 'link') {
-		element.onmousemove = locate;
-	}
-}
+	tooltips[$element.attr('data-id')] = $tooltip;
+	$element.on('mouseover', phpbb.showTooltip);
+	$element.on('mouseout', phpbb.hideTooltip);
+};
 
 /**
-* Show tooltip
+ * Show tooltip
+ *
+ * @param {object} $element Element passed by .on()
 */
-function show_tooltip(e) {
-	document.getElementById('_tooltip_container').appendChild(this.tooltip);
-	locate(this);
-}
+phpbb.showTooltip = function ($element) {
+	var $this = $($element.target);
+	$('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
+	phpbb.positionTooltip($this);
+};
 
 /**
-* Hide tooltip
+ * Hide tooltip
 */
-function hide_tooltip(e) {
+phpbb.hideTooltip = function () {
 	var d = document.getElementById('_tooltip_container');
 	if (d.childNodes.length > 0) {
 		d.removeChild(d.firstChild);
 	}
-}
+};
 
 /**
-* Set opacity on tooltip element
+ * Correct positioning of tooltip container
+ *
+ * @param {jQuery} $element Tooltip element that should be positioned
 */
-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';
-}
+phpbb.positionTooltip = function ($element) {
+	var offset;
+
+	$element = $element.parent();
+	offset = $element.offset();
+
+	$('#_tooltip_container').css({
+		top: offset.top + 30,
+		left: offset.left - 205
+	});
+};
 
 /**
-* Create new element
-*/
-function create_element(tag, c) {
-	var x = document.createElement(tag);
-	x.className = c;
-	x.style.display = 'block';
-	return x;
-}
+ * Prepare roles drop down select
+ */
+phpbb.prepareRolesDropdown = function () {
+	var $options = $('.roles-options li');
+	var $rolesOptions = $options.closest('.roles-options');
+	var $span = $rolesOptions.children('span');
 
-/**
-* Correct positioning of tooltip container
-*/
-function locate(e) {
-	var posx = 0;
-	var posy = 0;
+	// Prepare highlighting of select options and settings update
+	$options.each(function () {
+		var $this = $(this);
 
-	e = e.parentNode;
-
-	if (e.offsetParent) {
-		for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) {
-			posx += e.offsetLeft;
-			posy += e.offsetTop;
+		// Correctly show selected option
+		if (typeof $this.attr('data-selected') !== 'undefined') {
+			$rolesOptions.closest('.roles-options')
+				.children('span')
+				.text($this.text())
+				.attr('data-default', $this.text())
+				.attr('data-default-val', $this.attr('data-id'));
 		}
-	} else {
-		posx = e.offsetLeft;
-		posy = e.offsetTop;
+
+		$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');
+		});
+	});
+
+	// Save default text of drop down if there is no default set yet
+	if (typeof $span.attr('data-default') === 'undefined') {
+		$span.attr('data-default', $span.text());
 	}
 
-	if (tooltip_mode === 'link') {
-		document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
-		document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
-	} else {
-		document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
-		document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
-	}
+	// Prepare resetting drop down on form reset
+	$options.closest('form').on('reset', function () {
+		$span.text($span.attr('data-default'));
+		$rolesOptions.children('input[type=hidden]')
+			.val($span.attr('data-id'));
+	});
 
-/*
-	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;
-		}
-	}
-*/
-}
+// 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

phpBB/includes/acp/auth.php

@@ -470,7 +470,8 @@ class auth_admin extends \phpbb\auth\auth
 					// Build role dropdown options
 					$current_role_id = (isset($cur_roles[$ug_id][$forum_id])) ? $cur_roles[$ug_id][$forum_id] : 0;
 
-					$s_role_options = '';
+					// Output current role id to template
+					$template->assign_var('S_ROLE_ID', $current_role_id);
 
 					@reset($roles);
 					while (list($role_id, $role_row) = each($roles))
@@ -478,13 +479,12 @@ class auth_admin extends \phpbb\auth\auth
 						$role_description = (!empty($user->lang[$role_row['role_description']])) ? $user->lang[$role_row['role_description']] : nl2br($role_row['role_description']);
 						$role_name = (!empty($user->lang[$role_row['role_name']])) ? $user->lang[$role_row['role_name']] : $role_row['role_name'];
 
-						$title = ($role_description) ? ' title="' . $role_description . '"' : '';
-						$s_role_options .= '<option value="' . $role_id . '"' . (($role_id == $current_role_id) ? ' selected="selected"' : '') . $title . '>' . $role_name . '</option>';
-					}
-
-					if ($s_role_options)
-					{
-						$s_role_options = '<option value="0"' . ((!$current_role_id) ? ' selected="selected"' : '') . ' title="' . htmlspecialchars($user->lang['NO_ROLE_ASSIGNED_EXPLAIN']) . '">' . $user->lang['NO_ROLE_ASSIGNED'] . '</option>' . $s_role_options;
+						$template->assign_block_vars('role_options', array(
+							'ID'	=> $role_id,
+							'ROLE_NAME'	=> $role_name,
+							'TITLE'		=> $role_description,
+							'SELECTED'	=> $role_id == $current_role_id,
+						));
 					}
 
 					if (!$current_role_id && $mode != 'view')
@@ -507,7 +507,6 @@ class auth_admin extends \phpbb\auth\auth
 
 					$template->assign_block_vars($tpl_pmask . '.' . $tpl_fmask, array(
 						'NAME'				=> $ug_names_ary[$ug_id],
-						'S_ROLE_OPTIONS'	=> $s_role_options,
 						'UG_ID'				=> $ug_id,
 						'S_CUSTOM'			=> $s_custom_permissions,
 						'FORUM_ID'			=> $forum_id)
@@ -556,7 +555,8 @@ class auth_admin extends \phpbb\auth\auth
 					// Build role dropdown options
 					$current_role_id = (isset($cur_roles[$ug_id][$forum_id])) ? $cur_roles[$ug_id][$forum_id] : 0;
 
-					$s_role_options = '';
+					// Output current role id to template
+					$template->assign_var('S_ROLE_ID', $current_role_id);
 
 					@reset($roles);
 					while (list($role_id, $role_row) = each($roles))
@@ -564,13 +564,12 @@ class auth_admin extends \phpbb\auth\auth
 						$role_description = (!empty($user->lang[$role_row['role_description']])) ? $user->lang[$role_row['role_description']] : nl2br($role_row['role_description']);
 						$role_name = (!empty($user->lang[$role_row['role_name']])) ? $user->lang[$role_row['role_name']] : $role_row['role_name'];
 
-						$title = ($role_description) ? ' title="' . $role_description . '"' : '';
-						$s_role_options .= '<option value="' . $role_id . '"' . (($role_id == $current_role_id) ? ' selected="selected"' : '') . $title . '>' . $role_name . '</option>';
-					}
-
-					if ($s_role_options)
-					{
-						$s_role_options = '<option value="0"' . ((!$current_role_id) ? ' selected="selected"' : '') . ' title="' . htmlspecialchars($user->lang['NO_ROLE_ASSIGNED_EXPLAIN']) . '">' . $user->lang['NO_ROLE_ASSIGNED'] . '</option>' . $s_role_options;
+						$template->assign_block_vars('role_options', array(
+							'ID'	=> $role_id,
+							'ROLE_NAME'	=> $role_name,
+							'TITLE'		=> $role_description,
+							'SELECTED'	=> $role_id == $current_role_id,
+						));
 					}
 
 					if (!$current_role_id && $mode != 'view')
@@ -594,7 +593,6 @@ class auth_admin extends \phpbb\auth\auth
 					$template->assign_block_vars($tpl_pmask . '.' . $tpl_fmask, array(
 						'NAME'				=> ($forum_id == 0) ? $forum_names_ary[0] : $forum_names_ary[$forum_id]['forum_name'],
 						'PADDING'			=> ($forum_id == 0) ? '' : $forum_names_ary[$forum_id]['padding'],
-						'S_ROLE_OPTIONS'	=> $s_role_options,
 						'S_CUSTOM'			=> $s_custom_permissions,
 						'UG_ID'				=> $ug_id,
 						'FORUM_ID'			=> $forum_id)