website: enable zoom example conditionally + remove conditional instagram graph example (#2422)

website/src/examples/dashboard/app.es6

@@ -7,6 +7,7 @@ const Dropbox = require('@uppy/dropbox')
 const Instagram = require('@uppy/instagram')
 const Facebook = require('@uppy/facebook')
 const OneDrive = require('@uppy/onedrive')
+const Zoom = require('@uppy/zoom')
 const ImageEditor = require('@uppy/image-editor')
 const Url = require('@uppy/url')
 const Webcam = require('@uppy/webcam')
@@ -133,6 +134,14 @@ function uppySetOptions () {
     window.uppy.removePlugin(oneDriveInstance)
   }
 
+  const zoomInstance = window.uppy.getPlugin('Zoom')
+  if (opts.Zoom && !zoomInstance) {
+    window.uppy.use(Zoom, { target: Dashboard, companionUrl: 'https://intense-meadow-61813.herokuapp.com/' })
+  }
+  if (!opts.Zoom && zoomInstance) {
+    window.uppy.removePlugin(zoomInstance)
+  }
+
   const webcamInstance = window.uppy.getPlugin('Webcam')
   if (opts.Webcam && !webcamInstance) {
     window.uppy.use(Webcam, { target: Dashboard })

website/src/examples/dashboard/app.html

@@ -17,6 +17,7 @@
     <li><label for="opts-Instagram"><input type="checkbox" id="opts-Instagram" checked/> Instagram</label></li>
     <li><label for="opts-Facebook"><input type="checkbox" id="opts-Facebook" checked/> Facebook</label></li>
     <li><label for="opts-OneDrive"><input type="checkbox" id="opts-OneDrive" checked/> OneDrive</label></li>
+    <li id="zoom-checkbox"><label for="opts-Zoom"><input type="checkbox" id="opts-Zoom" checked/> Zoom</label></li>
     <li><label for="opts-Url"><input type="checkbox" id="opts-Url" checked/> Url</label></li>
   </ul>
 
@@ -45,6 +46,7 @@
     Instagram: document.querySelector('#opts-Instagram'),
     Facebook: document.querySelector('#opts-Facebook'),
     OneDrive: document.querySelector('#opts-OneDrive'),
+    Zoom: document.querySelector('#opts-Zoom'),
     Url: document.querySelector('#opts-Url'),
     autoProceed: document.querySelector('#opts-autoProceed'),
     restrictions: document.querySelector('#opts-restrictions'),
@@ -106,5 +108,13 @@
     })
   })
 
+  // temp hack to only show zoom when the url is:
+  // https://uppy.io/examples/dashboard/#enable-zoom
+  const zoomCheckbox = document.getElementById('zoom-checkbox')
+  zoomCheckbox.style.display = 'none'
+  if (document.location.hash === '#enable-zoom') {
+    zoomCheckbox.style.display = 'inline-block'
+  }
+
   toggleModalBtn()
 </script>

website/src/examples/transloadit/app.es6

@@ -83,18 +83,6 @@ function initUppy (opts = {}) {
     return { params, signature }
   }
 
-  let instagramOptions = {
-    target: Dashboard,
-    companionUrl: 'https://api2.transloadit.com/companion',
-    companionAllowedHosts: Transloadit.COMPANION_PATTERN
-  }
-  if (document.location.hash === '#enable-new-instagram') {
-    instagramOptions = {
-      target: Dashboard,
-      companionUrl: 'https://intense-meadow-61813.herokuapp.com/'
-    }
-  }
-
   uppy
     .use(Transloadit, {
       getAssemblyOptions,
@@ -106,7 +94,11 @@ function initUppy (opts = {}) {
       target: '#uppy-dashboard-container',
       note: 'Images only, 1–2 files, up to 1 MB'
     })
-    .use(Instagram, instagramOptions)
+    .use(Instagram, {
+      target: Dashboard,
+      companionUrl: 'https://api2.transloadit.com/companion',
+      companionAllowedHosts: Transloadit.COMPANION_PATTERN
+    })
     .use(Facebook, {
       target: Dashboard,
       companionUrl: COMPANION