Add opts.disabled for the Dashboard (#2768)

* Introduce opts.disabled for the Dashboard

* Reduce opacity, disable user-select, set cursor

* Add classes to providers' background circles

So they can be grayscaled via css

* add disableAllFocusableElements and run it in afterUpdate hook, if needed

* increase opacity for readability

* Store previous tabindex value and use it when restoring (setting disable: false)

//cc @goto-bus-stop

* Add disabled docs

* add disabled option to website example

Co-authored-by: Alexander Zaytsev <nqst@users.noreply.github.com>

packages/@uppy/box/src/index.js

@@ -14,7 +14,7 @@ module.exports = class Box extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect fill="#0061D5" width="32" height="32" rx="16" />
+          <rect class="uppy-ProviderIconBg" fill="#0061D5" width="32" height="32" rx="16" />
           <g fill="#fff" fill-rule="nonzero">
             <path d="m16.4 13.5c-1.6 0-3 0.9-3.7 2.2-0.7-1.3-2.1-2.2-3.7-2.2-1 0-1.8 0.3-2.5 0.8v-3.6c-0.1-0.3-0.5-0.7-1-0.7s-0.8 0.4-0.8 0.8v7c0 2.3 1.9 4.2 4.2 4.2 1.6 0 3-0.9 3.7-2.2 0.7 1.3 2.1 2.2 3.7 2.2 2.3 0 4.2-1.9 4.2-4.2 0.1-2.4-1.8-4.3-4.1-4.3m-7.5 6.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5m7.5 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5" />
             <path d="m27.2 20.6l-2.3-2.8 2.3-2.8c0.3-0.4 0.2-0.9-0.2-1.2s-1-0.2-1.3 0.2l-2 2.4-2-2.4c-0.3-0.4-0.9-0.4-1.3-0.2-0.4 0.3-0.5 0.8-0.2 1.2l2.3 2.8-2.3 2.8c-0.3 0.4-0.2 0.9 0.2 1.2s1 0.2 1.3-0.2l2-2.4 2 2.4c0.3 0.4 0.9 0.4 1.3 0.2 0.4-0.3 0.4-0.8 0.2-1.2" />

packages/@uppy/dashboard/src/components/AddFiles.js

@@ -85,7 +85,7 @@ class AddFiles extends Component {
         >
           <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
             <g fill="none" fill-rule="evenodd">
-              <rect width="32" height="32" rx="16" fill="#2275D7" />
+              <rect class="uppy-ProviderIconBg" width="32" height="32" rx="16" fill="#2275D7" />
               <path d="M21.973 21.152H9.863l-1.108-5.087h14.464l-1.246 5.087zM9.935 11.37h3.958l.886 1.444a.673.673 0 0 0 .585.316h6.506v1.37H9.935v-3.13zm14.898 3.44a.793.793 0 0 0-.616-.31h-.978v-2.126c0-.379-.275-.613-.653-.613H15.75l-.886-1.445a.673.673 0 0 0-.585-.316H9.232c-.378 0-.667.209-.667.587V14.5h-.782a.793.793 0 0 0-.61.303.795.795 0 0 0-.155.663l1.45 6.633c.078.36.396.618.764.618h13.354c.36 0 .674-.246.76-.595l1.631-6.636a.795.795 0 0 0-.144-.675z" fill="#FFF" />
             </g>
           </svg>

packages/@uppy/dashboard/src/components/Dashboard.js

@@ -28,6 +28,7 @@ module.exports = function Dashboard (props) {
 
   const dashboardClassName = classNames({
     'uppy-Dashboard': true,
+    'uppy-Dashboard--isDisabled': props.disabled,
     'uppy-Dashboard--animateOpenClose': props.animateOpenClose,
     'uppy-Dashboard--isClosing': props.isClosing,
     'uppy-Dashboard--isDraggingOver': props.isDraggingOver,
@@ -59,6 +60,7 @@ module.exports = function Dashboard (props) {
       data-uppy-num-acquirers={props.acquirers.length}
       data-uppy-drag-drop-supported={isDragDropSupported()}
       aria-hidden={props.inline ? 'false' : props.isHidden}
+      aria-disabled={props.disabled}
       aria-label={!props.inline ? props.i18n('dashboardWindowTitle') : props.i18n('dashboardTitle')}
       onpaste={props.handlePaste}
       onDragOver={props.handleDragOver}

packages/@uppy/dashboard/src/index.js

@@ -14,6 +14,7 @@ const cuid = require('cuid')
 const ResizeObserver = require('resize-observer-polyfill').default || require('resize-observer-polyfill')
 const createSuperFocus = require('./utils/createSuperFocus')
 const memoize = require('memoize-one').default || require('memoize-one')
+const FOCUSABLE_ELEMENTS = require('@uppy/utils/lib/FOCUSABLE_ELEMENTS')
 
 const TAB_KEY = 9
 const ESC_KEY = 27
@@ -145,7 +146,8 @@ module.exports = class Dashboard extends Plugin {
       showRemoveButtonAfterComplete: false,
       browserBackButtonClose: false,
       theme: 'light',
-      autoOpenFileEditor: false
+      autoOpenFileEditor: false,
+      disabled: false
     }
 
     // merge default options with the ones set by user
@@ -502,6 +504,29 @@ module.exports = class Dashboard extends Plugin {
     }
   }
 
+  disableAllFocusableElements = (disable) => {
+    const focusableNodes = toArray(this.el.querySelectorAll(FOCUSABLE_ELEMENTS))
+    if (disable) {
+      focusableNodes.forEach((node) => {
+        // save previous tabindex in a data-attribute, to restore when enabling
+        const currentTabIndex = node.getAttribute('tabindex')
+        if (currentTabIndex) {
+          node.dataset.inertTabindex = currentTabIndex
+        }
+        node.setAttribute('tabindex', '-1')
+      })
+    } else {
+      focusableNodes.forEach((node) => {
+        if ('inertTabindex' in node.dataset) {
+          node.setAttribute('tabindex', node.dataset.inertTabindex)
+        } else {
+          node.removeAttribute('tabindex')
+        }
+      })
+    }
+    this.dashboardIsDisabled = disable
+  }
+
   updateBrowserHistory = () => {
     // Ensure history state does not already contain our modal name to avoid double-pushing
     if (!history.state || !history.state[this.modalName]) {
@@ -565,6 +590,10 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
+    if (this.opts.disabled) {
+      return
+    }
+
     // 1. Add a small (+) icon on drop
     // (and prevent browsers from interpreting this as files being _moved_ into the browser, https://github.com/transloadit/uppy/issues/1978)
     event.dataTransfer.dropEffect = 'copy'
@@ -577,6 +606,10 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
+    if (this.opts.disabled) {
+      return
+    }
+
     clearTimeout(this.removeDragOverClassTimeout)
     // Timeout against flickering, this solution is taken from drag-drop library. Solution with 'pointer-events: none' didn't work across browsers.
     this.removeDragOverClassTimeout = setTimeout(() => {
@@ -587,6 +620,11 @@ module.exports = class Dashboard extends Plugin {
   handleDrop = (event, dropCategory) => {
     event.preventDefault()
     event.stopPropagation()
+
+    if (this.opts.disabled) {
+      return
+    }
+
     clearTimeout(this.removeDragOverClassTimeout)
 
     // 2. Remove dragover class
@@ -758,6 +796,15 @@ module.exports = class Dashboard extends Plugin {
   }
 
   afterUpdate = () => {
+    if (this.opts.disabled && !this.dashboardIsDisabled) {
+      this.disableAllFocusableElements(true)
+      return
+    }
+
+    if (!this.opts.disabled && this.dashboardIsDisabled) {
+      this.disableAllFocusableElements(false)
+    }
+
     this.superFocusOnEachUpdate()
   }
 
@@ -893,9 +940,11 @@ module.exports = class Dashboard extends Plugin {
       allowNewUpload,
       acquirers,
       theme,
+      disabled: this.opts.disabled,
       direction: this.opts.direction,
       activePickerPanel: pluginState.activePickerPanel,
       showFileEditor: pluginState.showFileEditor,
+      disableAllFocusableElements: this.disableAllFocusableElements,
       animateOpenClose: this.opts.animateOpenClose,
       isClosing: pluginState.isClosing,
       getPlugin: this.uppy.getPlugin,

packages/@uppy/dashboard/src/style.scss

@@ -139,6 +139,10 @@
   [data-uppy-theme="dark"] & {
     background-color: $gray-900;
   }
+
+  .uppy-Dashboard--isDisabled & {
+    cursor: not-allowed;
+  }
 }
 
 .uppy-Dashboard-innerWrap {
@@ -149,12 +153,23 @@
   position: relative;
   border-radius: 5px;
   opacity: 0;
-}
 
-  .uppy-Dashboard--isInnerWrapVisible .uppy-Dashboard-innerWrap {
+  .uppy-Dashboard--isInnerWrapVisible & {
     opacity: 1;
   }
 
+  .uppy-Dashboard--isDisabled & {
+    pointer-events: none;
+    opacity: 0.6;
+    filter: grayscale(100%);
+    user-select: none;
+  }
+}
+
+.uppy-Dashboard--isDisabled .uppy-ProviderIconBg {
+  fill: #9f9f9f;
+}
+
 .uppy-Dashboard--modal .uppy-Dashboard-inner {
   position: fixed;
   top: 35px;

packages/@uppy/dashboard/types/index.d.ts

@@ -50,6 +50,8 @@ declare module Dashboard {
     thumbnailWidth?: number
     trigger?: string
     width?: string | number
+    autoOpenFileEditor?: boolean
+    disabled?: boolean
   }
 }
 

packages/@uppy/dropbox/src/index.js

@@ -14,7 +14,7 @@ module.exports = class Dropbox extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect fill="#0D2481" width="32" height="32" rx="16" />
+          <rect class="uppy-ProviderIconBg" fill="#0D2481" width="32" height="32" rx="16" />
           <path d="M11 8l5 3.185-5 3.186-5-3.186L11 8zm10 0l5 3.185-5 3.186-5-3.186L21 8zM6 17.556l5-3.185 5 3.185-5 3.186-5-3.186zm15-3.185l5 3.185-5 3.186-5-3.186 5-3.185zm-10 7.432l5-3.185 5 3.185-5 3.186-5-3.186z" fill="#FFF" fill-rule="nonzero" />
         </g>
       </svg>

packages/@uppy/facebook/src/index.js

@@ -14,7 +14,7 @@ module.exports = class Facebook extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect width="32" height="32" rx="16" fill="#3C5A99" />
+          <rect class="uppy-ProviderIconBg" width="32" height="32" rx="16" fill="#3C5A99" />
           <path d="M17.842 26v-8.667h2.653l.398-3.377h-3.051v-2.157c0-.978.248-1.644 1.527-1.644H21V7.132A19.914 19.914 0 0 0 18.623 7c-2.352 0-3.963 1.574-3.963 4.465v2.49H12v3.378h2.66V26h3.182z" fill="#FFF" fill-rule="nonzero" />
         </g>
       </svg>

packages/@uppy/google-drive/src/index.js

@@ -15,7 +15,7 @@ module.exports = class GoogleDrive extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect fill="#4285F4" width="32" height="32" rx="16" />
+          <rect class="uppy-ProviderIconBg" fill="#4285F4" width="32" height="32" rx="16" />
           <path d="M10.324 23.3l3-5.1H25l-3 5.1H10.324zM13 18.2l-3 5.1-3-5.1 5.839-9.924 2.999 5.1L13 18.2zm11.838-.276h-6L13 8h6l5.84 9.924h-.002z" fill="#FFF" />
         </g>
       </svg>

packages/@uppy/instagram/src/index.js

@@ -14,7 +14,7 @@ module.exports = class Instagram extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect fill="#E1306C" width="32" height="32" rx="16" />
+          <rect class="uppy-ProviderIconBg" fill="#E1306C" width="32" height="32" rx="16" />
           <path d="M16 8.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.392.144.745.374 1.036.673.299.29.529.644.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.671a2.98 2.98 0 0 1-1.708 1.708c-.317.123-.794.27-1.671.31-.95.043-1.234.053-3.637.053s-2.688-.01-3.637-.053c-.877-.04-1.354-.187-1.671-.31a2.788 2.788 0 0 1-1.035-.673 2.788 2.788 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.949-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.144-.392.374-.745.673-1.036.29-.299.644-.529 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052zM16 7c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.419-.6.225-1.145.58-1.594 1.038-.458.45-.813.993-1.039 1.594-.222.572-.374 1.226-.418 2.184C7.01 13.25 7 13.556 7 16s.01 2.75.054 3.71c.044.959.196 1.613.419 2.185.226.6.58 1.145 1.038 1.594.45.458.993.813 1.594 1.038.572.223 1.227.375 2.184.419.96.044 1.267.054 3.711.054s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.602 4.602 0 0 0 2.632-2.632c.223-.572.375-1.226.419-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 23.49 8.51a4.412 4.412 0 0 0-1.594-1.039c-.572-.222-1.226-.374-2.184-.418C18.75 7.01 18.444 7 16 7zm0 4.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 7.421a2.921 2.921 0 1 1 0-5.842 2.921 2.921 0 0 1 0 5.842zm4.875-6.671a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25z" fill="#FFF" />
         </g>
       </svg>

packages/@uppy/onedrive/src/index.js

@@ -14,7 +14,7 @@ module.exports = class OneDrive extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect width="32" height="32" rx="16" fill="#0262C0" />
+          <rect class="uppy-ProviderIconBg" width="32" height="32" rx="16" fill="#0262C0" />
           <g fill="#FFF" fill-rule="nonzero">
             <path d="M24.157 22s1.492-.205 1.79-1.655a2.624 2.624 0 0 0 .03-.878c-.22-1.64-1.988-2.01-1.988-2.01s.307-1.765-1.312-2.69c-1.62-.925-3.1 0-3.1 0S18.711 13 16.366 13c-3.016 0-3.519 3.448-3.519 3.448S10 16.618 10 19.14c0 2.523 2.597 2.86 2.597 2.86h11.56z" />
             <path d="M9.421 19.246c0-2.197 1.606-3.159 2.871-3.472.44-1.477 1.654-3.439 4.135-3.439H16.445c1.721 0 2.79.823 3.368 1.476a3.99 3.99 0 0 1 1.147-.171h.01l.03.002C21.017 13.5 20.691 10 16.757 10c-2.69 0-3.639 2.345-3.639 2.345s-1.95-1.482-3.955.567c-1.028 1.052-.79 2.669-.79 2.669S6 15.824 6 18.412C6 20.757 8.452 21 8.452 21h1.372a3.77 3.77 0 0 1-.403-1.754z" />

packages/@uppy/screen-capture/src/ScreenRecIcon.js

@@ -4,7 +4,7 @@ module.exports = () => {
   return (
     <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
       <g fill="none" fill-rule="evenodd">
-        <rect fill="#2C3E50" width="32" height="32" rx="16" />
+        <rect class="uppy-ProviderIconBg" fill="#2C3E50" width="32" height="32" rx="16" />
         <path d="M24.182 9H7.818C6.81 9 6 9.742 6 10.667v10c0 .916.81 1.666 1.818 1.666h4.546V24h7.272v-1.667h4.546c1 0 1.809-.75 1.809-1.666l.009-10C26 9.742 25.182 9 24.182 9zM24 21H8V11h16v10z" fill="#FFF" fill-rule="nonzero" />
         <circle fill="#FFF" cx="16" cy="16" r="2" />
       </g>

packages/@uppy/unsplash/src/index.js

@@ -18,7 +18,7 @@ module.exports = class Unsplash extends Plugin {
     this.icon = () => (
       <svg viewBox="0 0 32 32" height="32" width="32" aria-hidden="true">
         <path d="M46.575 10.883v-9h12v9zm12 5h10v18h-32v-18h10v9h12z" fill="#fff" />
-        <rect width="32" height="32" rx="16" />
+        <rect class="uppy-ProviderIconBg" width="32" height="32" rx="16" />
         <path d="M13 12.5V8h6v4.5zm6 2.5h5v9H8v-9h5v4.5h6z" fill="#fff" />
       </svg>
     )

packages/@uppy/url/src/index.js

@@ -9,7 +9,7 @@ function UrlIcon () {
   return (
     <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
       <g fill="none" fill-rule="evenodd">
-        <rect fill="#FF753E" width="32" height="32" rx="16" />
+        <rect class="uppy-ProviderIconBg" fill="#FF753E" width="32" height="32" rx="16" />
         <path d="M22.788 15.389l-2.199 2.19a3.184 3.184 0 0 1-.513.437c-.806.584-1.686.876-2.638.876a4.378 4.378 0 0 1-3.519-1.752c-.22-.292-.146-.802.147-1.021.293-.22.806-.146 1.026.146.953 1.313 2.785 1.532 4.105.583a.571.571 0 0 0 .293-.292l2.199-2.189c1.1-1.167 1.1-2.992-.073-4.086a2.976 2.976 0 0 0-4.105 0l-1.246 1.24a.71.71 0 0 1-1.026 0 .703.703 0 0 1 0-1.022l1.246-1.24a4.305 4.305 0 0 1 6.083 0c1.833 1.605 1.906 4.451.22 6.13zm-7.183 5.035l-1.246 1.24a2.976 2.976 0 0 1-4.105 0c-1.172-1.094-1.172-2.991-.073-4.086l2.2-2.19.292-.291c.66-.438 1.393-.657 2.2-.584.805.146 1.465.51 1.905 1.168.22.292.733.365 1.026.146.293-.22.367-.73.147-1.022-.733-.949-1.76-1.532-2.859-1.678-1.1-.22-2.272.073-3.225.802l-.44.438-2.199 2.19c-1.686 1.75-1.612 4.524.074 6.202.88.803 1.979 1.241 3.078 1.241 1.1 0 2.199-.438 3.079-1.24l1.246-1.241a.703.703 0 0 0 0-1.022c-.294-.292-.807-.365-1.1-.073z" fill="#FFF" fill-rule="nonzero" />
       </g>
     </svg>

packages/@uppy/webcam/src/index.js

@@ -83,7 +83,7 @@ module.exports = class Webcam extends Plugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
-          <rect fill="#03BFEF" width="32" height="32" rx="16" />
+          <rect class="uppy-ProviderIconBg" fill="#03BFEF" width="32" height="32" rx="16" />
           <path d="M22 11c1.133 0 2 .867 2 2v7.333c0 1.134-.867 2-2 2H10c-1.133 0-2-.866-2-2V13c0-1.133.867-2 2-2h2.333l1.134-1.733C13.6 9.133 13.8 9 14 9h4c.2 0 .4.133.533.267L19.667 11H22zm-6 1.533a3.764 3.764 0 0 0-3.8 3.8c0 2.129 1.672 3.801 3.8 3.801s3.8-1.672 3.8-3.8c0-2.13-1.672-3.801-3.8-3.801zm0 6.261c-1.395 0-2.46-1.066-2.46-2.46 0-1.395 1.065-2.461 2.46-2.461s2.46 1.066 2.46 2.46c0 1.395-1.065 2.461-2.46 2.461z" fill="#FFF" fill-rule="nonzero" />
         </g>
       </svg>

packages/@uppy/zoom/src/index.js

@@ -13,7 +13,7 @@ module.exports = class Zoom extends Plugin {
     this.title = this.opts.title || 'Zoom'
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
-        <rect width="32" height="32" rx="16" fill="#0E71EB" />
+        <rect class="uppy-ProviderIconBg" width="32" height="32" rx="16" fill="#0E71EB" />
         <g fill="none" fill-rule="evenodd">
           <path fill="#fff" d="M29,31H14c-1.657,0-3-1.343-3-3V17h15c1.657,0,3,1.343,3,3V31z" style="transform: translate(-5px, -5px) scale(0.9);" />
           <polygon fill="#fff" points="37,31 31,27 31,21 37,17" style="transform: translate(-5px, -5px) scale(0.9);" />

website/src/docs/dashboard.md

@@ -424,6 +424,21 @@ Automatically open file editor (see [`@uppy/image-editor`](/docs/image-editor/))
 
 Use case: user adds an image — Uppy opens Image Editor right away — user crops / adjusts the image — upload.
 
+### `disabled: false`
+
+Enabling this option makes the Dashboard grayed-out and non-interactive. Users won’t be able to click on buttons or drop files.
+
+Useful when you need to confitionally enable/disable file uploading or manipulation, based on a condition in your app. Can be set on init or via API:
+
+```js
+const dashboard = uppy.getPlugin('Dashboard')
+dashboard.setOptions({ disabled: true })
+
+userNameInput.addEventListener('change', () => {
+  dashboard.setOptions({ disabled: false })
+})
+```
+
 ## Methods
 
 ### `openModal()`

website/src/examples/dashboard/app.es6

@@ -86,7 +86,8 @@ function uppySetOptions () {
 
   window.uppy.getPlugin('Dashboard').setOptions({
     note: opts.restrictions ? 'Images and video only, 2–3 files, up to 1 MB' : '',
-    theme: opts.darkMode ? 'dark' : 'light'
+    theme: opts.darkMode ? 'dark' : 'light',
+    disabled: opts.disabled
   })
 
   const googleDriveInstance = window.uppy.getPlugin('GoogleDrive')

website/src/examples/dashboard/app.html

@@ -6,8 +6,9 @@
     <li><label for="opts-DashboardInline"><input type="checkbox" id="opts-DashboardInline" checked/> Display inline</label></li>
     <li><label for="opts-autoProceed"><input type="checkbox" id="opts-autoProceed" checked/> Autoproceed</label></li>
     <li><label for="opts-restrictions"><input type="checkbox" id="opts-restrictions" checked/> Restrictions</label></li>
-    <li><label for="opts-darkMode"><input type="checkbox" id="opts-darkMode" /> Dark Mode</label></li>
     <li><label for="opts-imageEditor"><input type="checkbox" id="opts-imageEditor" checked/> Image Editor</label></li>
+    <li><label for="opts-darkMode"><input type="checkbox" id="opts-darkMode" /> Dark Mode</label></li>
+    <li><label for="opts-disabled"><input type="checkbox" id="opts-disabled" checked/> Disabled</label></li>
   </ul>
   <ul>
     <li><label for="opts-Webcam"><input type="checkbox" id="opts-Webcam" checked/> Webcam</label></li>
@@ -51,7 +52,8 @@
     autoProceed: document.querySelector('#opts-autoProceed'),
     restrictions: document.querySelector('#opts-restrictions'),
     darkMode: document.querySelector('#opts-darkMode'),
-    imageEditor: document.querySelector('#opts-imageEditor')
+    imageEditor: document.querySelector('#opts-imageEditor'),
+    disabled: document.querySelector('#opts-disabled')
   }
 
   var defaultOpts = {
@@ -67,7 +69,8 @@
     autoProceed: false,
     restrictions: false,
     darkMode: false,
-    imageEditor: true
+    imageEditor: true,
+    disabled: false
   }
 
   // try to get options from localStorage, if its empty, set to defaultOpts