Popcorn.js Plug-in: Google Feed

Well over the reading week I decided to work on my 0.2 release for OSD600.  This consisted (so far) of working on a plugin allowing Popcorn.js users to access blog feeds and display them as they have done with google maps, twitter and so on.  They wanted something that would work with numerous types of feeds, such as RSS, RSS2, Atom, and RDF.  I chose this bug because it seemed like a bit of a challenge, and a good opportunity to learn what exactly went in to making a plug-in.

The first thing I did was do a google search to see if anything like this already existed, and if so, learn how it works.  After a bit of searching I found the Google Feed API which seemed very similar to what was defined in the original ticket.  It seemed simple and light enough that it wouldn't look too cluttered.  It was sleek and clean looking so that what I went with.

After doing looking over some of the code examples, and how it worked, I decided to begin coding.  I thought a good place to start/template to use was what annasob did for the google maps plugin.  I stripped out all the google maps plug-in code and began adding in the code for Google Feed Plug-in.  Although the two API's were similar in some ways, they were also different in many ways (as to be expected).  After adding the bulk of the code in, I came to where I needed to add scripts, which seemed trivial at the time.  I figured I would just add the scripts as Anna did in the google maps plug-in and all would be hunky dorey.  This wasn't the case.  Because I was adding two scripts, I had to make sure both scripts were loaded before I could actually use anything related to the scripts.  This proved to be harder then I first thought, especially since this was the first time I ever worked with scripts like this before.  It wasn't until after talking to cdes that I truly understood what I needed to do.  He explained that I couldn't use any information pertaining to the scripts until after it was loaded, which required a callback.  After some explanation it all made sense to me now and began coding a solution.  My first attempt looked something along these lines:

googleCallback = function() { google.load("feeds", "1", {"callback" : reallyLoaded}); }; var reallyLoaded = function() { _mapLoaded = true; }; // insert google api script once if (!_mapFired) { _mapFired = true; var loadScriptTime = (new Date).getTime(); var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); var script2 = document.createElement("script"); var css = document.createElement('link'); script.src = "https://www.google.com/jsapi?callback=googleCallback"; script.type = "text/javascript"; script2.src = "http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"; script2.type = "text/javascript"; css.type = "text/css"; css.rel = "stylesheet"; css.href =  "http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"; head.insertBefore( script2, head.firstChild ); head.insertBefore( script, head.firstChild ); head.insertBefore( css, head.firstChild ); }

I then had to add the css file in the same fashion as the scripts before.  This is so that the user doesn't need to add the specific css file/scripts each time they want to use a given plug-in in Popcorn.  After adding the the css file, eveything looked much prettier then before and I then added some error checking, and some documentation for how all the parameters worked for the plug-in.  I now had a working copy of the plug-in!  I committed it, and pushed it to git and asked annasob on irc to tell me what she thought.  She said it looked good, but that instead of the method I was currently using for adding scripts, I should be using getScript() as that what the rest of popcorn in now using.  After looking over getSCript() it was clear as to why they were using this as opposed to the old method I was using.  It was much easier to read, and also took up much less space.  The only downside was that there is no getScript() for css files, which forced me to use the old method.  This is what it looked like after using getScipt():

Popcorn.getScript( "https://www.google.com/jsapi", function () { google.load( "feeds", "1", { callback: function () { _feedLoaded = true; } } ); }); Popcorn.getScript( "http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" ); //Doing this because I cannot find something similar to getScript() for css files var head = document.getElementsByTagName("head")[0]; var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href =  "http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"; head.insertBefore( css, head.firstChild );

As you can see its much easier to read and understand what is going on.