fix pdf viewer to work without background scope.apply

This commit is contained in:
Brian Gough 2015-01-23 16:58:53 +00:00
parent 1160560bfb
commit bd8cfb1dae
2 changed files with 53 additions and 55 deletions

View file

@ -63,10 +63,11 @@ define [
$.localStorage "pdf.position.#{attrs.key}", scope.position $.localStorage "pdf.position.#{attrs.key}", scope.position
flashControls = () -> flashControls = () ->
scope.flashControls = true scope.$evalAsync () ->
$timeout () -> scope.flashControls = true
scope.flashControls = false $timeout () ->
, 1000 scope.flashControls = false
, 1000
scope.$on 'pdfDoubleClick', (event, e) -> scope.$on 'pdfDoubleClick', (event, e) ->
scope.dblClickCallback?(page: e.page - 1, offset: { top: e.y, left: e.x }) scope.dblClickCallback?(page: e.page - 1, offset: { top: e.y, left: e.x })
@ -91,8 +92,9 @@ define [
# flashControls() # flashControls()
scope.$on "loaded", () -> scope.$on "loaded", () ->
scope.loading = false $timeout () ->
delete scope.progress scope.loading = false
delete scope.progress
#scope.$watch "highlights", (areas) -> #scope.$watch "highlights", (areas) ->
# console.log 'got HIGHLIGHTS in pdfJS', areas # console.log 'got HIGHLIGHTS in pdfJS', areas
@ -155,8 +157,12 @@ define [
scope.$on 'progress', (event, progress) -> scope.$on 'progress', (event, progress) ->
scope.$apply () -> scope.$apply () ->
#console.log 'progress', progress.loaded, progress.total, progress
scope.progress = Math.floor(progress.loaded/progress.total*100) scope.progress = Math.floor(progress.loaded/progress.total*100)
scope.progress = 100 if scope.progress > 100
scope.progress = 0 if scope.progress < 0
scope.$on '$destroy', () ->
# console.log 'pdfjs destroy event'
template: """ template: """
<div data-pdf-viewer class="pdfjs-viewer" pdf-src='pdfSrc' position='position' scale='scale' highlights='highlights' please-jump-to='pleaseJumpTo'></div> <div data-pdf-viewer class="pdfjs-viewer" pdf-src='pdfSrc' position='position' scale='scale' highlights='highlights' please-jump-to='pleaseJumpTo'></div>

View file

@ -274,57 +274,54 @@ define [
return visiblePages.concat extra return visiblePages.concat extra
doRescale = (scale) -> doRescale = (scale) ->
# console.log 'doRescale', scale console.log 'doRescale', scale
return unless scale?
origposition = angular.copy scope.position origposition = angular.copy scope.position
# console.log 'origposition', origposition # console.log 'origposition', origposition
layoutReady.promise.then () -> layoutReady.promise.then (parentSize) ->
[h, w] = [element.innerHeight(), element.width()] [h, w] = parentSize
# console.log 'in promise', h, w console.log 'in promise', h, w
ctrl.setScale(scale, h, w).then () -> ctrl.setScale(scale, h, w).then () ->
console.log 'in setscale then', scale, h, w
spinner.remove(element) spinner.remove(element)
ctrl.redraw(origposition) scope.$evalAsync () ->
setTimeout renderVisiblePages, 0 ctrl.redraw(origposition)
$timeout renderVisiblePages
checkElementReady = () -> scope.$on 'layout:pdf:view', (e, args) ->
console.log 'pdf view change', element, e, args
layoutReady = $q.defer()
elementTimer = null
updateLayout = () ->
# if element is zero-sized keep checking until it is ready # if element is zero-sized keep checking until it is ready
console.log 'checking element ready', element.height(), element.width()
if element.height() == 0 or element.width() == 0 if element.height() == 0 or element.width() == 0
$timeout () -> return if elementTimer?
checkElementReady() elementTimer = setTimeout () ->
, 250 elementTimer = null
updateLayout()
, 1000
else else
scope.$broadcast 'layout-ready' if !scope.parentSize? scope.parentSize = [
element.innerHeight(),
element.innerWidth()
]
console.log 'resolving layoutReady with', scope.parentSize
$timeout () ->
spinner.add(element)
layoutReady.resolve scope.parentSize
scope.$emit 'flash-controls'
checkElementReady() updateLayout()
scope.$on 'layout-ready', () ->
# console.log 'GOT LAYOUT READY EVENT'
# console.log 'calling refresh'
# updateContainer()
spinner.add(element)
layoutReady.resolve 'layout is ready'
scope.parentSize = [
element.innerHeight(),
element.innerWidth()
]
scope.$emit 'flash-controls'
scope.$apply()
scope.$on 'layout:main:resize', () -> scope.$on 'layout:main:resize', () ->
# console.log 'GOT LAYOUT-MAIN-RESIZE EVENT' console.log 'GOT LAYOUT-MAIN-RESIZE EVENT'
scope.parentSize = [ updateLayout()
element.innerHeight(),
element.innerWidth()
]
scope.$apply()
scope.$on 'layout:pdf:resize', () -> scope.$on 'layout:pdf:resize', () ->
# console.log 'GOT LAYOUT-PDF-RESIZE EVENT' console.log 'GOT LAYOUT-PDF-RESIZE EVENT'
scope.parentSize = [ updateLayout()
element.innerHeight(),
element.innerWidth()
]
scope.$apply()
scope.$on 'pdf:error', (event, error) -> scope.$on 'pdf:error', (event, error) ->
return if error == 'cancelled' return if error == 'cancelled'
@ -351,22 +348,17 @@ define [
#scope.scrollPosition = element.scrollTop() #scope.scrollPosition = element.scrollTop()
if scope.adjustingScroll if scope.adjustingScroll
renderVisiblePages() renderVisiblePages()
# updateContainer()
scope.$apply()
scope.adjustingScroll = false scope.adjustingScroll = false
return return
#scope.scrolled = true
if scope.scrollHandlerTimeout if scope.scrollHandlerTimeout
clearTimeout(scope.scrollHandlerTimeout) clearTimeout(scope.scrollHandlerTimeout)
scope.scrollHandlerTimeout = setTimeout scrollHandler, 25 scope.scrollHandlerTimeout = setTimeout scrollHandler, 25
scrollHandler = () -> scrollHandler = () ->
renderVisiblePages() renderVisiblePages()
#scope.$apply()
newPosition = ctrl.getPdfPosition() newPosition = ctrl.getPdfPosition()
if newPosition? if newPosition?
scope.position = newPosition scope.position = newPosition
#scope.$apply()
scope.scrollHandlerTimeout = null scope.scrollHandlerTimeout = null
scope.$watch 'pdfSrc', (newVal, oldVal) -> scope.$watch 'pdfSrc', (newVal, oldVal) ->
@ -402,8 +394,9 @@ define [
# if newVal == oldVal # if newVal == oldVal
# console.log 'returning because old and new are the same' # console.log 'returning because old and new are the same'
# return # return
return unless oldVal? # return unless oldVal?
# console.log 'XXX calling setScale in parentSize watcher' # console.log 'XXX calling setScale in parentSize watcher'
return unless newVal?
doRescale scope.scale doRescale scope.scale
, true) , true)
@ -477,9 +470,8 @@ define [
} }
ctrl.setPdfPosition(scope.pages[first.page], position) ctrl.setPdfPosition(scope.pages[first.page], position)
scope.$watch '$destroy', () -> scope.$on '$destroy', () ->
#console.log 'handle pdfng directive destroy' console.log 'handle pdfng directive destroy'
clearTimeout elementTimer if elementTimer?
} }
] ]