Make current page number editable to quickly switch pages.

src/styles/components/_presentation.scss

@@ -99,3 +99,8 @@
 .presentation .overlaybar span {
   line-height: 30px;
 }
+
+.pageinfo input {
+  display: inline;
+  width: 70px;
+}

static/js/directives/pdfcanvas.js

@@ -34,6 +34,7 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 				this.doc = null;
 				this.rendering = false;
 				this.currentPage = null;
+				this.currentPageNumber = null;
 				this.pendingPageNumber = null;
 			};
 
@@ -49,7 +50,7 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 				}
 				this.rendering = false;
 				this.pendingPageNumber = null;
-				this.scope.currentPageNumber = -1;
+				this.currentPageNumber = -1;
 				this.scope.maxPageNumber = -1;
 				// clear visible canvas so it's empty when we show the next document
 				var canvas = this.canvases[this.scope.canvasIndex];
@@ -86,7 +87,7 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 					this.scope.$apply(_.bind(function(scope) {
 						this.doc = doc;
 						scope.maxPageNumber = doc.numPages;
-						scope.currentPageNumber = -1;
+						this.currentPageNumber = -1;
 						console.log("PDF loaded", doc);
 						scope.$emit("pdfLoaded", source, doc);
 					}, this));
@@ -94,7 +95,7 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 			};
 
 			PDFCanvas.prototype._showPage = function(page) {
-				if (page === this.scope.currentPageNumber) {
+				if (page === this.currentPageNumber) {
 					return;
 				}
 
@@ -104,7 +105,7 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 					this.currentPage = null;
 				}
 				this.rendering = true;
-				this.scope.currentPageNumber = page;
+				this.currentPageNumber = page;
 				this.scope.$emit("pdfPageLoading", page);
 				this.doc.getPage(page).then(_.bind(function(pageObject) {
 					console.log("Got page", pageObject);
@@ -169,11 +170,11 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 			};
 
 			PDFCanvas.prototype.prevPage = function() {
-				this.showPage(this.scope.currentPageNumber - 1);
+				this.showPage(this.currentPageNumber - 1);
 			};
 
 			PDFCanvas.prototype.nextPage = function() {
-				this.showPage(this.scope.currentPageNumber + 1);
+				this.showPage(this.currentPageNumber + 1);
 			};
 
 			PDFCanvas.prototype.showQueuedPage = function() {
@@ -183,7 +184,6 @@ define(['require', 'underscore', 'jquery', 'pdf'], function(require, _, $, pdf)
 				}
 			};
 
-			$scope.currentPageNumber = -1;
 			$scope.maxPageNumber = -1;
 			$scope.canvasIndex = 0;
 

static/js/directives/presentation.js

@@ -50,6 +50,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 
 			$scope.$on("pdfLoaded", function(event, source, doc) {
 				$scope.downloading = false;
+				$scope.currentPageNumber = -1;
 				if ($scope.isPresenter) {
 					$scope.$emit("showPdfPage", 1);
 				} else if ($scope.pendingPageRequest !== null) {
@@ -61,6 +62,10 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 				$scope.presentationLoaded = true;
 			});
 
+			$scope.$watch("currentPageNumber", function(newval, oldval) {
+				$scope.$emit("showPdfPage", newval);
+			});
+
 			var downloadScope = $scope.$new();
 			downloadScope.$on("downloadedChunk", function(event, idx, byteLength, downloaded, total) {
 				var percentage = Math.ceil((downloaded / total) * 100);
@@ -253,6 +258,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 			};
 
 			$scope.$on("pdfPageLoading", function(event, page) {
+				$scope.currentPageNumber = page;
 				if ($scope.receivedPage === page) {
 					// we received this page request, don't publish to others
 					$scope.receivedPage = null;

static/partials/presentation.html

@@ -17,7 +17,7 @@
 		<a class="overlaybar-button" ng-model="hideControlsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Presentation controls')}}"><i class="fa fa-cogs"></i></a>
 		<form class="overlaybar-content form-group">
 			<a class="btn btn-prev" ng-click="prevPage()" ng-show="currentPageNumber &gt; 1" title="{{_('Prev')}}"><i class="fa fa-backward"></i></a>
-			<span class="pageinfo">{{ currentPageNumber }} / {{ maxPageNumber }}</span>
+			<span class="pageinfo"><input class="form-control input-sm" type="number" ng-model="currentPageNumber" /> / {{ maxPageNumber }}</span>
 			<a class="btn btn-next" ng-click="nextPage()" ng-show="currentPageNumber &lt; maxPageNumber" title="{{_('Next')}}"><i class="fa fa-forward"></i></a>
 		</form>
 	</div>