leefsmp/carousel.html

## carousel.html
<!--///////////////////////////////////////////////////////////////////////////
// Copyright (c) Autodesk, Inc. All rights reserved
// Written by Philippe Leefsma 2015 - ADN/Developer Technical Services
//
// Permission to use, copy, modify, and distribute this software in
// object code form for any purpose and without fee is hereby granted,
// provided that the above copyright notice appears in all copies and
// that both that copyright notice and the limited warranty and
// restricted rights notice below appear in all supporting
// documentation.
//
// AUTODESK PROVIDES THIS PROGRAM "AS IS" AND WITH ALL FAULTS.
// AUTODESK SPECIFICALLY DISCLAIMS ANY IMPLIED WARRANTY OF
// MERCHANTABILITY OR FITNESS FOR A PARTICULAR USE.  AUTODESK, INC.
// DOES NOT WARRANT THAT THE OPERATION OF THE PROGRAM WILL BE
// UNINTERRUPTED OR ERROR FREE.
///////////////////////////////////////////////////////////////////////////-->
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width">

	<title>Bootstrap UI Carousel Demo</title>

	<link type="text/css" rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.css"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

</head>

<body>

	<div ng-app="Autodesk.ADN.Demo.Bootstrap.App">

		<div ng-controller="Autodesk.ADN.Demo.Bootstrap.Controller"
			 style="height: 490px; width: 490px">

			<div >
				<!-- a bootstrap ui carousel with custom directive for onSildeChanged event -->
				<carousel interval="myInterval"
						  on-carousel-change="onSlideChanged(nextSlide, direction)">

					<slide ng-repeat="slide in slides" active="slide.active">

						<iframe
							width='100%' height='100%' frameborder='0'
							allowFullScreen webkitallowfullscreen mozallowfullscreen
							ng-src='{{slide.url | trustAsResourceUrl}}'>
						</iframe>

						<div class="carousel-caption">
							<h4>Model {{$index+1}}</h4>
							<p>{{slide.name}}</p>
						</div>

					</slide>
				</carousel>
			</div>

			<div class="row">
				<br>
				<div class="col-md-6">
					<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
				</div>
				<div class="col-md-6">
					Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
					<br />Enter a negative number or 0 to stop the interval.
				</div>
			</div>

		</div>

	</div>

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

<script>

var app = angular.module(
	'Autodesk.ADN.Demo.Bootstrap.App',
		['ui.bootstrap']);

app.controller('Autodesk.ADN.Demo.Bootstrap.Controller',
		['$scope', '$http', function ($scope, $http) {

			$scope.myInterval = 8000;

			$scope.slides = [];

			$scope.count = 1;

			// add slide from modelId - internal method
			function addSlide(index) {

				getGalleryModel(index, function(model){

					var url = 'http://viewer.autodesk.io/node/gallery/embed/';

					$scope.slides.push({
						url: url + model._id,
						name: model.name
					});

					$scope.slides[$scope.slides.length - 1].active = true;
				});
			};

			// on slide changed event - just for testing
			$scope.onSlideChanged = function (nextSlide, direction) {

				//console.log('onSlideChanged:', direction, nextSlide);
			};

			// returns random int in [min, max]
			function randomInt(min, max) {

				 return Math.floor(Math.random() * (max - min)) + min;
			 }

			// jsonP call to get total number of models in the Gallery
			function getGalleryModelCount(onSuccess) {

				var url =  'http://gallery.autodesk.io/api/modelcount';

				$http.jsonp(url + "?callback=JSON_CALLBACK").
					success(function(data, status, headers, config) {
						onSuccess(data.count);
					}).
					error(function(data, status, headers, config) {
						console.log('Error: ' + status);
					});
			}

			// get model data from index
			function getGalleryModel(index, onSuccess) {

				// use Gallery REST API to pick up one model
				var url =  'http://gallery.autodesk.io/api/models?skip='
						+ index + '&limit=1';

				$http.jsonp(url + "&callback=JSON_CALLBACK").
					success(function(data, status, headers, config) {
						onSuccess(data.models[0]);
					}).
					error(function(data, status, headers, config) {
						console.log('Error: ' + status);
					});
			}

			// add slide - scope method
			$scope.addSlide = function() {

				// picks a random model from the gallery
				var index = randomInt(0, $scope.count-1);

				addSlide(index);
			}

			// stores model count
			getGalleryModelCount(function(count) {

				$scope.count = count;
			});

			// Adds first slide
			addSlide(0);
}]);

// a directive to watch carousel slide changed event
app.directive('onCarouselChange', function ($parse) {
	return {
		require: 'carousel',
		link: function (scope, element, attrs, carouselCtrl) {
			var fn = $parse(attrs.onCarouselChange);
			var origSelect = carouselCtrl.select;
			carouselCtrl.select = function (nextSlide, direction) {
				if (nextSlide !== this.currentSlide) {
					fn(scope, {
						nextSlide: nextSlide,
						direction: direction
					});
				}
				return origSelect.apply(this, arguments);
			};
		}
	};
});

// needs that filter to bind iframe ng-src to scope member
app.filter('trustAsResourceUrl', ['$sce', function($sce) {
	return function(url) {
		return $sce.trustAsResourceUrl(url);
}}]);

</script>
</body>

