Fun with the YQL, jQuery AJAX & my NewsFeed.SectionPopulate Plugin

A nifty little jQuery plugin designed to grab a yahoo news rss feed, run it through the YQL processor, leverage CORS w/an AJAX call in jQuery which then populates a list of items dynamically.

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  </head>

  <body>


    <div data-role="page">

      <div data-role="header">
        <h1>Fun with the YQL, jQuery AJAX &amp; my NewsFeed.SectionPopulate Plugin</h1>
      </div>
      <!-- /header -->

      <div data-role="content" class="ui-content">


        <div id="todo">
          <h3>to do</h3>
          <ol>
            <li>add (<em>more robust</em>) error handling for ajax</li>
            <li>add google analytics, w/push for outbound clicks</li>
            <li>perhaps use data- item attributes instead of parameters</li>
            <li>use session storage for json captures so only 1 trip required per session</li>
            <li><strike>how about feeds from other sources?</strike></li>
            <li><strike>in cases where no media content exists, parse item.description for alternate image</strike></li>
            <li>roll into phonegap project</li>
            <li>Add some animation/transitions for visual/usability</li>
          </ol>
        </div>
        <div id="topStories">
          <h4></h4>
          <ul id="thelist" data-role="listview" data-inset="true" data-filter="false"></ul>
        </div>
        <div id="sportsStories">
          <h5></h5>
          <ol id="thelist2" data-role="listview" data-inset="true" data-filter="false"></ol>
        </div>
        <div id="lifeHacker">
          <h5></h5>
          <ol id="thelist3" data-role="listview" data-inset="true" data-filter="false"></ol>
        </div>
        <div...

CSS

li a img {
  height: 150px;
}

JavaScript

/* start: plugin */
(function($) {

  /* 
   * formatting for this plugin was quickly generate & started with: 
   *   http://starter.pixelgraphics.us/
   *
   * of course, you still gotta write the code ...
   */
  if (!$.NewsFeed) {
    $.NewsFeed = new Object();
  };

  $.NewsFeed.SectionPopulate = function(el, listTitle, rssFeedUrl, maxStories, titleSelector, listSelector, showImagesOnly, toggleClass, options) {
    // To avoid scope issues, use 'base' instead of 'this'
    // to reference this class from internal events and functions.
    var base = this;

    // Access to jQuery and DOM versions of element
    base.$el = $(el);
    base.el = el;

    // Add a reverse reference to the DOM object
    base.$el.data("NewsFeed.SectionPopulate", base);

    base.init = function() {
      if (typeof(listTitle) === "undefined" || listTitle === null) listTitle = "Top Stories";
      if (typeof(rssFeedUrl) === "undefined" || rssFeedUrl === null) rssFeedUrl = "http://news.yahoo.com/rss/topstories";
      if (typeof(maxStories) === "undefined" || maxStories === null) maxStories = 12;
      if (typeof(listSelector) === "undefined" || listSelector === null) listSelector = "ul";
      if (typeof(showImagesOnly) === "undefined" || showImagesOnly === null) showImagesOnly = true;
      if (typeof(titleSelector) === "undefined" || titleSelector === null) titleSelector = "h4";
      if (typeof(toggleClass) === "undefined" || toggleClass === null) toggleClass = "on";

      base.listTitle = listTitle;
      base.rssFeedUrl = rssFeedUrl;
      base.maxStories = maxStories;
      base.listSelector = listSelector;
      base.titleSelector = titleSelector;
      base.showImagesOnly = showImagesOnly;
      base.toggleClass = toggleClass;

      base.options = $.extend({}, $.NewsFeed.SectionPopulate.defaultOptions, options);

      // Put your initialization code here (or "this is where it all happens")
      // base.test();
      base._getData();
    };

    // Sample Function,...