mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Get PDF controls working
This commit is contained in:
parent
9c9de35918
commit
25a4be408a
4 changed files with 120 additions and 3 deletions
|
@ -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"
|
||||
)
|
|
@ -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>
|
||||
"""
|
||||
}
|
||||
}
|
||||
]
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue