makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 06:08:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/11956] Reusable dropdown handler

Browse source 
Replace dropdown menu code with reusable handler that
is shared between all types of dropdown menus and can
be used by custom menus by extensions.

PHPBB3-11956
This commit is contained in:
Vjacheslav Trushkin 2013-10-23 22:53:10 +03:00
parent 6f97367ef0
commit 016958ea5e
5 changed files with 249 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
phpBB/styles/prosilver/template/forum_fn.js
View file

@ -409,6 +409,83 @@ function insert_single_user(formId, user)
self.close(); self.close();
} }
/**
* Dropdown handler
* Shows/hides dropdown, decides which side to open to
*
* @param [jQuery] toggle Link that toggles dropdown
* @param [jQuery] dropdown Dropdown menu
* @param [Object] [options] List of options
*/
function toggle_dropdown()
{
var $this = $(this),
options = $this.data('dropdown-options'),
parent = options.parent,
visible = parent.hasClass('dropdown-visible');
if (!visible) {
// Hide other dropdown menus
$('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown);
// Figure out direction of dropdown
var direction = options.direction,
verticalDirection = options.verticalDirection,
offset = $this.offset();
if (direction == 'auto') {
if (($(window).width() - $this.outerWidth(true)) / 2 > offset.left) {
direction = 'right';
}
else {
direction = 'left';
}
}
parent.toggleClass(options.leftClass, direction == 'left').toggleClass(options.rightClass, direction == 'right');
if (verticalDirection == 'auto') {
var height = $(window).height(),
top = offset.top - $(window).scrollTop();
if (top < height * 0.7) {
verticalDirection = 'down';
}
else {
verticalDirection = 'up';
}
}
parent.toggleClass(options.upClass, verticalDirection == 'up').toggleClass(options.downClass, verticalDirection == 'down');
}
options.dropdown.toggle();
parent.toggleClass(options.visibleClass, !visible).toggleClass('dropdown-visible', !visible);
}
function register_dropdown(toggle, dropdown, options)
{
var ops = {
parent: toggle.parent(), // Parent item to add classes to
direction: 'auto', // Direction of dropdown menu. Possible values: auto, left, right
verticalDirection: 'auto', // Vertical direction. Possible values: auto, up, down
visibleClass: 'visible', // Class to add to parent item when dropdown is visible
leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side
rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side
upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item
downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item
};
if (options) {
ops = $.extend(ops, options);
}
ops.dropdown = dropdown;
ops.parent.addClass('dropdown-container');
toggle.addClass('dropdown-toggle');
toggle.data('dropdown-options', ops);
toggle.click(toggle_dropdown);
}
/** /**
* Parse document block * Parse document block
*/ */
@ -730,7 +807,7 @@ function parse_document(container)
filterLast = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon', filterLast = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
allLinks = $this.children(), allLinks = $this.children(),
links = allLinks.not(filterSkip), links = allLinks.not(filterSkip),
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="popup-pointer" style="display: none;"><div class="popup-pointer-inner" /></div><ul class="responsive-popup" style="display:none;" /></li>', html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="dropdown" style="display:none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
filterLastList = links.filter(filterLast); filterLastList = links.filter(filterLast);
if (links.is('.rightside')) if (links.is('.rightside'))
@ -742,10 +819,8 @@ function parse_document(container)
$this.append(html); $this.append(html);
} }
var toggle = $this.children('.responsive-menu'), var item = $this.children('.responsive-menu'),
toggleLink = toggle.find('a.responsive-menu-link'), menu = item.find('.dropdown-contents'),
menu = toggle.find('ul.responsive-popup'),
toggleItems = toggle.find('ul.responsive-popup, div.popup-pointer'),
lastWidth = false, lastWidth = false,
compact = false, compact = false,
responsive = false, responsive = false,
@ -762,7 +837,7 @@ function parse_document(container)
responsive = false; responsive = false;
$this.removeClass('responsive'); $this.removeClass('responsive');
links.css('display', ''); links.css('display', '');
toggle.css('display', 'none'); item.css('display', 'none');
} }
if (compact) { if (compact) {
@ -774,7 +849,6 @@ function parse_document(container)
var maxHeight = 0; var maxHeight = 0;
allLinks.each(function() { allLinks.each(function() {
if (!$(this).height()) return; if (!$(this).height()) return;
$(this).attr('data-height', $(this).outerHeight(true));
maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
}); });
@ -784,8 +858,6 @@ function parse_document(container)
// Nothing to resize if block's height is not bigger than tallest element's height // Nothing to resize if block's height is not bigger than tallest element's height
if ($this.height() <= maxHeight) { if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
toggleItems.hide();
return; return;
} }
@ -800,8 +872,6 @@ function parse_document(container)
}); });
if ($this.height() <= maxHeight) { if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
toggleItems.hide();
return; return;
} }
@ -811,9 +881,6 @@ function parse_document(container)
responsive = true; responsive = true;
if (!copied) { if (!copied) {
if (menu.parents().is('.rightside')) {
toggle.addClass('responsive-rightside');
}
menu.append(links.clone(true)); menu.append(links.clone(true));
menu.find('li.leftside, li.rightside').removeClass('leftside rightside'); menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
menu.find('.inputbox').parents('li:first').css('white-space', 'normal'); menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
@ -823,7 +890,7 @@ function parse_document(container)
menu.children().css('display', ''); menu.children().css('display', '');
} }
toggle.css('display', ''); item.css('display', '');
$this.addClass('responsive'); $this.addClass('responsive');
// Try to not hide filtered items // Try to not hide filtered items
@ -845,15 +912,7 @@ function parse_document(container)
links.css('display', 'none'); links.css('display', 'none');
} }
toggleLink.click(function() { register_dropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
if (!responsive) return;
if (!toggle.hasClass('visible')) {
// Hide other popups
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup, .popup-pointer').hide();
}
toggle.toggleClass('visible');
toggleItems.toggle();
});
check(); check();
$(window).resize(check); $(window).resize(check);
@ -868,9 +927,8 @@ function parse_document(container)
ul = $this.children(), ul = $this.children(),
tabs = ul.children().not('[data-skip-responsive]'), tabs = ul.children().not('[data-skip-responsive]'),
links = tabs.children('a'), links = tabs.children('a'),
toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'), item = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
toggleLink = toggle.find('a.responsive-tab-link'), menu = item.find('.dropdown-contents'),
menu = toggle.find('ul.responsive-tabs'),
maxHeight = 0, maxHeight = 0,
lastWidth = false, lastWidth = false,
responsive = false; responsive = false;
@ -888,18 +946,21 @@ function parse_document(container)
} }
tabs.show(); tabs.show();
toggle.hide(); item.hide();
lastWidth = width; lastWidth = width;
height = $this.height(); height = $this.height();
if (height <= maxHeight) { if (height <= maxHeight) {
responsive = false; responsive = false;
if (item.hasClass('dropdown-visible')) {
toggle_dropdown.call(item.find('a.responsive-tab-link').get(0));
}
return; return;
} }
responsive = true; responsive = true;
toggle.show(); item.show();
menu.hide().html(''); menu.html('');
var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'), var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'),
total = availableTabs.length, total = availableTabs.length,
@ -917,10 +978,7 @@ function parse_document(container)
menu.find('a').click(function() { check(true); }); menu.find('a').click(function() { check(true); });
} }
toggleLink.click(function() { register_dropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab'});
if (!responsive) return;
menu.toggle();
});
check(true); check(true);
$(window).resize(check); $(window).resize(check);
@ -951,14 +1009,12 @@ function parse_document(container)
$('#' + this.getAttribute('data-focus')).focus(); $('#' + this.getAttribute('data-focus')).focus();
}); });
// Hide responsive menu and tabs // Hide active dropdowns when click event happens outside
$('#phpbb').click(function(e) { $('#phpbb').click(function(e) {
var parents = $(e.target).parents(); var parents = $(e.target).parents();
if (!parents.is('.responsive-menu.visible')) { if (!parents.is('.dropdown-container.dropdown-visible')) {
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup, .popup-pointer').hide(); $('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown);
}
if (!parents.is('.responsive-tab')) {
$('.responsive-tabs').hide();
} }
}); });

