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,133 +36,142 @@
             '<div>' +
                 '<input type="submit" name="submit" value="Add Comment">' +
             '</div>' +
-        '</div>';
+        '</div>'
 
-        var initialize = function(thread) {
+        func(form);
 
-            var comments = '<ul id="comments"></ul>';
+        // register submit event
+        $('#' + formid + ' ' + 'input[type="submit"]').on('click', function() {
 
-            // load our css
+            var text = $('textarea[id="comment"]').val() || null;
-            $('head').append('<link rel="stylesheet" href="/static/style.css" />');
 
-            // append our HTML
+            if (text == null) {
-            thread.append(comments)
+                // alert("You must write a comment!");
-            thread.append(form);
+                return;
-
-            // register events
-            $('input[type="submit"]').on('click', function() {
-
-                var text = $('textarea[id="comment"]').val() || null;
-
-                if (text == null) {
-                    // alert("You must write a comment!");
-                    return;
-                }
-
-                $.ajax({
-                    url: '/comment/' + encodeURIComponent(window.location.pathname) + '/new',
-                    method: 'POST',
-                    type: 'json',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    data: JSON.stringify({
-                        text: text,
-                        author: $('input[id="author"]').val() || null,
-                        email: $('input[id="email"]').val() || null,
-                        website: $('input[id="website"]').val() || null
-                    }),
-                    error: function(resp) {
-                        alert("Mööp.");
-                    },
-                    success: function(rv) {
-                        //$('#isso_thread').html(resp.content);
-                        insert(thread, rv)
-                    },
-                });
-            });
-        };
-
-        var insert = function(thread, post) {
-
-            // pythonic strftime
-            var format = function(date, lang, fmt) {
-
-                var months = {'de': [
-                    'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
-                    'August', 'September', 'Oktober', 'November', 'Dezember'],
-                              'en': [
-                    'January', 'February', 'March', 'April', 'May', 'June', 'July',
-                    'August', 'September', 'October', 'November', 'December'],
-                };
-
-                var conversions = [
-                    ['%Y', date.getFullYear()], ['%m', date.getMonth()],
-                    ['%B', months[lang][date.getMonth() - 1]],
-                    ['%d', date.getDate()], ['%H', date.getHours()],
-                    ['%H', date.getHours()], ['%M', date.getMinutes()],
-                ];
-
-                conversions.map(function(item) { fmt = fmt.replace(item[0], item[1]) });
-                return fmt;
-            };
-
-            var author = post['author'] || 'Anonymous';
-            if (post['website']) {
-                author = '<a href="' + post['website'] + '" rel="nofollow">' + author + '</a>';
             }
 
-
+            $.ajax({
-            var date = new Date(parseInt(post['created']) * 1000);
+                url: '/comment/' + encodeURIComponent(window.location.pathname) + '/new',
-
+                method: 'POST',
-            $('ul', thread).append(
-                '<article class="comment">' +
-                '  <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>' +
-                '  </footer>' +
-                '</article>');
-
-            $('#comment_' + post['id']).on('click', function() {
-
-            })
-        };
-
-        var fetch = function(thread) {
-            var rv = $.ajax({
-                url: '/comment/' + encodeURIComponent(window.location.pathname) + '/',
-                method: 'GET',
                 type: 'json',
                 headers: {
                     'Content-Type': 'application/json',
                 },
+                data: JSON.stringify({
+                    text: text,
+                    author: $('input[id="author"]').val() || null,
+                    email: $('input[id="email"]').val() || null,
+                    website: $('input[id="website"]').val() || null
+                }),
                 error: function(resp) {
-                    return;
+                    alert("Mööp.");
+                },
+                success: function(rv) {
+                    insert($('#isso_thread'), rv)
                 },
-                success: function(resp) {
-                    for (var item in resp) {
-                        insert(thread, resp[item]);
-                    }
-                }
             });
+        });
+    };
+
+    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
+        var format = function(date, lang, fmt) {
+
+            var months = {'de': [
+                'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
+                'August', 'September', 'Oktober', 'November', 'Dezember'],
+                          'en': [
+                'January', 'February', 'March', 'April', 'May', 'June', 'July',
+                'August', 'September', 'October', 'November', 'December'],
+            };
+
+            var conversions = [
+                ['%Y', date.getFullYear()], ['%m', date.getMonth()],
+                ['%B', months[lang][date.getMonth() - 1]],
+                ['%d', date.getDate()], ['%H', date.getHours()],
+                ['%H', date.getHours()], ['%M', date.getMinutes()],
+            ];
+
+            conversions.map(function(item) { fmt = fmt.replace(item[0], item[1]) });
+            return fmt;
         };
 
-        $.domReady(function() {
+        var author = post['author'] || 'Anonymous';
+        if (post['website']) {
+            author = '<a href="' + post['website'] + '" rel="nofollow">' + author + '</a>';
+        }
 
-            // initialize comment form and css
-            initialize($('#isso_thread'));
 
-            // fetch comments for path
+        var date = new Date(parseInt(post['created']) * 1000);
-            fetch($('#isso_thread'));
 
-            // REMOVE ME
+        $('#isso_thread ul').append(
-            $('input[id="author"]').val("Peter");
+            '<article class="isso">' +
-            $('textarea[id="comment"]').val("Lorem ipsum ...");
+            '  <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="isso_' + post['id'] + '">Antworten</a>' +
+            '  </footer>' +
+            '</article>');
 
+        // 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) {
+        var rv = $.ajax({
+            url: '/comment/' + encodeURIComponent(window.location.pathname) + '/',
+            method: 'GET',
+            type: 'json',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            error: function(resp) {
+                return;
+            },
+            success: function(resp) {
+                for (var item in resp) {
+                    insert(thread, resp[item]);
+                }
+            }
+        });
+    };
+
+    $.domReady(function() {
+
+        // initialize comment form and css
+        initialize($('#isso_thread'));
+
+        // fetch comments for path
+        fetch($('#isso_thread'));
+
+        // REMOVE ME
+        $('input[id="author"]').val("Peter");
+        $('textarea[id="comment"]').val("Lorem ipsum ...");
+
+    });
 
     </script>
     <style type="text/css">

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;
 }