overlay-io-plugin-source.mustache revision e808b8824ca1091c8efb5669db9129e68e5e1c14
<button type="button" id="show">Show Overlay</button>
<button type="button" id="hide">Hide Overlay</button>
<script type="text/javascript">
YUI().use("overlay", "substitute", "json", "gallery-widget-io", function(Y) {
/* Setup local variable for Y.WidgetStdMod, since we use it multiple times */
var StdMod = Y.WidgetStdMod,
transportAvailable = false;
StdModIO = function(config) {
StdModIO.superclass.constructor.apply(this, arguments);
};
Y.extend(StdModIO, Y.Plugin.WidgetIO, {
initializer: function() {
Y.on('io:xdrReady', function() {
transportAvailable = true;
});
id:'flash',
yid: Y.id,
src:'../../build/io/io.swf?stamp=' + (new Date()).getTime()
});
},
setContent: function(content) {
var overlay = this.get('host');
overlay.setStdModContent(this.get('section'), content);
}
}, {
NAME: 'stdModIO',
NS: 'io',
ATTRS: {
section: {
value:StdMod.BODY,
validator: function(val) {
}
}
}
});
/* The Pipes feed URIs to be used to dispatch io transactions */
var pipes = {
// uri data
baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/',
feeds : {
ynews : {
title: 'Yahoo! US News',
uri: 'rss.news.yahoo.com/rss/us'
},
yui : {
title: 'YUI Blog',
},
slashdot : {
title: 'Slashdot',
},
ajaxian: {
title: 'Ajaxian',
uri: 'feeds.feedburner.com/ajaxian'
},
daringfireball: {
title: 'Daring Fireball',
uri: 'daringfireball.net/index.xml'
},
wiredtech: {
title: 'Wire: Tech Biz',
},
techcrunch: {
title: 'TechCrunch',
}
},
// The default formatter, responsible for converting the JSON responses recieved,
// into HTML, using JSON for the parsing step, and substitute for some basic templating functionality
formatter : function (val) {
var formatted = "Error parsing feed data";
try {
var json = Y.JSON.parse(val);
if (json && json.count) {
var html = ['<ul class="yui3-feed-data">'];
var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';
Y.each(json.value.items, function(v, i) {
if (i < 10) {
html.push(Y.substitute(linkTemplate, v));
}
});
html.push("</ul>");
formatted = html.join("");
} else {
formatted = "No Data Available";
}
} catch(e) {
formatted = "Error parsing feed data";
}
return formatted;
}
};
/* Helper function, to generate the select dropdown markup from the pipes feed data */
function generateHeaderMarkup() {
var optTemplate = '<option value="{id}">{title}</option>',
html = ['<select id="feedSelector" class="yui3-feed-selector"><option value="-1" class="yui3-prompt">Select a Feed...</option>'];
Y.Object.each(pipes.feeds, function(v, k, o) {
});
html.push('</select>');
return html.join("");
}
/* Create a new Overlay instance, with content generated from script */
var overlay = new Y.Overlay({
width:"40em",
visible:false,
align: {
node:"#show",
points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
},
zIndex:10,
headerContent: generateHeaderMarkup(),
bodyContent: "Feed data will be displayed here"
});
/*
* Add the Standard Module IO Plugin, and configure it to use flash, and a formatter specific
* to the pipes response we're expecting from the uri request we'll send out.
*/
overlay.plug(StdModIO, {
uri : pipes.baseUri + pipes.feeds["ynews"].uri,
cfg:{
xdr: {
use:'flash'
}
},
formatter: pipes.formatter,
loading: '<img class="yui3-loading" width="32px" height="32px" src="{{componentAssets}}/img/ajax-loader.gif">'
});
Y.on("change", function(e) {
var val = this.get("value");
if (transportAvailable) {
if (val != -1) {
}
} else {
overlay.io.setContent("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it.");
}
}, "#feedSelector");
Y.on("click", function(e) {
overlay.show();
}, "#show");
Y.on("click", function(e) {
overlay.hide();
}, "#hide");
});
</script>