Team:Tianjin/Resources/JS:jquerytouchPDF
/*
- @fileOverview TouchPDF - jQuery Plugin
- @version 0.4
- @author Loic Minghetti http://www.loicminghetti.net
- @see https://github.com/loicminghetti/TouchPDF-Jquery-Plugin
- @see http://plugins.jquery.com/project/touchPDF
- Copyright (c) 2014 Loic Minghetti
- Dual licensed under the MIT or GPL Version 2 licenses.
- /
/**
* See (http://jquery.com/). * @name $ * @class * See the jQuery Library (http://jquery.com/) for full details. This just * documents the function and classes that are added to jQuery by this plug-in. */
/**
* See (http://jquery.com/) * @name fn * @class * See the jQuery Library (http://jquery.com/) for full details. This just * documents the function and classes that are added to jQuery by this plug-in. * @memberOf $ */
(function($) {
"use strict";
//Constants
var EMPTY = "empty",
INIT = "init",
LOADING = "loading",
LOADED = "loaded",
ZOOMEDIN = "zoomedin",
DRAGGING = "dragging",
RENDERING = "rendering",
PLUGIN_NS = 'TouchPDF',
TOOLBAR_HEIGHT = 30,
BORDER_WIDTH = 1,
TAB_SPACING = -2,
TAB_WIDTH = 41,
TAB_OFFSET_WIDTH = 10;
/**
* The default configuration, and available options to configure touchPDF with. * You can set the default values by updating any of the properties prior to instantiation. * @name $.fn.pdf.defaults * @namespace * @property {string} [source=""] Path of PDF file to display * @property {string} [title="TouchPDF"] Title of the PDF to be displayed in the toolbar * @property {array} [tabs=[]] Array of tabs to display on the side. See doc for syntax. * @property {string} [tabsColor="beige" Default background color for all tabs. Available colors are "green", "yellow", "orange", "brown", "blue", "white", "black" and you can define your own colors with CSS. * @property {boolean} [disableZoom=false] Disable zooming of PDF document. By default, PDF can be zoomed using scroll, two fingers pinch, +/- keys, and toolbar buttons * @property {boolean} [disableSwipe=false] Disable swipe to next/prev page of PDF document. By default, PDF can be swiped using one finger * @property {boolean} [disableLinks=false] Disable all internal and external links on PDF document * @property {boolean} [disableKeys=false] Disable the arrow keys for next/previous page and +/- for zooming (if zooming is enabled) * @property {boolean} [redrawOnWindowResize=true] Force resize of PDF viewer on window resize * @property {float} [pdfScale=1] Defines the ratio between your PDF page size and the tabs size * @property {float} [quality=2] Set quality ratio for loaded PDF pages. Set at 2 for sharp display when user zooms up to 200% * @property {boolean} [showToolbar=true] Show a toolbar on top of the document with title, page number and buttons for next/prev pages and zooming * @property {function} [loaded=null] A handler triggered when PDF document is loaded (before display of first page) * @property {function} [changed=null] A handler triggered each time a new page is displayed * @property {string} [loadingHTML="Loading PDF"] Text or HTML displayed on white page shown before document is loaded * @property {function} [loadingHeight=841] Height in px of white page shown before document is loaded * @property {function} [loadingWidth=595] Width in px of white page shown before document is loaded */
var defaults = {
source: null,
title: "TouchPDF",
tabs: [],
tabsColor: "beige",
disableZoom: false,
disableSwipe: false,
disableLinks: false,
disableKeys: false,
pdfScale: 1,
quality: 2,
redrawOnWindowResize: true,
showToolbar: true,
loaded: null,
changed: null,
loadingHeight: 841,
loadingWidth: 595,
loadingHTML: "Loading PDF"
};
/**
* Load a PDF file in a div
* The TouchPDF plugin can be instantiated via this method, or methods within
* @see TouchPDF
* @class
* @param {Mixed} method If the current DOMNode is a TouchPDF object, and method is a TouchPDF method, then
* the method is executed, and any following arguments are passed to the TouchPDF method.
* If method is an object, then the TouchPDF class is instantiated on the current DOMNode, passing the
* configuration properties defined in the object. See TouchPDF
*/
$.fn.pdf = function(method) {
var $this = $(this),
plugin = $this.data(PLUGIN_NS);
//Check if we are already instantiated and trying to execute a method
if (plugin && typeof method === 'string') {
if (plugin[method]) {
return plugin[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else {
$.error('Method ' + method + ' does not exist on jQuery.pdf');
}
}
//Else not instantiated and trying to pass init object (or nothing)
else if (!plugin && (typeof method === 'object' || !method)) {
return init.apply(this, arguments);
}
return $this;
};
//Expose our defaults so a user could override the plugin defaults
$.fn.pdf.defaults = defaults;
/**
* Initialise the plugin for each DOM element matched * This creates a new instance of the main TouchPDF class for each DOM element, and then * saves a reference to that instance in the elements data property. * @internal */
function init(options) {
//Prep and extend the options
if (!options) {
options = {};
}
options = $.extend({},
$.fn.pdf.defaults, options);
//For each element instantiate the plugin
return this.each(function() {
var $this = $(this);
//Check we havent already initialised the plugin
var plugin = $this.data(PLUGIN_NS);
if (!plugin) {
plugin = new TouchPDF(this, options);
$this.data(PLUGIN_NS, plugin);
}
});
}
/**
* Main TouchPDF Plugin Class. * Do not use this to construct your TouchPDF object, use the jQuery plugin method $.fn.pdf(); {@link $.fn.pdf} * @private * @name TouchPDF * @param {DOMNode} element The HTML DOM object to apply to plugin to * @param {Object} options The options to configure the plugin with. @link {$.fn.pdf.defaults} * @see $.fn.pdf.defaults * @see $.fn.pdf
* @class
*/
function TouchPDF(element, options) {
// Current phase of pdf loading
var state = EMPTY;
// Number of pages
var totalPages = 0;
// Page to be displayed
var pageNum = 0;
// Page currently rendering
var pageNumRendering = 0;
// jQuery wrapped element for this instance
var $element = $(element);
// PDF canvas
var canvas = null;
// jQuery wrapped PDF annotation layer
var $annotations = null;
// PDF.JS object
var pdfDoc = null;
var scale = 1;
var ctx = false;
var pagesRefMap = [];
var plugin = this;
var tabWidth = 0;
var $drag = null,
$viewer = null;
var linksDisabled = false;
initDom();
load();
//
//Public methods
//
/**
* Go to specific page of PDF file * @function * @name $.fn.pdf#goto * @return {DOMNode} The Dom element that was registered with TouchPDF * @example $("#element").pdf("goto", 10); */
this.goto = function(number) {
goto(number);
return $element;
};
/**
* Go to previous page of PDF file, until first page * @function * @name $.fn.pdf#previous * @return {DOMNode} The Dom element that was registered with TouchPDF * @example $("#element").pdf("previous"); */
this.previous = function() {
goto(pageNum - 1);
return $element;
};
/**
* Go to next page of PDF file, until end of pdf * @function * @name $.fn.pdf#next * @return {DOMNode} The Dom element that was registered with TouchPDF * @example $("#element").pdf("next"); */
this.next = function() {
goto(pageNum + 1);
return $element;
};
/**
* Force redraw of pdf (height, width and zoom) * @function * @name $.fn.pdf#redraw * @return {DOMNode} The Dom element that was registered with TouchPDF * @example $("#element").pdf("redraw"); */
this.redraw = function() {
return $element;
};
/**
* Destroy the pdf container completely. * @function * @name $.fn.pdf#destroy * @example $("#element").pdf("destroy"); */
this.destroy = function() {
$element.empty().removeClass("touchPDF");
};
/**
* Get the current page number (may not be rendered yet) * @function * @name $.fn.pdf#getPageNumber * @return {int} Current page number, 0 if PDF is not loaded * @example $("#element").pdf("getPageNumber"); */
this.getPageNumber = function() {
return pageNum;
};
/**
* Get the total number of pages of loaded PDF * @function * @name $.fn.pdf#getTotalPages * @return {int} The number of pages, 0 if PDF is not loaded * @example $("#element").pdf("getTotalPages"); */
this.getTotalPages = function() {
return totalPages;
};
//
// Private methods
//
function goto(number) {
if (state == EMPTY || state == INIT) return;
if (number < 1) number = 1;
if (number > totalPages) number = totalPages;
if (number == 0) return;
pageNum = number;
renderPage();
// update tabs
var z = 1;
$element.find(".pdf-tabs .tab").each(function(i, a) {
var $a = $(a);
var aPageNum = $a.data("page");
if (aPageNum < number) {
$a.removeClass("right");
$a.css("z-index", 1000 + z++);
} else if (aPageNum == number) {
$a.removeClass("right");
$a.css("z-index", 1000 + z++);
} else {
$a.addClass("right");
$a.css("z-index", 1000 - z++);
}
});
}
function initDom() {
if (state != EMPTY) return;
$element.addClass("touchPDF").html(' if (options.showToolbar) {
$element.find(".pdf-toolbar").html(' $element.find(".pdf-toolbar > .pdf-title").on("click",
function() {
goto(1);
});
$element.find(".pdf-toolbar > .pdf-button > .pdf-prev").on("click",
function() {
goto(pageNum - 1);
});
$element.find(".pdf-toolbar > .pdf-button > .pdf-next").on("click",
function() {
goto(pageNum + 1);
});
}
$drag = $element.find(".pdf-drag");
$viewer = $element.find(".pdf-viewer");
if (!options.disableKeys) {
$(window).keydown(function(event) {
if (event.keyCode == 37) goto(pageNum - 1);
else if (event.keyCode == 39) goto(pageNum + 1);
});
}
if (options.redrawOnWindowResize) {
var windowResizeTimeout = false;
$(window).resize(function() {
clearTimeout(windowResizeTimeout);
windowResizeTimeout = setTimeout(function() {
redraw();
},
100);
});
}
if (!options.disableZoom) {
$drag.panzoom({
contain: 'invert',
minScale: 1,
disablePan: true,
increment: 0.25,
maxScale: 2,
onChange: function() {
linksDisabled = true;
$drag.panzoom("option", "disablePan", false);
state = ZOOMEDIN;
},
onEnd: function() {
setTimeout(function() {
linksDisabled = false;
if ($drag.panzoom("getMatrix")[0] == 1) zoomReset();
},
1);
}
});
$drag.panzoom('enable');
$drag.parent().on('mousewheel.focal',
function(e) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var direction = delta ? delta < 0 : e.originalEvent.deltaY > 0;
if (direction) zoomOut(e);
else zoomIn(e);
});
if (options.showToolbar) {
$element.find(".pdf-toolbar > .pdf-button > .pdf-zoomin").on("click",
function() {
zoomIn();
});
$element.find(".pdf-toolbar > .pdf-button > .pdf-zoomout").on("click",
function() {
zoomOut();
});
}
if (!options.disableLinks) {
// enable links while zoomed in
var touchlink = null;
$drag.on('touchstart', "a",
function(e) {
touchlink = this;
setTimeout(function() {
touchlink = null;
},
100);
});
$drag.on('touchend', "a",
function(e) {
if (this == touchlink) {
e.stopImmediatePropagation();
this.click();
}
});
}
}
if (!options.disableSwipe) {
$viewer.swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (state != LOADED) return;
linksDisabled = true;
setTimeout(function() {
linksDisabled = false;
},
1);
if (direction == "right") goto(pageNum - 1);
else if (direction == "left") goto(pageNum + 1);
},
threshold: 50,
excludedElements: ".noSwipe"
});
}
canvas = $element.find("canvas")[0];
ctx = canvas.getContext('2d');
$annotations = $element.find(".pdf-annotations");
state = INIT;
redraw();
}
function zoomIn(focal) {
if (options.disableZoom) return;
if (state != ZOOMEDIN && state != LOADED) return;
state = ZOOMEDIN;
$drag.panzoom('zoom', false, {
increment: 0.25,
animate: true,
focal: focal
});
linksDisabled = false;
}
function zoomOut(focal) {
if (options.disableZoom) return;
if (state != ZOOMEDIN) return;
$drag.panzoom('zoom', true, {
increment: 0.25,
animate: true,
focal: focal
});
linksDisabled = false;
if ($drag.panzoom("getMatrix")[0] == 1) zoomReset();
}
function zoomReset() {
if (options.disableZoom) return;
$drag.panzoom('reset');
linksDisabled = false;
$drag.panzoom("option", "disablePan", true);
state = LOADED;
}
/**
* Asynchronously downloads PDF. */
function load() {
if (state != INIT) return;
state = LOADING;
PDFJS.getDocument(options.source).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
totalPages = pdfDoc.numPages;
if (totalPages < 1) return;
state = LOADED;
if (options.loaded) options.loaded() goto(1);
});
if (options.tabs && $.isArray(options.tabs)) {
var top = [];
var maxOffset = 0;
$.each(options.tabs,
function(i, tab) {
if (tab.offset && tab.offset > maxOffset) maxOffset = tab.offset;
});
tabWidth = TAB_WIDTH + TAB_OFFSET_WIDTH * maxOffset;
$.each(options.tabs,
function(i, tab) {
var offset = tab.offset || 0;
if (top[offset] === undefined) {
top[offset] = 5 + TOOLBAR_HEIGHT;
}
var $a = $("<a>").addClass("tab").data("page", tab.page).css("margin-left", offset * TAB_OFFSET_WIDTH + "px").css("margin-right", (maxOffset - offset) * TAB_OFFSET_WIDTH + "px").click(function() {
if (tab.page == pageNumRendering) goto(tab.page - 1);
else goto(tab.page)
});
var $span = $("").html(tab.title).appendTo($a);
if (tab.bottom !== undefined) {
$a.css("bottom", tab.bottom);
} else {
if (tab.top !== undefined) top[offset] = tab.top + TOOLBAR_HEIGHT;
$a.css("top", top[offset]);
}
if (tab.title.length > 2) $a.addClass("large");
if (!tab.color) tab.color = options.tabsColor;
$a.addClass(tab.color);
if (tab.height) {
$a.css("height", tab.height);
$span.css("width", tab.height);
}
$element.find(".pdf-tabs").append($a);
if (tab.bottom === undefined) top[offset] += $a.height() + TAB_SPACING;
});
}
}
/**
* Get page info from document, resize canvas accordingly, and render page. * @param num Page number. */
function renderPage() {
if (state != LOADED && state != ZOOMEDIN) return;
if (pageNum == pageNumRendering) return;
zoomReset();
state = RENDERING;
pageNumRendering = pageNum;
updatePageCount();
// Using promise to fetch the page
pdfDoc.getPage(pageNumRendering).then(function(page) {
var viewport = page.getViewport(options.pdfScale * options.quality);
canvas.height = viewport.height;
canvas.width = viewport.width;
$(".pdf-canvas").css("transform", "scale(" + (1 / options.quality) + ")").css("transform-origin", "top left");
// Render PDF page into canvas context
var renderTask = page.render({
canvasContext: ctx,
viewport: viewport
});
if (!options.disableLinks) {
renderAnnotations(page, viewport);
}
// Wait for rendering to finish
renderTask.promise.then(function() {
state = LOADED;
if (pageNumRendering != pageNum) {
// New page rendering is pending
renderPage();
}
});
redraw();
$element.find(".pdf-loading").hide();
$element.find(".pdf-tabs").css("visibility", "visible");
$element.find("canvas").css("visibility", "visible");
if (options.changed) options.changed();
});
}
function redraw() {
if (state == INIT) {
var pdfHeight = options.loadingHeight;
var pdfWidth = options.loadingWidth;
} else {
var pdfHeight = canvas.height / options.quality;
var pdfWidth = canvas.width / options.quality;
}
var winHeight = $element.height();
var winWidth = $element.width();
scale = Math.min(winHeight / (pdfHeight + TOOLBAR_HEIGHT + BORDER_WIDTH * 2), winWidth / (pdfWidth + tabWidth * 2 + BORDER_WIDTH * 2));
if (scale > 1) scale = 1;
$element.find(".pdf-outerdiv").css("transform", "scale(" + scale + ")").css("width", pdfWidth + BORDER_WIDTH * 2).css("height", pdfHeight + TOOLBAR_HEIGHT + BORDER_WIDTH * 2).css("padding", "0 " + tabWidth + "px").css("left", (winWidth - scale * (pdfWidth + tabWidth * 2 + BORDER_WIDTH * 2)) / 2);
$element.find(".pdf-toolbar").css("width", pdfWidth).css("height", TOOLBAR_HEIGHT).css("left", tabWidth + BORDER_WIDTH);
$viewer.css("width", pdfWidth).css("height", pdfHeight).css("left", tabWidth).css("top", TOOLBAR_HEIGHT).css("border-width", BORDER_WIDTH);
$drag.css("width", pdfWidth).css("height", pdfHeight);
if (!options.disableZoom) {
$drag.panzoom('resetDimensions');
}
if (!options.disableSwipe) {
$viewer.swipe("option", "threshold", 75 * scale);
}
}
function updatePageCount() {
if (state == EMPTY || state == INIT) return;
$element.find(".pdf-page-count").html(pageNum + " / " + totalPages);
}
function getPageIndex(destRef) {
var defer = $.Deferred();
if (pagesRefMap[destRef.num + ' ' + destRef.gen + ' R']) {
defer.resolve(pagesRefMap[destRef.num + ' ' + destRef.gen + ' R']);
} else {
pdfDoc.getPageIndex(destRef).then(function(pageIndex) {
pagesRefMap[destRef.num + ' ' + destRef.gen + ' R'] = pageIndex + 1;
defer.resolve(pageIndex + 1);
});
}
return defer.promise();
}
function renderAnnotations(page, viewport) {
if (state != RENDERING) return;
$annotations.empty();
page.getAnnotations().then(function(annotationsData) {
viewport = viewport.clone({
dontFlip: true
});
$.each(annotationsData,
function(i, data) {
if (!data || !data.hasHtml || data.subtype !== 'Link' || (!data.dest && !data.url)) return;
var $el = $(PDFJS.AnnotationUtils.getHtmlElement(data, page.commonObjs));
var rect = data.rect;
var view = page.view;
rect = PDFJS.Util.normalizeRect([rect[0], view[3] - rect[1] + view[1], rect[2], view[3] - rect[3] + view[1]]);
$el.css("left", rect[0] + 'px').css("top", rect[1] + 'px').css("position", 'absolute');
var transform = viewport.transform;
var transformStr = 'matrix(' + transform.join(',') + ')';
$el.css('transform', transformStr);
var transformOriginStr = -rect[0] + 'px ' + -rect[1] + 'px';
$el.css('transformOrigin', transformOriginStr);
var link = $el.find("a").on('mousedown',
function(e) {
e.preventDefault();
});
if (data.url) {
link.addClass("externalLink").attr("href", data.url).attr("target", "_blank");
} else if (data.dest) {
link.addClass("internalLink").data("dest", data.dest).on('click',
function(e) {
if (state != LOADED && state != ZOOMEDIN) return false;
if (linksDisabled) return false;
var dest = $(this).data("dest");
if (dest instanceof Array) {
getPageIndex(dest[0]).then(function(num) {
if (state != LOADED && state != ZOOMEDIN) return;
goto(num);
});
} else {
pdfDoc.getDestination($(this).data("dest")).then(function(destRefs) {
if (! (destRefs instanceof Array)) return; // invalid destination
getPageIndex(destRefs[0]).then(function(num) {
if (state != LOADED && state != ZOOMEDIN) return;
if (linksDisabled) return;
goto(num);
});
});
}
return false;
});
}
$annotations.append($el);
});
});
}
}
})(jQuery);
