Skip to content

[フォトアルバム] 任意の並び順で表示できるようにしました #2281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 9, 2025
Merged

[フォトアルバム] 任意の並び順で表示できるようにしました #2281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d788916
feat(photoalbums): add custom order preview controls
gakigaki Sep 30, 2025
9749162
refactor(photoalbums): streamline manual sort loading
gakigaki Sep 30, 2025
89c9a7e
perf(photoalbums): defer manual sort preview thumbnails
gakigaki Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/Enums/PhotoalbumSort.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ final class PhotoalbumSort extends EnumsBase
const name = 'name';
const created = 'created';
const updated = 'updated';
const manual = 'manual';

// 定数メンバの'_'の後半
const order_asc = 'asc';
Expand All @@ -31,6 +32,7 @@ final class PhotoalbumSort extends EnumsBase
const name_desc = self::name . '_' . self::order_desc;
const created_asc = self::created . '_' . self::order_asc;
const created_desc = self::created . '_' . self::order_desc;
const manual_order = self::manual;
// const updated_asc = self::updated . '_' . self::order_asc;
// const updated_desc = self::updated . '_' . self::order_desc;

Expand All @@ -40,6 +42,7 @@ final class PhotoalbumSort extends EnumsBase
self::name_desc => '名前順（降順）',
self::created_asc => '登録日（古い順）',
self::created_desc => '登録日（新しい順）',
self::manual_order => 'カスタム順',
// self::updated_asc => '更新日（古い順）',
// self::updated_desc => '更新日（新しい順）',
];
Expand Down
2 changes: 1 addition & 1 deletion app/Models/User/Photoalbums/PhotoalbumContent.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class PhotoalbumContent extends Model
//use UserableNohistory;

// 更新する項目の定義
protected $fillable = ['photoalbum_id', 'upload_id', 'poster_upload_id', 'name', 'width', 'height', 'description', 'is_folder', 'is_cover', 'mimetype'];
protected $fillable = ['photoalbum_id', 'upload_id', 'poster_upload_id', 'name', 'width', 'height', 'description', 'is_folder', 'is_cover', 'display_sequence', 'mimetype'];

// NC2移行用の一時項目
public $migrate_parent_id = 0;
Expand Down
323 changes: 254 additions & 69 deletions app/Plugins/User/Photoalbums/PhotoalbumsPlugin.php
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 51 additions & 0 deletions database/migrations/2025_09_30_000000_add_display_sequence_to_photoalbum_contents.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('photoalbum_contents', function (Blueprint $table) {
$table->integer('display_sequence')->default(0)->after('is_cover');
});

$contents = DB::table('photoalbum_contents')
->select('id', 'parent_id', '_lft')
->orderBy('parent_id')
->orderBy('_lft')
->get();

$current_parent_id = null;
$sequence = 0;

foreach ($contents as $content) {
if ($current_parent_id !== $content->parent_id) {
$current_parent_id = $content->parent_id;
$sequence = 0;
}

$sequence++;

DB::table('photoalbum_contents')
->where('id', $content->id)
->update(['display_sequence' => $sequence]);
}
}

/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('photoalbum_contents', function (Blueprint $table) {
$table->dropColumn('display_sequence');
});
}
};
2 changes: 1 addition & 1 deletion public/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/mix-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"/js/app.js": "/js/app.js?id=e11e836611ea451c83fd5f2e76bd804d",
"/css/app.css": "/css/app.css?id=218ddec1fa538cbf1ea5189c9c7322f3"
"/css/app.css": "/css/app.css?id=43efba98a65182174963ada6c26427d4"
}
3 changes: 3 additions & 0 deletions resources/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,6 @@

// WYSIWYG Editor styles
@import 'wysiwyg/editor';

