Refactored Report Abuse to eliminate duplication.

media/css/forums.css

@@ -495,62 +495,24 @@ article.main > .warning-box p + p {
     font-size: 20px;
 }
 
-/* report discussion post */
-
+/* report discussion post overrides */
 ol.posts li div.post-actions form.report a {
     color: #447BC4;
 }
+
 ol.posts li div.post-actions form.report {
     padding: 0 10px 0 0;
     display: block;
 }
 
-form.report select,
-form.report input.text {
-    display: none;
-}
-
-form.report input[type="submit"] {
-    color: #999;
-    font-size: 11px;
-    margin: 0;
-}
-
-form.report .kbox-container {
-    position: absolute;
-    width: 255px;
-}
-
-form.report .report-post-box ul {
-    list-style: none;
-}
-
-form.report .report-post-box li {
-    border: 0;
-    margin: 0;
-    min-height: 17px;
-    padding: 0 0 6px;
-}
-
-form.report .report-post-box input.text {
-    border: solid 1px #87C4DC;
-    border-radius: 6px;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
-    display: block;
-    padding: 3px 8px;
-    width: 92%;
-}
-
-form.report.processing .report-post-box a {
-    color: #bbb;
-    cursor: default;
+ol.posts li div.post-actions form.report a {
+    font-weight: normal;
 }
 
-form.report.processing .report-post-box input.text {
-    border-color: #bbb;
+ol.posts li div.post-actions form.report li {
+    background: none;
 }
 
-div.report-reply a.reply {
-    float: right;
+ol.posts form.report .kbox-container {
+    left: 0;
 }

media/css/questions.css

@@ -632,63 +632,6 @@ div.mini-reply p.helpful {
     margin: 7px 10px 0;
 }
 
-/* report post */
-form.report {
-    font-size: 12px;
-    margin: 18px 0 0;
-    position: relative;
-}
-
-form.report select,
-form.report input.text {
-    display: none;
-}
-
-form.report input[type="submit"] {
-    color: #999;
-    margin: 0;
-}
-
-form.report .kbox-container {
-    left: -70px;
-    top: 25px;
-    width: 255px;
-}
-
-form.report .report-post-box ul {
-    list-style: none;
-}
-
-form.report .report-post-box li {
-    border: 0;
-    margin: 0;
-    min-height: 17px;
-    padding: 0 0 6px;
-}
-
-form.report .report-post-box input.text {
-    border: solid 1px #87C4DC;
-    border-radius: 6px;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
-    display: block;
-    padding: 3px 8px;
-    width: 92%;
-}
-
-form.report.processing .report-post-box a {
-    color: #bbb;
-    cursor: default;
-}
-
-form.report.processing .report-post-box input.text {
-    border-color: #bbb;
-}
-
-div.report-reply a.reply {
-    float: right;
-}
-
 /* thanks for voting */
 #vote-thanks-kbox {
     left: -120px;

media/js/forums.js

@@ -7,7 +7,6 @@
 (function($){
 
     function init() {
-        initReportPost();
         Marky.createSimpleToolbar('.editor-tools', '#reply-content, #id_content');
         new k.AjaxPreview($('#preview'));
 
@@ -28,66 +27,6 @@
         });
     }
 
-    /*
-     * Initialize the 'Report Post' form (ajaxify) (copied from questions.js)
-     */
-    function initReportPost() {
-        $('form.report input[type="submit"]').click(function(ev){
-            ev.preventDefault();
-            var $form = $(this).closest('form');
-            $('div.report-post-box').remove();
-
-            var html = '<section class="report-post-box">' +
-                       '<ul class="wrap"></ul></section>',
-                $html = $(html),
-                $ul = $html.find('ul'),
-                kbox = new KBox($html, {
-                    title: gettext('Report this Article'),
-                    position: 'none',
-                    container: $form,
-                    closeOnOutClick: true
-                });
-
-            $form.find('select option').each(function(){
-                var $this = $(this),
-                    $li = $('<li><a href="#"></a></li>'),
-                    $a = $li.find('a');
-                $a.attr('data-val', $this.attr('value')).text($this.text());
-                $ul.append($li);
-            });
-            $ul.append('<li><input type="text" class="text" ' +
-                       'name="modal-other" /></li>');
-
-            $html.find('ul a').click(function(ev){
-                ev.preventDefault();
-                $form.find('select').val($(this).data('val'));
-                var other = $html.find('input[name="modal-other"]').val();
-                $form.find('input[name="other"]').val(other);
-                $.ajax({
-                    url: $form.attr('action'),
-                    type: 'POST',
-                    data: $form.serialize(),
-                    dataType: 'json',
-                    success: function(data) {
-                        var $msg = $('<div class="msg"></div>');
-                        $msg.text(data.message);
-                        $html.find('ul').replaceWith($msg);
-                    },
-                    error: function() {
-                        var message = gettext("There was an error."),
-                            $msg = $('<div class="msg"></div>');
-                        $msg.text(data.message);
-                        $html.find('ul').replaceWith($msg);
-                    }
-                });
-
-                return false;
-            });
-
-            kbox.open();
-        });
-    }
-
     $(document).ready(init);
 
 }(jQuery));

media/js/questions.js

@@ -24,7 +24,6 @@
             $('#support-search input[name=q]')
                 .val(k.unquote($.cookie('last_search')));
 
-            initReportPost();
             initHaveThisProblemTooAjax();
             initEmailSubscribeAjax();
             initHelpfulVote();
@@ -91,66 +90,6 @@
                document.location.search.indexOf('product=beta') >= 0;
     }
 
