Create font menu

static/cookies.js

@@ -0,0 +1,24 @@
+function createCookie(name,value,days) {
+	if (days) {
+		var date = new Date();
+		date.setTime(date.getTime()+(days*24*60*60*1000));
+		var expires = "; expires="+date.toGMTString();
+	}
+	else var expires = "";
+	document.cookie = name+"="+value+expires+"; path=/";
+}
+
+function readCookie(name) {
+	var nameEQ = name + "=";
+	var ca = document.cookie.split(';');
+	for(var i=0;i < ca.length;i++) {
+		var c = ca[i];
+		while (c.charAt(0)==' ') c = c.substring(1,c.length);
+		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+	}
+	return null;
+}
+
+function eraseCookie(name) {
+	createCookie(name,"",-1);
+}

static/style.css

@@ -5,6 +5,20 @@ html {
   position: fixed;
 }
 
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  filter:alpha(opacity=0);
+  -moz-opacity:0;
+  -khtml-opacity: 0;
+  opacity: 0;
+  z-index: 9999;
+}
+
 .tooltip .arrow {
   display: none;
 }
@@ -46,6 +60,10 @@ html {
   padding-top: .375rem;
   line-height: 1.5;
   color: white;
+  -webkit-user-select: none;  
+  -moz-user-select: none;    
+  -ms-user-select: none;      
+  user-select: none;
 }
 
 .toolbar-button:hover {
@@ -101,6 +119,20 @@ html {
   padding: 5px;
 }
 
+#type-menu {
+  display:none;
+  position: fixed;
+  z-index: 10000;
+  min-width: 300px;
+  width: 100%;
+  max-width: 400px;
+  height: 250px;
+  background-color: black;
+  border: 1px solid gray;
+  border-radius: 10px;
+  padding: 10px;
+}
+
 @media (prefers-color-scheme: dark) {
   #article pre {
     background-color: #002b36;
@@ -329,4 +361,42 @@ html {
   #sidebar.active {
     margin-left: -250px;
   }
+}
+
+/* Fonts */
+#type-menu > div.font-choice {
+  font-size: 24px;
+  width: 100%;
+  border-bottom: 1px solid darkgray;
+}
+
+#type-menu > div.font-size-choice {
+  display: table;
+  width: 100%;
+  table-layout: fixed;    /* For cells of equal size */
+}
+
+#type-menu > div.font-size-choice  span {
+  display: table-cell;
+  text-align: center;
+}
+
+@font-face {
+  font-family: Georgia;
+  src: url('Georgia.ttf');
+}
+
+@font-face {
+  font-family: Montserrat;
+  src: url('Montserrat-Regular.otf');
+}
+
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Source Serif Pro';
+  src: url('SourceSerifPro-Regular.ttf');
 }

templates/article.j2

@@ -38,7 +38,7 @@
             <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
         </div>
         <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
-        <div class="toolbar-button"><svg
+        <div id="type-button" class="toolbar-button" onclick="showTypeMenu();"><svg
                     width="24"
                     height="24"
                     fill="none"
@@ -109,7 +109,7 @@
                 <br>
             </div> #}
             <div class="col-lg-12">
-                <div style="padding: 10px;" id="article">
+                <div style="padding: 10px; word-wrap: break-word; display: none;" id="article">
                     <h1 style="text-align: center;">{{ article[3] }}</h1>
                     <a href="{{ article[1] }}" class="text-info" target="_blank" style="display: block; text-align: center; margin-bottom: 20px;">View Original</a>
                     {{ article[2] | safe}}
@@ -118,16 +118,68 @@
         </div>
     </form>
 </div>
+{% include 'fragments/type_menu.j2' %}
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
+<script type="text/javascript" src="{{url_for('.static', filename='cookies.js')}}"></script>
 <script>
 $('#article img').css('max-width', '100%');
 $('#article img').css('height', 'auto');
 
+window.addEventListener( 'DOMContentLoaded', function( event ) {
+    var x = readCookie('fontcookie');
+    if (x) {
+	    $('#article').css('font-family', x);
+    } else {
+        createCookie('fontcookie', 'sans-serif', 365);
+    }
+
+    var x = readCookie('fontsizecookie');
+    if (x) {
+	    $('#article').css('font-size', x);
+    } else {
+        createCookie('fontsizecookie', '1.25rem', 365);
+    }
+
+    $('#article').show();
+}, true );
+
 $(function () {
-  $('[data-toggle="tooltip"]').tooltip()
-})
+    $('[data-toggle="tooltip"]').tooltip();
+});
+
+function showTypeMenu() {
+    pos = $('#type-button').first().position();
+    left = pos.left-$('#type-menu').width() + 50
+    if (left < 0) left = 0
+    $('#type-menu').css({top: pos.top+30, left: left});
+    $('#type-menu').show();
+    var overlay = jQuery('<div id="overlay" onclick="closeTypeMenu();"> </div>');
+    overlay.appendTo(document.body)
+}
+
+function closeTypeMenu() {
+    $('#type-menu').hide();
+    $('#overlay').remove();
+}
+
+function setFont(fonts) {
+    createCookie('fontcookie', fonts, 365);
+    $('#article').css('font-family', "'" + fonts + "'");
+}
+
+function setSize(size) {
+    createCookie('fontsizecookie', size, 365);
+    $('#article').css('font-size', size);
+}
+
+$( window ).resize(function() {
+    pos = $('#type-button').first().position();
+    left = pos.left-$('#type-menu').width() + 50;
+    if (left < 0) left = 0;
+    $('#type-menu').css({top: pos.top+30, left: left});
+});
 </script>
 {% endblock %}

templates/close.j2

@@ -1,3 +1,39 @@
+{% extends "bootstrap/base.html" %}
+{% block title %}Read TI Later{% endblock %}
+
+{% block metas %}
+{{super()}}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
+<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
+{% endblock %}
+
+{% block styles %}
+{{super()}}
+<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
+{% endblock %}
+
+{% block navbar %}
+<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
+    <div class="navbar-brand">Read TI Later</div>
+</nav>
+{% endblock %}
+
+{% block content %}
+<div class="wrapper">
+    <div class="container" style="margin-top: 15px">
+        <div class="jumbotron">
+            <h1>Link saved!</h1>
+            <p>If you can still see this, close it you dummy.</p>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
 <script>
 window.close();
-</script>
+</script>
+{% endblock %}

templates/fragments/type_menu.j2

@@ -0,0 +1,13 @@
+<div id="type-menu" style="">
+    <div onclick="setFont('Georgia');" class='font-choice' style="font-family: Georgia">Georgia</div>
+    <div onclick="setFont('Source Serif Pro');" class='font-choice' style="font-family: 'Source Serif Pro'">Source Serif Pro</div>
+    <div onclick="setFont('Helvetica');" class='font-choice' style="font-family: Helvetica">Helvetica</div>
+    <div onclick="setFont('Roboto');" class='font-choice' style="font-family: Roboto">Roboto</div>
+    <div onclick="setFont('Montserrat');" class='font-choice' style="font-family: Montserrat">Montserrat</div>
+    <div class='font-size-choice'>
+        <span onclick="setSize('1rem');" style='font-size: 1rem'>A</span>
+        <span onclick="setSize('1.25rem');" style='font-size: 1.25rem'>A</span>
+        <span onclick="setSize('1.5rem');" style='font-size: 1.5rem'>A</span>
+        <span onclick="setSize('2rem');" style='font-size: 2rem'>A</span>
+    </div>
+</div>