From ecbc381c8dc48e85b625c6e45599b4155739106e Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Tue, 10 Sep 2019 15:52:43 +0200
Subject: [PATCH] Use zero width shortener for links under 500 characters

---
 index.html |  7 +++++--
 model.js   | 29 ++++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index deb988f8..854fd8f6 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
     </ul>
     <span class="float-right"><a href="https://github.com/misode/loot-table" style="color: #ddd;" data-i18n="author"></a></span>
   </nav>
-  <div class="container">
+  <div class="container d-none">
     <div class="row my-4">
       <div class="col-12 col-lg-7 mb-3 structure-container">
         <div class="input-group">
@@ -64,7 +64,10 @@
             <button type="button" class="btn btn-secondary ml-3" onclick="copySource()" data-i18n="copy"></button>
           </div>
         </div>
-        <textarea id="copyTextarea" rows="1" class="form-control mb-3 d-none"></textarea>
+        <div id="copyContainer" class="mb-3 d-none">
+          <input id="copyTextarea" rows="1" class="form-control"></input>
+          <button id="copy" type="button" class="btn btn-block btn-secondary mt-2" onclick="copyLink()" data-i18n="copy"></button>
+        </div>
         <textarea id="source" class="form-control code" onchange="updateSource()" rows="19" spellcheck="false"></textarea>
       </div>
     </div>
diff --git a/model.js b/model.js
index 50a271fe..10148024 100644
--- a/model.js
+++ b/model.js
@@ -17,6 +17,12 @@ const params = new URLSearchParams(window.location.search);
 if (params.has('q')) {
   $('#source').val(atob(params.get('q')));
   updateSource();
+  $('.container').removeClass('d-none');
+} else if (params.has('s')) {
+  let short = params.get('s').slice(0, -7);
+  window.location = 'https://zws.im/' + short;
+} else {
+  $('.container').removeClass('d-none');
 }
 
 function updateTableType() {
@@ -41,14 +47,27 @@ function showSource() {
   $('#showSourceButton').addClass('d-none');
 }
 
-function linkSource() {
-  let link = window.location.origin + window.location.pathname + '?q=' + btoa(JSON.stringify(table));
-  $('#copyTextarea').removeClass('d-none').val(link);
+async function linkSource() {
+  let site = window.location.origin + window.location.pathname;
+  let url = site + '?q=' + btoa(JSON.stringify(table));
+  if (url.length <= 500) {
+    let shortener = 'https://us-central1-zero-width-shortener.cloudfunctions.net/shortenURL?url=';
+    let response = await fetch(shortener + url);
+    let json = await response.json();
+    let id = Math.random().toString(36).substring(2, 9);
+    url = site + '?s=' + json.short + id;
+  }
+  $('#copyContainer').removeClass('d-none');
+  $('#copyTextarea').val(url);
+  $('#copyTextarea').get()[0].select();
+}
+
+function copyLink() {
   $('#copyTextarea').get()[0].select();
   document.execCommand('copy');
   setTimeout(() => {
-    $('#copyTextarea').addClass('d-none');
-  }, 2000);
+    $('#copyContainer').addClass('d-none');
+  }, 100);
 }
 
 function updateSource() {