1// Copyright (c) 2011 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/** 7 * Quick template rendering function. For each cell passed to it, check 8 * to see if the cell's text content is a key in the supplied data array. 9 * If yes, replace the cell's contents with the corresponding value and 10 * unhide the cell. If no, then remove the cell's parent (tr) from the 11 * DOM. 12 */ 13function renderCells(cells, data) { 14 for (var i = 0; i < cells.length; i++) { 15 var cell = cells[i]; 16 var key = cell.innerText; 17 if (data[key]) { 18 cell.innerText = data[key]; 19 cell.parentElement.className = "rendered"; 20 } else { 21 cell.parentElement.parentElement.removeChild(cell.parentElement); 22 } 23 } 24}; 25 26/** 27 * Returns true if the supplies object has no properties. 28 */ 29function isEmpty(obj) { 30 for (var key in obj) { 31 if (obj.hasOwnProperty(key)) { 32 return false; 33 } 34 } 35 return true; 36}; 37 38/** 39 * Resizes the window to the current dimensions of this page's body. 40 */ 41function resizeWindow() { 42 window.setTimeout(function() { 43 chrome.tabs.getCurrent(function (tab) { 44 var newHeight = Math.min(document.body.offsetHeight + 140, 700); 45 chrome.windows.update(tab.windowId, { 46 height: newHeight, 47 width: 520 48 }); 49 }); 50 }, 150); 51}; 52 53/** 54 * Called directly by the background page with information about the 55 * image. Outputs image data to the DOM. 56 */ 57function renderImageInfo(imageinfo) { 58 console.log('imageinfo', imageinfo); 59 60 var divloader = document.querySelector('#loader'); 61 var divoutput = document.querySelector('#output'); 62 divloader.style.display = "none"; 63 divoutput.style.display = "block"; 64 65 var divinfo = document.querySelector('#info'); 66 var divexif = document.querySelector('#exif'); 67 68 // Render general image data. 69 var datacells = divinfo.querySelectorAll('td'); 70 renderCells(datacells, imageinfo); 71 72 // If EXIF data exists, unhide the EXIF table and render. 73 if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) { 74 divexif.style.display = 'block'; 75 var exifcells = divexif.querySelectorAll('td'); 76 renderCells(exifcells, imageinfo['exif']); 77 } 78}; 79 80/** 81 * Renders the URL for the image, trimming if the length is too long. 82 */ 83function renderUrl(url) { 84 var divurl = document.querySelector('#url'); 85 var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...'; 86 var anchor = document.createElement('a'); 87 anchor.href = url; 88 anchor.innerText = urltext; 89 divurl.appendChild(anchor); 90}; 91 92/** 93 * Renders a thumbnail view of the image. 94 */ 95function renderThumbnail(url) { 96 var canvas = document.querySelector('#thumbnail'); 97 var context = canvas.getContext('2d'); 98 99 canvas.width = 100; 100 canvas.height = 100; 101 102 var image = new Image(); 103 image.addEventListener('load', function() { 104 var src_w = image.width; 105 var src_h = image.height; 106 var new_w = canvas.width; 107 var new_h = canvas.height; 108 var ratio = src_w / src_h; 109 if (src_w > src_h) { 110 new_h /= ratio; 111 } else { 112 new_w *= ratio; 113 } 114 canvas.width = new_w; 115 canvas.height = new_h; 116 context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h); 117 }); 118 image.src = url; 119}; 120 121/** 122 * Returns a function which will handle displaying information about the 123 * image once the ImageInfo class has finished loading. 124 */ 125function getImageInfoHandler(url) { 126 return function() { 127 renderUrl(url); 128 renderThumbnail(url); 129 var imageinfo = ImageInfo.getAllFields(url); 130 renderImageInfo(imageinfo); 131 resizeWindow(); 132 }; 133}; 134 135/** 136 * Load the image in question and display it, along with its metadata. 137 */ 138document.addEventListener("DOMContentLoaded", function () { 139 // The URL of the image to load is passed on the URL fragment. 140 var imageUrl = window.location.hash.substring(1); 141 if (imageUrl) { 142 // Use the ImageInfo library to load the image and parse it. 143 ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl)); 144 } 145}); 146