add spinners and classes for feedback on pdfng loading and rendering

services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee

@@ -8,7 +8,7 @@ define [
 			require: '^pdfViewer',
 			template: '''
 			<div class="plv-page-view page-view">
-				<div class="pdf-canvas"></div>
+				<div class="pdf-canvas pdfng-empty"></div>
 				<div class="plv-text-layer text-layer"></div>
 				<div class="plv-annotations-layer annotations-layer"></div>
 				<div class="plv-highlights-layer highlights-layer"></div>

services/web/public/coffee/ide/pdfng/directives/pdfRenderer.coffee

@@ -3,7 +3,7 @@ define [
 ], (App) ->
 	# App = angular.module 'PDFRenderer', ['pdfAnnotations', 'pdfTextLayer']
 
-	App.factory 'PDFRenderer', ['$q', '$timeout', 'pdfAnnotations', 'pdfTextLayer', ($q, $timeout, pdfAnnotations, pdfTextLayer) ->
+	App.factory 'PDFRenderer', ['$q', '$timeout', 'pdfAnnotations', 'pdfTextLayer', 'pdfSpinner', ($q, $timeout, pdfAnnotations, pdfTextLayer, pdfSpinner) ->
 
 		class PDFRenderer
 			JOB_QUEUE_INTERVAL: 25
@@ -14,6 +14,7 @@ define [
 				@scale = @options.scale || 1
 				@document = $q.when(PDFJS.getDocument @url)
 				@navigateFn = @options.navigateFn
+				@spinner = new pdfSpinner
 				@resetState()
 
 			resetState: () ->
@@ -59,7 +60,7 @@ define [
 				return if @complete[pagenum]
 				@renderQueue = @renderQueue.filter (q) ->
 					q.pagenum != pagenum
-				# @stopSpinner (element.canvas)
+				@spinner.stop(element.canvas)
 
 			triggerRenderQueue: (interval = @JOB_QUEUE_INTERVAL) ->
 				$timeout () =>
@@ -73,7 +74,6 @@ define [
 				@triggerRenderQueue(0)
 
 			renderPage: (element, pagenum) ->
-				viewport = $q.defer()
 				current = {
 					'element': element
 					'pagenum': pagenum
@@ -93,7 +93,8 @@ define [
 					return
 				@jobs = @jobs + 1
 
-				# @addSpinner(element.canvas)
+				element.canvas.addClass('pdfng-loading')
+				@spinner.add(element.canvas)
 
 				pageLoad = @getPage(pagenum)
 
@@ -116,7 +117,7 @@ define [
 					# console.log 'scale is undefined, returning'
 					return
 
-				canvas = $('<canvas class="pdf-canvas pdf-canvas-new"></canvas>')
+				canvas = $('<canvas class="pdf-canvas pdfng-rendering"></canvas>')
 
 				viewport = page.getViewport (scale)
 
@@ -160,27 +161,16 @@ define [
 				})
 
 				element.canvas.replaceWith(canvas)
-				canvas.removeClass('pdf-canvas-new')
 
 				return @renderTask = page.render {
 					canvasContext: ctx
 					viewport: viewport
 				}
 				.then () ->
+					canvas.removeClass('pdfng-rendering')
 					page.getTextContent().then (textContent) ->
 						textLayer.setTextContent textContent
 					page.getAnnotations().then (annotations) ->
 						annotationsLayer.setAnnotations annotations
 
-			addSpinner: (element) ->
-				h = element.height()
-				w = element.width()
-				size = Math.floor(0.5 * Math.min(h, w))
-				spinner = $('<div style="position: absolute; top: 50%; left:50%; transform: translateX(-50%) translateY(-50%); z-index: 2"><i class="fa fa-spinner fa-spin" style="color: #999"></i></div>')
-				spinner.css({'font-size' : size + 'px'})
-				element.append(spinner)
-
-			stopSpinner: (element) ->
-				element.find('.fa-spin').removeClass('fa-spin')
-
 		]

services/web/public/coffee/ide/pdfng/directives/pdfSpinner.coffee

@@ -0,0 +1,25 @@
+define [
+	"base"
+], (App) ->
+	App.factory 'pdfSpinner', [() ->
+
+		class pdfSpinner
+
+			constructor: () ->
+				# handler for spinners
+
+			add: (element) ->
+				h = element.height()
+				w = element.width()
+				size = Math.floor(0.5 * Math.min(h, w))
+				spinner = $('<div class="pdfng-spinner" style="position: absolute; top: 50%; left:50%; transform: translateX(-50%) translateY(-50%);"><i class="fa fa-spinner fa-spin" style="color: #999"></i></div>')
+				spinner.css({'font-size' : size + 'px'})
+				element.append(spinner)
+
+			stop: (element) ->
+				element.find('.fa-spin').removeClass('fa-spin')
+
+			remove: (element) ->
+				element.find('.fa-spin').remove()
+
+		]

services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee

@@ -5,6 +5,7 @@ define [
 	"ide/pdfng/directives/pdfHighlights"
 	"ide/pdfng/directives/pdfRenderer"
 	"ide/pdfng/directives/pdfPage"
+	"ide/pdfng/directives/pdfSpinner"
 	"libs/pdf"  # needs pdfjs-1.0.712, override the path in require.js to get it
 ], (
 	App
@@ -13,13 +14,16 @@ define [
 	pdfHighlights
 	pdfRenderer
 	pdfPage
+	pdfSpinner
 	pdf
 ) ->
 
 	# App = angular.module 'pdfViewerApp', ['pdfPage', 'PDFRenderer', 'pdfHighlights']
 
-	App.controller 'pdfViewerController', ['$scope', '$q', '$timeout', 'PDFRenderer', '$element', 'pdfHighlights', ($scope, $q, $timeout, PDFRenderer, $element, pdfHighlights) ->
+	App.controller 'pdfViewerController', ['$scope', '$q', '$timeout', 'PDFRenderer', '$element', 'pdfHighlights', 'pdfSpinner', ($scope, $q, $timeout, PDFRenderer, $element, pdfHighlights, pdfSpinner) ->
 		@load = () ->
+			$scope.pages = []
+
 			$scope.document = new PDFRenderer($scope.pdfSrc, {
 				scale: 1,
 				navigateFn: (ref) ->
@@ -199,7 +203,7 @@ define [
 
 	]
 
-	App.directive 'pdfViewer', ['$q', '$timeout', ($q, $timeout) ->
+	App.directive 'pdfViewer', ['$q', '$timeout', 'pdfSpinner', ($q, $timeout, pdfSpinner) ->
 		{
 			controller: 'pdfViewerController'
 			controllerAs: 'ctrl'
@@ -216,6 +220,7 @@ define [
 			link: (scope, element, attrs, ctrl) ->
 				# console.log 'in pdfViewer element is', element
 				# console.log 'attrs', attrs
+				spinner = new pdfSpinner
 				layoutReady = $q.defer()
 				layoutReady.notify 'waiting for layout'
 				layoutReady.promise.then () ->
@@ -237,12 +242,20 @@ define [
 						[h, w] = [element.innerHeight(), element.width()]
 						# console.log 'in promise', h, w
 						ctrl.setScale(scale, h, w).then () ->
+							spinner.remove(element)
 							ctrl.redraw(origposition)
 
 				scope.$on 'layout-ready', () ->
 					# console.log 'GOT LAYOUT READY EVENT'
 					# console.log 'calling refresh'
+					if element.height() == 0 or element.width() == 0
+						# if element is zero-sized keep checking until it is ready
+						$timeout () ->
+							scope.$broadcast 'layout-ready'
+						, 250
+						return
 					updateContainer()
+					spinner.add(element)
 					layoutReady.resolve 'layout is ready'
 					scope.parentSize = [
 						element.innerHeight(),

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

@@ -27,6 +27,15 @@
 			background: white;
 			box-shadow: black 0px 0px 10px;
 		}
+		div.pdf-canvas.pdfng-empty {
+			background-color: @gray-light;
+		}
+		div.pdf-canvas.pdfng-loading {
+			background-color: @gray-lighter;
+		}
+		canvas.pdf-canvas.pdfng-rendering {
+			box-shadow: red 0px 0px 10px;
+		}
 		.page-container {
 			margin: 10px auto;
 			padding: 0 10px;