JavaScript-Demos/demos/animate-ref-angularjs/index.htm at master · gregorycode/JavaScript-Demos · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html ng-app="Demo">
<head>
	<meta charset="utf-8" />

	<title>
		Experimenting With ngAnimate And ng-animate-ref In AngularJS 1.4
	</title>

	<link rel="stylesheet" type="text/css" href="./demo.css"></link>
</head>
<body ng-controller="AppController">

	<h1>
		Experimenting With ngAnimate And ng-animate-ref In AngularJS 1.4
	</h1>

	<div class="collection unselected">

		<h3>
			Unselected ( {{ unselectedImages.length }} )
		</h3>

		<ul>
			<!--
				In order for the ng-animate-ref to work, the LEAVE'ing element and the
				ENTER'ing element have to share at least one non-core CSS class. In this
				case, they are both going to have "thumbnail-ref-container".

				CAUTION: This class name cannot begin with "ng-".

				NOTE: The actual "transport" element that gets created is based on the
				[ng-animate-ref] attribute, not the "class in common."
			-->
			<li
				ng-repeat="image in unselectedImages track by image.id"
				class="thumbnail-ref-container">

				<a ng-click="selectImage( image )">
					<img
						ng-src="./images/{{ image.id }}.{{ image.ext }}"
						ng-animate-ref="image-{{ image.id }}"
						class="thumbnail"
					/>
				</a>

			</li>
		</ul>

	</div>

	<div class="collection selected">

		<h3>
			Selected ( {{ selectedImages.length }} )
		</h3>

		<ul>
			<!--
				In order for the ng-animate-ref to work, the LEAVE'ing element and the
				ENTER'ing element have to share at least one non-core CSS class. In this
				case, they are both going to have "thumbnail-ref-container".
			-->
			<li
				ng-repeat="image in selectedImages track by image.id"
				class="thumbnail-ref-container">

				<a ng-click="unselectImage( image )">
					<img
						ng-src="./images/{{ image.id }}.{{ image.ext }}"
						ng-animate-ref="image-{{ image.id }}"
						class="thumbnail"
					/>
				</a>

			</li>
		</ul>

	</div>

	<!--
		When the LI is removed from one list and added to the other list, an ng-anchor
		transport element will be created and appended to the body. It will look something
		like this and will use any existing classes on the origin element (IMG) plus the
		ng-anchor related classes.

		<img
			ng-animate-ref="image-1"
			src="./images/1.jpg"
			class="thumbnail ng-anchor ng-anchor-out-add ng-anchor-out ng-anchor-out-add-active"
			style="width: 75px; height: 100px; top: 163px; left: 41px;"
		/>
	-->


	<!-- Load scripts. -->
	<script type="text/javascript" src="../../vendor/angularjs/angular-1.4.5.js"></script>
	<script type="text/javascript" src="../../vendor/angularjs/angular-animate-1.4.5.js"></script>
	<script type="text/javascript">

		// Create an application module for our demo.
		angular.module( "Demo", [ "ngAnimate" ] );


		// --------------------------------------------------------------------------- //
		// --------------------------------------------------------------------------- //


		// I control the root of the application.
		angular.module( "Demo" ).controller(
			"AppController",
			function AppController( $scope ) {

				// I am the collection of unselected images.
				$scope.unselectedImages = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].map(
					function operator( id ) {

						return({
							id: id,
							ext: "jpg"
						});

					}
				);

				// I am the collection of selected images.
				$scope.selectedImages = [];


				// ---
				// PUBLIC METHODS.
				// ---


				// I select the given image, moveing it to the selected list.
				$scope.selectImage = function( image ) {

					moveImageTo( image, $scope.unselectedImages, $scope.selectedImages );

				};


				// I unselect the given image, moveing it to the unselected list.
				$scope.unselectImage = function( image ) {

					moveImageTo( image, $scope.selectedImages, $scope.unselectedImages );

				};


				// ---
				// PRIVATE METHODS.
				// ---


				// I move the given image from one list to the other.
				function moveImageTo( image, from, to ) {

					var index = from.indexOf( image );

					from.splice( index, 1 );
					to.push( image );

					// After the list is mutated, let's sort it to make the animations
					// a bit easier to see on the screen.
					to.sort(
						function operator( a, b ) {

							return( ( a.id < b.id ) ? -1 : 1 )

						}
					);

				}

			}
		);

	</script>

</body>
</html>