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