From cda601a3551aa85b073b017fe184201404c47c87 Mon Sep 17 00:00:00 2001
From: ksamuel <kevin.samuel@yandex.com>
Date: Thu, 13 Aug 2020 16:53:17 +0200
Subject: [PATCH] Add toggle for reader mode

---
 zerobin/default_settings.py   |  2 +-
 zerobin/static/js/behavior.js | 24 ++++++++++++++++++++++++
 zerobin/views/base.tpl        | 11 ++++++++++-
 zerobin/views/paste.tpl       |  8 +++++---
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/zerobin/default_settings.py b/zerobin/default_settings.py
index f4e00bf..edab738 100644
--- a/zerobin/default_settings.py
+++ b/zerobin/default_settings.py
@@ -9,7 +9,7 @@ PORT = "3255"
 # Names/links to insert in the footer.
 #
 MENU = (
-    ("Create paste", "/"),  # First link will be highlighted
+    ("Create paste", "/"),
     ("Github", "https://github.com/Tygs/0bin"),
     ("Faq", "/faq/"),  # You probably want to keep this
     # Any link with "mailto:" will be escaped to limit spam, but displayed
diff --git a/zerobin/static/js/behavior.js b/zerobin/static/js/behavior.js
index cf0499e..774800b 100644
--- a/zerobin/static/js/behavior.js
+++ b/zerobin/static/js/behavior.js
@@ -26,11 +26,13 @@ const app = new Vue({
     downloadLink: {},
     displayBottomToolBar: false,
     openPreviousPastesMenu: false,
+    readerMode: false,
     isUploading: false,
     currentPaste: {
       ownerKey: '',
       id: '',
       type: '',
+      content: ''
     },
     newPaste: {
       expiration: '1_day',
@@ -66,6 +68,28 @@ const app = new Vue({
   },
   methods: {
 
+    toggleReaderMode: function () {
+      if (!this.readerMode) {
+        this.messages = [];
+        this.currentPaste.content = zerobin.getPasteContent();
+      }
+
+      this.readerMode = !this.readerMode;
+    },
+
+    increaseFontSize: function (amount) {
+      let readableModeContent = document.getElementById('readable-paste-content')
+
+      let fontSize = window.getComputedStyle(readableModeContent, null).getPropertyValue('font-size');
+
+      amount = amount || 5;
+      readableModeContent.style.fontSize = (parseFloat(fontSize) + amount) + "px";
+    },
+
+    decreaseFontSize: function () {
+      this.increaseFontSize(-5);
+    },
+
     formatEmail: (email) => {
       return "mailto:" + email.replace('__AT__', '@');
     },
diff --git a/zerobin/views/base.tpl b/zerobin/views/base.tpl
index fd4bb1f..f251b35 100644
--- a/zerobin/views/base.tpl
+++ b/zerobin/views/base.tpl
@@ -11,6 +11,7 @@
 
   <link rel="icon" href="/static/img/favicon.ico" />
 
+
   %if not settings.DEBUG:
   <link href="/static/css/style.min.css?{{ VERSION }}" rel="stylesheet" />
   %else:
@@ -26,7 +27,7 @@
 
   <div id="app">
 
-    <div class="topnav" @mouseleave="openPreviousPastesMenu =false">
+    <div :class="{'topnav': true, 'reader-mode': readerMode}" @mouseleave="openPreviousPastesMenu =false">
       <a class="brand" href="/"><span>ø</span>bin<em>.net</em></a>
       <span class="tagline">"A client side encrypted PasteBin"<br><span>All pastes are AES256 encrypted, we cannot know
           what you paste...</span>
@@ -34,6 +35,14 @@
 
       <nav>
         <ul>
+          <li>
+            <a href="#" v-if="currentPaste.type === 'text'" @click.prevent="toggleReaderMode()">📖</a>
+            <span v-if="readerMode">
+              <a href="#" @click.prevent="increaseFontSize()">+</a>
+              <a href="#" @click.prevent="decreaseFontSize()">-</a>
+              🔍
+            </span>
+          </li>
           <li class="submenu"><a href="#" @click.prevent="openPreviousPastesMenu = !openPreviousPastesMenu">Previous
               pastes v</a>
             <ul class="previous-pastes" id="topmenu" v-if="openPreviousPastesMenu">
diff --git a/zerobin/views/paste.tpl b/zerobin/views/paste.tpl
index ecc83e4..d5c0bda 100644
--- a/zerobin/views/paste.tpl
+++ b/zerobin/views/paste.tpl
@@ -54,12 +54,14 @@
     <span id="expiration-tag">Expire {{ expiration }}</span>
     %end
 
-    <pre id="paste-content" class="prettyprint">
-      <div class="paste-wrapper">
+    <pre id="paste-content" class="prettyprint" v-if="!readerMode">
         <code>
           {{ paste.content }}
         </code>
-      </div>
+    </pre>
+
+    <pre id="readable-paste-content" v-if="readerMode">
+      {% currentPaste.content %}
     </pre>
 
     <div class="d-flex justify-content-between down">