diff --git a/examples/playground/src/js/app.js b/examples/playground/src/js/app.js index 07cf692ef..80f85d17f 100644 --- a/examples/playground/src/js/app.js +++ b/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(); diff --git a/src/core/Utils.js b/src/core/Utils.js index 7570dda75..a1d51e913 100644 --- a/src/core/Utils.js +++ b/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 +}; diff --git a/src/plugins/DragDrop.js b/src/plugins/DragDrop.js index 2bf9de665..dec2a18df 100644 --- a/src/plugins/DragDrop.js +++ b/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);