From 206e7db144d7cdc67d5cc29016b0752884ea508f Mon Sep 17 00:00:00 2001 From: Brian Gough Date: Mon, 8 Dec 2014 14:46:59 +0000 Subject: [PATCH] add spinners and classes for feedback on pdfng loading and rendering --- .../ide/pdfng/directives/pdfPage.coffee | 2 +- .../ide/pdfng/directives/pdfRenderer.coffee | 24 ++++++------------ .../ide/pdfng/directives/pdfSpinner.coffee | 25 +++++++++++++++++++ .../ide/pdfng/directives/pdfViewer.coffee | 17 +++++++++++-- .../public/stylesheets/app/editor/pdf.less | 9 +++++++ 5 files changed, 57 insertions(+), 20 deletions(-) create mode 100644 services/web/public/coffee/ide/pdfng/directives/pdfSpinner.coffee diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee index 0f80b98db4..c440b6fc12 100644 --- a/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee +++ b/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee @@ -8,7 +8,7 @@ define [ require: '^pdfViewer', template: '''
-
+
diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfRenderer.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfRenderer.coffee index 05aa9f043e..68bfc560a7 100644 --- a/services/web/public/coffee/ide/pdfng/directives/pdfRenderer.coffee +++ b/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 = $('') 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 = $('
') - spinner.css({'font-size' : size + 'px'}) - element.append(spinner) - - stopSpinner: (element) -> - element.find('.fa-spin').removeClass('fa-spin') - ] diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfSpinner.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfSpinner.coffee new file mode 100644 index 0000000000..13614353e2 --- /dev/null +++ b/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 = $('') + 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() + + ] diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee index 50e1809eae..ece7c08d6e 100644 --- a/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee +++ b/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(), diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index e2bb32b7d2..12b04d2ab1 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/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;