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

A more SPA approach based on 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.

by deanpeters

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="theStateLiving">
            <h4></h4>
            <ul id="thelist" data-role="listview" data-inset="true" data-filter="false"></ul>
        </div>
        <div id="theNAOLiving">
            <h4></h4>
            <ul id="thelist" data-role="listview" data-inset="true" data-filter="false"></ul>
        </div>
        <div id="topStories">
            <h4></h4>
            <ul id="thelist" data-role="listview" data-inset="true"...

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);

        ...