Merge pull request #163 from MadeHQ/widget-laphil

Improved functionality, remove username requirement, etc

.nvmrc

@@ -1 +1 @@
-v16.13.2
+v16.13.0

README.md

@@ -60,7 +60,7 @@ Actually, that's a lie. You don't even have to worry about that, because this mo
 
 ### Provide Cloudinary config
 
-You'll need to provide the Cloud Name, API Key, API Secret, and Username[^1]. These values are the core requirements that enables the module to talk to Cloudinary.
+You'll need to provide the Cloud Name, API Key, and API Secret. These values are the core requirements that enables the module to talk to Cloudinary.
 
 Put these values in any YAML file you may be using to configure other parts of SilverStripe.
 
@@ -71,18 +71,17 @@ MadeHQ\Cloudinary:
     cloud_name: 'CLOUDINARY_CLOUD_NAME'
     api_key: 'CLOUDINARY_API_KEY'
     api_secret: 'CLOUDINARY_API_SECRET'
-    username: 'CLOUDINARY_USERNAME'
 ```
 
 ### Create database fields
 
 The provides support for six database fields:
 
 * `CloudinaryImage` – store an image
-* `CloudinaryMedia` – store a video or audio[^2]
+* `CloudinaryMedia` – store a video or audio[^1]
 * `CloudinaryFile` – store a raw file such as documents
 * `CloudinaryMultiImage` – store multiple images
-* `CloudinaryMultiMedia` – store multiple videos or audio[^2]
+* `CloudinaryMultiMedia` – store multiple videos or audio[^1]
 * `CloudinaryMultiFile` – store multiple files
 
 Use these as you would use any other database fields – add an entry in the `$db` static:
@@ -490,8 +489,7 @@ This version of the module is still in its infancy. We will flesh it out as our
 - [x] Provide better support for colours
 - [ ] Add handling for Edit/Remove functionality in WYSIWYG
 
-[^1]: Username in this instance is interchangeable with email. Provide the email you used to sign up for Cloudinary.
-[^2]: Due to limitation of Cloudinary, audio and videos both have the resource type of `video`. It's a minor inconvinience but the module exposes the `getActualType` method which will help differenciate the two when rendering.
+[^1]: Due to limitation of Cloudinary, audio and videos both have the resource type of `video`. It's a minor inconvinience but the module exposes the `getActualType` method which will help differenciate the two when rendering.
 
 ### Migration
 

_config.php

@@ -4,7 +4,6 @@
 use SilverStripe\AssetAdmin\Controller\AssetAdmin;
 use SilverStripe\Core\Config\Config;
 use Cloudinary\Configuration\Configuration;
-use Cloudinary\Utils;
 use MadeHQ\Cloudinary\UserForms\Controllers\FormAdmin;
 use SilverStripe\Core\Manifest\ModuleLoader;
 use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;
@@ -36,7 +35,6 @@
             'cloud_name' => $settings['cloud_name'],
             'api_key' => $settings['api_key'],
             'api_secret' => $settings['api_secret'],
-            'signature_algorithm' => Utils::ALGO_SHA256,
         ],
         'url' => [
             'secure' => true,

_config/config.yml

@@ -7,9 +7,7 @@ After:
 SilverStripe\Core\Injector\Injector:
   MadeHQ\Cloudinary\Tasks\MigrationTaskStep2:
     constructor:
-      - '%$Cloudinary\Cloudinary'
       - '%$MadeHQ\Cloudinary\MigrationDataCache'
-      # - '%$MadeHQ\Cloudinary\Controllers\API' // Injected within __constructor() as need to set user before it can be instantiated
 
   MadeHQ\Cloudinary\MigrationDataCache:
     factory: SilverStripe\Core\Cache\CacheFactory

client/dist/bundle.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! silverstripe-cloudinary - v2.0.0 */

client/dist/userform.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! silverstripe-cloudinary - v2.0.0 */

client/src/css/bundle.scss

@@ -1,6 +1,6 @@
-// .cloudinary-field {
-
-// }
+.cloudinary-input-field {
+    position: relative;
+}
 
 .cloudinary-field__sr-only {
     clip: rect(0 0 0 0);
@@ -69,17 +69,14 @@
 }
 
 .cloudinary-field-order__move {
-    cursor: pointer;
-    display: block;
+    padding: 0;
+    width: auto;
+    height: auto;
 
     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;

client/src/js/TinyMCE_ssmedia.js

@@ -68,6 +68,7 @@
             const options = {
                 ...CLOUDINARY_CONFIG,
                 multiple: false,
+                remove_header: true,
             };
 
             const defaultTransformations = this.editor.getParam('default_transformations');
@@ -76,13 +77,6 @@
                 options.default_transformations = [defaultTransformations];
             }
 
-            // Safari is the devil. Force users to login manually.
-            if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
-                delete options.username;
-                delete options.timestamp;
-                delete options.signature;
-            }
-
             cloudinary.openMediaLibrary(options, {
                 insertHandler,
             });

client/src/js/bundle.js

@@ -1,6 +1,6 @@
 import jQuery from 'jquery';
 import React from 'react';
-import { unmountComponentAtNode, render } from 'react-dom';
+import { unmountComponentAtNode, render } from 'react-dom'; // eslint-disable-line react/no-deprecated
 import Field from './components/field';
 
 jQuery.noConflict();
@@ -12,7 +12,7 @@ jQuery.entwine('ss', $ => {
         onmatch() {
             this._super();
 
-            this.addClass('sr-only');
+            this.addClass('cloudinary-field__sr-only');
 
             this.HolderInstance = $('<div class="cloudinary-field"></div>');
 
@@ -32,7 +32,7 @@ jQuery.entwine('ss', $ => {
         onunmatch() {
             this._super();
 
-            this.removeClass('sr-only');
+            this.removeClass('cloudinary-field__sr-only');
 
             if (!(this.HolderInstance instanceof jQuery)) {
                 return;

client/src/js/components/field.js

@@ -65,15 +65,9 @@ export default class Field extends Component {
             ...CLOUDINARY_CONFIG,
             multiple: !!isMultiple,
             max_files: maxFiles - this.state.resources.length,
+            remove_header: true,
         };
 
-        // Safari is the devil. Force users to login manually.
-        if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
-            delete options.username;
-            delete options.timestamp;
-            delete options.signature;
-        }
-
         cloudinary.openMediaLibrary(options, {
             insertHandler: this.insertHandler,
         });
@@ -361,7 +355,7 @@ export default class Field extends Component {
             <div className="cloudinary-field__inner">
                 { this.state.loading === true && (
                     <div className="cloudinary-field__loader">
-                        <span className="sr-only">Loading…</span>
+                        <span className="cloudinary-field__sr-only">Loading…</span>
                     </div>
                 ) }