Merge branch 'develop'

README.md

@@ -69,7 +69,7 @@ query: site.find('photography').children.images.filterBy('template', 'cover')
 ```
 
 ### Panel thumb size
-In kirbys config.pgp you can adjust the maximal thumbnail sizes that are displayed in the `image-clip` field.
+In kirbys config.php you can adjust the maximal thumbnail sizes that are displayed in the `image-clip` field.
 Default is 400px width or 400px height for cards and 100px width or 100px height for lists. 
 
 If your cards get bigger you might want to adjust the numbers to 800x800px.
@@ -92,6 +92,7 @@ __Note__: This is only about thumbnail quality in the panel. You don't need to m
 
 ## Frontend Usage
 How to fetch the images defined in a `image-clip` field.
+Read about the `clip()` method a bit further down.
 #### Multiple Images
 ```php
 foreach($page->myimages()->toImages() as $image) {
@@ -112,6 +113,8 @@ if ($image = $page->myimages()->toImage()) {
 
 
 #### `$file->clip()`
+Clip and resize. Generates a Thumbnail of the clip area.
+
 Adapter for `$file->thumb()`. Returns a FileVersion|File Object.
 ```php
 $file->clip(200, 300);   // bestfit
@@ -120,7 +123,6 @@ $file->clip(null, 300);  // height 300px
 $file->clip();           // clip area without resizing
 ```
 - Used in combination with the `image-clip` Field, invokes automatically field clip data.
-- Generates a Thumbnail of the clip area.
 - Arguments: `clip(width, height)`
     - if `width` and `height` are both defined, the image will be resized with `bestfit`
 

components/thumb.php

@@ -15,6 +15,9 @@
  */
 return function (App $kirby, string $src, string $dst, array $options) {
     if (isset($options['clip'])) {
+
+        $types = Kirby\Image\Darkroom::$types;
+
         Kirby\Image\Darkroom::$types['gd'] = 'mullema\GdLib';
         Kirby\Image\Darkroom::$types['im'] = 'mullema\ImageMagick';
 
@@ -23,6 +26,10 @@
         $root     = (new mullema\Filename($src, $dst, $options))->toString();
         F::copy($src, $root);
         $darkroom->process($root, $options);
+
+        // reset types
+        Kirby\Image\Darkroom::$types = $types;
+
         return $root;
     }
 

src/components/clipCard.vue

@@ -1,7 +1,7 @@
 <template>
     <figure class="k-card" v-on="$listeners">
         <k-sort-handle class="native" v-if="sortable" />
-        <k-clip-handle v-if="resizable" @clicked="openClipDialog" />
+        <k-clip-handle v-if="resizable && !disabled" @clicked="openClipDialog" />
 
         <component :is="wrapper" :to="link" :target="target">
             <k-image
@@ -53,7 +53,8 @@
         extends: 'k-card',
         props: {
             id: String,
-            resizable: Boolean
+            resizable: Boolean,
+            disabled: Boolean
         },
         methods: {
             openClipDialog() {

src/components/clipDialog.vue

@@ -7,7 +7,7 @@
             </div>
             <div class="k-dialog-body" v-if="image">
 
-                <div class="preload" v-if="showSpinner">
+                <div class="preload" v-if="spinner">
                     <div class="spinner">
                         <div class="bounce1"></div>
                         <div class="bounce2"></div>
@@ -51,7 +51,8 @@
 
 <script>
     import Croppr from "../facade/CropprFacade.js";
-    import aspectRatioFit from "../helpers/aspectRatioFit.js"
+    import aspectRatioFit from "../helpers/aspectRatioFit.js";
+    import debounce from '../helpers/debounce.js';
 
     export default {
         extends: 'k-dialog',
@@ -69,20 +70,21 @@
             return {
                 cropprInstance: null,
                 dialog_width: null,
-                showSpinner: true
+                spinner: true
             }
         },
         watch: {
             isOpen (newVal, oldVal) {
                 if (newVal === true) {
                     this.setDialogWidth();
-                    // resize dialog opened
+                    // dialog opened
                     this.$nextTick(() => {
                         let el = document.getElementById('croppr');
 
-                        el.addEventListener("load", (event) => {
-                            this.showSpinner = false;
-                        });
+                        el.addEventListener("load", this.hideSpinner, false);
+                        if (el.complete) { // if already in cache
+                            this.hideSpinner();
+                        }
 
                         try {
                             this.cropprInstance = new Croppr({
@@ -91,6 +93,11 @@
                                 clip: this.clip,
                                 saved: this.image.clip
                             });
+
+                            // on window resize show spinner and reset Croppr Instance
+                            window.addEventListener("resize", this.showSpinner, false);
+                            window.addEventListener("resize", this.resizeDialog, false);
+
                         }
                         catch(error) {
                             this.cancel();
@@ -99,6 +106,10 @@
                         }
                     });
                 }
+                else {
+                    window.removeEventListener("resize", this.showSpinner, false);
+                    window.removeEventListener("resize", this.resizeDialog, false);
+                }
             }
         },
         methods: {
@@ -114,7 +125,7 @@
             },
             setDialogWidth() {
                 let max_width = window.innerWidth - this.remToPx(6);
-                let max_height = window.innerHeight - this.remToPx(6);
+                let max_height = window.innerHeight - this.remToPx(12);
 
                 let size = aspectRatioFit({
                     srcWidth: this.image.dimensions.width,
@@ -129,6 +140,20 @@
                 }
 
                 this.dialog_width = "width: " + width + "px;";
+            },
+            resizeDialog: debounce(function() {
+                this.setDialogWidth();
+                let last_known = this.cropprInstance.getCropArea();
+                this.cropprInstance.reset({position: last_known});
+                this.spinner = false;
+            }, 500),
+            hideSpinner: function() {
+                this.spinner = false;
+            },
+            showSpinner: function() {
+                if (this.spinner === false) {
+                    this.spinner = true;
+                }
             }
         }
     }

src/facade/CropprFacade.js

@@ -1,6 +1,5 @@
 import Croppr from 'croppr';
-import debounce from '../helpers/debounce.js'
-import aspectRatioFit from "../helpers/aspectRatioFit.js"
+import aspectRatioFit from "../helpers/aspectRatioFit.js";
 
 /**
  * Facade to Croppr
@@ -27,17 +26,15 @@ export default class {
 
         this.validate();
         this.cropInstance = this.init();
-
-        window.addEventListener("resize", debounce(
-            this.reset.bind(this)
-        , 500), false);
     }
 
     /**
      * reset all of the croppr instance and adjust to new environment
+     * @param {Object} position - last known position of crop area
      */
-    reset() {
+    reset({position}) {
         this.cropInstance.destroy();
+        this.saved = position;
         this.cropInstance = this.init();
     }
 
@@ -56,7 +53,7 @@ export default class {
                     this.factor_w = this.original_dimensions.width / event.target.clientWidth;
                     this.factor_h = this.original_dimensions.height / event.target.clientHeight;
                     this.setStartPosition();
-                });
+                }, false);
             }
         };
 

src/fields/imageClip.vue

@@ -1,10 +1,10 @@
 <template>
     <k-field v-bind="$props" class="k-files-field">
         <k-button
-                v-if="more"
-                slot="options"
-                icon="add"
-                @click="open"
+            v-if="more && !disabled"
+            slot="options"
+            icon="add"
+            @click="open"
         >
             {{ $t('select') }}
         </k-button>
@@ -20,17 +20,19 @@
                     v-for="(file, index) in selected"
                     :is="elements.item"
                     :key="file.filename"
-                    :sortable="selected.length > 1"
+                    :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="disabled"
                     @openclipdialog="openClipDialog"
                 >
                     <k-button
+                        v-if="!disabled"
                         slot="options"
                         :tooltip="$t('remove')"
                         icon="remove"
@@ -43,7 +45,7 @@
             v-else
             :layout="layout"
             icon="image"
-            @click="open"
+            @click="shouldOpen"
         >
             {{ empty || $t('field.files.empty') }}
         </k-empty>
@@ -58,6 +60,7 @@
     </k-field>
 </template>
 
+
 <script>
 export default {
     extends: 'k-files-field',
@@ -91,6 +94,12 @@ export default {
         },
     },
     methods: {
+        // quickfix https://github.com/getkirby/kirby/issues/1752
+        shouldOpen() {
+           if (this.more && !this.disabled)  {
+               this.open();
+           }
+        },
         openClipDialog(id) {
             this.clip_image = this.value.find(item => item.id === id);
             this.$refs.clip.open();