Update cursor position on frame request

Author: thelevicole

dist/cce.js

@@ -1,5 +1,5 @@
 /**
- * Simple element cursor plugin v1.0.0
+ * Simple element cursor plugin v1.1.0
  * 
  * Copyright (c) 2018 Levi Cole <me@thelevicole.com>
  * Licensed under MIT (http://opensource.org/licenses/MIT)
@@ -16,18 +16,21 @@
 			preserveCursor: false
 		}, options);
 
+		// Set default element styles
 		$cursor.css({
 			'position': 'fixed',
 			'pointer-events': 'none',
 			'z-index': 99999
 		});
 
-		if (!options.preserve_cursor) {
+		// Hide default browser cursor
+		if (!options.preserveCursor) {
 			$('head').append( $('<style>', {
 				text: '*, *:before, *:after { cursor: none; }'
 			}) );
 		}
 
+		// Define global variables
 		let mouse_x = 0,
 			mouse_y = 0;
 
@@ -37,47 +40,31 @@
 		let id		= '',
 			node	= '';
 
-		const move = () => {
-			// Convert cursor position into percentage
-			const x_percent = (mouse_x + options.offsetX) / window_x * 100;
-			const y_percent = (mouse_y + options.offsetY) / window_y * 100;
-
-			$cursor.show().css({
-				top: y_percent + '%',
-				left: x_percent + '%'
-			});
-
-			$cursor.attr('data-id', id);
-			$cursor.attr('data-el', node);
-		};
-
-		$(window).on('resize', function(event) {
-			window_x = $(window).width();
-			window_y = $(window).height();
-
-			move();
-		});
-
+		// Update global variables on document events
 		$(document).on('ready mousemove resize', function(event) {
 			const $target = $(event.target);
 
-			mouse_x = event.clientX;
-			mouse_y = event.clientY;
+			window_x	= $(window).width();
+			window_y	= $(window).height();
+			
+			mouse_x		= event.clientX;
+			mouse_y		= event.clientY;
 
-			id		= $target.attr('id') || $target.closest('[id]').attr('id') || '';
-			node	= $target.prop('nodeName').toLowerCase();
-
-			move();
+			id			= $target.attr('id') || $target.closest('[id]').attr('id') || '';
+			node		= $target.prop('nodeName').toLowerCase();
 		});
 
+		// Hide element if cursor leaves the document
 		$(document).on('mouseleave', function() {
 			$cursor.hide();
 		});
 
+		// Hide element if cursor enters an iframe
 		$('iframe').on('mouseenter', function() {
 			$cursor.hide();
 		});
 
+		// Add click event to element
 		$(document).on('mousedown mouseup', function(event) {
 			let event_name = '';
 
@@ -87,6 +74,28 @@
 
 			$cursor.attr('data-event', event_name);
 		});
+
+		/**
+		 * Tell the browser that we wish to perform an animation
+		 * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+		 */
+		window.requestAnimationFrame(function animation() {
+
+			// Convert cursor position into percentage
+			const x_percent = (mouse_x + options.offsetX) / window_x * 100;
+			const y_percent = (mouse_y + options.offsetY) / window_y * 100;
+
+			$cursor.show().css({
+				top: y_percent + '%',
+				left: x_percent + '%'
+			});
+
+			$cursor.attr('data-id', id);
+			$cursor.attr('data-el', node);
+			
+			window.requestAnimationFrame(animation);
+
+		});
 	};
 
 })(jQuery || window.jQuery);