# HG changeset patch
# User Matti Hamalainen <ccr@tnsp.org>
# Date 1463641892 -10800
# Node ID bc9da3b718881c683880d9faebe92c81151da42f
# Parent  fc8e6a0560166f4d373b3d837645ae4cc3c9b323
Implement imgur-style image zoom/de-zoom via image click/enter.
Might have bugs, probably does not work on mobile.

diff -r fc8e6a056016 -r bc9da3b71888 basic.css
--- a/basic.css	Thu May 12 23:32:21 2016 +0300
+++ b/basic.css	Thu May 19 10:11:32 2016 +0300
@@ -212,3 +212,30 @@
 	border-bottom: 1px solid #787;
 	border-right: 1px solid #787;
 }
+
+
+#imageLarge {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 20;
+	display: none;
+	margin: 1em;
+}
+
+#imageLarge img {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	max-height: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	border: 4px solid white;
+}
diff -r fc8e6a056016 -r bc9da3b71888 mgallery.php
--- a/mgallery.php	Thu May 12 23:32:21 2016 +0300
+++ b/mgallery.php	Thu May 19 10:11:32 2016 +0300
@@ -367,7 +367,11 @@
 
   $pageTitle = $galTitlePrefix.$galTitleSep.$galData["caption"]." - ".$galImage;
   cmPrintPageHeader($pageTitle);
-  echo "<h1>".chentities($pageTitle)."</h1>\n";
+  echo
+    "<div id=\"imageLarge\"><img src=\"".
+    $galImageURL.$galPath."/".$galImage."\" alt=\"".
+    chentities($data["base"].$galMedSuffix.$data["ext"])."\" /></div>\n".
+    "<h1>".chentities($pageTitle)."</h1>\n";
 
   if ($naviFlags & GNAV_BREADCRUMBS)
     mgPrintBreadCrumbs($galData);
@@ -379,8 +383,8 @@
   "<div class=\"imageCBox\">\n".
   mgGetNaviControlImageBox($galImagesIndex, $index, "prev", -1).
   "<div class=\"imageBox\">\n".
-  "<a target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
-  "<img src=\"".mgGetImageURL($galTNPath, $data["base"].$galMedSuffix.$data["ext"])."\" alt=\"".
+  "<a id=\"imageLink\" target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
+  "<img id=\"imageImage\" src=\"".mgGetImageURL($galTNPath, $data["base"].$galMedSuffix.$data["ext"])."\" alt=\"".
   chentities($data["base"].$galMedSuffix.$data["ext"])."\"></a>\n".
   "</div>\n".
   mgGetNaviControlImageBox($galImagesIndex, $index, "next", 1).
@@ -415,8 +419,35 @@
       "<script type=\"text/javascript\">\n".
       "var mgalPrevURL = \"".($prevActive ? $prevURL : "")."\";\n".
       "var mgalNextURL = \"".($nextActive ? $nextURL : "")."\";\n".
+      "var mgalExpanded = false;\n".
       "\n";
 ?>
+function mgalExpandClose(force)
+{
+  mgalExpanded = !mgalExpanded;
+  if (!force)
+    mgalExpanded = false;
+  
+  var mlink = document.getElementById("imageLink");
+  var mlarge = document.getElementById("imageLarge");
+  if (mlink && mlarge)
+  {
+    mlink.style.visibility = mgalExpanded ? "hidden" : "visible";
+    mlarge.style.display = mgalExpanded ? "block" : "none";
+  }
+  return false;
+}
+
+
+function mgalMouseExpandClose(event, force)
+{
+  if (!event.ctrlKey)
+    return mgalExpandClose(force);
+  else
+    return true;
+}
+
+
 function mgalNavigateTo(url)
 {
   if (url != "")
@@ -432,19 +463,40 @@
   {
     case 37:
     case 65:
+    case 52:
       // left
       mgalNavigateTo(mgalPrevURL);
       break;
 
     case 39:
     case 68:
+    case 54:
       // right
       mgalNavigateTo(mgalNextURL);
       break;
+
+    case 13:
+    case 48:
+      mgalExpandClose(true);
+      break;
+
+    case 27:
+      mgalExpandClose(false);
+      break;
+
+    default:
+      return true;
   }
+
+  ev.preventDefault();
+  return false;
 }
 
+
+document.getElementById("imageLarge").onclick = function(event) { return mgalMouseExpandClose(event, false); }
+document.getElementById("imageLink").onclick = function(event) { return mgalMouseExpandClose(event, true); }
 document.onkeypress = mgalProcessKeyPress;
+
 <?
     echo
       "</script>\n";