From 50d79fc2c22b237078304cc8fb34f43541d518b9 Mon Sep 17 00:00:00 2001
From: Wisp X <wisp-x@qq.com>
Date: Fri, 24 Dec 2021 15:52:18 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=AE=8C=E6=88=90=E7=9B=B8?=
 =?UTF-8?q?=E5=86=8C=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/User/ImageController.php |  2 +
 public/css/app.css                            |  4 +
 resources/views/images.blade.php              | 85 ++++++++++++-------
 3 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/app/Http/Controllers/User/ImageController.php b/app/Http/Controllers/User/ImageController.php
index e285cb44..81e7885f 100644
--- a/app/Http/Controllers/User/ImageController.php
+++ b/app/Http/Controllers/User/ImageController.php
@@ -40,6 +40,8 @@ class ImageController extends Controller
             }
         })->when($request->query('keyword'), function (Builder $builder, $keyword) {
             $builder->whereRaw("concat(IFNULL(origin_name,''),IFNULL(alias_name,'')) like ?", ["%{$keyword}%"]);
+        })->when((int) $request->query('album_id'), function (Builder $builder, $albumId) {
+            $builder->where('album_id', $albumId);
         })->paginate(40);
         $images->getCollection()->each(function (Image $image) {
             $image->human_date = $image->created_at->diffForHumans();
diff --git a/public/css/app.css b/public/css/app.css
index c578425a..c230a49e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1172,6 +1172,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
diff --git a/resources/views/images.blade.php b/resources/views/images.blade.php
index 3d89dfba..14bc422d 100644
--- a/resources/views/images.blade.php
+++ b/resources/views/images.blade.php
@@ -79,7 +79,7 @@
     </script>
 
     <script type="text/html" id="albums-item">
-        <a href="" class="flex justify-between items-center px-2 py-1 rounded w-full bg-gray-100 text-gray-800 hover:bg-blue-400 hover:text-white">
+        <a href="javascript:void(0)" data-id="__id__" class="flex justify-between items-center px-2 py-1 rounded w-full bg-gray-100 text-gray-800 hover:bg-blue-300 hover:text-white">
             <span class="text-sm truncate w-[80%]">__name__</span>
             <span class="text-xs">__image_num__</span>
         </a>
@@ -97,6 +97,8 @@
                 waitThumbnailsLoad: false,
             };
 
+            let selectedAlbum = 0; // 选择的相册
+
             const $photos = $("#photos-grid");
             const $drawer = $("#drawer");
             const $drawerMask = $('#drawer-mask');
@@ -125,33 +127,6 @@
 
             $photos.justifiedGallery(gridConfigs);
 
-            const getAlbums = () => {
-                drawer.toggle('我的相册', '<div id="albums-container" class="flex flex-col justify-center items-center w-full p-3 space-y-2"></div>', function () {
-                    utils.infiniteScroll('#drawer-content', {
-                        url: '{{ route('user.albums') }}',
-                        success: function (response) {
-                            if (!response.status) {
-                                return toastr.error(response.message);
-                            }
-
-                            let albums = response.data.albums.data;
-                            if (albums.length <= 0 || response.data.albums.current_page === response.data.albums.last_page) {
-                                this.finished = true;
-                            }
-
-                            let html = '';
-                            for (const i in albums) {
-                                html += $('#albums-item').html()
-                                    .replace(/__name__/g, albums[i].name)
-                                    .replace(/__image_num__/g, albums[i].image_num)
-                            }
-
-                            $('#albums-container').append(html);
-                        }
-                    });
-                });
-            }
-
             const infinite = utils.infiniteScroll('#photos-scroll', {
                 url: '{{ route('user.images') }}',
                 success: function (response) {
@@ -194,16 +169,62 @@
                 }
             });
 
-            const setOrderBy = function (sort) {
+            const resetImages = (params) => {
                 $photos.addClass('reset').html('').justifiedGallery('destroy');
-                infinite.refresh({page: 1, order: sort});
+                infinite.refresh(params);
+            }
+
+            const getAlbums = () => {
+                drawer.toggle('我的相册', '<div id="albums-container" class="flex flex-col justify-center items-center w-full p-3 space-y-2"></div>', function () {
+                    let $albums = $('#albums-container');
+                    utils.infiniteScroll('#drawer-content', {
+                        url: '{{ route('user.albums') }}',
+                        success: function (response) {
+                            if (!response.status) {
+                                return toastr.error(response.message);
+                            }
+
+                            let albums = response.data.albums.data;
+                            if (albums.length <= 0 || response.data.albums.current_page === response.data.albums.last_page) {
+                                this.finished = true;
+                            }
+
+                            let html = '';
+                            for (const i in albums) {
+                                let item = $('#albums-item').html()
+                                    .replace(/__id__/g, albums[i].id)
+                                    .replace(/__name__/g, albums[i].name)
+                                    .replace(/__image_num__/g, albums[i].image_num)
+                                if (albums[i].id === selectedAlbum) {
+                                    // 选中的相册高亮
+                                    item = item
+                                        .replace(/bg-gray-100/g, 'bg-blue-400')
+                                        .replace(/text-gray-800/g, 'text-white')
+                                }
+
+                                html += item;
+                            }
+
+                            $albums.append(html);
+                        }
+                    });
+
+                    $albums.off('click', 'a').on('click', 'a', function () {
+                        selectedAlbum = $(this).data('id');
+                        resetImages({page: 1, album_id: selectedAlbum});
+                        drawer.close();
+                    });
+                });
+            }
+
+            const setOrderBy = function (sort) {
+                resetImages({page: 1, order: sort})
                 $('#order span').text({newest: '最新', earliest: '最早', utmost: '最大', least: '最小'}[sort]);
             };
 
             $('#search').keydown(function (e) {
                 if (e.keyCode === 13) {
-                    $photos.addClass('reset').html('').justifiedGallery('destroy');
-                    infinite.refresh({page: 1, keyword: $(this).val()});
+                    resetImages({page: 1, keyword: $(this).val()});
                 }
             });