AlbumButtonBox: add way for users to select an album filter

controllers/ViewPhotoAlbum.php

@@ -37,50 +37,55 @@ class ViewPhotoAlbum extends HTMLController
 		}
 
 		// What page are we at?
-		$page = isset($_GET['page']) ? (int) $_GET['page'] : 1;
+		$current_page = isset($_GET['page']) ? (int) $_GET['page'] : 1;
 
-		parent::__construct($title . ' - Page ' . $page . ' - ' . SITE_TITLE);
+		parent::__construct($title . ' - Page ' . $current_page . ' - ' . SITE_TITLE);
 		if (isset($header_box))
 			$this->page->adopt($header_box);
 
-		// Can we do fancy things here?
-		// !!! TODO: permission system?
-		$buttons = $this->getAlbumButtons($tag);
-		if (!empty($buttons))
-			$this->page->adopt(new AlbumButtonBox($buttons));
-
-		// Fetch subalbums, but only if we're on the first page.
-		if ($page === 1)
-		{
-			$albums = $this->getAlbums($id_tag);
-			$index = new AlbumIndex($albums);
-			$this->page->adopt($index);
-		}
-
 		// Who contributed to this album?
 		$contributors = $tag->getContributorList();
 
 		// Enumerate possible filters
-		$filters = ['' => [null, 'Show all photos']];
+		$filters = ['' => ['id_user' => null, 'caption' => 'Show all photos', 'link' => $tag->getUrl()]];
 		foreach ($contributors as $contributor)
 		{
-			$filters[$contributor['slug']] = [$contributor['id_user'], sprintf('%s %s (%s photos)',
+			$filters[$contributor['slug']] = [
-				$contributor['first_name'], $contributor['surname'], $contributor['num_assets'])];
+				'id_user' => $contributor['id_user'],
+				'caption' => sprintf('By %s (%s photos)',
+					$contributor['first_name'], $contributor['num_assets']),
+				'link' => $tag->getUrl() . '/?by=' . $contributor['slug'],
+			];
 		}
 
 		// Limit to a particular uploader?
-		$active_filter = $id_user_uploaded = null;
+		$active_filter = '';
+		$id_user_uploaded = null;
 		if (!empty($_GET['by']))
 		{
 			if (!isset($filters[$_GET['by']]))
 				throw new UnexpectedValueException('Invalid filter for this album or tag.');
 
 			$active_filter = $_GET['by'];
-			$id_user_uploaded = $filters[$active_filter][0];
+			$id_user_uploaded = $filters[$active_filter]['id_user'];
+			$filters[$active_filter]['is_active'] = true;
+		}
+
+		// Add an interface to query and modify the album/tag
+		$buttons = $this->getAlbumButtons($tag);
+		$button_strip = new AlbumButtonBox($buttons, $filters, $active_filter);
+		$this->page->adopt($button_strip);
+
+		// Fetch subalbums, but only if we're on the first page.
+		if ($current_page === 1)
+		{
+			$albums = $this->getAlbums($id_tag);
+			$index = new AlbumIndex($albums);
+			$this->page->adopt($index);
 		}
 
 		// Load a photo mosaic for the current tag.
-		list($mosaic, $total_count) = $this->getPhotoMosaic($id_tag, $id_user_uploaded, $page, !isset($is_person));
+		list($mosaic, $total_count) = $this->getPhotoMosaic($id_tag, $id_user_uploaded, $current_page, !isset($is_person));
 		if (isset($mosaic))
 		{
 			$index = new PhotosIndex($mosaic, Registry::get('user')->isAdmin());
@@ -95,7 +100,7 @@ class ViewPhotoAlbum extends HTMLController
 			$index = new PageIndex([
 				'recordCount' => $total_count,
 				'items_per_page' => self::PER_PAGE,
-				'start' => (isset($_GET['page']) ? $_GET['page'] - 1 : 0) * self::PER_PAGE,
+				'start' => ($current_page - 1) * self::PER_PAGE,
 				'base_url' => $tag->getUrl(),
 				'page_slug' => 'page/%PAGE%/' . (isset($active_filter) ? '?by=' . $active_filter : ''),
 				'index_class' => 'pagination-lg justify-content-around justify-content-lg-center',
@@ -104,7 +109,7 @@ class ViewPhotoAlbum extends HTMLController
 		}
 
 		// Set the canonical url.
-		$this->page->setCanonicalUrl($tag->getUrl() . ($page > 1 ? 'page/' . $page . '/' : ''));
+		$this->page->setCanonicalUrl($tag->getUrl() . ($current_page > 1 ? 'page/' . $current_page . '/' : ''));
 	}
 
 	public function getPhotoMosaic($id_tag, $id_user_uploaded, $page, $sort_linear)

public/css/default.css

@@ -339,9 +339,11 @@ div.polaroid a {
 ---------------------*/
 .album_button_box {
 	float: right;
+	display: flex;
 	margin-bottom: 3rem;
 }
-.album_button_box > a {
+.album_button_box > a,
+.album_button_box .btn {
 	background: var(--bs-body-bg);
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 	border-color: var( --bs-secondary-bg);
@@ -349,7 +351,9 @@ div.polaroid a {
 	padding: 8px 10px;
 	margin-left: 12px;
 }
-.album_button_box > a:hover {
+.album_button_box > a:hover,
+.album_button_box .btn:hover,
+.album_button_box .btn:focus {
 	background: var(--bs-secondary-bg);
 	border-color: var(--bs-tertiary-bg);
 	color: var(--bs-secondary-color);

templates/AlbumButtonBox.php

@@ -8,11 +8,15 @@
 
 class AlbumButtonBox extends Template
 {
+	private $active_filter;
 	private $buttons;
+	private $filters;
 
-	public function __construct($buttons)
+	public function __construct(array $buttons, array $filters, $active_filter)
 	{
+		$this->active_filter = $active_filter;
 		$this->buttons = $buttons;
+		$this->filters = $filters;
 	}
 
 	public function html_main()
@@ -25,6 +29,25 @@ class AlbumButtonBox extends Template
 				<a class="btn btn-light" href="', $button['url'], '">', $button['caption'], '</a>';
 
 		echo '
+				<div class="dropdown">
+					<button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+						<i class="bi bi-filter"></i>
+					</button>
+					<ul class="dropdown-menu">';
+
+		foreach ($this->filters as $key => $filter)
+		{
+			$is_active = $key === $this->active_filter;
+			echo '
+						<li><a class="dropdown-item', $is_active ? ' active' : '',
+							'" href="', $filter['link'], '">',
+							$filter['caption'],
+							'</a></li>';
+		}
+
+		echo '
+					</ul>
+				</div>
 			</div>';
 	}
 }