website Changeset - 86ef51db5dff · Conservancy Kallithea

Changeset - 86ef51db5dff

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Brett Smith (brett) - 8 years ago 2016-09-09 16:10:41
brett@sfconservancy.org

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.

2 files changed with 36 insertions and 60 deletions:

www/conservancy/static/css/conservancy.css

www/conservancy/static/js/supporter-page.js

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy.css

➞

Show inline comments

@@ ... @@
 .download-formats ul li { display: inline; padding-left: 2em; }
 /* Resources - book styles */
 hr.chapter-separator { display: none; }
 h2.likechapterHead { text-align: center; }
 h2.chapterHead { text-align: center; }
 #mainContent ul.author { list-style-type: none; padding-left: 0; }
 #mainContent div.footnotes { font-style: normal; } /* remove italics */
 span.sectionToc { padding-left: 2em; } /* indent TOC properly */
 span.subsectionToc { padding-left: 4em; }
 span.subsubsectionToc { padding-left: 6em;}
 .js, .js p, .js p.bibitem, .js p.bibitem-p { background-color: #cde7e9; }
 body.conservancy-Members #navbar ul li.Members a,
 body.conservancy-news #navbar ul li.news a,
 body.conservancy-blog #navbar ul li.blog a,
 body.conservancy-About #navbar ul li.About a,
 body.conservancy-Compliance #navbar ul li.compliance a,
 body.conservancy-donate #navbar ul li.donate a,
 body.conservancy-npoacct #navbar ul li.npoacct a,
 body.conservancy-sponsors #navbar ul li.sponsors a /* NO COMMA HERE! */
+{
     color: #000033;
     font-weight: bold;
     background: #eaf1f1;
     background: -moz-linear-gradient(bottom, #fff, #eaf1f1);
     background: -webkit-linear-gradient(bottom, #fff, #eaf1f1);
     background: linear-gradient(to top, #fff, #eaf1f1);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaf1f1', endColorstr='#ffffff', GradientType=0);
+}
 body.conservancy-supporter #navbar ul li.supporter a
+{
     color: #000033;
     font-weight: bold;
     background: #ffd843;
     background: -moz-linear-gradient(bottom, #fff, #ffd533);
     background: -webkit-linear-gradient(bottom, #fff, #ffd533);
     background: linear-gradient(to top, #fff, #ffd533);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd533', endColorstr='#ffffff', GradientType=0);
+}
 #supporters ul {
   list-style: none;
   margin: 0;
   padding: 0;
+}
 #supporters li:before {
     content: '';
     display: inline-block;
     height: 2em;
     width: 2em;
     background-image: url(/img/conservancy-supporter-heart.svg);
     background-size: contain;
     background-repeat: no-repeat;
     padding: 0.25em 1.2em 0.25em 0.25em;
     vertical-align: middle;
+}
 #supporters li {
     padding: 0.5em 2em 1em 2em;
     margin-left: .25em;
     list-style: none;
+}
 #sponsor ul {
   clear: all;
   margin-bottom: 10px;
+}
 #sponsor li {
   width: 100%;
   float: left;
   margin-top: 10px;
   text-align: center;
   list-style: none;
   margin-right: 5px;
+}
 #subbox {
    position: absolute;
    padding-top: 10px;
    right: 0px;
    width: 200px;
    font-size: 12px;
+}
 img.inside-faq {
   max-width: 100%;
   width: auto;
   overflow: scroll;
+}
 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 {
     border: 3px double #ccc;
     padding: 0.5em;
+}
 dt {
     text-align: center;
     margin: 0em 1em 0.5em 0.5em;
     font-weight: bold;
     color: green; }
 dd {
     margin: 0 0 1.5em 2em;
+}
 @media only screen and (min-width: 685px) {
 dl {
     border: 3px double #ccc;
     padding: 0.5em;
+}
 dt {
     float: left;
     text-align: center;
     width: 10em;
     margin: 0em 1em 0.5em 0.5em;
     font-weight: bold;
     color: green; }
 dt:after {
     content: ":";
+}
 dd {
     margin: 0 0 2.5em 11.5em;
+}
+}
 .fundraiser-top-text {
     background: #F0FFB8;
     padding: .7em .7em .7em .7em;
+}
 .fundraiser-top-text em {
     font-size: 120%;
+}
 /* These vido controls are based on the fact that our videos often appear on
 ** the blog summary areas, which are in a div with class column, and in the
 ** main blog, which is in the body with class conservancy-blog
 */
 div.column video {
     float: right;
     height: auto !important;
     width: 25% !important;
     max-width:50%;
     margin-left: .7em;
     margin-bottom: .4em;
+}
 body.conservancy-blog video {
     float: right;
     height: auto !important;
     width: 50% !important;
     max-width: 75%;
     margin-left: .7em;
     margin-bottom: .7em;
+}
 /* In older firefox/iceweasel, the above did not work.  The below is a legacy
 ** hack, and requires you to remember to put class="small-right" and class="medium-right"
 */
 video.small-right {
     float: right;
     height: auto !important;
     width: 25% !important;
     max-width:50%;
     margin-left: .7em;
     margin-bottom: .4em;
+}
 video.medium-right {
     float: right;
     height: auto !important;
     width: 50% !important;
     max-width: 75%;
     margin-left: .7em;
     margin-bottom: .7em;
+}
 img.blog-right {
     float: right;
     padding-left: 1em;
     margin: .25em;
     min-width: 8%;
     max-width: 30%;
     width: auto;
+}

www/conservancy/static/js/supporter-page.js

➞

Show inline comments

@@ ... / @@ -111,178 +111,144 @@ $(document).ready(function() { @@
      .bind('click', function() {
         var $control = $(this);
         var $parent = $control.parents('.toggle-unit');
         $parent.toggleClass('expanded');
         $parent.find('.toggle-content').slideToggle();
         // if control has HTML5 data attributes, use to update text
         if ($parent.hasClass('expanded')) {
             $control.html($control.attr('data-expanded-text'));
         } else {
             $control.html($control.attr('data-text'));
+        }
     });
     $('a.donate-now')
       .addClass('clickable')
       .bind('click', function() {
         var $control = $('#donate-box');
         var $otherTextControl = $('.donate-sidebar');
         setTimeout(function() { $control.find('.toggle-content').slideUp(100);
                                 $control.toggleClass('expanded');
                                 $control.find('.toggle-content').slideDown(800).fadeOut(10);
                                 $otherTextControl.find('.donate-box-highlight').fadeOut(100);
                               }, 300);
           setTimeout(function() { $control.find('.toggle-content').fadeIn(2000);
                                   $otherTextControl.find('.donate-box-highlight')
                                   .css({'font-weight': 'bold', 'font-size' : '110%' });
                                   $otherTextControl.find('.donate-box-highlight').fadeIn(10000);
                                 }, 500);
     });
     $(".t-shirt-size-selector").hide();
     $('input[name=on0]:radio').change(function() {
         var input=$(this);
         var tShirtSelector = input.parent().children('.t-shirt-size-selector')
         var noShippingSelector = input.parent().children('input#no_shipping');
         var value = input.val();
         if (value == "wantGiftYes") {
             tShirtSelector.show();
             noShippingSelector.val("2");
         } else {
             tShirtSelector.hide();
             noShippingSelector.val("0");
+        }
     });
     // Forms start in "invalid" form, with the errors shown, so that
     // non-Javascript users see the errors by default and know what they must
     // enter.  The following two lines correct that.
     $('*#amount').addClass("valid");
     $('.supporter-form-inputs .form-error-show')
         .removeClass('form-error-show').addClass('form-error');
     $('.dinner-form-inputs .form-error-show')
         .removeClass('form-error-show').addClass('form-error');
     $('*#amount').on('input', function() {
         var input=$(this);
         var value = input.val();
         var errorElement=$("span#error", input.parent());
         var noCommaValue = value;
         noCommaValue = value.replace(/,/g, "");
         var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;
         var isValid = ( re.test(value) &&
                         parseInt(noCommaValue) >= parseInt(input.attr("minimum")));
         if (isValid)  {
            input.removeClass("invalid").addClass("valid");
            errorElement.removeClass("form-error-show").addClass("form-error");
            $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+        }
         else {
             input.removeClass("valid").addClass("invalid");
             errorElement.removeClass("form-error").addClass("form-error-show");
+        }
     });
     var validateFormAtSubmission = function(element, event) {
             var valid = element.hasClass("valid");
             if (! valid) {
                 $("#form-correction-needed").removeClass("form-error").addClass("form-error-show")
                                         .css("font-weight", "bold").css("font-size", "150%");
 	        event.preventDefault();
             } else {
                 $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+            }
     };
     $(".supporter-form-submit#monthly").click(function (event) {
         validateFormAtSubmission($(".supporter-form#monthly input#amount"), event);
     });
     $(".supporter-form-submit#annual").click(function (event) {
         validateFormAtSubmission($(".supporter-form#annual input#amount"), event);
     });
     $(".supporter-form-submit#renewal").click(function (event) {
         validateFormAtSubmission($(".supporter-form#renewal input#amount"), event);
     });
     $(".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 },
         position: {
             my: "center bottom-20",
             at: "center left",
             using: function( position, feedback ) {
                 $( this ).css( position );
                 $( "<div>" )
                     .addClass( "arrow" )
                     .addClass( feedback.vertical )
                     .addClass( feedback.horizontal )
                     .appendTo( this );
+            }
         },
         content: function() {
             return $('.footnote-1-text').text();
+        }
     });
 });
 $(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);
 });

0 comments (0 inline, 0 general)