Index: chrome/common/extensions/docs/examples/extensions/imageinfo/info.js |
diff --git a/chrome/common/extensions/docs/examples/extensions/imageinfo/info.js b/chrome/common/extensions/docs/examples/extensions/imageinfo/info.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..40f3b27e7ab1cdf979ff6a0418e49c75d06a9f29 |
--- /dev/null |
+++ b/chrome/common/extensions/docs/examples/extensions/imageinfo/info.js |
@@ -0,0 +1,145 @@ |
+// Copyright (c) 2011 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+ |
+ |
+/** |
+ * Quick template rendering function. For each cell passed to it, check |
+ * to see if the cell's text content is a key in the supplied data array. |
+ * If yes, replace the cell's contents with the corresponding value and |
+ * unhide the cell. If no, then remove the cell's parent (tr) from the |
+ * DOM. |
+ */ |
+function renderCells(cells, data) { |
+ for (var i = 0; i < cells.length; i++) { |
+ var cell = cells[i]; |
+ var key = cell.innerText; |
+ if (data[key]) { |
+ cell.innerText = data[key]; |
+ cell.parentElement.className = "rendered"; |
+ } else { |
+ cell.parentElement.parentElement.removeChild(cell.parentElement); |
+ } |
+ } |
+}; |
+ |
+/** |
+ * Returns true if the supplies object has no properties. |
+ */ |
+function isEmpty(obj) { |
+ for (var key in obj) { |
+ if (obj.hasOwnProperty(key)) { |
+ return false; |
+ } |
+ } |
+ return true; |
+}; |
+ |
+/** |
+ * Resizes the window to the current dimensions of this page's body. |
+ */ |
+function resizeWindow() { |
+ window.setTimeout(function() { |
+ chrome.tabs.getCurrent(function (tab) { |
+ var newHeight = Math.min(document.body.offsetHeight + 140, 700); |
+ chrome.windows.update(tab.windowId, { |
+ height: newHeight, |
+ width: 520 |
+ }); |
+ }); |
+ }, 150); |
+}; |
+ |
+/** |
+ * Called directly by the background page with information about the |
+ * image. Outputs image data to the DOM. |
+ */ |
+function renderImageInfo(imageinfo) { |
+ console.log('imageinfo', imageinfo); |
+ |
+ var divloader = document.querySelector('#loader'); |
+ var divoutput = document.querySelector('#output'); |
+ divloader.style.display = "none"; |
+ divoutput.style.display = "block"; |
+ |
+ var divinfo = document.querySelector('#info'); |
+ var divexif = document.querySelector('#exif'); |
+ |
+ // Render general image data. |
+ var datacells = divinfo.querySelectorAll('td'); |
+ renderCells(datacells, imageinfo); |
+ |
+ // If EXIF data exists, unhide the EXIF table and render. |
+ if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) { |
+ divexif.style.display = 'block'; |
+ var exifcells = divexif.querySelectorAll('td'); |
+ renderCells(exifcells, imageinfo['exif']); |
+ } |
+}; |
+ |
+/** |
+ * Renders the URL for the image, trimming if the length is too long. |
+ */ |
+function renderUrl(url) { |
+ var divurl = document.querySelector('#url'); |
+ var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...'; |
+ var anchor = document.createElement('a'); |
+ anchor.href = url; |
+ anchor.innerText = urltext; |
+ divurl.appendChild(anchor); |
+}; |
+ |
+/** |
+ * Renders a thumbnail view of the image. |
+ */ |
+function renderThumbnail(url) { |
+ var canvas = document.querySelector('#thumbnail'); |
+ var context = canvas.getContext('2d'); |
+ |
+ canvas.width = 100; |
+ canvas.height = 100; |
+ |
+ var image = new Image(); |
+ image.addEventListener('load', function() { |
+ var src_w = image.width; |
+ var src_h = image.height; |
+ var new_w = canvas.width; |
+ var new_h = canvas.height; |
+ var ratio = src_w / src_h; |
+ if (src_w > src_h) { |
+ new_h /= ratio; |
+ } else { |
+ new_w *= ratio; |
+ } |
+ canvas.width = new_w; |
+ canvas.height = new_h; |
+ context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h); |
+ }); |
+ image.src = url; |
+}; |
+ |
+/** |
+ * Returns a function which will handle displaying information about the |
+ * image once the ImageInfo class has finished loading. |
+ */ |
+function getImageInfoHandler(url) { |
+ return function() { |
+ renderUrl(url); |
+ renderThumbnail(url); |
+ var imageinfo = ImageInfo.getAllFields(url); |
+ renderImageInfo(imageinfo); |
+ resizeWindow(); |
+ }; |
+}; |
+ |
+/** |
+ * Load the image in question and display it, along with its metadata. |
+ */ |
+document.addEventListener("DOMContentLoaded", function () { |
+ // The URL of the image to load is passed on the URL fragment. |
+ var imageUrl = window.location.hash.substring(1); |
+ if (imageUrl) { |
+ // Use the ImageInfo library to load the image and parse it. |
+ ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl)); |
+ } |
+}); |