Difference between revisions of "Umlaut partial html API javascript helper"

From Code4Lib
Jump to: navigation, search
(cPeWjsddmX)
(Saved back to the last good version, wiping out spam revisions)
Line 1: Line 1:
Hey! Great Site!, http://www.nj.com/forums/profile.ssf?nickname=freepornmo0 free porn movie3821, http://www.nj.com/forums/profile.ssf?nickname=freelesbia0 free lesbian porn, nufj, http://www.mlive.com/forums/profile.ssf?nickname=freeonline22 free online porn, 50348, http://www.nj.com/forums/profile.ssf?nickname=freeanimal3 free animal porn,  uzyav, http://www.bebo.com/LorettaC493 naturist nudist galleries, 168, http://www.mlive.com/forums/profile.ssf?nickname=freepornmo3 free porn movie, 555, http://www.nj.com/forums/profile.ssf?nickname=freefullle34 free full length porn videos, 84470, http://www.mlive.com/forums/profile.ssf?nickname=freefullle55 free full length porn movies, rdxpmo, http://www.nj.com/forums/profile.ssf?nickname=freeblackp4 free black porn,  lelb, http://www.bebo.com/AlthaE nudity in movies,  :-(, http://www.nj.com/forums/profile.ssf?nickname=freepornga7 free porn galleries,  gzdvqp, http://www.nj.com/forums/profile.ssf?nickname=freehardco22 free hardcore porn,  gziryx, http://www.nj.com/forums/profile.ssf?nickname=freeporndo1 free porn downloads,  972, http://www.mlive.com/forums/profile.ssf?nickname=freeamatur5 free amature porn55685, http://www.mlive.com/forums/profile.ssf?nickname=freepornga6 free porn games,  9116, http://www.bebo.com/SharonB7139 frontal nudity female beauty, 8-O, http://www.nj.com/forums/profile.ssf?nickname=freehomema0 free homemade porn,  188221, http://www.mlive.com/forums/profile.ssf?nickname=freecartoo9 free cartoon porn,  djg, http://www.nj.com/forums/profile.ssf?nickname=freeamatur4 free amature porn,  hye, http://www.mlive.com/forums/profile.ssf?nickname=freepornvi82 free porn video,  =-OOO, http://www.mlive.com/forums/profile.ssf?nickname=freeteenpo8 free teen porn,  1079, http://www.nj.com/forums/profile.ssf?nickname=freemilfpo4 free milf porn,  790, http://www.nj.com/forums/profile.ssf?nickname=freepornmo7 free porn movies,  bhvuo, http://www.nj.com/forums/profile.ssf?nickname=freeporntu3 free porn tube, >:-))), http://www.bebo.com/BarbaraK384 underage nudity,  331,
+
If you want to include Umlaut-generated HTML directly on a third party page via javascript, there is a javascript helper script to make that very easy. This helper uses the [[Umlaut partial html API]], but does everything for you. The helper will update your divs, and keep polling Umlaut for new results, continuing to re-update your divs until Umlaut is finished.   How often it polls is configured by application config 'poll_wait_seconds', which defaults to 4 seconds.  
 +
 
 +
== Overview ==
 +
 
 +
You need to specify your Umlaut base URL in a global javascript variable called umlaut_base. This is not your link resolver base url which for Umlaut ends in /resolve, but the actual Umlaut application base URL, which should be the same, without the /resolveAt JHU, it's "http://findit.library.jhu.edu".
 +
 
 +
You also need to put a URL-formatted (KEV) OpenURL context object in a global js variable called umlaut_openurl_kev_co.
 +
 
 +
