Project Y

Crazy dog writing code for fun

FeedMe – RSS reader

September11

[ad]
K so this is the code for that FeedMe Class:

FeedMe.js

var FeedMe = new Class({
    Implements : [Options, Events],
    options : {
        template : '
#link##title#
#desc#
', container : 'FeedMeContainer' }, initialize : function(options) { this.setOptions(options) }, eat : function(url) { this.fireEvent('start'); new Request({ url : url, onSuccess : this._eat.bind(this), onFailure : function(response) {this.fireEvent('failure', response)}.bind(this), onException : function(headerName, error) {this.fireEvent('exception', [headerName, error])}.bind(this) }).send(); }, _eat : function(responseText, responseXml) { this.fireEvent('success', responseXml); //console.log(responseText+' '+responseXml) //try { this._digest(responseXml); }, _digest : function(responseXml) { this.fireEvent('processing'); this.channel = new FeedMe.Channel(responseXml); this.outputContainer = $(this.options.container); ["title","link","description","pubDate","copyright"].each(function(item) { //console.log('chan-'+item); this.outputContainer.getElement('.chan-'+item).set('html',this.channel.get(item)); }.bind(this)); var img = '', image = this.channel.image, src = image.get('src'); if (src != null) { var title = image.get('description'); img = ''+title+''; } this.outputContainer.getElement('.chan-image-link').set('html', img); this.itemsHtml = ''; this.channel.items.each(function(item) { this.itemsHtml += this.options.template.replace( '#link#', ' ').replace( '#title#', '
'+item.get('title')+'
').replace( '#desc#', '
'+item.get('description')+'
') }.bind(this)); this.outputContainer.getElement('.chan-items').set('html', this.itemsHtml); this.fireEvent('done'); } }); FeedMe.Node = new Class({ initialize : function(element) { this.element = element; }, get : function(prop) { if (this.element) { if (prop != 'value') return this.element.get(prop); else this.element.childNodes[0].nodeValue; } return null; } }); FeedMe.BaseItem = new Class({ get : function(prop) { var elm = this.element.getElement(prop); if (elm != null) return elm.childNodes[0].nodeValue; return ''; } }); FeedMe.Item = new Class({ Extends : FeedMe.BaseItem, initialize : function(element) { this.element = element; this.category = new FeedMe.Node(this.element.getElement('category')); this.enclosure = new FeedMe.Node(this.element.getElement('enclosure')); this.guid = new FeedMe.Node(this.element.getElement('guid')); this.source = new FeedMe.Node(this.element.getElement('source')); } }); FeedMe.Channel = new Class({ Extends : FeedMe.BaseItem, initialize : function(xmlDoc) { this.xmlDoc = xmlDoc; this.element = this.xmlDoc.getElement('channel'); this.items = new Array(); this.xmlDoc.getElements('item').each(function(item) { this.items.push(new FeedMe.Item(item)); }, this); this.category = new FeedMe.Node(this.element.getElement('category')); this.image = new FeedMe.Node(this.element.getElement('image')); } });

mootools.ext.js just a quick extension for show and hide functionality

Element.implement({
	visible: function() {
    	return this.style.display != 'none';
  	},
	toggle: function() {
		if (this.visible())this.hide();
		else this.show();
		return this;
	},
	hide: function() {
		this.style.display = 'none';
		return this;
	},
	show: function() {
		this.style.display = '';
		return this;
	},
	smoothScrollTo: function(options){
		var options = $extend({},options||{elementOffset:0});
		try {
			var scrollY = (window.pageYOffset)?window.pageYOffset:document.documentElement.scrollTop;
			if ((!options.minPageOffset && !options.maxPageOffset) ||
			(options.minPageOffset && scrollY > options.minPageOffset) ||
			(options.maxPageOffset && scrollY < options.maxPageOffset))
			if (!__globalSmoothScroll) __globalSmoothScroll = new Fx.Scroll(window);
			__globalSmoothScroll.toElement(this);

		} catch(e) {Logger.log('smoothScrollTo: '+e.message);}
		return this;
	}
});

Test html file:

<html>
	<head>
		<title>FeedMe</title>
		<script src="/js/mootools.core.js" type="text/javascript"></script>
		<script src="/js/mootools.more.js" type="text/javascript"></script>
		<script src="/js/mootools.ext.js" type="text/javascript"></script>
		<script src="/js/feedme.js" type="text/javascript"></script>
		<link rel="stylesheet" href="/css/layout.css" />
		<script type="text/javascript">
		var feedMe = null;
		window.addEvent('domready', function() {
			feedMe = new FeedMe().addEvents({
				start : function() {showStatus('fetching..', 'start');$('FeedMeContainer').hide();},
				success : showStatus.pass('eating..','success'),
				processing : showStatus.pass('digesting..','processing'),
				done : function() {showStatus('dropping kids..','done');showResult.delay(1000);}
			});
			$('sendit').addEvent('click', function() {
				var url = $('rssurl').value;
				if (url == '' || !/http/.test(url)) {
					alert('come on foo!');
					return;
				}
				feedMe.eat("/bites/proxy.php?mimetype=text/xml&url="+encodeURIComponent(url));
			})
		});
		function showStatus(msg, className) {return $('feedingStatus').set('html',msg).set('class', className).show();}
		function showResult(){
			$('FeedMeContainer').show();
			$('feedingStatus').hide();
		};
		</script>
		</head>
	<body>
	<div class="container">
	<input type="text" value="http://news.google.com/news?ned=us&hl=en&q=dog&output=rss" id="rssurl" /> <input type="button" id="sendit" value="Feed Me!!"/>
	<div id="feedingStatus"></div>
	<div id="FeedMeContainer" class="rss" style="display:none;">
		<div id="chan-title"></div>
		<div id="chan-link"></div>
		<div id="chan-description"></div>
		<a href="javascript:void(0);" id="chan-image-link"></a>
		<div id="chan-items"></div>
		<div id="chan-pubDate"></div>
		<div id="chan-copyright"></div>
	</div>
	</div>
	</body>
</html>

You will need a proxy to run outside script within your website or you’ll run into cross-domain issues

Damn I gotta go run with the Boss now I hate when he does that to me.

Later fools!

posted under Bites

Email will not be published

Website example

Your Comment: