From 159dbf5e8ce0cc0005669c804bc1a5fda4980e94 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Tue, 1 Nov 2016 22:05:42 -0400
Subject: [PATCH] =?UTF-8?q?dashboard:=20refactor=20=E2=80=94=20only=20load?=
 =?UTF-8?q?=20one=20acquire=20panel=20(activeAcquirer=20or=20empty),=20cha?=
 =?UTF-8?q?nge=20focus=20behavior,=20utilize=20onload/onunload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/Dashboard/Dashboard.js | 24 +++++++++----------
 src/plugins/Dashboard/index.js     | 11 ++++++++-
 src/plugins/Dummy.js               | 37 +++++++++++++++++-------------
 src/plugins/Webcam/CameraScreen.js |  5 +++-
 src/plugins/Webcam/index.js        | 14 +++--------
 5 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/plugins/Dashboard/Dashboard.js b/src/plugins/Dashboard/Dashboard.js
index 8784fdff9..c9e7ef839 100644
--- a/src/plugins/Dashboard/Dashboard.js
+++ b/src/plugins/Dashboard/Dashboard.js
@@ -146,19 +146,19 @@ export default function Dashboard (props) {
           : null
         }
 
-        ${props.acquirers.map((target) => {
-          return html`<div class="UppyDashboardContent-panel"
-                           id="${props.panelSelectorPrefix}--${target.id}"
-                           role="tabpanel"
-                           aria-hidden="${target.isHidden}">
-             <div class="UppyDashboardContent-bar">
-               <h2 class="UppyDashboardContent-title">${props.i18n('importFrom')} ${target.name}</h2>
-               <button class="UppyDashboardContent-back"
-                       onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
+        <div class="UppyDashboardContent-panel"
+             role="tabpanel"
+             aria-hidden="${props.activeAcquirer ? props.activeAcquirer.isHidden : 'true'}">
+          <div class="UppyDashboardContent-bar">
+            <h2 class="UppyDashboardContent-title">
+              ${props.i18n('importFrom')} ${props.activeAcquirer ? props.activeAcquirer.name : null}
+            </h2>
+            <button class="UppyDashboardContent-back"
+                    onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
              </div>
-            ${target.render(props.state)}
-          </div>`
-        })}
+            ${props.activeAcquirer ? props.activeAcquirer.render(props.state) : null}
+          </div>
+        </div>
 
         <div class="UppyDashboard-progressindicators">
           ${props.progressindicators.map((target) => {
diff --git a/src/plugins/Dashboard/index.js b/src/plugins/Dashboard/index.js
index 44590aca5..e21021d63 100644
--- a/src/plugins/Dashboard/index.js
+++ b/src/plugins/Dashboard/index.js
@@ -101,7 +101,7 @@ export default class DashboardUI extends Plugin {
     const newTargets = modal.targets.map((target) => {
       if (target.type === 'acquirer') {
         if (target.id === id) {
-          target.focus()
+          // target.focus()
           return Object.assign({}, target, {
             isHidden: false
           })
@@ -268,6 +268,14 @@ export default class DashboardUI extends Plugin {
       return target.type === 'acquirer'
     })
 
+    let activeAcquirer = acquirers.filter((acquirer) => {
+      return !acquirer.isHidden
+    })[0]
+
+    if (typeof activeAcquirer === 'undefined') {
+      activeAcquirer = false
+    }
+
     const progressindicators = state.modal.targets.filter((target) => {
       return target.type === 'progressindicator'
     })
@@ -318,6 +326,7 @@ export default class DashboardUI extends Plugin {
       isAllComplete: isAllComplete,
       isAllPaused: isAllPaused,
       acquirers: acquirers,
+      activeAcquirer: activeAcquirer,
       progressindicators: progressindicators,
       autoProceed: this.core.opts.autoProceed,
       id: this.id,
diff --git a/src/plugins/Dummy.js b/src/plugins/Dummy.js
index e9131ca69..07ab0bf3c 100644
--- a/src/plugins/Dummy.js
+++ b/src/plugins/Dummy.js
@@ -44,33 +44,38 @@ export default class Dummy extends Plugin {
     const bla = html`<h2>this is strange 2</h2>`
     return html`
       <div class="wow-this-works">
-        <input class="UppyDummy-firstInput" type="text" value="hello">
+        <input class="UppyDummy-firstInput" type="text" value="hello" onload=${(el) => {
+          el.focus()
+        }} />
         ${this.strange}
         ${bla}
       </div>
     `
   }
 
-  focus () {
-    const firstInput = document.querySelector(`${this.target} .UppyDummy-firstInput`)
-
-    // only works for the first time if wrapped in setTimeout for some reason
-    // firstInput.focus()
-    setTimeout(function () {
-      firstInput.focus()
-    }, 10)
-
-    setTimeout(() => {
-      this.core.emit('informer', 'Hello! I’m a test Informer message', 'info', 4500)
-      this.addFakeFileJustToTest()
-    }, 1000)
-  }
+  // focus () {
+  //   return
+  //   console.log(`${this.target} .UppyDummy-firstInput`)
+  //
+  //   const firstInput = document.querySelector(`${this.target} .UppyDummy-firstInput`)
+  //
+  //   // only works for the first time if wrapped in setTimeout for some reason
+  //   // firstInput.focus()
+  //   setTimeout(function () {
+  //     firstInput.focus()
+  //   }, 10)
+  //
+  //   setTimeout(() => {
+  //     this.core.emit('informer', 'Hello! I’m a test Informer message', 'info', 4500)
+  //     this.addFakeFileJustToTest()
+  //   }, 1000)
+  // }
 
   install () {
     const target = this.opts.target
     const plugin = this
     this.target = this.mount(target, plugin)
-    //
+
     // function workerFunc () {
     //   self.addEventListener('message', (e) => {
     //     const file = e.data.file
diff --git a/src/plugins/Webcam/CameraScreen.js b/src/plugins/Webcam/CameraScreen.js
index e71d5d1c0..dd9a09ba3 100644
--- a/src/plugins/Webcam/CameraScreen.js
+++ b/src/plugins/Webcam/CameraScreen.js
@@ -11,7 +11,10 @@ export default (props) => {
   }
 
   return html`
-    <div class="UppyWebcam-container">
+    <div class="UppyWebcam-container" onload=${(el) => {
+      props.focus()
+      document.querySelector('.UppyWebcam-stopRecordBtn').focus()
+    }}>
       <div class='UppyWebcam-videoContainer'>
         ${video}
       </div>
diff --git a/src/plugins/Webcam/index.js b/src/plugins/Webcam/index.js
index c4fa14b76..432694aae 100644
--- a/src/plugins/Webcam/index.js
+++ b/src/plugins/Webcam/index.js
@@ -93,6 +93,8 @@ export default class Webcam extends Plugin {
   }
 
   render (state) {
+    this.start()
+
     if (!state.webcam.cameraReady && !state.webcam.useTheFlash) {
       return PermissionsScreen(state.webcam)
     }
@@ -105,23 +107,13 @@ export default class Webcam extends Plugin {
 
     return CameraScreen(extend(state.webcam, {
       onSnapshot: this.takeSnapshot,
+      focus: this.focus,
       getSWFHTML: this.webcam.getSWFHTML,
       src: this.stream
     }))
   }
 
   focus () {
-    const firstInput = document.querySelector('.UppyWebcam-stopRecordBtn')
-    // only works for the first time if wrapped in setTimeout for some reason
-    // firstInput.focus()
-    if (firstInput) {
-      setTimeout(function () {
-        firstInput.focus()
-      }, 10)
-    }
-
-    this.start()
-
     setTimeout(() => {
       this.core.emitter.emit('informer', 'Smile!', 'info', 3500)
     }, 1000)