Index: chrome/common/extensions/docs/examples/extensions/imageinfo/info.html |
diff --git a/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html b/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html |
index af3e1853e5b37d23173d6adc362aa0ce1419db0c..ecfe4ce9841b90899293b3ed8f7fc89cb63ae210 100644 |
--- a/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html |
+++ b/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html |
@@ -9,191 +9,14 @@ |
<script src="imageinfo/binaryajax.js"></script> |
<script src="imageinfo/imageinfo.js" ></script> |
<script src="imageinfo/exif.js" ></script> |
- <style> |
- body { |
- font: 14px Arial; |
- } |
- |
- h1 { |
- margin: 30px 0 5px 0; |
- padding: 0; |
- } |
- code { |
- padding: 0; |
- margin: 5px 0; |
- display: block; |
- } |
- table { |
- border-collapse: collapse; |
- width: 100%; |
- margin: 15px 0; |
- } |
- td, th { |
- padding: 4px; |
- } |
- th { |
- text-align: left; |
- width: 130px; |
- } |
- tr { |
- display: none; |
- } |
- tr.rendered { |
- display: block; |
- } |
- tr.rendered:nth-child(odd) { |
- background: #eee; |
- } |
- #thumbnail { |
- position: fixed; |
- right: 20px; |
- top: 20px; |
- -webkit-box-shadow: 1px 1px 6px #000; |
- border: 4px solid #fff; |
- background: #fff; |
- } |
- #loader { |
- font: 30px Arial; |
- text-align: center; |
- padding: 100px; |
- } |
- </style> |
- <script> |
- /** |
- * 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(); |
- }; |
- }; |
- </script> |
+ <link href="./info.css" rel="stylesheet" type="text/css"></link> |
+ <script src="./info.js"></script> |
abarth-chromium
2011/10/15 18:23:12
Same questions here.
Use mkwst_at_chromium.org plz.
2011/10/15 18:41:26
Done.
|
</head> |
<body> |
<div id="loader"> |
Loading... <img src="loader.gif" /> |
</div> |
- <div id="output" style="display:none"> |
+ <div id="output"> |
<div id="info"> |
<h1>Image Information</h1> |
<code id="url"></code> |
@@ -225,7 +48,7 @@ |
</tr> |
</table> |
</div> |
- <div id="exif" style="display:none;"> |
+ <div id="exif"> |
<h2>EXIF Information</h2> |
<table> |
<tr> |
@@ -275,13 +98,5 @@ |
</table> |
</div> |
</div> |
- <script> |
- // 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)); |
- } |
- </script> |
</body> |
-</html> |
+</html> |