Skip to content

Interactive publications lists with JavaScript + Bibtex

Notifications You must be signed in to change notification settings

rpng/bib-publication-list

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

99 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Differences from Original

  • Commented source code
  • Updated libraries
  • Nicer popup
  • Different styling (white base, centered)
  • Disable search bar by default
  • Cleaned source code
  • Added future option (reading groups)
  • Closer to IEEE format
  • Better handling of missing entries

Getting Started

First, load the required JS and CSS files:

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bib-list.min.js"></script>
<link href="assets/css/bib-list.min.css" rel="stylesheet" type="text/css" />

All you need to do is to include the BibTeX into an HTML page and tell the script to turn it into a sortable and searchable table. For example:

<table id="pubTable" class="display"></table>
<pre id="bibtex">
@article{Karavirta:JVLCTaxonomy,
   title = {A comprehensive taxonomy of algorithm animation languages},
   journal = {Journal of Visual Languages \& Computing},
   volume = {20},
   number = {1},
   pages = {1--22},
   year = {2010},
   issn = {1045-926X},
   doi = {DOI: 10.1016/j.jvlc.2009.09.001},
   read_date = {2015-11-13}, // This is optional
   author = {Ville Karavirta and Ari Korhonen and Lauri Malmi and Thomas Naps}
}
</pre>

Finally, the bib-publication-list needs to know the input data element and the output table. So, one line of JavaScript. Alternatively, the bibtex can be loaded from a file. Personally I prefer including it in the HTML, though. This way, browsers without JavaScript enabled get at least to see the bibtex instead of a blank page. This causes an ugly-looking flash of unstyled content, though.

bibtexify("#bibtex", "pubTable");
// Or
bibtexify("example-biblist.bib", "pubTable");

If you want to fix the flash of unstyled content, you can hide the #bibtex element and make it visible when JavaScript is disabled. To do that, add:

#bibtex { display: none; } // to css
<noscript><style>#bibtex { display: block; }</style></noscript> // to html

Configuration Options

The bibtexify function accepts an optional third parameter for configuration options. The full list can be seen here with their defaults. These options include:

visualizationA boolean to control addition of the visualization. Defaults to true.
futureIf set to true it will read the `read_date` from the bibtex entry in the format `{YYYY-MM-DD}`. This will be entered in the first column and is great for reading group due dates etc. It is recommended that the visualization is turned off. `{TBD}` can be used to show that the date has yet to be determined. Defaults to false.
tweetTwitter username to add Tweet links to bib items with a url field.
sortingControl the default sorting of the list. Defaults to `[[0, "desc"], [1, "desc"]]`. See (http://datatables.net/api#fnSort) for details on formatting.
searchingIf true this will display a search bar for users to search for publications. By default this is disabled
max_yearHow many years should be displayed in the bar graph visualization. This helps the page not look cluttered. By default this is 10 years
max_paginationHow elements should be listed on pagination page. By default this is 20 entries.
defaultYearEntries without a year will use this as year. Defaults to "To Appear".

Building from Source

There is a Jakefile for building the combined and minified versions with Jake and a Makefile for building with make. Currently uses the yuicompressor tool to minify both the css and js and output that into the build folder. (note: the jake file has not been updated to new system)

Credits

This code uses some great libraries: jQuery, DataTables, Popup.js, and JavaScript BibTeX Parser.

About

Interactive publications lists with JavaScript + Bibtex

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.8%
  • CSS 2.6%
  • HTML 2.2%
  • TeX 1.3%
  • Makefile 0.1%