info.js

// 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));
  }
});