-    /*
-     * Initialize the 'Report Post' form (ajaxify)
-     */
-    function initReportPost() {
-        $('form.report input[type="submit"]').click(function(ev){
-            ev.preventDefault();
-            var $form = $(this).closest('form');
-            $('div.report-post-box').remove();
-
-            var html = '<section class="report-post-box">' +
-                       '<ul class="wrap"></ul></section>';
-                $html = $(html),
-                $ul = $html.find('ul'),
-                kbox = new KBox($html, {
-                    title: gettext('Report this post'),
-                    position: 'none',
-                    container: $form,
-                    closeOnOutClick: true
-                });
-
-            $form.find('select option').each(function(){
-                var $this = $(this),
-                    $li = $('<li><a href="#"></a></li>'),
-                    $a = $li.find('a');
-                $a.attr('data-val', $this.attr('value')).text($this.text());
-                $ul.append($li);
-            });
-            $ul.append('<li><input type="text" class="text" ' +
-                       'name="modal-other" /></li>');
-
-            $html.find('ul a').click(function(ev){
-                ev.preventDefault();
-                $form.find('select').val($(this).data('val'));
-                var other = $html.find('input[name="modal-other"]').val();
-                $form.find('input[name="other"]').val(other);
-                $.ajax({
-                    url: $form.attr('action'),
-                    type: 'POST',
-                    data: $form.serialize(),
-                    dataType: 'json',
-                    success: function(data) {
-                        var $msg = $('<div class="msg"></div>');
-                        $msg.text(data.message);
-                        $html.find('ul').replaceWith($msg);
-                    },
-                    error: function() {
-                        var message = gettext("There was an error."),
-                            $msg = $('<div class="msg"></div>');
-                        $msg.text(data.message);
-                        $html.find('ul').replaceWith($msg);
-                    }
-                });
-
-                return false;
-            });
-
-            kbox.open();
-        });
-    }
-
     /*
      * Ajaxify the "I have this problem too" form
      */

media/js/reportabuse.js

@@ -0,0 +1,76 @@
+/*
+ * Report abuse UI.
+ */
+
+(function($) {
+
+"use strict";
+
+k.ReportAbuse = {
+    init: function(options) {
+        options = $.extend({
+            selector: 'form.report input[type="submit"]'
+        }, options);
+
+        // Click handler
+        $(options.selector).click(function(ev){
+            ev.preventDefault();
+            var $form = $(this).closest('form');
+            $('div.report-post-box').remove();
+
+            // Build up the HTML for the kbox popup 
+            var html = '<section class="report-post-box">' +
+                       '<ul class="wrap"></ul></section>',
+                $html = $(html),
+                $ul = $html.find('ul'),
+                kbox = new KBox($html, {
+                    title: gettext('Report this post'),
+                    position: 'none',
+                    container: $form,
+                    closeOnOutClick: true
+                });
+            $form.find('select option').each(function(){
+                var $this = $(this),
+                    $li = $('<li><a href="#"></a></li>'),
+                    $a = $li.find('a');
+                $a.attr('data-val', $this.attr('value')).text($this.text());
+                $ul.append($li);
+            });
+            $ul.append('<li><input type="text" class="text" ' +
+                       'name="modal-other"/></li>');
+
+            // Selection click handlers
+            $html.find('ul a').click(function(ev){
+                ev.preventDefault();
+                $form.find('select').val($(this).data('val'));
+                var other = $html.find('input[name="modal-other"]').val();
+                $form.find('input[name="other"]').val(other);
+                $.ajax({
+                    url: $form.attr('action'),
+                    type: 'POST',
+                    data: $form.serialize(),
+                    dataType: 'json',
+                    success: function(data) {
+                        var $msg = $('<div class="msg"></div>');
+                        $msg.text(data.message);
+                        $html.find('ul').replaceWith($msg);
+                    },
+                    error: function() {
+                        var message = gettext("There was an error."),
+                            $msg = $('<div class="msg"></div>');
+                        $msg.text(data.message);
+                        $html.find('ul').replaceWith($msg);
+                    }
+                });
+
+                return false;
+            });
+
+            kbox.open();
+        });
+    }
+};
+
+$(document).ready(k.ReportAbuse.init);
+
+})(jQuery);

settings.py

@@ -367,6 +367,7 @@ def JINJA_CONFIG():
         ),
         'forums': (
             'css/forums.css',
+            'css/reportabuse.css',
         ),
         'questions': (
             'css/to-delete.css',
@@ -375,6 +376,7 @@ def JINJA_CONFIG():
             'css/tags.css',
             'css/search.css',
             'css/autocomplete.css',
+            'css/reportabuse.css',
         ),
         'search': (
             'css/search.css',
@@ -466,6 +468,7 @@ def JINJA_CONFIG():
             'js/tags.autocomplete.js',
             'js/tags.filter.js',
             'js/tags.js',
+            'js/reportabuse.js',
         ),
         'search': (
             'js/search.js',
@@ -474,6 +477,7 @@ def JINJA_CONFIG():
             'js/markup.js',
             'js/ajaxpreview.js',
             'js/forums.js',
+            'js/reportabuse.js',
         ),
         'gallery': (
             'js/libs/jquery.ajaxupload.js',