Set up basic PDF viewer

services/web/app/views/project/editor.jade

@@ -85,7 +85,9 @@ block content
 				"underscore": "../libs/underscore-1.3.3",
 				"mathjax": "https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML",
 				"moment": "libs/moment-2.4.0",
-				"ace": "#{jsPath}ace"
+				"ace": "#{jsPath}ace",
+				"libs": "#{jsPath}libs",
+				"text": "#{jsPath}text"
 			},
 			"urlArgs" : "fingerprint=#{fingerprint(jsPath + 'ide.js')}",
 			"waitSeconds": 0,

services/web/app/views/project/editor/editor.jade

@@ -4,7 +4,7 @@ div.full-size(
 	resize-on="layout:main:resize"
 )
 	.ui-layout-center
-		.loading-panel(ng-show="true || !editor.sharejs_doc || editor.opening")
+		.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")
 			i.fa.fa-spin.fa-refresh
 			|   Loading...
 

services/web/app/views/project/editor/pdf.jade

@@ -1,12 +1,19 @@
-.toolbar.toolbar-tall
-	a.btn.btn-primary(
-		href
-	)
-		i.fa.fa-refresh
-		|  Recompile
-	a(
-		href
-		tooltip="Logs"
-		tooltip-placement="bottom"
-	)
-		i.fa.fa-file-text-o
+div.full-size(ng-controller="PdfController")
+	.toolbar.toolbar-tall
+		a.btn.btn-primary(
+			href
+		)
+			i.fa.fa-refresh
+			|  Recompile
+		a(
+			href
+			tooltip="Logs"
+			tooltip-placement="bottom"
+		)
+			i.fa.fa-file-text-o
+
+	.pdf-viewer
+		div(
+			pdfjs
+			pdf-src="pdf.url"
+		)

services/web/public/coffee/app/ide.coffee

@@ -6,6 +6,7 @@ define [
 	"ide/settings/SettingsManager"
 	"ide/online-users/OnlineUsersManager"
 	"ide/track-changes/TrackChangesManager"
+	"ide/pdf/PdfManager"
 	"ide/directives/layout"
 	"ide/services/ide"
 	"directives/focus"
@@ -20,6 +21,7 @@ define [
 	SettingsManager
 	OnlineUsersManager
 	TrackChangesManager
+	PdfManager
 ) ->
 	App.controller "IdeController", ["$scope", "$timeout", "ide", ($scope, $timeout, ide) ->
 		# Don't freak out if we're already in an apply callback
@@ -52,6 +54,7 @@ define [
 		ide.settingsManager = new SettingsManager(ide, $scope)
 		ide.onlineUsersManager = new OnlineUsersManager(ide, $scope)
 		ide.trackChangesManager = new TrackChangesManager(ide, $scope)
+		ide.pdfManager = new PdfManager(ide, $scope)
 	]
 
 	angular.bootstrap(document.body, ["SharelatexApp"])

services/web/public/coffee/app/ide/pdf/PdfManager.coffee

@@ -0,0 +1,6 @@
+define [
+	"ide/pdf/controllers/PdfController"
+	"ide/pdf/directives/pdfJs"
+], () ->
+	class PdfManager
+		constructor: (@ide, @$scope) ->

services/web/public/coffee/app/ide/pdf/controllers/PdfController.coffee

@@ -0,0 +1,7 @@
+define [
+	"base"
+], (App) ->
+	App.controller "PdfController", ["$scope", ($scope) ->
+		$scope.pdf =
+			url: "/ScalaByExample.pdf"
+	]

services/web/public/coffee/app/ide/pdf/directives/pdfJs.coffee

@@ -0,0 +1,66 @@
+define [
+	"base"
+	"libs/pdfListView/PdfListView"
+	"libs/pdfListView/TextLayerBuilder"
+	"libs/pdfListView/AnnotationsLayerBuilder"
+	"libs/pdfListView/HighlightsLayerBuilder"
+	"text!libs/pdfListView/TextLayer.css"
+	"text!libs/pdfListView/AnnotationsLayer.css"
+	"text!libs/pdfListView/HighlightsLayer.css"
+], (
+	App
+	PDFListView
+	TextLayerBuilder
+	AnnotationsLayerBuilder
+	HighlightsLayerBuilder
+	textLayerCss
+	annotationsLayerCss
+	highlightsLayerCss
+) ->
+	if PDFJS?
+		PDFJS.workerSrc = "#{window.sharelatex.pdfJsWorkerPath}"
+
+	style = $("<style/>")
+	style.text(textLayerCss + "\n" + annotationsLayerCss + "\n" + highlightsLayerCss)
+	$("body").append(style)
+
+	App.directive "pdfjs", () ->
+		return {
+			scope: {
+				"pdfSrc": "="
+			}
+			link: (scope, element, attrs) ->
+				pdfListView = new PDFListView element.find(".pdfjs-viewer")[0],
+					textLayerBuilder: TextLayerBuilder
+					annotationsLayerBuilder: AnnotationsLayerBuilder
+					highlightsLayerBuilder: HighlightsLayerBuilder
+					logLevel: PDFListView.Logger.DEBUG
+				pdfListView.listView.pageWidthOffset = 20
+				pdfListView.listView.pageHeightOffset = 20
+
+				scope.loading = false
+
+				onProgress = (progress) ->
+					scope.$apply () ->
+						scope.progress = Math.floor(progress.loaded/progress.total*100)
+						console.log "PROGRESS", scope.progress, progress.loaded, progress.total
+
+				scope.$watch "pdfSrc", (url) ->
+					if url
+						scope.loading = true
+						scope.progress = 0
+
+						pdfListView
+							.loadPdf(url, onProgress)
+							.then () ->
+								scope.$apply () ->
+									scope.loading = false
+									delete scope.progress
+
+			template: """
+				<div class="pdfjs-viewer"></div>
+				<div class="progress-thin" ng-show="loading">
+					<div class="progress-bar" ng-style="{ 'width': progress + '%' }"></div>
+				</div>
+			"""
+		}

services/web/public/stylesheets/app/editor.less

@@ -2,6 +2,7 @@
 @import "./editor/track-changes.less";
 @import "./editor/toolbar.less";
 @import "./editor/left-menu.less";
+@import "./editor/pdf.less";
 
 .full-size {
 	position: absolute;

services/web/public/stylesheets/app/editor/pdf.less

@@ -0,0 +1,30 @@
+.pdf-viewer {
+	.full-size;
+	top: 48px;
+	.pdfjs-viewer {
+		.full-size;
+		background-color: @gray-lighter;
+		overflow: scroll;
+		canvas {
+			background: white;
+			box-shadow: black 0px 0px 10px;
+		}
+		.page-container {
+			margin: 10px auto;
+			padding: 0 10px;
+			box-sizing: content-box;
+		}
+	}
+	.progress-thin {
+		position: absolute;
+		top: -2px;
+		height: 3px;
+		left: 0;
+		right: 0;
+		.progress-bar {
+			height: 100%;
+			background-color: @link-color;
+		}
+	}
+}
+