Added support for gizmodo.jp, gizmodo.de, gizmodo.com.au, gizmodo.pl,…

… copains d'avant. CSS is now loaded through script. Fixed positioning when body's padding != 0. Don't remove titles from iframs anymore (Amazon fix). Don't zoom in small windows/frames (Reddit fix).
ralph-tice · Dec 9, 2010 · fa5eec0 · fa5eec0
1 parent 91e6d7e
commit fa5eec0
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 31 deletions.
diff --git a/background.html b/background.html
@@ -98,10 +98,10 @@
 				_gaq.push(['_trackEvent', 'Options', 'picturesOpacity', options.picturesOpacity.toString()]);
 				_gaq.push(['_trackEvent', 'Options', 'actionKey', keyCodeToKeyName(options.actionKey)]);
 				_gaq.push(['_trackEvent', 'Options', 'fullZoomKey', keyCodeToKeyName(options.fullZoomKey)]);
+				_gaq.push(['_trackEvent', 'Options', 'whiteListMode', options.whiteListMode.toString()]);
 				for (var i=0; i<options.excludedSites.length; i++) {
 					_gaq.push(['_trackEvent', 'Options', 'excludedSites', options.excludedSites[i]]);
 				}
-				_gaq.push(['_trackEvent', 'Options', 'whiteListMode', options.whiteListMode.toString()]);
 			}
 
 			// Report miscellaneous stats
@@ -119,10 +119,10 @@
 
 				// Anonymous stats
 				// There was a bug before Chrome version 8.0.551.0 on Linux and Mac (Chromium issue 43400)
-				if (hasMinChromeVersion('8.0.551.0') || navigator.appVersion.indexOf("Win") != -1) {
+				if (navigator.appVersion.indexOf("Win") != -1 || hasMinChromeVersion('8.0.551.0')) {
 					setUpStats();
-					optionsStats();
 					miscStats();
+					optionsStats();
 				}
 			}
 

