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.

Transcript

1. CUSTOMIZING HOSTED LIBRARY SERVICES WITH MATTHEW REIDSMA jQUERY
4. (ANGER)
5. jQUERY
6. jQUERY
7. Photograph by Matthew Oliphant: http://www.flickr.com/photos/fajalar/5685561863/
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()
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 [...] >”);
34. GETTING THERE.
35. WHAT IF?
36. WHAT IF? I GRAB DATA, ERASE TABLES, AND SUPPLY STANDARDS-BASED, SEMANTIC HTML?
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:
44. NOT JUST A PRETTY FACE.
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> ‘); }
49. jQUERY & PROGRESSIVE ENHANCEMENT
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' ! ! }) ! }); });
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