The NewsTickerFeed Class
A news ticker isn't very useful without content to display. The NewsTickerFeed class pulls the required feeds, parses them with XParser, and assembles the HTML for the ticker. The constructor accepts two arguments: a reference to its the NewsTicker object (this allows access to the NewsTicker properties and methods when needed) and the URL of the feed to download:
function NewsTickerFeed(oParent, sUrl) { this.parent = oParent; this.url = sUrl; this.timer = null; this.container = null;
Compared to the NewsTicker class's constructor, the NewsTickerFeed constructor is relatively simple. This class has four properties: parent (a reference to the parent NewsTicker object); url (the URL of the feed); timer (the reference used in the timeout for updating the feed); and container (the <span/> element containing the feed's information in the ticker). The last step in the constructor is to call the poll() method, which makes a request to the server to retrieve the feed.
Polling for New Information
The poll() method automatically checks for feed updates every minute and a half (this can be configured based on your needs):
NewsTickerFeed.prototype.poll = function () { var oThis = this;
var sFullUrl = "newsticker.php?url=" + encodeURIComponent(this.url); xparser.getFeed(sFullUrl, this.populateTicker, this);
This code uses XParser to retrieve the XML feed. Before calling xparser.getFeed(), the URL is built, with the feed URL string being encoded by the encodeURIComponent() JavaScript function. It is important to encode the URL, because this ensures that any characters such as white space, ampersands, quotation marks, and so on are converted to their corresponding escape sequence for proper transmission. The code uses populateTicker as the callback for the request and asks it to be fired within the NewsTickerFeed object's scope.
One final addition to poll() is the automatic updating. To facilitate this, use an approach similar to the tick() method of the NewsTicker class:
NewsTickerFeed.prototype.poll = function () { var oThis = this;
var sFullUrl = "newsticker.php?url=" + encodeURIComponent(this.url); xparser.getFeed(sFullUrl, this.populateTicker, this);
this.timer = setTimeout(doSetTimeout, 90000);
This new code creates a function called doSetTimeout() to pass to the setTimeout() method. Because this version of doSetTimeout() exists only in the scope of the poll() method, it will not interfere with the previous function of the same name in tick(). The poll() method is now set to run every 1.5 minutes (every 90,000 milliseconds) and will update the feed.
Stop Automatic Polling
There may be instances where you want to stop a feed from updating. Doing so is as simple as the calling stopPolling():
NewsTickerFeed.prototype.stopPolling = function () { clearTimeout(this.timer); this.timer = null;
This method simply clears the timeout used for polling and assigns the value of null to the timer property.
Adding Content
When XParser finishes parsing the remote feed, it calls the populateTicker() method and passes itself as an argument. With the supplied XParser object, you can start to create the HTML:
NewsTickerFeed.prototype.populateTicker = function (oParser) { var spanTickerLinks = document.createElement("span");
var aFeedTitle = document.createElement("a"); aFeedTitle.className = "newsTicker-feedTitle"; aFeedTitle.href = oParser.link.value; aFeedTitle.target = "_new";
aFeedTitle.innerHTML = oParser.title.value; spanTickerLinks.appendChild(aFeedTitle); //more code to come
The first step is to create an element to encapsulate all the links. This element serves the purpose of convenience: when the feed is updated, it is easier to remove one element with several children than it is to remove several elements one at a time. Also, don't confuse this container with the container property. The latter contains spanTickerLinks.
To separate the different feeds in the ticker, the feed's title is used. This is also a link, so if the user clicks on the title, a new window pops up taking him or her to the feed's web site. This link is given a CSS class of newsTicker-feedTitle and is appended to spanTickerLinks.
Next, create the link items by iterating through the items array of the XParser object:
NewsTickerFeed.prototype.populateTicker = function (oParser) { var spanTickerLinks = document.createElement("span");
var aFeedTitle = document.createElement("a"); aFeedTitle.className = "newsTicker-feedTitle"; aFeedTitle.href = oParser.link.value; aFeedTitle.target = "_new"; aFeedTitle.innerHTML = oParser.title.value;
spanTickerLinks.appendChild(aFeedTitle);
for (var i = 0; i < oParser.items.length; i++) { var item = oParser.items[i];
var aFeedLink = document.createElement("a"); aFeedLink.href = item.link.value; aFeedLink.target = "_blank"; aFeedLink.className = "newsTicker-feedltem"; aFeedLink.innerHTML = item.title.value;
spanLinkContainer.appendChild(aFeedLink);
Each link opens a new window when clicked and has a CSS class of newsTicker-feedltem. When the link is completed, it is appended to spanLinkContainer, which is then added to the ticker:
NewsTickerFeed.prototype.populateTicker = function (oParser) { var spanLinkContainer = document.createElement("span");
var aFeedTitle = document.createElement("a"); aFeedTitle.className = "newsTicker-feedTitle"; aFeedTitle.href = oParser.link.value; aFeedTitle.target = "_new";
aFeedTitle.innerHTML = oParser.title.value; spanLinkContainer.appendChild(aFeedTitle);
for (var i = 0, itemsLength = oParser.items.length; i < itemsLength; i++) { var item = oParser.items[i];
var aFeedLink = document.createElement("a"); aFeedLink.href = item.link.value; aFeedLink.target = "_new";
aFeedLink.className = "newsTicker-feedltem"; aFeedLink.innerHTML = item.title.value;
spanLinkContainer.appendChild(aFeedLink);
this.container = document.createElement("span"); this.container.className = "newsTicker-feedContainer"; this.parent.ticker.appendChild(this.container); } else {
this.container.removeChild(this.container.firstChild);
this.container.appendChild(spanLinkContainer);
When a NewsTickerFeed class is first created, the container property is declared but given a null value. This is done for a couple of reasons. First, the ticker's animation does not begin until it contains HTML. To keep the animation from running prematurely, the element referenced by container should not be added until the feed's data is retrieved, parsed, and assembled into HTML. This means that appending the container to the ticker should occur in populateTicker().
Second, because this operation takes place in populateTicker(), it is important not to add the same container to the ticker over and over again). Therefore, when the previous code executes, it checks if container has been initialized. If not, the <span/> element is created and appended to the ticker; otherwise, the link container is removed from container, and the newly created link container is added to the widget.
Removing Data
There may be a case where a feed needs to be removed from the ticker, either to be replaced or just simply to free up space. In that case, it's important to free up any memory used by the NewsTickerFeed object. This is where the dispose() method takes over.
Like the NewsTicker method of the same name, the NewsTickerFeed's dispose() method performs the removal of the feed from the ticker:
NewsTickerFeed.prototype.dispose = function () { if (this.timer) this.stopPolling(); if (this.container) {
this.parent.ticker.removeChild(this.container);
this.container = null;
this.parent = null;
The first line checks to see if the feed still automatically updates itself (remember, the timer property is assigned the value of null when stopPolling() is called). If so, then it is stopped from doing so. It then checks for, and removes, the HTML elements used by the NewsTickerFeed object. And last, it removes the reference to the NewsTicker object that contained the feed.
Post a comment