Merge pull request #572 from alphagov/refactor-report-a-problem-js

Make report-a-problem.js a module, make it strict
alphagov · Apr 15, 2015 · d3e7dba · d3e7dba
2 parents 456bd9c + 1657027
commit d3e7dba
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 65 deletions.
diff --git a/app/assets/javascripts/report-a-problem.js b/app/assets/javascripts/report-a-problem.js
@@ -1,77 +1,84 @@
-var ReportAProblem = {
-  showErrorMessage: function (jqXHR) {
-    var response = "<h2>Sorry, we're unable to receive your message right now.</h2> " +
-                   "<p>We have other ways for you to provide feedback on the " +
-                   "<a href='/contact'>contact page</a>.</p>"
-    $('.report-a-problem-content').html(response);
-  },
+(function() {
+  "use strict";
 
-  promptUserToEnterValidData: function() {
-    ReportAProblem.enableSubmitButton();
-    $('<p class="error-notification">Please enter details of what you were doing.</p>').insertAfter('.report-a-problem-container h2');
-  },
+  window.GOVUK = window.GOVUK || {};
 
-  disableSubmitButton: function() {
-    $('.report-a-problem-container .button').attr("disabled", true);
-  },
+  window.GOVUK.reportAProblem = {
+    showErrorMessage: function (jqXHR) {
+      var response = "<h2>Sorry, we're unable to receive your message right now.</h2> " +
+                     "<p>We have other ways for you to provide feedback on the " +
+                     "<a href='/contact'>contact page</a>.</p>"
+      $('.report-a-problem-content').html(response);
+    },
 
-  enableSubmitButton: function() {
-    $('.report-a-problem-container .button').attr("disabled", false);
-  },
+    promptUserToEnterValidData: function() {
+      GOVUK.reportAProblem.enableSubmitButton();
+      $('<p class="error-notification">Please enter details of what you were doing.</p>').insertAfter('.report-a-problem-container h2');
+    },
 
-  showConfirmation: function(data) {
-    $('.report-a-problem-content').html(data.message);
-  },
+    disableSubmitButton: function() {
+      $('.report-a-problem-container .button').attr("disabled", true);
+    },
 
-  submit: function() {
-    $('.report-a-problem-container .error-notification').remove();
-    $('input#url').val(window.location);
+    enableSubmitButton: function() {
+      $('.report-a-problem-container .button').attr("disabled", false);
+    },
 
-    ReportAProblem.disableSubmitButton();
-    $.ajax({
-      type: "POST",
-      url: "/contact/govuk/problem_reports",
-      dataType: "json",
-      data: $('.report-a-problem-container form').serialize(),
-      success: ReportAProblem.showConfirmation,
-      error: function(jqXHR, status) {
-        if (status === 'error' || !jqXHR.responseText) {
-          if (jqXHR.status == 422) {
-            ReportAProblem.promptUserToEnterValidData();
-          }
-          else {
-            ReportAProblem.showErrorMessage();
+    showConfirmation: function(data) {
+      $('.report-a-problem-content').html(data.message);
+    },
+
+    submit: function() {
+      $('.report-a-problem-container .error-notification').remove();
+      $('input#url').val(window.location);
+
+      GOVUK.reportAProblem.disableSubmitButton();
+      $.ajax({
+        type: "POST",
+        url: "/contact/govuk/problem_reports",
+        dataType: "json",
+        data: $('.report-a-problem-container form').serialize(),
+        success: GOVUK.reportAProblem.showConfirmation,
+        error: function(jqXHR, status) {
+          if (status === 'error' || !jqXHR.responseText) {
+            if (jqXHR.status == 422) {
+              GOVUK.reportAProblem.promptUserToEnterValidData();
+            }
+            else {
+              GOVUK.reportAProblem.showErrorMessage();
+            }
           }
+        },
+        statusCode: {
+          500: GOVUK.reportAProblem.showErrorMessage
         }
-      },
-      statusCode: {
-        500: ReportAProblem.showErrorMessage
-      }
-    });
-    return false;
+      });
+      return false;
+    }
   }
-}
 
-$(document).ready(function() {
-  // Add in the toggle link for reporting a problem at the bottom of the page
-  var toggleBlock = '<div class="report-a-problem-toggle-wrapper js-footer">' +
-                      '<p class="report-a-problem-toggle">' +
-                        '<a href="">Is there anything wrong with this page?</a>' +
-                      '</p>' +
-                    '</div>';
-  var $container = $('.report-a-problem-container')
-  $container.before(toggleBlock);
+  $(document).ready(function() {
+    // Add in the toggle link for reporting a problem at the bottom of the page
+    var toggleBlock = '<div class="report-a-problem-toggle-wrapper js-footer">' +
+                        '<p class="report-a-problem-toggle">' +
+                          '<a href="">Is there anything wrong with this page?</a>' +
+                        '</p>' +
+                      '</div>';
+    var $container = $('.report-a-problem-container')
+    $container.before(toggleBlock);
 
-  // Add a click handler for the toggle
-  $('.report-a-problem-toggle a').on('click', function() {
-    $container.toggle();
-    return false;
-  });
+    // Add a click handler for the toggle
+    $('.report-a-problem-toggle a').on('click', function() {
+      $container.toggle();
+      return false;
+    });
 
-  // form submission for reporting a problem
-  var $form = $container.find('form');
-  $form.append('<input type="hidden" name="javascript_enabled" value="true"/>');
-  $form.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
-  $form.submit(ReportAProblem.submit);
+    // form submission for reporting a problem
+    var $form = $container.find('form');
+    $form.append('<input type="hidden" name="javascript_enabled" value="true"/>');
+    $form.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
+    $form.submit(GOVUK.reportAProblem.submit);
+
+  });
 
-});
+}());
diff --git a/spec/javascripts/report-a-problem-spec.js b/spec/javascripts/report-a-problem-spec.js
@@ -9,7 +9,7 @@ describe("form submission for reporting a problem", function () {
     beforeEach(function() {
         setFixtures(FORM_TEXT);
         form = $('form');
-        form.submit(ReportAProblem.submit);
+        form.submit(GOVUK.reportAProblem.submit);
     });
 
     describe("while the request is being handled", function() {