September11
[ad]
K so this is the code for that FeedMe Class:
FeedMe.js
var FeedMe = new Class({
Implements : [Options, Events],
options : {
template : '
',
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 = '
';
}
this.outputContainer.getElement('.chan-image-link').set('html', img);
this.itemsHtml = '';
this.channel.items.each(function(item) {
this.itemsHtml += this.options.template.replace(
'#link#', '
'+item.get('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!