Live Regions Example 5: RSS Feed

<div role="application">
<div class="controls">
<h2>RSS Feed Controls</h2>
<p><label id="rssFeedSelectLabel" for="rssFeedSelect">Select an RSS Feed</label>:
<select id="rssFeedSelect" role="listbox" aria-labelledby="rssFeedSelectLabel" aria-activedescendant="rssFeed1" tabindex="0">
  <option
    id="rssFeed1"
    role="option"
    aria-selected="true"
    value="http://en-us.fxfeeds.mozilla.com/en-US/firefox/headlines.xml" selected>Mozilla Latest Headlines
  </option>
  <option
    id="rssFeed2"
    role="option"
    aria-selected="false"
    value="http://news.google.com/?output=rss">Google News
  </option>
  <option
    id="rssFeed3"
    role="option"
    aria-selected="false"
    value="http://feeds.bbci.co.uk/news/rss.xml">BBC News
  </option>
  <option
    id="rssFeed4"
    role="option"
    aria-selected="false"
    value="http://hosted.ap.org/lineups/TOPHEADS.rss?SITE=AP&SECTION=HOME">Associated Press News
  </option>
  <option
    id="rssFeed5"
    role="option"
    aria-selected="false"
    value="http://rss.slashdot.org/Slashdot/slashdot">Slashdot
  </option>
</select></p>
<p><label id="intervalSelectLabel" for="intervalSelect">Select an Update Interval</label>:
<select id="intervalSelect" role="listbox" aria-labelledby="intervalSelectLabel" aria-activedescendant="interval2" tabindex="0">
  <option
    id="interval1"
    role="option"
    aria-selected="false"
    value="1">1 minute
  </option>
  <option
    id="interval2"
    role="option"
    aria-selected="true"
    value="5" selected>5 minutes
  </option>
  <option
    id="interval3"
    role="option"
    aria-selected="false"
    value="10">10 minutes
  </option>
</select></p>
<hr />
<p><label id="rssPolitenessSelectLabel" for="rssPolitenessSelect">Politeness Level (aria-live value)</label>:
<select id="rssPolitenessSelect" role="listbox" aria-labelledby="rssPolitenessSelectLabel" aria-activedescendant="rssPolite3" tabindex="0">
  <option
    id="rssPolite1"
    role="option"
    aria-selected="false"
    value="off">off
  </option>
  <option
    id="rssPolite2"
    role="option"
    aria-selected="false"
    value="polite">polite
  </option>
  <option
    id="rssPolite3"
    role="option"
    aria-selected="true"
    value="assertive" selected>assertive
  </option>
</select></p>
<p><label id="rssAtomicSelectLabel" for="rssAtomicSelect">Atomic Updates</label>:
<select id="rssAtomicSelect" role="listbox" aria-labelledby="rssAtomicSelectLabel" aria-activedescendant="rssAtomic1" tabindex="0">
  <option
    id="rssAtomic1"
    role="option"
    aria-selected="true"
    value="false" selected>false
  </option>
  <option
    id="rssAtomic2"
    role="option"
    aria-selected="false"
    value="true">true
  </option>
</select></p>
<p><label id="rssRelevantSelectLabel" for="rssRelevantSelect">Change Relevance</label>:
<select id="rssRelevantSelect" role="listbox" aria-labelledby="rssRelevantSelectLabel" aria-activedescendant="rssRelevant1" tabindex="0">
  <option
    id="rssRelevant1"
    role="option"
    aria-selected="true"
    value="additions" selected>additions
  </option>
  <option
    id="rssRelevant2"
    role="option"
    aria-selected="false"
    value="removals">removals
  </option>
  <option
    id="rssRelevant3"
    role="option"
    aria-selected="false"
    value="text">text
  </option>
  <option
    id="rssRelevant4"
    role="option"
    aria-selected="false"
    value="all">all
  </option>
</select></p>
</div>
<div class="controls">
<h2>Timer Controls</h2>
<p><label id="timerPolitenessSelectLabel" for="timerPolitenessSelect">Politeness Level (aria-live value)</label>:
<select id="timerPolitenessSelect" role="listbox" aria-labelledby="timerPolitenessSelectLabel" aria-activedescendant="timerPolite2" tabindex="0">
  <option
    id="timerPolite1"
    role="option"
    aria-selected="false"
    value="off">off
  </option>
  <option
    id="timerPolite2"
    role="option"
    aria-selected="true"
    value="polite" selected>polite
  </option>
  <option
    id="timerPolite3"
    role="option"
    aria-selected="false"
    value="assertive">assertive
  </option>
