diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue index 06eb140b95..87cd7a6d1d 100644 --- a/resources/js/components/assets/Editor/Editor.vue +++ b/resources/js/components/assets/Editor/Editor.vue @@ -157,8 +157,8 @@
- - + +
@@ -239,6 +239,10 @@ export default { type: Boolean, default: true, }, + showNavigation: { + type: Boolean, + default: true, + }, allowDeleting: { type: Boolean, default() { diff --git a/resources/js/components/fieldtypes/assets/Asset.js b/resources/js/components/fieldtypes/assets/Asset.js index 83440d00cb..a505a628dd 100644 --- a/resources/js/components/fieldtypes/assets/Asset.js +++ b/resources/js/components/fieldtypes/assets/Asset.js @@ -16,11 +16,16 @@ export default { type: Boolean, default: true, }, + siblings: { + type: Array, + default: () => [], + }, }, data() { return { editing: false, + editingId: null, }; }, @@ -73,9 +78,10 @@ export default { edit() { if (this.readOnly) return; - if (this.asset.invalid) return; + if (this.asset?.invalid) return; this.editing = true; + this.editingId = this.asset?.id ?? null; }, remove() { @@ -98,6 +104,7 @@ export default { closeEditor() { this.editing = false; + this.editingId = null; }, assetSaved(asset) { @@ -108,10 +115,28 @@ export default { actionCompleted(successful, response) { if (successful === false) return; const id = response.ids[0] || null; - if (id && id !== this.asset.id) { - this.$emit('id-changed', id); + if (id && id !== this.editingId) { + this.$emit('id-changed', this.editingId, id); } this.closeEditor(); }, + + navigateToPrevious() { + const index = this.siblings.findIndex((asset) => asset.id === this.editingId); + if (index <= 0) return; + + const previousId = this.siblings[index - 1].id; + this.editingId = null; + this.$nextTick(() => (this.editingId = previousId)); + }, + + navigateToNext() { + const index = this.siblings.findIndex((asset) => asset.id === this.editingId); + if (index === -1 || index >= this.siblings.length - 1) return; + + const nextId = this.siblings[index + 1].id; + this.editingId = null; + this.$nextTick(() => (this.editingId = nextId)); + }, }, }; diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue index 2d2f736e44..74c9b7160e 100644 --- a/resources/js/components/fieldtypes/assets/AssetRow.vue +++ b/resources/js/components/fieldtypes/assets/AssetRow.vue @@ -57,9 +57,12 @@ /> @@ -156,12 +157,13 @@ v-for="asset in assets" :key="asset.id" :asset="asset" + :siblings="assets" :read-only="isReadOnly" :show-filename="config.show_filename" :show-set-alt="showSetAlt" @updated="assetUpdated" @removed="assetRemoved" - @id-changed="idChanged(asset.id, $event)" + @id-changed="idChanged" /> diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue index db21e21290..0dead0b49e 100644 --- a/resources/js/components/fieldtypes/bard/Image.vue +++ b/resources/js/components/fieldtypes/bard/Image.vue @@ -55,6 +55,7 @@ :id="assetId" :showToolbar="false" :allow-deleting="false" + :show-navigation="false" @closed="closeEditor" @saved="editorAssetSaved" @actionCompleted="actionCompleted"