Difference between revisions of "Widget:IIP-Nav"

From Open Energy Information

Line 227: Line 227:
 
   background: #EFAC27;
 
   background: #EFAC27;
 
}
 
}
 +
/*permitting & regulations page*/
 
.pap-table.table-striped tr:first-of-type th {
 
.pap-table.table-striped tr:first-of-type th {
 +
  position: -webkit-sticky;
 
   position: sticky;
 
   position: sticky;
 
   top: 0;
 
   top: 0;
 +
  color: #fff;
 +
  font-size: 18px;
 
   background-color: #176082;
 
   background-color: #176082;
 +
  z-index: 1;
 +
}
 +
.pap-table th .btn {
 +
  padding: 0;
 
   color: #fff;
 
   color: #fff;
 +
  font-size: 12px;
 +
}
 +
.pap-table th .filter {
 +
  color: #EFAC27;
 +
  margin-left: 8px;
 +
  letter-spacing: 0.8px;
 +
}
 +
.pap-table .top-anchor .btn {
 +
  display: none;
 +
  float: right;
 +
}
 +
.pap-table tr.topic-row h4 {
 +
  padding: 0;
 
}
 
}
.pap-table tr.topic-row>td {
+
.pap-table.table tr.topic-row>td {
 +
  border-top: none;
 
   vertical-align: middle;
 
   vertical-align: middle;
 +
}
 +
.pap-table .topic-bg-grey {
 +
  background: #eee;
 +
}
 +
.pap-table .topic-bg-white {
 +
  background: #fff;
 +
}
 +
tr[data-agency] td:first-of-type {
 +
  position: relative;
 +
  border-top-color: transparent;
 +
  vertical-align: middle;
 +
}
 +
tr[data-agency]:hover td:first-of-type .btn {
 +
  color: #fff;
 +
  background: #176082;
 +
}
 +
tr[data-agency]:hover td:first-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  right: 0;
 +
  top: -1px;
 +
  width: 4px;
 +
  height: calc(100% + 2px);
 +
}
 +
tr.topic-row[data-topic="land-access"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #d4a232;
 +
}
 +
tr[data-topic="land-access"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #d4a232;
 +
}
 +
tr[data-topic="land-access"][data-agency]:hover td:first-of-type::after {
 +
  background: #d4a232;
 +
}
 +
tr.topic-row[data-topic="siting-regulation"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #B9993D;
 +
}
 +
tr[data-topic="siting-regulation"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #B9993D;
 +
}
 +
tr[data-topic="siting-regulation"][data-agency]:hover td:first-of-type::after {
 +
  background: #B9993D;
 +
}
 +
tr.topic-row[data-topic="environmental-review"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #9E8F49;
 +
}
 +
tr[data-topic="environmental-review"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #9E8F49;
 +
}
 +
tr[data-topic="environmental-review"][data-agency]:hover td:first-of-type::after {
 +
  background: #9E8F49;
 +
}
 +
tr.topic-row[data-topic="cultural-resources"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #838654;
 +
}
 +
tr[data-topic="cultural-resources"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #838654;
 +
}
 +
tr[data-topic="cultural-resources"][data-agency]:hover td:first-of-type::after {
 +
  background: #838654;
 +
}
 +
tr.topic-row[data-topic="biological-resources"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #687C5F;
 +
}
 +
tr[data-topic="biological-resources"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #687C5F;
 +
}
 +
tr[data-topic="biological-resources"][data-agency]:hover td:first-of-type::after {
 +
  background: #687C5F;
 +
}
 +
tr.topic-row[data-topic="water-quality"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #4D736B;
 +
}
 +
tr[data-topic="water-quality"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #4D736B;
 +
}
 +
tr[data-topic="water-quality"][data-agency]:hover td:first-of-type::after {
 +
  background: #4D736B;
 +
}
 +
tr.topic-row[data-topic="aesthetic-resources"] td:last-of-type::after {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: -1px;
 +
  left: 0;
 +
  height: 0px;
 +
  width: 100%;
 +
  border-bottom: solid 1px #326976;
 +
}
 +
tr[data-topic="aesthetic-resources"][data-agency] td:first-of-type {
 +
  border-right: solid 1px #326976;
 +
}
 +
tr[data-topic="aesthetic-resources"][data-agency]:hover td:first-of-type::after {
 +
  background: #326976;
 +
}
 +
tr.space {
 +
  height: 80px;
 +
}
 +
tr.space td {
 +
  position: -webkit-sticky;
 +
  position: sticky;
 +
  top: 42px;
 +
  background: #fff;
 +
}
 +
