Dev 1.4.0 (#56)

* code cleanup, library updates, add webp to supported files * adding conditional to determine file extension using new image_editor_output_format hook (#54) * fix typo, add benjibee to readme * fix refactoring bugs Co-authored-by: Volkmar Kantor <volkmar.kantor@gmx.de> Co-authored-by: Benji Bilheimer <git@benjibee.com>
vollyimnetz · Sep 1, 2021 · b76120d · b76120d
1 parent 888c6b6
commit b76120d
Show file tree

Hide file tree

Showing 18 changed files with 2,410 additions and 18,301 deletions.
diff --git a/__dev/babel.config.js b/__dev/babel.config.js
diff --git a/__dev/package-lock.json b/__dev/package-lock.json
diff --git a/__dev/package.json b/__dev/package.json
@@ -9,18 +9,23 @@
     "build": "vue-cli-service build",
     "export": "node export.js"
   },
+  "babel": {
+    "presets": [
+      "@vue/cli-plugin-babel/preset"
+    ]
+  },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "cropperjs": "^1.5.9",
-    "vue": "^2.6.11"
+    "core-js": "^3.16.4",
+    "cropperjs": "^1.5.12",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
     "copy-dir": "^1.3.0",
-    "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.0",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.38.2",
+    "sass-loader": "^10.2.0",
+    "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [
     "> 1%",

diff --git a/__dev/src/components/cropeditor.vue b/__dev/src/components/cropeditor.vue
@@ -121,20 +121,10 @@
 import loadingcontainer from './loadingcontainer.vue';
 import message from './message.vue';
 export default {
+    components: { loadingcontainer, message },
     props:{
-        imageId : {
-            required: true,
-            type:Number
-        },
-        posttype : {
-            required:false,
-            type:String,
-            default:null
-        }
-    },
-    components: {
-        loadingcontainer,
-        message
+        imageId : { required: true, type:Number },
+        posttype : { required:false, type:String, default:null },
     },
     data:() =>({
         cropData : null,//

diff --git a/__dev/src/components/loadingcontainer.vue b/__dev/src/components/loadingcontainer.vue
@@ -14,49 +14,40 @@
 <script>
 export default {
     props:{
-        image : {
-            required: true,
-            type:String
-        }
-    },
-    data:function() {
-        return {
-            status:null
-        };
+        image : { required: true, type:String }
     },
+    data: () => ({
+        status:null
+    }),
+    mounted() { this.setup(); },
     watch:{
-        image:function() {
+        image() {
             this.setup();
         }
     },
-    mounted:function() {
-        this.setup();
-    },
     methods:{
-        setup : function() {
-            var that = this;
-            that.setStart();
-            setTimeout(function() {
-                var imgLoad = imagesLoaded( that.$el );
+        setup() {
+            this.setStart();
+            setTimeout(() => {
+                var imgLoad = imagesLoaded( this.$el );
                 imgLoad
-                    .once('done',function() {
-                        if(that.status!=='failed') {
-                            that.setComplete();
+                    .once('done',() => {
+                        if(this.status!=='failed') {
+                            this.setComplete();
                         }
                     })
-                    .once('fail',function() {
-                        that.setFailed();
-                    })
-                    ;
+                    .once('fail',() => {
+                        this.setFailed();
+                    });
             },300);
         },
-        setComplete : function() {
+        setComplete() {
             this.status = 'completed';
         },
-        setStart : function() {
+        setStart() {
             this.status = 'loading';
         },
-        setFailed : function() {
+        setFailed() {
             this.status = 'failed';
         }
     }

diff --git a/__dev/src/components/message.vue b/__dev/src/components/message.vue
@@ -8,13 +8,11 @@
 <script>
 export default {
     props:{},
-    data:function() {
-        return {
-            closed:false
-        };
-    },
+    data:() => ({
+        closed:false
+    }),
     methods:{
-        close : function() {
+        close() {
             this.closed = true;
         }
     }

diff --git a/__dev/src/components/settingsscreen.vue b/__dev/src/components/settingsscreen.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="settingsData">
         <div class="cptSettingsPostListDescription">{{settingsData.lang.choose_image_sizes}}</div>
 
         <ul class="cptSettingsPostList">
@@ -34,23 +34,18 @@
 <script>
 export default {
     props: {
-        settings: {
-            required: true
-        },
+        settings: { required: true },
     },
     components: {},
-    data: function () {
-        return {
-            settingsData: JSON.parse(this.settings)
-        };
-    },
-    mounted: function () { },
-    computed: {},
+    data:() => ({
+        settingsData: null,
+    }),
+    mounted() { this.settingsData =  JSON.parse(this.settings); },
     methods: {
-        isButtonHiddenOnPostType : function(postType) {
+        isButtonHiddenOnPostType(postType) {
             return (this.settingsData.options && this.settingsData.options.hide_post_type && this.settingsData.options.hide_post_type[postType] === "1");
         },
-        isImageSizeHidden : function(postType,imageSize) {
+        isImageSizeHidden(postType,imageSize) {
             return (this.settingsData.options && this.settingsData.options.hide_size && this.settingsData.options.hide_size[postType] && this.settingsData.options.hide_size[postType][imageSize] === "1");
         }
     }

diff --git a/__dev/src/native/init.clickhandler.js b/__dev/src/native/init.clickhandler.js
@@ -2,7 +2,7 @@
  * Create Listener for click-events with element-class ".cropThumbnailsLink".
  * Open the modal box.
  */
-jQuery(document).ready(function($) {
+jQuery(function($) {
 	$(document).on('click', '.cropThumbnailsLink', function(e) {
 		e.preventDefault();
 

diff --git a/__dev/src/native/init.settingsscreen.js b/__dev/src/native/init.settingsscreen.js
@@ -1,11 +1,10 @@
 
 import cptSettingsscreen from './../components/settingsscreen.vue'
 import Vue from 'vue';
-jQuery(document).ready(function ($) {
+jQuery(function ($) {
     if($('body.settings_page_page-cpt').length>0) {
         CROP_THUMBNAILS_VUE.app = new Vue({
             el: '#cpt_settings_settingsscreen',
-            mounted: function () {console.log('cpt_settings_settingsscreen mounted')},
             components: {
                 cptSettingsscreen
             }

diff --git a/app/css/app.css b/app/css/app.css
diff --git a/app/js/app.js b/app/js/app.js
diff --git a/app/js/app.js.map b/app/js/app.js.map
diff --git a/app/js/chunk-vendors.js b/app/js/chunk-vendors.js
diff --git a/app/js/chunk-vendors.js.map b/app/js/chunk-vendors.js.map
diff --git a/crop-thumbnails.php b/crop-thumbnails.php
@@ -4,7 +4,7 @@
  * Plugin URI: https://wordpress.org/extend/plugins/crop-thumbnails/
  * Author: Volkmar Kantor
  * Author URI: https://www.totalmedial.de
- * Version: 1.3.1
+ * Version: 1.4.0
  * Description: The easy way to adjust your cropped image sizes.
  * 
  * 
@@ -26,20 +26,10 @@
  */
 
 
-define('CROP_THUMBNAILS_VERSION','1.3.1');
+define('CROP_THUMBNAILS_VERSION','1.4.0');
 
-
-/**
- * returns the WpVersion in as a float
- */
-function cptGetWpVersion() {
-	$version = get_bloginfo('version');
-	$version = floatval(substr($version,0,3));
-	return $version;
-}
-
-include_once(__DIR__.'/functions/helper.php');
-include_once(__DIR__.'/functions/settingsscreen.php');
-include_once(__DIR__.'/functions/editor.php');
-include_once(__DIR__.'/functions/backendpreparer.php');
-include_once(__DIR__.'/functions/save.php');
+include_once __DIR__.'/functions/helper.php';
+include_once __DIR__.'/functions/settingsscreen.php';
+include_once __DIR__.'/functions/editor.php';
+include_once __DIR__.'/functions/backendpreparer.php';
+include_once __DIR__.'/functions/save.php';
diff --git a/functions/backendpreparer.php b/functions/backendpreparer.php
@@ -5,7 +5,7 @@
  */
 class CropPostThumbnailsBackendPreparer {
 
-	protected $allowedMime = ['image/jpeg','image/png'];
+	protected $allowedMime = ['image/webp','image/jpeg','image/png'];
 
 	public function __construct() {
 		if ( is_admin() ) {

diff --git a/functions/save.php b/functions/save.php
@@ -388,6 +388,17 @@ protected static function generateFilename( $file, $imageMetadata, $w, $h, $crop
 		$info = pathinfo($file);
 		$dir = $info['dirname'];
 		$ext = $info['extension'];
+
+		/**
+		 * since WordPress 5.8 the image extension / MIME type may differ from that of the
+		 * original file so we'll use the below hook to check if any defaults are overwritten.
+		 */
+		$outputFormats = apply_filters('image_editor_output_format', [], $file);
+		$fileTypeInformations = wp_check_filetype($file);
+		if(isset($outputFormats[$fileTypeInformations['type']])) {
+			$ext = array_search($outputFormats[$fileTypeInformations['type']], wp_get_mime_types(), true);
+		}
+
 		$name = wp_basename($file, '.'.$ext);
 		if(!empty($imageMetadata['original_image'])) {
 			$name = wp_basename($imageMetadata['original_image'], '.'.$ext);

diff --git a/readme.txt b/readme.txt
@@ -3,9 +3,9 @@ Contributors: volkmar-kantor
 Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=volkmar%2ekantor%40gmx%2ede&lc=DE&item_name=Volkmar%20Kantor%20%2d%20totalmedial%2ede&item_number=crop%2dthumbnails&no_note=0&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHostedGuest
 Tags: post-thumbnails, images, media library
 Requires at least: 4.6
-Tested up to: 5.7.0
+Tested up to: 5.8.0
 Requires PHP: 5.6.0
-Stable tag: 1.3.1
+Stable tag: 1.4.0
 License: GPL v3
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 
@@ -124,6 +124,12 @@ If you fork and planning to publish the forked plugin, please contact me.
 5. Quicktest on settings-page, to check if your system is correct setup.
 
 == Changelog ==
+= 1.4.0 =
+* its possible to crop webp files with the plugin
+* library updates
+* code cleanup
+* add fix for using replacement MIME-type specified for sub-sizes (thanks to https://github.com/benjibee - https://github.com/vollyimnetz/crop-thumbnails/issues/55)
+
 = 1.3.1 =
 * crop-editor: if grouped, the notification for not yet cropped image-sizes now is visible if at least one of the images in the group is not yet cropped
 * fix bug on settings page (noticible only on strict configured php environments)