</select></p>
<p><label id="timerAtomicSelectLabel" for="timerAtomicSelect">Atomic Updates</label>:
<select id="timerAtomicSelect" role="listbox" aria-labelledby="timerAtomicSelectLabel" aria-activedescendant="timerAtomic2" tabindex="0">
  <option
    id="timerAtomic1"
    role="option"
    aria-selected="false"
    value="false">false
  </option>
  <option
    id="timerAtomic2"
    role="option"
    aria-selected="true"
    value="true" selected>true
  </option>
</select></p>
<p><label id="timerRelevantSelectLabel" for="timerRelevantSelect">Change Relevance</label>:
<select id="timerRelevantSelect" role="listbox" aria-labelledby="timerRelevantSelectLabel" aria-activedescendant="timerRelevant4" tabindex="0">
  <option
    id="timerRelevant1"
    role="option"
    aria-selected="false"
    value="additions">additions
  </option>
  <option
    id="timerRelevant2"
    role="option"
    aria-selected="false"
    value="removals">removals
  </option>
  <option
    id="timerRelevant3"
    role="option"
    aria-selected="false"
    value="text">text
  </option>
  <option
    id="timerRelevant4"
    role="option"
    aria-selected="true"
    value="all" selected>all
  </option>
</select></p>
<hr />
  <div id="countdown">
    <label id="timerlabel" for="timer">Time until next update</label>:
    <div id="timer" role="timer" aria-labelledby="timerLabel" aria-live="polite" aria-atomic="true" aria-relevant="all"></div>
  </div>
</div>

<div id="rssFeedContent" role="log" aria-live="assertive" aria-atomic="false" aria-relevant="additions">
  &nbsp;
</div>

</div>

  <script type="text/javascript">
