DenysMedvid
/
pdf2htmlEX
mirror of https://github.com/pdf2htmlEX/pdf2htmlEX.git
1
0
Fork 0
Code Releases Activity
pdf2htmlEX/share/pdf2htmlEX.js.in

763 lines
22 KiB
JavaScript
Raw Blame History

/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=javascript : */
/**
* @license
* pdf2htmlEX.js: Core UI functions for pdf2htmlEX
* Copyright 2012,2013 Lu Wang <coolwanglu@gmail.com> and other contributors
* https://github.com/coolwanglu/pdf2htmlEX/blob/master/share/LICENSE
*/
/*
* Attention:
* This files is to be optimized by closure-compiler,
* so pay attention to the forms of property names:
*
* string/bracket form is safe, won't be optimized:
* var obj={ 'a':'b' }; obj['a'] = 'b';
* name/dot form will be optimized, the name is likely to be modified:
* var obj={ a:'b' }; obj.a = 'b';
*
* Either form can be used for internal objects,
* but must be consistent for each one respectively.
*
* string/bracket form must be used for external objects
* e.g. DEFAULT_CONFIG, object stored in page-data
* property names are part of the `protocol` in these cases.
*
*/
'use strict';
(function(pdf2htmlEX, document){
/**
* @const
* @struct
*/
var CSS_CLASS_NAMES = {
page_frame : '@CSS_PAGE_FRAME_CN@',
page_content_box : '@CSS_PAGE_CONTENT_BOX_CN@',
page_data : '@CSS_PAGE_DATA_CN@',
background_image : '@CSS_BACKGROUND_IMAGE_CN@',
link : '@CSS_LINK_CN@',
__dummy__ : 'no comma'
};
/**
* @const
* @dict
*/
var DEFAULT_CONFIG = {
// id of the element to put the pages in
'container_id' : 'page-container',
// id of the element for sidebar (to open and close)
'sidebar_id' : 'sidebar',
// id of the element for outline
'outline_id' : 'outline',
// class for the loading indicator
'loading_indicator_cls' : 'loading-indicator',
// How many page shall we preload that are below the last visible page
'preload_pages' : 3,
// how many ms should we wait before actually rendering the pages and after a scroll event
'render_timeout' : 100,
// zoom ratio step for each zoom in/out event
'scale_step' : 0.9,
// register global key handler
'register_key_handler' : true,
'__dummy__' : 'no comma'
};
/** @const */
var EPS = 1e-6;
/************************************/
/* utility function */
function invert(ctm) {
var det = ctm[0] * ctm[3] - ctm[1] * ctm[2];
return [ ctm[3] / det
,-ctm[1] / det
,-ctm[2] / det
,ctm[0] / det
,(ctm[2] * ctm[5] - ctm[3] * ctm[4]) / det
,(ctm[1] * ctm[4] - ctm[0] * ctm[5]) / det
];
};
function transform(ctm, pos) {
return [ctm[0] * pos[0] + ctm[2] * pos[1] + ctm[4]
,ctm[1] * pos[0] + ctm[3] * pos[1] + ctm[5]];
};
/**
* @param{Element} ele
*/
function get_page_number(ele) {
return parseInt(ele.getAttribute('data-page-no'), 16);
};
/**
* @param{NodeList} eles
*/
function disable_dragstart(eles) {
for(var i = 0, l = eles.length; i < l; ++i) {
eles[i].addEventListener('dragstart', function() {
return false;
}, false);
}
};
/**
* @param{...Object} var_args
*/
function clone_and_extend_objs(var_args) {
var result_obj = {};
for(var i = 0, l = arguments.length; i < l; ++i) {
var cur_obj = arguments[i];
for(var k in cur_obj) {
if(cur_obj.hasOwnProperty(k)) {
result_obj[k] = cur_obj[k];
}
}
}
return result_obj;
};
/**
* @constructor
* @param{Element} page The element for the page
*/
function Page(page) {
if(!page) return;
this.loaded = false;
this.shown = false;
this.p = page; // page frame element
this.n = get_page_number(page);
// page size
// Need to make rescale work when page_content_box is not loaded, yet
this.original_height = page.clientHeight;
this.original_width = page.clientWidth;
// content box
var content_box = page.getElementsByClassName(CSS_CLASS_NAMES.page_content_box)[0];
// if page is loaded
if (content_box) {
this.content_box = content_box;
/*
* scale ratios
*
* default_r : the first one
* set_r : last set
* cur_r : currently using
*/
this.default_r = this.set_r = this.cur_r = this.original_height / content_box.clientHeight;
this.page_data = JSON.parse(page.getElementsByClassName(CSS_CLASS_NAMES.page_data)[0].getAttribute('data-data'));
this.ctm = this.page_data['ctm'];
this.ictm = invert(this.ctm);
this.loaded = true;
}
};
Page.prototype = {
/* hide & show are for contents, the page frame is still there */
hide : function(){
if(this.loaded) {
this.content_box.classList.remove('opened');
this.shown = false;
}
},
show : function(){
if (this.loaded) {
if (! this.shown) {
this.content_box.classList.add('opened');
this.shown = true;
}
}
},
rescale : function(ratio) {
if(ratio == 0) {
this.set_r = this.default_r;
} else {
this.set_r = ratio;
}
if(Math.abs(this.set_r - this.cur_r) > EPS) {
this.cur_r = this.set_r;
var s = this.content_box.style;
s.msTransform = s.webkitTransform = s.transform = 'scale('+this.cur_r.toFixed(3)+')';
}
var s = this.p.style;
s.height = (this.original_height * this.set_r) + 'px';
s.width = (this.original_width * this.set_r) + 'px';
},
/* return if any part of this page is shown in the container */
is_visible : function() {
var p = this.p;
var pos = this.position();
return !((pos[1] > p.clientHeight) || (pos[1] + p.parentNode.clientHeight < 0));
},
/* return if this page or any neighbor of it is visible */
is_nearly_visible : function() {
var p = this.p;
var off = this.position();
/*
* I should use the height of the previous page or the next page here
* but since they are not easily available, just use '*2', which should be a good estimate in most cases
*/
return !((off[1] > p.clientHeight * 2) || (off[1] + p.parentNode.clientHeight * 2 < 0));
},
/*
* return the coordinate of the top-left corner of container
* in our coordinate system
* may or may not work if there are nodes between p.parentNode and p.offsetParent
*/
position : function () {
var p = this.p;
var c = p.parentNode;
return [ c.scrollLeft - p.offsetLeft - p.clientLeft
, c.scrollTop - p.offsetTop - p.clientTop];
},
height : function () {
return this.p.clientHeight;
},
width : function () {
return this.p.clientWidth;
}
};
/**
* export pdf2htmlEX.Viewer
* @constructor
*/
function Viewer(config) {
this.config = clone_and_extend_objs(DEFAULT_CONFIG, config);
this.pages_loading = [];
this.init_before_loading_content();
var _ = this;
document.addEventListener('DOMContentLoaded', function(){
_.init_after_loading_content();
}, false);
};
Viewer.prototype = {
scale : 1,
init_before_loading_content : function() {
/*hide all pages before loading, will reveal only visible ones later */
this.pre_hide_pages();
},
init_after_loading_content : function() {
this.sidebar = document.getElementById(this.config['sidebar_id']);
this.outline = document.getElementById(this.config['outline_id']);
this.container = document.getElementById(this.config['container_id']);
this.loading_indicator = document.getElementsByClassName(this.config['loading_indicator_cls'])[0];
{
// Open the outline if nonempty
var empty = true;
var nodes = this.outline.childNodes;
for(var i = 0, l = nodes.length; i < l; ++i) {
var cur_node = nodes[i];
if(cur_node.nodeName == 'UL') {
empty = false;
break;
}
}
if(!empty)
this.sidebar.classList.add('opened');
}
this.find_pages();
// disable dragging of background images
disable_dragstart(document.getElementsByClassName(CSS_CLASS_NAMES.background_image));
if(this.config['register_key_handler'])
this.register_key_handler();
// register schedule rendering
// renew old schedules since scroll() may be called frequently
var _ = this;
this.container.addEventListener('scroll', function() {
_.schedule_render(true);
}, false);
// handle links
[this.container, this.outline].forEach(function(ele) {
ele.addEventListener('click', _.link_handler.bind(_), false);
});
this.render();
},
/*
* set up this.pages and this.page_map
* pages is an array holding all the Page objects
* page-Map maps an original page number (in PDF) to the corresponding index in page
*/
find_pages : function() {
var new_pages = [];
var new_page_map = {};
var nodes = this.container.childNodes;
for(var i = 0, l = nodes.length; i < l; ++i) {
var cur_node = nodes[i];
if((cur_node.nodeType == Node.ELEMENT_NODE)
&& cur_node.classList.contains(CSS_CLASS_NAMES.page_frame)) {
var p = new Page(cur_node);
new_pages.push(p);
new_page_map[p.n] = new_pages.length - 1;
}
}
this.pages = new_pages;
this.page_map = new_page_map;
},
/**
* @param{number} idx
* @param{number=} pages_to_preload
* @param{function(Page)=} callback
*
* TODO: remove callback
*/
load_page : function(idx, pages_to_preload, callback) {
var pages = this.pages;
if (idx >= pages.length)
return; // Page does not exist
var cur_page = pages[idx];
if (cur_page.loaded)
return; // Page is loaded
if (this.pages_loading[idx])
return; // Page is already loading
var new_loading_indicator = this.loading_indicator.cloneNode();
new_loading_indicator.classList.add('active');
var cur_page_ele = cur_page.p;
cur_page_ele.appendChild(new_loading_indicator);
var url = cur_page_ele.getAttribute('data-page-url');
if (url) {
this.pages_loading[idx] = true; // Set semaphore
/* closure variables */
var _ = this;
var _idx = idx;
// load data
{
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
// Reset loading token
delete _.pages_loading[_idx];
if(xhr.status == 200) {
// find the page element in the data
var div = document.createElement('div');
div.innerHTML = xhr.responseText;
var new_page = null;
var nodes = div.childNodes;
for(var i = 0, l = nodes.length; i < l; ++i) {
var cur_node = nodes[i];
if((cur_node.nodeType == Node.ELEMENT_NODE)
&& cur_node.classList.contains(CSS_CLASS_NAMES.page_frame)) {
new_page = cur_node;
break;
}
}
// replace the old page with loaded data
// the loading indicator on this page should also be destroyed
var p = _.pages[_idx];
_.container.replaceChild(new_page, p.p);
p = new Page(new_page);
_.pages[_idx] = p;
p.hide();
p.rescale(_.scale);
// disable background image dragging
disable_dragstart(new_page.getElementsByClassName(CSS_CLASS_NAMES.background_image));
_.schedule_render(false);
if(callback){ callback(p); }
}
};
xhr.send(null);
}
}
// Concurrent prefetch of the next pages
if (pages_to_preload === undefined)
pages_to_preload = this.config['preload_pages'];
if (--pages_to_preload > 0)
this.load_page(idx+1, pages_to_preload);
},
pre_hide_pages : function() {
/* pages might have not been loaded yet, so add a CSS rule */
var s = '@media screen{.'+CSS_CLASS_NAMES.page_content_box+'{display:none;}}';
var n = document.createElement('style');
n.type = 'text/css';
if (n.styleSheet) {
n.styleSheet.cssText = s;
} else {
n.appendChild(document.createTextNode(s));
}
document.getElementsByTagName('head')[0].appendChild(n);
},
render : function () {
/* hide (positional) invisible pages */
var pl = this.pages;
var pm = this.page_map;
for(var i = 0, l = pl.length; i < l; ++i) {
var p = pl[i];
if(p.is_nearly_visible()){
if (p.loaded) {
p.show();
} else {
this.load_page(i);
}
} else {
p.hide();
}
}
},
/*
* renew: renew the existing schedule instead of using the old one
*/
schedule_render : function(renew) {
if(this.render_timer !== undefined) {
if(!renew) return;
clearTimeout(this.render_timer);
}
var _ = this;
this.render_timer = setTimeout(function () {
_.render();
delete _.render_timer;
}, this.config['render_timeout']);
},
/*
* Handling key events, zooming, scrolling etc.
*/
register_key_handler: function () {
/*
* When user try to zoom in/out using ctrl + +/- or mouse wheel
* handle this and prevent the default behaviours
*
* Code credit to PDF.js
*/
var _ = this;
// Firefox specific event, so that we can prevent browser from zooming
window.addEventListener('DOMMouseScroll', function(e) {
if (e.ctrlKey) {
e.preventDefault();
_.rescale(Math.pow(_.config['scale_step'], e.detail), true);
}
}, false);
window.addEventListener('keydown', function(e) {
var handled = false;
/*
var cmd = (e.ctrlKey ? 1 : 0)
| (e.altKey ? 2 : 0)
| (e.shiftKey ? 4 : 0)
| (e.metaKey ? 8 : 0)
;
*/
var with_ctrl = e.ctrlKey || e.metaKey;
var with_alt = e.altKey;
switch (e.keyCode) {
case 61: // FF/Mac '='
case 107: // FF '+' and '='
case 187: // Chrome '+'
if(with_ctrl){
_.rescale(1.0 / _.config['scale_step'], true);
handled = true;
}
break;
case 173: // FF/Mac '-'
case 109: // FF '-'
case 189: // Chrome '-'
if(with_ctrl){
_.rescale(_.config['scale_step'], true);
handled = true;
}
break;
case 48: // '0'
if(with_ctrl){
_.rescale(0, false);
handled = true;
}
break;
case 33: // Page UP:
if (with_alt) { // alt-pageup -> scroll one page up
_.scroll_to(_.get_prev_page());
} else { // pageup -> scroll one screen up
_.container.scrollTop -= _.container.clientHeight;
}
handled = true;
break;
case 34: // Page DOWN
if (with_alt) { // alt-pagedown -> scroll one page down
_.scroll_to(_.get_next_page());
} else { // pagedown -> scroll one screen down
_.container.scrollTop += _.container.clientHeight;
}
handled = true;
break;
case 35: // End
if (with_ctrl) {
_.container.scrollTop = _.container.scrollHeight;
handled = true;
}
break;
case 36: // Home
if (e.with_ctrl) {
_.container.scrollTop = 0;
handled = true;
}
break;
}
if(handled) {
e.preventDefault();
return;
}
}, false);
},
// TODO
get_next_page : function() { return null; },
get_prev_page : function() { return null; },
/**
* @param{number} ratio
* @param{boolean} is_relative
* @param{number=} offsetX
* @param{number=} offsetY
*
* TODO: offsetX/Y is by default the center of container
* TODO consider scale on offsetX/Y
*/
rescale : function (ratio, is_relative, offsetX, offsetY) {
if (! offsetX)
offsetX = 0;
if (! offsetY)
offsetY = 0;
// Save offset of the active page
var active_page = this.get_active_page();
if(!active_page) return;
var active_page_ele = active_page.p;
var prev_offset = [ active_page_ele.offsetLeft, active_page_ele.offsetTop ];
var old_scale = this.scale;
var pl = this.pages;
// Set new scale
if (ratio == 0) {
this.scale = 1;
is_relative = false;
}
else if (is_relative)
this.scale *= ratio;
else
this.scale = ratio;
// Rescale pages
for(var i = 0, l = pl.length; i < l; ++i)
pl[i].rescale(this.scale);
var container = this.container;
// Correct container scroll to keep view aligned while zooming
var correction_top = active_page_ele.offsetTop - prev_offset[1];
container.scrollTop += correction_top + offsetY;
// Take the center of the view as a reference
var prev_center_x = container.clientWidth / 2 - prev_offset[0];
// Calculate the difference respect the center of the view after the zooming
var correction_left = prev_center_x * (this.scale/old_scale - 1) + active_page_ele.offsetLeft - prev_offset[0];
// Scroll the container accordingly to keep alignment to the initial reference
container.scrollLeft += correction_left + offsetX;
// some pages' visibility may be toggled, wait for next render()
// renew old schedules since rescale() may be called frequently
this.schedule_render(true);
},
fit_width : function () {
var active_page = this.get_active_page();
if(!active_page) return;
this.rescale(this.container.clientWidth / active_page.width(), false);
this.scroll_to(this.page_map[active_page.n], [0,0]);
},
fit_height : function () {
var active_page = this.get_active_page();
if(!active_page) return;
this.rescale(this.container.clientHeight / active_page.height(), false);
this.scroll_to(this.page_map[active_page.n], [0,0]);
},
// TODO: preserve active_page idx after rescaling
get_active_page : function () {
var pl = this.pages;
for(var i = 0, l = pl.length; i < l; ++i) {
if (pl[i].is_visible())
return pl[i];
}
return null;
},
/**
* @param{Node} ele
*/
get_containing_page : function(ele) {
/* get the page obj containing obj */
while(ele) {
if((ele.nodeType == Node.ELEMENT_NODE)
&& ele.classList.contains(CSS_CLASS_NAMES.page_frame)) {
/*
* Get original page number and map it to index of pages
* TODO: store the index on the dom element
*/
var pn = get_page_number(/** @type{Element} */(ele));
var pm = this.page_map;
return (pn in pm) ? this.pages[pm[pn]] : null;
}
ele = ele.parentNode;
}
return null;
},
link_handler : function (e) {
var target = e.target;
var cur_pos = [0,0];
// cur_page might be undefined, e.g. from Outline
var cur_page = this.get_containing_page(target);
if(cur_page)
{
cur_pos = cur_page.position();
//get the coordinates in default user system
cur_pos = transform(cur_page.ictm, [cur_pos[0], cur_page.height()-cur_pos[1]]);
}
var detail_str = /** @type{string} */ (target.getAttribute('data-dest-detail'));
if(!detail_str) return;
var ok = false;
var detail = JSON.parse(detail_str);
var target_page_no = detail[0];
var page_map = this.page_map;
if(!(target_page_no in page_map)) return;
var target_page_idx = page_map[target_page_no];
var target_page = this.pages[target_page_idx];
var pos = [0,0];
var upside_down = true;
// TODO: zoom
// TODO: BBox
switch(detail[1]) {
case 'XYZ':
pos = [(detail[2] == null) ? cur_pos[0] : detail[2]
,(detail[3] == null) ? cur_pos[1] : detail[3]];
ok = true;
break;
case 'Fit':
case 'FitB':
pos = [0,0];
ok = true;
break;
case 'FitH':
case 'FitBH':
pos = [0, (detail[2] == null) ? cur_pos[1] : detail[2]];
ok = true;
break;
case 'FitV':
case 'FitBV':
pos = [(detail[2] == null) ? cur_pos[0] : detail[2], 0];
ok = true;
break;
case 'FitR':
/* locate the top-left corner of the rectangle */
pos = [detail[2], detail[5]];
upside_down = false;
ok = true;
break;
default:
ok = false;
break;
}
if(ok) {
var _ = this;
var scale = this.scale;
var _pos = [pos[0] * scale, pos[1] * scale]
/* page should of type Page */
var transform_and_scroll = function(page) {
_pos = transform(page.ctm, _pos);
if(upside_down) {
_pos[1] = page.height() - _pos[1];
}
_.scroll_to(target_page_idx, _pos);
};
if (target_page.loaded) {
transform_and_scroll(target_page);
} else {
// TODO: scroll_to may finish before load_page
// Scroll to the exact position once loaded.
this.load_page(target_page_idx, undefined, transform_and_scroll);
// In the meantime page gets loaded, scroll approximately position for maximum responsiveness.
this.scroll_to(target_page_idx, [0,0]);
}
e.preventDefault();
}
},
/**
* @param{number} page_idx
* @param{Array=} pos [x,y], where (0,0) is the top-left corner
*/
scroll_to : function(page_idx, pos) {
var target_page = this.pages[page_idx];
if(target_page === undefined) return;
if(pos === undefined)
pos = [0,0];
var cur_target_pos = target_page.position();
var container = this.container;
container.scrollLeft += pos[0] - cur_target_pos[0];
container.scrollTop += pos[1] - cur_target_pos[1];
},
__last_member__ : 'no comma' /*,*/
};
pdf2htmlEX['Viewer'] = Viewer;
})((window['pdf2htmlEX'] = window['pdf2htmlEX'] || {}), document);
View Git Blame Copy Permalink