diff --git a/hoverzoom.js b/hoverzoom.js
@@ -27,6 +27,47 @@ var hoverZoom = {
 			lastImgWidth = 0,
 			skipFadeIn = false,
 			titledElements = null;
+
+		var hoverZoomImgCss = {
+			'border': '1px solid #444', 
+			'line-height': 0,
+			'overflow': 'hidden',
+			'padding': '2px',
+			'margin': 0,
+			'position': 'absolute',
+			'z-index': 2147483647,
+			'border-radius': '3px',
+			'background': '-webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#ededed), color-stop(0.5, #ffffff))',
+			'-webkit-box-shadow': '2px 2px 8px #444'
+		},
+		progressCss = {
+			'opacity': '0.5',
+			'position': 'absolute',
+			'height': '22px',
+			'width': '22px',
+			'left': '3px',
+			'top': '3px',
+			'border-radius': '2px'
+		},
+		imgFullSizeCss = {
+			'opacity': '1',
+			'position': 'static',
+			'height': 'auto',
+			'width': 'auto',
+			'left': 'auto',
+			'top': 'auto',
+			'border-radius': '0'
+		},
+		hoverZoomCaptionCss = {
+			'font': 'menu',
+			'font-size': '11px',
+			'font-weight': 'bold',
+			'color': '#333',
+			'text-align': 'center',
+			'max-height': '27px',
+			'overflow': 'hidden',
+			'vertical-align': 'top',
+		};
 
 		// Calculate optimal image position and size
 		function posImg(position) {
@@ -50,7 +91,10 @@ var hoverZoom = {
 					if (hoverZoomCaption.height() > 20) {
 						hoverZoomCaption.css('font-weight', 'normal');
 					}
-					while (hoverZoomImg.height() > wndHeight) {
+					// This is looped 10x max just in case something 
+					// goes wrong, to avoid freezing the process.
+					var i = 0;
+					while (hoverZoomImg.height() > wndHeight && i++ < 10) {
 						imgFullSize.height(wndHeight - padding - hoverZoomCaption.height()).width('auto');
 						hoverZoomCaption.css('max-width', imgFullSize.width());
 					}
@@ -131,10 +175,11 @@ var hoverZoom = {
 			}
 
 			// This fixes positioning when the body's width is not 100%
-			position.left -= (wndWidth - bodyWidth) / 2;
+			if (body.css('padding-left') == '0px' && body.css('padding-right') == '0px') {
+				position.left -= (wndWidth - bodyWidth) / 2;
+			}
 
-			position = {top: Math.round(position.top), left: Math.round(position.left)};
-			hoverZoomImg.css(position);
+			hoverZoomImg.css({top: Math.round(position.top), left: Math.round(position.left)});
 		}
 
 		function posWhileLoading() {
@@ -155,7 +200,7 @@ var hoverZoom = {
 		// Titles are saved so they can be restored later.
 		function removeTitles() {
 			if (titledElements) { return; }
-			titledElements = $('[title]').not('.lightbox, [rel^=lightbox]');
+			titledElements = $('[title]').not('iframe, .lightbox, [rel^=lightbox]');
 			titledElements.each(function() {
 				$(this).data('hoverZoomTitle', this.getAttribute('title')).removeAttr('title');
 			});
@@ -185,7 +230,7 @@ var hoverZoom = {
 		}
 
 		function documentMouseMove(event) {
-			if (!options.extensionEnabled || isExcludedSite()) {			
+			if (!options.extensionEnabled || isExcludedSite() || wnd.height() < 30 || wnd.width() < 30) {
 				return;
 			}
 
@@ -241,20 +286,26 @@ var hoverZoom = {
 			}
 		}
 
+		function documentMouseDown() {
+			cancelImageLoading();
+			restoreTitles();
+		}
+
 		function loadFullSizeImage() {
 			// If no image is currently displayed...
 			if (!imgFullSize) {
 
 				// Full size image container
 				hoverZoomImg = hoverZoomImg || $('<div id="hoverZoomImg"></div>').appendTo(document.body);			
+				hoverZoomImg.css(hoverZoomImgCss);
 				hoverZoomImg.empty();
 				hoverZoomImg.stop(true, true).fadeTo(options.fadeDuration, options.picturesOpacity);
 
 				// Loading image container
-				imgLoading = imgLoading || $('<img class="loading" src="' + chrome.extension.getURL('images/loading.gif') + '"/>');
+				imgLoading = imgLoading || $('<img src="' + chrome.extension.getURL('images/loading.gif') + '" style="opacity: 0.8" />');
 				imgLoading.appendTo(hoverZoomImg);
 
-				imgFullSize = $('<img />').appendTo(hoverZoomImg).load(imgFullSizeOnLoad).error(imgFullSizeOnError).attr('src', imgSrc);
+				imgFullSize = $('<img style="border: none" />').appendTo(hoverZoomImg).load(imgFullSizeOnLoad).error(imgFullSizeOnError).attr('src', imgSrc);
 				imgHost = getHostFromUrl(imgSrc);
 
 				skipFadeIn = false;
@@ -263,7 +314,7 @@ var hoverZoom = {
 					lastImgWidth = hoverZoomImg.width();
 					posWhileLoading();
 				} else {
-					imgFullSize.addClass('progress');
+					imgFullSize.css(progressCss);
 				}
 
 				function imgFullSizeOnLoad() {
@@ -274,9 +325,9 @@ var hoverZoom = {
 						hoverZoomImg.offset({top:-9000, left:-9000});	// hides the image while making it available for size calculations
 						hoverZoomImg.empty();
 						imgLoading = null;
-						imgFullSize.removeClass('progress').appendTo(hoverZoomImg).mousemove(imgFullSizeOnMouseMove);
+						imgFullSize.css(imgFullSizeCss).appendTo(hoverZoomImg).mousemove(imgFullSizeOnMouseMove);
 						if (options.showCaptions && currentLink && currentLink.data('hoverZoomCaption')) {
-							hoverZoomCaption = $('<div/>', {id: 'hoverZoomCaption', text: currentLink.data('hoverZoomCaption')}).appendTo(hoverZoomImg);
+							hoverZoomCaption = $('<div/>', {id: 'hoverZoomCaption', text: currentLink.data('hoverZoomCaption')}).css(hoverZoomCaptionCss).appendTo(hoverZoomImg);
 							/*EXIF.getData(imgFullSize[0], function() {
 								$('<div>' + EXIF.getTag(imgFullSize[0], "Make") + '</div>').appendTo(hoverZoomCaption);								
 							});*/
@@ -527,11 +578,9 @@ var hoverZoom = {
 		}
 
 		function bindEvents() {
-			$(document).mousemove(documentMouseMove).mouseleave(cancelImageLoading).mousedown(restoreTitles);
+			$(document).mousemove(documentMouseMove).mouseleave(cancelImageLoading).mousedown(documentMouseDown);
 
-			wnd.bind('DOMNodeInserted', windowOnDOMNodeInserted);
-			wnd.load(prepareImgLinksAsync);
-			wnd.scroll(hideHoverZoomImg);
+			wnd.bind('DOMNodeInserted', windowOnDOMNodeInserted).load(prepareImgLinksAsync).scroll(cancelImageLoading);
 
 			if (options.actionKey || options.fullZoomKey) {
 				$(document).keydown(function(event) {

diff --git a/manifest.json b/manifest.json
@@ -8,7 +8,7 @@
 		"48": "images/icon48.png",
 		"128": "images/icon128.png"
 	},
-	"minimum_chrome_version": "6",
+	"minimum_chrome_version": "6.0.472.63",
 	"background_page": "background.html",
 	"options_page": "options.html",
 	"page_action": {
@@ -25,7 +25,6 @@
 	"content_scripts": [
         {
             "js": ["hoverzoom.js"],
-			"css": ["hoverzoom.css"],
 			"matches": ["<all_urls>"],
 			"all_frames": true
         },
@@ -40,7 +39,6 @@
 			       "plugins/flickr_a.js",
 				   "plugins/tumblr_a.js",
 				   "plugins/picasa_a.js",
-				   "plugins/imageshack_a.js",
 				   "plugins/skyrock_a.js",
 				   "plugins/fukung_a.js",
 				   "plugins/twitpic_a.js"],
@@ -530,7 +528,8 @@
 						"*://*.amazon.fr/*",
 						"*://*.amazon.de/*",
 						"*://*.amazon.co.jp/*",
-						"*://*.amazon.co.uk/*"],
+						"*://*.amazon.co.uk/*",
+						"*://*.gizmodo.jp/*"],
 			"run_at": "document_start"
         },
         {
@@ -703,6 +702,10 @@
 						"*://*.io9.com/*",
 						"*://*.lifehacker.com/*",
 						"*://*.gizmodo.com/*",
+						"*://*.gizmodo.jp/*",
+						"*://*.gizmodo.de/*",
+						"*://*.gizmodo.com.au/*",
+						"*://*.gizmodo.pl/*",
 						"*://*.deadspin.com/*",
 						"*://*.jezebel.com/*",
 						"*://*.jalopnik.com/*"],
@@ -760,6 +763,11 @@
 			"matches": ["*://*.rakuten.co.jp/*",
 						"*://*.rakuten.com/*"],
 			"run_at": "document_start"
+		},
+		{
+			"js": ["plugins/copainsdavant.js"],
+			"matches": ["*://copainsdavant.linternaute.com/*"],
+			"run_at": "document_start"
 		}
 	]
 }
diff --git a/options.html b/options.html
@@ -19,6 +19,7 @@
 			#title, #buttons, #about p, #messages p { text-align: center }
 			#delays p, #delays input, #txtPicturesOpacity { text-align: right }
 			.notice { font-size: 8pt; }
+			.hint { font-size: 8pt; padding-left: 25px }
 			#sliderPicturesOpacity { font-size: 0.7em; margin-bottom: 0.5em }
 			hr { margin: 0.7em 0 }
 		</style>
@@ -190,12 +191,14 @@ <h1 id="title">Hover Zoom Options</h1>
 						<li><a href="#optionTab4">Advanced</a></li>
 					</ul>
 					<div id="optionTab1">
-						<p><input type="checkbox" id="chkExtensionEnabled"> <label for="chkExtensionEnabled">Enable extension</label></p>
+						<p><input type="checkbox" id="chkExtensionEnabled"> <label for="chkExtensionEnabled">Enable Hover Zoom</label></p>
 						<h2>View</h2>
-						<p><input type="checkbox" id="chkPageActionEnabled"> <label for="chkPageActionEnabled">Show extension icon in address bar</label></p>
-						<p><input type="checkbox" id="chkShowCaptions"> <label for="chkShowCaptions">Show pictures captions</label></p>
+						<p><input type="checkbox" id="chkPageActionEnabled"> <label for="chkPageActionEnabled">Show icon in address bar<br>
+							<span class="hint">(Only when images can be zoomed)</span></label></p>
+						<p><input type="checkbox" id="chkShowCaptions"> <label for="chkShowCaptions">Show pictures captions<br>
+							<span class="hint">(When available)</span></label></p>
 						<p><input type="checkbox" id="chkShowHighRes"> <label for="chkShowHighRes">Show high resolution pictures when available<br>
-							<span style="font-size: 8pt; padding-left: 25px">(Pictures may take more time to load)</span></label></p>
+							<span class="hint">(Pictures may take more time to load)</span></label></p>
 						<hr>
 						<p><label for="txtPicturesOpacity">Zoomed pictures opacity</label>: <input type="text" id="txtPicturesOpacity" size="1"> %
 						<div id="sliderPicturesOpacity"></div>

diff --git a/plugins/amazon.js b/plugins/amazon.js
@@ -4,11 +4,11 @@
 var hoverZoomPlugins = hoverZoomPlugins || [];
 hoverZoomPlugins.push( {
 	name: 'Amazon',
-	version: '0.2',
+	version: '0.3',
 	prepareImgLinks: function(callback) {
 		var res = [];
 		hoverZoom.urlReplace(res, 
-			'a img[src*=.images-amazon.com]:not([src*=g-ecx.images-amazon.com]), a img[src*=/img.amazon.], .iv_thumb_image',
+			'img[src*=.images-amazon.com]:not([src*=g-ecx.images-amazon.com]), img[src*=/img.amazon.], .iv_thumb_image',
 			/\._.*\./,
 			'.'
 		);		

diff --git a/plugins/copainsdavant.js b/plugins/copainsdavant.js
@@ -0,0 +1,22 @@
+// Copyright (c) 2010 Romain Vallet
+// Licensed under the MIT license, read license.txt
+
+var hoverZoomPlugins = hoverZoomPlugins || [];
+hoverZoomPlugins.push( {
+	name: 'Copains d avant',
+	version: '0.1',
+	prepareImgLinks: function(callback) {
+		var res = [];
+		hoverZoom.urlReplace(res, 
+			'img[src*=image-uniservice]',
+			/\/image\/\d+\//,
+			'/image/450/'
+		);	
+		hoverZoom.urlReplace(res, 
+			'img[src*=image-parcours]',
+			/\/image\/\d+\//,
+			'/image/750/'
+		);	
+		callback($(res));	
+	}
+});
diff --git a/plugins/gawker.js b/plugins/gawker.js
@@ -7,11 +7,17 @@ hoverZoomPlugins.push( {
 	version: '0.1',
 	prepareImgLinks: function(callback) {
 		var res = [];
-		$('a img[src*=/assets/]').each(function() {
+		$('a img[src*=/assets]').each(function() {
 			var img = $(this),
 				url = hoverZoom.getThumbUrl(this);
 			if (!url) {	return;	}
-			url = url.replace(/\/(\d+x\d*|gallery)_/, '/');
+			if (url.indexOf('gizmodo.jp') > -1) {
+				url = url.replace(/^.*\/([^\/]*)-thumb-.*$/, 'http://img.gizmodo.jp/upload_files2/$1.jpg');
+			/*} else if (url.indexOf('lifehacker.jp') > -1) {
+				url = url.replace('/assets_c', '').replace(/-thumb-.*(\..*)$/, '$1');*/
+			} else {
+				url = url.replace(/\/(\d+x\d*|gallery)_/, '/');
+			}
 			if (img.hasClass('avatar')) { url = url.replace(/_\d+\./, '_160.'); }
 			url = url.substr(0, url.lastIndexOf('.'));
 			img.data('hoverZoomSrc', [url + '.jpg', url + '.png', url + '.gif', url]);
@@ -22,6 +28,16 @@ hoverZoomPlugins.push( {
 			/_[sqta]\./, 
 			'_n.'
 		);
+		hoverZoom.urlReplace(res, 
+			'img[src*=/wp/], img[src*=/wp-content/]',
+			/-\d+x\d+\./, 
+			'.'
+		);
+		hoverZoom.urlReplace(res, 
+			'img[src*=_thumb.]',
+			'_thumb.', 
+			'.'
+		);
 		callback($(res));	
 	}
 });
diff --git a/plugins/imgur_a.js b/plugins/imgur_a.js
@@ -50,7 +50,7 @@ hoverZoomPlugins.push( {
 		}
 
 		// Every sites
-		$('a[href*=/imgur.com/], a[href*=/i.imgur.com/]').each(prepareImgLink);
+		$('a[href*=//imgur.com/], a[href*=//i.imgur.com/]').each(prepareImgLink);
 
 		// On imgur.com (galleries, etc)
 		if (window.location.host.indexOf('imgur.com') > -1) {