Adding example folder for drive and modal.

website/src/examples/drive/app.css

@@ -0,0 +1,5 @@
+ul#target {
+  border: 1px dashed orange;
+  width: 100%;
+  height: 300px;
+}

website/src/examples/drive/app.es6

@@ -0,0 +1,9 @@
+import Uppy from 'uppy/core';
+import { Drive } from 'uppy/plugins';
+
+const uppy = new Uppy({wait: false});
+const files = uppy
+  .use(Drive, {selector: '#target'})
+  .run();
+
+console.log(uppy.type);

website/src/examples/drive/app.html

@@ -0,0 +1,2 @@
+<ul id="target"></ul>
+<script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>

website/src/examples/drive/index.ejs

@@ -0,0 +1,35 @@
+---
+title: Dropbox
+layout: example
+type: examples
+order: 2
+---
+
+{% blockquote %}
+Here you'll see a demo of how you might set up Dropbox with Uppy.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html dropbox/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js dropbox/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css dropbox/app.css %}

website/src/examples/dropbox/index.ejs

@@ -2,7 +2,7 @@
 title: Dropbox
 layout: example
 type: examples
-order: 2
+order: 3
 ---
 
 {% blockquote %}

website/src/examples/i18n/index.ejs

@@ -2,7 +2,7 @@
 title: i18n
 layout: example
 type: examples
-order: 1
+order: 4
 ---
 
 {% blockquote %}

website/src/examples/modal/app.css

