leefsmp/viewer-directive-demo.html

## viewer-directive-demo.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>ADN Viewer Directive Demo</title>

<link type="text/css"
	  rel="stylesheet"
	  href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.css"/>

</head>

<body>

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

<div ng-controller="Autodesk.ADN.Demo.Controller">

	<!-- A spinning image using adn-spinning-img directive-->
	<a class="navbar-brand"
	   href="http://www.autodesk.com"
		target="_blank">
		<adn-spinning-img
			step="5.0"
			period="100"
			height="256"
			width="256"
			src="img.jpg"/>
	</a>

	<!-- basic adn-viewer-div -->
	<adn-viewer-div style="width: 300px; height: 300px;"
		url="<replace with generated token or token url>"
		urn="<replace with dcument URN generated with same token as above>">
	</adn-viewer-div>

	<button ng-click="load()">Load</button>
	<button ng-click="close()">Close</button>

	<!-- adn-viewer-div with initialized callback-->
	<adn-viewer-div style="width: 300px; height: 300px;"
		id="viewer"
		url="{{tokenUrl}}"
		urn="{{docUrn}}"
		viewer-initialized="onViewerInitialized(viewer)">

	</adn-viewer-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="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
<script src="https://rawgit.com/Developer-Autodesk/library-javascript-view.and.data.api/master/js/Autodesk.ADN.Toolkit.Viewer.js"></script>

<script>

// References
// https://docs.angularjs.org/guide/directive
// https://github.com/angular/angular.js/wiki/Understanding-Directives
// http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

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

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

	$scope.tokenUrl = '<replace with token or token url>';

	$scope.onViewerInitialized = function(viewer) {

		viewer.addEventListener(
			Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
			function (event) {
					console.log('Geometry Loaded...');
			});
	}

	$scope.load = function() {
		$scope.docUrn =
			"<replace with document URN >";
	}

	$scope.close = function() {
		$scope.docUrn = "";
	}

}]);

app.directive('adnSpinningImg',
		['$interval', function($interval) {

	function link($scope, $element, $attributes) {

		var angle = 0.0;

		function update() {

			angle += parseFloat($attributes.step);

			angle = angle % 360;

			var value = "rotateY(" + angle + "deg)";

			jQuery($element).css({
				"transform": value,
				"-moz-transform": value,
				"-webkit-transform": value,
				"-ms-transform": value,
				"-o-transform": value
			});
		}

		var timerId = $interval(function() {
			update();
		}, parseInt($attributes.period));
	}

	return {
		restrict: 'E',
		replace: true,
		template: '<img height={{height}}width={{width}}'
			+ 'src={{src}}style={{style}}>',
		link: link
	}
}]);

app.directive('adnViewerDiv', function () {

	function link($scope, $element, $attributes) {

		// instanciate viewer manager in directive scope

		$scope.adnViewerMng =
		 new Autodesk.ADN.Toolkit.Viewer.AdnViewerManager(
			$attributes.url,
			$element[0],
			($attributes.hasOwnProperty('environment') ?
				$attributes.environment :
				'AutodeskProduction'));

		$attributes.$observe('urn', function(urn) {

			// check if urn is not empty
			// if empty close doc
			if(urn.length) {

				// loads document from urn
				$scope.adnViewerMng.loadDocument(
					urn,
					function (viewer) {
						$scope.viewerInitialized({
							viewer: viewer
						})
					});
			}
			else {
				$scope.adnViewerMng.closeDocument();
			}
		});
	}

	return {
		scope: {
			url: '@',
			urn: '@',
			viewerInitialized: '&'
		},
		restrict: 'E',
		replace: true,
		template: '<div style="overflow: hidden;' +
		 ' position: relative; {{style}}"><div/>',
		link: link
	};
});

</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>ADN Viewer Directive Demo</title>

	<link type="text/css"
	rel="stylesheet"
	href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.css"/>

	</head>

	<body>

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

	<div ng-controller="Autodesk.ADN.Demo.Controller">

	<!-- A spinning image using adn-spinning-img directive-->
	<a class="navbar-brand"
	href="http://www.autodesk.com"
	target="_blank">
	<adn-spinning-img
	step="5.0"
	period="100"
	height="256"
	width="256"
	src="img.jpg"/>
	</a>

	<!-- basic adn-viewer-div -->
	<adn-viewer-div style="width: 300px; height: 300px;"
	url="<replace with generated token or token url>"
	urn="<replace with dcument URN generated with same token as above>">
	</adn-viewer-div>

	<button ng-click="load()">Load</button>
	<button ng-click="close()">Close</button>

	<!-- adn-viewer-div with initialized callback-->
	<adn-viewer-div style="width: 300px; height: 300px;"
	id="viewer"
	url="{{tokenUrl}}"
	urn="{{docUrn}}"
	viewer-initialized="onViewerInitialized(viewer)">

	</adn-viewer-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="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
	<script src="https://rawgit.com/Developer-Autodesk/library-javascript-view.and.data.api/master/js/Autodesk.ADN.Toolkit.Viewer.js"></script>

	<script>

	// References
	// https://docs.angularjs.org/guide/directive
	// https://github.com/angular/angular.js/wiki/Understanding-Directives
	// http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

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

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

	$scope.tokenUrl = '<replace with token or token url>';

	$scope.onViewerInitialized = function(viewer) {

	viewer.addEventListener(
	Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
	function (event) {
	console.log('Geometry Loaded...');
	});
	}

	$scope.load = function() {
	$scope.docUrn =
	"<replace with document URN >";
	}

	$scope.close = function() {
	$scope.docUrn = "";
	}

	}]);

	app.directive('adnSpinningImg',
	['$interval', function($interval) {

	function link($scope, $element, $attributes) {

	var angle = 0.0;

	function update() {

	angle += parseFloat($attributes.step);

	angle = angle % 360;

	var value = "rotateY(" + angle + "deg)";

	jQuery($element).css({
	"transform": value,
	"-moz-transform": value,
	"-webkit-transform": value,
	"-ms-transform": value,
	"-o-transform": value
	});
	}

	var timerId = $interval(function() {
	update();
	}, parseInt($attributes.period));
	}

	return {
	restrict: 'E',
	replace: true,
	template: '<img height={{height}}width={{width}}'
	+ 'src={{src}}style={{style}}>',
	link: link
	}
	}]);

	app.directive('adnViewerDiv', function () {

	function link($scope, $element, $attributes) {

	// instanciate viewer manager in directive scope

	$scope.adnViewerMng =
	new Autodesk.ADN.Toolkit.Viewer.AdnViewerManager(
	$attributes.url,
	$element[0],
	($attributes.hasOwnProperty('environment') ?
	$attributes.environment :
	'AutodeskProduction'));

	$attributes.$observe('urn', function(urn) {

	// check if urn is not empty
	// if empty close doc
	if(urn.length) {

	// loads document from urn
	$scope.adnViewerMng.loadDocument(
	urn,
	function (viewer) {
	$scope.viewerInitialized({
	viewer: viewer
	})
	});
	}
	else {
	$scope.adnViewerMng.closeDocument();
	}
	});
	}

	return {
	scope: {
	url: '@',
	urn: '@',
	viewerInitialized: '&'
	},
	restrict: 'E',
	replace: true,
	template: '<div style="overflow: hidden;' +
	' position: relative; {{style}}"><div/>',
	link: link
	};
	});

	</script>
	</body>

	</html>