Also rename fakemodal->modal examples. Ref #57

website/_config.yml

@@ -2,13 +2,6 @@
 ## Docs: http://zespia.tw/hexo/docs/configuration.html
 ## Source: https://github.com/tommy351/hexo/
 
-# Uppy versions, auto updated by update.js
-uppy_version: 0.0.1
-
-uppy_dev_size: "96.88"
-uppy_min_size: "96.88"
-uppy_gz_size: "96.88"
-
 # Theme
 google_analytics: UA-63083-12
 root_domain: uppy.io

website/src/examples/fakemodal/app.es6

@@ -1,11 +0,0 @@
-import Uppy from '../../../../src/core/Core.js'
-import Dummy from '../../../../src/plugins/Dummy.js'
-import GoogleDrive from '../../../../src/plugins/GoogleDrive.js'
-import Modal from '../../../../src/plugins/Modal.js'
-
-const uppy = new Uppy({debug: true})
-uppy
-  .use(Modal)
-  .use(Dummy, {target: Modal})
-  .use(GoogleDrive, {target: Modal})
-  .run()

website/src/examples/fakemodal/app.html

@@ -1,5 +0,0 @@
-<!-- Basic Uppy styles -->
-<link rel="stylesheet" href="/uppy/uppy.css">
-
-<!-- Modal trigger -->
-<button id="uppyModalOpener">Open Uppy Modal</button>

website/src/examples/fakemodal/index.ejs

@@ -1,35 +0,0 @@
----
-title: Fake Modal
-layout: example
-type: examples
-order: 1
----
-
-{% blockquote %}
-Making a modal dialog great again.
-{% 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 fakemodal/app.html %}
-
-<p>
-  Along with this JavaScript:
-</p>
-{% include_code lang:js fakemodal/app.es6 %}
-
-<p>
-  And the following CSS:
-</p>
-{% include_code lang:css fakemodal/app.css %}

website/src/examples/modal/app.css

@@ -1,177 +0,0 @@
-html,
-body {
-  background-color: #ccc;
-  height: 100%;
-  overflow: auto;
-}
-
-#UppyModal {
-  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);
-}
-
-.Modal {
-  display: flex;
-  flex-direction: row;
-}
-
-.UppyModalOverlay {
-  background: #000;
-  width: 100%;
-  position: relative;
-  top: -1500px;
-  left: 0;
-  z-index: 101;
-  visibility: hidden;
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-
-body,
-.UppyModal--is-ready .UppyModalOverlay {
-  -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);
-}
-
-.UppyModal--is-ready #UppyModal {
-  -webkit-transition: .5s all ease;
-  -moz-transition: 1.5s all ease;
-  -ms-transition: 1.5s all ease;
-  -o-transition: 1.5s all ease;
-  transition: .5s all ease;
-}
-
-body.UppyModal--is-ready,
-.UppyModal--is-ready .UppyModalOverlay,
-.UppyModal--is-ready #UppyModal {
-  -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.UppyModal--is-open {
-  -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;
-}
-
-#UppyModal.UppyModal--is-open {
-  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;
-}
-
-body.UppyModal--is-open .UppyModalOverlay {
-  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 */
-.UppyModal-closeBtn {
-  display: block;
-  color: #555;
-  font-size: 13px;
-  text-decoration: none;
-  text-transform: uppercase;
-  position: absolute;
-  top: 6px;
-  right: 10px;
-}
-
-/* Modal Styles */
-#UppyModalDialog {
-  display: flex;
-  flex-direction: row;
-}
-
-#UppyModalContent {
-  height: 600px;
-}
-
-.UppyModalSidebar {
-  border-right: 1px solid #ccc;
-  height: 600px;
-  text-align: center;
-}
-
-.UppyModalSidebar > ul {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  list-style-type: none;
-  padding: 0;
-}
-
-.UppyModalSidebar li {
-  margin-bottom: 16px;
-}
-
-.UppyModalSidebar button {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  outline: 0;
-}

website/src/examples/modal/app.es6

@@ -1,27 +1,11 @@
-// import Uppy from 'uppy/core'
-// import { DragDrop, Tus10 } from 'uppy/plugins'
-import Uppy from 'uppy/core'
-import { Modal, DragDrop } from 'uppy/plugins'
+import Uppy from '../../../../src/core/Core.js'
+import Dummy from '../../../../src/plugins/Dummy.js'
+import GoogleDrive from '../../../../src/plugins/GoogleDrive.js'
+import Modal from '../../../../src/plugins/Modal.js'
 
-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>'
-}
-
-const uppy = new Uppy({wait: false})
-
-uppy.use(Modal, {selector: '.ModalTrigger'})
+const uppy = new Uppy({debug: true})
+uppy
+  .use(Modal)
+  .use(Dummy, {target: Modal})
+  .use(GoogleDrive, {target: Modal})
+  .run()

website/src/examples/modal/app.html

@@ -1,15 +1,5 @@
-<button class="ModalTrigger">Launcher</button>
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="/uppy/uppy.css">
 
-<!-- <div class="ModalTemplate">
-  <nav class="UploadSidebar">
-    <ul class="InputList">
-      <li><button>Dropbox</button></li>
-      <li><button>Google Drive</button></li>
-      <li><button>Instagram</button></li>
-      <li><button>Local</button></li>
-      <li><button>Webcam</button></li>
-    </ul>
-  </nav>
-  <main class="UploadContent">
-  </main>
-</div> -->
+<!-- Modal trigger -->
+<button id="uppyModalOpener">Open Uppy Modal</button>

website/src/examples/modal/index.ejs

@@ -2,11 +2,11 @@
 title: Modal
 layout: example
 type: examples
-order: 5
+order: 1
 ---
 
 {% blockquote %}
-This is a demo of the Uppy Modal.
+Making a modal dialog great again.
 {% endblockquote %}
 
 <link rel="stylesheet" href="app.css">
@@ -22,14 +22,14 @@ This is a demo of the Uppy Modal.
 <p>
   On this page we're using the following HTML snippet:
 </p>
-{% include_code lang:html dropbox/app.html %}
+{% include_code lang:html fakemodal/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
-{% include_code lang:js dropbox/app.es6 %}
+{% include_code lang:js fakemodal/app.es6 %}
 
 <p>
   And the following CSS:
 </p>
-{% include_code lang:css dropbox/app.css %}
+{% include_code lang:css fakemodal/app.css %}