From 44172ec98a8033803f578288ddd03702504980a0 Mon Sep 17 00:00:00 2001
From: mutantmonkey <mutantmonkey@mutantmonkey.in>
Date: Sun, 4 Oct 2015 14:13:29 -0700
Subject: [PATCH] clean up HTML, CSS, and JavaScript for CSP

In order to implement Content-Security-Policy, the inlined style, event
handlers, and scripts all have to go. This commit completes this work.
---
 static/css/linx.css          | 73 +++++++++++++++++++++++++++++++++++-
 static/js/bin.js             | 14 +++----
 templates/404.html           |  2 +-
 templates/display/audio.html |  6 +--
 templates/display/bin.html   | 32 ++++++++--------
 templates/display/file.html  |  4 +-
 templates/display/image.html |  2 +-
 templates/display/pdf.html   |  5 +--
 templates/display/video.html | 10 ++---
 templates/index.html         |  2 +-
 templates/oops.html          |  2 +-
 templates/paste.html         |  6 +--
 12 files changed, 110 insertions(+), 48 deletions(-)

diff --git a/static/css/linx.css b/static/css/linx.css
index cf83032..e365826 100644
--- a/static/css/linx.css
+++ b/static/css/linx.css
@@ -80,6 +80,16 @@ body {
   padding: 5px 5px 5px 5px;
 }
 
+#info #filename,
+#editform #filename {
+    width: 232px;
+}
+
+#info #extension,
+#editform #extension {
+    width: 40px;
+}
+
 #info .float-left {
 	margin-top: 2px;
 	margin-right: 20px;
@@ -181,7 +191,7 @@ body {
 }
 
 .clear {
-	clear:both;
+	clear: both;
 }
 
 #upload_header {
@@ -248,6 +258,65 @@ body {
   padding-top: 1px;
 }
 
+.oopscontent {
+    width: 400px;
+}
+
+.oopscontent img {
+    width: 400px;
+    border: 0;
+}
+
+.editor {
+    width: 705px;
+    height: 450px;
+    border-color: #cccccc;
+}
+
+/* Content display {{{ */
+.display-audio,
+.display-file {
+    width: 500px;
+}
+
+.display-image {
+    margin-bottom: -6px;
+    max-width: 800px;
+}
+
+.display-pdf {
+    width: 910px;
+    height: 800px;
+}
+
+.display-video {
+    width: 800px;
+}
+
+.scrollable {
+    overflow: auto;
+}
+
+.storycontent {
+    background-color: #f0e0d6;
+}
+
+#editform,
+#editform .editor {
+    display: none;
+}
+
+#codeb {
+    white-space: pre-wrap;
+}
+
+#editor {
+    display: none;
+    height: 800px;
+    font-size: 11px;
+}
+/* }}} */
+
 /* cat.js */
 .qq-uploader { position:relative; width: 100%;}
 
