diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index 5a9eabc239..5cdf0318a8 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -435,6 +435,183 @@ function parseDocument($container) { }); /** +<<<<<<< HEAD +======= + * Responsive link lists + */ + var selector = '.linklist:not(.navlinks, [data-skip-responsive]),' + + '.postbody .post-buttons:not([data-skip-responsive])'; + $container.find(selector).each(function() { + var $this = $(this), + filterSkip = '.breadcrumbs, [data-skip-responsive]', + filterLast = '.edit-icon, .quote-icon, [data-last-responsive]', + $linksAll = $this.children(), + $linksNotSkip = $linksAll.not(filterSkip), // All items that can potentially be hidden + $linksFirst = $linksNotSkip.not(filterLast), // The items that will be hidden first + $linksLast = $linksNotSkip.filter(filterLast), // The items that will be hidden last + persistent = $this.attr('id') === 'nav-main', // Does this list already have a menu (such as quick-links)? + html = '
', + slack = 3; // Vertical slack space (in pixels). Determines how sensitive the script is in determining whether a line-break has occurred. + + // Add a hidden drop-down menu to each links list (except those that already have one) + if (!persistent) { + if ($linksNotSkip.is('.rightside')) { + $linksNotSkip.filter('.rightside:first').before(html); + $this.children('.responsive-menu').addClass('rightside'); + } else { + $this.append(html); + } + } + + // Set some object references and initial states + var $menu = $this.children('.responsive-menu'), + $menuContents = $menu.find('.dropdown-contents'), + persistentContent = $menuContents.find('li:not(.separator)').length, + lastWidth = false, + compact = false, + responsive1 = false, + responsive2 = false, + copied1 = false, + copied2 = false, + maxHeight = 0; + + // Find the tallest element in the list (we assume that all elements are roughly the same height) + $linksAll.each(function() { + if (!$(this).height()) { + return; + } + maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); + }); + if (maxHeight < 1) { + return; // Shouldn't be possible, but just in case, abort + } else { + maxHeight = maxHeight + slack; + } + + function check() { + var width = $body.width(); + // We can't make it any smaller than this, so just skip + if (responsive2 && compact && (width <= lastWidth)) { + return; + } + lastWidth = width; + + // Reset responsive and compact layout + if (responsive1 || responsive2) { + $linksNotSkip.removeClass('hidden'); + $menuContents.children('.clone').addClass('hidden'); + responsive1 = responsive2 = false; + } + if (compact) { + $this.removeClass('compact'); + compact = false; + } + + // Unhide the quick-links menu if it has "persistent" content + if (persistent && persistentContent) { + $menu.removeClass('hidden'); + } else { + $menu.addClass('hidden'); + } + + // Nothing to resize if block's height is not bigger than tallest element's height + if ($this.height() <= maxHeight) { + return; + } + + // STEP 1: Compact + if (!compact) { + $this.addClass('compact'); + compact = true; + } + if ($this.height() <= maxHeight) { + return; + } + + // STEP 2: First responsive set - compact + if (compact) { + $this.removeClass('compact'); + compact = false; + } + // Copy the list items to the dropdown + if (!copied1) { + var $clones1 = $linksFirst.clone(true); + $menuContents.prepend($clones1.addClass('clone clone-first').removeClass('leftside rightside')); + + if ($this.hasClass('post-buttons')) { + $('.button', $menuContents).removeClass('button'); + $('.sr-only', $menuContents).removeClass('sr-only'); + $('.js-responsive-menu-link').addClass('button').addClass('button-icon-only'); + $('.js-responsive-menu-link .icon').removeClass('fa-bars').addClass('fa-ellipsis-h'); + } + copied1 = true; + } + if (!responsive1) { + $linksFirst.addClass('hidden'); + responsive1 = true; + $menuContents.children('.clone-first').removeClass('hidden'); + $menu.removeClass('hidden'); + } + if ($this.height() <= maxHeight) { + return; + } + + // STEP 3: First responsive set + compact + if (!compact) { + $this.addClass('compact'); + compact = true; + } + if ($this.height() <= maxHeight) { + return; + } + + // STEP 4: Last responsive set - compact + if (!$linksLast.length) { + return; // No other links to hide, can't do more + } + if (compact) { + $this.removeClass('compact'); + compact = false; + } + // Copy the list items to the dropdown + if (!copied2) { + var $clones2 = $linksLast.clone(); + $menuContents.prepend($clones2.addClass('clone clone-last').removeClass('leftside rightside')); + copied2 = true; + } + if (!responsive2) { + $linksLast.addClass('hidden'); + responsive2 = true; + $menuContents.children('.clone-last').removeClass('hidden'); + } + if ($this.height() <= maxHeight) { + return; + } + + // STEP 5: Last responsive set + compact + if (!compact) { + $this.addClass('compact'); + compact = true; + } + } + + if (!persistent) { + phpbb.registerDropdown($menu.find('a.js-responsive-menu-link'), $menu.find('.dropdown'), false); + } + + // If there are any images in the links list, run the check again after they have loaded + $linksAll.find('img').each(function() { + $(this).on('load', function() { + check(); + }); + }); + + check(); + $(window).resize(check); + }); + + /** +>>>>>>> 3.3.x * Do not run functions below for old browsers */ if (oldBrowser) {