Modal plugin renders correctly.

src/plugins/Modal.js

@@ -1,55 +1,83 @@
 import Plugin from './Plugin'
-import { Modal, Authorize, Browser, Sidebar } from './templates'
+import { ModalTemplate, Authorize, Browser, Sidebar } from './templates'
 
 export default class Modal extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.type = 'selecter'
+    this.type = 'something'
     this.connect = this.connect.bind(this)
     this.render = this.render.bind(this)
     this.initModal = this.initModal.bind(this)
+    this.onDocumentClick = this.onDocumentClick.bind(this)
 
     this.parent = this.opts.parent || document.body
 
     this.initModal()
 
-    if (this.opts.target) {
-      this.trigger = this.opts.target
-
-      const trigger = document.querySelector(this.opts.target)
-      trigger.addEventListener('click', (e) => {
-
-      })
+    if (this.opts.selector) {
+      this.trigger = this.opts.selector
+      this.connect(this.trigger)
     }
   }
 
   connect (target) {
     const trigger = document.querySelector(target)
-    const modal = this.modal || document.getElementById('UppyModal')
 
     if (!trigger) {
-      console.error('Uppy: Error. Modal trigger not found.')
+      console.error('Uppy: Error. Modal trigger element not found.')
     }
-
-    trigger.addEventListener('click', () => this.openModal)
+    trigger.addEventListener('click', () => {
+      this.openModal()
+    })
   }
 
   initModal () {
-    const modal = document.createElement('div')
+    let overlay = document.createElement('div')
+    overlay.classList.add('UppyModalOverlay')
+    document.body.appendChild(overlay)
+
+    overlay.addEventListener('click', )
+
+    let modal = document.createElement('div')
     modal.id = 'UppyModal'
 
     this.parent.appendChild(modal)
 
+    modal.innerHTML = ModalTemplate()
+
+    let a  = document.createElement('a')
+
+    const linkText = document.createTextNode('close')
+    a.appendChild(linkText)
+    a.classList.add('UppyModal-closeBtn')
+    a.addEventListener('click', this.onDocumentClick)
+
+    modal.appendChild(a)
+
     this.modal = document.getElementById('UppyModal')
   }
 
   openModal () {
     if (this.modal) {
-      this.modal.classList.add('UppyModal--is-open')
-      this.parent
+      console.log(this.modal)
+      this.modal.classList.toggle('UppyModal--is-open')
+      document.body.classList.toggle('UppyModal--is-open')
     }
   }
 
+  closeModal () {
+    document.body.classList.toggle('avgrund-ready')
+    document.body.classList.toggle('UppyModal--is-open')
+
+    setTimeout(() => this.modal.classList.toggle('UppyModal--is-open'), 500)
+  }
+
+  onDocumentClick(e) {
+    e.preventDefault()
+    this.closeModal()
+  }
+
   render (files) {
+    this.modal.innerHTML = ModalTemplate()
   }
 }

src/plugins/index.js

@@ -1,6 +1,8 @@
 // Parent
 import Plugin from './Plugin'
 
+import Modal from './Modal'
+
 // Selecters
 import DragDrop from './DragDrop'
 import Dropbox from './Dropbox'
@@ -20,5 +22,6 @@ export default {
   Formtag,
   Tus10,
   Multipart,
-  TransloaditBasic
+  TransloaditBasic,
+  Modal
 }

src/plugins/templates/index.js

@@ -1,11 +1,11 @@
 import Authorize from './authorize'
 import Browser from './browser'
-import Modal from './modal'
+import ModalTemplate from './modal'
 import Sidebar from './sidebar'
 
 export default {
   Authorize,
   Browser,
-  Modal,
+  ModalTemplate,
   Sidebar
 }

website/src/examples/modal/app.css

@@ -5,7 +5,7 @@ body {
   overflow: auto;
 }
 
