Skip to content

Commit

Permalink
Merge pull request #16 from dealfonso/html-objects
Browse files Browse the repository at this point in the history
use html objects instead of html objects in callbacks and correct bugs
  • Loading branch information
dealfonso authored Nov 14, 2024
2 parents f2c4585 + 3a758d8 commit 9d14905
Show file tree
Hide file tree
Showing 14 changed files with 815 additions and 640 deletions.
158 changes: 148 additions & 10 deletions Makefile
Original file line number Diff line number Diff line change
@@ -1,13 +1,151 @@
# Name of the library (if not specified, the name of the current folder will be used)
LIBRARY_NAME = pdfjs-viewer
# The files that compose your library (if not specified, all the .js files in the src folder will be used)
FILES = js/pdfjs-viewer.js
# The css files that accompany your library (if not specified, no css files will be used)
CSSFILES = css/pdfjs-viewer.css css/pdftoolbar.css
# Folder in which the build files will be located (if not specified, the folder "dist" will be used)
DIST_FOLDER =
# Dependencies of your library (if not specified, no dependencies will be used)
DEPENDS =
# Folder in which the dependencies are located
DEPENDS_FOLDER = ./depends
# Files to include before the source files (it is a js file that will be included before the source files)
# * In most cases, this is not needed, but it is useful for libraries that need to be initialized
PRE =
# Files to include after the source files
# * In most cases, this is not needed, but it is useful for libraries that need an epilogue
POST =
# The variable to use to export the library (if empty, the makefile will not add any enclosure; it is assumed that the library is already enclosed)
ENCLOSURE =
# The minified license to include in the minified version (if the content of the variable is an existing file, otherwise will use the variable as the license)
LICENSE_MIN = notice.min

#####################################################################################
# Handle with care from here
#####################################################################################

