首頁 探索 說明
登入
Febbweiss
/
pdf-reader
镜像来自 https://github.com/Febbweiss/pdf-reader
1
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

Feature: add .gitignore

febbweiss 8 年之前
當前提交
cbec8b7a7f
共有 6 個文件被更改，包括 209 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 1 0
      .gitignore
  2. 30 0
      README.md
  3. 30 0
      bower.json
  4. 82 0
      index.html
  5. 53 0
      js/pdf-reader.js
  6. 13 0
      partials/viewer.html

+ 1 - 0
.gitignore
查看文件 

@@ -0,0 +1 @@
 
+bower_components/

+ 30 - 0
README.md
查看文件 

@@ -0,0 +1,30 @@
 
+PDF-Reader is a small web application listing PDF documents and allowing to visualize them.
 
+
 
+
 
+Building :
 
+---
 
+
 
+This project is built using [Bower](http://bower.io).
 
+Just install it and run :
 
+
 
+```
 
+bower install
 
+```
 
+
 
+How it works :
 
+---
 
+
 
+Written in AngularJS, PDF-Reader calls a resource (_/data/documents.json_) providing a list of documents such as :
 
+
 
+```
 
+[{"title": "My report", "link": "report.pdf"]
 
+```
 
+
 
+The list is rendering such as a paginated table with a quick filter input. Clicking on the _View_ button load the document in the right side pane.
 
+
 
+Documents are stored in a _documents_ folder.
 
+
 
+Licence :
 
+----------
 
+
 
+Source code is under [MIT Licence](http://opensource.org/licenses/mit-license.php)

+ 30 - 0
bower.json
查看文件 

@@ -0,0 +1,30 @@
 
+{
 
+  "name": "pdf-reader",
 
+  "authors": [
 
+    "febbweiss <fabrice.ecaille@gmail.com>"
 
+  ],
 
+  "description": "A webpage to read stored pdf",
 
+  "main": "index.html",
 
+  "keywords": [
 
+    "pdf",
 
+    "reader"
 
+  ],
 
+  "license": "MIT",
 
+  "homepage": "",
 
+  "ignore": [
 
+    "**/.*",
 
+    "node_modules",
 
+    "bower_components",
 
+    "test",
 
+    "tests"
 
+  ],
 
+  "dependencies": {
 
+    "angular": "angularjs#1.6.6",
 
+    "angular-pdf": "^2.0.0",
 
+    "bulma": "^0.6.1",
 
+    "font-awesome": "fontawesome#^4.7.0",
 
+    "bower": "*",
 
+    "install": "^1.0.4",
 
+    "angularUtils-pagination": "angular-utils-pagination#^0.11.1"
 
+  }
 
+}

+ 82 - 0
index.html
查看文件 

@@ -0,0 +1,82 @@
 
+<!DOCTYPE html>
 
+<html lang="en-us">
 
+
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 
+		<title>Hello...</title>
 
+		
+		<link rel="stylesheet" href="bower_components/bulma/css/bulma.css">
 
+		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
 
+		
+		<script src="bower_components/pdfjs-dist/build/pdf.js"></script>
 
+		<script src="bower_components/pdfjs-dist/build/pdf.worker.js"></script>
 
+        
+		<script src="bower_components/angular/angular.min.js"></script>
 
+		<script src="bower_components/angular-pdf/dist/angular-pdf.min.js"></script>
 
+		<script src="bower_components/angularUtils-pagination/dirPagination.js"></script>
 
+		
+		<script src="js/pdf-reader.js"></script>
 
+		
+		<style type="text/css">
 
+			nav {
 
+			    margin-bottom: 1.5em;
 
+			}
 
+			
+			.none {
 
+				display: none;
 
+			}
 
+		</style>
 
+	</head>
 
+
 
+	<body ng-app="pdfReader">
 
+		
+		
+		<div class="columns" ng-controller="PdfListController">
 
+			<div class="column">
 
+				<div class="columns">
 
+					<div class="column">
 
+						<span class="is-size-3">Documents</span>
 
+					</div>
 
+					<div class="column is-narrow is-centered">
 
+						<div class="field">
 
+						  <div class="control has-icons-left">
 
+						    <input class="input" type="text" placeholder="Search a document" ng-model="searchManual">
 
+						    <span class="icon is-small is-left">
 
+						      <i class="fa fa-search"></i>
 
+						    </span>
 
+						  </div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<table class="table is-striped is-fullwidth">
 
+					<tbody>
 
+						<tr dir-paginate="pdf in pdfs | filter:searchManual | itemsPerPage:10">
 
+							<td>{{pdf.title}}</td>
 
+							<td><a href="#" ng-click="view(pdf)" class="button is-primary is-small"><i class="fa fa-eye"></i></a></td>
 
+						</tr>
 
+					</tbody>
 
+					<tfoot>
 
+	                    <td>
 
+	                        <dir-pagination-controls
 
+						       max-size="5"
 
+						       direction-links="true"
 
+						       boundary-links="true" >
 
+						    </dir-pagination-controls>
 
+	                    </td>
 
+	                </tfoot>
 
+				</table>
 
+			</div>
 
+			<div class="column box">
 
+					<div class="is-size-3">
 
+						<span>
 
+							{{pdfName}}
 
+						</span>
 
+						<progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress>
 
+						</div>
 
+					<div class="column is-narrow is-centered">
 
+				<ng-pdf template-url="partials/viewer.html" scale="page-fit"></ng-pdf>
 
+			</div>
 
+		</div>	
+	</body>
 
+</html>

+ 53 - 0
js/pdf-reader.js
查看文件 

@@ -0,0 +1,53 @@
 
+angular.module('pdfReader', ['pdf', 'angularUtils.directives.dirPagination'])
 
+  .controller('PdfListController', function($scope, $http) {
 
+      
+  $scope.search   = '';
 
+  $scope.pdfName = undefined;
 
+  $scope.pdfUrl = undefined;
 
+  $scope.scroll = 0;
 
+  $scope.loading = 'is-invisible';
 
+  $scope.progress = 0;
 
+  $scope.errorStatus = 'is-invisible none';
 
+  $scope.error = undefined;
 
+
 
+  $scope.getNavStyle = function(scroll) {
 
+    if(scroll > 100) return 'pdf-controls fixed';
 
+    else return 'pdf-controls';
 
+  }
 
+
 
+  $scope.onError = function(error) {
 
+    console.log(error);
 
+    $scope.$apply(function(){$scope.errorStatus = ''});
 
+    $scope.$apply(function(){$scope.error=error.message;})
 
+  }
 
+
 
+  $scope.onLoad = function() {
 
+   $scope.errorStatus = 'is-invisible none'
 
+   $scope.loading = '';
 
+  }
 
+
 
+  $scope.onProgress = function (progressData) {
 
+    var value = progressData.loaded / progressData.total * 100;
 
+    if( (value - $scope.progress) >= 10 || value >= 100 ) {
 
+        $scope.$apply(function(){$scope.progress = value;});
 
+    }
 
+    
+    if( value >= 100 ) {
 
+        $scope.loading = 'is-invisible';
 
+    }
 
+  };
 
+  
+  
+  $scope.view = function(pdf) {
 
+    $scope.pdfUrl = '/documents/' + pdf.link;
 
+    $scope.pdfName = pdf.title;
 
+    $scope.progress = 0;
 
+  };
 
+  
+  $scope.pdfs = [];
 
+  
+  $http.get("/data/documents.json").then(function(response){ 
+     $scope.pdfs = response.data;
 
+  });
 
+
 
+});

+ 13 - 0
partials/viewer.html
查看文件 

@@ -0,0 +1,13 @@
 
+<nav ng-class="getNavStyle(scroll)">
 
+  <button ng-click="goPrevious()"><span>&lt;</span></button>
 
+  <button ng-click="goNext()"><span>&gt;</span></button>
 
+
 
+  <button ng-click="zoomIn()"><span>+</span></button>
 
+  <button ng-click="fit()"><span>100%</span></button>
 
+  <button ng-click="zoomOut()"><span>-</span></button>
 
+
 
+  <button ng-click="rotate()"><span>90</span></button>
 
+</nav>
 
+<div class="notification is-primary is-danger {{errorStatus}}">
 
+  {{error}}
 
+</div>