6
phpBB/styles/prosilver/template/overall_header.html
View file

@ -102,8 +102,9 @@
<!-- IF S_NOTIFICATIONS_DISPLAY --> <!-- IF S_NOTIFICATIONS_DISPLAY -->
<li class="icon-notification" data-skip-responsive="true"> <li class="icon-notification" data-skip-responsive="true">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a> <a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
<div id="notification_list" class="notification_list"> <div id="notification_list" class="dropdown notification_list">
<div class="popup-pointer"><div class="popup-pointer-inner"></div></div> <div class="pointer"><div class="pointer-inner"></div></div>
<div class="dropdown-contents">
<div class="header"> <div class="header">
{L_NOTIFICATIONS} {L_NOTIFICATIONS}
<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span> <span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span>
@ -136,6 +137,7 @@
<a href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_SEE_ALL}</span></a> <a href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_SEE_ALL}</span></a>
</div> </div>
</div> </div>
</div>
</li> </li>
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF S_DISPLAY_PM --> <!-- IF S_DISPLAY_PM -->

38
phpBB/styles/prosilver/theme/colours.css
View file

@ -1104,11 +1104,6 @@ input.disabled {
background-color: #000000; background-color: #000000;
} }
#notification_list {
background-color: #FFFFFF;
border-color: #B9B9B9;
}
#notification_list ul li { #notification_list ul li {
border-bottom-color: #B9B9B9; border-bottom-color: #B9B9B9;
} }
@ -1118,12 +1113,12 @@ input.disabled {
color: #000000; color: #000000;
} }
#notification_list > .header, .notification_list > .footer { #notification_list .header, .notification_list .footer {
border-color: #B9B9B9; border-color: #B9B9B9;
color: #000000; color: #000000;
} }
#notification_list > .header { #notification_list .header {
background: #F1F8FF; background: #F1F8FF;
background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%); background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB));
@ -1133,12 +1128,16 @@ input.disabled {
background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%); background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
} }
.popup-pointer { .dropdown .pointer {
border-bottom-color: #B9B9B9; border-color: #B9B9B9 transparent;
} }
.popup-pointer-inner { .dropdown .pointer-inner {
border-bottom-color: #F1F8FF; border-color: #FFF transparent;
}
#notification_list .pointer-inner {
border-color: #F1F8FF transparent;
} }
ul.linklist li.responsive-menu a.responsive-menu-link:before { ul.linklist li.responsive-menu a.responsive-menu-link:before {
@ -1149,22 +1148,11 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
border-color: #D31141; border-color: #D31141;
} }
ul.responsive-popup { .dropdown .dropdown-contents {
background: #fff; background: #fff;
border-color: #b9b9b9; border-color: #b9b9b9;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
} }
.dropdown-up .dropdown-contents {
.responsive-menu .popup-pointer { box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
border-bottom-color: #b9b9b9;
}
.responsive-menu .popup-pointer-inner {
border-bottom-color: #fff;
}
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
background: #ddedfb;
border-color: #c0c9d5;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
} }

