From 85f801a7d62cb8f640d7a0eb2ee98bc7f117928a Mon Sep 17 00:00:00 2001 From: Michael Tang Date: Wed, 27 Aug 2014 15:53:52 -0700 Subject: [PATCH] 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. https://github.com/akrennmair/ng-pdfviewer/pull/8 --- acj/static/acj-config.js | 6 +++ acj/static/index.html | 4 ++ acj/static/less/acj.less | 2 + acj/static/less/attachment.less | 3 ++ .../modules/answer/answer-form-partial.html | 4 +- acj/static/modules/answer/answer-module.js | 2 + .../modules/attachment/attachment-module.js | 49 +++++++++++++++++++ .../attachment/attachment-pdf-partial.html | 12 +++++ .../modules/comment/comment-form-partial.html | 4 +- acj/static/modules/comment/comment-module.js | 16 +++--- acj/static/modules/course/course-module.js | 2 +- .../course/course-questions-partial.html | 2 +- .../modules/judgement/judgement-module.js | 4 +- .../modules/judgement/judgement-partial.html | 23 +++++---- .../modules/question/question-module.js | 2 +- .../question/question-view-partial.html | 10 ++-- bower.json | 4 +- 17 files changed, 111 insertions(+), 38 deletions(-) create mode 100644 acj/static/less/attachment.less create mode 100644 acj/static/modules/attachment/attachment-module.js create mode 100644 acj/static/modules/attachment/attachment-pdf-partial.html diff --git a/acj/static/acj-config.js b/acj/static/acj-config.js index d233620df..bbb872222 100644 --- a/acj/static/acj-config.js +++ b/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', diff --git a/acj/static/index.html b/acj/static/index.html index 5c193b7c4..a2889a744 100644 --- a/acj/static/index.html +++ b/acj/static/index.html @@ -17,6 +17,8 @@ + + @@ -34,6 +36,7 @@ + @@ -64,6 +67,7 @@ + diff --git a/acj/static/less/acj.less b/acj/static/less/acj.less index f8618daa6..56931537e 100644 --- a/acj/static/less/acj.less +++ b/acj/static/less/acj.less @@ -24,3 +24,5 @@ // EVALUATE SCREEN @import 'judgement.less'; +// ANSWER SCREEN +@import 'attachment.less'; diff --git a/acj/static/less/attachment.less b/acj/static/less/attachment.less new file mode 100644 index 000000000..bc2ba83d1 --- /dev/null +++ b/acj/static/less/attachment.less @@ -0,0 +1,3 @@ +pdfviewer#viewer canvas{ + width: 100%; +} diff --git a/acj/static/modules/answer/answer-form-partial.html b/acj/static/modules/answer/answer-form-partial.html index 640a537ee..6d3891bf4 100644 --- a/acj/static/modules/answer/answer-form-partial.html +++ b/acj/static/modules/answer/answer-form-partial.html @@ -1,7 +1,6 @@

{{question.title}}

-
@@ -10,10 +9,9 @@

{{question.title}}

See question details: - {{file.alias}} + {{file.alias}}

-
diff --git a/acj/static/modules/answer/answer-module.js b/acj/static/modules/answer/answer-module.js index fe42e16a6..b1423f371 100644 --- a/acj/static/modules/answer/answer-module.js +++ b/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']; diff --git a/acj/static/modules/attachment/attachment-module.js b/acj/static/modules/attachment/attachment-module.js new file mode 100644 index 000000000..718517a98 --- /dev/null +++ b/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; + }; + } +); +})(); diff --git a/acj/static/modules/attachment/attachment-pdf-partial.html b/acj/static/modules/attachment/attachment-pdf-partial.html new file mode 100644 index 000000000..75537da14 --- /dev/null +++ b/acj/static/modules/attachment/attachment-pdf-partial.html @@ -0,0 +1,12 @@ +
+
+ First + Prev + {{currentPage}} / {{totalPages}} + Next + Last +
+
+ +
+
diff --git a/acj/static/modules/comment/comment-form-partial.html b/acj/static/modules/comment/comment-form-partial.html index ed66af8c2..46c5ed713 100644 --- a/acj/static/modules/comment/comment-form-partial.html +++ b/acj/static/modules/comment/comment-form-partial.html @@ -8,9 +8,9 @@

{{parent.title}}

- See answer details: + See details: - {{file.alias}} + {{file.alias}}

diff --git a/acj/static/modules/comment/comment-module.js b/acj/static/modules/comment/comment-module.js index 80231a3d5..07029fbf3 100644 --- a/acj/static/modules/comment/comment-module.js +++ b/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']; diff --git a/acj/static/modules/course/course-module.js b/acj/static/modules/course/course-module.js index d1d37dc7f..bb3c34079 100644 --- a/acj/static/modules/course/course-module.js +++ b/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; }); diff --git a/acj/static/modules/course/course-questions-partial.html b/acj/static/modules/course/course-questions-partial.html index 69c073297..4fb4a8947 100644 --- a/acj/static/modules/course/course-questions-partial.html +++ b/acj/static/modules/course/course-questions-partial.html @@ -64,7 +64,7 @@

See question details: - {{file.alias}} (PDF) + {{file.alias}}

diff --git a/acj/static/modules/judgement/judgement-module.js b/acj/static/modules/judgement/judgement-module.js index c5dce5f17..f8ec5b400 100644 --- a/acj/static/modules/judgement/judgement-module.js +++ b/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( diff --git a/acj/static/modules/judgement/judgement-partial.html b/acj/static/modules/judgement/judgement-partial.html index 212008ae3..6a76f7688 100644 --- a/acj/static/modules/judgement/judgement-partial.html +++ b/acj/static/modules/judgement/judgement-partial.html @@ -4,13 +4,13 @@

Evaluate Answers

{{question.title}}

- -
- {{file.alias}} -
+ +
+ {{file.alias}} +