X-Git-Url: https://code.kerkeslager.com/?p=txt.house;a=blobdiff_plain;f=txt_house%2Ftemplates%2Ftext_file.html;fp=txt_house%2Ftemplates%2Ftext_file.html;h=6961756425880211d2c0901f63096bbe8e8663e3;hp=0000000000000000000000000000000000000000;hb=9b232a209ae57cea33a0156a5c4cac7e72edda8f;hpb=3cdbc0aa5864867577563b5b3a699d47cac79770

diff --git a/txt_house/templates/text_file.html b/txt_house/templates/text_file.html
new file mode 100644
index 0000000..6961756
--- /dev/null
+++ b/txt_house/templates/text_file.html
@@ -0,0 +1,87 @@
+{% extends 'base.html' %}
+
+{% block body %}
+  <style>
+    .sans {
+      font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
+      line-height: 1.6;
+    }
+
+    .serif {
+      font-family: Bookman, Garamond, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+      font-size: 1.2rem;
+      line-height: 1.6;
+    }
+
+    .mono {
+      font-family: Monaco, "Courier New", Courier, monospace;
+      line-height: 1.6;
+    }
+
+    main {
+      max-width: 40rem;
+      white-space: pre-wrap;
+      margin: 0 0 3rem;
+    }
+  </style>
+
+  <nav>
+    <a href='{% url "index" %}' title='Home'>Home</a>
+    <a href='{{ text_file.get_edit_url }}' title='Edit'>Edit</a>
+
+    <label for='font-select'>Font:</label>
+
+    <select id='font-select'>
+      <option value='sans' {% if font == 'sans' %}selected{% endif %}>Sans</option>
+      <option value='serif' {% if font == 'serif' %}selected{% endif %}>Serif</option>
+      <option value='mono' {% if font == 'mono' %}selected{% endif %}>Mono</option>
+    </select>
+  </nav>
+
+  <script type='text/javascript'>
+    function updateQueryParameter(key, value) {
+      if(window.location.search === '') {
+        window.location.search = '?' + key + '=' + value;
+        return;
+      }
+
+      var queryParameters = window.location.search.substring(1).split('&').map(function(kvp) {
+        return kvp.split('=');
+      });
+
+      queryParameters.forEach(function(kvp) {
+        if(kvp[0] === key) {
+          kvp[1] = value;
+        }
+      });
+
+      window.location.search = '?' + queryParameters.map(function(kvp) {
+        return kvp.join('=');
+      }).join('&');
+    }
+
+    (function(fn) {
+      if (document.readyState != 'loading'){
+        fn();
+      } else {
+        document.addEventListener('DOMContentLoaded', fn);
+      }
+    })(function() {
+      var main = document.querySelector('main');
+      var fontSelect = document.querySelector('#font-select');
+
+      fontSelect.addEventListener('change', function(e) {
+        updateQueryParameter('font', e.target.value);
+
+        main.classList.add(e.target.value);
+
+        ['mono', 'sans', 'serif'].forEach(function(c) {
+          if(c != e.target.value) main.classList.remove(c);
+        });
+      });
+    });
+  </script>
+
+  <main class='{{ font }}'>{{ text }}</main>
+
+{% endblock %}