143
phpBB/styles/prosilver/theme/common.css
View file

@ -363,6 +363,7 @@ ul.rightside {
ul.linklist li.responsive-menu { ul.linklist li.responsive-menu {
position: relative; position: relative;
margin: 0 5px;
} }
ul.linklist li.responsive-menu a.responsive-menu-link { ul.linklist li.responsive-menu a.responsive-menu-link {
@ -394,6 +395,24 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
max-width: none; max-width: none;
} }
li.responsive-menu.dropdown-right .dropdown {
left: -9px;
}
li.responsive-menu.dropdown-left .dropdown {
right: -6px;
}
li.responsive-menu .dropdown .dropdown-contents {
padding: 0 5px;
}
ul.linklist .dropdown li {
clear: both;
}
/* Bulletin icons for list items /* Bulletin icons for list items
----------------------------------------*/ ----------------------------------------*/
ul.linklist.bulletin li:before { ul.linklist.bulletin li:before {
@ -416,54 +435,95 @@ ul.linklist.bulletin li.no-bulletin:before {
display: none !important; display: none !important;
} }
/* Responsive popup /* Dropdown menu
----------------------------------------*/ ----------------------------------------*/
ul.responsive-popup { .dropdown {
position: absolute; position: absolute;
left: 0; left: 0;
top: 22px; top: 22px;
z-index: 2; z-index: 2;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 9px 0 0;
} }
.responsive-rightside ul.responsive-popup { .dropdown-up .dropdown {
top: auto;
bottom: 18px;
padding: 0 0 9px;
}
.dropdown-left .dropdown {
left: auto; left: auto;
right: 0; right: 0;
} }
.responsive-menu .popup-pointer {
top: 22px; .dropdown .pointer, .dropdown .pointer-inner {
position: absolute;
width: 0;
height: 0;
border-top-width: 0;
border-bottom: 10px solid transparent;
border-left: 10px dashed transparent;
border-right: 10px dashed transparent;
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
display: block;
}
.dropdown-up .pointer, .dropdown-up .pointer-inner {
border-bottom-width: 0;
border-top: 10px solid transparent;
}
.dropdown .pointer {
right: auto;
left: 10px;
top: 0;
z-index: 3; z-index: 3;
left: 2px;
}
.responsive-menu ul.responsive-popup {
top: 32px;
left: -5px;
} }
.responsive-menu.responsive-rightside .popup-pointer { .dropdown-up .pointer {
left: auto; bottom: 0;
right: 2px; top: auto;
}
.responsive-menu.responsive-rightside ul.responsive-popup {
left: auto;
right: -5px;
} }
ul.responsive-popup li { .dropdown-left .dropdown .pointer {
left: auto;
right: 10px;
}
.dropdown .pointer-inner {
top: auto;
bottom: -11px;
left: -10px;
}
.dropdown-up .pointer-inner {
bottom: auto;
top: -11px;
}
.dropdown .dropdown-contents {
z-index: 2;
overflow: hidden;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
}
.dropdown li {
float: none; float: none;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
} }
.wrap ul.responsive-popup li { .wrap .dropdown li, .dropdown.wrap li {
white-space: normal; white-space: normal;
} }
ul.responsive-popup li:before, ul.responsive-popup li:after { .dropdown li:before, .dropdown li:after {
display: none !important; display: none !important;
} }
@ -854,10 +914,7 @@ form > p.post-notice strong {
left: 0; left: 0;
width: 330px; width: 330px;
z-index: 1; z-index: 1;
border: 1px solid; top: 22px;
box-shadow: 3px 3px 5px darkgray;
border-radius: 5px;
top: 32px;
} }
#notification_list ul { #notification_list ul {
@ -881,7 +938,11 @@ form > p.post-notice strong {
display: none; display: none;
} }
#notification_list > .header { #notification_list .dropdown-contents {
padding: 0;
}
#notification_list .header {
padding: 0 10px; padding: 0 10px;
font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px; font-size: 11px;
@ -893,18 +954,18 @@ form > p.post-notice strong {
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
} }
#notification_list > .header > .header_settings { #notification_list .header .header_settings {
float: right; float: right;
font-weight: normal; font-weight: normal;
text-transform: none; text-transform: none;
} }
#notification_list > .footer { #notification_list .footer {
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
} }
#notification_list ul li a, .notification_list dt > a, #notification_list > .footer > a { #notification_list ul li a, .notification_list dt > a, #notification_list .footer > a {
display: block; display: block;
text-decoration: none; text-decoration: none;
} }
@ -921,30 +982,6 @@ form > p.post-notice strong {
margin: 0; margin: 0;
} }
.popup-pointer, .popup-pointer-inner {
position: absolute;
width: 0;
height: 0;
border-top-width: 0;
border-bottom: 10px solid;
border-left: 10px dashed transparent;
border-right: 10px dashed transparent;
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
display: block;
}
.popup-pointer {
right: auto;
left: 10px;
top: -11px;
}
.popup-pointer-inner {
top: auto;
bottom: -11px;
left: -10px;
}
.notification_list div.notifications { .notification_list div.notifications {
padding: 5px; padding: 5px;
} }

