1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-17 07:41:26 +00:00

improved pdf-view

This commit is contained in:
llj
2012-07-23 14:58:54 +08:00
parent 48ca6c87df
commit d0ac9405d1
4 changed files with 152 additions and 145 deletions

View File

@@ -699,7 +699,8 @@ table img {
border:1px solid #eee; border:1px solid #eee;
} }
#docu-view, #docu-view,
#svg-view { #svg-view,
#pdf-view {
background:#fff; background:#fff;
} }
#svg-view { #svg-view {

View File

@@ -1,149 +1,149 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>pdf full view</title> <title></title>
<link rel="stylesheet" href="{{ MEDIA_URL }}pdf_full_view/viewer.css"/> <link rel="stylesheet" href="{{ MEDIA_URL }}pdf_full_view/viewer.css"/>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/compatibility.js"></script> <link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}pdf_full_view/locale.properties"/>
<link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}pdf_full_view/locale.properties"/> </head>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/l10n.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/pdf.js"></script>
<script type="text/javascript">PDFJS.workerSrc = "{{ MEDIA_URL }}js/pdf.js";</script>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/debugger.js"></script>
</head>
<body data="{{ file_src }}"> <body data="{{ file_src }}">
<div id="outerContainer"> <div id="outerContainer">
<div id="sidebarContainer"> <div id="sidebarContainer">
<div id="toolbarSidebar" class="splitToolbarButton toggled"> <div id="toolbarSidebar" class="splitToolbarButton toggled">
<button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs"> <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs">
<span data-l10n-id="thumbs_label">Thumbnails</span> <span data-l10n-id="thumbs_label">Thumbnails</span>
</button> </button>
<button id="viewOutline" class="toolbarButton group" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" tabindex="2" data-l10n-id="outline"> <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" tabindex="2" data-l10n-id="outline">
<span data-l10n-id="outline_label">Document Outline</span> <span data-l10n-id="outline_label">Document Outline</span>
</button> </button>
<button id="viewSearch" class="toolbarButton group hidden" title="Search Document" onclick="PDFView.switchSidebarView('search')" tabindex="3" data-l10n-id="search_panel"> <button id="viewSearch" class="toolbarButton group hidden" title="Search Document" onclick="PDFView.switchSidebarView('search')" tabindex="3" data-l10n-id="search_panel">
<span data-l10n-id="search_panel_label">Search Document</span> <span data-l10n-id="search_panel_label">Search Document</span>
</button>
</div>
<div id="sidebarContent">
<div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
<div id="searchView" class="hidden">
<div id="searchToolbar">
<input id="searchTermsInput" class="toolbarField" onkeydown='if (event.keyCode == 13) PDFView.search()'>
<button id="searchButton" class="textButton toolbarButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
</div>
<div id="searchResults"></div>
</div>
</div>
</div> <!-- sidebarContainer -->
<div id="mainContainer">
<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="4" data-l10n-id="toggle_slider">
<span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
</button>
<div class="toolbarButtonSpacer"></div>
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous" tabindex="5" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next" tabindex="6" data-l10n-id="next">
<span data-l10n-id="next_label">Next</span>
</button>
</div>
<label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
<input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" tabindex="7">
</input>
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" style="visibility: hidden; position: fixed; right: 0; top: 0" />
<button id="openFile" class="toolbarButton openFile" title="Open File" tabindex="11" data-l10n-id="open_file" onclick="document.getElementById('fileInput').click()">
<span data-l10n-id="open_file_label">Open</span>
</button>
<button id="print" class="toolbarButton print" title="Print" tabindex="11" data-l10n-id="print" onclick="window.print()">
<span data-l10n-id="print_label">Print</span>
</button>
<button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();" tabindex="12" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
<!-- <div class="toolbarButtonSpacer"></div> -->
<a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Current view (copy or open in new window)" tabindex="13" data-l10n-id="bookmark"><span data-l10n-id="bookmark_label">Current View</span></a>
</div>
<div class="outerCenter">
<div class="innerCenter" id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" tabindex="8" data-l10n-id="zoom_out">
<span data-l10n-id="zoom_out_label">Zoom Out</span>
</button> </button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" tabindex="9" data-l10n-id="zoom_in">
<span data-l10n-id="zoom_in_label">Zoom In</span>
</button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);" title="Zoom" oncontextmenu="return false;" tabindex="10" data-l10n-id="zoom">
<option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
<option id="pageActualOption" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
<option id="pageFitOption" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
<option id="pageWidthOption" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
</select>
</span>
</div> </div>
</div> <div id="sidebarContent">
</div> <div id="thumbnailView">
</div> </div>
</div> <div id="outlineView" class="hidden">
</div>
<div id="searchView" class="hidden">
<div id="searchToolbar">
<input id="searchTermsInput" class="toolbarField" onkeydown='if (event.keyCode == 13) PDFView.search()'>
<button id="searchButton" class="textButton toolbarButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
</div>
<div id="searchResults"></div>
</div>
</div>
</div> <!-- sidebarContainer -->
<div id="viewerContainer"> <div id="mainContainer">
<div id="viewer"></div> <div class="toolbar">
</div> <div id="toolbarContainer">
<div id="loadingBox"> <div id="toolbarViewer">
<div id="loading"></div> <div id="toolbarViewerLeft">
<div id="loadingBar"><div class="progress"></div></div> <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="4" data-l10n-id="toggle_slider">
</div> <span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
</button>
<div class="toolbarButtonSpacer"></div>
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous" tabindex="5" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next" tabindex="6" data-l10n-id="next">
<span data-l10n-id="next_label">Next</span>
</button>
</div>
<label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
<input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" tabindex="7">
</input>
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" style="visibility: hidden; position: fixed; right: 0; top: 0" />
<button id="openFile" class="toolbarButton openFile" title="Open File" tabindex="11" data-l10n-id="open_file" onclick="document.getElementById('fileInput').click()">
<span data-l10n-id="open_file_label">Open</span>
</button>
<div id="errorWrapper" hidden='true'> <button id="print" class="toolbarButton print" title="Print" tabindex="11" data-l10n-id="print" onclick="window.print()">
<div id="errorMessageLeft"> <span data-l10n-id="print_label">Print</span>
<span id="errorMessage"></span> </button>
<button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
More Information
</button>
<button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close"> Close </button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
</div> <!-- mainContainer -->
</div> <!-- outerContainer --> <button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();" tabindex="12" data-l10n-id="download">
<div id="printContainer"></div> <span data-l10n-id="download_label">Download</span>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/view.js"></script> </button>
</body> <!-- <div class="toolbarButtonSpacer"></div> -->
<a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Current view (copy or open in new window)" tabindex="13" data-l10n-id="bookmark"><span data-l10n-id="bookmark_label">Current View</span></a>
</div>
<div class="outerCenter">
<div class="innerCenter" id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" tabindex="8" data-l10n-id="zoom_out">
<span data-l10n-id="zoom_out_label">Zoom Out</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" tabindex="9" data-l10n-id="zoom_in">
<span data-l10n-id="zoom_in_label">Zoom In</span>
</button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);" title="Zoom" oncontextmenu="return false;" tabindex="10" data-l10n-id="zoom">
<option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
<option id="pageActualOption" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
<option id="pageFitOption" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
<option id="pageWidthOption" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="viewerContainer">
<div id="viewer"></div>
</div>
<div id="loadingBox">
<div id="loading"></div>
<div id="loadingBar"><div class="progress"></div></div>
</div>
<div id="errorWrapper" hidden='true'>
<div id="errorMessageLeft">
<span id="errorMessage"></span>
<button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
More Information
</button>
<button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close"> Close </button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
</div> <!-- mainContainer -->
</div> <!-- outerContainer -->
<div id="printContainer"></div>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/compatibility.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/l10n.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/pdf.js"></script>
<script type="text/javascript">PDFJS.workerSrc = "{{ MEDIA_URL }}js/pdf.js";</script>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/debugger.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}pdf_full_view/view.js"></script>
</body>
</html> </html>

