refactor and re-indentation

isso/static/post.html

@@ -6,7 +6,21 @@
     <script type="text/javascript" src="/static/ender.js"></script>
     <script type="text/javascript">
 
-        var form = '<div id="comment_form">' +
+    var createForm = function(id, func) {
+        /*
+        Returns HTML for form and registers submit call.
+
+        Synopsis: `isso_N` is the comment with the id N. `issoform` is a new
+        form to write an answer to the article or answer to a comment using
+        `issoform_N` where N is the id to respond to.
+
+        :param id: comment id
+        :param func: function, that takes one argument (the HTML to display the form)
+        */
+
+        var formid = 'issoform' + (id ? ('_' + id) : '');
+        var form =
+        '<div class="issoform" id="' + formid + '">' +
             '<div>' +
             '    <input type="text" name="name" id="author" value="" placeholder="Name">' +
             '</div>' +
@@ -22,21 +36,12 @@
             '<div>' +
                 '<input type="submit" name="submit" value="Add Comment">' +
             '</div>' +
-        '</div>';
+        '</div>'
 
-        var initialize = function(thread) {
+        func(form);
 
-            var comments = '<ul id="comments"></ul>';
-
-            // load our css
-            $('head').append('<link rel="stylesheet" href="/static/style.css" />');
-
-            // append our HTML
-            thread.append(comments)
-            thread.append(form);
-
-            // register events
-            $('input[type="submit"]').on('click', function() {
+        // register submit event
+        $('#' + formid + ' ' + 'input[type="submit"]').on('click', function() {
 
             var text = $('textarea[id="comment"]').val() || null;
 
@@ -62,13 +67,24 @@
                     alert("Mööp.");
                 },
                 success: function(rv) {
-                        //$('#isso_thread').html(resp.content);
-                        insert(thread, rv)
+                    insert($('#isso_thread'), rv)
                 },
             });
         });
     };
 
+    var initialize = function(thread) {
+
+        // that with an unordered list
+        thread.append('<ul id="comments"></ul>');
+
+        // load our css
+        $('head').append('<link rel="stylesheet" href="/static/style.css" />');
+
+        // append form
+        createForm(null, function(html) {thread.append(html)});
+    };
+
     var insert = function(thread, post) {
 
         // pythonic strftime
@@ -101,20 +117,27 @@
 
         var date = new Date(parseInt(post['created']) * 1000);
 
-            $('ul', thread).append(
-                '<article class="comment">' +
+        $('#isso_thread ul').append(
+            '<article class="isso">' +
             '  <header><span class="author">' + author + '</span> schrieb am' +
             '    <span class="date">' + format(date, 'de', '%d. %B %Y um %H:%M') + ':' +
             '    </span>' +
             '  </header>' + post['text'] +
             '  <footer>' +
-                '    <a href="#" id="comment_' + post['id'] + '">Antworten</a>' +
+            '    <a href="#" id="isso_' + post['id'] + '">Antworten</a>' +
             '  </footer>' +
             '</article>');
 
-            $('#comment_' + post['id']).on('click', function() {
+        // ability to answer directly to a comment
+        $('#isso_' + post['id']).on('click', function(event) {
 
-            })
+            if ($('#issoform_' + post['id']).length == 0) {
+                createForm(post['id'], function(html) {$('#isso_' + post['id']).after(html)});
+            } else {
+                $('#issoform_' + post['id']).remove();
+            };
+            event.stop();
+        });
     };
 
     var fetch = function(thread) {

isso/static/style.css

@@ -3,24 +3,24 @@
     padding: 0;
 }
 
-.comment {
+.isso {
     margin-bottom: 18px;
     margin-top: 18px;
 }
 
-.comment .author {
+.isso .author {
     font-weight: bold;
 }
 
-.comment .date {
+.isso .date {
     color: gray;
 }
 
-.comment header {
+.isso header {
     border-bottom: solid 1px lightgray;
 }
 
-#comment_form input, #comment_form textarea {
+.issoform input, .issoform textarea {
     border: 4px solid rgba(0,0,0,0.1);
     padding: 8px 10px;
 
@@ -31,11 +31,11 @@
     outline: 0;
 }
 
-#comment_form textarea {
+.issoform textarea {
     width: 350px;
 }
 
-#comment_form input[type="submit"] {
+.issoform input[type="submit"] {
     cursor: pointer;
     background: -webkit-linear-gradient(top, #efefef, #ddd);
     background: -moz-linear-gradient(top, #efefef, #ddd);
@@ -47,7 +47,7 @@
     border: 1px solid #ccc;
 }
 
-#comment_form input[type="submit"]:hover {
+.issoform input[type="submit"]:hover {
     background: -webkit-linear-gradient(top, #eee, #ccc);
     background: -moz-linear-gradient(top, #eee, #ccc);
     background: -ms-linear-gradient(top, #eee, #ccc);
@@ -56,7 +56,7 @@
     border: 1px solid #bbb;
 }
 
-#comment_form input[type="submit"]:active {
+.issoform input[type="submit"]:active {
     background: -webkit-linear-gradient(top, #ddd, #aaa);
     background: -moz-linear-gradient(top, #ddd, #aaa);
     background: -ms-linear-gradient(top, #ddd, #aaa);
@@ -65,6 +65,6 @@
     border: 1px solid #999;
 }
 
-#comment_form div {
+.issoform div {
     margin-bottom: 8px;
 }