zoom

main/scripts/drag.js

@@ -1,7 +1,59 @@
   	$(document).ready(function(){
 
+
+  		// ------------ DRAG ------------ 
+
 		$( function() {
-	  		$( ".draggable" ).draggable({ containment: [-1300,-750,1800,1250] });
+	  		$( ".draggable" ).draggable();
 		});
+//{ containment: [-1300,-750,1800,1250] }
+		// ------------ ZOOM -------------
+
+		// $(window).on('wheel', function(event){
+		// 	var zoom_wheel = 1.0;
+
+		// 	// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
+		// 	if(event.originalEvent.deltaY < 0){
+		// 		zoom_wheel += 0.1;
+		// 		var zoom_lvl = zoom_wheel.toString();
+		// 	    $('#chaos').css('transform', 'scale(' + zoom_lvl + ',' + zoom_lvl + ')');
+		// 	}
+		// 	else {
+		// 	    zoom_wheel -= 0.1;
+		// 	    var zoom_lvl = zoom_wheel.toString();
+		// 	    $('#chaos').css('transform', 'scale(' + zoom_lvl + ',' + zoom_lvl + ')');
+		// 	}
+		// });    
+
+
+
+		function zoom(event) {
+
+			$("body").mousemove(function(event){            
+            	var relX = event.pageX - $(this).offset().left;
+            	var relY = event.pageY - $(this).offset().top;
+
+            	var x_lvl = relX.toString();
+            	var y_lvl = relY.toString();
+            	$('body').css('transform-origin', x_lvl + " " + relY);
+        	});
+
+		    event.preventDefault();
+
+		    scale += event.deltaY * -0.01;
+
+		    // Restrict scale
+		    scale = Math.min(Math.max(.125, scale), 4);
+
+		    // Apply scale transform
+		    el.style.transform = `scale(${scale})`;
+
+		    
+		}
+
+		let scale = 1;
+		const el = document.querySelector('body');
+		el.onwheel = zoom;
+
 
-	});
+});