mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
add spinners and classes for feedback on pdfng loading and rendering
This commit is contained in:
Brian Gough
parent
89d63c4f44
commit
206e7db144
5 changed files with 57 additions and 20 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
||||
]
|
||||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue