From 38fb270c01d26f1287387de1814f9ae1e240567f Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Fri, 30 Jun 2017 13:03:57 +0200
Subject: [PATCH] Update website with script copy button and guide on using DHT
 in the app

---
 build.py      | 22 +++++++++++++++-------
 web/index.php | 19 +++++++++++++++++--
 web/style.css | 24 ++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/build.py b/build.py
index 2d3c3c7..711cdaa 100644
--- a/build.py
+++ b/build.py
@@ -46,7 +46,8 @@ def combine_files(input_pattern, output_file):
 
 def build_tracker():
   output_file_raw = "bld/track.js"
-  output_file_bookmark = "bld/track.html"
+  output_file_bookmark = "bld/track_bookmark.html"
+  output_file_copyable = "bld/track_copyable.html"
   
   output_file_tmp = "bld/track.tmp.js"
   input_pattern = "src/tracker/*.js"
@@ -73,13 +74,18 @@ def build_tracker():
     
     os.remove(output_file_tmp)
   
+  with open(output_file_raw, "r") as raw:
+    script_contents = raw.read().replace("&", "&amp;").replace('"', "&quot;").replace("'", "&#x27;").replace("<", "&lt;").replace(">", "&gt;")
+  
   with open(output_file_bookmark, "w") as out:
     out.write("<a rel='sidebar' title='Discord History Tracker' href='")
-    
-    with open(output_file_raw, "r") as raw:
-      out.write(raw.read().replace("&", "&amp;").replace('"', "&quot;").replace("'", "&#x27;").replace("<", "&lt;").replace(">", "&gt;"))
-    
+    out.write(script_contents)
     out.write("'>Add Bookmark</a>")
+  
+  with open(output_file_copyable, "w") as out:
+    out.write("<a href='javascript:' id='tracker-copy'>Copy to Clipboard</a><textarea id='tracker-copy-contents'>")
+    out.write(script_contents)
+    out.write("</textarea>")
 
 
 def build_renderer():
@@ -136,14 +142,16 @@ def build_renderer():
 
 
 def build_website():
-  tracker_file = "bld/track.html"
+  tracker_file_bookmark = "bld/track_bookmark.html"
+  tracker_file_copyable = "bld/track_copyable.html"
   viewer_file = "bld/viewer.html"
   web_style_file = "bld/web/style.css"
   
   distutils.dir_util.copy_tree("web", "bld/web")
   
   os.makedirs("bld/web/build", exist_ok = True)
-  shutil.copyfile(tracker_file, "bld/web/build/track.html")
+  shutil.copyfile(tracker_file_bookmark, "bld/web/build/track_bookmark.html")
+  shutil.copyfile(tracker_file_copyable, "bld/web/build/track_copyable.html")
   shutil.copyfile(viewer_file, "bld/web/build/viewer.html")
   
   if USE_JAVA:
diff --git a/web/index.php b/web/index.php
index 45bfe76..c5680c4 100644
--- a/web/index.php
+++ b/web/index.php
@@ -20,8 +20,15 @@
       <img src="img/tracker.png" width="851" class="dht">
       
       <h2>How to Save History</h2>
-      <p>Add the following script as a bookmark, or run it in your browser console: <?php include "./build/track.html"; ?></p>
-      <p>Open your <a href="https://discordapp.com/channels/@me">Discord Friends list</a> in a new tab (do not use an already opened one), click the bookmark, and read the additional instructions that explain the limitations and recommendations.</p>
+      <h3>...in your browser</h3>
+      <p>Add the script as a browser bookmark by clicking <?php include "./build/track_bookmark.html"; ?>. Then open your <a href="https://discordapp.com/channels/@me">Discord Friends list</a> in a new tab (do not use an already opened one), and click the bookmark.</p>
+      
+      <h3>...in Discord app</h3>
+      <p>Click <?php include "./build/track_copyable.html"; ?> to copy the script. Then press <strong>Ctrl+Shift+I</strong> in the Discord app, select <strong>Console</strong>, paste the script into the text box on the bottom and press <strong>Enter</strong> to run it.</p>
+      <p>The script may ask you to reload Discord, simply paste and run the script again after the reload (the console stays open).</p>
+      
+      <h3>What next?</h3>
+      <p>When running for the first time, you will see a <strong>Settings</strong> dialog with additional instructions that explain the limitations and recommendations. Please, read them carefully.</p>
       <p>Upload your previously saved file if you have any. By default, Discord History Tracker is set to pause tracking after it reaches a previously saved message to avoid unnecessary history loading. You may also set it to load all channels in the server or your friends list by checking <strong>Switch to Next Channel</strong>.</p>
       <p>Once you have configured everything, click <strong>Start Tracking</strong>, let it run in the background, and download the file when done.</p>
       
@@ -53,6 +60,14 @@
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
       ga('create','UA-48632978-5','auto');ga('send','pageview');
+      
+      document.getElementById("tracker-copy").addEventListener("click", function(){
+        var ele = document.getElementById("tracker-copy-contents");
+        ele.style.display = "block";
+        ele.select();
+        document.execCommand("copy");
+        ele.style.display = "none";
+      });
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/web/style.css b/web/style.css
index c3a8d34..2a51390 100644
--- a/web/style.css
+++ b/web/style.css
@@ -49,6 +49,17 @@ h2 {
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
 }
 
+h3 {
+  margin: 30px 0 0;
+  font-size: 22px;
+  color: rgba(255, 255, 255, 0.62);
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+h2 + h3 {
+  margin-top: 12px;
+}
+
 ul {
   margin-top: 12px;
 }
@@ -67,3 +78,16 @@ ul {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+#tracker-copy-contents {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  display: none;
+  border: none;
+  resize: none;
+}