// Copyright 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
<include src="../../../../ui/webui/resources/js/util.js">
<include src="pdf_scripting_api.js">
<include src="viewport.js">
/**
* @return {number} Width of a scrollbar in pixels
*/
function getScrollbarWidth() {
var div = document.createElement('div');
div.style.visibility = 'hidden';
div.style.overflow = 'scroll';
div.style.width = '50px';
div.style.height = '50px';
div.style.position = 'absolute';
document.body.appendChild(div);
var result = div.offsetWidth - div.clientWidth;
div.parentNode.removeChild(div);
return result;
}
/**
* The minimum number of pixels to offset the toolbar by from the bottom and
* right side of the screen.
*/
PDFViewer.MIN_TOOLBAR_OFFSET = 15;
/**
* Creates a new PDFViewer. There should only be one of these objects per
* document.
*/
function PDFViewer() {
this.loaded = false;
// The sizer element is placed behind the plugin element to cause scrollbars
// to be displayed in the window. It is sized according to the document size
// of the pdf and zoom level.
this.sizer_ = $('sizer');
this.toolbar_ = $('toolbar');
this.pageIndicator_ = $('page-indicator');
this.progressBar_ = $('progress-bar');
this.passwordScreen_ = $('password-screen');
this.passwordScreen_.addEventListener('password-submitted',
this.onPasswordSubmitted_.bind(this));
this.errorScreen_ = $('error-screen');
// Create the viewport.
this.viewport_ = new Viewport(window,
this.sizer_,
this.viewportChangedCallback_.bind(this),
getScrollbarWidth());
// Create the plugin object dynamically so we can set its src. The plugin
// element is sized to fill the entire window and is set to be fixed
// positioning, acting as a viewport. The plugin renders into this viewport
// according to the scroll position of the window.
this.plugin_ = document.createElement('object');
// NOTE: The plugin's 'id' field must be set to 'plugin' since
// chrome/renderer/printing/print_web_view_helper.cc actually references it.
this.plugin_.id = 'plugin';
this.plugin_.type = 'application/x-google-chrome-pdf';
this.plugin_.addEventListener('message', this.handlePluginMessage_.bind(this),
false);
// Handle scripting messages from outside the extension that wish to interact
// with it. We also send a message indicating that extension has loaded and
// is ready to receive messages.
window.addEventListener('message', this.handleScriptingMessage_.bind(this),
false);
this.sendScriptingMessage_({type: 'readyToReceive'});
// If the viewer is started from a MIME type request, there will be a
// background page and stream details object with the details of the request.
// Otherwise, we take the query string of the URL to indicate the URL of the
// PDF to load. This is used for print preview in particular.
if (chrome.extension.getBackgroundPage &&
chrome.extension.getBackgroundPage()) {
this.streamDetails =
chrome.extension.getBackgroundPage().popStreamDetails();
}
if (!this.streamDetails) {
// The URL of this page will be of the form
// "chrome-extension://<extension id>?<pdf url>". We pull out the <pdf url>
// part here.
var url = window.location.search.substring(1);
this.streamDetails = {
streamUrl: url,
originalUrl: url,
responseHeaders: ''
};
}
this.plugin_.setAttribute('src', this.streamDetails.originalUrl);
this.plugin_.setAttribute('stream-url', this.streamDetails.streamUrl);
var headers = '';
for (var header in this.streamDetails.responseHeaders) {
headers += header + ': ' +
this.streamDetails.responseHeaders[header] + '\n';
}
this.plugin_.setAttribute('headers', headers);
if (window.top == window)
this.plugin_.setAttribute('full-frame', '');
document.body.appendChild(this.plugin_);
// Setup the button event listeners.
$('fit-to-width-button').addEventListener('click',
this.viewport_.fitToWidth.bind(this.viewport_));
$('fit-to-page-button').addEventListener('click',
this.viewport_.fitToPage.bind(this.viewport_));
$('zoom-in-button').addEventListener('click',
this.viewport_.zoomIn.bind(this.viewport_));
$('zoom-out-button').addEventListener('click',
this.viewport_.zoomOut.bind(this.viewport_));
$('save-button-link').href = this.streamDetails.originalUrl;
$('print-button').addEventListener('click', this.print_.bind(this));
// Setup the keyboard event listener.
document.onkeydown = this.handleKeyEvent_.bind(this);
}
PDFViewer.prototype = {
/**
* @private
* Handle key events. These may come from the user directly or via the
* scripting API.
* @param {KeyboardEvent} e the event to handle.
*/
handleKeyEvent_: function(e) {
var position = this.viewport_.position;
// Certain scroll events may be sent from outside of the extension.
var fromScriptingAPI = e.type == 'scriptingKeypress';
switch (e.keyCode) {
case 33: // Page up key.
// Go to the previous page if we are fit-to-page.
if (this.viewport_.fittingType == Viewport.FittingType.FIT_TO_PAGE) {
this.viewport_.goToPage(this.viewport_.getMostVisiblePage() - 1);
// Since we do the movement of the page.
e.preventDefault();
} else if (fromScriptingAPI) {
position.y -= this.viewport.size.height;
this.viewport.position = position;
}
return;
case 34: // Page down key.
// Go to the next page if we are fit-to-page.
if (this.viewport_.fittingType == Viewport.FittingType.FIT_TO_PAGE) {
this.viewport_.goToPage(this.viewport_.getMostVisiblePage() + 1);
// Since we do the movement of the page.
e.preventDefault();
} else if (fromScriptingAPI) {
position.y += this.viewport.size.height;
this.viewport.position = position;
}
return;
case 37: // Left arrow key.
// Go to the previous page if there are no horizontal scrollbars.
if (!this.viewport_.documentHasScrollbars().x) {
this.viewport_.goToPage(this.viewport_.getMostVisiblePage() - 1);
// Since we do the movement of the page.
e.preventDefault();
} else if (fromScriptingAPI) {
position.x -= Viewport.SCROLL_INCREMENT;
this.viewport.position = position;
}
return;
case 38: // Up arrow key.
if (fromScriptingAPI) {
position.y -= Viewport.SCROLL_INCREMENT;
this.viewport.position = position;
}
return;
case 39: // Right arrow key.
// Go to the next page if there are no horizontal scrollbars.
if (!this.viewport_.documentHasScrollbars().x) {
this.viewport_.goToPage(this.viewport_.getMostVisiblePage() + 1);
// Since we do the movement of the page.
e.preventDefault();
} else if (fromScriptingAPI) {
position.x += Viewport.SCROLL_INCREMENT;
this.viewport.position = position;
}
return;
case 40: // Down arrow key.
if (fromScriptingAPI) {
position.y += Viewport.SCROLL_INCREMENT;
this.viewport.position = position;
}
return;
case 187: // +/= key.
case 107: // Numpad + key.
if (e.ctrlKey || e.metaKey) {
this.viewport_.zoomIn();
// Since we do the zooming of the page.
e.preventDefault();
}
return;
case 189: // -/_ key.
case 109: // Numpad - key.
if (e.ctrlKey || e.metaKey) {
this.viewport_.zoomOut();
// Since we do the zooming of the page.
e.preventDefault();
}
return;
case 83: // s key.
if (e.ctrlKey || e.metaKey) {
// Simulate a click on the button so that the <a download ...>
// attribute is used.
$('save-button-link').click();
// Since we do the saving of the page.
e.preventDefault();
}
return;
case 80: // p key.
if (e.ctrlKey || e.metaKey) {
this.print_();
// Since we do the printing of the page.
e.preventDefault();
}
return;
}
},
/**
* @private
* Notify the plugin to print.
*/
print_: function() {
this.plugin_.postMessage({
type: 'print',
});
},
/**
* @private
* Update the loading progress of the document in response to a progress
* message being received from the plugin.
* @param {number} progress the progress as a percentage.
*/
updateProgress_: function(progress) {
this.progressBar_.progress = progress;
if (progress == -1) {
// Document load failed.
this.errorScreen_.style.visibility = 'visible';
this.sizer_.style.display = 'none';
this.toolbar_.style.visibility = 'hidden';
if (this.passwordScreen_.active) {
this.passwordScreen_.deny();
this.passwordScreen_.active = false;
}
} else if (progress == 100) {
// Document load complete.
this.loaded = true;
var loadEvent = new Event('pdfload');
window.dispatchEvent(loadEvent);
this.sendScriptingMessage_({
type: 'documentLoaded'
});
if (this.lastViewportPosition_)
this.viewport_.position = this.lastViewportPosition_;
}
},
/**
* @private
* An event handler for handling password-submitted events. These are fired
* when an event is entered into the password screen.
* @param {Object} event a password-submitted event.
*/
onPasswordSubmitted_: function(event) {
this.plugin_.postMessage({
type: 'getPasswordComplete',
password: event.detail.password
});
},
/**
* @private
* An event handler for handling message events received from the plugin.
* @param {MessageObject} message a message event.
*/
handlePluginMessage_: function(message) {
switch (message.data.type.toString()) {
case 'documentDimensions':
this.documentDimensions_ = message.data;
this.viewport_.setDocumentDimensions(this.documentDimensions_);
this.toolbar_.style.visibility = 'visible';
// If we received the document dimensions, the password was good so we
// can dismiss the password screen.
if (this.passwordScreen_.active)
this.passwordScreen_.accept();
this.pageIndicator_.initialFadeIn();
this.toolbar_.initialFadeIn();
break;
case 'email':
var href = 'mailto:' + message.data.to + '?cc=' + message.data.cc +
'&bcc=' + message.data.bcc + '&subject=' + message.data.subject +
'&body=' + message.data.body;
var w = window.open(href, '_blank', 'width=1,height=1');
if (w)
w.close();
break;
case 'getAccessibilityJSONReply':
this.sendScriptingMessage_(message.data);
break;
case 'getPassword':
// If the password screen isn't up, put it up. Otherwise we're
// responding to an incorrect password so deny it.
if (!this.passwordScreen_.active)
this.passwordScreen_.active = true;
else
this.passwordScreen_.deny();
break;
case 'goToPage':
this.viewport_.goToPage(message.data.page);
break;
case 'loadProgress':
this.updateProgress_(message.data.progress);
break;
case 'navigate':
if (message.data.newTab)
window.open(message.data.url);
else
window.location.href = message.data.url;
break;
case 'setScrollPosition':
var position = this.viewport_.position;
if (message.data.x != undefined)
position.x = message.data.x;
if (message.data.y != undefined)
position.y = message.data.y;
this.viewport_.position = position;
break;
case 'setTranslatedStrings':
this.passwordScreen_.text = message.data.getPasswordString;
this.progressBar_.text = message.data.loadingString;
this.errorScreen_.text = message.data.loadFailedString;
break;
case 'cancelStreamUrl':
chrome.streamsPrivate.abort(this.streamDetails.streamUrl);
break;
}
},
/**
* @private
* A callback that's called when the viewport changes.
*/
viewportChangedCallback_: function() {
if (!this.documentDimensions_)
return;
// Update the buttons selected.
$('fit-to-page-button').classList.remove('polymer-selected');
$('fit-to-width-button').classList.remove('polymer-selected');
if (this.viewport_.fittingType == Viewport.FittingType.FIT_TO_PAGE) {
$('fit-to-page-button').classList.add('polymer-selected');
} else if (this.viewport_.fittingType ==
Viewport.FittingType.FIT_TO_WIDTH) {
$('fit-to-width-button').classList.add('polymer-selected');
}
var hasScrollbars = this.viewport_.documentHasScrollbars();
var scrollbarWidth = this.viewport_.scrollbarWidth;
// Offset the toolbar position so that it doesn't move if scrollbars appear.
var toolbarRight = Math.max(PDFViewer.MIN_TOOLBAR_OFFSET, scrollbarWidth);
var toolbarBottom = Math.max(PDFViewer.MIN_TOOLBAR_OFFSET, scrollbarWidth);
if (hasScrollbars.vertical)
toolbarRight -= scrollbarWidth;
if (hasScrollbars.horizontal)
toolbarBottom -= scrollbarWidth;
this.toolbar_.style.right = toolbarRight + 'px';
this.toolbar_.style.bottom = toolbarBottom + 'px';
// Update the page indicator.
var visiblePage = this.viewport_.getMostVisiblePage();
this.pageIndicator_.index = visiblePage;
if (this.documentDimensions_.pageDimensions.length > 1 &&
hasScrollbars.vertical) {
this.pageIndicator_.style.visibility = 'visible';
} else {
this.pageIndicator_.style.visibility = 'hidden';
}
var position = this.viewport_.position;
var zoom = this.viewport_.zoom;
// Notify the plugin of the viewport change.
this.plugin_.postMessage({
type: 'viewport',
zoom: zoom,
xOffset: position.x,
yOffset: position.y
});
var visiblePageDimensions = this.viewport_.getPageScreenRect(visiblePage);
var size = this.viewport_.size;
this.sendScriptingMessage_({
type: 'viewport',
pageX: visiblePageDimensions.x,
pageY: visiblePageDimensions.y,
pageWidth: visiblePageDimensions.width,
viewportWidth: size.width,
viewportHeight: size.height,
});
},
/**
* @private
* Handle a scripting message from outside the extension (typically sent by
* PDFScriptingAPI in a page containing the extension) to interact with the
* plugin.
* @param {MessageObject} message the message to handle.
*/
handleScriptingMessage_: function(message) {
switch (message.data.type.toString()) {
case 'getAccessibilityJSON':
case 'loadPreviewPage':
this.plugin_.postMessage(message.data);
break;
case 'resetPrintPreviewMode':
if (!this.inPrintPreviewMode_) {
this.inPrintPreviewMode_ = true;
this.viewport_.fitToPage();
}
// Stash the scroll location so that it can be restored when the new
// document is loaded.
this.lastViewportPosition_ = this.viewport_.position;
// TODO(raymes): Disable these properly in the plugin.
var printButton = $('print-button');
if (printButton)
printButton.parentNode.removeChild(printButton);
var saveButton = $('save-button');
if (saveButton)
saveButton.parentNode.removeChild(saveButton);
this.pageIndicator_.pageLabels = message.data.pageNumbers;
this.plugin_.postMessage({
type: 'resetPrintPreviewMode',
url: message.data.url,
grayscale: message.data.grayscale,
// If the PDF isn't modifiable we send 0 as the page count so that no
// blank placeholder pages get appended to the PDF.
pageCount: (message.data.modifiable ?
message.data.pageNumbers.length : 0)
});
break;
case 'sendKeyEvent':
var e = document.createEvent('Event');
e.initEvent('scriptingKeypress');
e.keyCode = message.data.keyCode;
this.handleKeyEvent_(e);
break;
}
},
/**
* @private
* Send a scripting message outside the extension (typically to
* PDFScriptingAPI in a page containing the extension).
* @param {Object} message the message to send.
*/
sendScriptingMessage_: function(message) {
window.parent.postMessage(message, '*');
},
/**
* @type {Viewport} the viewport of the PDF viewer.
*/
get viewport() {
return this.viewport_;
}
};
var viewer = new PDFViewer();