From eb705d29f57efdfc97c76372e62f19d8a701d2ec Mon Sep 17 00:00:00 2001
From: Shish <shish@shishnet.org>
Date: Sat, 24 Mar 2012 11:16:59 +0000
Subject: [PATCH] image scaling cookie

---
 ext/handle_pixel/main.php  | 13 +++++++++++++
 ext/handle_pixel/script.js | 30 ++++++++++++++++++++++++++++++
 ext/handle_pixel/theme.php | 36 ++----------------------------------
 3 files changed, 45 insertions(+), 34 deletions(-)
 create mode 100644 ext/handle_pixel/script.js

diff --git a/ext/handle_pixel/main.php b/ext/handle_pixel/main.php
index 36dbef25..061a155a 100644
--- a/ext/handle_pixel/main.php
+++ b/ext/handle_pixel/main.php
@@ -75,6 +75,19 @@ class PixelFileHandler extends DataHandlerExtension {
 
 		return $ok;
 	}
+	
+	public function onImageAdminBlockBuilding(ImageAdminBlockBuildingEvent $event) {
+		$event->add_part("
+			<form>
+				<select id='zoomer'>
+					<option value='full'>Full Size</option>
+					<option value='width'>Fit Width</option>
+					<option value='height'>Fit Height</option>
+					<option value='both'>Fit Both</option>
+				</select>
+			</form>
+		", 20);
+	}
 
 // IM thumber {{{
 	private function make_thumb_convert(/*string*/ $inname, /*string*/ $outname) {
diff --git a/ext/handle_pixel/script.js b/ext/handle_pixel/script.js
new file mode 100644
index 00000000..796d55c8
--- /dev/null
+++ b/ext/handle_pixel/script.js
@@ -0,0 +1,30 @@
+$(function() {
+	$("#zoomer").change(function(e) {
+		zoom(this.options[this.selectedIndex].value);
+		$.cookie("ui-image-zoom", this.options[this.selectedIndex].value, {path: '/', expires: 365});
+	});
+
+	if($.cookie("ui-image-zoom")) {
+		zoom($.cookie("ui-image-zoom"));
+	}
+});
+
+function zoom(zoom) {
+	var img = $('#main_image');
+	if(zoom == "full") {
+		img.css('max-width', img.data('width') + 'px');
+		img.css('max-height', img.data('height') + 'px');
+	}
+	if(zoom == "width") {
+		img.css('max-width', '90%');
+		img.css('max-height', img.data('height') + 'px');
+	}
+	if(zoom == "height") {
+		img.css('max-width', img.data('width') + 'px');
+		img.css('max-height', (window.innerHeight * 0.9) + 'px');
+	}
+	if(zoom == "both") {
+		img.css('max-width', '90%');
+		img.css('max-height', (window.innerHeight * 0.9) + 'px');
+	}
+}
diff --git a/ext/handle_pixel/theme.php b/ext/handle_pixel/theme.php
index 88c14d63..03e6c99f 100644
--- a/ext/handle_pixel/theme.php
+++ b/ext/handle_pixel/theme.php
@@ -5,7 +5,6 @@ class PixelFileHandlerTheme extends Themelet {
 		global $config;
 
 		$u_ilink = $image->get_image_link();
-		$html = "<img alt='main image' id='main_image' src='$u_ilink'>";
 		if($config->get_bool("image_show_meta") && function_exists("exif_read_data")) {
 			# FIXME: only read from jpegs?
 			$exif = @exif_read_data($image->get_image_filename(), 0, true);
@@ -24,39 +23,8 @@ class PixelFileHandlerTheme extends Themelet {
 			}
 		}
 
-		$zoom_default = $config->get_bool("image_zoom", false) ? "scale(img);" : "";
-		$zoom = "<script type=\"text/javascript\">
-					img = document.getElementById(\"main_image\");
-					
-					if(img) {
-						img.onclick = function() {scale(img);};
-					
-						msg_div = document.createElement(\"div\");
-						msg_div.id = \"msg_div\";
-						msg_div.appendChild(document.createTextNode(\"Note: Image has been scaled to fit the screen; click to enlarge\"));
-						msg_div.style.display=\"none\";
-						img.parentNode.insertBefore(msg_div, img);
-					
-						orig_width = $image->width;
-					
-						$zoom_default
-					}
-					
-					function scale(img) {
-						if(orig_width >= img.parentNode.clientWidth * 0.9) {
-							if(img.style.width != \"90%\") {
-								img.style.width = \"90%\";
-								msg_div.style.display = \"block\";
-							}
-							else {
-								img.style.width = orig_width + 'px';
-								msg_div.style.display = \"none\";
-							}
-						}
-					}
-				</script>";
-		
-		$page->add_block(new Block("Image", $html.$zoom, "main", 10));
+		$html = "<img alt='main image' id='main_image' src='$u_ilink' data-width='{$image->width}' data-height='{$image->height}'>";
+		$page->add_block(new Block("Image", $html, "main", 10));
 	}
 }
 ?>