Home | History | Annotate | Download | only in imageinfo 
      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  */
     13 function 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  */
     29 function 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  */
     41 function 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  */
     57 function 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  */
     83 function 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  */
     95 function 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  */
    125 function 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  */
    138 document.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