Merge branch 'develop'

README.md

@@ -35,7 +35,8 @@ composer require mullema/k3-image-clip
 ```
 
 ### Requirements
-- Kirby 3.2.5
+- Kirby 3.3 -> use v2.1.0
+- Kirby 3.2.5 -> use v2.0.0
 - GD Library or ImageMagick
 
 ## Consider a donation

classes/FilePicker.php

@@ -0,0 +1,44 @@
+<?php
+
+
+namespace mullema;
+
+use Kirby\Cms;
+
+class FilePicker extends CMS\FilePicker
+{
+    /**
+     * Overwrite https://github.com/getkirby/kirby/blob/master/src/Cms/Picker.php#L89
+     *
+     * Adds clip field specific properties
+     *
+     * @param \Kirby\Cms\Collection|null $items
+     * @return array
+     */
+    public function itemsToArray($items = null): array
+    {
+        if ($items === null) {
+            return [];
+        }
+        $result = [];
+        foreach ($items as $index => $item) {
+            if (empty($this->options['map']) === false) {
+                $result[] = $this->options['map']($item);
+            } else {
+                $result[] = array_merge(
+                    $item->panelPickerData([
+                        'image' => $this->options['image'],
+                        'info'  => $this->options['info'],
+                        'model' => $this->options['model'],
+                        'text'  => $this->options['text'],
+                    ]),
+                    // append more information for clip field
+                    [
+                        'resizable' => $item->isResizable(),
+                        'dimensions' => $item->dimensions()
+                    ]);
+            }
+        }
+        return $result;
+    }
+}

fields/image-clip.php

@@ -2,6 +2,7 @@
 
 use Kirby\Data\Yaml;
 use mullema\File;
+use mullema\FilePicker;
 
 $base = require kirby()->root('kirby') . DIRECTORY_SEPARATOR . 'config' . DIRECTORY_SEPARATOR . 'fields' . DIRECTORY_SEPARATOR . 'files.php';
 
@@ -60,43 +61,15 @@
 
             return $files;
         },
-        // Adapt filepicker https://github.com/getkirby/kirby/blob/80b69380e672565a849037232c9951d1e32774c8/config/fields/mixins/filepicker.php
+
+        /**
+         * Overwrite the filepicker mixin https://github.com/getkirby/kirby/blob/master/config/fields/mixins/filepicker.php
+         * use own FilePicker class
+         */
+        // Overwrite filepicker mixin
         'filepicker' => function (array $params = []) {
-            // fetch the parent model
-            $model = $this->model();
-            // find the right default query
-            if (empty($params['query']) === false) {
-                $query = $params['query'];
-            } elseif (is_a($model, 'Kirby\Cms\File') === true) {
-                $query = 'file.siblings';
-            } else {
-                $query = $model::CLASS_ALIAS . '.files';
-            }
-            // fetch all files for the picker
-            $files = $model->query($query, 'Kirby\Cms\Files');
-            $data  = [];
-            // prepare the response for each file
-            foreach ($files as $index => $file) {
-                if (empty($params['map']) === false) {
-                    $data[] = $params['map']($file);
-                } else {
-
-                    // adapt for clip field
-                    $data[] = array_merge(
-                        $file->panelPickerData([
-                            'image' => $params['image'] ?? [],
-                            'info'  => $params['info'] ?? false,
-                            'model' => $model,
-                            'text'  => $params['text'] ?? '{{ file.filename }}',
-                        ]),
-                        // append more information for clip field
-                        [
-                            'resizable' => $file->isResizable(),
-                            'dimensions' => $file->dimensions()
-                        ]);
-                }
-            }
-            return $data;
+            $params['model'] = $this->model();
+            return (new FilePicker($params))->toArray();
         }
     ],
 
@@ -109,10 +82,13 @@
                     $field = $this->field();
 
                     return $field->filepicker([
-                        'query' => $field->query(),
-                        'image' => $field->image(),
-                        'info'  => $field->info(),
-                        'text'  => $field->text()
+                        'image'  => $field->image(),
+                        'info'   => $field->info(),
+                        'limit'  => $field->limit(),
+                        'page'   => $this->requestQuery('page'),
+                        'query'  => $field->query(),
+                        'search' => $this->requestQuery('search'),
+                        'text'   => $field->text()
                     ]);
                 }
             ],

index.php

@@ -5,6 +5,7 @@
     'mullema\\Filename' => 'classes/Filename.php',
     'mullema\\GdLib' => 'classes/GdLib.php',
     'mullema\\Imagemagick' => 'classes/ImageMagick.php',
+    'mullema\\FilePicker' => 'classes/FilePicker.php'
 ], __DIR__);
 
 Kirby::plugin('mullema/k3-image-clip', [

src/fields/imageClip.vue

@@ -27,59 +27,60 @@
 
         <template v-if="selected.length">
             <k-draggable
-                :element="elements.list"
-                :list="selected"
-                :data-size="size"
-                :handle="true"
-                @end="onInput"
+                    :element="elements.list"
+                    :list="selected"
+                    :data-size="size"
+                    :handle="true"
+                    :data-invalid="isInvalid"
+                    @end="onInput"
             >
                 <component
-                    v-for="(file, index) in selected"
-                    :is="elements.item"
-                    :key="file.filename"
-                    :sortable="!disabled && selected.length > 1"
-                    :text="file.text"
-                    :link="file.link"
-                    :info="file.info"
-                    :image="file.image"
-                    :icon="file.icon"
+                        v-for="(file, index) in selected"
+                        :is="elements.item"
+                        :key="file.filename"
+                        :sortable="!disabled && selected.length > 1"
+                        :text="file.text"
+                        :link="file.link"
+                        :info="file.info"
+                        :image="file.image"
+                        :icon="file.icon"
 
-                    :id="file.id"
-                    :resizable="file.resizable"
-                    :disabled="file.disabled"
-                    @openclipdialog="openClipDialog"
+                        :id="file.id"
+                        :resizable="file.resizable"
+                        :disabled="file.disabled"
+                        @openclipdialog="openClipDialog"
                 >
                     <k-button
-                        v-if="!disabled"
-                        slot="options"
-                        :tooltip="$t('remove')"
-                        icon="remove"
-                        @click="remove(index)"
+                            v-if="!disabled"
+                            slot="options"
+                            :tooltip="$t('remove')"
+                            icon="remove"
+                            @click="remove(index)"
                     />
                 </component>
             </k-draggable>
         </template>
         <k-empty
-            v-else
-            :layout="layout"
-            icon="image"
-            @click="open"
+                v-else
+                :layout="layout"
+                icon="image"
+                :data-invalid="isInvalid"
+                @click="open"
         >
             {{ empty || $t('field.files.empty') }}
         </k-empty>
         <k-files-dialog ref="selector" @submit="select" />
         <k-upload ref="fileUpload" @success="selectUpload" />
         <k-clip-dialog
-            ref="clip"
-            size="large"
-            :image="clip_image"
-            :clip="clip"
-            @submit="clippedArea"
+                ref="clip"
+                size="large"
+                :image="clip_image"
+                :clip="clip"
+                @submit="clippedArea"
         />
     </k-field>
 </template>
 
-
 <script>
 export default {
     extends: 'k-files-field',
@@ -124,22 +125,38 @@ export default {
         },
         /**
          * Loads a clipped preview
-         * @param id
+         * @param image_id
          * @param clip
          */
-        getPreview(id, clip) {
+        getPreview(image_id, clip) {
             this.$api
                 .post(this.endpoints.field + "/preview", {
-                    id: id,
+                    id: image_id,
                     width: clip.width,
                     height: clip.height,
                     top: clip.top,
                     left: clip.left
                 })
                 .then(data => {
                     if (data.image) {
-                        let updated_image = this.selected.find(image => image.id === id);
-                        updated_image.image = data.image;
+                        let field_name = this.name;
+                        let content_id = this.$store.state.content.current;
+                        let field_model = this.$store.getters["content/values"](content_id)[field_name];
+
+                        // regular field
+                        // update vuex store with new thumbnail urls
+                        if (field_model) {
+                            let changed_image = field_model.find(image => image.id === image_id);
+                            // new preview image to image model
+                            changed_image.image = data.image;
+                            this.$store.dispatch("content/update", [field_name, field_model, content_id])
+                        }
+                        // field inside a structure field
+                        // store gets automatically updated when OK clicked
+                        else {
+                            let updated_image = this.selected.find(image => image.id === image_id);
+                            updated_image.image = data.image;
+                        }
                     }
                     else {
                         throw new Error("image clip: no image for preview received.")