Ss4 improvements (#50)

* Add a custom field-type `DBFocusPoint`. Move all focus point calculations into this class.
Remove unneeded InterventionBackend.
* Changed translation files to simply use the `db_FocusPoint` fieldname.
* Changed FocusPointField to behave more like a normal FormField.
* Renamed Test-class to open up naming possibilites for future test-classes :)
* Implement migration task and auto-migration.
* Added react component.
* Update to CSS and SVG for gradient & crosshair.
* Flipped Y-Coordinate to have consistent math (-1 top/left, 1 bottom/right).
* Added more unit-tests.
* Added documentation about the build-tools.

.editorconfig

@@ -17,6 +17,6 @@ indent_style = space
 
 # The indent size used in the package.json file cannot be changed:
 # https://github.com/npm/npm/pull/3180#issuecomment-16336516
-[{*.yml,package.json}]
+[*.{yml,js,jsx,json,scss,feature,eslintrc}]
 indent_size = 2
 indent_style = space

.gitignore

@@ -1 +1,8 @@
+.sass-cache
 .DS_Store
+npm-debug.log
+node_modules/
+coverage/
+/**/*.js.map
+/**/*.css.map
+artifacts/

README.md

@@ -26,6 +26,7 @@ SilverStripe ~4 (SS 3.1+ support available in earlier releases)
 * [Change log](changelog.md)
 * [License](license.md)
 * [Contributing](contributing.md)
+* [Build-Tools](build-tools.md)
 
 ## To Do
 

_config/config.yml

@@ -3,20 +3,17 @@ Name: focuspoint
 After:
     - 'assetsimage'
 ---
-SilverStripe\Assets\Image:
-  extensions:
-    - JonoM\FocusPoint\FocusPointImageExtension
 SilverStripe\Assets\Storage\DBFile:
   extensions:
-    - JonoM\FocusPoint\FocusPointImageExtension
+    - JonoM\FocusPoint\Extensions\FocusPointImageExtension
+SilverStripe\Assets\Image:
+  extensions:
+    - JonoM\FocusPoint\Extensions\FocusPointImageExtension
 SilverStripe\AssetAdmin\Forms\ImageFormFactory:
   extensions:
-    - JonoM\FocusPoint\FocusPointAssetFormFactoryExtension
+    - JonoM\FocusPoint\Extensions\FocusPointAssetFormFactoryExtension
 SilverStripe\Admin\LeftAndMain:
   extra_requirements_css:
-    - 'jonom/focuspoint: client/css/FocusPointField.css'
+    - 'jonom/focuspoint: client/dist/styles/main.css'
   extra_requirements_javascript:
-    - 'jonom/focuspoint: client/javascript/FocusPointField.js'
-# SilverStripe\Core\Injector\Injector:
-#   SilverStripe\Assets\Image_Backend:
-#     class: JonoM\FocusPoint\InterventionBackend
+    - 'jonom/focuspoint: client/dist/js/main.js'

_config/model.yml

@@ -0,0 +1,7 @@
+---
+Name: focuspoint-fieldtypes
+After: corefieldtypes
+---
+SilverStripe\Core\Injector\Injector:
+  FocusPoint:
+    class: JonoM\FocusPoint\FieldType\DBFocusPoint

build-tools.md

@@ -0,0 +1,49 @@
+# Build Tools
+
+This module uses [webpack](https://webpack.js.org/) to build JS and CSS files. 
+This is in line with how the SilverStripe core-modules build their client-assets.
+
+## Writing CSS
+
+We use [SASS](http://sass-lang.com/) to write CSS. The build-tools include an auto-prefixer that will add browser-prefixes if needed.
+
+## Writing JavaScript
+
+JavaScript should be written as ES6.
+Plain JavaScript file should use the `.js` extension, while React components use `.jsx`.
+The files will be transpiled to a single (browser consumable) JavaScript file using webpack and babel.
+
+## Building JS and CSS
+
+First of all, you need to install the [yarn](https://yarnpkg.com/en/) package manager on your system.
+Then do the following:
+
+```bash
+cd ./vendor/jonom/focuspoint
+yarn
+```
+
+This will install all the npm dependencies in `node_modules`
+
+#### Development
+
+During development, you can use the following command to create a development build:
+
+```bash
+yarn run dev
+```
+
+There's also a "watch" command that will watch your files and build new JS and CSS every time you change a file:
+
+```bash
+yarn run watch
+```
+
+#### Release
+
+To create a release build, do:
+
+```bash
+yarn run build
+```
+

changelog.md

@@ -4,9 +4,20 @@
 
 ## 3.0
 
+* Changed from two individual Fields on `Image` to a composite DB-field.
 * 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.
+* Implemented a focus-point react component
+* Switched Y-Coordinates upside down (from 1 = top, -1 = bottom to -1 = top, 1 = bottom). Existing coordinates will automatically be converted by the migration task.
+
+#### Migration
+
+Field values will automatically migrate from 2.x to 3.x. If you need to migrate back from 3.x to 2.x, follow these steps:
+
+ - revert the module to the 2.x version
+ - do `dev/build`
+ - Run the `FocusPointMigrationTask` with "direction=down". Eg. `sake dev/tasks/FocusPointMigrationTask "direction=down"`
 
 ## 2.0
 
-* `FocusPointField` was refactored for 2.x. If you're using the class in your own code you will need to update it.
+* `FocusPointField` was refactored for 2.x. If you're using the class in your own code you will need to update it.

client/src/boot/index.js

@@ -0,0 +1,18 @@
+/* global document */
+import React from 'react';
+import Injector from 'lib/Injector';
+import registerComponents from './registerComponents';
+
+document.addEventListener('DOMContentLoaded', () => {
+  registerComponents();
+
+  //TODO: Consider adding the focus-field directly at the UploadField level
+  /*
+  Injector.transform(
+    'focuspoint-uploadfield',
+    (updater) => {
+    }
+  );
+  */
+});
+

client/src/boot/registerComponents.js

@@ -0,0 +1,10 @@
+import Injector from 'lib/Injector';
+import FocusPointField from 'components/FocusPointField';
+import FocusPointPicker from 'components/FocusPointPicker';
+
+const registerComponents = () => {
+  Injector.component.register('FocusPointField', FocusPointField);
+  Injector.component.register('FocusPointPicker', FocusPointPicker);
+};
+
+export default registerComponents;