Add toggle for reader mode

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

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__', '@');
     },

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">

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">