mirror of
https://github.com/overleaf/overleaf.git
synced 2025-03-31 12:14:40 +00:00
Set up basic PDF viewer
This commit is contained in:
parent
845c4a7297
commit
9c9de35918
10 changed files with 136 additions and 14 deletions
services/web
|
@ -85,7 +85,9 @@ block content
|
|||
"underscore": "../libs/underscore-1.3.3",
|
||||
"mathjax": "https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML",
|
||||
"moment": "libs/moment-2.4.0",
|
||||
"ace": "#{jsPath}ace"
|
||||
"ace": "#{jsPath}ace",
|
||||
"libs": "#{jsPath}libs",
|
||||
"text": "#{jsPath}text"
|
||||
},
|
||||
"urlArgs" : "fingerprint=#{fingerprint(jsPath + 'ide.js')}",
|
||||
"waitSeconds": 0,
|
||||
|
|
|
@ -4,7 +4,7 @@ div.full-size(
|
|||
resize-on="layout:main:resize"
|
||||
)
|
||||
.ui-layout-center
|
||||
.loading-panel(ng-show="true || !editor.sharejs_doc || editor.opening")
|
||||
.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")
|
||||
i.fa.fa-spin.fa-refresh
|
||||
| Loading...
|
||||
|
||||
|
|
|
@ -1,12 +1,19 @@
|
|||
.toolbar.toolbar-tall
|
||||
a.btn.btn-primary(
|
||||
href
|
||||
)
|
||||
i.fa.fa-refresh
|
||||
| Recompile
|
||||
a(
|
||||
href
|
||||
tooltip="Logs"
|
||||
tooltip-placement="bottom"
|
||||
)
|
||||
i.fa.fa-file-text-o
|
||||
div.full-size(ng-controller="PdfController")
|
||||
.toolbar.toolbar-tall
|
||||
a.btn.btn-primary(
|
||||
href
|
||||
)
|
||||
i.fa.fa-refresh
|
||||
| Recompile
|
||||
a(
|
||||
href
|
||||
tooltip="Logs"
|
||||
tooltip-placement="bottom"
|
||||
)
|
||||
i.fa.fa-file-text-o
|
||||
|
||||
.pdf-viewer
|
||||
div(
|
||||
pdfjs
|
||||
pdf-src="pdf.url"
|
||||
)
|
BIN
services/web/public/ScalaByExample.pdf
Normal file
BIN
services/web/public/ScalaByExample.pdf
Normal file
Binary file not shown.
|
@ -6,6 +6,7 @@ define [
|
|||
"ide/settings/SettingsManager"
|
||||
"ide/online-users/OnlineUsersManager"
|
||||
"ide/track-changes/TrackChangesManager"
|
||||
"ide/pdf/PdfManager"
|
||||
"ide/directives/layout"
|
||||
"ide/services/ide"
|
||||
"directives/focus"
|
||||
|
@ -20,6 +21,7 @@ define [
|
|||
SettingsManager
|
||||
OnlineUsersManager
|
||||
TrackChangesManager
|
||||
PdfManager
|
||||
) ->
|
||||
App.controller "IdeController", ["$scope", "$timeout", "ide", ($scope, $timeout, ide) ->
|
||||
# Don't freak out if we're already in an apply callback
|
||||
|
@ -52,6 +54,7 @@ define [
|
|||
ide.settingsManager = new SettingsManager(ide, $scope)
|
||||
ide.onlineUsersManager = new OnlineUsersManager(ide, $scope)
|
||||
ide.trackChangesManager = new TrackChangesManager(ide, $scope)
|
||||
ide.pdfManager = new PdfManager(ide, $scope)
|
||||
]
|
||||
|
||||
angular.bootstrap(document.body, ["SharelatexApp"])
|
6
services/web/public/coffee/app/ide/pdf/PdfManager.coffee
Normal file
6
services/web/public/coffee/app/ide/pdf/PdfManager.coffee
Normal file
|
@ -0,0 +1,6 @@
|
|||
define [
|
||||
"ide/pdf/controllers/PdfController"
|
||||
"ide/pdf/directives/pdfJs"
|
||||
], () ->
|
||||
class PdfManager
|
||||
constructor: (@ide, @$scope) ->
|
|
@ -0,0 +1,7 @@
|
|||
define [
|
||||
"base"
|
||||
], (App) ->
|
||||
App.controller "PdfController", ["$scope", ($scope) ->
|
||||
$scope.pdf =
|
||||
url: "/ScalaByExample.pdf"
|
||||
]
|
|
@ -0,0 +1,66 @@
|
|||
define [
|
||||
"base"
|
||||
"libs/pdfListView/PdfListView"
|
||||
"libs/pdfListView/TextLayerBuilder"
|
||||
"libs/pdfListView/AnnotationsLayerBuilder"
|
||||
"libs/pdfListView/HighlightsLayerBuilder"
|
||||
"text!libs/pdfListView/TextLayer.css"
|
||||
"text!libs/pdfListView/AnnotationsLayer.css"
|
||||
"text!libs/pdfListView/HighlightsLayer.css"
|
||||
], (
|
||||
App
|
||||
PDFListView
|
||||
TextLayerBuilder
|
||||
AnnotationsLayerBuilder
|
||||
HighlightsLayerBuilder
|
||||
textLayerCss
|
||||
annotationsLayerCss
|
||||
highlightsLayerCss
|
||||
) ->
|
||||
if PDFJS?
|
||||
PDFJS.workerSrc = "#{window.sharelatex.pdfJsWorkerPath}"
|
||||
|
||||
style = $("<style/>")
|
||||
style.text(textLayerCss + "\n" + annotationsLayerCss + "\n" + highlightsLayerCss)
|
||||
$("body").append(style)
|
||||
|
||||
App.directive "pdfjs", () ->
|
||||
return {
|
||||
scope: {
|
||||
"pdfSrc": "="
|
||||
}
|
||||
link: (scope, element, attrs) ->
|
||||
pdfListView = new PDFListView element.find(".pdfjs-viewer")[0],
|
||||
textLayerBuilder: TextLayerBuilder
|
||||
annotationsLayerBuilder: AnnotationsLayerBuilder
|
||||
highlightsLayerBuilder: HighlightsLayerBuilder
|
||||
logLevel: PDFListView.Logger.DEBUG
|
||||
pdfListView.listView.pageWidthOffset = 20
|
||||
pdfListView.listView.pageHeightOffset = 20
|
||||
|
||||
scope.loading = false
|
||||
|
||||
onProgress = (progress) ->
|
||||
scope.$apply () ->
|
||||
scope.progress = Math.floor(progress.loaded/progress.total*100)
|
||||
console.log "PROGRESS", scope.progress, progress.loaded, progress.total
|
||||
|
||||
scope.$watch "pdfSrc", (url) ->
|
||||
if url
|
||||
scope.loading = true
|
||||
scope.progress = 0
|
||||
|
||||
pdfListView
|
||||
.loadPdf(url, onProgress)
|
||||
.then () ->
|
||||
scope.$apply () ->
|
||||
scope.loading = false
|
||||
delete scope.progress
|
||||
|
||||
template: """
|
||||
<div class="pdfjs-viewer"></div>
|
||||
<div class="progress-thin" ng-show="loading">
|
||||
<div class="progress-bar" ng-style="{ 'width': progress + '%' }"></div>
|
||||
</div>
|
||||
"""
|
||||
}
|
|
@ -2,6 +2,7 @@
|
|||
@import "./editor/track-changes.less";
|
||||
@import "./editor/toolbar.less";
|
||||
@import "./editor/left-menu.less";
|
||||
@import "./editor/pdf.less";
|
||||
|
||||
.full-size {
|
||||
position: absolute;
|
||||
|
|
30
services/web/public/stylesheets/app/editor/pdf.less
Normal file
30
services/web/public/stylesheets/app/editor/pdf.less
Normal file
|
@ -0,0 +1,30 @@
|
|||
.pdf-viewer {
|
||||
.full-size;
|
||||
top: 48px;
|
||||
.pdfjs-viewer {
|
||||
.full-size;
|
||||
background-color: @gray-lighter;
|
||||
overflow: scroll;
|
||||
canvas {
|
||||
background: white;
|
||||
box-shadow: black 0px 0px 10px;
|
||||
}
|
||||
.page-container {
|
||||
margin: 10px auto;
|
||||
padding: 0 10px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
.progress-thin {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: @link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in a new issue