From 86ef51db5dffda81fd5881513cd731f72646c6e6 2016-09-09 16:10:41
From: Brett Smith <brett@sfconservancy.org>
Date: 2016-09-09 16:10:41
Subject: [PATCH] Supporter page: Refactor JavaScript.

This isn't intended to have any functional change, it's just DRYing up
the code to simplify functional changes later.

---

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 3622122548b8e6ddd45250034d0dfa9667e9540a..14313c57bd2e440466c0688c7b3704fca0ab4d64 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -420,6 +420,16 @@ pre {
   overflow: auto;
 }
 
+.supporter-type-selector a {
+    font-size: 125%;
+    font-weight: normal;
+}
+
+.supporter-type-selector a.supporter-type-selector-selected {
+    font-size: 127%;
+    font-weight: bold;
+}
+
 /* Make dl's ( such as for FAQ entries) look nice on screens, both big and small. */
 
 dl {
diff --git a/www/conservancy/static/js/supporter-page.js b/www/conservancy/static/js/supporter-page.js
index 3f1d2ccbb071419a16254e00b954d0900449dddb..9ff412aa567e0e16d79808ed789c94e3c3daa3ad 100644
--- a/www/conservancy/static/js/supporter-page.js
+++ b/www/conservancy/static/js/supporter-page.js
@@ -204,36 +204,34 @@ $(document).ready(function() {
     $(".dinner-form-submit").click(function (event) {
         validateFormAtSubmission($(".dinner-form input#amount"), event);
     });
-    /* Handle toggling of annual/monthly form selections */
-    $('.supporter-type-selection#monthly').hide();
-    $('.supporter-type-selection#renewal').hide();
-    $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
 
-    $("a[href$='monthly']").bind('click', function() {
-        $('.supporter-type-selection#annual').hide();
-        $('.supporter-type-selection#renewal').hide();
-        $('.supporter-type-selection#monthly').show();
-        $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
-        $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
-        $('#renewalSelector').css("font-weight", "normal").css("font-size", "125%");
+    var selectSupportType = function(event) {
+        var $selectedLink = $(event.target);
+        $(".supporter-type-selector a").removeClass("supporter-type-selector-selected");
+        $selectedLink.addClass("supporter-type-selector-selected");
+        $(".supporter-type-selection").each(function(index, element) {
+            var $element = $(element);
+            if (event.target.href.endsWith("#" + element.id)) {
+                $element.show();
+            } else {
+                $element.hide();
+            }
+        });
         $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
-    });
-    $("a[href$='annual']").bind('click', function() {
-        $('.supporter-type-selection#renewal').hide();
-        $('.supporter-type-selection#monthly').hide();
-        $('.supporter-type-selection#annual').show();
-        $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
-        $('#renewalSelector').css("font-weight", "normal").css("font-size", "125%");
-        $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
-    });
-    $("a[href$='renewal']").bind('click', function() {
-        $('.supporter-type-selection#annual').hide();
-        $('.supporter-type-selection#monthly').hide();
-        $('.supporter-type-selection#renewal').show();
-        $('#renewalSelector').css("font-weight", "bold").css("font-size", "127%");
-        $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
-        $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
-    });
+    };
+    $(".supporter-type-selector a").bind("click", selectSupportType);
+
+    var selectSupportTypeFromHash = function() {
+        var urlHash = window.location.hash;
+        if ((urlHash !== "#monthly") && (urlHash !== "#renewal")) {
+            urlHash = "#annual";
+        }
+        $(".supporter-type-selector a[href=" + urlHash + "]").click();
+        console.log("fromHash done");
+    };
+    $(window).bind("hashchange", selectSupportTypeFromHash);
+    selectSupportTypeFromHash();
+
     $( ".footnote-mark" ).tooltip({
         items: "a",
         hide: { duration: 5000 },
@@ -254,35 +252,3 @@ $(document).ready(function() {
         }
     });
 });
-
-$(window).load(function () {
-    verifySelctionCorrectOnPageLoad = function() {
-        var ourURL = document.URL;
-        if (ourURL.search("#monthly") > 0) {
-            $('.supporter-type-selection#annual').hide();
-            $('.supporter-type-selection#monthly').show();
-            $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
-            $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
-            $('#renewalSelector').css("font-weight", "normal").css("font-size", "125%");
-        }
-        if (ourURL.search("#annual") > 0) {
-            $('.supporter-type-selection#monthly').hide();
-            $('.supporter-type-selection#annual').show();
-            $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
-            $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
-            $('#renewalSelector').css("font-weight", "normal").css("font-size", "125%");
-        }
-        if (ourURL.search("#renewal") > 0) {
-            $('.supporter-type-selection#monthly').hide();
-            $('.supporter-type-selection#annual').hide();
-            $('.supporter-type-selection#renewal').show();
-            $('#renewalSelector').css("font-weight", "bold").css("font-size", "127%");
-            $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
-            $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
-        }
-    }
-    if (location.hash) {
-        setTimeout(verifySelctionCorrectOnPageLoad, 1);
-    }
-    window.addEventListener("hashchange", verifySelctionCorrectOnPageLoad);
-});