feat: add button to transfer url of current tab in coupon form

freaktechnik · Feb 17, 2019 · 441d6bd · 441d6bd
1 parent 30a00ca
commit 441d6bd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -56,5 +56,8 @@
     },
     "back_title": {
         "message": "Back to coupons list"
+    },
+    "use-current": {
+        "message": "From current tab"
     }
 }
diff --git a/booklet.html b/booklet.html
@@ -22,19 +22,22 @@ <h1 data-l10n-id="extensionName">Coupon Booklet</h1>
                     <label for="code" data-l10n-id="code">Code</label>
                     <input type="text" required id="code" placeholder="freeStuff1" data-l10n-id="codeInput" data-l10n-attrs="placeholder" data-l10n-nocontent>
                 </p>
-                <p class="browser-style">
-                    <label for="website" data-l10n-id="website">Website</label>
+                <section class="browser-style">
+                    <div class="space-between">
+                        <label for="website" data-l10n-id="website">Website</label>
+                        <button id="useCurrent" class="browser-style" data-l10n-id="use-current">From current tab</button>
+                    </div>
                     <input type="url" required id="website" placeholder="https://example.com">
-                </p>
+                </section>
                 <p class="browser-style">
                     <label for="expiryDate" data-l10n-id="validLabel">Valid through (optional)</label>
                     <input type="date" id="expiryDate">
                 </p>
                 <p class="browser-style">
                     <label for="notes" data-l10n-id="note">Notes (optional)</label>
-                    <textarea id="notes" placeholder="Only one item, basket value of at least $30 etc." data-l10n-attrs="placeholder" data-l10n-id="noteArea" data-l10n-nocontent></textarea>
+                    <textarea id="notes" class="browser-style" placeholder="Only one item, basket value of at least $30 etc." data-l10n-attrs="placeholder" data-l10n-id="noteArea" data-l10n-nocontent></textarea>
                 </p>
-                <p>
+                <p class="space-between">
                     <button type="button" class="browser-style" title="Back to coupons list" id="back" data-l10n-id="back" data-l10n-attrs="title">Back</button>
                     <button class="browser-style default" data-l10n-id="add">Add</button>
                 </p>

diff --git a/booklet.js b/booklet.js
@@ -51,13 +51,15 @@ Promise.all([
             document.querySelector("ul").hidden = true;
             document.querySelector("header").hidden = true;
             document.querySelector("#add").hidden = true;
+            document.querySelector("#add").disabled = true;
         }
 
         function hideAdd() {
             document.querySelector("#addcoupon").hidden = true;
             document.querySelector("ul").hidden = false;
             document.querySelector("header").hidden = false;
             document.querySelector("#add").hidden = false;
+            document.querySelector("#add").disabled = false;
             document.querySelector("form").reset();
             loadCoupons();
         }
@@ -117,6 +119,8 @@ Promise.all([
                     mainTitle.classList.add('space');
                     mainTitle.textContent = host;
                     hostSummary.append(mainTitle);
+                    // This is a button and not a link because a link would open in a new window instead of a tab
+                    // and the button styles would havee to be manually ported to it.
                     const open = document.createElement("button");
                     open.classList.add('browser-style');
                     open.textContent = 'visit';
@@ -244,6 +248,18 @@ Promise.all([
         document.querySelector("#add").addEventListener("click", showAdd, { passive: true });
         document.querySelector("form").addEventListener("submit", addCoupon, { passive: false });
         document.querySelector("#back").addEventListener("click", hideAdd, { passive: true });
+        document.querySelector("#useCurrent").addEventListener("click", function() {
+            browser.tabs.query({
+                active: true,
+                currentWindow: true
+            })
+                .then((tabs) => {
+                    if(tabs.length) {
+                        document.querySelector("#website").value = tabs[0].url;
+                    }
+                })
+                .catch(console.error);
+        }, { passive: true });
         document.documentElement.addEventListener("toggle", (e) => {
             if(e.target.open) {
                 const details = document.querySelectorAll("details");

diff --git a/style.css b/style.css
@@ -27,7 +27,7 @@ header button:active {
     background: #411806;
 }
 
-section,
+section:not(.browser-style),
 .empty {
     padding: 0 0.5em;
 }
@@ -101,3 +101,9 @@ details .button-group {
 .current summary .space {
     font-weight: bold;
 }
+
+.space-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}