From 3e4a16ef004f5f8e73e9cca2659b680fb4f894df Mon Sep 17 00:00:00 2001
From: mattbk <bedrocks@gmail.com>
Date: Thu, 5 Nov 2015 15:42:34 -0600
Subject: [PATCH] Add a transparent div on top of the image

Capture mouse clicks even when images aren't showing.
---
 css/style.css          | 16 +++++++++++++---
 js/change.js           |  6 +++---
 views/change.html.twig |  4 ++++
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6e36cf1..a5a2466 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,13 +2,23 @@ body {
     padding-top: 40px;
 }
 
+#outside {
+    cursor: pointer;
+	z-index:10; 
+	position:relative;
+}
+
 #rotator {
-    //background: #dddddd;
 	background: #ffffff;
 	// 90vh is 90% of viewer height: http://stackoverflow.com/a/16837667/2152245
     height:80vh;
-    overflow: hidden;
+	width:auto;
+    //overflow: hidden;
     cursor: pointer;
+	z-index:0; 
+	position: absolute;
+    left: 0px;
+    top: 0px;
 }
 
 #rotator img {
@@ -16,4 +26,4 @@ body {
     max-height:80vh;	
 	width:auto;
     margin: 0;
-}
\ No newline at end of file
+}
diff --git a/js/change.js b/js/change.js
index 8d32949..22c8bba 100644
--- a/js/change.js
+++ b/js/change.js
@@ -1,6 +1,6 @@
 // Script settings.
-var slideDuration = 500;
-var blankDuration = 200;
+var slideDuration = 600;
+var blankDuration = 400;
 
 // Script internals.
 var $currentSlide;
@@ -22,7 +22,7 @@ $(document).ready(function(){
 
     startTime = d1.getTime();
 
-    $('#rotator').mousedown(function(event){
+    $('#outside').mousedown(function(event){
         document.getElementById('xcoordinate').value = event.pageX - this.offsetLeft;
         document.getElementById('ycoordinate').value = event.pageY - this.offsetTop;
         var d2 = new Date(); var endTime = d2.getTime();
diff --git a/views/change.html.twig b/views/change.html.twig
index d63b4d9..b688c6e 100644
--- a/views/change.html.twig
+++ b/views/change.html.twig
@@ -7,10 +7,14 @@
     <div id="placeholder" class="well">
         <p>Please wait while the images are loaded.</p>
     </div>
+	<div id="outside">
+		<!-- This hidden image keeps the div open and the right size, even when #rotator is hidden in change.js. -->
+		<img src="{{ imageWithElement}}" style="visibility:hidden; position:relative;">
     <div id="rotator" class="hide">
         <img src="{{ imageWithElement}}">
         <img src="{{ imageWithoutElement}}">
     </div>
+	</div>
     <form method="post" action="" name="changeform" id="changeform">
         <input type="hidden" name="xcoordinate" id="xcoordinate" value="0">
         <input type="hidden" name="ycoordinate" id="ycoordinate" value="0">
-- 
2.39.5