Home | History | Annotate | Download | only in getstarted 
      1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2 // Use of this source code is governed by a BSD-style license that can be
      3 // found in the LICENSE file.
      4 
      5 /**
      6  * Global variable containing the query we'd like to pass to Flickr. In this
      7  * case, kittens!
      8  *
      9  * @type {string}
     10  */
     11 var QUERY = 'kittens';
     12 
     13 var kittenGenerator = {
     14   /**
     15    * Flickr URL that will give us lots and lots of whatever we're looking for.
     16    *
     17    * See http://www.flickr.com/services/api/flickr.photos.search.html for
     18    * details about the construction of this URL.
     19    *
     20    * @type {string}
     21    * @private
     22    */
     23   searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' +
     24       'method=flickr.photos.search&' +
     25       'api_key=90485e931f687a9b9c2a66bf58a3861a&' +
     26       'text=' + encodeURIComponent(QUERY) + '&' +
     27       'safe_search=1&' +
     28       'content_type=1&' +
     29       'sort=interestingness-desc&' +
     30       'per_page=20',
     31 
     32   /**
     33    * Sends an XHR GET request to grab photos of lots and lots of kittens. The
     34    * XHR's 'onload' event is hooks up to the 'showPhotos_' method.
     35    *
     36    * @public
     37    */
     38   requestKittens: function() {
     39     var req = new XMLHttpRequest();
     40     req.open("GET", this.searchOnFlickr_, true);
     41     req.onload = this.showPhotos_.bind(this);
     42     req.send(null);
     43   },
     44 
     45   /**
     46    * Handle the 'onload' event of our kitten XHR request, generated in
     47    * 'requestKittens', by generating 'img' elements, and stuffing them into
     48    * the document for display.
     49    *
     50    * @param {ProgressEvent} e The XHR ProgressEvent.
     51    * @private
     52    */
     53   showPhotos_: function (e) {
     54     var kittens = e.target.responseXML.querySelectorAll('photo');
     55     for (var i = 0; i < kittens.length; i++) {
     56       var img = document.createElement('img');
     57       img.src = this.constructKittenURL_(kittens[i]);
     58       img.setAttribute('alt', kittens[i].getAttribute('title'));
     59       document.body.appendChild(img);
     60     }
     61   },
     62 
     63   /**
     64    * Given a photo, construct a URL using the method outlined at
     65    * http://www.flickr.com/services/api/misc.urlKittenl
     66    *
     67    * @param {DOMElement} A kitten.
     68    * @return {string} The kitten's URL.
     69    * @private
     70    */
     71   constructKittenURL_: function (photo) {
     72     return "http://farm" + photo.getAttribute("farm") +
     73         ".static.flickr.com/" + photo.getAttribute("server") +
     74         "/" + photo.getAttribute("id") +
     75         "_" + photo.getAttribute("secret") +
     76         "_s.jpg";
     77   }
     78 };
     79 
     80 // Run our kitten generation script as soon as the document's DOM is ready.
     81 document.addEventListener('DOMContentLoaded', function () {
     82   kittenGenerator.requestKittens();
     83 });
     84