/*
* jGFeed 1.0 - Google Feed API abstraction plugin for jQuery
*
* Copyright (c) 2009 jQuery HowTo
*
* Licensed under the GPL license:
*   http://www.gnu.org/licenses/gpl.html
*
* URL:
*   http://jquery-howto.blogspot.com
*
* Author URL:
*   http://me.boo.uz
*
*/
(function($){$.extend({jGFeed:function(url,fnk,num,key){if(url==null){return false;}var gurl="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+url;if(num!=null){gurl+="&num="+num;}if(key!=null){gurl+="&key="+key;}$.getJSON(gurl,function(data){if(typeof fnk=="function"){fnk.call(this,data.responseData.feed);}else{return false;}});}});})(jQuery);
  </script>

  <script type="text/javascript">
///////////////////////////////// liveRegion  Widget Definition /////////////////////////////////////

//
// Function liveRegion() is a constructor to define an ARIA live region widget. The widget binds to a div
// on the page and accepts a callback function that is triggered at a specified interval.
//
// By default, the live region's alert level is polite, it's updates are non-atomic, additions are relevant,
// and it uses the general channel. These default values may be overridden by either specifying different
// values in the html markup or by calling the widget's corresponding update functions.
//
// @param (id string) id is the html id of the div to bind to.
//
// @param (func callback) func is the callback function to execute at the specified interval
//
// @param (interval integer) interval is the initial update interval
//
// @return N/A
//
function liveRegion(id, func, interval) {

  // define widget properties

  this.$id = $('#' + id); // the jquery object of the live region

  this.func = func; // the callback to execute after each interval
  this.interval = interval; // the interval to use for the timer
  this.timer = null; // the interval timer object

  // set the initial live region aria attributes. Check if the user
  // has specified values in the html markup. If so, use those
  // values.

  var tmp = this.$id.attr('aria-live');

  if (tmp) {
    this.politeness = tmp;
  }
  else {
    this.politeness = 'polite';
  }

  tmp = this.$id.attr('aria-atomic');
  if (tmp) {
    this.atomic = tmp;
  }
  else {
    this.atomic = 'false';
  }

  tmp = this.$id.attr('aria-relevant');
  if (tmp) {
    this.relevant = tmp;
  }
  else {
    this.relevant = 'additions';
  }

  this.busy = false; // set to true while the region is updating

  // create the update timer
  this.createTimer();

} // end liveRegion constructor

//
// Function createTimer() is a member function to create an interval timer for
// the live region widget.
//
// @return N/A
//
liveRegion.prototype.createTimer = function() {

  if (this.timer != null) {
    // destroy the existing timer
    this.destroyTimer();
  }

  this.timer = setInterval(this.func, this.interval);

} // end createTimer()

//
// Function destroyTimer() is a member function to remove the interval timer for
// the live region widget.
//
// @return N/A
//
liveRegion.prototype.destroyTimer = function() {

  if (this.timer != null) {
    clearInterval(this.timer);    
    this.timer = null;
  }

} // end createTimer()

//
// Function setInterval() is a member function to change the update interval
// of the live region. This function stores the new interval, clears the current
// interval timer and creates new one with the specified interval.
//
// @param (interval integer) interval is the new interval, in minutes, to set
//
// @return N/A
//
liveRegion.prototype.setInterval = function(interval) {
  this.interval = interval;

  this.createTimer();

} // end setInterval()

//
// Function setPoliteness() is a member function to set the aria-polite attribute of
// the live region.
//
// @param (val string) val is one of three possible states: 'off', 'polite', 'assertive';
//
// @return N/A
//
liveRegion.prototype.setPoliteness = function(val) {

  this.$id.attr('aria-live', val);
} // end setPoliteness()

//
// Function setAtomic() is a member function to set the aria-atomic attribute of
// the live region.
//
// @param (val boolean) val is true if live region updates should be atomic
//
// @return N/A
//
liveRegion.prototype.setAtomic = function(val) {

  this.$id.attr('aria-atomic', val);

} // end setAtomic()

//
// Function setRelevant() is a member function to set the aria-relevant attribute of
// the live region.
//
// @param (val string) val may be 'additions', 'removals', or 'text'. It may also be a
// space seperated combination of these.
//
// @return N/A
//
liveRegion.prototype.setRelevant = function(val) {

  this.$id.attr('aria-relevant', val);

} // end setRelevant()

  </script>

  <script type="text/javascript">
var g_seconds =  0;

$(document).ready(function() {

  // call init() to reset the select elements - in case of page reload
  init();

  // set the globabal second countdown variable before we create the associated
  // live region
  g_seconds =  $('#intervalSelect').val() * 60 - 1;

  var timerRegion = new liveRegion('timer', 'countdown()', 1000);
  var rssRegion = new liveRegion('rssFeedContent', 'getRssFeed()', $('#intervalSelect').val() * 60000);

  // do initial rss grab
  getRssFeed();

  //////////////////// bind event handlers for rssRegion controls /////////////////////////////

  // bind a change event handler for the RSS feed select
  $('#rssFeedSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // get the new feed
      getRssFeed();
    }

    e.stopPropagation();
    return false;
  });

  // bind a change event handler for the interval select
  $('#intervalSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the new timer interval
      rssRegion.setInterval($newItem.val() * 60000);

      // update the countdown interval
      g_seconds = $newItem.val() * 60 - 1;
    }

    e.stopPropagation();
    return false;
  });

  // bind a change event handler for the politeness select
  $('#rssPolitenessSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the politeness level
      rssRegion.setPoliteness($newItem.val());
    }

    e.stopPropagation();
    return false;
  });

  // bind a change event handler for the atomic updates select
  $('#rssAtomicSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the atomic update setting
      rssRegion.setAtomic($newItem.val());
    }

    e.stopPropagation();
    return false;
  });

  // bind a change event handler for the update relevance select
  $('#rssRelevantSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the update relevance setting
      rssRegion.setRelevant($newItem.val());
    }

    e.stopPropagation();
    return false;
  });

  //////////////////// bind event handlers for timer controls /////////////////////////////

  // bind a change event handler for the politeness select
  $('#timerPolitenessSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the politeness level
      timerRegion.setPoliteness($newItem.val());
    }

    e.stopPropagation();
    return false;
  });

  // bind a change event handler for the atomic updates select
  $('#timerAtomicSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the atomic update setting
      timerRegion.setAtomic($newItem.val());
    }

    e.stopPropagation();
    return false;
  });

  // bind a change event handler for the update relevance select
  $('#timerRelevantSelect').change(function(e) {

    var $newItem = null;

    // select the new item
    $newItem = selectItem($(this), $(this).find('option'), $(this).val());

    if ($newItem != null) {
      // set the update relevance setting
      timerRegion.setRelevant($newItem.val());
    }

    e.stopPropagation();
    return false;
  });
}); // end ready

//
// Function init() is a function to initialize the select elements to match their activedescendant values. This
// ensures that any page reloads do not introduce erroneous aria attribute values
function init() {

  var elems = new Array('rssFeedSelect', 'intervalSelect', 'rssPolitenessSelect', 'rssAtomicSelect',
      'rssRelevantSelect', 'timerPolitenessSelect', 'timerAtomicSelect', 'timerRelevantSelect');
  var $id = null;
  var val = null;

  for (ndx in elems) {
    // get the jQuery object of select to set
    $id = $('#' + elems[ndx]);

    // get the value of the active descendant
    val = $('#' + $id.attr('aria-activedescendant')).val();

    // set the value of the select
    $id.val(val);
  }

} // end init()