-.avgrund-popin {
+#UppyModal {
   position: absolute;
   background: #fff;
   padding: 10px;
@@ -39,7 +39,7 @@ body {
   filter: alpha(opacity=0);
 }
 
-body.avgrund-ready,
+body,
 .avgrund-ready .avgrund-overlay {
   -webkit-transition: 1s all cubic-bezier(.87,.92,.83,.67);
   -moz-transition: 1s all cubic-bezier(.87,.92,.83,.67);
@@ -66,7 +66,7 @@ body.avgrund-ready,
   transform-origin: 50% 50%;
 }
 
-body.avgrund-active {
+body.UppyModal--is-open {
   -webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
   -ms-transform: scale(0.9);
@@ -75,7 +75,7 @@ body.avgrund-active {
   overflow: hidden;
 }
 
-.avgrund-active .avgrund-popin {
+#UppyModal.UppyModal--is-open {
   visibility: visible;
   opacity: 1;
   filter: alpha(opacity=100);
@@ -93,7 +93,7 @@ body.avgrund-active {
   transition: 0.3s all ease;
 }
 
-.avgrund-active .avgrund-overlay {
+body.UppyModal--is-open .avgrund-overlay {
   visibility: visible;
   opacity: .5;
   filter: alpha(opacity=50);
@@ -125,7 +125,7 @@ body.avgrund-active {
 }
 
 /* Optional close button styles */
-.avgrund-close {
+.UppyModal-closeBtn {
   display: block;
   color: #555;
   font-size: 13px;

website/src/examples/modal/app.es6

@@ -1,8 +1,7 @@
 // import Uppy from 'uppy/core'
 // import { DragDrop, Tus10 } from 'uppy/plugins'
-import { Authorize, Browser, Modal, Sidebar } from './partials'
-console.log('here we go')
-console.log(Modal())
+import Uppy from 'uppy/core'
+import { Modal, DragDrop } from 'uppy/plugins'
 
 const defaults = {
   width               : 380, // max = 640
@@ -23,82 +22,6 @@ const defaults = {
   template            : '<p>This is test popin content!</p>'
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  document.body.classList.add('avgrund-ready')
-
-  const trigger = document.querySelector('.ModalTrigger')
-  trigger.addEventListener('click', (e) => {
-    let overlayElem = document.createElement('div')
-    overlayElem.classList.add('avgrund-overlay')
-    document.body.appendChild(overlayElem)
-
-    overlayElem.addEventListener('click', onDocumentClick)
-    activate()
-
-    var driveButton = document.getElementById('GoogleDriveTrigger')
-    driveButton.addEventListener('click', function(e) {
-      fetch('http://localhost:3002/drive/auth/authorize', {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      .then(function(res) {
-        res.text().then(function(data) {
-          const target = document.querySelector('.UploadContent')
-
-          target.innerHTML = '<a href="' + data + '" target="_blank">Click here to authorize</a>'
-        })
-      })
-
-    })
-  })
-})
-
-// function onDocumentKeyup (e) {
-//   if (e.keyCode === 27) {
-//     deactivate()
-//   }
-// }
-
-function onDocumentClick (e) {
-  e.preventDefault()
-  deactivate()
-}
-
-function activate (e) {
-  setTimeout(function () {
-    document.body.classList.toggle('avgrund-ready')
-    document.body.classList.toggle('avgrund-active')
-  }, 100)
-
-  var popin = document.createElement('div')
-  popin.classList.add('avgrund-popin')
-  popin.classList.add('ModalWindow')
-  var template = '<div class="ModalTemplate"><nav class="UploadSidebar"><ul class="InputList"><li><button>Local</button></li><li><button id="GoogleDriveTrigger">Google Drive</button></li><li><button>Instagram</button></li><li><button>Dropbox</button></li><li><button>Webcam</button></li></ul></nav><main class="UploadContent"></main></div>'
-  popin.innerHTML = template
-  console.log(template)
-
-  var a  = document.createElement('a')
-  var linkText = document.createTextNode('close')
-  a.appendChild(linkText)
-  a.classList.add('avgrund-close')
-  a.href = '#'
-
-  popin.appendChild(a)
-
-  document.body.appendChild(popin)
-  a.addEventListener('click', onDocumentClick)
-}
-
-function deactivate () {
-  document.body.classList.toggle('avgrund-ready')
-  document.body.classList.toggle('avgrund-active')
-
-  setTimeout(function () {
-    var el = document.querySelector('.avgrund-popin')
-    el.remove()
-  }, 500)
-}
-
+const uppy = new Uppy({wait: false})
 
+uppy.use(Modal, {selector: '.ModalTrigger'})