Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Customizing Hosted Library Services with jQuery

Customizing Hosted Library Services with jQuery

JavaScript can help us make changes to vendor tools that might otherwise be impossible. In this hands-on talk, I will walk through using JavaScript and jQuery to modify Serial Solutions’ 360Link link resolver.

Presented at Code4Lib Midwest, 2011, University of Illinois Chicago.

B852b104baed98f4b7f02f5a7a75ab6b?s=128

Matthew Reidsma

July 28, 2011
Tweet

Transcript

  1. CUSTOMIZING HOSTED LIBRARY SERVICES WITH MATTHEW REIDSMA jQUERY

  2. None
  3. None
  4. (ANGER)

  5. jQUERY

  6. jQUERY

  7. Photograph by Matthew Oliphant: http://www.flickr.com/photos/fajalar/5685561863/

  8. None
  9. animatable.com/demos/madmanimation/

  10. jQUERY

  11. <h1><b>Mad</b>manimation</h1> <ol> <li id=”scene01”>[...]</li> <li id=”scene02”>[...]</li> <li id=”scene03”>[...]</li> <li id=”scene04”>[...]</li>

    <li id=”scene05”>[...]</li> <li id=”scene06”>[...]</li> [...] </ol>
  12. if (Modernizr.cssanimations) { $("h1").prepend('<a href="#">Watch</a> ') $("#scene-01").append('[...]'); [...] }

  13. .prepend() .append()

  14. None
  15. None
  16. WHAT IF?

  17. WHAT IF? I STRIP INLINE STYLES

  18. .removeAttr()

  19. PREVIOUSLY: <table align=”center” width=”100%” border=”0” cellspacing=”2” cellpadding=”0” style=”color: #000;” class=”CandyWrapper”

    id=”CandyWrapper”> ETC.
  20. PREVIOUSLY: <table align=”center” width=”100%” border=”0” cellspacing=”2” cellpadding=”0” style=”color: #000;” class=”CandyWrapper”

    id=”CandyWrapper”> ETC.
  21. $(“table”).removeAttr(“align”);

  22. $(“table”).removeAttr(“align”); $(“table”).removeAttr(“width”); $(“table”).removeAttr(“border”); $(“table”).removeAttr(“cellspacing”); $(“table”).removeAttr(“cellpadding”); $(“table”).removeAttr(“style”);

  23. $(“table”).removeAttr(“align”); $(“table”).removeAttr(“width”); $(“table”).removeAttr(“border”); $(“table”).removeAttr(“cellspacing”); $(“table”).removeAttr(“cellpadding”); $(“table”).removeAttr(“style”); BAM.

  24. <table id=”CandyWrapper” class=”CandyWrapper”>

  25. .removeClass();

  26. $(“table”).removeClass(“CandyWrapper”);

  27. <table id=”CandyWrapper”>

  28. WHAT IF?

  29. WHAT IF? I REPLACE THEIR CSS WITH MINE

  30. .remove(); .replaceWith(); .replaceWith(); .append();

  31. ONE STYLE SHEET? $(“head link”).replaceWith(“<link [...] >”);

  32. STYLESHEETS & STYLESHEETS & STYLESHEETS, OH MY! $(“head link”).remove(); $(“head

    style”).remove(); THUS: $(“head”).append(“<link [...] >”);
  33. None
  34. GETTING THERE.

  35. WHAT IF?

  36. WHAT IF? I GRAB DATA, ERASE TABLES, AND SUPPLY STANDARDS-BASED,

    SEMANTIC HTML?
  37. None
  38. .attr(); .text(); .replaceWith();

  39. CITATION TABLE <table id=”CandyWrapper”> [...] <table class=”SS_CitationTable”> [...] <td id=”CitationJournalTitleValue”>

    <div>Vital Speeches of the Day</div> [...] </table> </table> <a class=”link” href=”[...]”>Refworks</a> [...]
  40. GIMME VAR var journalName = $(“td#Title”).text(); var refWorksURL = $(“a.link:contains(‘RefWorks’)”).attr(“href”);

  41. $(“table#CandyWrapper table.SS_Citation”).replaceWith(‘ <div id=”citation”> <span id=”author”>’ + authorName + ‘</span>.

    <span id=”date”>(’ + articleDate + ‘)</span>. <cite id=”article”>’ + articleTitle + ‘</cite>. <span id=”journal”><i>’ + journalTitle + ‘</i></span>. <span id=”volume”>’ + journalVol + ‘</span> <span id=”issue”>(’ + journalIssue + ‘)</span>, <span id=”pages”>p. ‘ + pages + ‘.</span> <a href=”’ + refWorksURL + ‘“>RefWorks</a> </div> ‘); Smith, Joe. (2010). My awesome article. My awesome journal. 1(1), 10-23. THUS:
  42. None
  43. None
  44. NOT JUST A PRETTY FACE.

  45. None
  46. var metaData = $(“td.description_col2”).text(); var hasMovie = “Moving Image”; if(metaData.indexOf(hasMovie)

    != -1) { $(“#tabs”).prepend(‘ <video controls> <source src=”[...]” type=”video/ogg”> <source src=”[...]” type=”video/mp4”> [...] </video> ‘); }
  47. None
  48. None
  49. jQUERY & PROGRESSIVE ENHANCEMENT

  50. None
  51. LET’S SLIDE http://matmarquis.com/carousel/

  52. <div> <img src=”[...]” alt=”Slide One” class=”splash-image” /> <p>Lorem ipsum dolem

    [...] </p> </div> SILDES.HTML: INDEX.HTML: <div class=”slidewrap”> <ul class=”slider”> <li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li> <li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li> <li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li> [...] <!-- etc. --> </ul> </div>
  53. $(document).ready(function() { ! $.get("slides.html", function(data) { ! ! $(".splash-image").replaceWith(data); !

    ! $(".slidewrap").carousel({ ! ! slider: '.slider' ! ! }) ! }); });
  54. None
  55. None
  56. FTW!

  57. jQUERY? WHY

  58. EXCELLENT CROSS-BROWSER SUPPORT

  59. RAPID PROTOTYPING

  60. USER TESTING

  61. QUICK FIXES

  62. MISSING FUNCTIONALITY

  63. DESPERATION

  64. jQUERY? WHY NOT

  65. DEPENDENT ON BAD VENDOR PRACTICES

  66. LIMITED TO WHAT VENDOR ALREADY PROVIDES

  67. NOT EVERYONE HAS JAVASCRIPT SUPPORT

  68. Clips from Just Imagine! (1930).

  69. THANK YOU reidsmam@gvsu.edu :: @mreidsma matthewreidsma.com :: gvsu.edu/library/labs