Jump To …

home.js

$(function(){

  'use strict';

  var map,
      video;

Circle nav on the homepage.

  $('.homepage .hero a').on( 'click', function( ev ){

    var target = $( this ).attr('href');
    ev.preventDefault();
    $('html, body').animate({ scrollTop: $( target ).position().top }, 200);

  });

Change the underlying data link for graph when a different radio is selected

  $('#map_radios').on('change', function( ev ){
    var radio = $(this).find('input[type=radio]:checked');
    if( radio.val() === 'r' ){
      $( '#map-title' ).find('a.underlying').attr('href', 'explore#!/as_of_year=2014,2013,2012&property_type=1,2&owner_occupancy=1&action_taken=1&loan_purpose=3&lien_status=1&select=state_name,county_name,as_of_year,count&section=summary');
    } else {
      $( '#map-title' ).find('a.underlying').attr('href', 'explore#!/as_of_year=2014,2013,2012&property_type=1,2&owner_occupancy=1&action_taken=1&loan_purpose=1&lien_status=1&select=state_name,county_name,as_of_year,count&section=summary');
    }
  });

Map toggling on the homepage.

  map = (function(){

    var map = {};

    L.mapbox.accessToken = 'pk.eyJ1IjoiY29udG8iLCJhIjoiYWY0ODdmZTM2N2M1NTE4YmVkNTdkZWI1ZTcxNWRmNTgifQ.ZXAoSbSp6NTPLQ8zP0lQ2Q';

    map.base = L.mapbox.map('map', 'cfpb.hmda_blank').setView([39.54, -97.87], 4);
    
    map.layers = {
      r2013: L.mapbox.tileLayer('cfpb.hmda_r_o_12_13'),
      r2014: L.mapbox.tileLayer('cfpb.hmda_r_o_13_14'),
      p2013: L.mapbox.tileLayer('cfpb.hmda_p_o_12_13'),
      p2014: L.mapbox.tileLayer('cfpb.hmda_p_o_13_14')
    };

Add each layer and immediately hide it.

    _( map.layers ).forEach( function( layer ) {
      map.base.addLayer( layer );
      layer.setOpacity(0);
    });

Un-hide the top layer.

    map.layers.p2014.setOpacity(1);

    $('#map .controls input').on( 'change', function( ev ){
      $( this ).parent().addClass('selected').siblings().removeClass('selected');
      map.showLayer();
    });

    map.getSelectedLayer = function() {

      var type = $('#map .type input:checked').val(),
          year = $('#map .year input:checked').val();
      return type + year;

    };

    map.showLayer = function() {

      var selectedLayer = map.getSelectedLayer(),
          otherLayers = _.omit( map.layers, selectedLayer );

      function fadeIn( layer, cb ) {

        var opacity = 0;

Place the selected layer on top.

        layer.setZIndex(1);
        _( otherLayers ).forEach( function( otherLayer ) {
          otherLayer.setZIndex(0);
        });

        var timer = setInterval(function() {
          if ( opacity >= 1 ) {
            clearInterval(timer);
            cb();
          }
          opacity += 0.02;
          layer.setOpacity(opacity);
        }, 10);

      }

      fadeIn(map.layers[ selectedLayer ], function() {
        _( otherLayers ).forEach( function( layer ) {
          layer.setOpacity(0);
        });
      });
      
    };

    map.fixLegend = function() {

      $('#map .my-legend .legend-title').html('Percentage Change');
      $('#map .my-legend .legend-source').hide();

    };

    map.init = function() {

      this.base.scrollWheelZoom.disable();

      $('#map-title').removeClass('hidden');

Fix the darn legend.

      this.base.on( 'ready', function(){

        map.fixLegend();
        $('#map-title').removeClass('hidden');

      }.bind( this ));

      $('#map .help').tooltip({
        placement: 'right',
        container: 'body',
        title: function getTooltipTitle(){
          return $( this ).next('.help-text').html();
        }
      }).on('shown.bs.tooltip', function () {
        $('.tooltip').css({
          'margin-left': '15px',
          'margin-top': '6px',
          'width': '250px'
        });
      }).on('hide.bs.tooltip', function () {
        $('.tooltip').css({
          'margin-left': '0',
          'margin-top': '0',
          'width': 'auto'
        });
      });

IE8 doesn't hear the map 'ready' event so here's a setinterval hack.

      if ( $('body').hasClass('lt-ie9') ) {
        var checkForLegend = setInterval( function(){
          if ( $('#map .my-legend .legend-source').length ) {
            map.fixLegend();
            clearInterval( checkForLegend );
          }
        }, 1000);
      }

    };

    map.init();

  })();

Methods to open and close the youtube video overlay on the homepage.

  video = (function(){

    var $vid = $('#youtube'),
        $embed = $('<iframe width="100%" height="100%" src="//www.youtube.com/embed/wR9Tsdqgmuk?rel=0&version=3&enablejsapi=1&autoplay=1" frameborder="0" allowfullscreen></iframe>'),
        $exit = $('#youtube .exit'),
        pos = $('.video').position().top + ( $('section.video').height() / 2 );

    return {

      isOpen: false,

      init: function() {

      },

      open: function(){
        $vid.css( 'top', pos + 'px' )
            .removeClass('hidden')
            .animate({ 'height': '100%', 'margin-top': -pos + 'px' }, 300, 'swing', function(){
              setTimeout( function(){
                $vid.append( $embed );
                $exit.show();
                if( onYouTubeIframeAPIReady() ){
                  onYouTubeIframeAPIReady();
                }
              }, 500 );
            });
        $embed.css( 'height', $(window).height() - 60 + 'px')
              .css( 'width', $(window).width() - 60 + 'px');
        this.isOpen = true;
      },

      close: function(){
        $embed.remove();
        $exit.hide();
        $vid.addClass('closing');
        setTimeout( function(){
          $vid.css({ 'height': 0, 'margin-top': 0 }).addClass('hidden').removeClass('closing');
        }, 500 );
        this.isOpen = false;
      }

    };
  })();

Remove the video embed for now.

  video.init();

Video overlay.

  $('a.launch-youtube').on( 'click', function( ev ){

    ev.preventDefault();
    video.open();

  });

Autoplay video if requested.

  if ( window.location.hash && window.location.hash === '#video' ) {
    video.open();
  }

Close video overlay

  $( document ).on( 'keyup', function( ev ) {

    if ( ev.which === 27 ) {
      ev.preventDefault();
      video.close();
    }

  });

Close video overlay

  $( 'section.video .exit, #youtube' ).on( 'click', function( ev ) {

      ev.preventDefault();

      if ( video.isOpen ) {
        video.close();
      }

  });

});