@@ -0,0 +1,137 @@
+html,
+body {
+  background-color: #ccc;
+  height: 100%;
+  overflow: auto;
+}
+
+.avgrund-popin {
+  position: absolute;
+  background: #fff;
+  padding: 10px;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  top: 50%;
+  left: 50%;
+  z-index: 1000;
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
+  width: 1200px;
+  height: 600px;
+
+  -webkit-transform: translate(-50%, -50%) scale(0.8);
+  -moz-transform: translate(-50%, -50%) scale(0.8);
+  -ms-transform: translate(-50%, -50%) scale(0.8);
+  -o-transform: translate(-50%, -50%) scale(0.8);
+  transform: translate(-50%, -50%) scale(0.8);
+}
+
+.avgrund-overlay {
+  background: #000;
+  width: 100%;
+  position: relative;
+  top: -1500px;
+  left: 0;
+  z-index: 101;
+  visibility: hidden;
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+body.avgrund-ready,
+.avgrund-ready .avgrund-overlay {
+  -webkit-transition: 1s all cubic-bezier(.87,.92,.83,.67);
+  -moz-transition: 1s all cubic-bezier(.87,.92,.83,.67);
+  -ms-transition: 1s all cubic-bezier(.87,.92,.83,.67);
+  -o-transition: 1s all cubic-bezier(.87,.92,.83,.67);
+  transition: 0.6s all cubic-bezier(.87,.92,.83,.67);
+}
+
+.avgrund-ready .avgrund-popin {
+  -webkit-transition: 1.5s all ease;
+  -moz-transition: 1.5s all ease;
+  -ms-transition: 1.5s all ease;
+  -o-transition: 1.5s all ease;
+  transition: 1.5s all ease;
+}
+
+body.avgrund-ready,
+.avgrund-ready .avgrund-overlay,
+.avgrund-ready .avgrund-popin {
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+
+body.avgrund-active {
+  -webkit-transform: scale(0.9);
+  -moz-transform: scale(0.9);
+  -ms-transform: scale(0.9);
+  -o-transform: scale(0.9);
+  transform: scale(0.9);
+  overflow: hidden;
+}
+
+.avgrund-active .avgrund-popin {
+  visibility: visible;
+  opacity: 1;
+  filter: alpha(opacity=100);
+
+  -webkit-transform: scale(1.1) translate(-50%, -50%);
+  -moz-transform: scale(1.1) translate(-50%, -50%);
+  -ms-transform: scale(1.1) translate(-50%, -50%);
+  -o-transform: scale(1.1) translate(-50%, -50%);
+  transform: scale(1.1) translate(-50%, -50%);
+
+  -webkit-transition: 0.3s all ease;
+  -moz-transition: 0.3s all ease;
+  -ms-transition: 0.3s all ease;
+  -o-transition: 0.3s all ease;
+  transition: 0.3s all ease;
+}
+
+.avgrund-active .avgrund-overlay {
+  visibility: visible;
+  opacity: .5;
+  filter: alpha(opacity=50);
+  height: 20000px;
+}
+
+.avgrund-popin.stack {
+  -webkit-transform: scale(1.5);
+  -moz-transform: scale(1.5);
+  -ms-transform: scale(1.5);
+  -o-transform: scale(1.5);
+  transform: scale(1.5);
+}
+
+.avgrund-active .avgrund-popin.stack {
+  -webkit-transform: scale(1.1);
+  -moz-transform: scale(1.1);
+  -ms-transform: scale(1.1);
+  -o-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+.avgrund-active .avgrund-blur {
+  -webkit-filter: blur(1px);
+  -moz-filter: blur(1px);
+  -ms-filter: blur(1px);
+  -o-filter: blur(1px);
+  filter: blur(1px);
+}
+
+/* Optional close button styles */
+.avgrund-close {
+  display: block;
+  color: #555;
+  font-size: 13px;
+  text-decoration: none;
+  text-transform: uppercase;
+  position: absolute;
+  top: 6px;
+  right: 10px;
+}

website/src/examples/modal/app.es6

@@ -0,0 +1,154 @@
+import Uppy from 'uppy/core'
+import { DragDrop, Tus10 } from 'uppy/plugins'
+
+const defaults = {
+  width: 380, // max = 640
+  height: 280, // max = 350
+  showClose: false,
+  showCloseText: '',
+  closeByEscape: true,
+  closeByDocument: true,
+  holderClass: '',
+  overlayClass: '',
+  enableStackAnimation: false,
+  onBlurContainer: '',
+  openOnEvent: true,
+  setEvent: 'click',
+  onLoad: false,
+  onUnload: false,
+  onClosing: false,
+  template: '<p>This is test popin content!</p>'
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.body.classList.add('avgrund-ready')
+
+  // if ($('.avgrund-overlay').length === 0) {
+  //   body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');
+  // }
+
+// $(options.onBlurContainer).addClass('avgrund-blur');
+
+  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();
+  })
+})
+
+function onDocumentKeyup (e) {
+  console.log('keyclick')
+  if (options.closeByEscape) {
+    if (e.keyCode === 27) {
+      deactivate();
+    }
+  }
+}
+
+function onDocumentClick (e) {
+  console.log('documentclick')
+
+  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');
+
+    popin.innerHTML = defaults.template;
+    console.log(defaults.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)
+}
+
+  // document.body.addEventListener('keyup', document)
+    // body.bind('keyup', onDocumentKeyup)
+    //     .bind('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);
+    }
+
+
+/**
+ *  jQuery Avgrund Popin Plugin
+ *  http://github.com/voronianski/jquery.avgrund.js/
+ *
+ *  (c) http://pixelhunter.me/
+ *  MIT licensed
+ */
+
+// (function (factory) {
+//     if (typeof define === 'function' && define.amd) {
+//         // AMD
+//         define(['jquery'], factory);
+//     } else if (typeof exports === 'object') {
+//         // CommonJS
+//         module.exports = factory;
+//     } else {
+//         // Browser globals
+//         factory(jQuery);
+//     }
+// }(function ($) {
+//     $.fn.avgrund = function (options) {
+
+
+//         options = $.extend(defaults, options);
+
+//         return this.each(function () {
+//             var self = $(this),
+//                 body = $('body'),
+//                 maxWidth = options.width > 640 ? 640 : options.width,
+//                 maxHeight = options.height > 350 ? 350 : options.height,
+//                 template = typeof options.template === 'function' ? options.template(self) : options.template;
+
+//             body.addClass('avgrund-ready');
+
+//             if ($('.avgrund-overlay').length === 0) {
+//                 body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');
+//             }
+
+//             if (options.onBlurContainer !== '') {
+//                 $(options.onBlurContainer).addClass('avgrund-blur');
+//             }
+
+//             if (options.openOnEvent) {
+//                 self.bind(options.setEvent, function (e) {
+//                     e.stopPropagation();
+
+//                     if ($(e.target).is('a')) {
+//                         e.preventDefault();
+//                     }
+
+//                     activate();
+//                 });
+//             } else {
+//                 activate();
+//             }
+//         });
+//     };
+// }));

website/src/examples/modal/app.html

@@ -0,0 +1 @@
+<button class="ModalTrigger">Launcher</button>

website/src/examples/modal/index.ejs

@@ -0,0 +1,35 @@
+---
+title: Modal
+layout: example
+type: examples
+order: 5
+---
+
+{% blockquote %}
+This is a demo of the Uppy Modal.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html dropbox/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js dropbox/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css dropbox/app.css %}