Gallery ordering

_config/linkable.yml

@@ -0,0 +1,12 @@
+---
+Name: silverstripecloudinarylinkable
+After:
+ - '#silverstripecloudinarycore'
+Only:
+  moduleexists:
+    - 'sheadawson/silverstripe-linkable'
+---
+
+Sheadawson\Linkable\Models\Link:
+  extensions:
+    - MadeHQ\Cloudinary\Linkable\Extensions\Link

client/src/css/bundle.scss

@@ -63,13 +63,31 @@
     }
 }
 
+.cloudinary-field-order {
+    font-size: 2em;
+    padding: 0 0.5em 0 0;
+}
+
+.cloudinary-field-order__move {
+    cursor: pointer;
+    display: block;
+
+    ins {
+        text-decoration: none;
+    }
+}
+.cloudinary-field-order__move--up.cloudinary-field-order__move--first,
+.cloudinary-field-order__move--down.cloudinary-field-order__move--last {
+    cursor: not-allowed;
+}
+
 .cloudinary-field__media {
     position: relative;
     align-self: flex-start;
     line-height: 0;
 
     &:hover .cloudinary-field__actions {
-        opacity: 100%;
+        opacity: 1;
     }
 }
 
@@ -96,7 +114,7 @@
     bottom: 0;
     left: 0;
     display: flex;
-    opacity: 0%;
+    opacity: 0;
     justify-content: space-evenly;
     align-items: center;
     transition: opacity 200ms ease-in-out;

client/src/js/components/field.js

@@ -47,6 +47,7 @@ export default class Field extends Component {
         this.processRaw = this.processRaw.bind(this);
         this.onChange = this.onChange.bind(this);
         this.onRemoveResource = this.onRemoveResource.bind(this);
+        this.onMoveResource = this.onMoveResource.bind(this);
         this.updateProperty = this.updateProperty.bind(this);
         this.renderResources = this.renderResources.bind(this);
     }
@@ -237,6 +238,38 @@ export default class Field extends Component {
         this.onChange(resources);
     }
 
+    /**
+     *
+     * @param {string} publicId
+     * @param {integer} direction Positive or negative
+     */
+    onMoveResource(publicId, direction) {
+        const idx = this.state.resources.findIndex(r => r.public_id === publicId);
+        const newIdx = parseInt(direction, 10) + idx;
+
+        if (newIdx < 0 || newIdx > this.state.resources.length) {
+            // Trying to move out or bounds (don't do anything)
+            return;
+        }
+
+        const resource = this.state.resources[idx];
+
+        // New array (without the resource)
+        let resources = [].concat(
+            this.state.resources.slice(0, idx),
+            this.state.resources.slice(idx + 1)
+        );
+
+        // Re-add the resource at the correct location
+        resources.splice(newIdx, 0, resource);
+
+        this.setState({
+            resources: resources
+        });
+
+        this.onChange(resources);
+    }
+
     updateProperty(publicId, property, value) {
         const resources = this.state.resources.map(resource => {
             if (resource.public_id !== publicId) {
@@ -256,8 +289,10 @@ export default class Field extends Component {
     }
 
     renderResources() {
-        return this.state.resources.map(resource => {
+        return this.state.resources.map((resource, idx) => {
             const { actual_type } = resource;
+            const firstItem = idx === 0;
+            const lastItem = idx === this.state.resources.length - 1;
 
             if (actual_type === 'video') {
                 return <Video
@@ -267,6 +302,9 @@ export default class Field extends Component {
                     gravityOptions={ this.props.gravityOptions }
                     onChange={ this.updateProperty }
                     onRemoveResource={ this.onRemoveResource }
+                    onMoveResource={ this.onMoveResource }
+                    firstItem={ firstItem }
+                    lastItem={ lastItem }
                 />;
             }
 
@@ -277,6 +315,9 @@ export default class Field extends Component {
                     fields={ this.props.fields }
                     onChange={ this.updateProperty }
                     onRemoveResource={ this.onRemoveResource }
+                    onMoveResource={ this.onMoveResource }
+                    firstItem={ firstItem }
+                    lastItem={ lastItem }
                 />;
             }
 
@@ -288,6 +329,9 @@ export default class Field extends Component {
                     gravityOptions={ this.props.gravityOptions }
                     onChange={ this.updateProperty }
                     onRemoveResource={ this.onRemoveResource }
+                    onMoveResource={ this.onMoveResource }
+                    firstItem={ firstItem }
+                    lastItem={ lastItem }
                 />;
             }
 
@@ -297,6 +341,9 @@ export default class Field extends Component {
                 fields={ this.props.fields }
                 onChange={ this.updateProperty }
                 onRemoveResource={ this.onRemoveResource }
+                onMoveResource={ this.onMoveResource }
+                firstItem={ firstItem }
+                lastItem={ lastItem }
             />;
         });
     }

client/src/js/components/resource.js

@@ -21,6 +21,8 @@ export default class Resource extends Component {
         this.updateFgColour = this.updateFgColour.bind(this);
         this.updateBgColour = this.updateBgColour.bind(this);
         this.removeResource = this.removeResource.bind(this);
+        this.moveResourceUp = this.moveResourceUp.bind(this);
+        this.moveResourceDown = this.moveResourceDown.bind(this);
         this.url = this.url.bind(this);
         this.thumbnailUrl = this.thumbnailUrl.bind(this);
         this.titleFieldLabel = this.titleFieldLabel.bind(this);
@@ -97,6 +99,20 @@ export default class Resource extends Component {
         );
     }
 
+    moveResourceUp() {
+        this.props.onMoveResource(
+            this.props.public_id,
+            -1
+        );
+    }
+
+    moveResourceDown() {
+        this.props.onMoveResource(
+            this.props.public_id,
+            1
+        );
+    }
+
     url() {
         const { public_id, resource_type } = this.props;
 
@@ -153,6 +169,52 @@ export default class Resource extends Component {
         return uniq(fields);
     }
 
+    renderOrder() {
+        const { firstItem, lastItem } = this.props;
+
+        if (firstItem && lastItem) {
+            // Only a single item so no need to re-order
+            return false;
+        }
+
+        const moveUpClassNames = [
+            'cloudinary-field-order__move',
+            'cloudinary-field-order__move--up',
+        ];
+        const moveDownClassNames = [
+            'cloudinary-field-order__move',
+            'cloudinary-field-order__move--down',
+        ];
+
+        if (firstItem) {
+            moveUpClassNames.push('cloudinary-field-order__move--first');
+        }
+        if (lastItem) {
+            moveDownClassNames.push('cloudinary-field-order__move--last');
+        }
+
+        return (
+            <div className="cloudinary-field-order">
+                <a
+                    className={moveUpClassNames.join(' ')}
+                    onClick={ this.moveResourceUp }
+                    disabled={ firstItem }
+                    title="Move Up"
+                >
+                    <ins className="font-icon-up-open">&nbsp;</ins>
+                </a>
+                <a
+                    className={moveDownClassNames.join(' ')}
+                    onClick={ this.moveResourceDown }
+                    disabled={ lastItem }
+                    title="Move Down"
+                >
+                    <ins className="font-icon-down-open">&nbsp;</ins>
+                </a>
+            </div>
+        );
+    }
+
     render() {
         const { title, description, credit, gravity, foreground_colour, background_colour } = this.state;
         const { actual_type, public_id, resource_type, top_colours, gravityOptions } = this.props;
@@ -161,6 +223,8 @@ export default class Resource extends Component {
 
         return (
             <div className={`cloudinary-field__item cloudinary-field__item--${actual_type}`}>
+                {this.renderOrder()}
+
                 <div className={`cloudinary-field__media cloudinary-field__media--${actual_type}`}>
                     <div className={`cloudinary-field__preview cloudinary-field__preview--${actual_type}`}>
                         { thumbnail && <img src={ thumbnail } /> }
@@ -318,6 +382,9 @@ Resource.propTypes = {
     gravityOptions: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     onRemoveResource: PropTypes.func.isRequired,
+    onMoveResource: PropTypes.func.isRequired,
+    firstItem: PropTypes.bool.isRequired,
+    lastItem: PropTypes.bool.isRequired,
 }
 
 Resource.defaultProps = {

src/Linkable/Extensions/Link.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace MadeHQ\Cloudinary\Linkable\Extensions;
+
+use SilverStripe\Forms\FieldList;
+use SilverStripe\ORM\DataExtension;
+use UncleCheese\DisplayLogic\Forms\Wrapper;
+
+/**
+ * @property Sheadawson\Linkable\Models\Link $owner
+ */
+class Link extends DataExtension
+{
+    private static $db = [
+        'CloudinaryFile' => 'CloudinaryFile',
+    ];
+
+    /**
+     * Replaces the "File" field with Cloudinary Field
+     *
+     * @param FieldList $fields
+     */
+    public function updateCMSFields(FieldList $fields)
+    {
+        $fields->removeByName('FileID');
+        $fields->insertAfter(
+            'Type',
+            Wrapper::create(
+                $this->owner->dbObject('CloudinaryFile')->scaffoldFormField('File')
+            )
+                ->displayIf('Type')
+                ->isEqualTo('File')
+                ->end()
+        );
+    }
+
+    /**
+     * Overrides the response if "File" type is selected
+     *
+     * @param mixed $linkURL
+     */
+    public function updateLinkURL(&$linkURL)
+    {
+        switch($this->owner->Type) {
+            case 'File':
+                $file = $this->owner->dbObject('CloudinaryFile');
+                if ($file && $file->exists()) {
+                    $linkURL = (string)$file;
+                }
+        }
+    }
+}