//
// Function selectItem() is a function to iterate through an option list to find a new option and select it.
// The function also updates the aria-seleced attribute of the items.
//
// @param ($select object) $select is the jquery object of the select that the option list is part of.
//
// @param ($list object) $list is the list of options to iterate through.
//
// @param (val string) val is the value to find in the list.
//
// @return (object) returns the jquery object of the new item selected. Returns NULL if not found.
//
function selectItem($select, $list, val) {
  var $prevItem = $('#' + $select.attr('aria-activedescendant'));
  var $newItem = null;
    
  // find the list item associated with the new value
  $list.each(function() {
    if ($(this).val() == val) {
             $newItem = $(this);
    }
  });

  if ($newItem == null) {
    // no new item found
    return null;
  }

  // set the aria-selected attribute to false for the previously selected item
  $prevItem.attr('aria-selected', 'false')

  // set the aria-selected attribute to true for the new item
  $newItem.attr('aria-selected', 'true')

  // update the active descendent of the select
  $select.attr('aria-activedescendant', $newItem.attr('id'));

  // return the new item selected
  return $newItem;

} // end selectItem()

//
// Function countdown() is a callback to update the countdown live region. This callback is passed to
// rssRegion.
//
// @return N/A
//
function countdown () {
  var minutes = Math.floor(g_seconds / 60);
  var seconds = g_seconds % 60;

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  if (g_seconds == 0) {
    // do nothing - countdown will be reset by the
    // rssRegion interval timer
    $('#timer').text('updating');
  }
  else {
  $('#timer').text(minutes + ':' + seconds);
    g_seconds--;
  }
}

//
// Function getRssFeed() is a callback to obtain the top 5 items from an RSS feed. the function checks
// the entries obtained against those that may have been obtained previously (present in the live region).
// It will remove old entries and prepend newer ones it has received. This callback is passed to rssRegion.
//
// Note: This function uses the jquery.jGFeed plugin in order to get around the same-domain security
// barrier for AJAX.
//
// @return N/A
//
function getRssFeed() {

  var $id = $('#rssFeedContent');
  var $topEntry = $id.find('.entry').first();

  $.jGFeed($('#rssFeedSelect').val(), function(feed) {
    if(!feed) {
      alert('there was an error');
    }

    // Check to see if this is a new article
    if ($topEntry) {
      var topTitle = $topEntry.find('.storyLink').text();
      var topNdx;

      // iterate through the feed entries and find the index
      // of the matching story.
      for(topNdx = 0; topNdx < feed.entries.length; topNdx++) {
        if (topTitle == feed.entries[topNdx].title) {
          break;
        }
      }

      if (topNdx == feed.entries.length) {
        // there was no match. Clear the region and
        // append all articles
        $id.empty();
      }
      else {
        // there was a match. Remove as many articles
        // as there are new ones from the feed.
        for (var ndx = 0; ndx < topNdx; ndx++) {
          // remove the last entry
          $id.find('.entry').last().remove();
        }
      }
    }

    for (var i = topNdx - 1; i >= 0; i--) {

      var entry = feed.entries[i];
      var title = entry.title;
      var link = entry.link;
      var description = entry.contentSnippet;
      var pubDate = entry.publishedDate;

      var html = '<div class="entry"><h4 class="postTitle">'
               + '<a class="storyLink" href="' + link + '" target="_blank" tabindex="0">'
        + title + '</a>';
      html += '<br><em class="date">' + pubDate + '</em></h4><div class="summary">';
      html += '<p class="description">' + description + '</p></div></div>';
        
      $id.prepend(html);
    }
  }, 5);

  // reset cowntdown
  g_seconds = $('#intervalSelect').val() * 60 - 1;

} // end getRssFeed()
  </script>

  <style type="text/css">
div.controls {
  margin-left: 10px;
  padding: 5px 10px;
  width: 19em;
  float: left;
  display: inline;
  overflow: visible;
}
select {
  float: right;
}
div#countdown {
  margin-top: 3em;
  margin-bottom: 1em;
}
#timerlabel {
  margin-left: 4em;
  font-weight: bold;
}
#timer {
  margin: 0;
  padding: 2px 5px;
  float: right;
  width: 3.5em;
  height: 1.2em;
  font-weight: bold;
  text-align: right;
  background-color: #eee;
  border: 1px solid black;
}
hr {
  height: 1px;
  width: 80%;
  color: #000088;
  background-color: #000088;
}
#rssFeedContent {
  margin: 10px;
  padding: 10px;
  width: 40em;
  border: 1px solid black;
  clear: both;
}

.entry {
  margin-bottom: 20px;
  width: 40em;
}
.postTitle {
  margin: 0;
  padding: 5px;
}
.entry a.storyLink {
  padding-bottom: 1px;
  color: #000088;
  font-size: 1.2em;
  text-decoration: none;
  border-bottom: 1px solid #000088;
}
.entry a.storyLink:hover {
  color: #880000;
  border-bottom: 2px solid #880000;
}
.entry a.storyLink:visited {
  color: #777;
}

.entry .date {
  margin: 0;
  padding: 0;
  padding-right: 10px;
  font-size: 80%;
  letter-spacing: 0.1em;
}

.entry .summary {
  margin: 0;
  padding: 0 10px;
}
  </style>