Get PDF controls working

This commit is contained in:
James Allen 2014-06-28 15:43:44 +01:00
parent 9c9de35918
commit 25a4be408a
4 changed files with 120 additions and 3 deletions

View file

@ -16,4 +16,6 @@ div.full-size(ng-controller="PdfController")
div(
pdfjs
pdf-src="pdf.url"
key="project_id"
resize-on="layout:main:resize,layout:pdf:resize"
)

View file

@ -24,7 +24,7 @@ define [
style.text(textLayerCss + "\n" + annotationsLayerCss + "\n" + highlightsLayerCss)
$("body").append(style)
App.directive "pdfjs", () ->
App.directive "pdfjs", ["$timeout", ($timeout) ->
return {
scope: {
"pdfSrc": "="
@ -45,6 +45,32 @@ define [
scope.progress = Math.floor(progress.loaded/progress.total*100)
console.log "PROGRESS", scope.progress, progress.loaded, progress.total
initializedPosition = false
initializePosition = () ->
return if initializedPosition
initializedPosition = true
if (scale = $.localStorage("pdf.scale"))?
pdfListView.setScaleMode(scale.scaleMode, scale.scale)
else
pdfListView.setToFitWidth()
if (position = $.localStorage("pdf.position.#{attrs.key}"))
pdfListView.setPdfPosition(position)
$(window).unload () =>
$.localStorage "pdf.scale", {
scaleMode: pdfListView.getScaleMode()
scale: pdfListView.getScale()
}
$.localStorage "pdf.position.#{attrs.key}", pdfListView.getPdfPosition()
flashControls = () ->
scope.flashControls = true
$timeout () ->
scope.flashControls = false
, 1000
scope.$watch "pdfSrc", (url) ->
if url
scope.loading = true
@ -56,11 +82,73 @@ define [
scope.$apply () ->
scope.loading = false
delete scope.progress
initializePosition()
flashControls()
scope.fitToHeight = () ->
pdfListView.setToFitHeight()
scope.fitToWidth = () ->
pdfListView.setToFitWidth()
scope.zoomIn = () ->
scale = pdfListView.getScale()
pdfListView.setScale(scale * 1.2)
scope.zoomOut = () ->
scale = pdfListView.getScale()
pdfListView.setScale(scale / 1.2)
if attrs.resizeOn?
for event in attrs.resizeOn.split(",")
scope.$on event, () ->
pdfListView.onResize()
template: """
<div class="pdfjs-viewer"></div>
<div class="pdfjs-controls" ng-class="{'flash': flashControls }">
<div class="btn-group">
<a href
class="btn btn-info btn-lg"
ng-click="fitToWidth()"
tooltip="Fit to Width"
tooltip-append-to-body="true"
tooltip-placement="bottom"
>
<i class="fa fa-fw fa-arrows-h"></i>
</a>
<a href
class="btn btn-info btn-lg"
ng-click="fitToHeight()"
tooltip="Fit to Height"
tooltip-append-to-body="true"
tooltip-placement="bottom"
>
<i class="fa fa-fw fa-arrows-v"></i>
</a>
<a href
class="btn btn-info btn-lg"
ng-click="zoomIn()"
tooltip="Zoom In"
tooltip-append-to-body="true"
tooltip-placement="bottom"
>
<i class="fa fa-fw fa-search-plus"></i>
</a>
<a href
class="btn btn-info btn-lg"
ng-click="zoomOut()"
tooltip="Zoom Out"
tooltip-append-to-body="true"
tooltip-placement="bottom"
>
<i class="fa fa-fw fa-search-minus"></i>
</a>
</div>
</div>
<div class="progress-thin" ng-show="loading">
<div class="progress-bar" ng-style="{ 'width': progress + '%' }"></div>
</div>
"""
}
}
]

View file

@ -26,5 +26,32 @@
background-color: @link-color;
}
}
.pdfjs-controls {
position: absolute;
padding: @line-height-computed / 2;
top: 0;
left: 0;
display: inline-block;
.btn-group {
transition: opacity 0.5s ease, visibility 0 linear 0.5s;
visibility: hidden;
opacity: 0;
}
&:hover, &.flash {
.btn-group {
transition: none;
visibility: visible;
opacity: 1;
}
}
i.fa-arrows-h {
border-right: 2px solid white;
border-left: 2px solid white;
}
i.fa-arrows-v {
border-top: 2px solid white;
border-bottom: 2px solid white;
}
}
}

View file

@ -64,7 +64,7 @@
&.toolbar-tall {
height: 48px;
a.btn {
margin-left: 12px;
margin-left: (@line-height-computed / 2);
}
a:not(.btn) {
padding-top: 10px;