tr.space:hover td {
 +
  background: #fff;
 +
}
 +
tr.space:nth-of-type(1n+0){
 +
  z-index: 1;
 +
}
 +
td hr {
 +
  margin: 4px;
 +
}
 +
tr.stack1 td {
 +
  z-index: 1;
 +
}
 +
tr.stack2 td {
 +
  z-index: 2;
 +
}
 +
tr.stack3 td {
 +
  z-index: 3;
 +
}
 +
tr.stack4 td {
 +
  z-index: 4;
 +
}
 +
tr.stack5 td {
 +
  z-index: 5;
 +
}
 +
tr.stack6 td {
 +
  z-index: 6;
 +
}
 +
tr.stack7 td {
 +
  z-index: 7;
 +
}
 +
@media only screen and (min-width: 768px) {
 +
  tr.topic-row td {
 +
    position: -webkit-sticky;
 +
    position: sticky;
 +
    height: 108px;
 +
    top: 42px;
 +
  }
 +
  tr[data-agency] td:nth-child(2) {
 +
    min-width: 200px;
 +
  }
 +
}
 +
@media only screen and (min-width: 1200px) {
 +
  tr.topic-row td {
 +
    position: -webkit-sticky;
 +
    position: sticky;
 +
    height: 96px;
 +
    top: 42px;
 +
  }
 +
  tr[data-agency] td:nth-child(3) {
 +
    min-width: 200px;
 +
  }
 +
}
 +
.filter-modal {
 +
  background: rgba(0, 0, 0, 0.5);
 +
}
 +
.filter-modal .modal-header {
 +
  background: #EFAC27;
 +
}
 +
.filter-modal .modal-header h3 {
 +
  float: left;
 +
  font-weight: bold;
 +
  margin: 0;
 +
}
 +
.filter-modal li {
 +
  margin: 12px 0;
 +
  font-size: larger;
 +
  list-style: none;
 +
}
 +
.filter-modal li::before {
 +
  display: block;
 +
  content: "";
 +
  border: solid 3px;
 +
  height: 18px;
 +
  width: 18px;
 +
  float: left;
 +
  margin: 3px 3px 0 5px;
 +
  color: #176082;
 +
}
 +
.filter-modal li.active::before {
 +
  color: #EFAC27;
 +
  background: #EFAC27;
 
}
 
}
  
Line 289: Line 530:
 
     }
 
     }
 
   });
 
   });
 +
}
 +
