Utils, defaultOptions

examples/playground/src/js/app.js

@@ -3,7 +3,7 @@ import { DragDrop, Tus10 } from '../../../../src/plugins';
 
 const transloadit = new Transloadit({wait: false});
 const files = transloadit
-  .use(DragDrop, {modal: true, selector: '#upload-target'})
+  .use(DragDrop, {selector: '#upload-target'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
   .run();
 

src/core/Utils.js

@@ -1,10 +1,10 @@
 // This is how we roll $('.element').toggleClass in non-jQuery world
-export function toggleClass(el, className) {
+function toggleClass(el, className) {
   if (el.classList) {
     el.classList.toggle(className);
   } else {
-    var classes = el.className.split(' ');
-    var existingIndex = classes.indexOf(className);
+    const classes = el.className.split(' ');
+    const existingIndex = classes.indexOf(className);
 
     if (existingIndex >= 0) {
       classes.splice(existingIndex, 1);
@@ -15,7 +15,7 @@ export function toggleClass(el, className) {
   }
 }
 
-export function addClass(el, className) {
+function addClass(el, className) {
   if (el.classList) {
     el.classList.add(className);
   } else {
@@ -23,8 +23,7 @@ export function addClass(el, className) {
   }
 }
 
-export function removeClass(el, className) {
-  console.log(el);
+function removeClass(el, className) {
   if (el.classList) {
     el.classList.remove(className);
   } else {
@@ -33,9 +32,16 @@ export function removeClass(el, className) {
 }
 
 // $form.on('drag dragstart dragend dragover dragenter dragleave drop');
-export function addListenerMulti(el, events, func) {
+function addListenerMulti(el, events, func) {
   const eventsArray = events.split(' ');
   for (let event in eventsArray) {
     el.addEventListener(eventsArray[event], func, false);
   }
 }
+
+export default {
+  toggleClass,
+  addClass,
+  removeClass,
+  addListenerMulti
+};

src/plugins/DragDrop.js

@@ -1,4 +1,4 @@
-import { toggleClass, addClass, removeClass, addListenerMulti } from '../core/Utils';
+import Utils from '../core/Utils';
 import TransloaditPlugin from './TransloaditPlugin';
 // import Tus from 'tus-js-client';
 
@@ -6,7 +6,17 @@ export default class DragDrop extends TransloaditPlugin {
   constructor(core, opts) {
     super(core, opts);
     this.type = 'selecter';
-    this.opts = opts;
+
+    // Set default options
+    const defaultOptions = {
+      bla: 'blabla',
+      modal: true
+    };
+
+    // Merge default options with the ones set by user
+    this.opts = defaultOptions;
+    Object.assign(this.opts, opts);
+
     console.log(this.opts);
 
     // get the element where Drag & Drop event will occur
@@ -20,34 +30,39 @@ export default class DragDrop extends TransloaditPlugin {
     this.checkDragDropSupport = this.checkDragDropSupport(this);
   }
 
+  /**
+   * Checks if the browser supports Drag & Drop
+   * data may not have been accepted by the server yet.
+   * @param  {number} bytesSent  Number of bytes sent to the server.
+   * @param  {number} bytesTotal Total number of bytes to be sent to the server.
+   */
   checkDragDropSupport() {
     this.isDragDropSupported = function () {
       const div = document.createElement('div');
       return (('draggable' in div) ||
-             ('ondragstart' in div && 'ondrop' in div))
-             && 'FormData' in window && 'FileReader' in window;
+             ('ondragstart' in div && 'ondrop' in div)) &&
+             'FormData' in window && 'FileReader' in window;
     }();
   }
 
   listenForEvents() {
     if (this.isDragDropSupported) {
-      addClass(this.dropzone, 'is-dragdrop-supported');
+      Utils.addClass(this.dropzone, 'is-dragdrop-supported');
     }
 
     // prevent default actions for all drag & drop events
-    addListenerMulti(this.dropzone, 'drag dragstart dragend dragover dragenter dragleave drop', (e) => {
-      // console.log('yo!');
+    Utils.addListenerMulti(this.dropzone, 'drag dragstart dragend dragover dragenter dragleave drop', (e) => {
       e.preventDefault();
       e.stopPropagation();
     });
 
     // Toggle is-dragover state when files are dragged over or dropped
-    addListenerMulti(this.dropzone, 'dragover dragenter', () => {
-      addClass(this.dropzone, 'is-dragover');
+    Utils.addListenerMulti(this.dropzone, 'dragover dragenter', () => {
+      Utils.addClass(this.dropzone, 'is-dragover');
     });
 
-    addListenerMulti(this.dropzone, 'dragleave dragend drop', () => {
-      removeClass(this.dropzone, 'is-dragover');
+    Utils.addListenerMulti(this.dropzone, 'dragleave dragend drop', () => {
+      Utils.removeClass(this.dropzone, 'is-dragover');
     });
 
     this.dropzone.addEventListener('drop', this.handleDrop);