Skip to content

Commit eb834a6

Browse files
mullemamullema
committed
Merge branch 'develop'
2 parents 73d590b + c45c7e8 commit eb834a6

File tree

6 files changed

+119
-80
lines changed

6 files changed

+119
-80
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ composer require mullema/k3-image-clip
3535
```
3636

3737
### Requirements
38-
- Kirby 3.2.5
38+
- Kirby 3.3 -> use v2.1.0
39+
- Kirby 3.2.5 -> use v2.0.0
3940
- GD Library or ImageMagick
4041

4142
## Consider a donation

‎classes/FilePicker.php

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<?php
2+
3+
4+
namespace mullema;
5+
6+
use Kirby\Cms;
7+
8+
class FilePicker extends CMS\FilePicker
9+
{
10+
/**
11+
* Overwrite https://github.com/getkirby/kirby/blob/master/src/Cms/Picker.php#L89
12+
*
13+
* Adds clip field specific properties
14+
*
15+
* @param \Kirby\Cms\Collection|null $items
16+
* @return array
17+
*/
18+
public function itemsToArray($items = null): array
19+
{
20+
if ($items === null) {
21+
return [];
22+
}
23+
$result = [];
24+
foreach ($items as $index => $item) {
25+
if (empty($this->options['map']) === false) {
26+
$result[] = $this->options['map']($item);
27+
} else {
28+
$result[] = array_merge(
29+
$item->panelPickerData([
30+
'image' => $this->options['image'],
31+
'info' => $this->options['info'],
32+
'model' => $this->options['model'],
33+
'text' => $this->options['text'],
34+
]),
35+
// append more information for clip field
36+
[
37+
'resizable' => $item->isResizable(),
38+
'dimensions' => $item->dimensions()
39+
]);
40+
}
41+
}
42+
return $result;
43+
}
44+
}

‎fields/image-clip.php

+16-40
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
use Kirby\Data\Yaml;
44
use mullema\File;
5+
use mullema\FilePicker;
56

67
$base = require kirby()->root('kirby') . DIRECTORY_SEPARATOR . 'config' . DIRECTORY_SEPARATOR . 'fields' . DIRECTORY_SEPARATOR . 'files.php';
78

@@ -60,43 +61,15 @@
6061

6162
return $files;
6263
},
63-
// Adapt filepicker https://github.com/getkirby/kirby/blob/80b69380e672565a849037232c9951d1e32774c8/config/fields/mixins/filepicker.php
64+
65+
/**
66+
* Overwrite the filepicker mixin https://github.com/getkirby/kirby/blob/master/config/fields/mixins/filepicker.php
67+
* use own FilePicker class
68+
*/
69+
// Overwrite filepicker mixin
6470
'filepicker' => function (array $params = []) {
65-
// fetch the parent model
66-
$model = $this->model();
67-
// find the right default query
68-
if (empty($params['query']) === false) {
69-
$query = $params['query'];
70-
} elseif (is_a($model, 'Kirby\Cms\File') === true) {
71-
$query = 'file.siblings';
72-
} else {
73-
$query = $model::CLASS_ALIAS . '.files';
74-
}
75-
// fetch all files for the picker
76-
$files = $model->query($query, 'Kirby\Cms\Files');
77-
$data = [];
78-
// prepare the response for each file
79-
foreach ($files as $index => $file) {
80-
if (empty($params['map']) === false) {
81-
$data[] = $params['map']($file);
82-
} else {
83-
84-
// adapt for clip field
85-
$data[] = array_merge(
86-
$file->panelPickerData([
87-
'image' => $params['image'] ?? [],
88-
'info' => $params['info'] ?? false,
89-
'model' => $model,
90-
'text' => $params['text'] ?? '{{ file.filename }}',
91-
]),
92-
// append more information for clip field
93-
[
94-
'resizable' => $file->isResizable(),
95-
'dimensions' => $file->dimensions()
96-
]);
97-
}
98-
}
99-
return $data;
71+
$params['model'] = $this->model();
72+
return (new FilePicker($params))->toArray();
10073
}
10174
],
10275

@@ -109,10 +82,13 @@
10982
$field = $this->field();
11083

11184
return $field->filepicker([
112-
'query' => $field->query(),
113-
'image' => $field->image(),
114-
'info' => $field->info(),
115-
'text' => $field->text()
85+
'image' => $field->image(),
86+
'info' => $field->info(),
87+
'limit' => $field->limit(),
88+
'page' => $this->requestQuery('page'),
89+
'query' => $field->query(),
90+
'search' => $this->requestQuery('search'),
91+
'text' => $field->text()
11692
]);
11793
}
11894
],

‎index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.php

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
'mullema\\Filename' => 'classes/Filename.php',
66
'mullema\\GdLib' => 'classes/GdLib.php',
77
'mullema\\Imagemagick' => 'classes/ImageMagick.php',
8+
'mullema\\FilePicker' => 'classes/FilePicker.php'
89
], __DIR__);
910

1011
Kirby::plugin('mullema/k3-image-clip', [

‎src/fields/imageClip.vue

+55-38
Original file line numberDiff line numberDiff line change
@@ -27,59 +27,60 @@
2727

2828
<template v-if="selected.length">
2929
<k-draggable
30-
:element="elements.list"
31-
:list="selected"
32-
:data-size="size"
33-
:handle="true"
34-
@end="onInput"
30+
:element="elements.list"
31+
:list="selected"
32+
:data-size="size"
33+
:handle="true"
34+
:data-invalid="isInvalid"
35+
@end="onInput"
3536
>
3637
<component
37-
v-for="(file, index) in selected"
38-
:is="elements.item"
39-
:key="file.filename"
40-
:sortable="!disabled && selected.length > 1"
41-
:text="file.text"
42-
:link="file.link"
43-
:info="file.info"
44-
:image="file.image"
45-
:icon="file.icon"
38+
v-for="(file, index) in selected"
39+
:is="elements.item"
40+
:key="file.filename"
41+
:sortable="!disabled && selected.length > 1"
42+
:text="file.text"
43+
:link="file.link"
44+
:info="file.info"
45+
:image="file.image"
46+
:icon="file.icon"
4647

47-
:id="file.id"
48-
:resizable="file.resizable"
49-
:disabled="file.disabled"
50-
@openclipdialog="openClipDialog"
48+
:id="file.id"
49+
:resizable="file.resizable"
50+
:disabled="file.disabled"
51+
@openclipdialog="openClipDialog"
5152
>
5253
<k-button
53-
v-if="!disabled"
54-
slot="options"
55-
:tooltip="$t('remove')"
56-
icon="remove"
57-
@click="remove(index)"
54+
v-if="!disabled"
55+
slot="options"
56+
:tooltip="$t('remove')"
57+
icon="remove"
58+
@click="remove(index)"
5859
/>
5960
</component>
6061
</k-draggable>
6162
</template>
6263
<k-empty
63-
v-else
64-
:layout="layout"
65-
icon="image"
66-
@click="open"
64+
v-else
65+
:layout="layout"
66+
icon="image"
67+
:data-invalid="isInvalid"
68+
@click="open"
6769
>
6870
{{ empty || $t('field.files.empty') }}
6971
</k-empty>
7072
<k-files-dialog ref="selector" @submit="select" />
7173
<k-upload ref="fileUpload" @success="selectUpload" />
7274
<k-clip-dialog
73-
ref="clip"
74-
size="large"
75-
:image="clip_image"
76-
:clip="clip"
77-
@submit="clippedArea"
75+
ref="clip"
76+
size="large"
77+
:image="clip_image"
78+
:clip="clip"
79+
@submit="clippedArea"
7880
/>
7981
</k-field>
8082
</template>
8183

82-
8384
<script>
8485
export default {
8586
extends: 'k-files-field',
@@ -124,22 +125,38 @@ export default {
124125
},
125126
/**
126127
* Loads a clipped preview
127-
* @param id
128+
* @param image_id
128129
* @param clip
129130
*/
130-
getPreview(id, clip) {
131+
getPreview(image_id, clip) {
131132
this.$api
132133
.post(this.endpoints.field + "/preview", {
133-
id: id,
134+
id: image_id,
134135
width: clip.width,
135136
height: clip.height,
136137
top: clip.top,
137138
left: clip.left
138139
})
139140
.then(data => {
140141
if (data.image) {
141-
let updated_image = this.selected.find(image => image.id === id);
142-
updated_image.image = data.image;
142+
let field_name = this.name;
143+
let content_id = this.$store.state.content.current;
144+
let field_model = this.$store.getters["content/values"](content_id)[field_name];
145+
146+
// regular field
147+
// update vuex store with new thumbnail urls
148+
if (field_model) {
149+
let changed_image = field_model.find(image => image.id === image_id);
150+
// new preview image to image model
151+
changed_image.image = data.image;
152+
this.$store.dispatch("content/update", [field_name, field_model, content_id])
153+
}
154+
// field inside a structure field
155+
// store gets automatically updated when OK clicked
156+
else {
157+
let updated_image = this.selected.find(image => image.id === image_id);
158+
updated_image.image = data.image;
159+
}
143160
}
144161
else {
145162
throw new Error("image clip: no image for preview received.")

0 commit comments

Comments
 (0)