1
0
Fork 0
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:
James Allen 2014-06-28 13:25:06 +01:00
parent 845c4a7297
commit 9c9de35918
10 changed files with 136 additions and 14 deletions
services/web
app/views/project
public

View file

@ -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,

View file

@ -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...

View file

@ -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"
)

Binary file not shown.

View file

@ -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"])

View file

@ -0,0 +1,6 @@
define [
"ide/pdf/controllers/PdfController"
"ide/pdf/directives/pdfJs"
], () ->
class PdfManager
constructor: (@ide, @$scope) ->

View file

@ -0,0 +1,7 @@
define [
"base"
], (App) ->
App.controller "PdfController", ["$scope", ($scope) ->
$scope.pdf =
url: "/ScalaByExample.pdf"
]

View file

@ -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>
"""
}

View file

@ -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;

View 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;
}
}
}