Get PDF controls working

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

@@ -16,4 +16,6 @@ div.full-size(ng-controller="PdfController")
 		div(
 			pdfjs
 			pdf-src="pdf.url"
+			key="project_id"
+			resize-on="layout:main:resize,layout:pdf:resize"
 		)

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

@@ -24,7 +24,7 @@ define [
 	style.text(textLayerCss + "\n" + annotationsLayerCss + "\n" + highlightsLayerCss)
 	$("body").append(style)
 
-	App.directive "pdfjs", () ->
+	App.directive "pdfjs", ["$timeout", ($timeout) ->
 		return {
 			scope: {
 				"pdfSrc": "="
@@ -45,6 +45,32 @@ define [
 						scope.progress = Math.floor(progress.loaded/progress.total*100)
 						console.log "PROGRESS", scope.progress, progress.loaded, progress.total
 
+				initializedPosition = false
+				initializePosition = () ->
+					return if initializedPosition
+					initializedPosition = true
+
+					if (scale = $.localStorage("pdf.scale"))?
+						pdfListView.setScaleMode(scale.scaleMode, scale.scale)
+					else
+						pdfListView.setToFitWidth()
+
+					if (position = $.localStorage("pdf.position.#{attrs.key}"))
+						pdfListView.setPdfPosition(position)
+
+					$(window).unload () =>
+						$.localStorage "pdf.scale", {
+							scaleMode: pdfListView.getScaleMode()
+							scale: pdfListView.getScale()
+						}
+						$.localStorage "pdf.position.#{attrs.key}", pdfListView.getPdfPosition()
+
+				flashControls = () ->
+					scope.flashControls = true
+					$timeout () ->
+						scope.flashControls = false
+					, 1000	
+
 				scope.$watch "pdfSrc", (url) ->
 					if url
 						scope.loading = true
@@ -56,11 +82,73 @@ define [
 								scope.$apply () ->
 									scope.loading = false
 									delete scope.progress
+									initializePosition()
+									flashControls()
+
+				scope.fitToHeight = () ->
+					pdfListView.setToFitHeight()
+
+				scope.fitToWidth = () ->
+					pdfListView.setToFitWidth()
+
+				scope.zoomIn = () ->
+					scale = pdfListView.getScale()
+					pdfListView.setScale(scale * 1.2)
+
+				scope.zoomOut = () ->
+					scale = pdfListView.getScale()
+					pdfListView.setScale(scale / 1.2)
+
+				if attrs.resizeOn?
+					for event in attrs.resizeOn.split(",")
+						scope.$on event, () ->
+							pdfListView.onResize()
 
 			template: """
 				<div class="pdfjs-viewer"></div>
+				<div class="pdfjs-controls" ng-class="{'flash': flashControls }">
+					<div class="btn-group">
+						<a href
+							class="btn btn-info btn-lg"
+							ng-click="fitToWidth()"
+							tooltip="Fit to Width"
+							tooltip-append-to-body="true"
+							tooltip-placement="bottom"
+						>
+							<i class="fa fa-fw fa-arrows-h"></i>
+						</a>
+						<a href
+							class="btn btn-info btn-lg"
+							ng-click="fitToHeight()"
+							tooltip="Fit to Height"
+							tooltip-append-to-body="true"
+							tooltip-placement="bottom"
+						>
+							<i class="fa fa-fw fa-arrows-v"></i>
+						</a>
+						<a href
+							class="btn btn-info btn-lg"
+							ng-click="zoomIn()"
+							tooltip="Zoom In"
+							tooltip-append-to-body="true"
+							tooltip-placement="bottom"
+						>
+							<i class="fa fa-fw fa-search-plus"></i>
+						</a>
+						<a href
+							class="btn btn-info btn-lg"
+							ng-click="zoomOut()"
+							tooltip="Zoom Out"
+							tooltip-append-to-body="true"
+							tooltip-placement="bottom"
+						>
+							<i class="fa fa-fw fa-search-minus"></i>
+						</a>
+					</div>
+				</div>
 				<div class="progress-thin" ng-show="loading">
 					<div class="progress-bar" ng-style="{ 'width': progress + '%' }"></div>
 				</div>
 			"""
-		}
+		}
+	]

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

@@ -26,5 +26,32 @@
 			background-color: @link-color;
 		}
 	}
+	.pdfjs-controls {
+		position: absolute;
+		padding: @line-height-computed / 2;
+		top: 0;
+		left: 0;
+		display: inline-block;
+		.btn-group {
+			transition: opacity 0.5s ease, visibility 0 linear 0.5s;
+			visibility: hidden;
+			opacity: 0;
+		}
+		&:hover, &.flash {
+			.btn-group {
+				transition: none;
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+		i.fa-arrows-h {
+			border-right: 2px solid white;
+			border-left: 2px solid white;
+		}
+		i.fa-arrows-v {
+			border-top: 2px solid white;
+			border-bottom: 2px solid white;
+		}
+	}
 }
 				

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

@@ -64,7 +64,7 @@
 	&.toolbar-tall {
 		height: 48px;
 		a.btn {
-			margin-left: 12px;
+			margin-left: (@line-height-computed / 2);
 		}
 		a:not(.btn) {
 			padding-top: 10px;