Experts@Minnesota widget

The Experts@Minnesota widget is a tiny piece of javascript that can be pasted into any website to add a list of publications or people from Experts@Minnesota.

Styling results

The publication list HTML contains metadata that can be used for styling the results. To customize publication styles, add the desired CSS code to your website's stylesheet or provide them in the HTML document.


// Display publication title in bold
.experts-publications .title {
  font-weight: bold;
}
// Display "Open Access" text next to the icon
.experts-publications .open-access-description {
  display: inline;
}
// Don't bold publication year
.experts-publications .publication-year {
  font-weight: normal;
}

Adding a filter

You can add a text box that filters the listed publications by placing this code after the embed code.

Filtering publications


<!-- INSERT AFTER PUBLICATION CODE -->
<script type="text/javascript">
  document.addEventListener('publicationsDisplayed', function (e) {
    var filter = jQuery('<label>Filter: <input type="text" id="experts-publications-filter" /></label>').insertAfter("#experts-publications h2");
    filter.keyup(function(e) {
      var pattern = new RegExp(jQuery(e.target).val(), "gi");
      jQuery("p.publication").each(function() {
        jQuery(this).toggle(pattern.test(this.innerText));
      });
    });
  }, false);
</script>

Filtering people


<!-- INSERT AFTER PERSON CODE -->
<script type="text/javascript">
  document.addEventListener('peopleDisplayed', function (e) {
    var filter = jQuery('<label>Filter: <input type="text" id="experts-people-filter" /></label>').insertBefore("#experts-people");
    filter.keyup(function(e) {
      var pattern = new RegExp(jQuery(e.target).val(), "gi");
      jQuery("div.experts-person").each(function() {
        jQuery(this).toggle(pattern.test(this.innerText));
      });
    });
  }, false);
</script>

Optional Output Parameters

The location of the widget output and the minimum header level can be both be specified.

Placing output in an existing DOM element

By default the widget places output into <div id='experts-publications'> or <div id='experts-people'>. The location of the widget's output can be specified. Enter the #id of the HTML tag where the output is to be rendered. In the following example, output will be placed in <div id="outputHere"> which should already exist on your page.

  
<script src="https://widget.experts.umn.edu/assets/v2.1/widget.js"></script>
<script type="text/javascript">
  ExpertsWidget.displayPublications({
    organization: "2db56085-27ed-460a-8037-aeef0fd38efa",
    size: 10
  },
  "outputHere"
  );
</script>

Starting with a different HTML Heading tag

The minimum header level can specified. The default minimum heading level is <h2> .

  
<script src="https://widget.experts.umn.edu/assets/v2.1/widget.js"></script>
<script type="text/javascript">
  ExpertsWidget.displayPublications({
    organization: "2db56085-27ed-460a-8037-aeef0fd38efa",
    size: 10
  },
  "outputHere",
  "h1"
  );
</script>