// Plugin specific styles
@import 'plugins/photoalbum';
64 changes: 64 additions & 0 deletions resources/sass/plugins/_photoalbum.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// Photoalbum setting screen specific styles
.photoalbum-manual-sort__thumb {
display: inline-flex;
width: 64px;
height: 64px;
align-items: center;
justify-content: center;
border: 1px solid $border-color;
border-radius: $border-radius;
background-color: $white;
overflow: hidden;
}

.photoalbum-manual-sort__thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.photoalbum-manual-sort__thumb--video {
background-color: theme-color("light");
color: $gray-600;

i {
font-size: 24px;
}
}

// Leave some space when scrolling to anchors after sort operations
.photoalbum-manual-sort__item {
scroll-margin-top: 120px;
}

// Flash highlight for the item that just moved
.photoalbum-manual-sort__item--active {
animation: photoalbum-highlight 1.5s ease;
}

@keyframes photoalbum-highlight {
0% {
background-color: mix($white, $warning, 80%);
}
100% {
background-color: transparent;
}
}

// Card styling aligns with Bootstrap theme colours
.photoalbum-manual-sort__card {
border-color: $info;

.card-header {
background-color: mix($white, $info, 90%);
color: mix($black, $info, 20%);
}
}

.photoalbum-manual-sort__badge {
background-color: $info;
color: $white;
font-size: 0.75rem;
padding: 0.2rem 0.45rem;
border-radius: 0.25rem;
}
69 changes: 67 additions & 2 deletions resources/views/plugins/user/photoalbums/default/frame.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@
</div>
</div>
--}}
@php
$current_sort_folder = FrameConfig::getConfigValueAndOld($frame_configs, PhotoalbumFrameConfig::sort_folder);
$current_sort_file = FrameConfig::getConfigValueAndOld($frame_configs, PhotoalbumFrameConfig::sort_file);
@endphp

{{-- ダウンロード --}}
<div class="form-group row">
<label class="{{$frame->getSettingLabelClass(true)}}">{{PhotoalbumFrameConfig::enum[PhotoalbumFrameConfig::download]}}</label>
Expand Down Expand Up @@ -132,7 +137,7 @@ class="custom-control-input"
{{-- アルバム並び順 --}}
<div class="form-group row">
<label class="{{$frame->getSettingLabelClass(true)}}">{{PhotoalbumFrameConfig::enum[PhotoalbumFrameConfig::sort_folder]}}</label>
<div class="{{$frame->getSettingInputClass(true)}}">
<div class="{{$frame->getSettingInputClass()}}">
<select class="form-control" name="sort_folder">
@foreach (PhotoalbumSort::getMembers() as $sort_key => $sort_view)
{{-- 未設定時の初期値 --}}
Expand All @@ -143,12 +148,17 @@ class="custom-control-input"
@endif
@endforeach
</select>
@if (($current_sort_folder ?? '') === PhotoalbumSort::manual_order)
<small class="form-text text-muted">
カスタム順の変更は <a href="#manual-sort-preview">現在の並び順プレビュー</a> の上下ボタンから行えます。
</small>
@endif
</div>
</div>
{{-- 写真並び順 --}}
<div class="form-group row">
<label class="{{$frame->getSettingLabelClass(true)}}">{{PhotoalbumFrameConfig::enum[PhotoalbumFrameConfig::sort_file]}}</label>
<div class="{{$frame->getSettingInputClass(true)}}">
<div class="{{$frame->getSettingInputClass()}}">
<select class="form-control" name="sort_file">
@foreach (PhotoalbumSort::getMembers() as $sort_key => $sort_view)
{{-- 未設定時の初期値 --}}
Expand All @@ -159,6 +169,11 @@ class="custom-control-input"
@endif
@endforeach
</select>
@if (($current_sort_file ?? '') === PhotoalbumSort::manual_order)
<small class="form-text text-muted">
カスタム順の変更は <a href="#manual-sort-preview">現在の並び順プレビュー</a> の上下ボタンから行えます。
</small>
@endif
</div>
</div>