</html>
	<!--///////////////////////////////////////////////////////////////////////////
	// Copyright (c) Autodesk, Inc. All rights reserved
	// Written by Philippe Leefsma 2015 - ADN/Developer Technical Services
	//
	// Permission to use, copy, modify, and distribute this software in
	// object code form for any purpose and without fee is hereby granted,
	// provided that the above copyright notice appears in all copies and
	// that both that copyright notice and the limited warranty and
	// restricted rights notice below appear in all supporting
	// documentation.
	//
	// AUTODESK PROVIDES THIS PROGRAM "AS IS" AND WITH ALL FAULTS.
	// AUTODESK SPECIFICALLY DISCLAIMS ANY IMPLIED WARRANTY OF
	// MERCHANTABILITY OR FITNESS FOR A PARTICULAR USE. AUTODESK, INC.
	// DOES NOT WARRANT THAT THE OPERATION OF THE PROGRAM WILL BE
	// UNINTERRUPTED OR ERROR FREE.
	///////////////////////////////////////////////////////////////////////////-->
	<html>

	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width">

	<title>Bootstrap UI Carousel Demo</title>

	<link type="text/css" rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.css"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

	</head>

	<body>

	<div ng-app="Autodesk.ADN.Demo.Bootstrap.App">

	<div ng-controller="Autodesk.ADN.Demo.Bootstrap.Controller"
	style="height: 490px; width: 490px">

	<div >
	<!-- a bootstrap ui carousel with custom directive for onSildeChanged event -->
	<carousel interval="myInterval"
	on-carousel-change="onSlideChanged(nextSlide, direction)">

	<slide ng-repeat="slide in slides" active="slide.active">

	<iframe
	width='100%' height='100%' frameborder='0'
	allowFullScreen webkitallowfullscreen mozallowfullscreen
	ng-src='{{slide.url \| trustAsResourceUrl}}'>
	</iframe>

	<div class="carousel-caption">
	<h4>Model {{$index+1}}</h4>
	<p>{{slide.name}}</p>
	</div>

	</slide>
	</carousel>
	</div>

	<div class="row">
	<br>
	<div class="col-md-6">
	<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
	</div>
	<div class="col-md-6">
	Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
	<br />Enter a negative number or 0 to stop the interval.
	</div>
	</div>

	</div>

	</div>

	<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
	<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

	<script>

	var app = angular.module(
	'Autodesk.ADN.Demo.Bootstrap.App',
	['ui.bootstrap']);

	app.controller('Autodesk.ADN.Demo.Bootstrap.Controller',
	['$scope', '$http', function ($scope, $http) {

	$scope.myInterval = 8000;

	$scope.slides = [];

	$scope.count = 1;

	// add slide from modelId - internal method
	function addSlide(index) {

	getGalleryModel(index, function(model){

	var url = 'http://viewer.autodesk.io/node/gallery/embed/';

	$scope.slides.push({
	url: url + model._id,
	name: model.name
	});

	$scope.slides[$scope.slides.length - 1].active = true;
	});
	};

	// on slide changed event - just for testing
	$scope.onSlideChanged = function (nextSlide, direction) {

	//console.log('onSlideChanged:', direction, nextSlide);
	};

	// returns random int in [min, max]
	function randomInt(min, max) {

	return Math.floor(Math.random() * (max - min)) + min;
	}

	// jsonP call to get total number of models in the Gallery
	function getGalleryModelCount(onSuccess) {

	var url = 'http://gallery.autodesk.io/api/modelcount';

	$http.jsonp(url + "?callback=JSON_CALLBACK").
	success(function(data, status, headers, config) {
	onSuccess(data.count);
	}).
	error(function(data, status, headers, config) {
	console.log('Error: ' + status);
	});
	}

	// get model data from index
	function getGalleryModel(index, onSuccess) {

	// use Gallery REST API to pick up one model
	var url = 'http://gallery.autodesk.io/api/models?skip='
	+ index + '&limit=1';

	$http.jsonp(url + "&callback=JSON_CALLBACK").
	success(function(data, status, headers, config) {
	onSuccess(data.models[0]);
	}).
	error(function(data, status, headers, config) {
	console.log('Error: ' + status);
	});
	}

	// add slide - scope method
	$scope.addSlide = function() {

	// picks a random model from the gallery
	var index = randomInt(0, $scope.count-1);

	addSlide(index);
	}

	// stores model count
	getGalleryModelCount(function(count) {

	$scope.count = count;
	});

	// Adds first slide
	addSlide(0);
	}]);

	// a directive to watch carousel slide changed event
	app.directive('onCarouselChange', function ($parse) {
	return {
	require: 'carousel',
	link: function (scope, element, attrs, carouselCtrl) {
	var fn = $parse(attrs.onCarouselChange);
	var origSelect = carouselCtrl.select;
	carouselCtrl.select = function (nextSlide, direction) {
	if (nextSlide !== this.currentSlide) {
	fn(scope, {
	nextSlide: nextSlide,
	direction: direction
	});
	}
	return origSelect.apply(this, arguments);
	};
	}
	};
	});

	// needs that filter to bind iframe ng-src to scope member
	app.filter('trustAsResourceUrl', ['$sce', function($sce) {
	return function(url) {
	return $sce.trustAsResourceUrl(url);
	}}]);

	</script>
	</body>

	</html>