Files @ b723e6390acd
Branch filter:

Location: website/www/conservancy/static/js/supporter-page.js - annotation

b723e6390acd 6.8 KiB application/javascript Show Source Show as Raw Download as Raw
Bradley M. Kuhn
Format like previous with the <p> solution

<ul> is the right HTML way to format these, but they are all too
close. Get it to look more like it did with <p>'s with CSS.
01eb8c80c8c1
6b649e2f48e0
e397501bfa55
342590123ff5
01eb8c80c8c1
01eb8c80c8c1
01eb8c80c8c1
cb5b5ec23fc2
cb5b5ec23fc2
6392ae3a4313
6392ae3a4313
6392ae3a4313
6392ae3a4313
6392ae3a4313
6392ae3a4313
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
6392ae3a4313
6392ae3a4313
ab29d4563909
19e744788b7f
ab29d4563909
ab29d4563909
ab29d4563909
ab29d4563909
ab29d4563909
492de3eab3de
492de3eab3de
492de3eab3de
492de3eab3de
492de3eab3de
ab29d4563909
ab29d4563909
ab29d4563909
ab29d4563909
ab29d4563909
ab29d4563909
01eb8c80c8c1
674261e0f0c2
674261e0f0c2
6392ae3a4313
6392ae3a4313
ba0df40639d9
674261e0f0c2
cb5b5ec23fc2
cb5b5ec23fc2
72027870920f
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
ba0df40639d9
cb5b5ec23fc2
6392ae3a4313
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
cb5b5ec23fc2
86e780340a2b
b90413809f26
86ef51db5dff
86ef51db5dff
86ef51db5dff
86ef51db5dff
78c474caaccc
e8ec7a33fbe0
6392ae3a4313
9d30d7431a1e
86ef51db5dff
86ef51db5dff
86ef51db5dff
86ef51db5dff
9d30d7431a1e
86ef51db5dff
9d30d7431a1e
19e744788b7f
9d30d7431a1e
9d30d7431a1e
8ca60f8b076f
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
fb6164926fd0
e397501bfa55
fb6164926fd0
fb6164926fd0
fb6164926fd0
e397501bfa55
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
fb6164926fd0
fb6164926fd0
fb6164926fd0
fb6164926fd0
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
fb6164926fd0
fb6164926fd0
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
2ba369aa5c5a
e397501bfa55
fb6164926fd0
2ba369aa5c5a
e397501bfa55
e397501bfa55
2ba369aa5c5a
6b649e2f48e0
6b649e2f48e0
6b649e2f48e0
6b649e2f48e0
6b649e2f48e0
c2d41ca6fda0
6b649e2f48e0
6b649e2f48e0
6b649e2f48e0
6b649e2f48e0
6b649e2f48e0
44301d386ba0
/* Copyright (C) 2012-2013 Denver Gingerich, 
** Copyright (C) 2013-2014, 2020 Bradley M. Kuhn,
** Copyright (C) 2016, 2020 Brett Smith.
** License: GPLv3-or-later
**  Find a copy of GPL at https://sfconservancy.org/GPLv3
*/

var NEW_AMOUNT_EVENT = 'conservancy:newamount';

var flipClass = function(elem, byeClass, hiClass) {
    var classList = elem.classList;
    classList.remove(byeClass);
    classList.add(hiClass);
}

var buildAmountData = function(amountInput) {
    var amountData = {
        minAmount: parseFloat(amountInput.min),
        newAmount: parseFloat(amountInput.value),
    }
    if (amountInput.dataset.oldAmount !== undefined) {
        amountData.oldAmount = parseFloat(amountInput.dataset.oldAmount);
    }
    return amountData;
}

var supportTypeSelector = function(supportTypeHash) {
    return $(supportTypeHash + "Selector");
};

var $window = $(window);

$window.load(function() {
    /* We've sometimes published links that say #renew instead of #renewal.
       Rewrite that to work as intended. */
    if (window.location.hash === "#renew") {
        window.location.hash = "#renewal";
    }
    var $selectorLink = supportTypeSelector(window.location.hash);
    if ($selectorLink.length > 0) {
        $window.scrollTop($selectorLink.offset().top);
    }
});

$(document).ready(function() {
    // 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.  Now we hide those for JavaScript users:
    var $formCorrectionNeeded = $('#form-correction-needed');
    $formCorrectionNeeded.addClass('hidden');

    $('form.supporter-form').each(function(index, form) {
        var $amountInput = $('input[type=number]', form).first();
        var $amountError = $('.form-error', $amountInput.parents('.supporter-form-input'));

        $amountError.on(NEW_AMOUNT_EVENT, function(event, amountData) {
            var isValid = amountData.newAmount >= amountData.minAmount;
            if (amountData.oldAmount === undefined) {
                if (isValid) {
                    $amountError.addClass('hidden');
                } else {
                    flipClass($amountInput[0], 'valid', 'invalid');
                    $amountError.removeClass('hidden');
                }
            } else if (isValid) {
                flipClass($amountInput[0], 'invalid', 'valid');
                $amountError.fadeOut();
            } else if (amountData.oldAmount >= amountData.minAmount) {
                flipClass($amountInput[0], 'valid', 'invalid');
                $amountError.fadeIn();
            }
        });

        $amountInput.on('input', function(event) {
            event.target.classList.remove('invalid');
        }).on('focusout', function(event) {
            var amountInput = event.target;
            var amountData = buildAmountData(amountInput);
            $amountError.trigger(NEW_AMOUNT_EVENT, amountData);
            amountInput.dataset.oldAmount = amountData.newAmount;
        }).trigger('focusout');

        $(form).on('submit', function(event) {
            var amountData = buildAmountData($amountInput[0]);
            if (amountData.newAmount >= amountData.minAmount) {
                $formCorrectionNeeded.addClass('hidden');
            } else {
                $formCorrectionNeeded.removeClass('hidden')
                    .css("font-weight", "bold").css("font-size", "150%");
                event.preventDefault();
            }
        });
    });

    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").hide();
        $(event.target.hash).show();
        $formCorrectionNeeded.addClass('hidden');
        return false;
    };
    $(".supporter-type-selector a").bind("click", selectSupportType);

    var selectSupportTypeFromHash = function() {
        return supportTypeSelector(window.location.hash).click();
    };
    $window.bind("hashchange", selectSupportTypeFromHash);
    if (selectSupportTypeFromHash().length === 0) {
        supportTypeSelector("#annual").click();
    }
    var want_id = window.location.hash.substr(1) || "do not match any id";
    var $expandable_counts = [];
    // First, build a count of expandable div sections
    $('div.expandable-section').each(function(index, section) {
        var $ourid = $(section).attr('id');
        if ($ourid == undefined) { $ourid = "__global"; }
        $expandable_counts[$ourid] = 0;
    });
    $('div[data-read-more]').each(function(index, readmore) {
        var $readmore = $(readmore)
        var $header = $readmore.prev('h3');
        if ($header.length && $header[0].id === want_id) {
            // Do nothing, leave it alone
        } else {
            var $ourid = $readmore.closest(".expandable-section" ).attr('id');
            if ($ourid == undefined) { $ourid = "__global"; }

            // Set up the link for this specific section using the text from
            // the data-read-more atrribute on the div specific to this section
            var $linkpara = $('<p><a class="read-more"></a></p>');
            var $readlink = $linkpara.children('a');
            $readlink.append($readmore.data('read-more'));
            $readlink.on('click', function(event) {
                // When clicked, we'll restore the actual text and fade it in
                // quickly, and also see if there are any remaining
                // expandable sections left in this particular expandable
                // section.  If none are left, make the "Expand all" button
                // (which lives in an 'a' anchor of the class 'expander') disappear.
                $linkpara.replaceWith($readmore);
                $readmore.fadeIn('fast');
                $expandable_counts[$ourid]--;
                if ($expandable_counts[$ourid] <= 0) {
                  $readmore.closest(".expandable-section" )
                  .children('a.expander').each(function(index, element){
                       $(element).fadeOut('slow');
                  })
                }
            });
            $readmore.hide().replaceWith($linkpara);
            $expandable_counts[$ourid]++;
        }
    });
    // Final two each's enable the "Expand All" link.
    $('a[data-expand-link-text]').each(function(index, element) {
        var $element = $(element);
        $element.append($element.data('expand-link-text'));
    });
    $('.expandable-section').each(function(index) {
        var $expandlink = $(this).children('a.expander');
        var $ourexpandablesection = $(this);
        $expandlink.on('click', function(event) {
            $expandlink.fadeOut('slow');
            $ourexpandablesection.find('.read-more').each(function(index) { $(this).click(); }); });
    });
});