# Get the current folder name
current_dir = $(notdir $(shell pwd))
build:
ifneq ("","$(wildcard js/*.js)")
uglifyjs js/*.js $(UGLIFY_FLAGS) -b | cat notice - > $(current_dir).js
uglifyjs js/*.js $(UGLIFY_FLAGS_MIN) | cat notice.min - > $(current_dir).min.js
endif
ifneq ("","$(wildcard css/*.css)")
cleancss css/*.css --format beautify | cat notice - > $(current_dir).css
cleancss css/*.css | cat notice.min - > $(current_dir).min.css
endif
# If LIBRARY_NAME is not specified, use the current folder name
LIBRARY_NAME := $(if $(LIBRARY_NAME),$(LIBRARY_NAME),$(current_dir))
# Folder in which the build files will be located
DIST_FOLDER := $(if $(DIST_FOLDER),$(DIST_FOLDER),dist)
# The name of the build files
FILEPATH = $(DIST_FOLDER)/$(LIBRARY_NAME)
FILENAME := $(notdir $(FILEPATH))

# If the LICENSE_MIN is a single filename and it exists, use the content of the file as the license for the minified version. Otherwise, use the variable as the license
LICENSE_MIN := $(shell test $(words $(LICENSE_MIN)) -eq 1 && test -f $(LICENSE_MIN) && cat $(LICENSE_MIN) || echo $(LICENSE_MIN))

# The enclosure parameter
ENCLOSURE := $(if $(ENCLOSURE),-e $(ENCLOSURE),)

# Files of the dependencies to include in the build
DEP_FILES = $(foreach fd, $(DEPENDS), $(DEPENDS_FOLDER)/$(fd)/dist/$(fd).module.js)

# The version of this library (this is intended to track the version of this template)
MAKEFILE_VERSION = 1.3.1

# The result files
RESULT_FILES_CSS = $(if $(CSSFILES),$(FILEPATH).css $(FILEPATH).min.css)
RESULT_FILES_JS = $(FILEPATH).full.js $(FILEPATH).min.js $(FILEPATH).js $(FILEPATH).compress.js $(FILEPATH).module.js $(FILEPATH).min.js.map $(FILEPATH).compress.js.map
RESULT_FILES = $(RESULT_FILES_JS) $(RESULT_FILES_CSS)

INTERMEDIATE_FILES_JS = $(FILEPATH).raw.js
INTERMEDIATE_FILES_CSS = $(if $(CSSFILES),$(FILEPATH).raw.css)
INTERMEDIATE_FILES = $(INTERMEDIATE_FILES_JS) $(INTERMEDIATE_FILES_CSS)

INPUT_FILES = $(DEP_FILES)

all: $(RESULT_FILES)

js: $(RESULT_FILES_JS)

css: $(RESULT_FILES_CSS)

module: $(FILEPATH).module.js

clean:
rm -f $(current_dir).min.js $(current_dir).min.css $(current_dir).js $(current_dir).css
rm -f $(RESULT_FILES) $(INTERMEDIATE_FILES)
if [ $(DIST_FOLDER) != "." ] && [ -d $(DIST_FOLDER) ] && [ -z "$(ls -A $(DIST_FOLDER))" ]; then rm -r $(DIST_FOLDER); fi

cleanall: clean
for fd in $(DEPENDS); do $(MAKE) -C $(DEPENDS_FOLDER)/$$fd clean; done

depends: $(DEP_FILES)

$(FILEPATH).full.js: $(FILEPATH).raw.js
@mkdir -p $(DIST_FOLDER)
cat $(FILEPATH).raw.js | uglifyjs $(ENCLOSURE) | js-beautify -t -s 1 -m 1 -j -n | cat notice - > $(FILEPATH).full.js

$(FILEPATH).js: $(FILEPATH).raw.js
@mkdir -p $(DIST_FOLDER)
cat $(FILEPATH).raw.js | uglifyjs $(ENCLOSURE) -b | js-beautify -t -s 1 -m 1 -j -n | cat notice - > $(FILEPATH).js

$(FILEPATH).min.js: $(FILEPATH).js
@mkdir -p $(DIST_FOLDER)
echo "$(LICENSE_MIN)"
cd $(DIST_FOLDER) && uglifyjs $(FILENAME).js --beautify beautify=false,preamble='"$(LICENSE_MIN)"' --toplevel --module -m --source-map "filename='$(FILENAME).min.js.map',includeSources=true" -o $(FILENAME).min.js

$(FILEPATH).compress.js: $(FILEPATH).js
@mkdir -p $(DIST_FOLDER)
cd $(DIST_FOLDER) && uglifyjs $(FILENAME).js --beautify beautify=false,preamble='"$(LICENSE_MIN)"' --compress passes=3,dead_code=true,toplevel=true --toplevel --module -m --source-map "filename='$(FILENAME).compress.js.map',includeSources=true" -o $(FILENAME).compress.js

$(FILEPATH).module.js: $(FILEPATH).raw.js
@mkdir -p $(DIST_FOLDER)
( cat notice; echo 'if (typeof imports === "undefined") { var imports = {}; }' ; cat $(FILEPATH).raw.js | uglifyjs $(ENCLOSURE) | js-beautify -t -s 1 -m 1 -j -n ) > $(FILEPATH).module.js

$(FILEPATH).css: $(FILEPATH).raw.css
@mkdir -p $(DIST_FOLDER)
cleancss $(FILEPATH).raw.css --format beautify | cat notice - > $(FILEPATH).css

$(FILEPATH).min.css: $(FILEPATH).css
@mkdir -p $(DIST_FOLDER)
cleancss --source-map $(FILEPATH).css --source-map-inline-sources -o $(FILEPATH).min.css

%.module.js:
$(MAKE) -C $(dir $(@D)) module

%.raw.js: $(FILES) $(PRE) $(POST) $(DEP_FILES)
@mkdir -p $(DIST_FOLDER)
cat $(DEP_FILES) $(PRE) $(FILES) $(POST) > $(FILEPATH).raw.js

%.raw.css: $(CSSFILES)
@mkdir -p $(DIST_FOLDER)
cat $(CSSFILES) > $(FILEPATH).raw.css

################################################################################
# CHANGELOG
################################################################################
#
# 1.4.0
# * Remove the intermediate files when cleaning
# * Prevent trying to remove folder . if it is the dist folder
# * Add CSS files
#
# ----------------------------------------------------------------
#
# 1.3.0
# * Enable to specify the license for the minified version by using a file or a text string
# * Add the ENCLOSURE variable to specify the enclosure of the library. If not specified, the library is assumed to be enclosed.
# The most common value is "exports:window" to export the library to the window object.
#
# ----------------------------------------------------------------
#
# 1.2.0
# * Add different variables for FILENAME and FILEPATH to avoid problems with the path
# * Change the creation of the raw file to use the dependencies as a prerequisite and create a true raw file
# * Add the creation of map source files for the minified and compressed versions
#
# ----------------------------------------------------------------
#
# 1.1.0
# * Reorder the parameters of the Makefile.
# * Add targets to build the files by their name so that "make" checks if the
# files are up to date, to avoid rebuilding if not needed.
#
# ----------------------------------------------------------------
# 1.0.0
# * Initial version
#
41 changes: 26 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
[![](https://data.jsdelivr.com/v1/package/gh/dealfonso/pdfjs-viewer/badge?style=rounded)](https://www.jsdelivr.com/package/gh/dealfonso/pdfjs-viewer) ![](https://img.shields.io/github/v/release/dealfonso/pdfjs-viewer) ![](https://img.shields.io/github/release-date/dealfonso/pdfjs-viewer) ![](https://img.shields.io/github/languages/code-size/dealfonso/pdfjs-viewer) ![](https://img.shields.io/github/license/dealfonso/pdfjs-viewer)

# PDFjs-viewer

The distribution of [Mozilla's PDF.js](https://mozilla.github.io/pdf.js/) includes an example of a viewer that can be used in a web page by means of inserting using an `iframe`. But the viewer cannot be easily used or customized for using it as part of a web application.
Expand All @@ -21,7 +23,6 @@ or even easier
<div class="pdfjs-viewer" pdf-document="https://github.com/dealfonso/pdfjs-viewer/raw/main/examples/test.pdf" initial-zoom="fit">
```


The PDFjsViewer is customizable and has different options and callbacks that enable it to be easily integrated in your application.

Some examples included in the distribution:
Expand Down Expand Up @@ -51,17 +52,31 @@ But if (as in my case) you need more than simply a PDF viewer embedded in an `if
## Using

### Dependencies
PDFjs-viewer depends on Mozilla's [PDF.js library](https://mozilla.github.io/pdf.js) and [jQuery](https://jquery.com). So please be sure to include the dependency in your project:
PDFjs-viewer depends on Mozilla's [PDF.js library](https://mozilla.github.io/pdf.js). So please be sure to include the dependencies in your project:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
</script>
```

PDFjs-viewer also depends on a [jQuery](https://jquery.com/) compatible library, so please include it in your project before including the PDFjs-viewer library:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

#### Troubleshooting
Some users have reported problems with jQuery. So I added support for an alternative library called [nojquery](https://github.com/jsutilslib/nojquery). If you want to use this library instead, please include it before the PDFjs-viewer library.

**nojquery** is a library that provides a subset of jQuery functions that are used in PDFjs-viewer. It is a lightweight library that can be used as a replacement for jQuery in some cases. `PDFjs-viewer` will use `nojquery` with more priority than jQuery if it is included in the project.

```html
<script src="https://cdn.jsdelivr.net/gh/jsutilslib/nojquery/nojquery.min.js"></script>
```

### From source

There is a single _javascript_ file that contains the whole PDFjsViewer class (in folder `js`).
Expand All @@ -82,7 +97,7 @@ cleancss css/*.css --format beautify | cat notice - > pdfjs-viewer.css
cleancss css/*.css | cat notice.min - > pdfjs-viewer.min.css
```

Now you can use files `pdfjs-viewer.min.js` and `pdfjs-viewer.min.css` in your project (jQuery is a prerequisite):
Now you can use files `pdfjs-viewer.min.js` and `pdfjs-viewer.min.css` in your project (jQuery or nojquery is a prerequisite):

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Expand All @@ -96,19 +111,19 @@ It is possible to use `pdfjs-viewer` directly from a CDN:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dealfonso/pdfjs-viewer@1.1/pdfjs-viewer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dealfonso/pdfjs-viewer@1.1/pdfjs-viewer.min.css">
<script src="https://cdn.jsdelivr.net/gh/dealfonso/pdfjs-viewer@2.0/dist/pdfjs-viewer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dealfonso/pdfjs-viewer@2.0/dist/pdfjs-viewer.min.css">
```

## API

The creation of a PDF viewer consists of creating a `PDFjsViewer` object, setting the jQuery object in which the PDF viewer should be set, and configuring the options that we may need.
The creation of a PDF viewer consists of creating a `PDFjsViewer` object, setting the object in which the PDF viewer should be set, and configuring the options that we may need.

```javascript
var options = {
...
};
var pdfViewer = new PDFjsViewer($('.pdfjs-viewer'), options);
var pdfViewer = new PDFjsViewer(document.querySelector('.pdfjs-viewer'), options);
```

### Options
Expand All @@ -129,20 +144,16 @@ zoomValues: [ 0.25, 0.5, 0.75, 1, 1.25, 1.50, 2, 4, 8 ],
zoomFillArea: 0.95,
// Function called when a document has been loaded and its structure has been created
onDocumentReady: () => {},
// Function called when a new page is created (it is binded to the object, and receives a jQuery object as parameter)
// Function called when a new page is created (it is bound to the object, and receives an html object as parameter, and the page number)
onNewPage: (page, i) => {},
// Function called when a page is rendered
// Function called when a page is rendered (it is bound to the object, and receives an html object as parameter, and the page number)
onPageRender: (page, i) => {},
// Function called when the zoom level changes (it receives the zoom level)
onZoomChange: (zoomlevel) => {},
// Function called whenever the active page is changed (the active page is the one that is shown in the viewer)
onActivePageChanged: (page, i) => {},
// Function called to get the content of an empty page
emptyContent: () => $('<div class="loader"></div>')
// Function called to obtain a page that shows an error when the document could not be loaded (returns a jQuery object)
errorPage: () => {
$(`<div class="placeholder"></div>`).addClass(this.settings.pageClass).append($(`<p class="m-auto"></p>`).text("could not load document"))
},
// The scale to which the pages are rendered (1.5 is the default value for the PDFjs viewer); a higher value will render the pages with a higher resolution
// but it will consume more memory and CPU. A lower value will render the pages with a lower resolution, but they will be uglier.
renderingScale: 1.5,
Expand Down Expand Up @@ -270,4 +281,4 @@ Check the example at [PDFjs-viewer example-3](https://codepen.io/dealfonso/pen/d

I really appreciate collaborations either by detecting bugs or by suggesting new features for this project. In this case, you can open issues and I'll try to address them in a best-effort basis.

Also I welcome collaborations for enhancing the viewer. So if you can add new features, please fork the project and create pull requests. In this case, please add documentation about the new features both in the documentation as in the pull-request description.
Also I welcome collaborations for enhancing the viewer. So if you can add new features, please fork the project and create pull requests. In this case, please add documentation about the new features both in the documentation as in the pull-request description.
Loading

0 comments on commit 9d14905

Please sign in to comment.