Merge pull request dat-ecosystem-archive#36 from beakerbrowser/dat-pi…

…cker Add dat-picker to uploader form
garbados · Jul 10, 2017 · 6d34666 · 6d34666
2 parents 9b8661d + ee3ab84
commit 6d34666
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git 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;
+      }
+    }
+  }
 }
diff --git 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
@@ -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]