You then specify mappings from Umlaut html sections to HTML divs on your page in global js variable called umlaut_section_map containing a hash. Umlaut html sections are configured in Umlaut in the "partial_html_map" configuration param, which by default is set to the "bg_update_map" config params :divs key. To see the sections in a default Umlaut installation, see: [http://umlaut.rubyforge.org/svn/trunk/config/environment.rb environment.rb in svn], look for bg_update_map. The :divs key of the hash there is an array of hashes, each individual hash has a :div_id key that corresponds to the html_sections id in this api response. For Umlaut developers, the :partial key tells you what Rails partial is used to generate this section.  
 +
 
 +
You can also optionally use some javascript callbacks to perform behavior after or during loading. In the following example, we'll demo using a javascript callback to only show a div for search_inside functionality if there are search_inside tools provided.  
 +
 
 +
The umlaut_embed.js script will check if the javascript Prototype library is loaded into the host page, and load it if not. Among other things, this means you can use Prototype in your callbacks.
 +
 
 +
The html loaded will sometimes include a "spinner" with a message "loading more", if the content is not yet loaded.
 +
 
 +
An example is best:
 +
 
 +
== Example ==
 +
 
 +
<pre>
 +
 
 +
  <H1>Here is an article page. </h1>
 +
 
 +
  <p>We're looking up Cytoplasmic Control of nuclear behavior by Masui. Of course normally this
 +
    would be dynamically generated, not in static html like this.<p>
 +
 
 +
  <!-- umlaut full text will be loaded here. You might want to include some initial content
 +
      here for browsers without javascript. For browsers with javascript, this will be overwritten.-->
 +
  <div id="my_fulltext">
 +
    <a href="http://umlaut.university.edu/resolve?url_ver=Z39.88-2004&rft_val_fmt=info:ofi/fmt:kev:mtx:journal&rft_id=info:doi/10.1002/jez.1401770202&rfr_id=info:sid/university.edu:myapplication&rft.genre=article&rft.jtitle=J.%20Exp.%20Zool&rft.date=1971&rft.atitle=Cytoplasmic%20control%20of%20nuclear%20behavior&rft.aulast=Masui">
 +
        Link to umlaut
 +
      </a>
 +
  </div>
 +
 
 +
  <!-- we hide this div to start out with, our js callback later
 +
      will show it there is full text. But we avoid a "spinner" showing up
 +
      here before everything is fully loaded. -->
 +
  <div id="my_search_inside" style="display:none;"></div>
 +
 
 +
  <div id="my_cover"></div>
 +
 
 +
  <div id="my_see_also"</div>
 +
 
 +
  <div id="my_excerpts"></div>
 +
 
 +
 
 +
  <!-- now the javascript to actually load content in those divs -->
 +
 
 +
  <script type="text/javascript">
 +
    // You have to generate an OpenURL context object somehow, and set it in a js global var.  
 +
    // Normally this would be generated dynamically, not static HTML like this, of course.
 +
    // You may want to include a rfr_id to identify your application as a source, demo below.  
 +
 
 +
    umlaut_openurl_kev_co = 'url_ver=Z39.88-2004&rft_val_fmt=info:ofi/fmt:kev:mtx:journal&rft_id=info:doi/10.1002/jez.1401770202&rfr_id=info:sid/university.edu:myapplication&rft.genre=article&rft.jtitle=J.%20Exp.%20Zool&rft.date=1971&rft.atitle=Cytoplasmic%20control%20of%20nuclear%20behavior&rft.aulast=Masui';
 +
 
 +
    // set global js var to tell script where to find umlaut
 +
    umlaut_base = 'http://umlaut.university.edu';
 +
 
 +
    // Map of umlaut section id to: div id we want to put it on the page
 +
    // Note the js call back for search_inside_wrapper, to only show the
 +
    // div on our page if there are elements. Js callback function gets one
 +
    // argument, which will be number of Umlaut responses in the section.  
 +
    // Note also that we can use Prototype in the callback.  
 +
 
 +
    umlaut_section_map = {
 +
      'fulltext_wrapper': 'my_fulltext',
 +
      'highlighted_links': 'my_see_also',
 +
      'excerpts_wrapper': 'my_excerpts',
 +
      'cover_image': 'my_cover',
 +
      'search_inside_wrapper': {'host_div_id': 'my_search_inside',
 +
                                'after_update':
 +
                                  function(count) {
 +
                                    if ( count > 0) {
 +
                                        $('my_search_inside').show();
 +
                                    }
 +
                                  }
 +
                              }
 +
      };
 +
    </script>
 +
 
 +
    <!-- now actually load the umlaut js helper, which will do the magic for you -->
 +
    <script type="text/javascript" src="http://umlaut.university.edu/javascripts/embed/umlaut-embed.js"></script>
 +
 
 +
 
 +
</pre>
 +
 
 +
 
 +
 
 +
 
 +
[[Category:Umlaut]]

Revision as of 22:02, 27 October 2008

If you want to include Umlaut-generated HTML directly on a third party page via javascript, there is a javascript helper script to make that very easy. This helper uses the Umlaut partial html API, but does everything for you. The helper will update your divs, and keep polling Umlaut for new results, continuing to re-update your divs until Umlaut is finished. How often it polls is configured by application config 'poll_wait_seconds', which defaults to 4 seconds.

Overview

You need to specify your Umlaut base URL in a global javascript variable called umlaut_base. This is not your link resolver base url which for Umlaut ends in /resolve, but the actual Umlaut application base URL, which should be the same, without the /resolve. At JHU, it's "http://findit.library.jhu.edu".

You also need to put a URL-formatted (KEV) OpenURL context object in a global js variable called umlaut_openurl_kev_co.

You then specify mappings from Umlaut html sections to HTML divs on your page in global js variable called umlaut_section_map containing a hash. Umlaut html sections are configured in Umlaut in the "partial_html_map" configuration param, which by default is set to the "bg_update_map" config params :divs key. To see the sections in a default Umlaut installation, see: environment.rb in svn, look for bg_update_map. The :divs key of the hash there is an array of hashes, each individual hash has a :div_id key that corresponds to the html_sections id in this api response. For Umlaut developers, the :partial key tells you what Rails partial is used to generate this section.

You can also optionally use some javascript callbacks to perform behavior after or during loading. In the following example, we'll demo using a javascript callback to only show a div for search_inside functionality if there are search_inside tools provided.

The umlaut_embed.js script will check if the javascript Prototype library is loaded into the host page, and load it if not. Among other things, this means you can use Prototype in your callbacks.

The html loaded will sometimes include a "spinner" with a message "loading more", if the content is not yet loaded.

An example is best:

Example


  <H1>Here is an article page. </h1>

  <p>We're looking up Cytoplasmic Control of nuclear behavior by Masui. Of course normally this
     would be dynamically generated, not in static html like this.<p>

  <!-- umlaut full text will be loaded here. You might want to include some initial content
       here for browsers without javascript. For browsers with javascript, this will be overwritten.-->
  <div id="my_fulltext">
     <a href="http://umlaut.university.edu/resolve?url_ver=Z39.88-2004&rft_val_fmt=info:ofi/fmt:kev:mtx:journal&rft_id=info:doi/10.1002/jez.1401770202&rfr_id=info:sid/university.edu:myapplication&rft.genre=article&rft.jtitle=J.%20Exp.%20Zool&rft.date=1971&rft.atitle=Cytoplasmic%20control%20of%20nuclear%20behavior&rft.aulast=Masui">
        Link to umlaut
      </a>
  </div>

  <!-- we hide this div to start out with, our js callback later 
       will show it there is full text. But we avoid a "spinner" showing up
       here before everything is fully loaded.  -->
  <div id="my_search_inside" style="display:none;"></div>

  <div id="my_cover"></div>

  <div id="my_see_also"</div>

  <div id="my_excerpts"></div>

  
  <!-- now the javascript to actually load content in those divs -->

  <script type="text/javascript">
    // You have to generate an OpenURL context object somehow, and set it in a js global var. 
    // Normally this would be generated dynamically, not static HTML like this, of course.
    // You may want to include a rfr_id to identify your application as a source, demo below. 

    umlaut_openurl_kev_co = 'url_ver=Z39.88-2004&rft_val_fmt=info:ofi/fmt:kev:mtx:journal&rft_id=info:doi/10.1002/jez.1401770202&rfr_id=info:sid/university.edu:myapplication&rft.genre=article&rft.jtitle=J.%20Exp.%20Zool&rft.date=1971&rft.atitle=Cytoplasmic%20control%20of%20nuclear%20behavior&rft.aulast=Masui';

    // set global js var to tell script where to find umlaut
    umlaut_base = 'http://umlaut.university.edu';

    // Map of umlaut section id to: div id we want to put it on the page
    // Note the js call back for search_inside_wrapper, to only show the
    // div on our page if there are elements. Js callback function gets one
    // argument, which will be number of Umlaut responses in the section. 
    // Note also that we can use Prototype in the callback. 

    umlaut_section_map = {
      'fulltext_wrapper': 'my_fulltext',
      'highlighted_links': 'my_see_also',
      'excerpts_wrapper': 'my_excerpts',
      'cover_image': 'my_cover',
      'search_inside_wrapper': {'host_div_id': 'my_search_inside', 
                                'after_update':
                                  function(count) {
                                    if ( count > 0) {
                                        $('my_search_inside').show();
                                    }
                                  }
                              }
      };
    </script>

    <!-- now actually load the umlaut js helper, which will do the magic for you -->
    <script type="text/javascript" src="http://umlaut.university.edu/javascripts/embed/umlaut-embed.js"></script>