Merge branch 'develop'

.gitignore

@@ -1,2 +1,10 @@
-node_modules/*
+# OS files
+.DS_Store
+
+# npm modules
+/node_modules
+
+# Composer files
+/vendor
+
 package-lock.json

README.md

@@ -35,6 +35,7 @@ composer require mullema/k3-image-clip
 ```
 
 ### Requirements
+- Kirby 3.6 -> use v3
 - Kirby 3.5 -> use v2.2.0
 - Kirby 3.3 -> use v2.1.0
 - Kirby 3.2.5 -> use v2.0.0

classes/FilePicker.php

@@ -22,13 +22,15 @@ public function itemsToArray($items = null): array
         }
         $result = [];
         foreach ($items as $index => $item) {
+
             if (empty($this->options['map']) === false) {
                 $result[] = $this->options['map']($item);
             } else {
                 $result[] = array_merge(
-                    $item->panelPickerData([
+                    $item->panel()->pickerData([
                         'image' => $this->options['image'],
                         'info'  => $this->options['info'],
+                        'layout' => $this->options['layout'],
                         'model' => $this->options['model'],
                         'text'  => $this->options['text'],
                     ]),

composer.json

@@ -1,15 +1,19 @@
 {
   "name": "mullema/k3-image-clip",
-  "description": "Visual image clip for Kirby3.",
+  "description": "Visual image clip for Kirby 3",
   "type": "kirby-plugin",
   "license": "MIT",
   "authors": [
     {
       "name": "Matthias Müller",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "homepage": "https://getkirby.com/plugins/mullema"
     }
   ],
   "require": {
-    "getkirby/composer-installer": "^1.1"
+    "getkirby/composer-installer": "^1.2"
+  },
+  "extra": {
+    "installer-name": "k3-image-clip"
   }
-}
+}

fields/image-clip.php

@@ -1,6 +1,6 @@
 <?php
 
-use Kirby\Data\Yaml;
+use Kirby\Data\Data;
 use mullema\File;
 use mullema\FilePicker;
 
@@ -9,7 +9,7 @@
 return array_replace_recursive($base, [
     'props' => [
         'clip' => function ($clip = []) {
-            return Yaml::decode($clip);
+            return Data::decode($clip, 'yaml');
         }
     ],
     'methods' => [
@@ -25,11 +25,12 @@
             }
 
             return array_merge(
-                $file->panelPickerData([
+                $file->panel()->pickerData([
                     'image' => $this->image,
-                    'info'  => $this->info ?? false,
+                    'info' => $this->info ?? false,
+                    'layout' => $this->layout,
                     'model' => $this->model(),
-                    'text'  => $this->text,
+                    'text' => $this->text,
                 ]),
                 // append more information for clip field
                 [
@@ -40,23 +41,22 @@
         },
         'toFiles' => function ($value = null) {
             $files = [];
-                foreach (Yaml::decode($value) as $item) {
-
-                    // read from native files field
-                    if (!is_array($item)) {
-                        $id = $item;
-                        $clip = null;
-                    }
-                    // read image-clip field
-                    else {
-                        $id = $item['id'];
-                        $clip = $item['clip'] ?? null;
-                    }
+            foreach (Data::decode($value, 'yaml') as $item) {
+
+                // read from native files field
+                if (!is_array($item)) {
+                    $id = $item;
+                    $clip = null;
+                } // read image-clip field
+                else {
+                    $id = $item['id'];
+                    $clip = $item['clip'] ?? null;
+                }
 
-                    if ($id !== null && ($file = $this->kirby()->file($id, $this->model()))) {
-                        // add clip as parameter to fileResponse call
-                        $files[] = $this->fileResponse($file, $clip);
-                    }
+                if ($id !== null && ($file = $this->kirby()->file($id, $this->model()))) {
+                    // add clip as parameter to fileResponse call
+                    $files[] = $this->fileResponse($file, $clip);
+                }
             }
 
             return $files;
@@ -78,34 +78,36 @@
             // native field routes
             [
                 'pattern' => '/',
-                'action'  => function () {
+                'action' => function () {
                     $field = $this->field();
 
                     return $field->filepicker([
-                        'image'  => $field->image(),
-                        'info'   => $field->info(),
-                        'limit'  => $field->limit(),
-                        'page'   => $this->requestQuery('page'),
-                        'query'  => $field->query(),
+                        'image' => $field->image(),
+                        'info' => $field->info(),
+                        'layout' => $field->layout(),
+                        'limit' => $field->limit(),
+                        'page' => $this->requestQuery('page'),
+                        'query' => $field->query(),
                         'search' => $this->requestQuery('search'),
-                        'text'   => $field->text()
+                        'text' => $field->text()
                     ]);
                 }
             ],
             [
                 'pattern' => 'upload',
-                'method'  => 'POST',
-                'action'  => function () {
-                    $field   = $this->field();
+                'method' => 'POST',
+                'action' => function () {
+                    $field = $this->field();
                     $uploads = $field->uploads();
 
                     return $field->upload($this, $uploads, function ($file, $parent) use ($field) {
                         return array_merge(
-                            $file->panelPickerData([
+                            $file->panel()->pickerData([
                                 'image' => $field->image(),
-                                'info'  => $field->info(),
+                                'info' => $field->info(),
+                                'layout' => $field->layout(),
                                 'model' => $field->model(),
-                                'text'  => $field->text(),
+                                'text' => $field->text(),
                             ]),
                             // append more information for clip field
                             [
@@ -125,14 +127,14 @@
                 'action' => function () {
                     $id = get('id');
                     $clip = [
-                        'width' => (int) get('width'),
-                        'height' => (int) get('height'),
-                        'top' => (int) get('top'),
-                        'left' => (int) get('left')
+                        'width' => (int)get('width'),
+                        'height' => (int)get('height'),
+                        'top' => (int)get('top'),
+                        'left' => (int)get('left')
                     ];
 
                     // from https://github.com/getkirby/kirby/blob/3.2.4/config/helpers.php#L251
-                    $uri      = dirname($id);
+                    $uri = dirname($id);
                     $filename = basename($id);
 
                     if ($uri === '.') {
@@ -162,10 +164,9 @@
                         $file->setClip($clip);
 
                         return [
-                            'image' => $file->panelImage(),
+                            'image' => $file->panel()->image([], $this->field()->layout),
                         ];
-                    }
-                    else {
+                    } else {
                         throw new Exception("Clip: Could not find image parent.");
                     }
                 }
@@ -181,8 +182,7 @@
                     'id' => $item['id'],
                     'clip' => $item['clip']
                 ];
-            }
-            else {
+            } else {
                 $result[] = [
                     'id' => $item['id']
                 ];

package.json

@@ -1,21 +1,18 @@
 {
   "name": "k3-image-clip",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "Visual image clip for Kirby3.",
   "author": "Matthias Müller <[email protected]>",
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "dev": "bili --watch",
-    "build": "bili"
-  },
-  "devDependencies": {
-    "bili": "^4.8.1",
-    "rollup-plugin-img": "^1.1.0",
-    "rollup-plugin-vue": "^5.0.1",
-    "vue-template-compiler": "^2.6.10"
+    "dev": "kirbyup src/main.js --watch",
+    "build": "kirbyup src/main.js"
   },
   "dependencies": {
     "croppr": "github:mullema/Croppr.js"
+  },
+  "devDependencies": {
+    "kirbyup": "^0.16.0"
   }
 }

src/components/clipButton.vue

@@ -1,32 +1,32 @@
 <template>
   <span class="k-button clip" aria-hidden="true">
-    <img @click="open"  src="../../assets/clip.png" alt="Clip" class="clipicon" />
+    <img @click="open" src="../../assets/clip.png" alt="Clip" class="clipicon"/>
   </span>
 </template>`
 
 <script>
-    export default {
-        extends: 'k-sort-handle',
-        methods: {
-            open() {
-                this.$emit('clicked')
-            }
-        }
+export default {
+  extends: 'k-sort-handle',
+  methods: {
+    open () {
+      this.$emit('clicked')
     }
+  }
+}
 </script>
 
 <style scoped>
-    .clip {
-        cursor: pointer;
-        padding: 5px;
-    }
+.clip {
+  cursor: pointer;
+  padding: 5px;
+}
 
-    .clip:hover {
-        background: #eee;
-    }
+.clip:hover {
+  background: #eee;
+}
 
-    .clipicon {
-        width: 2em;
-        height: 2em;
-    }
+.clipicon {
+  width: 2em;
+  height: 2em;
+}
 </style>

src/components/clipDialog.vue

@@ -3,6 +3,7 @@
       ref="overlay"
       :autofocus="autofocus"
       :centered="true"
+      @close="onOverlayClose"
       @ready="$emit('ready')"
   >
     <div
@@ -90,12 +91,12 @@ export default {
     }
   },
   created () {
-    this.$on('ready', this.isOpen, false)
-    this.$on('close', this.isClosed, false)
+    this.$on('ready', this.isOpen)
+    this.$on('close', this.isClosed)
   },
-  destroyed () {
-    this.$off('ready', this.isOpen, false)
-    this.$off('close', this.isClosed, false)
+  beforeDestroy () {
+    this.$off('ready', this.isOpen)
+    this.$off('close', this.isClosed)
   },
   methods: {
     isOpen () {
@@ -113,7 +114,7 @@ export default {
         try {
           this.cropprFacade = new Croppr({
             el: el,
-            original_dimensions: this.image.dimensions,
+            originalDimensions: this.image.dimensions,
             clip: this.clip,
             saved: this.image.clip,
             events: {