Skip to content

Instantly share code, notes, and snippets.

@bastianallgeier
Created July 9, 2018 11:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bastianallgeier/ca1184196a9f36515450dbbcaddbc19d to your computer and use it in GitHub Desktop.
Save bastianallgeier/ca1184196a9f36515450dbbcaddbc19d to your computer and use it in GitHub Desktop.
panel.plugin("medienbaecker/images", {
fields: {
images: {
props: {
label: String,
buttons: String,
value: String,
images: Array
},
data() {
return {
test: "The files of the page",
selected: []
};
},
methods: {
add(image) {
this.selected.push(image);
this.$refs.imageSelect.close();
},
remove(index) {
this.selected.splice(index, 1);
}
},
template: `
<kirby-field :label="label" class="images">
<kirby-button slot="options" icon="add" @click="$refs.imageSelect.open()">Select image</kirby-button>
<kirby-draggable v-if="selected.length" element="kirby-list">
<kirby-list-item
v-for="(image, key) in selected"
:key="key"
:text="image.text"
:image="image.image"
>
<kirby-button icon="cancel" slot="options" @click="remove(key)"></kirby-button>
</kirby-list-item>
</kirby-draggable>
<kirby-box v-else text="Nothing selected"></kirby-box>
<kirby-dialog ref="imageSelect">
<kirby-list>
<kirby-list-item
v-for="(image, key) in images"
:key="key"
:text="image.text"
:image="image.image"
>
<kirby-button icon="check" slot="options" @click="add(image)"></kirby-button>
</kirby-list-item>
</kirby-list>
</kirby-dialog>
</kirby-field>
`
}
}
});
<?php
Kirby::plugin('medienbaecker/images', [
'fields' => [
'images' => [
'computed' => [
'images' => function () {
$images = [];
foreach ($this->model()->images() as $image) {
$images[] = [
'text' => $image->filename(),
'image' => [
'url' => $image->url(),
]
];
}
return $images;
}
]
]
]
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment