website Files · www/conservancy/static/js/conservancy.js

Files @ 26ff31bb7878

Branch filter:

Location: website/www/conservancy/static/js/conservancy.js

26ff31bb7878 2.2 KiB application/javascript Show Annotation Show as Raw Download as Raw

bsturmfels

progress bar: Drop JS, make mobile friendly, match design to new site.

The existing jQuery UI-based fundraising progress bar used a float layout,
making it hard to adapt for mobile use. Given that there is not interactivity,
I've dropped all the JS and switched to a flexbox layout. This works well
because the bar will stretch to fit the text rather than always maintaining its scale.

/* Copyright (C) 2012-2013 Denver Gingerich,
** Copyright (C) 2013-2014 Bradley M. Kuhn,
** Copyright (C) 2016 Brett Smith.
** License: GPLv3-or-later
**  Find a copy of GPL at https://sfconservancy.org/GPLv3
*/

$(document).ready(function() {
    /* When the browser doesn't support any video source, replace it
       with the HTML inside the <video> element. */
    var showVideoInnerHTML = function(event) {
        var video = event.target.parentNode;
        var div = document.createElement('div');
        div.classList = video.classList;
        div.innerHTML = video.innerHTML;
        video.parentNode.replaceChild(div, video);
    }
    $('video').each(function(index, video) {
        $('source', video).last().on('error', showVideoInnerHTML);
    });

    /* Set up donation form elements used across the whole site. */
    $('.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'));
        }
    });

    $('input[name=on0]:radio').on('change', function(event, duration) {
        var $input = $(this);
        var wantShirt = $input.val() == "wantGiftYes";
        var $form = $input.parents('form').last();
        var $tShirtSelector = $('.t-shirt-size-selector', $form);
        $('input', $tShirtSelector).prop('disabled', wantShirt);
        $('input[name=no_shipping]', $form).val(wantShirt ? '2' : '0');
        if (wantShirt) {
            $tShirtSelector.slideDown(duration);
        } else {
            $tShirtSelector.slideUp(duration);
        }
    }).filter(':checked').trigger('change', 0);

    // Open mobile/search menu.
    $('#menu-icon').on('click', function(event) {
        $('#navbar').toggleClass('mobile');
    });
    $('#search-icon').on('click', function(event) {
        $('#navbar').toggleClass('mobile');
        $('#search-query').focus();
    });
});