mirror of
https://github.com/Febbweiss/pdf-reader.git
synced 2026-03-04 14:15:41 +00:00
Feature: add .gitignore
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
bower_components/
|
||||
30
README.md
Normal file
30
README.md
Normal file
@@ -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
bower.json
Normal file
30
bower.json
Normal file
@@ -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
index.html
Normal file
82
index.html
Normal file
@@ -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
js/pdf-reader.js
Normal file
53
js/pdf-reader.js
Normal file
@@ -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
partials/viewer.html
Normal file
13
partials/viewer.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<nav ng-class="getNavStyle(scroll)">
|
||||
<button ng-click="goPrevious()"><span><</span></button>
|
||||
<button ng-click="goNext()"><span>></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>
|
||||
Reference in New Issue
Block a user