Merge branch '3.3.x'

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 = '<li class="responsive-menu hidden"><a href="javascript:void(0);" class="js-responsive-menu-link responsive-menu-link"><i class="icon fa-bars fa-fw" aria-hidden="true"></i></a><div class="dropdown"><div class="pointer"><div class="pointer-inner"></div></div><ul class="dropdown-contents" /></div></li>',
+			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) {