ac-flickr-source.mustache revision 7c8b9c34abc116bbaed3f048d8e141ac5c46a366
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai<style scoped>
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai #ac-input { width: 300px; }
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai border: 1px solid #cfcfcf;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai list-style: none;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai margin: 1.5em 0 0;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai padding: 6px;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai #photos li {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai display: inline-block;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai list-style: none;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai /* fake inline-block for IE<8 */
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai *display: inline;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai #photos .empty { font-style: italic; }
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai #photos .photo {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai margin: 5px;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai text-align: center;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai width: 100px;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai #photos .photo img {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai border: 1px solid #000;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai vertical-align: top;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai margin: 2px 0;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai .result:after {
1bb9ba7f0e700971d0c04fca23820699348cfd49Satyen Desai clear: both;
1bb9ba7f0e700971d0c04fca23820699348cfd49Satyen Desai content: '.';
1bb9ba7f0e700971d0c04fca23820699348cfd49Satyen Desai display: block;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai visibility: hidden;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai .result .photo {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai height: 32px;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai float: left;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai margin-right: 6px;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai width: 32px;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai .result .title { vertical-align: top; }
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai<div id="demo" class="yui3-skin-sam">
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai <label for="ac-input">Search Flickr:</label><br>
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai <input id="ac-input" type="text">
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai <ul id="photos">
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai <li class="empty">No photos selected.</li>
0709cd166604645c5511b892413b44ad6bce6b64Satyen DesaiYUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai var inputNode = Y.one('#ac-input'),
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai photosNode = Y.one('#photos');
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // Constructs an image URL for the Flickr photo represented by the given
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // AutoComplete result object.
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai function getImageUrl(result, size) {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai if (!size) { size = 's'; }
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_' + size + '.jpg',
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai maxResults: 5,
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai resultHighlighter: 'wordMatch',
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai resultTextLocator: 'title',
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai source: 'select * from flickr.photos.search where text="{query}" limit {maxResults}',
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // Custom result formatter for Flickr results.
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai resultFormatter: function (query, results) {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai return Y.Array.map(results, function (result) {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai return '<div class="result">' +
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai '<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai '<span class="title">' + result.highlighted + '</span>' +
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // After a photo is selected, add it to the collection.
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai inputNode.ac.on('select', function (e) {
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai var result = e.result;
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // Prevent the default select handler so we can provide our own selection
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // behavior instead.
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // Remove the 'No photos selected' message if it exists.
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai photosNode.all('.empty').remove();
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai // Append a new list item containing the selected photo.
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai '<li class="photo">' +
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai '<img src="' + getImageUrl(result, 't') +
0709cd166604645c5511b892413b44ad6bce6b64Satyen Desai '" alt="' + result.raw.title + '" title="' + result.raw.title + '">' +