/chromium-webcl/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.js

https://bitbucket.org/peixuan/chromium_r197479_base · JavaScript · 83 lines · 36 code · 6 blank · 41 comment · 1 complexity · 695ed788d076ef723506710b015ef7a0 MD5 · raw file

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