code.kerkeslager.com Git - txt.house/blob - txt_house/templates/text_file.html

   1 {% extends 'base.html' %}
   2
   3 {% block body %}
   4   <style>
   5     .sans {
   6       font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
   7       line-height: 1.6;
   8     }
   9
  10     .serif {
  11       font-family: Bookman, Garamond, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  12       font-size: 1.2rem;
  13       line-height: 1.6;
  14     }
  15
  16     .mono {
  17       font-family: Monaco, "Courier New", Courier, monospace;
  18       line-height: 1.6;
  19     }
  20
  21     main {
  22       width: 100%;
  23       white-space: pre-wrap;
  24       margin: 0 0 3rem;
  25     }
  26   </style>
  27
  28   <nav>
  29     <a href='{% url "index" %}' title='Home'>Home</a>
  30     <a href='{{ text_file.get_edit_url }}' title='Edit'>Edit</a>
  31
  32     <label for='font-select'>Font:</label>
  33
  34     <select id='font-select'>
  35       <option value='sans' {% if font == 'sans' %}selected{% endif %}>Sans</option>
  36       <option value='serif' {% if font == 'serif' %}selected{% endif %}>Serif</option>
  37       <option value='mono' {% if font == 'mono' %}selected{% endif %}>Mono</option>
  38     </select>
  39   </nav>
  40
  41   <script type='text/javascript'>
  42     function updateQueryParameter(key, value) {
  43       if(window.location.search === '') {
  44         window.location.search = '?' + key + '=' + value;
  45         return;
  46       }
  47
  48       var queryParameters = window.location.search.substring(1).split('&').map(function(kvp) {
  49         return kvp.split('=');
  50       });
  51
  52       queryParameters.forEach(function(kvp) {
  53         if(kvp[0] === key) {
  54           kvp[1] = value;
  55         }
  56       });
  57
  58       window.location.search = '?' + queryParameters.map(function(kvp) {
  59         return kvp.join('=');
  60       }).join('&');
  61     }
  62
  63     (function(fn) {
  64       if (document.readyState != 'loading'){
  65         fn();
  66       } else {
  67         document.addEventListener('DOMContentLoaded', fn);
  68       }
  69     })(function() {
  70       var main = document.querySelector('main');
  71       var fontSelect = document.querySelector('#font-select');
  72
  73       fontSelect.addEventListener('change', function(e) {
  74         updateQueryParameter('font', e.target.value);
  75
  76         main.classList.add(e.target.value);
  77
  78         ['mono', 'sans', 'serif'].forEach(function(c) {
  79           if(c != e.target.value) main.classList.remove(c);
  80         });
  81       });
  82     });
  83   </script>
  84
  85   <main class='{{ font }}'>{{ text }}</main>
  86
  87 {% endblock %}