Changeset - fa6a61ed9b28
[Not reviewed]
0 1 0
Brett Smith (brett) - 8 years ago 2016-09-09 18:51:11
brett@sfconservancy.org
Supporter page: Scroll to type selection after window ready.
1 file changed with 3 insertions and 1 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/js/supporter-page.js
Show inline comments
...
 
@@ -45,215 +45,217 @@ $(document).ready(function() {
 
                  text: leftOver.toLocaleString() + " more needed to save license compliance work.",
 
                  barClass: "final-goal", textClass: "goalText" },
 
                {  value: 100,
 
                   text: siteMatchCount + " matched!",
 
                   barClass: "progress", textClass: "soFarText" },
 
            ]});
 
    } else {
 
        $('#siteprogressbar').
 
            multiprogressbar({ parts: [
 
                { value: (noCommaSiteSoFar / noCommaSiteFinalGoal) * 100,
 
                  text: siteSoFar + " joined!",
 
                  barClass: "progress", textClass: "soFarText" },
 
                { value: ((noCommaSiteMiddleGoal - noCommaSiteSoFar) / noCommaSiteFinalGoal) * 100,
 
                  text: siteMiddleGoal + " will save our basic work",
 
                  barClass: "middle-goal", textClass: "goalText" },
 
                { value:
 
                  ((noCommaMatchFinalGoal - noCommaSiteMiddleGoal) / noCommaSiteFinalGoal) * 100,
 
                  text: noCommaMatchFinalGoal.toLocaleString() + " will save license compliance",
 
                  barClass: "final-goal", textClass: "goalText" },
 
                {  value: 100,
 
                   text: siteMatchCount + " matched!",
 
                   barClass: "progress", textClass: "soFarText" },
 
            ]});
 
    }
 
    $('span#fundraiser-percentage').css({ 'color'        : 'green',
 
                                          'font-weight'  : 'bold',
 
                                          'float'        : 'right',
 
                                          'margin-right' : '40%',
 
                                          'margin-top'   : '2.5%',
 
                                          'text-align'   : 'inherit'});
 
    function riseDonationProgressBar() {
 
        if (curValue >= percentage) {
 
            $('span#fundraiser-so-far').text(soFar);
 
            $("#progressbar").progressbar({ value :  percentage });
 
            $('span#fundraiser-percentage').text(percentage.toFixed(1) + "%");
 
        } else {
 
            var newVal = (curValue / 100.00) * noCommaGoal;
 
            $("#progressbar").progressbar({ value:  curValue });
 
            $('span#fundraiser-so-far').text(newVal.toLocaleString());
 
            curValue += riseLevelPercent;
 
            setTimeout(riseDonationProgressBar, 50);
 
        }
 
    }
 
    function riseDonationCount() {
 
        if (curDonationCount >= noCommaDonationCount) {
 
            $('span#fundraiser-donation-count').text(donationCount);
 
        } else {
 
            $('span#fundraiser-donation-count').text(curDonationCount.toLocaleString());
 
            curDonationCount += incrementDonationCount;
 
            setTimeout(riseDonationCount, 50);
 
        }
 
    }
 
    if (noCommaDonationCount > 0) {
 
        $('span#fundraiser-donation-count').text("");
 
        riseDonationCount();
 
    }
 
    if (noCommaSoFar > 0.00 && noCommaGoal > 0.00) {
 
        $('span#fundraiser-percentage').text("");
 
        $("#progressbar").progressbar({ value:  curValue });
 
        riseDonationProgressBar();
 
    }
 

	
 
    $('.toggle-content').hide();
 

	
 
    $('.toggle-control')
 
     .addClass('clickable')
 
     .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);
 
    });
 

	
 
    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");
 
        return false;
 
    };
 
    $(".supporter-type-selector a").bind("click", selectSupportType);
 

	
 
    var supportTypeSelector = function(supportTypeHash) {
 
        return $(".supporter-type-selector a[href=" + supportTypeHash + "]");
 
    };
 
    var selectSupportTypeFromHash = function() {
 
        return supportTypeSelector(window.location.hash).click();
 
    };
 
    var $window = $(window);
 
    $window.bind("hashchange", selectSupportTypeFromHash);
 
    var $selectorLink = selectSupportTypeFromHash();
 
    if ($selectorLink.length === 0) {
 
        supportTypeSelector("#annual").click();
 
    } else {
 
        $window.scrollTop($selectorLink.offset().top);
 
        $window.bind("ready", function() {
 
            scrollTop($selectorLink.offset().top);
 
        });
 
    }
 

	
 
    $( ".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();
 
        }
 
    });
 
});
0 comments (0 inline, 0 general)