AngularJS-MouseHandling/mouse_capture_directive.js at master · ashleydavis/AngularJS-MouseHandling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
angular.module('mouseCapture', [] )

//
// Service used to acquire 'mouse capture' then receive dragging events while the mouse is captured.
//
.factory('mouseCapture', function ($rootScope) {

	//
	// Element that the mouse capture applies to, defaults to 'document'
	// unless the 'mouse-capture' directive is used.
	//
	var $element = document;

	//
	// Set when mouse capture is acquired to an object that contains
	// handlers for 'mousemove' and 'mouseup' events.
	//
	var mouseCaptureConfig = null;

	//
	// Handler for mousemove events while the mouse is 'captured'.
	//
	var mouseMove = function (evt) {

		if (mouseCaptureConfig && mouseCaptureConfig.mouseMove) {

			mouseCaptureConfig.mouseMove(evt);

			$rootScope.$digest();
		}
	};

	//
	// Handler for mouseup event while the mouse is 'captured'.
	//
	var mouseUp = function (evt) {

		if (mouseCaptureConfig && mouseCaptureConfig.mouseUp) {

			mouseCaptureConfig.mouseUp(evt);

			$rootScope.$digest();
		}
	};

	return {

		//
		// Register an element to use as the mouse capture element instead of
		// the default which is the document.
		//
		registerElement: function(element) {

			$element = element;
		},

		//
		// Acquire the 'mouse capture'.
		// After acquiring the mouse capture mousemove and mouseup events will be
		// forwarded to callbacks in 'config'.
		//
		acquire: function (evt, config) {

			//
			// Release any prior mouse capture.
			//
			this.release();

			mouseCaptureConfig = config;

	  		//
	  		// In response to the mousedown event register handlers for mousemove and mouseup
	  		// during 'mouse capture'.
	  		//
  			$element.mousemove(mouseMove);
  			$element.mouseup(mouseUp);
  			$element.mouseout(mouseUp);
  			$element.bind('touchmove', mouseMove);
  			$element.bind('touchend', mouseUp);
		},

		//
		// Release the 'mouse capture'.
		//
		release: function () {

			if (mouseCaptureConfig) {

				if (mouseCaptureConfig.released) {
					//
					// Let the client know that their 'mouse capture' has been released.
					//
					mouseCaptureConfig.released();
				}

				mouseCaptureConfig = null;

  				$element.unbind("mousemove", mouseMove);
  				$element.unbind("mouseup", mouseUp);
  				$element.unbind('touchmove', mouseMove);
  				$element.unbind('touchend', mouseUp);
  			}
		},
	};
})

//
// Directive that marks the mouse capture element.
//
.directive('mouseCapture', function () {
  return {
  	restrict: 'A',

  	controller: function($scope, $element, $attrs, mouseCapture) {

  		//
  		// Register the directives element as the mouse capture element.
  		//
  		mouseCapture.registerElement($element);

  	},
  };
})
;