Expand All @@ -175,5 +190,55 @@ class="custom-control-input"
</button>
</div>
</form>

@if (!empty($photoalbum->id))
<hr>
@php
$manual_sort_redirect = url('/') . '/plugin/photoalbums/editView/' . $page->id . '/' . $frame_id;
if (!empty($photoalbum->bucket_id)) {
$manual_sort_redirect .= '/' . $photoalbum->bucket_id;
}
$manual_sort_redirect .= '#frame-' . $frame->id;
$is_manual_sort_folder = ($sort_folder ?? '') === PhotoalbumSort::manual_order;
$is_manual_sort_file = ($sort_file ?? '') === PhotoalbumSort::manual_order;
$is_manual_sort_active = $is_manual_sort_folder || $is_manual_sort_file;
@endphp
<div class="card {{ $is_manual_sort_active ? 'photoalbum-manual-sort__card' : '' }}" id="manual-sort-preview">
<div class="card-header font-weight-bold d-flex align-items-center justify-content-between">
<span>
<i class="fas fa-list mr-2"></i>現在の並び順プレビュー
</span>
{{-- カスタム順が有効な時だけバッジを表示して操作可能であることを明示 --}}
@if ($is_manual_sort_active)
<span class="photoalbum-manual-sort__badge">
カスタム順操作可
</span>
@endif
</div>
<div class="card-body">
<p class="text-muted mb-3">
現在の表示設定での並び順です。利用者画面と同じ順序で表示されます。<br>
カスタム順が選択されている対象は、このプレビュー内の上下ボタンで並び替えできます。
</p>

@if (empty($manual_sort_root))
<p class="text-muted mb-0">表示できるコンテンツがありません。</p>
@else
@include('plugins.user.photoalbums.default.partials.manual_sort_tree', [
'node' => $manual_sort_root,
'sorted_children_map' => $sorted_children_map,
'level' => 0,
'page' => $page,
'frame_id' => $frame_id,
'photoalbum' => $photoalbum,
'redirect_path' => $manual_sort_redirect,
'sort_folder' => $sort_folder,
'sort_file' => $sort_file,
'show_controls' => true,
])
@endif
</div>
</div>
@endif
@endif
@endsection
103 changes: 103 additions & 0 deletions resources/views/plugins/user/photoalbums/default/partials/manual_sort_tree.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@php
$children_map = $sorted_children_map ?? [];
$current_sort_folder = ($sort_folder === null || $sort_folder === '') ? \App\Enums\PhotoalbumSort::name_asc : $sort_folder;
$current_sort_file = ($sort_file === null || $sort_file === '') ? \App\Enums\PhotoalbumSort::name_asc : $sort_file;
$children = collect();
if (!empty($node) && array_key_exists($node->id, $children_map)) {
$children = $children_map[$node->id];
}
$show_controls = isset($show_controls) ? $show_controls : true;
@endphp