@@ -694,4 +763,4 @@ THE SOFTWARE.
 .hint--bounce:before, .hint--bounce:after {
   -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
   -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
\ No newline at end of file
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
diff --git a/static/js/bin.js b/static/js/bin.js
index 4e86edf..0fd6990 100644
--- a/static/js/bin.js
+++ b/static/js/bin.js
@@ -8,7 +8,7 @@ function init() {
 
     editA.setAttribute("href", "#");
     editA.addEventListener('click', function(ev) {
-        edit();
+        edit(ev);
         return false;
     });
     editA.innerHTML = "edit";
@@ -22,14 +22,16 @@ function init() {
     editor.getSession().setMode("ace/mode/" + lang);
     editor.setTheme("ace/theme/tomorrow");
 
+    document.getElementById('save').addEventListener('click', paste);
+    document.getElementById('wordwrap').addEventListener('click', wrap);
 }
 
 
-function edit() {
+function edit(ev) {
 
     navlist.remove();
     document.getElementById("filename").remove();
-    document.getElementById("foarm").style.display = "block";
+    document.getElementById("editform").style.display = "block";
 
     var normalcontent = document.getElementById("normal-content");
     normalcontent.removeChild(document.getElementById("normal-code"));
@@ -44,14 +46,12 @@ function edit() {
 }
 
 
-function paste() {
-
+function paste(ev) {
     document.getElementById("newcontent").value = editor.getSession().getValue();
     document.forms["reply"].submit();
-
 }
 
-function wrap() {
+function wrap(ev) {
     if (document.getElementById("wordwrap").checked) {
         document.getElementById("codeb").style.wordWrap = "break-word";
         document.getElementById("codeb").style.whiteSpace = "pre-wrap";
diff --git a/templates/404.html b/templates/404.html
index 0999393..e792bf3 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
 
 {% block content %}
-<a href="/"><img style="border:0;" src='/static/images/404.jpg' width='400'></a>
+<a href="/"><img src='/static/images/404.jpg'></a>
 {% endblock %}
diff --git a/templates/display/audio.html b/templates/display/audio.html
index 66b36fa..a88319f 100644
--- a/templates/display/audio.html
+++ b/templates/display/audio.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 
 {% block main %}
-<audio controls style='width: 500px;' preload='auto'>
-	<source src='/selif/{{ filename }}'>
-  <a href='/selif/{{ filename }}'>Download it instead</a>
+<audio class="display-audio" controls preload='auto'>
+    <source src='/selif/{{ filename }}'>
+    <a href='/selif/{{ filename }}'>Download it instead</a>
 </audio>
 {% endblock %}
 
diff --git a/templates/display/bin.html b/templates/display/bin.html
index 9c77584..3f12a7f 100644
--- a/templates/display/bin.html
+++ b/templates/display/bin.html
@@ -2,20 +2,20 @@
 
 {% block head %}
     {% if extra.extension == "story" %}
-    <link href="/static/css/highlight/story.css" rel="stylesheet" type="text/css" />
+    <link href="/static/css/highlight/story.css" rel="stylesheet" type="text/css">
     {% else %}
-    <link href="/static/css/highlight/tomorrow.css" rel="stylesheet" type="text/css" />
+    <link href="/static/css/highlight/tomorrow.css" rel="stylesheet" type="text/css">
     {% endif %}
     {% endblock %}
 
-{% block innercontentmore %} style="overflow: auto;" {% endblock %}
-{% block mainmore %} {% if extra.extension == "story" %} style="background-color: #f0e0d6;"{% endif %} {% endblock %}
+{% block innercontentmore %} class="scrollable"{% endblock %}
+{% block mainmore %} {% if extra.extension == "story" %} class="storycontent"{% endif %} {% endblock %}
 
 {% block infoleft %}
-    <div id="foarm" style="display: none;">
+    <div id="editform">
         <form id="reply" action='/upload' method='post' >
             <div class="right">
-	            <select id="expiry" name="expires">
+                <select id="expiry" name="expires">
                     <option disabled=disabled>Expires:</option>
                     <option value="0">never</option>
                     <option value="60">a minute</option>
@@ -25,29 +25,27 @@
                     <option value="604800">a week</option>
                     <option value="2419200">a month</option>
                     <option value="29030400">a year</option>
-	            </select>
+                </select>
 
-	            <button id="save" onclick="paste()">save</button>
-	        </div>
+                <button id="save">save</button>
+            </div>
 
-            <input style ="width:232px;" class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<input id="extension" class="codebox" style="width:30px;" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt" />
+            <input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)">.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
 
 
-            <textarea name='content' id="newcontent" class="editor" style="display: none;"></textarea>
+            <textarea name='content' id="newcontent" class="editor"></textarea>
+        </form>
     </div>
-
-
-</form>
 {% endblock %}
 
 {%block infomore %}
-<label>wrap <input id="wordwrap" type="checkbox" onclick="wrap()" checked /></label> | 
+<label>wrap <input id="wordwrap" type="checkbox" checked></label> | 
 {% endblock %}
 
 {% block main %}
 <div id="normal-content" class="normal {% if extra.lang_hl != "story" %}fixed{% endif %}">
-    <pre id="normal-code"><code id="codeb" style="white-space: pre-wrap;" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
-    <div id="editor" style="display: none; height: 800px; font-size: 11px;" data-lang="{{ extra.lang_ace }}">{{ extra.contents }}</div>
+    <pre id="normal-code"><code id="codeb" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
+    <div id="editor" data-lang="{{ extra.lang_ace }}">{{ extra.contents }}</div>
 </div>
 
 
diff --git a/templates/display/file.html b/templates/display/file.html
index 9872298..d4f6187 100644
--- a/templates/display/file.html
+++ b/templates/display/file.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-<div class="normal" style="width: 500px;">
-	<p class="center">You are requesting <a href="/selif/{{ filename }}">{{ filename }}</a>, <a href="/selif/{{ filename }}">click here</a> to download.</p>
+<div class="normal display-file">
+    <p class="center">You are requesting <a href="/selif/{{ filename }}">{{ filename }}</a>, <a href="/selif/{{ filename }}">click here</a> to download.</p>
 </div>
 {% endblock %}
diff --git a/templates/display/image.html b/templates/display/image.html
index 20b57ef..4b265b3 100644
--- a/templates/display/image.html
+++ b/templates/display/image.html
@@ -2,6 +2,6 @@
 
 {% block main %}
 <a href="/selif/{{ filename }}">
-	<img style="margin-bottom: -6px; max-width: 800px;" src="/selif/{{ filename }}" />
+    <img class="display-image" src="/selif/{{ filename }}" />
 </a>
 {% endblock %}
diff --git a/templates/display/pdf.html b/templates/display/pdf.html
index a98d040..6726ce2 100644
--- a/templates/display/pdf.html
+++ b/templates/display/pdf.html
@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-<object data="/selif/{{ filename }}"
-        type="application/pdf"
-        width=910 
-        height=800>
+<object class="display-pdf" data="/selif/{{ filename }}" type="application/pdf">
 
 <p>It appears your Web browser is not configured to display PDF files. 
 No worries, just <a href="/selif/{{ filename }}">click here to download the PDF file.</a></p>
diff --git a/templates/display/video.html b/templates/display/video.html
index 0bf5486..77c2a60 100644
--- a/templates/display/video.html
+++ b/templates/display/video.html
@@ -1,10 +1,8 @@
 {% extends "base.html" %}
 
 {% block main %}
-<div id='video'>
-    <video controls autoplay width="800">
-        <source src="/selif/{{ filename }}"/>
-    </video>
-</div>
-
+<video class="display-video" controls autoplay>
+    <source src="/selif/{{ filename }}"/>
+    <a href='/selif/{{ filename }}'>Download it instead</a>
+</video>
 {% endblock %}
diff --git a/templates/index.html b/templates/index.html
index 36bbc99..4528ae8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,7 +36,7 @@
         <div class="clear"></div>
     </form>
     <div id="uploads"></div>
-    <div style="clear:both;"></div>
+    <div class="clear"></div>
 </div>
 
 <script src="/static/js/dropzone.js"></script>
diff --git a/templates/oops.html b/templates/oops.html
index 9627bba..ce3ac49 100644
--- a/templates/oops.html
+++ b/templates/oops.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <div id="main">
-    <div id='inner_content' style='width: 400px'>
+    <div id='inner_content' class='oopscontent'>
     	<p>{{ error_message|default:"Oops! Something went wrong." }}</p>
     </div>
 </div>
diff --git a/templates/paste.html b/templates/paste.html
index b1b86a4..6e7876e 100644
--- a/templates/paste.html
+++ b/templates/paste.html
@@ -4,7 +4,7 @@
     <form id="reply" action='/upload' method='post'>
     <div id="main">
         <div id="info" class="ninfo">
-            <input style ="width:232px;" class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" style="width:40px;" name='extension' type='text' value="" placeholder="txt" /></span>
+            <input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" name='extension' type='text' value="" placeholder="txt" /></span>
 
             <div class="right">
                 <select id="expiry" name="expires">
@@ -27,7 +27,7 @@
         </div>
 
     <div id="inner_content">
-        <textarea name='content' id="content" class="editor" style="width: 705px; height: 450px; border-color: #cccccc;"></textarea>
+        <textarea name='content' id="content" class="editor"></textarea>
     </div>
 
     </div>
@@ -37,4 +37,4 @@
     </form>        
 
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}