15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Global variable containing the query we'd like to pass to Flickr. In this 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * case, kittens! 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @type {string} 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var QUERY = 'kittens'; 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var kittenGenerator = { 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Flickr URL that will give us lots and lots of whatever we're looking for. 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * See http://www.flickr.com/services/api/flickr.photos.search.html for 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * details about the construction of this URL. 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @type {string} 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' + 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'method=flickr.photos.search&' + 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'api_key=90485e931f687a9b9c2a66bf58a3861a&' + 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'text=' + encodeURIComponent(QUERY) + '&' + 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'safe_search=1&' + 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'content_type=1&' + 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'sort=interestingness-desc&' + 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'per_page=20', 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Sends an XHR GET request to grab photos of lots and lots of kittens. The 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * XHR's 'onload' event is hooks up to the 'showPhotos_' method. 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @public 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) requestKittens: function() { 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var req = new XMLHttpRequest(); 402a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) req.open("GET", this.searchOnFlickr_, true); 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) req.onload = this.showPhotos_.bind(this); 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) req.send(null); 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Handle the 'onload' event of our kitten XHR request, generated in 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 'requestKittens', by generating 'img' elements, and stuffing them into 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * the document for display. 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ProgressEvent} e The XHR ProgressEvent. 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) showPhotos_: function (e) { 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var kittens = e.target.responseXML.querySelectorAll('photo'); 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < kittens.length; i++) { 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var img = document.createElement('img'); 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) img.src = this.constructKittenURL_(kittens[i]); 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) img.setAttribute('alt', kittens[i].getAttribute('title')); 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) document.body.appendChild(img); 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Given a photo, construct a URL using the method outlined at 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * http://www.flickr.com/services/api/misc.urlKittenl 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {DOMElement} A kitten. 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {string} The kitten's URL. 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) constructKittenURL_: function (photo) { 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return "http://farm" + photo.getAttribute("farm") + 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ".static.flickr.com/" + photo.getAttribute("server") + 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "/" + photo.getAttribute("id") + 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "_" + photo.getAttribute("secret") + 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "_s.jpg"; 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Run our kitten generation script as soon as the document's DOM is ready. 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)document.addEventListener('DOMContentLoaded', function () { 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) kittenGenerator.requestKittens(); 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}); 84