Improve in-place moderation UI

This rearranges the moderation UI into logical chunks,
and improves the 'revert to original' checkboxes by:
 - hiding them unless there's some original text to revert
   to
 - displaying the text that will be reverted to in the
   appropriate input fields when checked.

Part of mysociety/FixMyStreet-Commercial#731

1 files changed, 11 insertions, 2 deletions

diff --git a/web/js/moderate.js b/web/js/moderate.js
index 0be3cca8d..53277d9d9 100644
--- a/web/js/moderate.js
+++ b/web/js/moderate.js
@@ -1,3 +1,11 @@
+function toggle_original ($input, revert) {
+    $input.prop('disabled', revert);
+    if (revert) {
+        $input.data('currentValue', $input.val());
+    }
+    $input.val($input.data(revert ? 'originalValue' : 'currentValue'));
+}
+
 function setup_moderation (elem, word) {
 
     elem.each( function () {
@@ -8,10 +16,11 @@ function setup_moderation (elem, word) {
         });
 
         $elem.find('.revert-title').change( function () {
-            $elem.find('input[name=problem_title]').prop('disabled', $(this).prop('checked'));
+            toggle_original($elem.find('input[name=problem_title]'), $(this).prop('checked'));
         });
+
         $elem.find('.revert-textarea').change( function () {
-            $elem.find('textarea').prop('disabled', $(this).prop('checked'));
+            toggle_original($elem.find('textarea'), $(this).prop('checked'));
         });
 
         var hide_document = $elem.find('.hide-document');