Added check for visibility of canvas when clicked

JeroenvO · Apr 25, 2014 · aa5e619 · aa5e619
1 parent beacc4e
commit aa5e619
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/examplejQuery.html b/examplejQuery.html
@@ -9,14 +9,17 @@
 canvas{
 	-ms-touch-action: none;   
 }
+canvas#c1 { display:none; }
 </style>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 <!--offcourse jquery is needed-->
 <script src="jquery-2.0.3.min.js"></script>
 <!--jquery wrapper for the timepicker-->
-<script src="jquery-timepicker.js"></script>
+<script src="jquery.timepicker.js"></script>
 <!-- also include the original file-->
 <script src="timePicker.js"></script>
+<script src="jquery.bpopup.js"></script>
+
 </head>
 <body>
 <h1>
@@ -34,19 +37,36 @@ <h1>
 <a href="jeroen.vanoorschot.biz">Jeroen van Oorschot</a><br /><a href="https://github.com/JeroenvO/html5-timepicker">github code</a>
 <a href="http://www.vanoorschot.biz/examplepopup.html">Use it in a popup</a>
 <br /><br />
-<canvas width="400" height="400" class="timePicker" id="1"></canvas>
-<canvas width="400" height="400" class="timePicker" id="2"></canvas>
+<canvas width="400" height="400" class="timePicker" id="c1"></canvas>
+<canvas width="400" height="400" class="timePicker" id="c2"></canvas>
+<button id="c1">Click here</button>
 <script>
-$(".timePicker").timepicker({
+//create the timepicker objects
+$(".timePicker").timePicker({
 	hours: 20,
 	minutes: 5,
 	color: 'blue'
 
 	});
+
+//make one of them a popup
+$('button#c1').bind('click', function(e){
+	e.preventDefault();
+			id = $(this).attr('id');
+			$('canvas#'+id).bPopup({ //popup canvas belonging to this button
+				appendTo: 'body'
+				, appending: false
+				, zIndex: 2
+				, positionStyle: 'fixed'
+				, onClose: function(){
+					$('button#'+id).text($('canvas#'+id).data('tp').getTimeStr());	//get the time from the timepicker
+				}
+			});
+});
 //the unique class identifier used for all the functions, is now stored in data('tp') So use this for the functions 
 </script>
-<button onClick="$('#1').data('tp').setColor('green')">Make 4th timepicker green</button>
-<button onClick="$('#1').data('tp').setColor('orange')">Make 4th timepicker orange</button>
+<button onClick="$('#2').data('tp').setColor('green')">Make 4th timepicker green</button>
+<button onClick="$('#2').data('tp').setColor('orange')">Make 4th timepicker orange</button>
 
 </body>
 </html>
diff --git a/jquery-timepicker.js → jquery.timepicker.js b/jquery-timepicker.js → jquery.timepicker.js
@@ -4,7 +4,7 @@
 
 
 (function ( $ ) {
-	$.fn.timepicker = function( options ) {
+	$.fn.timePicker = function( options ) {
 		return this.each(function(){
 			$(this).data('tp', new timePicker(this, options));
 		});

diff --git a/timePicker.js b/timePicker.js
@@ -279,15 +279,15 @@ function timePicker(canvas,opts){
 	//if the mouse is down, check whether it is on any of the handles
 	canvas.addEventListener('mousedown', function(e) {
 		//console.log(e);
-		if(timePicker.drawHandles){ //only enable select-handle if there are handles
+		if(timePicker.drawHandles && document.body.contains(timePicker.canvas)){ //only enable select-handle if there are handles
 			var mouse = timePicker.getMousePos(e);
 			timePicker.selected = timePicker.contains(mouse.x,mouse.y); //this functions sets timePicker.selected
 			timePicker.changed = true; //redraw to show selected handle on click, not only on draw
 		}
 	});
 	//if the mouse if moved AND a handler is selected, move the handler and calculate the new time
 	canvas.addEventListener('mousemove', function(e) {
-		if(timePicker.selected){
+		if(timePicker.selected && document.body.contains(timePicker.canvas)){
 			if(timePicker.onTimeChange){timePicker.onTimeChange();} //function executed when the handles are changed
 			//get mouse positions for moving
 			var mouse = timePicker.getMousePos(e);
@@ -308,12 +308,12 @@ function timePicker(canvas,opts){
 	//stop the selection when the mouse is released.
 	//bind this one to window to also stop the selection if mouse is released outside the canvas area.
 	window.addEventListener('mouseup', function(e) { 
-		if(timePicker.selected){
+		if(timePicker.selected && document.body.contains(timePicker.canvas)){
 			timePicker.animate(timePicker.selected,true); //animate handlers to position
 			timePicker.selected = false; // which handle is moving is now stored, so handle can be deselected
 			timePicker.changed = true;
 			}
-		if(timePicker.onCenterClick){
+		if(timePicker.onCenterClick && document.body.contains(timePicker.canvas)){
 			var mouse = timePicker.getMousePos(e);
 			if((Math.pow(timePicker.centerX-mouse.x,2)+Math.pow(timePicker.centerY-mouse.y,2))  < timePicker.scale*timePicker.scale*4 ){
 				timePicker.onCenterClick();