From bf843564019b5be7ff865c8a91c724ff75d6ca3b Mon Sep 17 00:00:00 2001
From: Nikita Karamov <nick@karamoff.dev>
Date: Wed, 23 Sep 2020 18:21:33 +0200
Subject: [PATCH] Add post text

---
 src/index.pug       |  8 ++++++--
 src/script/index.js | 10 ++++++----
 src/style/main.scss | 46 +++++++++++++++++++++++----------------------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index 9f9d967..3c2e640 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -9,10 +9,14 @@ html(lang="en")
         link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;500&display=swap")
     body
         header
-            h1 toot
-            p Share links on any Mastodon instance
+            h1 🐘 toot
+            p
+                | Quickly post on any Mastodon instance
         main
             form#form
+                section
+                    label(for="text") Post text
+                    textarea#text(rows=6, name="text", required)
                 section
                     label(for="instance") Mastodon instance URL
                     input#instance(type="url", name="instance", placeholder="https://", required)
diff --git a/src/script/index.js b/src/script/index.js
index 6cabf4e..6386d6b 100644
--- a/src/script/index.js
+++ b/src/script/index.js
@@ -3,14 +3,15 @@ if (remembered != null) {
     document.getElementById('instance').value = remembered;
 }
 
-var parsedQuery = {};
-
 var paramPairs = window.location.search.substr(1).split('&');
 var paramPairsLength = paramPairs.length;
 
 for (var i = 0; i < paramPairsLength; i++) {
     var paramPair = paramPairs[i].split('=');
-    parsedQuery[paramPair[0]] = paramPair[1];
+    if (paramPair[0] === 'text') {
+        document.getElementById('text').value = decodeURIComponent(paramPair[1]);
+        break;
+    }
 }
 delete i
 delete paramPair
@@ -19,6 +20,7 @@ document
   .getElementById('form')
   .addEventListener('submit', function (e) {
     e.preventDefault();
+    var text = e.target.elements['text'].value;
     var instance = e.target.elements['instance'].value;
     var remember = e.target.elements['remember'].checked;
 
@@ -34,6 +36,6 @@ document
         window.localStorage.setItem('mastodon_instance', instance);
     }
 
-    var shareUrl = instance + "share?text=" + parsedQuery.text;
+    var shareUrl = instance + "share?text=" + encodeURIComponent(text);
     window.open(shareUrl, '_blank', 'noopener,noreferrer')
 })
diff --git a/src/style/main.scss b/src/style/main.scss
index f0d7448..556d920 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -71,32 +71,11 @@ main {
             display: inline-block;
         }
 
+        textarea,
         input {
             font-size: 1rem;
             border-radius: 4px;
 
-            &[type=url] {
-                color: inherit;
-                width: 100%;
-                outline: 0;
-                font-family: inherit;
-                resize: vertical;
-                background-color: $input-bg;
-                border: 1px solid color.scale($input-bg, $lightness: -25%);
-                padding: 10px;
-
-                &:focus,
-                &:active {
-                    border: 1px solid $button-bg;
-                    background-color: color.scale($input-bg, $lightness: +5%);
-                }
-
-                &::placeholder {
-                    color: inherit;
-                    opacity: 0.3;
-                }
-            }
-
             &[type=checkbox] {
                 margin-right: 8px;
             }
@@ -120,6 +99,29 @@ main {
 
             transition: background-color 300ms ease, border 300ms ease;
         }
+
+        textarea,
+        input[type=url] {
+            color: inherit;
+            width: 100%;
+            outline: 0;
+            font-family: inherit;
+            resize: vertical;
+            background-color: $input-bg;
+            border: 1px solid color.scale($input-bg, $lightness: -25%);
+            padding: 10px;
+
+            &:focus,
+            &:active {
+                border: 1px solid $button-bg;
+                background-color: color.scale($input-bg, $lightness: +5%);
+            }
+
+            &::placeholder {
+                color: inherit;
+                opacity: 0.3;
+            }
+        }
     }
 }