legislators.html

---
layout: default
title: legislators
permalink: /legislators/
---
{%capture content %}
<div class="container legislators-potential">
    <div class="row">
      <div class="col-md-12">
        <h1>Leaders supporting fundamental reform</h1>
        <form method="get" accept-charset="utf-8" class="md-inputs legislators-filter">
          <input id="search" class="form-control" name="search" placeholder="Search by name or state" type="text" data-list=".js-legislators">
          <div class="form-group">
            <label class="radio-inline" for="filter-value"><strong>Filter:</strong></label>
              <label class="radio-inline" for="leaders">
                <input type="radio" name="filter-value" id="leaders" value="leaders">
                <i class="fa fa-check-square-o"></i>
                Leaders
              </label>
              <label class="radio-inline" for="potential">
                <input type="radio" name="filter-value" id="potential" value="potential" checked="checked">
                <i class="fa fa-minus-circle"></i>
                Potential Leaders
              </label>
              <label class="radio-inline" for="all">
                <input type="radio" name="filter-value" id="all" value="all"> All Legislators
              </label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="show-potential no-bottom-margin">Potential leaders are the <span id="js-potential-count">47</span> nominations from our community that we agree are the key to unlocking the majority we need. <a href="/sign-the-letter/">Learn more about our campaign.</a></p>
      </div>
    </div>
    <div class="row no-gutter legislators-listing">
      <div id="js-legislators" class="js-legislators text-center no-gutter">
        <i class="fa fa-refresh fa-spin fa-4x"></i>
      </div>
    </div>
</div>
{% endcapture %}

{% include sub_layouts/default_layout.html %}

<script id="legislator_template" type="text/html">
{% raw %}

    <div class="col-md-4 col-sm-6 col-xs-6 bottom-margin with-us-{{with_us}}  potential-{{targeted?}}">
      <a href="/legislator/?bioguide_id={{bioguide_id}}" class="pull-left pulled-image"><div class="background-square"></div></a>
        <h3 class="no-top-margin"> {{short_title}}<strong> {{ name }}</strong> </h3>
        <h4>{{leadership}} {{ party }}-{{ state_abbrev }} {{display_district}}</h4>
        <a class="btn btn-targets story-grey" href="/legislator/?bioguide_id={{bioguide_id}}">
          <i class="fa fa-check-square-o"></i>
          <i class="fa fa-minus-circle"></i>
          <i class="fa fa-question-circle"></i>
          Read More
        </a>
      <div class="hidden">
        {{state_name}}
      </div>
    </div>

{% endraw %}
</script>
<script src="/js/lib/jquery.hideseek.min.js" type="text/javascript" charset="utf-8"></script>
<script>
(function ( data ){

  function loadTargetedAction(){
    if(location.hash.length > 1){
      hash_location = location.hash.replace(/^#/,'');
      setListFilter(hash_location);
      $('input[name="filter-value"][value="' + hash_location + '"]').prop('checked', true);
    }
  }

  function setListFilter(filterValue){
    $('.legislators-listing').parent().prop('class', 'container legislators-'+filterValue)
    // will scroll page if using jquery here
    var el = document.getElementById(filterValue);
    var id = el.id;
    el.removeAttribute('id');
    location.hash = filterValue;
    el.setAttribute('id',id);
  }

  function renderAllies(legislator_data, index) {
    var rendered = [],
        bgIMG = 'url(' + legislator_data["image_url"] + ')'
        unknowable_reps = ['DC', 'AS', 'GU', 'VI', 'PR', 'MP'];

    legislator_data.short_title = legislator_data.title === 'Senator' ? 'Sen.' : 'Rep.';
    legislator_data.lower_abbrev = legislator_data.state_abbrev.toLowerCase();
    if(legislator_data.title == 'Senator' || $.inArray(legislator_data.state_abbrev, unknowable_reps) > -1){
      legislator_data.with_us = 'unknowable';
    }

    rendered = ich.legislator_template(legislator_data);
    $(rendered["0"]).find("div.background-square").css("background-image", bgIMG);

    $('#js-legislators').append(rendered);
  }

  function callDataAndTemplate(legislators) {
    var allyObject = [],
      potentialCount;


    legislators.forEach( function ( data, index ){
      allyObject.push( data );
    });

    $('#js-legislators').removeClass('text-center').empty();
    allyObject.map(renderAllies);

    potentialCount = $('.legislators-listing .potential-true').length;
    $('label[for=leaders]').append(' ('+ $('.legislators-listing .with-us-true').length+')');
    $('label[for=all]').append(' ('+ $('.legislators-listing>div>div').length+')');
    $('label[for=potential]').append(' ('+potentialCount+')');
    $('#js-potential-count').text(potentialCount);

    $('#search').hideseek({'nodata': "No legislator matched your search."});
  }

  $(document).ready(function(){
    "use strict";

    loadTargetedAction();

    $('form.legislators-filter .radio-inline input').on('change', function(e){
      e.preventDefault();
      var filterValue = $('form.legislators-filter .radio-inline input:checked').val();
      setListFilter(filterValue);
    });

    var newAllieData = data;
    var outSide = {};

    $.getJSON(newAllieData, callDataAndTemplate);

  });

})( '{{site.services_url}}/legislators.json' );

</script>