@if ($children->isNotEmpty())
<ul class="list-group list-group-flush {{ ($level ?? 0) > 0 ? 'mt-2' : '' }}">
@foreach ($children as $child)
@php
$is_folder = $child->is_folder == \App\Models\User\Photoalbums\PhotoalbumContent::is_folder_on;
$manual_enabled = $is_folder
? $current_sort_folder == \App\Enums\PhotoalbumSort::manual_order
: $current_sort_file == \App\Enums\PhotoalbumSort::manual_order;
$is_video = !$is_folder && \App\Models\Common\Uploads::isVideo($child->mimetype);
$preview_url = '';
if (!$is_folder) {
if (!empty($child->poster_upload_id)) {
$preview_url = url('/') . '/file/' . $child->poster_upload_id . '?size=small';
} elseif (!$is_video && !empty($child->upload_id) && optional($child->upload)->is_image) {
$preview_url = url('/') . '/file/' . $child->upload_id . '?size=small';
}
}
$previous_same = $children->slice(0, $loop->index)->reverse()->first(function ($item) use ($child) {
return $item->is_folder == $child->is_folder;
});
$next_same = $children->slice($loop->index + 1)->first(function ($item) use ($child) {
return $item->is_folder == $child->is_folder;
});
$can_move_up = $manual_enabled && !is_null($previous_same);
$can_move_down = $manual_enabled && !is_null($next_same);
@endphp
{{-- 各行にアンカーIDを付与し並び替え後に同じ位置へ戻れるようにする --}}
<li class="list-group-item photoalbum-manual-sort__item {{ session('photoalbum_sort_focus') == $child->id ? 'photoalbum-manual-sort__item--active' : '' }}" id="photoalbum-sort-item-{{ $child->id }}">
<div class="d-flex justify-content-between align-items-center" style="padding-left: {{ ($level ?? 0) * 1.5 }}rem;">
<div class="d-flex align-items-center">
@if (!$is_folder && (!empty($preview_url) || $is_video))
<span class="photoalbum-manual-sort__thumb mr-2 {{ empty($preview_url) ? 'photoalbum-manual-sort__thumb--video' : '' }}">
@if (!empty($preview_url))
<img src="{{ $preview_url }}" alt="{{ $child->displayName }}" class="photoalbum-manual-sort__thumb-image" loading="lazy" decoding="async" width="64" height="64">
@else
<i class="fas fa-video"></i>
@endif
</span>
@endif
@if ($child->is_folder)
<i class="fas fa-folder text-warning mr-2"></i>
@endif
<span class="font-weight-bold">{{ $child->displayName }}</span>
</div>
@if ($show_controls && $manual_enabled)
<div class="text-nowrap d-flex align-items-center">
<form action="{{ url('/') }}/redirect/plugin/photoalbums/updateViewSequence/{{ $page->id }}/{{ $frame_id }}#frame-{{ $frame_id }}" method="POST" class="d-inline">
{{ csrf_field() }}
<input type="hidden" name="redirect_path" value="{{ $redirect_path }}">
<input type="hidden" name="photoalbum_content_id" value="{{ $child->id }}">
<input type="hidden" name="display_sequence_operation" value="up">
{{-- リダイレクト後に押下行へスクロールさせるためのアンカー --}}
<input type="hidden" name="anchor_target" value="photoalbum-sort-item-{{ $child->id }}">
<button type="submit" class="btn btn-sm btn-outline-secondary mr-1"
@if (!$can_move_up) disabled @endif
>
<i class="fas fa-arrow-up"></i>
</button>
</form>
<form action="{{ url('/') }}/redirect/plugin/photoalbums/updateViewSequence/{{ $page->id }}/{{ $frame_id }}#frame-{{ $frame_id }}" method="POST" class="d-inline">
{{ csrf_field() }}
<input type="hidden" name="redirect_path" value="{{ $redirect_path }}">
<input type="hidden" name="photoalbum_content_id" value="{{ $child->id }}">
<input type="hidden" name="display_sequence_operation" value="down">
{{-- リダイレクト後に押下行へスクロールさせるためのアンカー --}}
<input type="hidden" name="anchor_target" value="photoalbum-sort-item-{{ $child->id }}">
<button type="submit" class="btn btn-sm btn-outline-secondary"
@if (!$can_move_down) disabled @endif
>
<i class="fas fa-arrow-down"></i>
</button>
</form>
</div>
@endif
</div>

@include('plugins.user.photoalbums.default.partials.manual_sort_tree', [
'node' => $child,
'sorted_children_map' => $children_map,
'level' => ($level ?? 0) + 1,
'page' => $page,
'frame_id' => $frame_id,
'photoalbum' => $photoalbum,
'redirect_path' => $redirect_path,
'sort_folder' => $current_sort_folder,
'sort_file' => $current_sort_file,
'show_controls' => $show_controls,
])
</li>
@endforeach
</ul>
@endif