mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-07 20:08:53 +00:00
[ticket/6466] Use jQuery and custom dropdown for permission roles tooltips
PHPBB3-6466
This commit is contained in:
Marc Alexander
parent
a3d46575c7
commit
467c794b97
5 changed files with 119 additions and 71 deletions
|
|
@ -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}
|
||||
|
||||
|
|
|
|||
|
|
@ -2435,6 +2435,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
|
||||
---------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -40,7 +40,18 @@
|
|||
<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>
|
||||
<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 }}">{{ role.ROLE_NAME }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
<!-- ELSE -->
|
||||
<dd>{L_NO_ROLE_AVAILABLE}</dd>
|
||||
<!-- ENDIF -->
|
||||
|
|
|
|||
|
|
@ -10,7 +10,12 @@ phpBB Development Team:
|
|||
- further adjustements
|
||||
*/
|
||||
|
||||
var head_text, tooltip_mode;
|
||||
(function($) { // Avoid conflicts with other libraries
|
||||
|
||||
"use strict";
|
||||
|
||||
var head_text, tooltip_mode, tooltips;
|
||||
tooltips = [];
|
||||
|
||||
/**
|
||||
* Enable tooltip replacements for links
|
||||
|
|
@ -54,7 +59,7 @@ function enable_tooltips_link(id, headline, sub_id) {
|
|||
* Enable tooltip replacements for selects
|
||||
*/
|
||||
function enable_tooltips_select(id, headline, sub_id) {
|
||||
var links, i, hold;
|
||||
var $links, hold;
|
||||
|
||||
head_text = headline;
|
||||
|
||||
|
|
@ -66,24 +71,25 @@ function enable_tooltips_select(id, headline, sub_id) {
|
|||
hold.id = '_tooltip_container';
|
||||
hold.setAttribute('id', '_tooltip_container');
|
||||
hold.style.position = 'absolute';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(hold);
|
||||
$('body').append(hold);
|
||||
|
||||
if (id === null) {
|
||||
links = document.getElementsByTagName('option');
|
||||
$links = $('.roles-options li');
|
||||
} else {
|
||||
links = document.getElementById(id).getElementsByTagName('option');
|
||||
$links = $('#' + id + ' .roles-options li');
|
||||
}
|
||||
|
||||
for (i = 0; i < links.length; i++) {
|
||||
$links.each(function () {
|
||||
var $this = $(this);
|
||||
|
||||
if (sub_id) {
|
||||
if (links[i].parentNode.id.substr(0, sub_id.length) === sub_id) {
|
||||
prepare(links[i]);
|
||||
if ($this.parent().attr('id').substr(0, sub_id.length) === sub_id) {
|
||||
prepare($this);
|
||||
}
|
||||
} else {
|
||||
prepare(links[i]);
|
||||
prepare($this);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
tooltip_mode = 'select';
|
||||
}
|
||||
|
|
@ -91,16 +97,15 @@ function enable_tooltips_select(id, headline, sub_id) {
|
|||
/**
|
||||
* Prepare elements to replace
|
||||
*/
|
||||
function prepare(element) {
|
||||
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 = create_element('span', 'top');
|
||||
|
|
@ -113,12 +118,12 @@ function prepare(element) {
|
|||
|
||||
set_opacity(tooltip);
|
||||
|
||||
element.tooltip = tooltip;
|
||||
element.onmouseover = show_tooltip;
|
||||
element.onmouseout = hide_tooltip;
|
||||
tooltips[$element.attr('data-id')] = tooltip;
|
||||
$element.on('mouseover', show_tooltip);
|
||||
$element.on('mouseout', hide_tooltip);
|
||||
|
||||
if (tooltip_mode === 'link') {
|
||||
element.onmousemove = locate;
|
||||
$element.onmousemove = locate;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,8 +131,9 @@ function prepare(element) {
|
|||
* Show tooltip
|
||||
*/
|
||||
function show_tooltip(e) {
|
||||
document.getElementById('_tooltip_container').appendChild(this.tooltip);
|
||||
locate(this);
|
||||
var $this = $(e.target);
|
||||
$('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
|
||||
locate($this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -164,52 +170,49 @@ function create_element(tag, c) {
|
|||
* Correct positioning of tooltip container
|
||||
*/
|
||||
function locate(e) {
|
||||
var posx = 0;
|
||||
var posy = 0;
|
||||
var offset;
|
||||
|
||||
e = e.parentNode;
|
||||
|
||||
if (e.offsetParent) {
|
||||
for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) {
|
||||
posx += e.offsetLeft;
|
||||
posy += e.offsetTop;
|
||||
}
|
||||
} else {
|
||||
posx = e.offsetLeft;
|
||||
posy = e.offsetTop;
|
||||
}
|
||||
e = e.parent();
|
||||
offset = e.offset();
|
||||
|
||||
if (tooltip_mode === 'link') {
|
||||
document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
|
||||
document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
|
||||
$('#_tooltip_container').css({
|
||||
top: offset.top + 20,
|
||||
left: offset.left - 20
|
||||
});
|
||||
} else {
|
||||
document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
|
||||
document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
|
||||
$('#_tooltip_container').css({
|
||||
top: offset.top + 30,
|
||||
left: offset.left - 205
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
$(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
|
||||
|
|
|
|||
|
|
@ -480,6 +480,12 @@ class auth_admin extends \phpbb\auth\auth
|
|||
|
||||
$title = ($role_description) ? ' title="' . $role_description . '"' : '';
|
||||
$s_role_options .= '<option value="' . $role_id . '"' . (($role_id == $current_role_id) ? ' selected="selected"' : '') . $title . '>' . $role_name . '</option>';
|
||||
$template->assign_block_vars('role_options', array(
|
||||
'ID' => $role_id,
|
||||
'ROLE_NAME' => $role_name,
|
||||
'TITLE' => $role_description,
|
||||
'SELECTED' => $role_id == $current_role_id,
|
||||
));
|
||||
}
|
||||
|
||||
if ($s_role_options)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue