Set up structure for adding more transformations

Author: carlevison

package-lock.json

@@ -27,7 +27,6 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@cloudinary/url-gen": "^1.5.1",
-    "lodash": "^4.17.21"
+    "@cloudinary/url-gen": "^1.5.1"
   }
 }

package.json

@@ -0,0 +1,50 @@
+import {Cloudinary} from "@cloudinary/url-gen";
+import {Transformation} from "@cloudinary/url-gen";
+
+// Import required actions.
+import {thumbnail, scale} from "@cloudinary/url-gen/actions/resize";
+import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
+import {sepia} from "@cloudinary/url-gen/actions/effect";
+import {source} from "@cloudinary/url-gen/actions/overlay";
+import {opacity,brightness} from "@cloudinary/url-gen/actions/adjust";
+import {byAngle} from "@cloudinary/url-gen/actions/rotate"
+
+// Import required qualifiers.
+import {image} from "@cloudinary/url-gen/qualifiers/source";
+import {Position} from "@cloudinary/url-gen/qualifiers/position";
+import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
+import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity";
+import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";
+
+export default function getFullExampleImage() {
+  
+  // Create a Cloudinary instance and set your cloud name.
+  const cld = new Cloudinary({
+    cloud: {
+      cloudName: 'demo'
+    }
+  });
+
+  // Use the image with public ID, 'front_face'.
+  const myImage = cld.image('front_face');
+
+  // Apply the transformation.
+  myImage
+  .resize(thumbnail().width(150).height(150).gravity(focusOn(FocusOn.face())))  // Crop the image.
+  .roundCorners(byRadius(20))    // Round the corners.
+  .effect(sepia())  // Apply a sepia effect.
+  .overlay(   // Overlay the Cloudinary logo.
+    source(
+      image('cloudinary_icon_blue')
+        .transformation(new Transformation()
+        .resize(scale(50)) // Resize the logo.
+          .adjust(opacity(60))  // Adjust the opacity of the logo.
+        .adjust(brightness(200)))  // Adjust the brightness of the logo.       
+    )
+    .position(new Position().gravity(compass('south_east')).offsetX(5).offsetY(5))   // Position the logo.
+  )
+  .rotate(byAngle(10))  // Rotate the result. 
+  .format('png'); // Deliver as PNG. */
+
+  return myImage;
+}

src/fullExample.js

@@ -1,23 +1,76 @@
 import './style.css';
-import quickstart from './quickstart.js';
+import getQuickstartImage from './quickstart.js';
+import getFullExampleImage from './fullExample.js';
+
+async function getComponent(index) {
+
+    let description = "";
+    let link = "";
+    let linkText = "";
+    let myImageUrl = "";
+
+    // Set the variables for the different images
+    switch (index)
+    {
+        case 1:
+        {
+            description = "Crop an image to a square, as shown in the";
+            link = "https://cloudinary.com/documentation/javascript_quick_start#2_add_cloudinary_to_your_code";
+            linkText = "Quickstart guide";
+            myImageUrl = getQuickstartImage().toURL();
+            break;
+        }
+        case 2:
+        {
+            description = "Apply a range of transformations, as shown in the";
+            link = "https://cloudinary.com/documentation/javascript_integration#full_example";
+            linkText = "Full example";
+            myImageUrl = getFullExampleImage().toURL();
+            break;
+        }
+        default:
+        {
+            console.log("Oops! Outside of range.");
+        }
+    }
 
-async function getComponent() {
     const element = document.createElement('div');
-    const { default: _ } = await import('lodash');
+    const spacing = document.createElement('div');
+    const spacing2 = document.createElement('div');
+    const anchor = document.createElement('a');
+    const imgElement = document.createElement('img');
 
     element.classList.add('text','App');
-    element.innerHTML = "Crop an image to a square, as shown in the <br><a class=\"App-link\" href=\"https://cloudinary.com/documentation/react2_quick_start#2_add_cloudinary_to_your_code\" target=\"_blank\" rel=\"noopener noreferrer\">Quickstart guide</a></br>"
+    spacing.classList.add('space');
+    spacing2.classList.add('space');
 
-    const imgElement = document.createElement('img');
-    element.appendChild(imgElement);
-    const myImage = quickstart();
-    imgElement.src = myImage.toURL();       
-  
-    return element;
+    // Add the description
+    element.innerHTML = description;
+
+    // Define the link
+    anchor.setAttribute("href", link);
+    anchor.classList.add('App-link');
+    anchor.setAttribute("target", "_blank");
+    anchor.setAttribute("rel", "noopener noreferrer");
+    anchor.innerHTML = linkText;
 
+    // Add the link and some space to the div
+    element.appendChild(anchor);
+    element.appendChild(spacing);
 
+    // Set the src attribute of the img element
+    imgElement.src = myImageUrl;
+
+    // Add the image and some space to the div
+    element.appendChild(imgElement);
+    element.appendChild(spacing2);
+         
+    return element;
   }
 
-  getComponent().then((component) => {
-    document.body.appendChild(component);
-  });
+  for (let i=1; i<3; i++)
+  {
+    getComponent(i).then((component) => {
+        document.body.appendChild(component);
+    });
+  }

src/index.js

@@ -1,7 +1,7 @@
 import {Cloudinary} from "@cloudinary/url-gen";
 import {fill} from "@cloudinary/url-gen/actions/resize";
 
-export default function quickstart() {
+export default function getQuickstartImage() {
 
     const cld = new Cloudinary({
         cloud: {

src/quickstart.js

@@ -4,11 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   mode: 'production',
   entry: {
-    index: {
-        import: './src/index.js',
-        dependOn: 'shared',
-      },
-      shared: 'lodash',
+    index: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({