if(iip === '/wiki/IIP/Permitting_and_Regulations'){
 +
  $('html').css('scroll-behavior','smooth');
 +
  activeTopics = [];
 +
  activeAgencies = [];
 +
 +
  //find and set location of table header
 +
  $(document).ready(function(){
 +
    //add search input
 +
    $('.search-container').html('<input class="form-control" id="approval-search" type="text" placeholder="filter by keyword">');
 +
 +
    //enable filters
 +
    $('.filter-topic').parent().attr('href','javascript:void(0);').attr('onClick','showTopicFilters()');
 +
    $('.filter-agency').parent().attr('href','javascript:void(0);').attr('onClick','showAgencyFilters()');
 +
    tTop = $('.top-anchor').offset().top;
 +
 +
    $(document).scroll(function(){
 +
      if(document.scrollingElement.scrollTop > tTop){
 +
        $('.top-anchor .btn').show();
 +
      } else {
 +
        $('.top-anchor .btn').hide();
 +
      }
 +
    });
 +
 +
    //text search
 +
    $('#approval-search').on('keyup',function(){
 +
      var value = $(this).val().toLowerCase();
 +
      $('#approvals *').filter(function() {
 +
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
 +
        $(this).parent('tr').find('*').show();
 +
        if($(this).is(':visible')){
 +
          searchTopic = $(this).parent('tr').attr('data-topic');
 +
          $('tr.topic-row[data-topic="'+searchTopic+'"]').show();
 +
          $('tr.topic-row[data-topic="'+searchTopic+'"]').find('*').show();
 +
        }
 +
      });
 +
      $('.pap-table th:first-of-type').parent('tr').show();
 +
      $('.pap-table th:first-of-type').parent('tr').find('*').show();
 +
      applySpacing();
 +
      $('.filter-modal li.active').removeClass('active');
 +
    });
 +
 +
    //configure modals
 +
    $('.filter-modal span[data-dismiss="modal"]').parent().attr('href','javascript:void(0);').attr('onClick','hideFilters()').attr('data-dismiss','modal').attr('type','button');
 +
    $('.filter-modal.select-topics li a').attr('href','javascript:void(0);').attr('onClick','applyTopics.call(this,event)');
 +
    $('.filter-modal.select-agencies li a').attr('href','javascript:void(0);').attr('onClick','applyAgencies.call(this,event)');
 +
 +
  });
 +
  function showTopicFilters(){
 +
    $('.filter-modal.select-topics').show();
 +
  }
 +
  function showAgencyFilters(){
 +
    $('.filter-modal.select-agencies').show();
 +
  }
 +
  function hideFilters(){
 +
    $('.filter-modal').hide();
 +
  }
 +
  function applyTopics(event){
 +
    $(this).parent('li').toggleClass('active');
 +
    activeTopics = [];
 +
    $('li.active[data-topic]').each(function(){
 +
      activeTopics.push($(this).attr('data-topic'));
 +
    });
 +
    $('#approvals tr[data-topic]').each(function(){
 +
      rowTopic = $(this).attr('data-topic');
 +
      if(activeTopics.indexOf(rowTopic) == -1){
 +
        $(this).removeClass('filteredTopic');
 +
      } else {
 +
        $(this).addClass('filteredTopic');
 +
      }
 +
    });
 +
    if(activeTopics.length == 0){
 +
      $('#approvals tr[data-topic]').removeClass('filteredTopic');
 +
    }
 +
    showRows();
 +
    applySpacing();
 +
    $('#approval-search').val("");
 +
  }
 +
  function applyAgencies(){
 +
    $(this).parent('li').toggleClass('active');
 +
    activeAgencies = [];
 +
    $('li.active[data-agency]').each(function(){
 +
      activeAgencies.push($(this).attr('data-agency'));
 +
    });
 +
    //$('#approvals tr[data-topic]:visible:not(.topic-row)').each(function(){
 +
    $('#approvals tr[data-agency]').each(function(){
 +
      rowAgency = $(this).attr('data-agency');
 +
      if(rowAgency.match(activeAgencies) == null){
 +
        $(this).removeClass('filteredAgency');
 +
      } else {
 +
        $(this).addClass('filteredAgency');
 +
      }
 +
    });
 +
    if(activeAgencies.length == 0){
 +
      $('#approvals tr[data-agency]').removeClass('filteredAgency');
 +
    }
 +
    showRows();
 +
    applySpacing();
 +
    $('#approval-search').val("");
 +
  }
 +
  function showRows(){
 +
    if(activeAgencies.length == 0 && activeTopics.length == 0){
 +
      $('#approvals tr').show();
 +
      return;
 +
    }
 +
    if(activeTopics.length > 0 && activeAgencies.length == 0){
 +
      $('#approvals tr[data-topic]').each(function(){
 +
        if($(this).hasClass('filteredTopic')){
 +
          $(this).show();
 +
        } else {
 +
          $(this).hide();
 +
        }
 +
      });
 +
    }
 +
    if(activeAgencies.length > 0 && activeTopics.length == 0){
 +
      $('#approvals tr[data-agency]').each(function(){
 +
        if($(this).hasClass('filteredAgency')){
 +
          $(this).show();
 +
        } else {
 +
          $(this).hide();
 +
        }
 +
      });
 +
      //function was here
 +
    }
 +
    if(activeTopics.length > 0 && activeAgencies.length > 0){
 +
      $('#approvals tr[data-topic]').each(function(){
 +
        if($(this).hasClass('filteredTopic') && $(this).hasClass('filteredAgency')){
 +
          $(this).show();
 +
        } else {
 +
          $(this).hide();
 +
        }
 +
      });
 +
    }
 +
    $('#approvals tr.topic-row').each(function(){
 +
      rowTopic = $(this).attr('data-topic');
 +
      if($('tr[data-topic="'+rowTopic+'"]:not(.topic-row):visible').length == 0){
 +
        $(this).hide();
 +
      } else {
 +
        $(this).show();
 +
      }
 +
    });
 +
  }
 +
  function applySpacing(){
 +
    $('tr.space').each(function(){
 +
      if($(this).prevUntil('.topic-row').is(':visible')){
 +
        $(this).show();
 +
      } else {
 +
        $(this).hide();
 +
      }
 +
    });
 +
  }
 
}
 
}
 
</script>
 
</script>
 
</includeonly>
 
</includeonly>

Revision as of 22:17, 30 August 2019

This widget helps with IIP content.

{{#Widget:IIP-Nav}}