View File

@@ -21,7 +21,7 @@
} else if (filetype == 'PDF') { } else if (filetype == 'PDF') {
$.getScript('{{MEDIA_URL}}js/pdf.js', function() { $.getScript('{{MEDIA_URL}}js/pdf.js', function() {
PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.js'; PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.js';
$('#file-view').html('<div id="pdf-op-bar"><button id="prev">Prev</button> <button id="next">Next</button><label for="page-number">Page:</label><input type="number" id="page-number" value="1" min="1"></input> of <span id="page-nums"></span><button id="full-screen">Full Screen</button></div><canvas data="{{ raw_path }}" id="pdf-view"></canvas>').css({'text-align':'center', 'padding':'30px 0'}); $('#file-view').html('<div id="pdf-op-bar" class="vh"><button id="prev">Prev</button> <button id="next">Next</button><label for="page-number">Page:</label><input type="number" id="page-number" value="1" min="1"></input> of <span id="page-nums"></span><button id="full-screen">Full Screen</button></div><canvas data="{{ raw_path }}" id="pdf-view" class="vh"></canvas>').css({'text-align':'center', 'padding':'30px 0'});
var seahub_getPage = function (pdf, page_number) { var seahub_getPage = function (pdf, page_number) {
pdf.getPage(page_number).then(function(page) { pdf.getPage(page_number).then(function(page) {
var scale = 1.5; var scale = 1.5;
@@ -41,6 +41,7 @@
$('#page-nums').html(pdf.numPages); $('#page-nums').html(pdf.numPages);
$('#page-number').attr('max', pdf.numPages).css('width', String(pdf.numPages).length * 6 + 10); $('#page-number').attr('max', pdf.numPages).css('width', String(pdf.numPages).length * 6 + 10);
seahub_getPage(pdf, 1); seahub_getPage(pdf, 1);
$('#pdf-op-bar, #pdf-view').removeClass('vh');
$('#page-number').change(function() { $('#page-number').change(function() {
seahub_getPage(pdf, $(this).val()); seahub_getPage(pdf, $(this).val());
@@ -65,11 +66,9 @@
}); });
$('#full-screen').click(function() { $('#full-screen').click(function() {
window.open('{{ SITE_ROOT }}pdf_full_view/?file_src=' + e($('#pdf-view').attr('data'))); window.open('{{ SITE_ROOT }}pdf_full_view/?repo_id={{ repo.id }}&obj_id={{obj_id}}&file_name=' + e('{{ file_name }}'));
}); });
}); });
$('#pdf-view').css('background', '#fff');
}); });
} else { } else {
$('#file-view').html('<p>该类型文件无法在线查看。<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download">下载</a></p>'); $('#file-view').html('<p>该类型文件无法在线查看。<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download">下载</a></p>');

View File

@@ -944,7 +944,14 @@ def repo_file_get(request, repo_id):
def pdf_full_view(request): def pdf_full_view(request):
file_src = request.GET.get('file_src', '') repo_id = request.GET.get('repo_id', '')
obj_id = request.GET.get('obj_id', '')
file_name = request.GET.get('file_name', '')
token = gen_token()
seafserv_rpc.web_save_access_token(token, repo_id, obj_id,
'view', request.user.username)
file_src = gen_file_get_url(token, file_name)
return render_to_response('pdf_full_view.html', { return render_to_response('pdf_full_view.html', {
'file_src': file_src, 'file_src': file_src,
}, context_instance=RequestContext(request)) }, context_instance=RequestContext(request))