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"