SilverStripe 4 upgrade

README.md

@@ -15,14 +15,15 @@ The goal of this module is to introduce some basic art direction to control how
 
 ## Requirements
 
-SilverStripe 3.6+ (SS 3.1+ support available in earlier releases)
+SilverStripe ~4 (SS 3.1+ support available in earlier releases)
 
 ## Documentation
 
 * [Installation](docs/en/installation.md)
 * [Basic Usage](docs/en/basic-usage.md)
 * [Advanced Usage](docs/en/advanced-usage.md)
 * [Troubleshooting](docs/en/troubleshooting.md)
+* [Change log](changelog.md)
 * [License](license.md)
 * [Contributing](contributing.md)
 
@@ -36,9 +37,10 @@ SilverStripe 3.6+ (SS 3.1+ support available in earlier releases)
 
 [jonathonmenz.com](http://jonathonmenz.com)
 
-## Tip jar
+## Sponsorship
 
-If this module helped you out and you want to say thanks, you're welcome to make a small donation or shout me a steam game.
+I don't have much time to donate to open source work anymore but if you're willing to sponsor the development of new features or updates I'm very happy to talk to you - please [get in touch](http://jonathonmenz.com).
+
+Just want to say thanks? You're welcome to make a small donation.
 
 [![Donate via PayPal](http://jonathonmenz.com/static/github/donate_paypal.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=Z5HEZREZSKA6A)
-[![Donate via PayPal](http://jonathonmenz.com/static/github/donate_steam.png)](https://steamcommunity.com/profiles/76561198039777765/wishlist)

_config/config.yml

@@ -1,20 +1,22 @@
 ---
 Name: focuspoint
-After: 'framework/*','cms/*'
+After:
+    - 'assetsimage'
 ---
-Image:
+SilverStripe\Assets\Image:
   extensions:
-    - FocusPointImage
-
-# FocusPointField:
-#   debug: true
-#   max_width: 500
-#   max_height: 300
-
-# Injector:
-#   Image:
-#     class: FPImage
-#   Image_Cached:
-#     class: FPImage_Cached
-#   ImagickBackend:
-#     class: "FPImagickBackend"
+    - JonoM\FocusPoint\FocusPointImageExtension
+SilverStripe\Assets\Storage\DBFile:
+  extensions:
+    - JonoM\FocusPoint\FocusPointImageExtension
+SilverStripe\AssetAdmin\Forms\AssetFormFactory:
+  extensions:
+    - JonoM\FocusPoint\FocusPointAssetFormFactoryExtension
+SilverStripe\Admin\LeftAndMain:
+  extra_requirements_css:
+    - 'jonom/focuspoint: client/css/FocusPointField.css'
+  extra_requirements_javascript:
+    - 'jonom/focuspoint: client/javascript/FocusPointField.js'
+# SilverStripe\Core\Injector\Injector:
+#   SilverStripe\Assets\Image_Backend:
+#     class: JonoM\FocusPoint\InterventionBackend

changelog.md

@@ -0,0 +1,12 @@
+#  Ch-ch-ch-ch-Changes
+
+> 🎶 Turn and face the strange 🎶
+
+## 3.0
+
+* Injector support was removed as it was buggy. You'll have to use the FocusPoint method names for now instead of SilverStripe's built in cropping methods. :(
+* `flush_on_change` config option was removed as their is no longer a public API for removing resampled images.
+
+## 2.0
+
+* `FocusPointField` was refactored for 2.x. If you're using the class in your own code you will need to update it.

css/FocusPointField.css → client/css/FocusPointField.css

@@ -30,11 +30,10 @@
   transition: background 0.1s ease;
 }
 
-.focuspoint-fieldgroup .fieldgroup-field  {
+.focuspoint-fieldgroup .field.form-group  {
 	display: none;
 }
 
-.focuspoint-fieldgroup .fieldgroup-field:first-child,
-.focuspoint-fieldgroup.debug .fieldgroup-field  {
-	display: block;
+.focuspoint-fieldgroup.debug .field.form-group  {
+	display: inline-block;
 }

javascript/FocusPointField.js → client/javascript/FocusPointField.js

@@ -7,8 +7,22 @@
 				var fieldSelector = "input[name='Focus" + axis.toUpperCase() + "']";
 				return this.closest('.focuspoint-fieldgroup').find(fieldSelector);
 			},
+			dispatchFieldChange: function(axis, value) {
+				var fieldName = (axis === 'x') ? 'FocusX' : 'FocusY';
+				if (window.hasOwnProperty('ss') && window.ss.hasOwnProperty('store')) {
+					window.ss.store.dispatch({
+						type: '@@redux-form/CHANGE',
+						meta: {
+						  form: 'AssetAdmin.EditForm.fileEditForm',
+						  field: fieldName,
+						},
+						payload: value
+					});
+				}
+			},
 			updateGrid: function() {
 				var grid = $(this);
+				// Note: this behaviour is replicated in FocusPointImageExtension.php
 
 				// Get coordinates from text fields
 				var focusX = grid.getCoordField('x').val();
@@ -35,7 +49,6 @@
 				var offsetY = e.pageY - grid.offset().top;
 				var focusX = (offsetX/fieldW - .5)*2;
 				var focusY = (offsetY/fieldH - .5)*-2;
-				// console.log('FocusX: '+focusX+' FocusY: '+focusY);
 
 				// Pass coordinates to form fields
 				this.getCoordField('x').val(focusX);
@@ -44,17 +57,10 @@
 				// Update focus point grid
 				this.updateGrid();
 
-			},
-			onadd: function() {
-				// Position focus grid on form field
-				var grid = $(this);
-				grid.updateGrid();
-				// May not have worked - try again after image loads
-				grid.prev('img').load(function(){
-					grid.updateGrid();
-				});
+				// Updating the inputs isn't enough for React-based asset admin
+				this.dispatchFieldChange('x', focusX);
+				this.dispatchFieldChange('y', focusY);
 			}
-
 		});
 	});
 }(jQuery));

