PDF viewer

- currently using ng-pdfviewer from https://github.com/akrennmair/ng-pdfviewer/
- pdf links now opens new tab and display the pdf within a new
AttachmentPDFController
- The preferred way of displaying the pdfs is inline with the other
content, especially for the judgement page. However currently this
library only allows us to display one pdf per page. A fix has been
made but has not been pulled into the master branch of the library.
akrennmair/ng-pdfviewer#8

acj/static/acj-config.js

@@ -5,6 +5,7 @@ var myApp = angular.module('myApp', [
 	'ng-breadcrumbs',
 	'angular-loading-bar',
 	'ubc.ctlt.acj.answer',
+	'ubc.ctlt.acj.attachment',
 	'ubc.ctlt.acj.classlist',
 	'ubc.ctlt.acj.comment',
 	'ubc.ctlt.acj.course',
@@ -123,6 +124,11 @@ myApp.config( function ($routeProvider) {
 				templateUrl: 'modules/judgement/judgement-partial.html',
 				label: "Evaluate Answers"
 			})
+		.when('/course/:courseId/question/:questionId/post/:postId',
+			{
+				templateUrl: 'modules/attachment/attachment-pdf-partial.html',
+				label: "View Attachment"
+			})
 		.when('/user/create',
 			{
 				templateUrl: 'modules/user/user-create-partial.html',

acj/static/index.html

@@ -17,6 +17,8 @@
 		<script src="lib/es5-shim/es5-shim.js"></script>
 		<script src="lib/jquery/dist/jquery.js"></script>
 		<script src="lib/bootstrap/dist/js/bootstrap.js"></script>
+		<script src="lib/pdfjs-bower/dist/compatibility.js"></script>
+		<script src="lib/pdfjs-bower/dist/pdf.js"></script>
 		<script src="lib/angular/angular.js"></script>
 		<script src="lib/angular-animate/angular-animate.js"></script>
 		<script src="lib/angular-cookies/angular-cookies.js"></script>
@@ -34,6 +36,7 @@
 		<script src="lib/angular-moment/angular-moment.js"></script>
 		<script src="lib/angular-file-upload/angular-file-upload.js"></script>
 		<script src="lib/angular-mocks/angular-mocks.js"></script>
+		<script src="lib/ng-pdfviewer/ng-pdfviewer.js"></script>
 		<!-- endbower -->
 
 		<!-- Non-Bower Managed Includes -->
@@ -64,6 +67,7 @@
 		<script src="modules/user/user-module.js"></script>
 		<!-- - Individual Route Modules -->
 		<script src="modules/answer/answer-module.js"></script>
+		<script src="modules/attachment/attachment-module.js"></script>
 		<script src="modules/classlist/classlist-module.js"></script>
 		<script src="modules/comment/comment-module.js"></script>
 		<script src="modules/course/course-module.js"></script>

acj/static/less/acj.less

@@ -24,3 +24,5 @@
 // EVALUATE SCREEN
 @import 'judgement.less';
 
+// ANSWER SCREEN
+@import 'attachment.less';

acj/static/less/attachment.less

@@ -0,0 +1,3 @@
+pdfviewer#viewer canvas{
+	width: 100%;
+}

acj/static/modules/answer/answer-form-partial.html

@@ -1,7 +1,6 @@
 <form class="form" name="answerForm" ng-submit="answerSubmit()" novalidate>
 	<fieldset>
 		<h2><i class="fa fa-comments"></i> {{question.title}}</h2>
-
 		<div class="question-desc" mathjax="question.post.content"
 			ng-bind-html="question.post.content">
 		</div>
@@ -10,10 +9,9 @@ <h2><i class="fa fa-comments"></i> {{question.title}}</h2>
 		<p class="question-desc" ng-if="question.post.files.length">
 			See question details:
 			<span ng-repeat="file in question.post.files">
-				<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
+				<a target="_blank" ng-href="#/course/{{courseId}}/question/{{question.id}}/post/{{question.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
 			</span>
 		</p>
-
 		<hr />
 
 		<div>

acj/static/modules/answer/answer-module.js

@@ -40,6 +40,7 @@ module.controller(
 		QuestionResource, Toaster, attachService)
 	{
 		var courseId = $routeParams['courseId'];
+		$scope.courseId = courseId;
 		var questionId = $routeParams['questionId'];
 
 		$scope.uploader = attachService.getUploader();
@@ -90,6 +91,7 @@ module.controller(
 		QuestionResource, AttachmentResource, attachService, Toaster)
 	{
 		var courseId = $routeParams['courseId'];
+		$scope.courseId = courseId;
 		var questionId = $routeParams['questionId'];
 		$scope.answerId = $routeParams['answerId'];
 

acj/static/modules/attachment/attachment-module.js

@@ -0,0 +1,49 @@
+(function() {
+
+var module = angular.module('ubc.ctlt.acj.attachment',
+	[
+		'ngPDFViewer',
+		'ngResource',
+		'ubc.ctlt.acj.authorization',
+		'ubc.ctlt.acj.course',
+		'ubc.ctlt.acj.question',
+		'ubc.ctlt.acj.toaster'
+	]
+);
+
+/***** Controllers *****/
+module.controller(
+	"AttachmentPDFController",
+	function($scope, $log, $routeParams, Authorize, CourseResource, QuestionResource, PDFViewerService, Toaster)
+	{
+		var courseId = $routeParams['courseId'];
+		var questionId = $routeParams['questionId'];
+		var postId = $routeParams['postId'];
+
+		Authorize.can(Authorize.READ, CourseResource.MODEL).then(function(result) {
+			$scope.canReadCourse = result;
+		});
+		Authorize.can(Authorize.READ, QuestionResource.MODEL).then(function(result) {
+		    	$scope.canReadQuestion = result;
+		});
+		$scope.pdfURL = 'pdf/'+ courseId + '_' + questionId + '_' + postId + '.pdf';
+		$scope.instance = PDFViewerService.Instance("viewer");
+		$scope.nextPage = function() {
+			$scope.instance.nextPage();
+		};
+
+		$scope.prevPage = function() {
+			$scope.instance.prevPage();
+		};
+
+		$scope.gotoPage = function(page) {
+			$scope.instance.gotoPage(page);
+		};
+
+		$scope.pageLoaded = function(curPage, totalPages) {
+			$scope.currentPage = curPage;
+			$scope.totalPages = totalPages;
+		};
+	}
+);
+})();

acj/static/modules/attachment/attachment-pdf-partial.html

@@ -0,0 +1,12 @@
+<div ng-controller="AttachmentPDFController">
+	<div class="row text-center">
+		<a class="btn btn-success" ng-click="gotoPage(1)">First</a>
+		<a class="btn btn-success" ng-click="prevPage()">Prev</a>
+		{{currentPage}} / {{totalPages}}
+		<a class="btn btn-success" ng-click="nextPage()">Next</a>
+		<a class="btn btn-success" ng-click="gotoPage(totalPages)">Last</a>
+	</div>
+	<div class="row">
+		<pdfviewer src="{{pdfURL}}" id="viewer" on-page-load='pageLoaded(page, total)'></pdfviewer>
+	</div>
+</div>

acj/static/modules/comment/comment-form-partial.html

@@ -8,9 +8,9 @@ <h2 ng-if="parent.title"><i class="fa fa-comments"></i> {{parent.title}}</h2>
 		</div>
 		<!-- Attachment -->
 		<p class="question-desc" ng-if="parent.post.files.length">
-			See answer details:
+			See details:
 			<span ng-repeat="file in parent.post.files">
-				<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
+				<a target="_blank" ng-href="#/course/{{courseId}}/question/{{questionId}}/post/{{parent.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
 			</span>
 		</p>
 		<hr />

acj/static/modules/comment/comment-module.js

@@ -46,8 +46,8 @@ module.controller(
 	"QuestionCommentCreateController",
 	function ($scope, $log, $location, $routeParams, QuestionCommentResource, QuestionResource, Toaster)
 	{
-		var courseId = $routeParams['courseId'];
-		var questionId = $routeParams['questionId'];
+		var courseId = $scope.courseId = $routeParams['courseId'];
+		var questionId = $scope.questionId = $routeParams['questionId'];
 
 		$scope.comment = {};
 		QuestionResource.get({'courseId': courseId, 'questionId': questionId}).$promise.then(
@@ -82,8 +82,8 @@ module.controller(
 	"QuestionCommentEditController",
 	function ($scope, $log, $location, $routeParams, QuestionCommentResource, QuestionResource, Toaster)
 	{
-		var courseId = $routeParams['courseId'];
-		var questionId = $routeParams['questionId'];
+		var courseId = $scope.courseId = $routeParams['courseId'];
+		var questionId = $scope.questionId = $routeParams['questionId'];
 		var commentId = $routeParams['commentId'];
 
 		$scope.comment = {};
@@ -141,8 +141,8 @@ module.controller(
 	"AnswerCommentCreateController",
 	function ($scope, $log, $location, $routeParams, AnswerCommentResource, AnswerResource, QuestionResource, Authorize, required_rounds, Toaster)
 	{
-		var courseId = $routeParams['courseId'];
-		var questionId = $routeParams['questionId'];
+		var courseId = $scope.courseId = $routeParams['courseId']
+		var questionId = $scope.questionId = $routeParams['questionId'];
 		var answerId = $routeParams['answerId'];
 
 		$scope.canManagePosts = 
@@ -196,8 +196,8 @@ module.controller(
 	"AnswerCommentEditController",
 	function ($scope, $log, $location, $routeParams, AnswerCommentResource, AnswerResource, Toaster)
 	{
-		var courseId = $routeParams['courseId'];
-		var questionId = $routeParams['questionId'];
+		var courseId = $scope.courseId = $routeParams['courseId'];
+		var questionId = $scope.questionId = $routeParams['questionId'];
 		var answerId = $routeParams['answerId'];
 		var commentId = $routeParams['commentId'];
 

acj/static/modules/course/course-module.js

@@ -67,7 +67,7 @@ module.controller(
 	function($scope, $log, $routeParams, CourseResource, QuestionResource, Authorize, AuthenticationService, required_rounds, Toaster)
 	{
 		// get course info
-		var courseId = $routeParams['courseId'];
+		var courseId = $scope.courseId = $routeParams['courseId'];
 		Authorize.can(Authorize.CREATE, QuestionResource.MODEL).then(function(result) {
 				$scope.canCreateQuestions = result;
 		});

acj/static/modules/course/course-questions-partial.html

@@ -64,7 +64,7 @@ <h3 class="media-heading">
 				<p class="question-desc" ng-if="question.post.files.length">
 					See question details:
 					<span ng-repeat="file in question.post.files">
-						<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}} (PDF)</a>
+						<a target="_blank" ng-href="#/course/{{courseId}}/question/{{question.id}}/post/{{question.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
 					</span>
 				</p>
 

acj/static/modules/judgement/judgement-module.js

@@ -39,8 +39,8 @@ module.controller(
 	function($log, $location, $scope, $timeout, $routeParams, $anchorScroll, QuestionResource, AnswerResource,
 		CriteriaResource, JudgementResource, Toaster) 
 	{
-		var courseId = $routeParams['courseId'];
-		var questionId = $routeParams['questionId'];
+		var courseId = $scope.courseId = $routeParams['courseId'];
+		var questionId = $scope.questionId = $routeParams['questionId'];
 
 		$scope.question = {};
 		QuestionResource.get({'courseId': courseId, 'questionId': questionId}).$promise.then(

acj/static/modules/judgement/judgement-partial.html

@@ -4,13 +4,13 @@ <h1>Evaluate Answers</h1>
 
 	<div class="standalone-question">
 		<h2><i class="fa fa-comments"></i> {{question.title}}</h2>
-		<!-- Attachment -->
-		<div ng-if="question.post.files.length" ng-repeat="file in question.post.files">
-			<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}}</a>
-		</div>
 		<div mathjax="question.post.content"
 			ng-bind-html="question.post.content">
 		</div>
+		<!-- Attachment -->
+		<div ng-if="question.post.files.length" ng-repeat="file in question.post.files">
+			<a target="_blank" ng-href="#/course/{{courseId}}/question/{{questionId}}/post/{{question.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
+		</div>
 	</div>
 
 	<div ng-show="answerPairError" class="alert alert-warning" role="alert">
@@ -28,13 +28,13 @@ <h2>1) Evaluate each answer</h2>
 				<div class="col-md-6">
 					<div class="answer-choice">
 						<h3 class="text-center">Answer 1</h3>
-						<!-- Attachment -->
-						<div ng-if="answerPair.answer1.post.files.length" ng-repeat="file in answerPair.answer1.post.files">
-							<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}}</a>
-						</div>
 						<div mathjax="answerPair.answer1.post.content"
 							ng-bind-html="answerPair.answer1.post.content">
 						</div>
+						<!-- Attachment -->
+						<div ng-if="answerPair.answer1.post.files.length" ng-repeat="file in answerPair.answer1.post.files">
+							<a target="_blank" ng-href="#/course/{{courseId}}/question/{{questionId}}/post/{{answerPair.answer1.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
+						</div>
 						<a href="" class="btn btn-default btn-xs"
 							title="Flag as incomplete or inappropriate."
 							ng-class="{'btn-danger': answerPair.answer1.flagged}"
@@ -48,13 +48,12 @@ <h3 class="text-center">Answer 1</h3>
 				<div class="col-md-6">
 					<div class="answer-choice">
 						<h3 class="text-center">Answer 2</h3>
-						<!-- Attachment -->
-						<div ng-if="answerPair.answer2.post.files.length" ng-repeat="file in answerPair.answer2.post.files">
-							<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}}</a>
-						</div>
 						<div mathjax="answerPair.answer2.post.content"
 							ng-bind-html="answerPair.answer2.post.content">
 						</div>
+						<!-- Attachment -->
+						<div ng-if="answerPair.answer2.post.files.length" ng-repeat="file in answerPair.answer2.post.files">
+							<a target="_blank" ng-href="#/course/{{courseId}}/question/{{questionId}}/post/{{answerPair.answer2.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>						</div>
 						<a href="" class="btn btn-default btn-xs pull-right"
 							title="Flag as incomplete or inappropriate."
 							ng-class="{'btn-danger': answerPair.answer2.flagged}"

acj/static/modules/question/question-module.js

@@ -123,7 +123,7 @@ module.controller("QuestionViewController",
 	function($scope, $log, $routeParams, AnswerResource, Authorize, QuestionResource, QuestionCommentResource, AttachmentResource, required_rounds, Session, Toaster)
 	{
 		$scope.courseId = $routeParams['courseId'];
-		var questionId = $routeParams['questionId'];
+		var questionId = $scope.questionId = $routeParams['questionId'];
 		Session.getUser().then(function(user) {
 		    $scope.loggedInUserId = user.id;
 		});

acj/static/modules/question/question-view-partial.html

@@ -14,7 +14,7 @@ <h2><i class="fa fa-comments"></i> {{question.title}}</h2>
 		<p class="question-desc" ng-if="question.post.files.length">
 			See question details:
 			<span ng-repeat="file in question.post.files">
-				<a target="_blank" ng-href="pdf/{{file.name}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
+				<a target="_blank" ng-href="#/course/{{courseId}}/question/{{question.id}}/post/{{question.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
 			</span>
 		</p>
 
@@ -132,9 +132,7 @@ <h2>Answers</h2>
 					<p ng-if="answer.post.files.length" class="content">
 						See answer details:
 						<span ng-repeat="file in answer.post.files">
-							<a target="_blank" ng-href="pdf/{{file.name}}">
-								{{file.alias}} <i class="fa fa-file-pdf-o"></i>
-							</a>
+							<a target="_blank" ng-href="#/course/{{courseId}}/question/{{questionId}}/post/{{answer.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
 						</span>
 					</p>
 
@@ -220,9 +218,7 @@ <h3 class="reply-heading" ng-if="answer.comments.length">
 					<p ng-if="answer.post.files.length" class="content">
 						See answer details:
 						<span ng-repeat="file in answer.post.files">
-							<a target="_blank" ng-href="pdf/{{file.name}}">
-								{{file.alias}} <i class="fa fa-file-pdf-o"></i>
-							</a>
+							<a target="_blank" ng-href="#/course/{{courseId}}/question/{{questionId}}/post/{{answer.post.id}}">{{file.alias}} <i class="fa fa-file-pdf-o"></i></a>
 						</span>
 					</p>
 

bower.json

@@ -20,6 +20,7 @@
     "bootstrap": "~3.2.0",
     "fontawesome": "~4.1.0",
     "angular": "~1.3.0",
+    "pdfjs-bower": "~1.0.233",
     "angular-animate": "~1.3.0",
     "angular-cookies": "~1.3.0",
     "angular-resource": "~1.3.0",
@@ -33,7 +34,8 @@
     "AngularJS-Toaster": "~0.4.7",
     "angular-moment": "~0.7.1",
     "angular-file-upload": "~1.0.2",
-    "angular-mocks": "~1.3.0"
+    "angular-mocks": "~1.3.0",
+    "ng-pdfviewer": "~0.2.1"
   },
   "resolutions": {
     "angular-animate": "~1.3.0",