/dpla-discovery

DPLA search widget and suggestion widget.

Primary LanguageJavaScript

DPLA Discovery

DPLA Discovery is a javascript interface to allow for local website presentation of Digital Public Library of America content.

In the current 0.0.1 release, all that is given is a bare-bones search box with only a
handful of options. Future versions are expected to include more advance searching/filtering
and allow for a type of recommendation system without the need for the search box.

Example Site (temporary)

http://static.digitalcommonwealth.org/dpla-discovery

Installation/Setup

Step 1 – Request a DPLA API Key

Please follow the instructions to request a DPLA API key, which you’ll need for step 3.

Step 2A – Local:

1. Clone this repository.

2. Place the JS and CSS files somewhere on your server to link to.

3. Add the following to your file updating the script references:

 <link href="suggest.css" rel="stylesheet" type="text/css">
 <link href="pretty.css" rel="stylesheet" type="text/css">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script src="suggest.js"></script>
 <script src="pretty.js"></script>

Step 2B – Linked (evaluation purposes only!):

Add the following to a file:

 <link href="http://static.digitalcommonwealth.org/dpla-discovery/js/suggest.css" rel="stylesheet" type="text/css">
 <link href="http://static.digitalcommonwealth.org/dpla-discovery/js/pretty.css" rel="stylesheet" type="text/css">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script src="http://static.digitalcommonwealth.org/dpla-discovery/js/suggest.js"></script>
 <script src="http://static.digitalcommonwealth.org/dpla-discovery/js/pretty.js"></script>

Step 3:

Add the following snippet of code referring to your search box. Insert the API key you received in Step 1 between quotes in place of your DPLA key.

 <script>
    $(function() {
      $("#mySearchBox").suggest({
        api_key: "your DPLA key"
      })
      .bind("fb-select", function(e, data) {
         window.open(data.isShownAt, '_blank');
         //To use same window, do window.open(data.isShownAt, '_self');
      });
    });
 </script>

Step 4 (Accessibility Fallback Support)

Setup your page something like the following:

 <form method="get" action="http://dp.la/search">
   <input type="text" name="q" id="mySearchBox" />
   <noscript><input type="submit" name="submit" /></noscript>
 </form>

Options and Examples

For options (such as page size adjustment or limiting to your institution)
and further examples, please see the index.html file along with files under the “test” directory.

Screenshots

Adding soon.

Known Alpha Bugs

  • Basic “Show More” functionality implemented. Still a tad buggy but works in the most basic case.

Contributing/Suggestions

More coming soon! For now, feel free to fork and submit improvements. In addition, feel
free to contact me with what might make this usable for your institute at
sanderson@bpl.org.

Acknowledgements

Contributors are located in the file CONTRIBUTORS.md

Based on: https://developers.google.com/freebase/v1/search-widget
(Example: http://suggest-examples.freebaseapps.com/example1)

Source code for base app from Freebase
https://code.google.com/p/freebase-site/source/browse/#svn%2Ftrunk%2Fwww%2Flib%2Fsuggest