tabbit

Wed Apr 08 2020
Copied to clipboard! Copy reply
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
  #content-column .content-inner {
  	margin-left: 0;
  }
  #content .search-results-header,
  #block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku h2.block-title{
  	display:none;
  }
  #block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku .item-list-facetapi-facetapi-checkbox-links {
  	overflow-x: auto;
    position: relative;
  }
  #block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype {
    padding: 0;
    margin: 0.5em 0;
  }
  #block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype li {
  	display: inline-block;
    padding: 0.75em 0 0.5em;
    font-size: 0.75em;
  }
  #block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype li.facetapi-active {
  	border-bottom:2px solid #00457c;
  }
  #block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype li input {
    display:none;
  }
  span.material-icons {
  	vertical-align: bottom;
    margin-right: 0.25em;
    color: #00457c;
    font-size:1.5em;
  }
</style>
<script>
  //move elements
  jQuery('ol.apachesolr_search-results').before(jQuery('#block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku'));
  jQuery('.region-sidebar-first').remove();
  
  var ulWidth = 0;
  jQuery('#block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype li').each(function(i, li) {
    //calculate max necessary <ul> width so we can make tabs scrollable
    ulWidth += jQuery(li).outerWidth(true) + 20;
    
    //set active state on tab
    if(jQuery('a', li).hasClass('facetapi-active')) {
      jQuery(li).addClass('facetapi-active');
    }
    
    //Extract tab title
    if(jQuery(li).hasClass('facetapi-active')) {
      var title = jQuery(li).clone().children().remove().end().text();
    } else {
      var title = jQuery('a', li).clone().children().remove().end().text();
    }
    
    //Extract results count
    var resultsCount = title.substring(title.indexOf('(') + 1, title.indexOf(')'));
    jQuery(li).attr('data-facet-results-count', resultsCount);
    
    //Remove parenthesis around count
    var noParens = title.replace("(", "");
    noParens = noParens.replace(")", "");
    if(jQuery(li).hasClass('facetapi-active')) {
      jQuery(li).text(noParens);
    } else {
      jQuery('a', li).text(noParens);
    }
    
    //add unique CSS ID to tab for icons
    title = title.substring(0, title.indexOf(' ('));
    jQuery(li).attr('id', clean_css_identifier(title));
    
    //Extract facet content type
    var facetContentType = extractFacetContentTypeFromHref(jQuery('a', li).attr('href'));
    if (facetContentType) {
      jQuery(li).attr('data-facet-content-type', facetContentType);
    }
    
  });
  
  //Create 'All' tab
  var totalResultsCount = 0;
  var tabSelected = false;
  jQuery('#block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype li').each(function(i, li) {
  	totalResultsCount += parseInt(jQuery(li).attr('data-facet-results-count'));
    if(jQuery(li).hasClass('facetapi-active')) {
      tabSelected = true;
    }
  });
  jQuery('#block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype')
    .prepend('<li id="all"><a href="#"><span class="material-icons">apps</span>All ' + totalResultsCount + '</a></li>');
  ulWidth += jQuery('li#all').outerWidth(true);
  if (!tabSelected) {
  	jQuery('li#all').addClass('facetapi-active');
    jQuery('li#all a').replaceWith('<span>' + jQuery('li#all a').html() + '</span>');
  }
  
  //Set horizontal scroll width
  jQuery('#block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype').width(ulWidth);
  
  //Intercept the facet links, deconstruct the href and build a new link that only allows one tab to be selected at a time
  jQuery('#block-facetapi-hlhihqx1kut02orqqi7s0whoidx5hhku ul.facetapi-facet-fctcontenttype li a').click(function(a){
    var currentQueryParams = getQueryParams();
    var buildQueryParams = {};
    jQuery.each(currentQueryParams, function(param, value){
      if(param.indexOf('f%5') < 0) {
      	buildQueryParams[param] = value;
      }
    });
    if(jQuery(this).parent('li').attr('data-facet-content-type')){
      buildQueryParams['f[0]'] = 'fctContentType:'+ jQuery(this).parent('li').attr('data-facet-content-type');
    }
    window.location.href = window.location.origin + window.location.pathname + '?' + jQuery.param(buildQueryParams);
    return false;
  })
  
  //Add icons
  if(jQuery('#guidelines').hasClass('facetapi-active')) {
    jQuery('#guidelines').prepend('<span class="material-icons">description</span>');
  } else {
    jQuery('#guidelines a').prepend('<span class="material-icons">description</span>');
  }
  
  if(jQuery('#abstractsmeeting-videos').hasClass('facetapi-active')) {
    jQuery('#abstractsmeeting-videos').prepend('<span class="material-icons">video_library</span>');
  } else {
    jQuery('#abstractsmeeting-videos a').prepend('<span class="material-icons">video_library</span>');
  }
  
  if(jQuery('#funding-opportunity').hasClass('facetapi-active')) {
    jQuery('#funding-opportunity').prepend('<span class="material-icons">monetization_on</span>');
  } else {
    jQuery('#funding-opportunity a').prepend('<span class="material-icons">monetization_on</span>');
  }

  if(jQuery('#general-information').hasClass('facetapi-active')) {
    jQuery('#general-information').prepend('<span class="material-icons">info</span>');
  } else {
    jQuery('#general-information a').prepend('<span class="material-icons">info</span>');
  }

  if(jQuery('#member-blogs').hasClass('facetapi-active')) {
    jQuery('#member-blogs').prepend('<span class="material-icons">edit</span>');
  } else {
    jQuery('#member-blogs a').prepend('<span class="material-icons">edit</span>');
  }

  if(jQuery('#news').hasClass('facetapi-active')) {
    jQuery('#news').prepend('<span class="material-icons">mail</span>');
  } else {
    jQuery('#news a').prepend('<span class="material-icons">mail</span>');
  }

  function clean_css_identifier(id) {
    id = id.toLowerCase();
    id = id.replace(" ", "-").replace("_", "-").replace("[", "-").replace("]", "");

    // As defined in http://www.w3.org/TR/html4/types.html#type-name, HTML IDs can
    // only contain letters, digits ([0-9]), hyphens ("-"), underscores ("_"),
    // colons (":"), and periods ("."). We strip out any character not in that
    // list. Note that the CSS spec doesn't allow colons or periods in identifiers
    // (http://www.w3.org/TR/CSS21/syndata.html#characters), so we strip those two
    // characters as well.
    id = id.replace(/[^A-Za-z0-9\-_]+/gi, '', id);

    // Removing multiple consecutive hyphens.
    id = id.replace(/\-+/gi, '-', id);

    return id;
  };
  
  function getQueryParams() {
    // initialize an empty object
    let result = {};
    // get URL query string
    let params = window.location.search;
    // remove the '?' character
    params = params.substr(1);
    let queryParamArray = params.split('&');
    // iterate over parameter array
    queryParamArray.forEach(function(queryParam) {
      // split the query parameter over '='
      let item = queryParam.split("=");
      result[item[0]] = decodeURIComponent(item[1]);
    });
    // return result object
    return result;
  }
  
  function extractFacetContentTypeFromHref(href) {
    if (href) {
      var contentType = href.substr(href.indexOf('fctContentType'));
      contentType = contentType.split("fctContentType");
      contentType = contentType.pop();
      contentType = contentType.substr(3);
      contentType = decodeURIComponent(contentType);
      return contentType;
    } else {
      return null;
    }
  }
</script>