From ee3ab84802ff3d06f9128db4b43792cf89667f10 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 10 Jul 2017 16:02:23 -0500
Subject: [PATCH] Add dat-picker to uploader form

---
 assets/css/forms/new-archive.less | 27 +++++++++++++++++++++++++++
 assets/html/new-archive.html      |  5 ++++-
 assets/js/new-archive.js          | 17 ++++++++++++++++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/assets/css/forms/new-archive.less b/assets/css/forms/new-archive.less
index e986671..dbf9ae5 100644
--- a/assets/css/forms/new-archive.less
+++ b/assets/css/forms/new-archive.less
@@ -43,4 +43,31 @@
       }
     }
   }
+
+  .dat-picker-container {
+    position: relative;
+
+    .dat-picker {
+      display: none;
+      position: absolute;
+      z-index: 1;
+      right: 4px;
+      top: 4px;
+
+      .btn {
+        height: 26px;
+        font-weight: 400;
+      }
+    }
+
+    &.enabled {
+      .dat-picker {
+        display: inline;
+      }
+      
+      input {
+        padding-right: 80px;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/assets/html/new-archive.html b/assets/html/new-archive.html
index c52bf80..9d5f406 100644
--- a/assets/html/new-archive.html
+++ b/assets/html/new-archive.html
@@ -28,7 +28,10 @@ <h1 class="form-heading">Upload an archive</h1>
               <label for="add-archive-key-input">
                 URL
               </label>
-              <input autofocus required type="text" class="form-control" id="add-archive-key-input" placeholder="dat://" name="key" />
+              <div class="dat-picker-container">
+                <input autofocus required type="text" class="form-control" id="add-archive-key-input" placeholder="dat://" name="key" />
+                <span class="dat-picker"><button class="btn">Browse</button></span>
+              </div>
               <span id="add-archive-key-error" class="form-control-feedback"></span>
             </p>
 
diff --git a/assets/js/new-archive.js b/assets/js/new-archive.js
index 744492c..31ec9a7 100755
--- a/assets/js/new-archive.js
+++ b/assets/js/new-archive.js
@@ -14,9 +14,24 @@ $(function () {
   toggleables.forEach(function (el) {
     el.addEventListener('click', toggleHowto)
   })
-
+  setupDatPicker()
   addArchiveNameOutputContainer[0].style.opacity = '0'
 
+  function setupDatPicker () {
+    if (!('DatArchive' in window)) {
+      return
+    }
+
+    var datPicker = $('.dat-picker')
+    datPicker.parent().addClass('enabled')
+    datPicker.click(onPickDat)
+  }
+
+  async function onPickDat () {
+    var url = await DatArchive.selectArchive()
+    addArchiveKeyInput.val(url)
+  }
+
   function toggleHowto (e) {
     var content = $(e.currentTarget.dataset.target)
     var icon = e.currentTarget.childNodes[3]