composer.json

@@ -1,14 +1,29 @@
 {
 	"name": "jonom/focuspoint",
+    "type": "silverstripe-vendormodule",
 	"description": "Smarter automatic image cropping for SilverStripe",
-	"type": "silverstripe-module",
 	"keywords": ["silverstripe", "crop", "cropping", "focus", "focuspoint", "image"],
 	"license": "MIT",
 	"authors": [{
 		"name": "Jonathon Menz",
 		"homepage": "http://jonathonmenz.com"
 	}],
 	"require": {
-		"silverstripe/framework": "^3.6"
-	}
+        "silverstripe/vendor-plugin": "^1.0",
+		"silverstripe/framework": "^4.0"
+	},
+    "extra": {
+        "expose": [
+            "client"
+        ],
+        "branch-alias": {
+            "dev-master": "3.x-dev"
+        }
+    },
+    "autoload": {
+        "psr-4": {
+            "JonoM\\FocusPoint\\": "src/",
+            "JonoM\\FocusPoint\\Tests\\": "tests/"
+        }
+    }
 }

docs/en/advanced-usage.md

@@ -1,19 +1,5 @@
 # Advanced usage
 
-## Method replacement
-
-You can swap out the `Image` class using the [injector](https://docs.silverstripe.org/en/developer_guides/extending/injector/) like this:
-
-```yml
-Injector:
-  Image:
-    class: FPImage
-  Image_Cached:
-    class: FPImage_Cached
-```
-
-This will automatically upgrade the built-in cropping methods so that they give you focused output.
-
 ## Method chaining
 
 Image method chaining e.g. `$Image.ScaleHeight(200).FocusCropWidth(200)` should work from SilverStripe 3.3 onwards and update the focus point accordingly. This is helpful if you want to make use of the focal point in templates e.g. for the Responsive Cropping example below.
@@ -78,13 +64,3 @@ If you are caching page content that includes a FocusFill and you edit the image
 ## Fine-tuned cropping in individual contexts
 
 SilverStripe FocusPoint provides an easy and automated way to get better results when forcing an image to be a different aspect ratio. I have some vague plans to offer more fine-grained control over individual crops in the future, but until then I recommend checking out Will Morgan's [SilverStripe CropperField](https://github.com/willmorgan/silverstripe-cropperfield) as an alternative.
-
-## Flush generated images on focus point change
-
-You can specify that resampled versions of an image should be flushed when its focus point is changed by setting the `FocusPointImage.flush_on_change` config value. For example:
-
-```yml
-# config.yml
-FocusPointImage:
-  flush_on_change: true
-```

docs/en/basic-usage.md

@@ -12,5 +12,3 @@ Use just like existing cropping functions but swap out the names:
 - `$FillMax` --> `$FocusFillMax`
 - `$CropWidth` --> `$FocusCropWidth`
 - `$CropHeight` --> `$FocusCropHeight`
-
-Or use the existing names... see 'Method replacement' in [Advanced usage](advanced-usage.md).

docs/en/installation.md

@@ -1,23 +1,7 @@
 # Installation
 
-### Composer (best practice)
-
 ```
 composer require jonom/focuspoint
 ```
 
-See the [packagist listing](https://packagist.org/packages/jonom/focuspoint) and [installation instructions](https://docs.silverstripe.org/en/getting_started/composer/#adding-modules-to-your-project)
-
-### Manually
-
-I promise it's worth your time to learn how to use Composer. If painless updating isn't your thing though you can download and extract this project, rename the module folder 'focuspoint', place it in your project root and run a dev/build?flush=1.
-
-
-### Using Focus Point with ImageMagick
-
-If you are using the ImageMagick you must use [injector](https://docs.silverstripe.org/en/developer_guides/extending/injector/) to replace the ImagickBackend with the wrapper FPImagickBackend for compatibility using the below:
-```yml
-Injector:
-  ImagickBackend:
-    class: "FPImagickBackend"
-```
+See the [packagist listing](https://packagist.org/packages/jonom/focuspoint) and [installation instructions](https://docs.silverstripe.org/en/getting_started/composer/#adding-modules-to-your-project)

docs/en/troubleshooting.md

@@ -1,8 +1,8 @@
 ## Troubleshooting
 
-### Upgrading from 1.x
+### Upgrading
 
-`FocusPointField` was refactored for 2.x. If you're using the class in your own code you will need to update it.
+See the [changelog](../../changelog.md) for upgrade notes
 
 ### Debug CMS field
 
@@ -23,14 +23,8 @@ $MyImage.ScaleWidth(200).DebugFocusPoint
 
 ### The FocusPoint field in the CMS appears broken
 
-If the focus point field shows a non-interactive image and a text field with a comma in it, make sure the module folder is named 'focuspoint' and try visiting *yoursite.dev/?flush=1* again.
+Did you run a dev/build after module installation?
 
 ### Focus point has been changed but image has not updated
 
 As a cache-busting mechanism this module includes approximate focus point coordinates in generated filenames. This means that if the focus point is updating correctly in the CMS but you're not seeing images change on your website, it's likely that you're viewing cached HTML output and need to invalidate that to see the updated image.
-
-Other SilverStripe modules can also prevent images being regenerated when the focus point is changed. You can work around this by telling SilverStripe to [delete resampled versions of an image when its focus point is changed](#flush-generated-images-on-focus-point-change).
-
-### Warning messages and broken images after upgrading to SilverStripe 3.6+
-
-SilverStripe 3.6 introduced Injector support for `Image_Cached`. If you're using the FPImage class through the Injector, you now need to also use the `FPImage_Cached` class. See [Method replacement](advanced-usage.md#method-replacement).

lang/en.yml

@@ -1,3 +1,3 @@
 en:
-  FocusPointField:
-    FOCUSPOINT: 'Focus Point'
+  JonoM\FocusPoint\FocusPointField:
+    FOCUSPOINT: 'Focus Point'

lang/hr.yml

@@ -1,3 +1,3 @@
 hr:
-  FocusPointField:
-    FOCUSPOINT: 'Točka fokusa'
+  JonoM\FocusPoint\FocusPointField:
+    FOCUSPOINT: 'Točka fokusa'

lang/it.yml

@@ -1,3 +1,3 @@
 it:
-  FocusPointField:
+  JonoM\FocusPoint\FocusPointField:
     FOCUSPOINT: 'Punto Focale'

lang/sr@latin.yml

@@ -1,3 +1,3 @@
 sr@latin:
-  FocusPointField:
-    FOCUSPOINT: 'Tačka fokusa'
+  JonoM\FocusPoint\FocusPointField:
+    FOCUSPOINT: 'Tačka fokusa'

lang/sr_RS@latin.yml

@@ -1,3 +1,3 @@
 sr_RS@latin:
-  FocusPointField:
-    FOCUSPOINT: 'Tačka fokusa'
+  JonoM\FocusPoint\FocusPointField:
+    FOCUSPOINT: 'Tačka fokusa'