36
phpBB/styles/prosilver/theme/cp.css
View file

@ -218,6 +218,10 @@ ul.cplist {
/* Responsive tabs /* Responsive tabs
----------------------------------------*/ ----------------------------------------*/
.responsive-tab {
position: relative;
}
.responsive-tab .responsive-tab-link span { .responsive-tab .responsive-tab-link span {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
@ -251,29 +255,25 @@ ul.cplist {
position: relative; position: relative;
} }
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs { #tabs .dropdown, #minitabs .dropdown {
position: absolute; top: 29px;
right: 0; margin-right: -1px;
top: 26px;
z-index: 2;
border: 1px solid transparent;
border-radius: 5px;
} }
#minitabs ul.responsive-tabs { #tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
top: 23px; bottom: -5px;
top: auto;
} }
.tabs-container #minitabs ul.responsive-tabs { #tabs .dropdown-right .dropdown, #minitabs .dropdown-right .dropdown {
right: auto; margin-left: -41px;
left: 0;
} }
#tabs .responsive-tabs li, #minitabs .responsive-tabs li { #tabs .dropdown li, #minitabs .dropdown li {
display: block !important; display: block !important;
} }
#tabs .responsive-tabs a, #tabs .responsive-tabs a span, #minitabs .responsive-tabs a, #minitabs .responsive-tabs a span { #tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
background: transparent; background: transparent;
float: none; float: none;
margin: 0; margin: 0;
@ -281,14 +281,16 @@ ul.cplist {
text-align: right; text-align: right;
} }
.tabs-container #minitabs .responsive-tabs a span { .tabs-container #minitabs .dropdown a span {
text-align: left; text-align: left;
} }
#tabs .responsive-tabs a span, #minitabs .responsive-tabs a span { #tabs .dropdown a span, #minitabs .dropdown a span {
padding: 5px; padding: 5px 8px;
color: inherit !important;
} }
/* UCP navigation menu /* UCP navigation menu
----------------------------------------*/ ----------------------------------------*/
/* Container for sub-navigation list */ /* Container for sub-navigation list */