Core and plugins separated, transloadit function exposed & an example app that uses to plugins

js/lib/transloadit-js-client.js

@@ -1,9 +0,0 @@
-window.Transloadit = function (selector) {
-  var el    = document.querySelector(selector);
-  var inner = ''
-  inner += '<div class="transloadit-js-client">';
-  inner += 'Hello world :)';
-  inner += 'I am the new Transloadit js client, and as you can see, I need to be improved badly :)';
-  inner += '</div>';
-  el.innerHTML = inner;
-};

scss/index.scss

@@ -1,6 +0,0 @@
-.transloadit-js-client {
-  font-family : "Comic Sans MS";
-  color       : purple;
-  border      : 1px dashed pink;
-  font-size   : 32px;
-}

src/js/lib/transloadit-core.js

@@ -0,0 +1,33 @@
+
+// Using classes internally
+class Transloadit {
+  constructor(opts = {}) {
+    this.opts = opts;
+  }
+
+  use(plugin, opts) {
+    plugin(opts);
+    return this;
+  }
+
+  set(option) {
+    // set some option here
+    console.log(option);
+    return this;
+  }
+
+  prepare() {
+    // ...
+  }
+
+  upload(files) {
+    return new Promise(function (resolve, reject) {
+      // ...
+      resolve('upload successful');
+    });
+  }
+}
+
+export default function transloadit(options) {
+  return new Transloadit(options);
+}

src/js/lib/transloadit-dragndrop.js

@@ -0,0 +1,6 @@
+// The Dragndrop plugin
+
+export default function dragndrop(options) {
+  console.log(options.selector);
+  console.log('dragging and dropping here');
+}

src/js/lib/transloadit-example-app.js

@@ -0,0 +1,10 @@
+import transloadit from './transloadit-core';
+import dragndrop from './transloadit-dragndrop';
+import instagram from './transloadit-instagram';
+
+transloadit()
+  .use(dragndrop, {
+    selector: '.drop'
+  })
+  .use(instagram, {})
+  .set({someOption: true})

src/js/lib/transloadit-instagram.js

@@ -0,0 +1,6 @@
+// The Dragndrop plugin
+
+export default function instagram(options) {
+  console.log(options);
+  console.log('Put a Filter On It (https://youtu.be/iHmLljk2t8M)!');
+}

src/js/lib/transloadit-js-client.js

@@ -1,9 +1,20 @@
-window.Transloadit = function (selector) {
-  var el    = document.querySelector(selector);
-  var inner = ''
-  inner += '<div class="transloadit-js-client">';
-  inner += 'Hello world :)';
-  inner += 'I am the new Transloadit js client, and as you can see, I need to be improved badly :)';
-  inner += '</div>';
-  el.innerHTML = inner;
-};
+// window.Transloadit = function (selector) {
+//   var el    = document.querySelector(selector);
+//   var inner = ''
+//   inner += '<div class="transloadit-js-client">';
+//   inner += 'Hello world :)';
+//   inner += 'I am the new Transloadit js client, and as you can see, I need to be improved badly :)';
+//   inner += '</div>';
+//   el.innerHTML = inner;
+// };
+
+import transloadit from './transloadit-core';
+import dragndrop from './transloadit-dragndrop';
+import instagram from './transloadit-instagram';
+
+transloadit()
+  .use(dragndrop, {
+    selector: '.drop'
+  })
+  .use(instagram, {})
+  .set({someOption: true});

transloadit-core.js

@@ -1,74 +0,0 @@
-// The plugin
-let dragndrop = function(options) {
-  console.log(options.selector);
-  console.log('dragging and dropping here');
-//   return function (options) {
-//     console.log('dragging and dropping here');
-//   };
-};
-
-// Using classes internally
-class Transloadit {
-  constructor(opts = {}, plugins = []) {
-    this.opts = opts;
-    this.plugins = plugins;
-  }
-
-  plugin(name, initializer) {
-    return initializer();
-  }
-
-  use (iterator, opts) {
-    iterator(opts);
-    return this;
-  }
-
-  prepare() {
-    // ...
-  }
-
-  upload(files) {
-    return new Promise(function (resolve, reject) {
-      // ...
-      resolve('upload successful');
-    });
-  }
-}
-
-let transloadit = new Transloadit();
-transloadit.use(dragndrop, {
-  selector: '.drop'
-});
-
-
-// Then the function is exposed to the user
-// it accepts an array of plugins and their options
-// transloadit(['dragndrop', 'dropbox', 'instagram']);
-// let transloadit = function (plugins) {
-// //   if ( plugins.length === 1 && Array.isArray(plugins[0]) ) {
-// //     plugins = plugins[0];
-// //   }
-//   return new Transloadit(plugins);
-// };
-
-// Then we invoke it
-// transloadit([
-//   dragndrop(),
-//   dropbox({
-//     folder: '/media',
-//     allowSmth: true
-//   })
-// ]);
-
-// transloadit([
-//   {dragndrop, {selector: '.dragndrop-zone'}},
-//   {dropbox, {
-//     folder: '/media',
-//     allowSmth: true
-//   }})
-// ]);
-
-// transloadit('dragndrop', 'dropbox', 'instagram')
-//   .then(function (result) {
-//     console.log(`Done processing: ${result}`)
-//   });