Mirrors/jibo-cli
1
0
Fork 0
mirror of https://kevinblog.sytes.net/Code/Jibo-Revival-Group/jibo-cli.git synced 2026-06-16 08:36:18 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
bceda87f93cc0dbea9e5e91de8bc0526d79be6b4
jibo-cli/node_modules/electron/dist/pdf_viewer_resources.pak

5168 lines
160 KiB
Plaintext
Raw Normal View History

Replace deprecated electron-prebuilt with electron@2.0.18 - Updated package.json to use electron@2.0.18 instead of electron-prebuilt@1.4.3 - Modified lib/jibo-cli.js to reference 'electron' instead of 'electron-prebuilt' - This fixes compatibility issues with the simulator on modern Linux systems - electron-prebuilt was deprecated and renamed to electron in 2016
2026-04-05 22:47:03 -04:00
$<01><03><00><03><00><03>
<00>G<00>j<><00>s<><00>R.<00>`F<00><03>G<00>Ej<00>n<><00><03><><00>(<28><00><0F><00>-<2D><00><03><><00>3<><00>e<><00><03><00>i<00>:<00><03><00>t<00><03> <00>N<00>X<00>H<00>%<00><03>(`=<04>HR9a<04>ftn<04>tU<>/* Copyright 2015 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. */
body {
background-color: rgb(82, 86, 89);
font-family: 'Roboto', 'Noto', sans-serif;
margin: 0;
}
viewer-page-indicator {
visibility: hidden;
z-index: 2;
}
viewer-pdf-toolbar {
position: fixed;
width: 100%;
z-index: 4;
}
#plugin {
height: 100%;
position: fixed;
width: 100%;
z-index: 1;
}
#sizer {
position: absolute;
z-index: 0;
}
@media(max-height: 250px) {
viewer-pdf-toolbar {
display: none;
}
}
@media(max-height: 200px) {
viewer-zoom-toolbar {
display: none;
}
}
@media(max-width: 300px) {
viewer-zoom-toolbar {
display: none;
}
}
<!doctype html>
<html>
<head>
<base href="chrome://pdf-viewer/">
<meta charset="utf-8">
<link rel="import" href="elements/viewer-error-screen/viewer-error-screen.html">
<link rel="import" href="elements/viewer-page-indicator/viewer-page-indicator.html">
<link rel="import" href="elements/viewer-page-selector/viewer-page-selector.html">
<link rel="import" href="elements/viewer-password-screen/viewer-password-screen.html">
<link rel="import" href="elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html">
<link rel="import" href="elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html">
<link rel="import" href="elements/shared-vars.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<viewer-pdf-toolbar id="toolbar" hidden></viewer-pdf-toolbar>
<div id="sizer"></div>
<viewer-password-screen id="password-screen"></viewer-password-screen>
<viewer-zoom-toolbar id="zoom-toolbar"></viewer-zoom-toolbar>
<viewer-page-indicator id="page-indicator"></viewer-page-indicator>
<viewer-error-screen id="error-screen"></viewer-error-screen>
</body>
<script src="pdf_fitting_type.js"></script>
<script src="toolbar_manager.js"></script>
<script src="viewport.js"></script>
<script src="open_pdf_params_parser.js"></script>
<script src="navigator.js"></script>
<script src="viewport_scroller.js"></script>
<script src="gesture_detector.js"></script>
<script src="zoom_manager.js"></script>
<script src="pdf_scripting_api.js"></script>
<script src="chrome://resources/js/promise_resolver.js"></script>
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="browser_api.js"></script>
<script src="pdf.js"></script>
<script src="main.js"></script>
</html>
// Copyright 2014 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';
/**
* Global PDFViewer object, accessible for testing.
* @type Object
*/
var viewer;
(function() {
/**
* Stores any pending messages received which should be passed to the
* PDFViewer when it is created.
* @type Array
*/
var pendingMessages = [];
/**
* Handles events that are received prior to the PDFViewer being created.
* @param {Object} message A message event received.
*/
function handleScriptingMessage(message) {
pendingMessages.push(message);
}
/**
* Initialize the global PDFViewer and pass any outstanding messages to it.
* @param {Object} browserApi An object providing an API to the browser.
*/
function initViewer(browserApi) {
// PDFViewer will handle any messages after it is created.
window.removeEventListener('message', handleScriptingMessage, false);
viewer = new PDFViewer(browserApi);
while (pendingMessages.length > 0)
viewer.handleScriptingMessage(pendingMessages.shift());
}
/**
* Entrypoint for starting the PDF viewer. This function obtains the browser
* API for the PDF and constructs a PDFViewer object with it.
*/
cr.sendWithPromise('initialize').then(function(opts) {
// Set up an event listener to catch scripting messages which are sent prior
// to the PDFViewer being created.
window.addEventListener('message', handleScriptingMessage, false);
createBrowserApi(opts).then(initViewer);
});
})()
// 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';
/**
* @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;
}
/**
* Return the filename component of a URL, percent decoded if possible.
* @param {string} url The URL to get the filename from.
* @return {string} The filename component.
*/
function getFilenameFromURL(url) {
// Ignore the query and fragment.
var mainUrl = url.split(/#|\?/)[0];
var components = mainUrl.split(/\/|\\/);
var filename = components[components.length - 1];
try {
return decodeURIComponent(filename);
} catch (e) {
if (e instanceof URIError)
return filename;
throw e;
}
}
/**
* Whether keydown events should currently be ignored. Events are ignored when
* an editable element has focus, to allow for proper editing controls.
* @param {HTMLElement} activeElement The currently selected DOM node.
* @return {boolean} True if keydown events should be ignored.
*/
function shouldIgnoreKeyEvents(activeElement) {
while (activeElement.shadowRoot != null &&
activeElement.shadowRoot.activeElement != null) {
activeElement = activeElement.shadowRoot.activeElement;
}
return (
activeElement.isContentEditable || activeElement.tagName == 'INPUT' ||
activeElement.tagName == 'TEXTAREA');
}
/**
* The minimum number of pixels to offset the toolbar by from the bottom and
* right side of the screen.
*/
PDFViewer.MIN_TOOLBAR_OFFSET = 15;
/**
* The height of the toolbar along the top of the page. The document will be
* shifted down by this much in the viewport.
*/
PDFViewer.MATERIAL_TOOLBAR_HEIGHT = 56;
/**
* Minimum height for the material toolbar to show (px). Should match the media
* query in index-material.css. If the window is smaller than this at load,
* leave no space for the toolbar.
*/
PDFViewer.TOOLBAR_WINDOW_MIN_HEIGHT = 250;
/**
* The light-gray background color used for print preview.
*/
PDFViewer.LIGHT_BACKGROUND_COLOR = '0xFFCCCCCC';
/**
* The dark-gray background color used for the regular viewer.
*/
PDFViewer.DARK_BACKGROUND_COLOR = '0xFF525659';
/**
* Creates a new PDFViewer. There should only be one of these objects per
* document.
* @constructor
* @param {!BrowserApi} browserApi An object providing an API to the browser.
*/
function PDFViewer(browserApi) {
this.browserApi_ = browserApi;
this.originalUrl_ = this.browserApi_.getStreamInfo().originalUrl;
this.loadState_ = LoadState.LOADING;
this.parentWindow_ = null;
this.parentOrigin_ = null;
this.isFormFieldFocused_ = false;
this.delayedScriptingMessages_ = [];
this.isPrintPreview_ = location.origin === 'chrome://print';
this.isPrintPreviewLoaded_ = false;
this.isUserInitiatedEvent_ = true;
// Parse open pdf parameters.
this.paramsParser_ =
new OpenPDFParamsParser(this.getNamedDestination_.bind(this));
var toolbarEnabled =
this.paramsParser_.getUiUrlParams(this.originalUrl_).toolbar &&
!this.isPrintPreview_;
var toolbarSpacerEnabled =
this.paramsParser_.getUiUrlParams(this.originalUrl_).toolbarSpacer;
// 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');
if (this.isPrintPreview_)
this.pageIndicator_ = $('page-indicator');
this.passwordScreen_ = $('password-screen');
this.passwordScreen_.addEventListener('password-submitted',
this.onPasswordSubmitted_.bind(this));
this.errorScreen_ = $('error-screen');
// Can only reload if we are in a normal tab.
this.errorScreen_.reloadFn = function() {
chrome.send('reload');
};
// Create the viewport.
var shortWindow = window.innerHeight < PDFViewer.TOOLBAR_WINDOW_MIN_HEIGHT;
var topToolbarHeight =
(toolbarEnabled) ? PDFViewer.MATERIAL_TOOLBAR_HEIGHT : 0;
topToolbarHeight = (toolbarSpacerEnabled) ? topToolbarHeight : 0
var defaultZoom =
this.browserApi_.getZoomBehavior() == BrowserApi.ZoomBehavior.MANAGE ?
this.browserApi_.getDefaultZoom() :
1.0;
this.viewport_ = new Viewport(
window, this.sizer_, this.viewportChanged_.bind(this),
this.beforeZoom_.bind(this), this.afterZoom_.bind(this),
this.setUserInitiated_.bind(this), getScrollbarWidth(), defaultZoom,
topToolbarHeight);
// 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('embed');
// 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.plugin_.setAttribute('src', this.originalUrl_);
this.plugin_.setAttribute(
'stream-url', this.browserApi_.getStreamInfo().streamUrl);
var headers = '';
for (var header in this.browserApi_.getStreamInfo().responseHeaders) {
headers += header + ': ' +
this.browserApi_.getStreamInfo().responseHeaders[header] + '\n';
}
this.plugin_.setAttribute('headers', headers);
var backgroundColor = PDFViewer.DARK_BACKGROUND_COLOR;
this.plugin_.setAttribute('background-color', backgroundColor);
this.plugin_.setAttribute('top-toolbar-height', topToolbarHeight);
if (this.browserApi_.getStreamInfo().embedded) {
this.plugin_.setAttribute(
'top-level-url', this.browserApi_.getStreamInfo().tabUrl);
} else {
this.plugin_.setAttribute('full-frame', '');
}
document.body.appendChild(this.plugin_);
// Setup the button event listeners.
this.zoomToolbar_ = $('zoom-toolbar');
this.zoomToolbar_.addEventListener(
'fit-to-changed', this.fitToChanged_.bind(this));
this.zoomToolbar_.addEventListener(
'zoom-in', this.viewport_.zoomIn.bind(this.viewport_));
this.zoomToolbar_.addEventListener(
'zoom-out', this.viewport_.zoomOut.bind(this.viewport_));
this.gestureDetector_ = new GestureDetector(this.plugin_);
this.gestureDetector_.addEventListener(
'pinchstart', this.onPinchStart_.bind(this));
this.sentPinchEvent_ = false;
this.gestureDetector_.addEventListener(
'pinchupdate', this.onPinchUpdate_.bind(this));
this.gestureDetector_.addEventListener(
'pinchend', this.onPinchEnd_.bind(this));
if (toolbarEnabled) {
this.toolbar_ = $('toolbar');
this.toolbar_.hidden = false;
this.toolbar_.addEventListener('save', this.save_.bind(this));
this.toolbar_.addEventListener('print', this.print_.bind(this));
this.toolbar_.addEventListener(
'rotate-right', this.rotateClockwise_.bind(this));
// Must attach to mouseup on the plugin element, since it eats mousedown
// and click events.
this.plugin_.addEventListener(
'mouseup', this.toolbar_.hideDropdowns.bind(this.toolbar_));
this.toolbar_.docTitle = getFilenameFromURL(this.originalUrl_);
}
document.body.addEventListener('change-page', e => {
this.viewport_.goToPage(e.detail.page);
});
document.body.addEventListener('change-page-and-y', e => {
this.viewport_.goToPageAndY(e.detail.page, e.detail.y);
});
document.body.addEventListener('navigate', e => {
var disposition = e.detail.newtab ?
Navigator.WindowOpenDisposition.NEW_BACKGROUND_TAB :
Navigator.WindowOpenDisposition.CURRENT_TAB;
this.navigator_.navigate(e.detail.uri, disposition);
});
this.toolbarManager_ =
new ToolbarManager(window, this.toolbar_, this.zoomToolbar_);
/// Set up the ZoomManager.
this.zoomManager_ = ZoomManager.create(
this.browserApi_.getZoomBehavior(), this.viewport_,
this.browserApi_.setZoom.bind(this.browserApi_),
this.browserApi_.getInitialZoom());
this.viewport_.zoomManager = this.zoomManager_;
this.browserApi_.addZoomEventListener(
this.zoomManager_.onBrowserZoomChange.bind(this.zoomManager_));
// Setup the keyboard event listener.
document.addEventListener('keydown', this.handleKeyEvent_.bind(this));
document.addEventListener('mousemove', this.handleMouseEvent_.bind(this));
document.addEventListener('mouseout', this.handleMouseEvent_.bind(this));
document.addEventListener('wheel', this.handleMouseEvent_.bind(this));
document.addEventListener(
'contextmenu', this.handleContextMenuEvent_.bind(this));
var tabId = this.browserApi_.getStreamInfo().tabId;
this.navigator_ = new Navigator(
this.originalUrl_, this.viewport_, this.paramsParser_,
new NavigatorDelegate(tabId));
this.viewportScroller_ =
new ViewportScroller(this.viewport_, this.plugin_, window);
// Request translated strings.
cr.sendWithPromise('getStrings').then(this.handleStrings_.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.fromScriptingAPI;
if (shouldIgnoreKeyEvents(document.activeElement) || e.defaultPrevented)
return;
this.toolbarManager_.hideToolbarsAfterTimeout(e);
var pageUpHandler = () => {
// Go to the previous page if we are fit-to-page or fit-to-height.
if (this.viewport_.isPagedMode()
|| (e.ctrlKey || e.metaKey)) {
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;
}
};
var pageDownHandler = () => {
// Go to the next page if we are fit-to-page or fit-to-height.
if (this.viewport_.isPagedMode()
|| (e.ctrlKey || e.metaKey)) {
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;
}
};
switch (e.keyCode) {
case 9: // Tab key.
this.toolbarManager_.showToolbarsForKeyboardNavigation();
return;
case 27: // Escape key.
if (!this.isPrintPreview_) {
this.toolbarManager_.hideSingleToolbarLayer();
return;
}
break; // Ensure escape falls through to the print-preview handler.
case 32: // Space key.
if (e.shiftKey)
pageUpHandler();
else
pageDownHandler();
return;
case 33: // Page up key.
pageUpHandler();
return;
case 34: // Page down key.
pageDownHandler();
return;
case 37: // Left arrow key.
if (!hasKeyModifiers(e)) {
// Go to the previous page if there are no horizontal scrollbars and
// no form field is focused.
if (!(this.viewport_.documentHasScrollbars().horizontal ||
this.isFormFieldFocused_)) {
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.
if (!hasKeyModifiers(e)) {
// Go to the next page if there are no horizontal scrollbars and no
// form field is focused.
if (!(this.viewport_.documentHasScrollbars().horizontal ||
this.isFormFieldFocused_)) {
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 65: // 'a' key.
if (e.ctrlKey || e.metaKey) {
this.plugin_.postMessage({type: 'selectAll'});
// Since we do selection ourselves.
e.preventDefault();
}
return;
case 71: // 'g' key.
if (this.toolbar_ && (e.ctrlKey || e.metaKey) && e.altKey) {
this.toolbarManager_.showToolbars();
this.toolbar_.selectPageNumber();
}
return;
case 80: // 'p' key
if ((e.ctrlKey || e.metaKey) && e.altKey) {
this.viewport_.fitToPage();
}
return;
case 87: // 'w' key
if ((e.ctrlKey || e.metaKey) && e.altKey) {
this.viewport_.fitToWidth();
}
return;
case 219: // Left bracket key.
if (e.ctrlKey)
this.rotateCounterClockwise_();
return;
case 220: // Backslash key.
if (e.ctrlKey)
this.zoomToolbar_.fitToggleFromHotKey();
return;
case 221: // Right bracket key.
if (e.ctrlKey)
this.rotateClockwise_();
return;
}
// Give print preview a chance to handle the key event.
if (!fromScriptingAPI && this.isPrintPreview_) {
this.sendScriptingMessage_(
{type: 'sendKeyEvent', keyEvent: SerializeKeyEvent(e)});
} else {
// Show toolbars as a fallback.
if (!(e.shiftKey || e.ctrlKey || e.altKey))
this.toolbarManager_.showToolbars();
}
},
handleMouseEvent_: function(e) {
if (e.type == 'mousemove')
this.toolbarManager_.handleMouseMove(e);
else if (e.type == 'mouseout')
this.toolbarManager_.hideToolbarsForMouseOut();
else if (e.type == 'wheel' && (e.ctrlKey || e.metaKey)) {
if (e.deltaY < 0) {
this.viewport_.zoomIn.apply(this.viewport_);
} else if (e.deltaY > 0) {
this.viewport_.zoomOut.apply(this.viewport_);
}
}
},
handleContextMenuEvent_: function(e) {
// Stop Chrome from popping up the context menu on long press. We need to
// make sure the start event did not have 2 touches because we don't want
// to block two finger tap opening the context menu. We check for
// firesTouchEvents in order to not block the context menu on right click.
if (e.sourceCapabilities.firesTouchEvents &&
!this.gestureDetector_.wasTwoFingerTouch()) {
e.preventDefault();
}
},
/**
* @private
* Rotate the plugin clockwise.
*/
rotateClockwise_: function() {
this.plugin_.postMessage({type: 'rotateClockwise'});
},
/**
* @private
* Rotate the plugin counter-clockwise.
*/
rotateCounterClockwise_: function() {
this.plugin_.postMessage({type: 'rotateCounterclockwise'});
},
/**
* @private
* Request to change the viewport fitting type.
* @param {CustomEvent} e Event received with the new FittingType as detail.
*/
fitToChanged_: function(e) {
if (e.detail == FittingType.FIT_TO_PAGE) {
this.viewport_.fitToPage();
this.toolbarManager_.forceHideTopToolbar();
} else if (e.detail == FittingType.FIT_TO_WIDTH) {
this.viewport_.fitToWidth();
} else if (e.detail == FittingType.FIT_TO_HEIGHT) {
this.viewport_.fitToHeight();
this.toolbarManager_.forceHideTopToolbar();
}
},
/**
* @private
* Notify the plugin to print.
*/
print_: function() {
this.plugin_.postMessage({type: 'print'});
},
/**
* @private
* Notify the plugin to save.
*/
save_: function() {
this.plugin_.postMessage({type: 'save'});
},
/**
* Fetches the page number corresponding to the given named destination from
* the plugin.
* @param {string} name The namedDestination to fetch page number from plugin.
*/
getNamedDestination_: function(name) {
this.plugin_.postMessage(
{type: 'getNamedDestination', namedDestination: name});
},
/**
* @private
* Sends a 'documentLoaded' message to the PDFScriptingAPI if the document has
* finished loading.
*/
sendDocumentLoadedMessage_: function() {
if (this.loadState_ == LoadState.LOADING)
return;
window.dispatchEvent(
new CustomEvent('pdf-loaded', { detail: this.loadState_ }))
this.sendScriptingMessage_(
{type: 'documentLoaded', load_state: this.loadState_});
},
/**
* @private
* Handle open pdf parameters. This function updates the viewport as per
* the parameters mentioned in the url while opening pdf. The order is
* important as later actions can override the effects of previous actions.
* @param {Object} params The open params passed in the URL.
*/
handleURLParams_: function(params) {
if (params.page != undefined)
this.viewport_.goToPage(params.page);
if (params.position) {
// Make sure we don't cancel effect of page parameter.
this.viewport_.position = {
x: this.viewport_.position.x + params.position.x,
y: this.viewport_.position.y + params.position.y
};
}
if (params.zoom)
this.viewport_.setZoom(params.zoom);
if (params.view) {
this.isUserInitiatedEvent_ = false;
this.zoomToolbar_.forceFit(params.view);
if (params.viewPosition) {
var zoomedPositionShift = params.viewPosition * this.viewport_.zoom;
var currentViewportPosition = this.viewport_.position;
if (params.view == FittingType.FIT_TO_WIDTH)
currentViewportPosition.y += zoomedPositionShift;
else if (params.view == FittingType.FIT_TO_HEIGHT)
currentViewportPosition.x += zoomedPositionShift;
this.viewport_.position = currentViewportPosition;
}
this.isUserInitiatedEvent_ = true;
}
},
/**
* @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) {
if (this.toolbar_)
this.toolbar_.loadProgress = progress;
if (progress == -1) {
// Document load failed.
this.errorScreen_.show();
this.sizer_.style.display = 'none';
if (this.passwordScreen_.active) {
this.passwordScreen_.deny();
this.passwordScreen_.close();
}
this.loadState_ = LoadState.FAILED;
this.sendDocumentLoadedMessage_();
} else if (progress == 100) {
// Document load complete.
if (this.lastViewportPosition_)
this.viewport_.position = this.lastViewportPosition_;
this.paramsParser_.getViewportFromUrlParams(
this.originalUrl_, this.handleURLParams_.bind(this));
this.loadState_ = LoadState.SUCCESS;
this.sendDocumentLoadedMessage_();
while (this.delayedScriptingMessages_.length > 0)
this.handleScriptingMessage(this.delayedScriptingMessages_.shift());
this.toolbarManager_.hideToolbarsAfterTimeout();
}
},
/**
* @private
* Load a dictionary of translated strings into the UI. Used as a callback for
* chrome.resourcesPrivate.
* @param {Object} strings Dictionary of translated strings
*/
handleStrings_: function(strings) {
document.documentElement.dir = strings.textdirection;
document.documentElement.lang = strings.language;
$('toolbar').strings = strings;
$('zoom-toolbar').strings = strings;
$('password-screen').strings = strings;
$('error-screen').strings = strings;
},
/**
* @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.isUserInitiatedEvent_ = false;
this.viewport_.setDocumentDimensions(this.documentDimensions_);
this.isUserInitiatedEvent_ = true;
// If we received the document dimensions, the password was good so we
// can dismiss the password screen.
if (this.passwordScreen_.active)
this.passwordScreen_.close();
if (this.pageIndicator_)
this.pageIndicator_.initialFadeIn();
if (this.toolbar_) {
this.toolbar_.docLength =
this.documentDimensions_.pageDimensions.length;
}
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;
window.location.href = href;
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_.show();
else
this.passwordScreen_.deny();
break;
case 'getSelectedTextReply':
this.sendScriptingMessage_(message.data);
break;
case 'goToPage':
this.viewport_.goToPage(message.data.page);
break;
case 'loadProgress':
this.updateProgress_(message.data.progress);
break;
case 'navigate':
// If in print preview, always open a new tab.
if (this.isPrintPreview_) {
this.navigator_.navigate(
message.data.url,
Navigator.WindowOpenDisposition.NEW_BACKGROUND_TAB);
} else {
this.navigator_.navigate(message.data.url, message.data.disposition);
}
break;
case 'printPreviewLoaded':
this.isPrintPreviewLoaded_ = true;
this.sendDocumentLoadedMessage_();
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 'cancelStreamUrl':
chrome.mimeHandlerPrivate.abortStream();
break;
case 'metadata':
if (message.data.title) {
document.title = message.data.title;
} else {
document.title = getFilenameFromURL(this.originalUrl_);
}
this.bookmarks_ = message.data.bookmarks;
if (this.toolbar_) {
this.toolbar_.docTitle = document.title;
this.toolbar_.bookmarks = this.bookmarks;
}
break;
case 'setIsSelecting':
this.viewportScroller_.setEnableScrolling(message.data.isSelecting);
break;
case 'setIsEditMode':
// TODO(hnakashima): Replace this with final visual indication from UX.
if (message.data.isEditMode)
this.toolbar_.docTitle = document.title + ' (edit mode)';
else
this.toolbar_.docTitle = document.title;
break;
case 'getNamedDestinationReply':
this.paramsParser_.onNamedDestinationReceived(message.data.pageNumber);
break;
case 'formFocusChange':
this.isFormFieldFocused_ = message.data.focused;
break;
}
},
/**
* @private
* A callback that's called before the zoom changes. Notify the plugin to stop
* reacting to scroll events while zoom is taking place to avoid flickering.
*/
beforeZoom_: function() {
this.plugin_.postMessage({type: 'stopScrolling'});
if (this.viewport_.pinchPhase == Viewport.PinchPhase.PINCH_START) {
var position = this.viewport_.position;
var zoom = this.viewport_.zoom;
var pinchPhase = this.viewport_.pinchPhase;
this.plugin_.postMessage({
type: 'viewport',
userInitiated: true,
zoom: zoom,
xOffset: position.x,
yOffset: position.y,
pinchPhase: pinchPhase
});
}
},
/**
* @private
* A callback that's called after the zoom changes. Notify the plugin of the
* zoom change and to continue reacting to scroll events.
*/
afterZoom_: function() {
var position = this.viewport_.position;
var zoom = this.viewport_.zoom;
var pinchVector = this.viewport_.pinchPanVector || {x: 0, y: 0};
var pinchCenter = this.viewport_.pinchCenter || {x: 0, y: 0};
var pinchPhase = this.viewport_.pinchPhase;
this.plugin_.postMessage({
type: 'viewport',
userInitiated: this.isUserInitiatedEvent_,
zoom: zoom,
xOffset: position.x,
yOffset: position.y,
pinchPhase: pinchPhase,
pinchX: pinchCenter.x,
pinchY: pinchCenter.y,
pinchVectorX: pinchVector.x,
pinchVectorY: pinchVector.y
});
this.zoomManager_.onPdfZoomChange();
},
/**
* @param {boolean} userInitiated The value to set |isUserInitiatedEvent_|
* to.
* @private
* A callback that sets |isUserInitiatedEvent_| to |userInitiated|.
*/
setUserInitiated_: function(userInitiated) {
if (this.isUserInitiatedEvent_ == userInitiated) {
throw 'Trying to set user initiated to current value.';
}
this.isUserInitiatedEvent_ = userInitiated;
},
/**
* @private
* A callback that's called when an update to a pinch zoom is detected.
* @param {!Object} e the pinch event.
*/
onPinchUpdate_: function(e) {
// Throttle number of pinch events to one per frame.
if (!this.sentPinchEvent_) {
this.sentPinchEvent_ = true;
window.requestAnimationFrame(() => {
this.sentPinchEvent_ = false;
this.viewport_.pinchZoom(e);
});
}
},
/**
* @private
* A callback that's called when the end of a pinch zoom is detected.
* @param {!Object} e the pinch event.
*/
onPinchEnd_: function(e) {
// Using rAF for pinch end prevents pinch updates scheduled by rAF getting
// sent after the pinch end.
window.requestAnimationFrame(() => {
this.viewport_.pinchZoomEnd(e);
});
},
/**
* @private
* A callback that's called when the start of a pinch zoom is detected.
* @param {!Object} e the pinch event.
*/
onPinchStart_: function(e) {
// We also use rAF for pinch start, so that if there is a pinch end event
// scheduled by rAF, this pinch start will be sent after.
window.requestAnimationFrame(() => {
this.viewport_.pinchZoomStart(e);
});
},
/**
* @private
* A callback that's called after the viewport changes.
*/
viewportChanged_: function() {
if (!this.documentDimensions_)
return;
// Offset the toolbar position so that it doesn't move if scrollbars appear.
var hasScrollbars = this.viewport_.documentHasScrollbars();
var scrollbarWidth = this.viewport_.scrollbarWidth;
var verticalScrollbarWidth = hasScrollbars.vertical ? scrollbarWidth : 0;
var horizontalScrollbarWidth =
hasScrollbars.horizontal ? scrollbarWidth : 0;
// Shift the zoom toolbar to the left by half a scrollbar width. This
// gives a compromise: if there is no scrollbar visible then the toolbar
// will be half a scrollbar width further left than the spec but if there
// is a scrollbar visible it will be half a scrollbar width further right
// than the spec. In RTL layout, the zoom toolbar is on the left side, but
// the scrollbar is still on the right, so this is not necessary.
if (!isRTL()) {
this.zoomToolbar_.style.right =
-verticalScrollbarWidth + (scrollbarWidth / 2) + 'px';
}
// Having a horizontal scrollbar is much rarer so we don't offset the
// toolbar from the bottom any more than what the spec says. This means
// that when there is a scrollbar visible, it will be a full scrollbar
// width closer to the bottom of the screen than usual, but this is ok.
this.zoomToolbar_.style.bottom = -horizontalScrollbarWidth + 'px';
// Update the page indicator.
var visiblePage = this.viewport_.getMostVisiblePage();
if (this.toolbar_)
this.toolbar_.pageNo = visiblePage + 1;
// TODO(raymes): Give pageIndicator_ the same API as toolbar_.
if (this.pageIndicator_) {
this.pageIndicator_.index = visiblePage;
if (this.documentDimensions_.pageDimensions.length > 1 &&
hasScrollbars.vertical) {
this.pageIndicator_.style.visibility = 'visible';
} else {
this.pageIndicator_.style.visibility = 'hidden';
}
}
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
});
},
/**
* 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) {
if (this.parentWindow_ != message.source) {
this.parentWindow_ = message.source;
this.parentOrigin_ = message.origin;
// Ensure that we notify the embedder if the document is loaded.
if (this.loadState_ != LoadState.LOADING)
this.sendDocumentLoadedMessage_();
}
if (this.handlePrintPreviewScriptingMessage_(message))
return;
// Delay scripting messages from users of the scripting API until the
// document is loaded. This simplifies use of the APIs.
if (this.loadState_ != LoadState.SUCCESS) {
this.delayedScriptingMessages_.push(message);
return;
}
switch (message.data.type.toString()) {
case 'getSelectedText':
case 'print':
case 'selectAll':
this.plugin_.postMessage(message.data);
break;
}
},
/**
* @private
* Handle scripting messages specific to print preview.
* @param {MessageObject} message the message to handle.
* @return {boolean} true if the message was handled, false otherwise.
*/
handlePrintPreviewScriptingMessage_: function(message) {
if (!this.isPrintPreview_)
return false;
switch (message.data.type.toString()) {
case 'loadPreviewPage':
this.plugin_.postMessage(message.data);
return true;
case 'resetPrintPreviewMode':
this.loadState_ = LoadState.LOADING;
if (!this.inPrintPreviewMode_) {
this.inPrintPreviewMode_ = true;
this.isUserInitiatedEvent_ = false;
this.zoomToolbar_.forceFit(FittingType.FIT_TO_PAGE);
this.isUserInitiatedEvent_ = true;
}
// 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)
});
return true;
case 'sendKeyEvent':
this.handleKeyEvent_(DeserializeKeyEvent(message.data.keyEvent));
return true;
}
return false;
},
/**
* @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) {
if (this.parentWindow_ && this.parentOrigin_) {
var targetOrigin;
// Only send data back to the embedder if it is from the same origin,
// unless we're sending it to ourselves (which could happen in the case
// of tests). We also allow documentLoaded messages through as this won't
// leak important information.
if (this.parentOrigin_ == window.location.origin)
targetOrigin = this.parentOrigin_;
else if (message.type == 'documentLoaded')
targetOrigin = '*';
else
targetOrigin = this.originalUrl_;
this.parentWindow_.postMessage(message, targetOrigin);
}
},
/**
* @type {Viewport} the viewport of the PDF viewer.
*/
get viewport() {
return this.viewport_;
},
/**
* Each bookmark is an Object containing a:
* - title
* - page (optional)
* - array of children (themselves bookmarks)
* @type {Array} the top-level bookmarks of the PDF.
*/
get bookmarks() {
return this.bookmarks_;
}
};
// Copyright 2015 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';
/** Idle time in ms before the UI is hidden. */
var HIDE_TIMEOUT = 2000;
/** Time in ms after force hide before toolbar is shown again. */
var FORCE_HIDE_TIMEOUT = 1000;
/**
* Velocity required in a mousemove to reveal the UI (pixels/ms). This is
* intended to be high enough that a fast flick of the mouse is required to
* reach it.
*/
var SHOW_VELOCITY = 10;
/** Distance from the top of the screen required to reveal the toolbars. */
var TOP_TOOLBAR_REVEAL_DISTANCE = 100;
/** Distance from the bottom-right of the screen required to reveal toolbars. */
var SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT = 150;
var SIDE_TOOLBAR_REVEAL_DISTANCE_BOTTOM = 250;
/**
* @param {MouseEvent} e Event to test.
* @return {boolean} True if the mouse is close to the top of the screen.
*/
function isMouseNearTopToolbar(e) {
return e.y < TOP_TOOLBAR_REVEAL_DISTANCE;
}
/**
* @param {MouseEvent} e Event to test.
* @param {Window} window Window to test against.
* @return {boolean} True if the mouse is close to the bottom-right of the
* screen.
*/
function isMouseNearSideToolbar(e, window) {
var atSide = e.x > window.innerWidth - SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT;
if (isRTL())
atSide = e.x < SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT;
var atBottom = e.y > window.innerHeight - SIDE_TOOLBAR_REVEAL_DISTANCE_BOTTOM;
return atSide && atBottom;
}
/**
* Constructs a Toolbar Manager, responsible for co-ordinating between multiple
* toolbar elements.
* @constructor
* @param {Object} window The window containing the UI.
* @param {Object} toolbar The top toolbar element.
* @param {Object} zoomToolbar The zoom toolbar element.
*/
function ToolbarManager(window, toolbar, zoomToolbar) {
this.window_ = window;
this.toolbar_ = toolbar;
this.zoomToolbar_ = zoomToolbar;
this.toolbarTimeout_ = null;
this.isMouseNearTopToolbar_ = false;
this.isMouseNearSideToolbar_ = false;
this.sideToolbarAllowedOnly_ = false;
this.sideToolbarAllowedOnlyTimer_ = null;
this.keyboardNavigationActive = false;
this.lastMovementTimestamp = null;
this.window_.addEventListener('resize', this.resizeDropdowns_.bind(this));
this.resizeDropdowns_();
}
ToolbarManager.prototype = {
handleMouseMove: function(e) {
this.isMouseNearTopToolbar_ = this.toolbar_ && isMouseNearTopToolbar(e);
this.isMouseNearSideToolbar_ = isMouseNearSideToolbar(e, this.window_);
this.keyboardNavigationActive = false;
var touchInteractionActive =
(e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents);
// Allow the top toolbar to be shown if the mouse moves away from the side
// toolbar (as long as the timeout has elapsed).
if (!this.isMouseNearSideToolbar_ && !this.sideToolbarAllowedOnlyTimer_)
this.sideToolbarAllowedOnly_ = false;
// Allow the top toolbar to be shown if the mouse moves to the top edge.
if (this.isMouseNearTopToolbar_)
this.sideToolbarAllowedOnly_ = false;
// Tapping the screen with toolbars open tries to close them.
if (touchInteractionActive && this.zoomToolbar_.isVisible()) {
this.hideToolbarsIfAllowed();
return;
}
// Show the toolbars if the mouse is near the top or bottom-right of the
// screen, if the mouse moved fast, or if the touchscreen was tapped.
if (this.isMouseNearTopToolbar_ || this.isMouseNearSideToolbar_ ||
this.isHighVelocityMouseMove_(e) || touchInteractionActive) {
if (this.sideToolbarAllowedOnly_)
this.zoomToolbar_.show();
else
this.showToolbars();
}
this.hideToolbarsAfterTimeout();
},
/**
* Whether a mousemove event is high enough velocity to reveal the toolbars.
* @param {MouseEvent} e Event to test.
* @return {boolean} true if the event is a high velocity mousemove, false
* otherwise.
* @private
*/
isHighVelocityMouseMove_: function(e) {
if (e.type == 'mousemove') {
if (this.lastMovementTimestamp == null) {
this.lastMovementTimestamp = this.getCurrentTimestamp_();
} else {
var movement =
Math.sqrt(e.movementX * e.movementX + e.movementY * e.movementY);
var newTime = this.getCurrentTimestamp_();
var interval = newTime - this.lastMovementTimestamp;
this.lastMovementTimestamp = newTime;
if (interval != 0)
return movement / interval > SHOW_VELOCITY;
}
}
return false;
},
/**
* Wrapper around Date.now() to make it easily replaceable for testing.
* @return {number}
* @private
*/
getCurrentTimestamp_: function() {
return Date.now();
},
/**
* Display both UI toolbars.
*/
showToolbars: function() {
if (this.toolbar_)
this.toolbar_.show();
this.zoomToolbar_.show();
},
/**
* Show toolbars and mark that navigation is being performed with
* tab/shift-tab. This disables toolbar hiding until the mouse is moved or
* escape is pressed.
*/
showToolbarsForKeyboardNavigation: function() {
this.keyboardNavigationActive = true;
this.showToolbars();
},
/**
* Hide toolbars after a delay, regardless of the position of the mouse.
* Intended to be called when the mouse has moved out of the parent window.
*/
hideToolbarsForMouseOut: function() {
this.isMouseNearTopToolbar_ = false;
this.isMouseNearSideToolbar_ = false;
this.hideToolbarsAfterTimeout();
},
/**
* Check if the toolbars are able to be closed, and close them if they are.
* Toolbars may be kept open based on mouse/keyboard activity and active
* elements.
*/
hideToolbarsIfAllowed: function() {
if (this.isMouseNearSideToolbar_ || this.isMouseNearTopToolbar_)
return;
if (this.toolbar_ && this.toolbar_.shouldKeepOpen())
return;
if (this.keyboardNavigationActive)
return;
// Remove focus to make any visible tooltips disappear -- otherwise they'll
// still be visible on screen when the toolbar is off screen.
if ((this.toolbar_ && document.activeElement == this.toolbar_) ||
document.activeElement == this.zoomToolbar_) {
document.activeElement.blur();
}
if (this.toolbar_)
this.toolbar_.hide();
this.zoomToolbar_.hide();
},
/**
* Hide the toolbar after the HIDE_TIMEOUT has elapsed.
*/
hideToolbarsAfterTimeout: function() {
if (this.toolbarTimeout_)
this.window_.clearTimeout(this.toolbarTimeout_);
this.toolbarTimeout_ = this.window_.setTimeout(
this.hideToolbarsIfAllowed.bind(this), HIDE_TIMEOUT);
},
/**
* Hide the 'topmost' layer of toolbars. Hides any dropdowns that are open, or
* hides the basic toolbars otherwise.
*/
hideSingleToolbarLayer: function() {
if (!this.toolbar_ || !this.toolbar_.hideDropdowns()) {
this.keyboardNavigationActive = false;
this.hideToolbarsIfAllowed();
}
},
/**
* Hide the top toolbar and keep it hidden until both:
* - The mouse is moved away from the right side of the screen
* - 1 second has passed.
*
* The top toolbar can be immediately re-opened by moving the mouse to the top
* of the screen.
*/
forceHideTopToolbar: function() {
if (!this.toolbar_)
return;
this.toolbar_.hide();
this.sideToolbarAllowedOnly_ = true;
this.sideToolbarAllowedOnlyTimer_ = this.window_.setTimeout(() => {
this.sideToolbarAllowedOnlyTimer_ = null;
}, FORCE_HIDE_TIMEOUT);
},
/**
* Updates the size of toolbar dropdowns based on the positions of the rest of
* the UI.
* @private
*/
resizeDropdowns_: function() {
if (!this.toolbar_)
return;
var lowerBound = this.window_.innerHeight - this.zoomToolbar_.clientHeight;
this.toolbar_.setDropdownLowerBound(lowerBound);
}
};
// Copyright 2014 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.
/**
* Returns the height of the intersection of two rectangles.
* @param {Object} rect1 the first rect
* @param {Object} rect2 the second rect
* @return {number} the height of the intersection of the rects
*/
function getIntersectionHeight(rect1, rect2) {
return Math.max(
0,
Math.min(rect1.y + rect1.height, rect2.y + rect2.height) -
Math.max(rect1.y, rect2.y));
}
/**
* Computes vector between two points.
* @param {!Object} p1 The first point.
* @param {!Object} p2 The second point.
* @return {!Object} The vector.
*/
function vectorDelta(p1, p2) {
return {x: p2.x - p1.x, y: p2.y - p1.y};
}
function frameToPluginCoordinate(coordinateInFrame) {
var container = $('plugin');
return {
x: coordinateInFrame.x - container.getBoundingClientRect().left,
y: coordinateInFrame.y - container.getBoundingClientRect().top
};
}
/**
* Create a new viewport.
* @constructor
* @param {Window} window the window
* @param {Object} sizer is the element which represents the size of the
* document in the viewport
* @param {Function} viewportChangedCallback is run when the viewport changes
* @param {Function} beforeZoomCallback is run before a change in zoom
* @param {Function} afterZoomCallback is run after a change in zoom
* @param {Function} setUserInitiatedCallback is run to indicate whether a zoom
* event is user initiated.
* @param {number} scrollbarWidth the width of scrollbars on the page
* @param {number} defaultZoom The default zoom level.
* @param {number} topToolbarHeight The number of pixels that should initially
* be left blank above the document for the toolbar.
*/
function Viewport(
window, sizer, viewportChangedCallback, beforeZoomCallback,
afterZoomCallback, setUserInitiatedCallback, scrollbarWidth, defaultZoom,
topToolbarHeight) {
this.window_ = window;
this.sizer_ = sizer;
this.viewportChangedCallback_ = viewportChangedCallback;
this.beforeZoomCallback_ = beforeZoomCallback;
this.afterZoomCallback_ = afterZoomCallback;
this.setUserInitiatedCallback_ = setUserInitiatedCallback;
this.allowedToChangeZoom_ = false;
this.internalZoom_ = 1;
this.zoomManager_ = new InactiveZoomManager(this, 1);
this.documentDimensions_ = null;
this.pageDimensions_ = [];
this.scrollbarWidth_ = scrollbarWidth;
this.fittingType_ = FittingType.NONE;
this.defaultZoom_ = defaultZoom;
this.topToolbarHeight_ = topToolbarHeight;
this.prevScale_ = 1;
this.pinchPhase_ = Viewport.PinchPhase.PINCH_NONE;
this.pinchPanVector_ = null;
this.pinchCenter_ = null;
this.firstPinchCenterInFrame_ = null;
window.addEventListener('scroll', this.updateViewport_.bind(this));
window.addEventListener('resize', this.resizeWrapper_.bind(this));
}
/**
* Enumeration of pinch states.
* This should match PinchPhase enum in pdf/out_of_process_instance.h
* @enum {number}
*/
Viewport.PinchPhase = {
PINCH_NONE: 0,
PINCH_START: 1,
PINCH_UPDATE_ZOOM_OUT: 2,
PINCH_UPDATE_ZOOM_IN: 3,
PINCH_END: 4
};
/**
* The increment to scroll a page by in pixels when up/down/left/right arrow
* keys are pressed. Usually we just let the browser handle scrolling on the
* window when these keys are pressed but in certain cases we need to simulate
* these events.
*/
Viewport.SCROLL_INCREMENT = 40;
/**
* Predefined zoom factors to be used when zooming in/out. These are in
* ascending order. This should match the lists in
* components/ui/zoom/page_zoom_constants.h and
* chrome/browser/resources/settings/appearance_page/appearance_page.js
*/
Viewport.ZOOM_FACTORS = [
0.25, 1 / 3, 0.5, 2 / 3, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3,
4, 5
];
/**
* The minimum and maximum range to be used to clip zoom factor.
*/
Viewport.ZOOM_FACTOR_RANGE = {
min: Viewport.ZOOM_FACTORS[0],
max: Viewport.ZOOM_FACTORS[Viewport.ZOOM_FACTORS.length - 1]
};
/**
* Clamps the zoom factor (or page scale factor) to be within the limits.
* @param {number} factor The zoom/scale factor.
* @return {number} The factor clamped within the limits.
*/
Viewport.clampZoom = function(factor) {
return Math.max(
Viewport.ZOOM_FACTOR_RANGE.min,
Math.min(factor, Viewport.ZOOM_FACTOR_RANGE.max));
};
/**
* The width of the page shadow around pages in pixels.
*/
Viewport.PAGE_SHADOW = {
top: 3,
bottom: 7,
left: 5,
right: 5
};
Viewport.prototype = {
/**
* Returns the zoomed and rounded document dimensions for the given zoom.
* Rounding is necessary when interacting with the renderer which tends to
* operate in integral values (for example for determining if scrollbars
* should be shown).
* @param {number} zoom The zoom to use to compute the scaled dimensions.
* @return {Object} A dictionary with scaled 'width'/'height' of the document.
* @private
*/
getZoomedDocumentDimensions_: function(zoom) {
if (!this.documentDimensions_)
return null;
return {
width: Math.round(this.documentDimensions_.width * zoom),
height: Math.round(this.documentDimensions_.height * zoom)
};
},
/**
* @private
* Returns true if the document needs scrollbars at the given zoom level.
* @param {number} zoom compute whether scrollbars are needed at this zoom
* @return {Object} with 'horizontal' and 'vertical' keys which map to bool
* values indicating if the horizontal and vertical scrollbars are needed
* respectively.
*/
documentNeedsScrollbars_: function(zoom) {
var zoomedDimensions = this.getZoomedDocumentDimensions_(zoom);
if (!zoomedDimensions) {
return {horizontal: false, vertical: false};
}
// If scrollbars are required for one direction, expand the document in the
// other direction to take the width of the scrollbars into account when
// deciding whether the other direction needs scrollbars.
if (zoomedDimensions.width > this.window_.innerWidth)
zoomedDimensions.height += this.scrollbarWidth_;
else if (zoomedDimensions.height > this.window_.innerHeight)
zoomedDimensions.width += this.scrollbarWidth_;
return {
horizontal: zoomedDimensions.width > this.window_.innerWidth,
vertical: zoomedDimensions.height + this.topToolbarHeight_ >
this.window_.innerHeight
};
},
/**
* Returns true if the document needs scrollbars at the current zoom level.
* @return {Object} with 'x' and 'y' keys which map to bool values
* indicating if the horizontal and vertical scrollbars are needed
* respectively.
*/
documentHasScrollbars: function() {
return this.documentNeedsScrollbars_(this.zoom);
},
/**
* @private
* Helper function called when the zoomed document size changes.
*/
contentSizeChanged_: function() {
var zoomedDimensions = this.getZoomedDocumentDimensions_(this.zoom);
if (zoomedDimensions) {
this.sizer_.style.width = zoomedDimensions.width + 'px';
this.sizer_.style.height =
zoomedDimensions.height + this.topToolbarHeight_ + 'px';
}
},
/**
* @private
* Called when the viewport should be updated.
*/
updateViewport_: function() {
this.viewportChangedCallback_();
},
/**
* @private
* Called when the browser window size changes.
*/
resizeWrapper_: function() {
this.setUserInitiatedCallback_(false);
this.resize_();
this.setUserInitiatedCallback_(true);
},
/**
* @private
* Called when the viewport size changes.
*/
resize_: function() {
if (this.fittingType_ == FittingType.FIT_TO_PAGE)
this.fitToPageInternal_(false);
else if (this.fittingType_ == FittingType.FIT_TO_WIDTH)
this.fitToWidth();
else if (this.fittingType_ == FittingType.FIT_TO_HEIGHT)
this.fitToHeightInternal_(false);
else
this.updateViewport_();
},
/**
* @type {Object} the scroll position of the viewport.
*/
get position() {
return {
x: this.window_.pageXOffset,
y: this.window_.pageYOffset - this.topToolbarHeight_
};
},
/**
* Scroll the viewport to the specified position.
* @type {Object} position the position to scroll to.
*/
set position(position) {
this.window_.scrollTo(position.x, position.y + this.topToolbarHeight_);
},
/**
* @type {Object} the size of the viewport excluding scrollbars.
*/
get size() {
var needsScrollbars = this.documentNeedsScrollbars_(this.zoom);
var scrollbarWidth = needsScrollbars.vertical ? this.scrollbarWidth_ : 0;
var scrollbarHeight = needsScrollbars.horizontal ? this.scrollbarWidth_ : 0;
return {
width: this.window_.innerWidth - scrollbarWidth,
height: this.window_.innerHeight - scrollbarHeight
};
},
/**
* @type {number} the zoom level of the viewport.
*/
get zoom() {
return this.zoomManager_.applyBrowserZoom(this.internalZoom_);
},
/**
* Set the zoom manager.
* @type {ZoomManager} manager the zoom manager to set.
*/
set zoomManager(manager) {
this.zoomManager_ = manager;
},
/**
* @type {Viewport.PinchPhase} The phase of the current pinch gesture for
* the viewport.
*/
get pinchPhase() {
return this.pinchPhase_;
},
/**
* @type {Object} The panning caused by the current pinch gesture (as
* the deltas of the x and y coordinates).
*/
get pinchPanVector() {
return this.pinchPanVector_;
},
/**
* @type {Object} The coordinates of the center of the current pinch gesture.
*/
get pinchCenter() {
return this.pinchCenter_;
},
/**
* @private
* @param {function} f Function to wrap
* Used to wrap a function that might perform zooming on the viewport. This is
* required so that we can notify the plugin that zooming is in progress
* so that while zooming is taking place it can stop reacting to scroll events
* from the viewport. This is to avoid flickering.
*/
mightZoom_: function(f) {
this.beforeZoomCallback_();
this.allowedToChangeZoom_ = true;
f();
this.allowedToChangeZoom_ = false;
this.afterZoomCallback_();
},
/**
* @private
* Sets the zoom of the viewport.
* @param {number} newZoom the zoom level to zoom to.
*/
setZoomInternal_: function(newZoom) {
if (!this.allowedToChangeZoom_) {
throw 'Called Viewport.setZoomInternal_ without calling ' +
'Viewport.mightZoom_.';
}
// Record the scroll position (relative to the top-left of the window).
var currentScrollPos = {
x: this.position.x / this.zoom,
y: this.position.y / this.zoom
};
this.internalZoom_ = newZoom;
this.contentSizeChanged_();
// Scroll to the scaled scroll position.
this.position = {
x: currentScrollPos.x * this.zoom,
y: currentScrollPos.y * this.zoom
};
},
/**
* @private
* Sets the zoom of the viewport.
* Same as setZoomInternal_ but for pinch zoom we have some more operations.
* @param {number} scaleDelta The zoom delta.
* @param {!Object} center The pinch center in content coordinates.
*/
setPinchZoomInternal_: function(scaleDelta, center) {
assert(
this.allowedToChangeZoom_,
'Called Viewport.setPinchZoomInternal_ without calling ' +
'Viewport.mightZoom_.');
this.internalZoom_ = Viewport.clampZoom(this.internalZoom_ * scaleDelta);
var newCenterInContent = this.frameToContent(center);
var delta = {
x: (newCenterInContent.x - this.oldCenterInContent.x),
y: (newCenterInContent.y - this.oldCenterInContent.y)
};
// Record the scroll position (relative to the pinch center).
var currentScrollPos = {
x: this.position.x - delta.x * this.zoom,
y: this.position.y - delta.y * this.zoom
};
this.contentSizeChanged_();
// Scroll to the scaled scroll position.
this.position = {x: currentScrollPos.x, y: currentScrollPos.y};
},
/**
* @private
* Converts a point from frame to content coordinates.
* @param {!Object} framePoint The frame coordinates.
* @return {!Object} The content coordinates.
*/
frameToContent: function(framePoint) {
// TODO(mcnee) Add a helper Point class to avoid duplicating operations
// on plain {x,y} objects.
return {
x: (framePoint.x + this.position.x) / this.zoom,
y: (framePoint.y + this.position.y) / this.zoom
};
},
/**
* Sets the zoom to the given zoom level.
* @param {number} newZoom the zoom level to zoom to.
*/
setZoom: function(newZoom) {
this.fittingType_ = FittingType.NONE;
this.mightZoom_(() => {
this.setZoomInternal_(Viewport.clampZoom(newZoom));
this.updateViewport_();
});
},
/**
* Gets notified of the browser zoom changing seperately from the
* internal zoom.
* @param {number} oldBrowserZoom the previous value of the browser zoom.
*/
updateZoomFromBrowserChange: function(oldBrowserZoom) {
this.mightZoom_(() => {
// Record the scroll position (relative to the top-left of the window).
var oldZoom = oldBrowserZoom * this.internalZoom_;
var currentScrollPos = {
x: this.position.x / oldZoom,
y: this.position.y / oldZoom
};
this.contentSizeChanged_();
// Scroll to the scaled scroll position.
this.position = {
x: currentScrollPos.x * this.zoom,
y: currentScrollPos.y * this.zoom
};
this.updateViewport_();
});
},
/**
* @type {number} the width of scrollbars in the viewport in pixels.
*/
get scrollbarWidth() {
return this.scrollbarWidth_;
},
/**
* @type {FittingType} the fitting type the viewport is currently in.
*/
get fittingType() {
return this.fittingType_;
},
/**
* @private
* @param {number} y the y-coordinate to get the page at.
* @return {number} the index of a page overlapping the given y-coordinate.
*/
getPageAtY_: function(y) {
var min = 0;
var max = this.pageDimensions_.length - 1;
while (max >= min) {
var page = Math.floor(min + ((max - min) / 2));
// There might be a gap between the pages, in which case use the bottom
// of the previous page as the top for finding the page.
var top = 0;
if (page > 0) {
top = this.pageDimensions_[page - 1].y +
this.pageDimensions_[page - 1].height;
}
var bottom =
this.pageDimensions_[page].y + this.pageDimensions_[page].height;
if (top <= y && bottom > y)
return page;
if (top > y)
max = page - 1;
else
min = page + 1;
}
return 0;
},
/**
* Returns the page with the greatest proportion of its height in the current
* viewport.
* @return {number} the index of the most visible page.
*/
getMostVisiblePage: function() {
var firstVisiblePage = this.getPageAtY_(this.position.y / this.zoom);
if (firstVisiblePage == this.pageDimensions_.length - 1)
return firstVisiblePage;
var viewportRect = {
x: this.position.x / this.zoom,
y: this.position.y / this.zoom,
width: this.size.width / this.zoom,
height: this.size.height / this.zoom
};
var firstVisiblePageVisibility =
getIntersectionHeight(
this.pageDimensions_[firstVisiblePage], viewportRect) /
this.pageDimensions_[firstVisiblePage].height;
var nextPageVisibility =
getIntersectionHeight(
this.pageDimensions_[firstVisiblePage + 1], viewportRect) /
this.pageDimensions_[firstVisiblePage + 1].height;
if (nextPageVisibility > firstVisiblePageVisibility)
return firstVisiblePage + 1;
return firstVisiblePage;
},
/**
* @private
* Compute the zoom level for fit-to-page, fit-to-width or fit-to-height.
*
* At least one of {fitWidth, fitHeight} must be true.
*
* @param {Object} pageDimensions the dimensions of a given page in px.
* @param {boolean} fitWidth a bool indicating whether the whole width of the
* page needs to be in the viewport.
* @param {boolean} fitHeight a bool indicating whether the whole height of
* the page needs to be in the viewport.
* @return {number} the internal zoom to set
*/
computeFittingZoom_: function(pageDimensions, fitWidth, fitHeight) {
assert(
fitWidth || fitHeight,
'Invalid parameters. At least one of fitWidth and fitHeight must be ' +
'true.');
// First compute the zoom without scrollbars.
var zoom = this.computeFittingZoomGivenDimensions_(
fitWidth, fitHeight, this.window_.innerWidth, this.window_.innerHeight,
pageDimensions.width, pageDimensions.height);
// Check if there needs to be any scrollbars.
var needsScrollbars = this.documentNeedsScrollbars_(zoom);
// If the document fits, just return the zoom.
if (!needsScrollbars.horizontal && !needsScrollbars.vertical)
return zoom;
var zoomedDimensions = this.getZoomedDocumentDimensions_(zoom);
// Check if adding a scrollbar will result in needing the other scrollbar.
var scrollbarWidth = this.scrollbarWidth_;
if (needsScrollbars.horizontal &&
zoomedDimensions.height > this.window_.innerHeight - scrollbarWidth) {
needsScrollbars.vertical = true;
}
if (needsScrollbars.vertical &&
zoomedDimensions.width > this.window_.innerWidth - scrollbarWidth) {
needsScrollbars.horizontal = true;
}
// Compute available window space.
var windowWithScrollbars = {
width: this.window_.innerWidth,
height: this.window_.innerHeight
};
if (needsScrollbars.horizontal)
windowWithScrollbars.height -= scrollbarWidth;
if (needsScrollbars.vertical)
windowWithScrollbars.width -= scrollbarWidth;
// Recompute the zoom.
zoom = this.computeFittingZoomGivenDimensions_(
fitWidth, fitHeight, windowWithScrollbars.width,
windowWithScrollbars.height, pageDimensions.width,
pageDimensions.height);
return this.zoomManager_.internalZoomComponent(zoom);
},
/**
* @private
* Compute a zoom level given the dimensions to fit and the actual numbers
* in those dimensions.
*
* @param {boolean} fitWidth make sure the page width is totally contained in
* the window.
* @param {boolean} fitHeight make sure the page height is totally contained
* in the window.
* @param {number} windowWidth the width of the window in px.
* @param {number} windowHeight the height of the window in px.
* @param {number} pageWidth the width of the page in px.
* @param {number} pageHeight the height of the page in px.
* @return {number} the internal zoom to set
*/
computeFittingZoomGivenDimensions_: function(
fitWidth, fitHeight, windowWidth, windowHeight, pageWidth, pageHeight) {
// Assumes at least one of {fitWidth, fitHeight} is set.
var zoomWidth;
var zoomHeight;
if (fitWidth)
zoomWidth = windowWidth / pageWidth;
if (fitHeight)
zoomHeight = windowHeight / pageHeight;
if (!fitWidth && fitHeight)
return zoomHeight;
if (fitWidth && !fitHeight)
return zoomWidth;
// Assume fitWidth && fitHeight
return Math.min(zoomWidth, zoomHeight);
},
/**
* Zoom the viewport so that the page width consumes the entire viewport.
*/
fitToWidth: function() {
this.mightZoom_(() => {
this.fittingType_ = FittingType.FIT_TO_WIDTH;
if (!this.documentDimensions_)
return;
// When computing fit-to-width, the maximum width of a page in the
// document is used, which is equal to the size of the document width.
this.setZoomInternal_(
this.computeFittingZoom_(this.documentDimensions_, true, false));
this.updateViewport_();
});
},
/**
* @private
* Zoom the viewport so that the page height consumes the entire viewport.
* @param {boolean} scrollToTopOfPage Set to true if the viewport should be
* scrolled to the top of the current page. Set to false if the viewport
* should remain at the current scroll position.
*/
fitToHeightInternal_: function(scrollToTopOfPage) {
this.mightZoom_(() => {
this.fittingType_ = FittingType.FIT_TO_HEIGHT;
if (!this.documentDimensions_)
return;
var page = this.getMostVisiblePage();
// When computing fit-to-height, the maximum height of the current page
// is used.
var dimensions = {
width: 0,
height: this.pageDimensions_[page].height,
};
this.setZoomInternal_(this.computeFittingZoom_(dimensions, false, true));
if (scrollToTopOfPage) {
this.position = {x: 0, y: this.pageDimensions_[page].y * this.zoom};
}
this.updateViewport_();
});
},
/**
* Zoom the viewport so that the page height consumes the entire viewport.
*/
fitToHeight: function() {
this.fitToHeightInternal_(true);
},
/**
* @private
* Zoom the viewport so that a page consumes as much as possible of the it.
* @param {boolean} scrollToTopOfPage Set to true if the viewport should be
* scrolled to the top of the current page. Set to false if the viewport
* should remain at the current scroll position.
*/
fitToPageInternal_: function(scrollToTopOfPage) {
this.mightZoom_(() => {
this.fittingType_ = FittingType.FIT_TO_PAGE;
if (!this.documentDimensions_)
return;
var page = this.getMostVisiblePage();
// Fit to the current page's height and the widest page's width.
var dimensions = {
width: this.documentDimensions_.width,
height: this.pageDimensions_[page].height,
};
this.setZoomInternal_(this.computeFittingZoom_(dimensions, true, true));
if (scrollToTopOfPage) {
this.position = {x: 0, y: this.pageDimensions_[page].y * this.zoom};
}
this.updateViewport_();
});
},
/**
* Zoom the viewport so that a page consumes the entire viewport. Also scrolls
* the viewport to the top of the current page.
*/
fitToPage: function() {
this.fitToPageInternal_(true);
},
/**
* Zoom out to the next predefined zoom level.
*/
zoomOut: function() {
this.mightZoom_(() => {
this.fittingType_ = FittingType.NONE;
var nextZoom = Viewport.ZOOM_FACTORS[0];
for (var i = 0; i < Viewport.ZOOM_FACTORS.length; i++) {
if (Viewport.ZOOM_FACTORS[i] < this.internalZoom_)
nextZoom = Viewport.ZOOM_FACTORS[i];
}
this.setZoomInternal_(nextZoom);
this.updateViewport_();
});
},
/**
* Zoom in to the next predefined zoom level.
*/
zoomIn: function() {
this.mightZoom_(() => {
this.fittingType_ = FittingType.NONE;
var nextZoom = Viewport.ZOOM_FACTORS[Viewport.ZOOM_FACTORS.length - 1];
for (var i = Viewport.ZOOM_FACTORS.length - 1; i >= 0; i--) {
if (Viewport.ZOOM_FACTORS[i] > this.internalZoom_)
nextZoom = Viewport.ZOOM_FACTORS[i];
}
this.setZoomInternal_(nextZoom);
this.updateViewport_();
});
},
/**
* Pinch zoom event handler.
* @param {!Object} e The pinch event.
*/
pinchZoom: function(e) {
this.mightZoom_(() => {
this.pinchPhase_ = e.direction == 'out' ?
Viewport.PinchPhase.PINCH_UPDATE_ZOOM_OUT :
Viewport.PinchPhase.PINCH_UPDATE_ZOOM_IN;
var scaleDelta = e.startScaleRatio / this.prevScale_;
this.pinchPanVector_ =
vectorDelta(e.center, this.firstPinchCenterInFrame_);
var needsScrollbars =
this.documentNeedsScrollbars_(this.zoomManager_.applyBrowserZoom(
Viewport.clampZoom(this.internalZoom_ * scaleDelta)));
this.pinchCenter_ = e.center;
// If there's no horizontal scrolling, keep the content centered so the
// user can't zoom in on the non-content area.
// TODO(mcnee) Investigate other ways of scaling when we don't have
// horizontal scrolling. We want to keep the document centered,
// but this causes a potentially awkward transition when we start
// using the gesture center.
if (!needsScrollbars.horizontal) {
this.pinchCenter_ = {
x: this.window_.innerWidth / 2,
y: this.window_.innerHeight / 2
};
} else if (this.keepContentCentered_) {
this.oldCenterInContent =
this.frameToContent(frameToPluginCoordinate(e.center));
this.keepContentCentered_ = false;
}
this.setPinchZoomInternal_(scaleDelta, frameToPluginCoordinate(e.center));
this.updateViewport_();
this.prevScale_ = e.startScaleRatio;
});
},
pinchZoomStart: function(e) {
this.pinchPhase_ = Viewport.PinchPhase.PINCH_START;
this.prevScale_ = 1;
this.oldCenterInContent =
this.frameToContent(frameToPluginCoordinate(e.center));
var needsScrollbars = this.documentNeedsScrollbars_(this.zoom);
this.keepContentCentered_ = !needsScrollbars.horizontal;
// We keep track of begining of the pinch.
// By doing so we will be able to compute the pan distance.
this.firstPinchCenterInFrame_ = e.center;
},
pinchZoomEnd: function(e) {
this.mightZoom_(() => {
this.pinchPhase_ = Viewport.PinchPhase.PINCH_END;
var scaleDelta = e.startScaleRatio / this.prevScale_;
this.pinchCenter_ = e.center;
this.setPinchZoomInternal_(scaleDelta, frameToPluginCoordinate(e.center));
this.updateViewport_();
});
this.pinchPhase_ = Viewport.PinchPhase.PINCH_NONE;
this.pinchPanVector_ = null;
this.pinchCenter_ = null;
this.firstPinchCenterInFrame_ = null;
},
/**
* Go to the given page index.
* @param {number} page the index of the page to go to. zero-based.
*/
goToPage: function(page) {
this.goToPageAndY(page, 0);
},
/**
* Go to the given y position in the given page index.
* @param {number} page the index of the page to go to. zero-based.
* @param {number} y the y position in the page to go to.
*/
goToPageAndY: function(page, y) {
this.mightZoom_(() => {
if (this.pageDimensions_.length === 0)
return;
if (page < 0)
page = 0;
if (page >= this.pageDimensions_.length)
page = this.pageDimensions_.length - 1;
var dimensions = this.pageDimensions_[page];
var toolbarOffset = 0;
// Unless we're in fit to page or fit to height mode, scroll above the
// page by |this.topToolbarHeight_| so that the toolbar isn't covering it
// initially.
if (!this.isPagedMode())
toolbarOffset = this.topToolbarHeight_;
this.position = {
x: dimensions.x * this.zoom,
y: (dimensions.y + y) * this.zoom - toolbarOffset
};
this.updateViewport_();
});
},
/**
* Set the dimensions of the document.
* @param {Object} documentDimensions the dimensions of the document
*/
setDocumentDimensions: function(documentDimensions) {
this.mightZoom_(() => {
var initialDimensions = !this.documentDimensions_;
this.documentDimensions_ = documentDimensions;
this.pageDimensions_ = this.documentDimensions_.pageDimensions;
if (initialDimensions) {
this.setZoomInternal_(Math.min(
this.defaultZoom_,
this.computeFittingZoom_(this.documentDimensions_, true, false)));
this.position = {x: 0, y: -this.topToolbarHeight_};
}
this.contentSizeChanged_();
this.resize_();
});
},
/**
* Get the coordinates of the page contents (excluding the page shadow)
* relative to the screen.
* @param {number} page the index of the page to get the rect for.
* @return {Object} a rect representing the page in screen coordinates.
*/
getPageScreenRect: function(page) {
if (!this.documentDimensions_) {
return {x: 0, y: 0, width: 0, height: 0};
}
if (page >= this.pageDimensions_.length)
page = this.pageDimensions_.length - 1;
var pageDimensions = this.pageDimensions_[page];
// Compute the page dimensions minus the shadows.
var insetDimensions = {
x: pageDimensions.x + Viewport.PAGE_SHADOW.left,
y: pageDimensions.y + Viewport.PAGE_SHADOW.top,
width: pageDimensions.width - Viewport.PAGE_SHADOW.left -
Viewport.PAGE_SHADOW.right,
height: pageDimensions.height - Viewport.PAGE_SHADOW.top -
Viewport.PAGE_SHADOW.bottom
};
// Compute the x-coordinate of the page within the document.
// TODO(raymes): This should really be set when the PDF plugin passes the
// page coordinates, but it isn't yet.
var x = (this.documentDimensions_.width - pageDimensions.width) / 2 +
Viewport.PAGE_SHADOW.left;
// Compute the space on the left of the document if the document fits
// completely in the screen.
var spaceOnLeft =
(this.size.width - this.documentDimensions_.width * this.zoom) / 2;
spaceOnLeft = Math.max(spaceOnLeft, 0);
return {
x: x * this.zoom + spaceOnLeft - this.window_.pageXOffset,
y: insetDimensions.y * this.zoom - this.window_.pageYOffset,
width: insetDimensions.width * this.zoom,
height: insetDimensions.height * this.zoom
};
},
/**
* Check if the current fitting type is a paged mode.
*
* In a paged mode, page up and page down scroll to the top of the
* previous/next page and part of the page is under the toolbar.
*
* @return {boolean} Whether the current fitting type is a paged mode.
*/
isPagedMode: function(page) {
return (
this.fittingType_ == FittingType.FIT_TO_PAGE ||
this.fittingType_ == FittingType.FIT_TO_HEIGHT);
}
};
// Copyright 2014 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.
var OpenPDFParamsParser;
(function() {
'use strict';
/**
* Creates a new OpenPDFParamsParser. This parses the open pdf parameters
* passed in the url to set initial viewport settings for opening the pdf.
* @param {!Function} getNamedDestinationsFunction The function called to fetch
* the page number for a named destination.
* @constructor
*/
OpenPDFParamsParser = function(getNamedDestinationsFunction) {
this.outstandingRequests_ = [];
this.getNamedDestinationsFunction_ = getNamedDestinationsFunction;
};
OpenPDFParamsParser.prototype = {
/**
* @private
* Parse zoom parameter of open PDF parameters. The PDF should be opened at
* the specified zoom level.
* @param {string} paramValue zoom value.
* @return {Object} Map with zoom parameters (zoom and position).
*/
parseZoomParam_: function(paramValue) {
var paramValueSplit = paramValue.split(',');
if (paramValueSplit.length != 1 && paramValueSplit.length != 3)
return {};
// User scale of 100 means zoom value of 100% i.e. zoom factor of 1.0.
var zoomFactor = parseFloat(paramValueSplit[0]) / 100;
if (isNaN(zoomFactor))
return {};
// Handle #zoom=scale.
if (paramValueSplit.length == 1) {
return {'zoom': zoomFactor};
}
// Handle #zoom=scale,left,top.
var position = {
x: parseFloat(paramValueSplit[1]),
y: parseFloat(paramValueSplit[2])
};
return {'position': position, 'zoom': zoomFactor};
},
/**
* @private
* Parse view parameter of open PDF parameters. The PDF should be opened at
* the specified fitting type mode and position.
* @param {string} paramValue view value.
* @return {Object} Map with view parameters (view and viewPosition).
*/
parseViewParam_: function(paramValue) {
var viewModeComponents = paramValue.toLowerCase().split(',');
if (viewModeComponents.length < 1)
return {};
var params = {};
var viewMode = viewModeComponents[0];
var acceptsPositionParam;
if (viewMode === 'fit') {
params['view'] = FittingType.FIT_TO_PAGE;
acceptsPositionParam = false;
} else if (viewMode === 'fith') {
params['view'] = FittingType.FIT_TO_WIDTH;
acceptsPositionParam = true;
} else if (viewMode === 'fitv') {
params['view'] = FittingType.FIT_TO_HEIGHT;
acceptsPositionParam = true;
}
if (!acceptsPositionParam || viewModeComponents.length < 2)
return params;
var position = parseFloat(viewModeComponents[1]);
if (!isNaN(position))
params['viewPosition'] = position;
return params;
},
/**
* Parse the parameters encoded in the fragment of a URL into a dictionary.
* @private
* @param {string} url to parse
* @return {Object} Key-value pairs of URL parameters
*/
parseUrlParams_: function(url) {
var params = {};
var paramIndex = url.search('#');
if (paramIndex == -1)
return params;
var paramTokens = url.substring(paramIndex + 1).split('&');
if ((paramTokens.length == 1) && (paramTokens[0].search('=') == -1)) {
// Handle the case of http://foo.com/bar#NAMEDDEST. This is not
// explicitly mentioned except by example in the Adobe
// "PDF Open Parameters" document.
params['nameddest'] = paramTokens[0];
return params;
}
for (var i = 0; i < paramTokens.length; ++i) {
var keyValueSplit = paramTokens[i].split('=');
if (keyValueSplit.length != 2)
continue;
params[keyValueSplit[0]] = keyValueSplit[1];
}
return params;
},
/**
* Parse PDF url parameters used for controlling the state of UI. These need
* to be available when the UI is being initialized, rather than when the PDF
* is finished loading.
* @param {string} url that needs to be parsed.
* @return {Object} parsed url parameters.
*/
getUiUrlParams: function(url) {
var params = this.parseUrlParams_(url);
var uiParams = {toolbar: true, toolbarSpacer: true};
if ('toolbar' in params && params['toolbar'] == 0)
uiParams.toolbar = false;
if ('toolbar' in params && params['toolbar'] == 2)
uiParams.toolbarSpacer = false;
return uiParams;
},
/**
* Parse PDF url parameters. These parameters are mentioned in the url
* and specify actions to be performed when opening pdf files.
* See http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/
* pdfs/pdf_open_parameters.pdf for details.
* @param {string} url that needs to be parsed.
* @param {Function} callback function to be called with viewport info.
*/
getViewportFromUrlParams: function(url, callback) {
var params = {};
params['url'] = url;
var urlParams = this.parseUrlParams_(url);
if ('page' in urlParams) {
// |pageNumber| is 1-based, but goToPage() take a zero-based page number.
var pageNumber = parseInt(urlParams['page'], 10);
if (!isNaN(pageNumber) && pageNumber > 0)
params['page'] = pageNumber - 1;
}
if ('view' in urlParams)
Object.assign(params, this.parseViewParam_(urlParams['view']));
if ('zoom' in urlParams)
Object.assign(params, this.parseZoomParam_(urlParams['zoom']));
if (params.page === undefined && 'nameddest' in urlParams) {
this.outstandingRequests_.push({callback: callback, params: params});
this.getNamedDestinationsFunction_(urlParams['nameddest']);
} else {
callback(params);
}
},
/**
* This is called when a named destination is received and the page number
* corresponding to the request for which a named destination is passed.
* @param {number} pageNumber The page corresponding to the named destination
* requested.
*/
onNamedDestinationReceived: function(pageNumber) {
var outstandingRequest = this.outstandingRequests_.shift();
if (pageNumber != -1)
outstandingRequest.params.page = pageNumber;
outstandingRequest.callback(outstandingRequest.params);
},
};
}());
// Copyright 2017 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';
/**
* Enumeration of page fitting types.
* @enum {string}
*/
var FittingType = {
NONE: 'none',
FIT_TO_PAGE: 'fit-to-page',
FIT_TO_WIDTH: 'fit-to-width',
FIT_TO_HEIGHT: 'fit-to-height'
};
// Copyright 2014 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.
/**
* Turn a dictionary received from postMessage into a key event.
* @param {Object} dict A dictionary representing the key event.
* @return {Event} A key event.
*/
function DeserializeKeyEvent(dict) {
var e = document.createEvent('Event');
e.initEvent('keydown', true, true);
e.keyCode = dict.keyCode;
e.shiftKey = dict.shiftKey;
e.ctrlKey = dict.ctrlKey;
e.altKey = dict.altKey;
e.metaKey = dict.metaKey;
e.fromScriptingAPI = true;
return e;
}
/**
* Turn a key event into a dictionary which can be sent over postMessage.
* @param {Event} event A key event.
* @return {Object} A dictionary representing the key event.
*/
function SerializeKeyEvent(event) {
return {
keyCode: event.keyCode,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey,
metaKey: event.metaKey
};
}
/**
* An enum containing a value specifying whether the PDF is currently loading,
* has finished loading or failed to load.
* @enum {string}
*/
var LoadState = {LOADING: 'loading', SUCCESS: 'success', FAILED: 'failed'};
/**
* Create a new PDFScriptingAPI. This provides a scripting interface to
* the PDF viewer so that it can be customized by things like print preview.
* @param {Window} window the window of the page containing the pdf viewer.
* @param {Object} plugin the plugin element containing the pdf viewer.
* @constructor
*/
function PDFScriptingAPI(window, plugin) {
this.loadState_ = LoadState.LOADING;
this.pendingScriptingMessages_ = [];
this.setPlugin(plugin);
window.addEventListener('message', event => {
if (event.origin != 'chrome://pdf-viewer' &&
event.origin != 'chrome://print') {
console.error(
'Received message that was not from the extension: ' + event);
return;
}
switch (event.data.type) {
case 'viewport':
/**
* @type {{
* pageX: number,
* pageY: number,
* pageWidth: number,
* viewportWidth: number,
* viewportHeight: number
* }}
*/
var viewportData = event.data;
if (this.viewportChangedCallback_)
this.viewportChangedCallback_(
viewportData.pageX, viewportData.pageY, viewportData.pageWidth,
viewportData.viewportWidth, viewportData.viewportHeight);
break;
case 'documentLoaded':
var data = /** @type {{load_state: LoadState}} */ (event.data);
this.loadState_ = data.load_state;
if (this.loadCallback_)
this.loadCallback_(this.loadState_ == LoadState.SUCCESS);
break;
case 'getSelectedTextReply':
var data = /** @type {{selectedText: string}} */ (event.data);
if (this.selectedTextCallback_) {
this.selectedTextCallback_(data.selectedText);
this.selectedTextCallback_ = null;
}
break;
case 'sendKeyEvent':
if (this.keyEventCallback_)
this.keyEventCallback_(DeserializeKeyEvent(event.data.keyEvent));
break;
}
}, false);
}
PDFScriptingAPI.prototype = {
/**
* @private
* Send a message to the extension. If messages try to get sent before there
* is a plugin element set, then we queue them up and send them later (this
* can happen in print preview).
* @param {Object} message The message to send.
*/
sendMessage_: function(message) {
if (this.plugin_)
this.plugin_.postMessage(message, '*');
else
this.pendingScriptingMessages_.push(message);
},
/**
* Sets the plugin element containing the PDF viewer. The element will usually
* be passed into the PDFScriptingAPI constructor but may also be set later.
* @param {Object} plugin the plugin element containing the PDF viewer.
*/
setPlugin: function(plugin) {
this.plugin_ = plugin;
if (this.plugin_) {
// Send a message to ensure the postMessage channel is initialized which
// allows us to receive messages.
this.sendMessage_({type: 'initialize'});
// Flush pending messages.
while (this.pendingScriptingMessages_.length > 0)
this.sendMessage_(this.pendingScriptingMessages_.shift());
}
},
/**
* Sets the callback which will be run when the PDF viewport changes.
* @param {Function} callback the callback to be called.
*/
setViewportChangedCallback: function(callback) {
this.viewportChangedCallback_ = callback;
},
/**
* Sets the callback which will be run when the PDF document has finished
* loading. If the document is already loaded, it will be run immediately.
* @param {Function} callback the callback to be called.
*/
setLoadCallback: function(callback) {
this.loadCallback_ = callback;
if (this.loadState_ != LoadState.LOADING && this.loadCallback_)
this.loadCallback_(this.loadState_ == LoadState.SUCCESS);
},
/**
* Sets a callback that gets run when a key event is fired in the PDF viewer.
* @param {Function} callback the callback to be called with a key event.
*/
setKeyEventCallback: function(callback) {
this.keyEventCallback_ = callback;
},
/**
* Resets the PDF viewer into print preview mode.
* @param {string} url the url of the PDF to load.
* @param {boolean} grayscale whether or not to display the PDF in grayscale.
* @param {Array<number>} pageNumbers an array of the page numbers.
* @param {boolean} modifiable whether or not the document is modifiable.
*/
resetPrintPreviewMode: function(url, grayscale, pageNumbers, modifiable) {
this.loadState_ = LoadState.LOADING;
this.sendMessage_({
type: 'resetPrintPreviewMode',
url: url,
grayscale: grayscale,
pageNumbers: pageNumbers,
modifiable: modifiable
});
},
/**
* Load a page into the document while in print preview mode.
* @param {string} url the url of the pdf page to load.
* @param {number} index the index of the page to load.
*/
loadPreviewPage: function(url, index) {
this.sendMessage_({type: 'loadPreviewPage', url: url, index: index});
},
/**
* Select all the text in the document. May only be called after document
* load.
*/
selectAll: function() {
this.sendMessage_({type: 'selectAll'});
},
/**
* Get the selected text in the document. The callback will be called with the
* text that is selected. May only be called after document load.
* @param {Function} callback a callback to be called with the selected text.
* @return {boolean} true if the function is successful, false if there is an
* outstanding request for selected text that has not been answered.
*/
getSelectedText: function(callback) {
if (this.selectedTextCallback_)
return false;
this.selectedTextCallback_ = callback;
this.sendMessage_({type: 'getSelectedText'});
return true;
},
/**
* Print the document. May only be called after document load.
*/
print: function() {
this.sendMessage_({type: 'print'});
},
/**
* Send a key event to the extension.
* @param {Event} keyEvent the key event to send to the extension.
*/
sendKeyEvent: function(keyEvent) {
this.sendMessage_(
{type: 'sendKeyEvent', keyEvent: SerializeKeyEvent(keyEvent)});
},
};
/**
* Creates a PDF viewer with a scripting interface. This is basically 1) an
* iframe which is navigated to the PDF viewer extension and 2) a scripting
* interface which provides access to various features of the viewer for use
* by print preview and accessibility.
* @param {string} src the source URL of the PDF to load initially.
* @return {HTMLIFrameElement} the iframe element containing the PDF viewer.
*/
function PDFCreateOutOfProcessPlugin(src) {
var client = new PDFScriptingAPI(window, null);
var iframe = assertInstanceof(
window.document.createElement('iframe'), HTMLIFrameElement);
iframe.setAttribute('src', 'pdf_preview.html?' + src);
// Prevent the frame from being tab-focusable.
iframe.setAttribute('tabindex', '-1');
iframe.onload = function() {
client.setPlugin(iframe.contentWindow);
};
// Add the functions to the iframe so that they can be called directly.
iframe.setViewportChangedCallback =
client.setViewportChangedCallback.bind(client);
iframe.setLoadCallback = client.setLoadCallback.bind(client);
iframe.setKeyEventCallback = client.setKeyEventCallback.bind(client);
iframe.resetPrintPreviewMode = client.resetPrintPreviewMode.bind(client);
iframe.loadPreviewPage = client.loadPreviewPage.bind(client);
iframe.sendKeyEvent = client.sendKeyEvent.bind(client);
return iframe;
}
// Copyright 2015 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';
/**
* Creates a new NavigatorDelegate for calling browser-specific functions to
* do the actual navigating.
* @param {number} tabId The tab ID of the PDF viewer or -1 if the viewer is
* not displayed in a tab.
* @constructor
*/
function NavigatorDelegate(tabId) {
this.tabId_ = tabId;
}
/**
* Creates a new Navigator for navigating to links inside or outside the PDF.
* @param {string} originalUrl The original page URL.
* @param {Object} viewport The viewport info of the page.
* @param {Object} paramsParser The object for URL parsing.
* @param {Object} navigatorDelegate The object with callback functions that
* get called when navigation happens in the current tab, a new tab,
* and a new window.
* @constructor
*/
function Navigator(originalUrl, viewport, paramsParser, navigatorDelegate) {
this.originalUrl_ = originalUrl;
this.viewport_ = viewport;
this.paramsParser_ = paramsParser;
this.navigatorDelegate_ = navigatorDelegate;
}
NavigatorDelegate.prototype = {
/**
* @public
* Called when navigation should happen in the current tab.
* @param {string} url The url to be opened in the current tab.
*/
navigateInCurrentTab: function(url) {
// When the PDFviewer is inside a browser tab, prefer the tabs API because
// it can navigate from one file:// URL to another.
if (chrome.tabs && this.tabId_ != -1)
chrome.tabs.update(this.tabId_, {url: url});
else
window.location.href = url;
},
/**
* @public
* Called when navigation should happen in the new tab.
* @param {string} url The url to be opened in the new tab.
* @param {boolean} active Indicates if the new tab should be the active tab.
*/
navigateInNewTab: function(url, active) {
// Prefer the tabs API because it guarantees we can just open a new tab.
// window.open doesn't have this guarantee.
if (chrome.tabs)
chrome.tabs.create({url: url, active: active});
else
window.open(url);
},
/**
* @public
* Called when navigation should happen in the new window.
* @param {string} url The url to be opened in the new window.
*/
navigateInNewWindow: function(url) {
// Prefer the windows API because it guarantees we can just open a new
// window. window.open with '_blank' argument doesn't have this guarantee.
if (chrome.windows)
chrome.windows.create({url: url});
else
window.open(url, '_blank');
}
};
/**
* Represents options when navigating to a new url. C++ counterpart of
* the enum is in ui/base/window_open_disposition.h. This enum represents
* the only values that are passed from Plugin.
* @enum {number}
*/
Navigator.WindowOpenDisposition = {
CURRENT_TAB: 1,
NEW_FOREGROUND_TAB: 3,
NEW_BACKGROUND_TAB: 4,
NEW_WINDOW: 6,
SAVE_TO_DISK: 7
};
Navigator.prototype = {
/**
* Function to navigate to the given URL. This might involve navigating
* within the PDF page or opening a new url (in the same tab or a new tab).
* @param {string} url The URL to navigate to.
* @param {number} disposition The window open disposition when
* navigating to the new URL.
*/
navigate: function(url, disposition) {
if (url.length == 0)
return;
// If |urlFragment| starts with '#', then it's for the same URL with a
// different URL fragment.
if (url.charAt(0) == '#') {
// if '#' is already present in |originalUrl| then remove old fragment
// and add new url fragment.
var hashIndex = this.originalUrl_.search('#');
if (hashIndex != -1)
url = this.originalUrl_.substring(0, hashIndex) + url;
else
url = this.originalUrl_ + url;
}
// If there's no scheme, then take a guess at the scheme.
if (url.indexOf('://') == -1 && url.indexOf('mailto:') == -1)
url = this.guessUrlWithoutScheme_(url);
if (!this.isValidUrl_(url))
return;
switch (disposition) {
case Navigator.WindowOpenDisposition.CURRENT_TAB:
this.paramsParser_.getViewportFromUrlParams(
url, this.onViewportReceived_.bind(this));
break;
case Navigator.WindowOpenDisposition.NEW_BACKGROUND_TAB:
this.navigatorDelegate_.navigateInNewTab(url, false);
break;
case Navigator.WindowOpenDisposition.NEW_FOREGROUND_TAB:
this.navigatorDelegate_.navigateInNewTab(url, true);
break;
case Navigator.WindowOpenDisposition.NEW_WINDOW:
this.navigatorDelegate_.navigateInNewWindow(url);
break;
case Navigator.WindowOpenDisposition.SAVE_TO_DISK:
// TODO(jaepark): Alt + left clicking a link in PDF should
// download the link.
this.paramsParser_.getViewportFromUrlParams(
url, this.onViewportReceived_.bind(this));
break;
default:
break;
}
},
/**
* @private
* Called when the viewport position is received.
* @param {Object} viewportPosition Dictionary containing the viewport
* position.
*/
onViewportReceived_: function(viewportPosition) {
var originalUrl = this.originalUrl_;
var hashIndex = originalUrl.search('#');
if (hashIndex != -1)
originalUrl = originalUrl.substring(0, hashIndex);
var newUrl = viewportPosition.url;
hashIndex = newUrl.search('#');
if (hashIndex != -1)
newUrl = newUrl.substring(0, hashIndex);
var pageNumber = viewportPosition.page;
if (pageNumber != undefined && originalUrl == newUrl)
this.viewport_.goToPage(pageNumber);
else
this.navigatorDelegate_.navigateInCurrentTab(viewportPosition.url);
},
/**
* @private
* Checks if the URL starts with a scheme and is not just a scheme.
* @param {string} url The input URL
* @return {boolean} Whether the url is valid.
*/
isValidUrl_: function(url) {
// Make sure |url| starts with a valid scheme.
if (!url.startsWith('http://') && !url.startsWith('https://') &&
!url.startsWith('ftp://') && !url.startsWith('file://') &&
!url.startsWith('mailto:')) {
return false;
}
// Navigations to file:-URLs are only allowed from file:-URLs.
if (url.startsWith('file:') && !this.originalUrl_.startsWith('file:'))
return false;
// Make sure |url| is not only a scheme.
if (url == 'http://' || url == 'https://' || url == 'ftp://' ||
url == 'file://' || url == 'mailto:') {
return false;
}
return true;
},
/**
* @private
* Attempt to figure out what a URL is when there is no scheme.
* @param {string} url The input URL
* @return {string} The URL with a scheme or the original URL if it is not
* possible to determine the scheme.
*/
guessUrlWithoutScheme_: function(url) {
// If the original URL is mailto:, that does not make sense to start with,
// and neither does adding |url| to it.
// If the original URL is not a valid URL, this cannot make a valid URL.
// In both cases, just bail out.
if (this.originalUrl_.startsWith('mailto:') ||
!this.isValidUrl_(this.originalUrl_)) {
return url;
}
// Check for absolute paths.
if (url.startsWith('/')) {
var schemeEndIndex = this.originalUrl_.indexOf('://');
var firstSlash = this.originalUrl_.indexOf('/', schemeEndIndex + 3);
// e.g. http://www.foo.com/bar -> http://www.foo.com
var domain = firstSlash != -1 ? this.originalUrl_.substr(0, firstSlash) :
this.originalUrl_;
return domain + url;
}
// Check for obvious relative paths.
var isRelative = false;
if (url.startsWith('.') || url.startsWith('\\'))
isRelative = true;
// In Adobe Acrobat Reader XI, it looks as though links with less than
// 2 dot separators in the domain are considered relative links, and
// those with 2 of more are considered http URLs. e.g.
//
// www.foo.com/bar -> http
// foo.com/bar -> relative link
if (!isRelative) {
var domainSeparatorIndex = url.indexOf('/');
var domainName = domainSeparatorIndex == -1 ?
url :
url.substr(0, domainSeparatorIndex);
var domainDotCount = (domainName.match(/\./g) || []).length;
if (domainDotCount < 2)
isRelative = true;
}
if (isRelative) {
var slashIndex = this.originalUrl_.lastIndexOf('/');
var path = slashIndex != -1 ? this.originalUrl_.substr(0, slashIndex) :
this.originalUrl_;
return path + '/' + url;
}
return 'http://' + url;
}
};
// Copyright 2015 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';
/**
* @private
* The period of time in milliseconds to wait between updating the viewport
* position by the scroll velocity.
*/
ViewportScroller.DRAG_TIMER_INTERVAL_MS_ = 100;
/**
* @private
* The maximum drag scroll distance per DRAG_TIMER_INTERVAL in pixels.
*/
ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_ = 100;
/**
* Creates a new ViewportScroller.
* A ViewportScroller scrolls the page in response to drag selection with the
* mouse.
* @param {Object} viewport The viewport info of the page.
* @param {Object} plugin The PDF plugin element.
* @param {Object} window The window containing the viewer.
* @constructor
*/
function ViewportScroller(viewport, plugin, window) {
this.viewport_ = viewport;
this.plugin_ = plugin;
this.window_ = window;
this.mousemoveCallback_ = null;
this.timerId_ = null;
this.scrollVelocity_ = null;
this.lastFrameTime_ = 0;
}
ViewportScroller.prototype = {
/**
* @private
* Start scrolling the page by |scrollVelocity_| every
* |DRAG_TIMER_INTERVAL_MS_|.
*/
startDragScrollTimer_: function() {
if (this.timerId_ === null) {
this.timerId_ = this.window_.setInterval(
this.dragScrollPage_.bind(this),
ViewportScroller.DRAG_TIMER_INTERVAL_MS_);
this.lastFrameTime_ = Date.now();
}
},
/**
* @private
* Stops the drag scroll timer if it is active.
*/
stopDragScrollTimer_: function() {
if (this.timerId_ !== null) {
this.window_.clearInterval(this.timerId_);
this.timerId_ = null;
this.lastFrameTime_ = 0;
}
},
/**
* @private
* Scrolls the viewport by the current scroll velocity.
*/
dragScrollPage_: function() {
var position = this.viewport_.position;
var currentFrameTime = Date.now();
var timeAdjustment = (currentFrameTime - this.lastFrameTime_) /
ViewportScroller.DRAG_TIMER_INTERVAL_MS_;
position.y += (this.scrollVelocity_.y * timeAdjustment);
position.x += (this.scrollVelocity_.x * timeAdjustment);
this.viewport_.position = position;
this.lastFrameTime_ = currentFrameTime;
},
/**
* @private
* Calculate the velocity to scroll while dragging using the distance of the
* cursor outside the viewport.
* @param {Object} event The mousemove event.
* @return {Object} Object with x and y direction scroll velocity.
*/
calculateVelocity_: function(event) {
var x =
Math.min(
Math.max(
-event.offsetX, event.offsetX - this.plugin_.offsetWidth, 0),
ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_) *
Math.sign(event.offsetX);
var y =
Math.min(
Math.max(
-event.offsetY, event.offsetY - this.plugin_.offsetHeight, 0),
ViewportScroller.MAX_DRAG_SCROLL_DISTANCE_) *
Math.sign(event.offsetY);
return {x: x, y: y};
},
/**
* @private
* Handles mousemove events. It updates the scroll velocity and starts and
* stops timer based on scroll velocity.
* @param {Object} event The mousemove event.
*/
onMousemove_: function(event) {
this.scrollVelocity_ = this.calculateVelocity_(event);
if (!this.scrollVelocity_.x && !this.scrollVelocity_.y)
this.stopDragScrollTimer_();
else if (!this.timerId_)
this.startDragScrollTimer_();
},
/**
* Sets whether to scroll the viewport when the mouse is outside the
* viewport.
* @param {boolean} isSelecting Represents selection status.
*/
setEnableScrolling: function(isSelecting) {
if (isSelecting) {
if (!this.mousemoveCallback_)
this.mousemoveCallback_ = this.onMousemove_.bind(this);
this.plugin_.addEventListener(
'mousemove', this.mousemoveCallback_, false);
} else {
this.stopDragScrollTimer_();
if (this.mousemoveCallback_) {
this.plugin_.removeEventListener(
'mousemove', this.mousemoveCallback_, false);
}
}
}
};
// Copyright 2016 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';
/**
* A class that listens for touch events and produces events when these
* touches form gestures (e.g. pinching).
*/
class GestureDetector {
/**
* Constructs a GestureDetector.
* @param {!Element} element The element to monitor for touch gestures.
*/
constructor(element) {
/** @private {!Element} */
this.element_ = element;
this.element_.addEventListener(
'touchstart',
/** @type {function(!Event)} */ (this.onTouchStart_.bind(this)),
{passive: true});
let boundOnTouch =
/** @type {function(!Event)} */ (this.onTouch_.bind(this));
this.element_.addEventListener('touchmove', boundOnTouch, {passive: false});
this.element_.addEventListener('touchend', boundOnTouch, {passive: true});
this.element_.addEventListener(
'touchcancel', boundOnTouch, {passive: true});
this.element_.addEventListener(
'wheel',
/** @type {function(!Event)} */ (this.onWheel_.bind(this)),
{passive: false});
this.pinchStartEvent_ = null;
this.lastTouchTouchesCount_ = 0;
/** @private {?TouchEvent} */
this.lastEvent_ = null;
/**
* The scale relative to the start of the pinch when handling ctrl-wheels.
* null when there is no ongoing pinch.
* @private {?number}
*/
this.accumulatedWheelScale_ = null;
/**
* A timeout ID from setTimeout used for sending the pinchend event when
* handling ctrl-wheels.
* @private {?number}
*/
this.wheelEndTimeout_ = null;
/** @private {!Map<string, !Array<!Function>>} */
this.listeners_ =
new Map([['pinchstart', []], ['pinchupdate', []], ['pinchend', []]]);
}
/**
* Add a |listener| to be notified of |type| events.
* @param {string} type The event type to be notified for.
* @param {!Function} listener The callback.
*/
addEventListener(type, listener) {
if (this.listeners_.has(type)) {
this.listeners_.get(type).push(listener);
}
}
/**
* Returns true if the last touch start was a two finger touch.
* @return {boolean} True if the last touch start was a two finger touch.
*/
wasTwoFingerTouch() {
return this.lastTouchTouchesCount_ == 2;
}
/**
* Call the relevant listeners with the given |pinchEvent|.
* @private
* @param {!Object} pinchEvent The event to notify the listeners of.
*/
notify_(pinchEvent) {
let listeners = this.listeners_.get(pinchEvent.type);
for (let l of listeners)
l(pinchEvent);
}
/**
* The callback for touchstart events on the element.
* @private
* @param {!TouchEvent} event Touch event on the element.
*/
onTouchStart_(event) {
this.lastTouchTouchesCount_ = event.touches.length;
if (!this.wasTwoFingerTouch())
return;
this.pinchStartEvent_ = event;
this.lastEvent_ = event;
this.notify_({type: 'pinchstart', center: GestureDetector.center_(event)});
}
/**
* The callback for touch move, end, and cancel events on the element.
* @private
* @param {!TouchEvent} event Touch event on the element.
*/
onTouch_(event) {
if (!this.pinchStartEvent_)
return;
let lastEvent = /** @type {!TouchEvent} */ (this.lastEvent_);
// Check if the pinch ends with the current event.
if (event.touches.length < 2 ||
lastEvent.touches.length !== event.touches.length) {
let startScaleRatio =
GestureDetector.pinchScaleRatio_(lastEvent, this.pinchStartEvent_);
let center = GestureDetector.center_(lastEvent);
let endEvent = {
type: 'pinchend',
startScaleRatio: startScaleRatio,
center: center
};
this.pinchStartEvent_ = null;
this.lastEvent_ = null;
this.notify_(endEvent);
return;
}
// We must preventDefault two finger touchmoves. By doing so native
// pinch-zoom does not interfere with our way of handling the event.
event.preventDefault();
let scaleRatio = GestureDetector.pinchScaleRatio_(event, lastEvent);
let startScaleRatio =
GestureDetector.pinchScaleRatio_(event, this.pinchStartEvent_);
let center = GestureDetector.center_(event);
this.notify_({
type: 'pinchupdate',
scaleRatio: scaleRatio,
direction: scaleRatio > 1.0 ? 'in' : 'out',
startScaleRatio: startScaleRatio,
center: center
});
this.lastEvent_ = event;
}
/**
* The callback for wheel events on the element.
* @private
* @param {!WheelEvent} event Wheel event on the element.
*/
onWheel_(event) {
// We handle ctrl-wheels to invoke our own pinch zoom. On Mac, synthetic
// ctrl-wheels are created from trackpad pinches. We handle these ourselves
// to prevent the browser's native pinch zoom. We also use our pinch
// zooming mechanism for handling non-synthetic ctrl-wheels. This allows us
// to anchor the zoom around the mouse position instead of the scroll
// position.
if (!event.ctrlKey)
return;
event.preventDefault();
let wheelScale = Math.exp(-event.deltaY / 100);
// Clamp scale changes from the wheel event as they can be
// quite dramatic for non-synthetic ctrl-wheels.
let scale = Math.min(1.25, Math.max(0.75, wheelScale));
let position = {x: event.clientX, y: event.clientY};
if (this.accumulatedWheelScale_ == null) {
this.accumulatedWheelScale_ = 1.0;
this.notify_({type: 'pinchstart', center: position});
}
this.accumulatedWheelScale_ *= scale;
this.notify_({
type: 'pinchupdate',
scaleRatio: scale,
direction: scale > 1.0 ? 'in' : 'out',
startScaleRatio: this.accumulatedWheelScale_,
center: position
});
// We don't get any phase information for the ctrl-wheels, so we don't know
// when the gesture ends. We'll just use a timeout to send the pinch end
// event a short time after the last ctrl-wheel we see.
if (this.wheelEndTimeout_ != null) {
window.clearTimeout(this.wheelEndTimeout_);
this.wheelEndTimeout_ = null;
}
let gestureEndDelayMs = 100;
let endEvent = {
type: 'pinchend',
startScaleRatio: this.accumulatedWheelScale_,
center: position
};
this.wheelEndTimeout_ = window.setTimeout(function(endEvent) {
this.notify_(endEvent);
this.wheelEndTimeout_ = null;
this.accumulatedWheelScale_ = null;
}.bind(this), gestureEndDelayMs, endEvent);
}
/**
* Computes the change in scale between this touch event
* and a previous one.
* @private
* @param {!TouchEvent} event Latest touch event on the element.
* @param {!TouchEvent} prevEvent A previous touch event on the element.
* @return {?number} The ratio of the scale of this event and the
* scale of the previous one.
*/
static pinchScaleRatio_(event, prevEvent) {
let distance1 = GestureDetector.distance_(prevEvent);
let distance2 = GestureDetector.distance_(event);
return distance1 === 0 ? null : distance2 / distance1;
}
/**
* Computes the distance between fingers.
* @private
* @param {!TouchEvent} event Touch event with at least 2 touch points.
* @return {number} Distance between touch[0] and touch[1].
*/
static distance_(event) {
let touch1 = event.touches[0];
let touch2 = event.touches[1];
let dx = touch1.clientX - touch2.clientX;
let dy = touch1.clientY - touch2.clientY;
return Math.sqrt(dx * dx + dy * dy);
}
/**
* Computes the midpoint between fingers.
* @private
* @param {!TouchEvent} event Touch event with at least 2 touch points.
* @return {!Object} Midpoint between touch[0] and touch[1].
*/
static center_(event) {
let touch1 = event.touches[0];
let touch2 = event.touches[1];
return {
x: (touch1.clientX + touch2.clientX) / 2,
y: (touch1.clientY + touch2.clientY) / 2
};
}
}
// Copyright 2015 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';
/**
* Abstract parent of classes that manage updating the browser
* with zoom changes and/or updating the viewer's zoom when
* the browser zoom changes.
*/
class ZoomManager {
/**
* Constructs a ZoomManager.
* @param {!Viewport} viewport A Viewport for which to manage zoom.
* @param {number} initialZoom The initial browser zoom level.
*/
constructor(viewport, initialZoom) {
if (this.constructor === ZoomManager) {
throw new TypeError('Instantiated abstract class: ZoomManager');
}
this.viewport_ = viewport;
this.browserZoom_ = initialZoom;
}
/**
* Creates the appropriate kind of zoom manager given the zoom behavior.
* @param {BrowserApi.ZoomBehavior} zoomBehavior How to manage zoom.
* @param {!Viewport} viewport A Viewport for which to manage zoom.
* @param {Function} setBrowserZoomFunction A function that sets the browser
* zoom to the provided value.
* @param {number} initialZoom The initial browser zoom level.
*/
static create(zoomBehavior, viewport, setBrowserZoomFunction, initialZoom) {
switch (zoomBehavior) {
case BrowserApi.ZoomBehavior.MANAGE:
return new ActiveZoomManager(
viewport, setBrowserZoomFunction, initialZoom);
case BrowserApi.ZoomBehavior.PROPAGATE_PARENT:
return new EmbeddedZoomManager(viewport, initialZoom);
default:
return new InactiveZoomManager(viewport, initialZoom);
}
}
/**
* Invoked when a browser-initiated zoom-level change occurs.
* @param {number} newZoom the zoom level to zoom to.
*/
onBrowserZoomChange(newZoom) {}
/**
* Invoked when an extension-initiated zoom-level change occurs.
*/
onPdfZoomChange() {}
/**
* Combines the internal pdf zoom and the browser zoom to
* produce the total zoom level for the viewer.
* @param {number} internalZoom the zoom level internal to the viewer.
* @return {number} the total zoom level.
*/
applyBrowserZoom(internalZoom) {
return this.browserZoom_ * internalZoom;
}
/**
* Given a zoom level, return the internal zoom level needed to
* produce that zoom level.
* @param {number} totalZoom the total zoom level.
* @return {number} the zoom level internal to the viewer.
*/
internalZoomComponent(totalZoom) {
return totalZoom / this.browserZoom_;
}
/**
* Returns whether two numbers are approximately equal.
* @param {number} a The first number.
* @param {number} b The second number.
*/
floatingPointEquals(a, b) {
let MIN_ZOOM_DELTA = 0.01;
// If the zoom level is close enough to the current zoom level, don't
// change it. This avoids us getting into an infinite loop of zoom changes
// due to floating point error.
return Math.abs(a - b) <= MIN_ZOOM_DELTA;
}
}
/**
* InactiveZoomManager has no control over the browser's zoom
* and does not respond to browser zoom changes.
*/
class InactiveZoomManager extends ZoomManager {}
/**
* ActiveZoomManager controls the browser's zoom.
*/
class ActiveZoomManager extends ZoomManager {
/**
* Constructs a ActiveZoomManager.
* @param {!Viewport} viewport A Viewport for which to manage zoom.
* @param {Function} setBrowserZoomFunction A function that sets the browser
* zoom to the provided value.
* @param {number} initialZoom The initial browser zoom level.
*/
constructor(viewport, setBrowserZoomFunction, initialZoom) {
super(viewport, initialZoom);
this.setBrowserZoomFunction_ = setBrowserZoomFunction;
this.changingBrowserZoom_ = null;
}
/**
* Invoked when a browser-initiated zoom-level change occurs.
* @param {number} newZoom the zoom level to zoom to.
*/
onBrowserZoomChange(newZoom) {
// If we are changing the browser zoom level, ignore any browser zoom level
// change events. Either, the change occurred before our update and will be
// overwritten, or the change being reported is the change we are making,
// which we have already handled.
if (this.changingBrowserZoom_)
return;
if (this.floatingPointEquals(this.browserZoom_, newZoom))
return;
this.browserZoom_ = newZoom;
this.viewport_.setZoom(newZoom);
}
/**
* Invoked when an extension-initiated zoom-level change occurs.
*/
onPdfZoomChange() {
// If we are already changing the browser zoom level in response to a
// previous extension-initiated zoom-level change, ignore this zoom change.
// Once the browser zoom level is changed, we check whether the extension's
// zoom level matches the most recently sent zoom level.
if (this.changingBrowserZoom_)
return;
let zoom = this.viewport_.zoom;
if (this.floatingPointEquals(this.browserZoom_, zoom))
return;
this.changingBrowserZoom_ = this.setBrowserZoomFunction_(zoom).then(() => {
this.browserZoom_ = zoom;
this.changingBrowserZoom_ = null;
// The extension's zoom level may have changed while the browser zoom
// change was in progress. We call back into onPdfZoomChange to ensure
// the browser zoom is up to date.
this.onPdfZoomChange();
});
}
/**
* Combines the internal pdf zoom and the browser zoom to
* produce the total zoom level for the viewer.
* @param {number} internalZoom the zoom level internal to the viewer.
* @return {number} the total zoom level.
*/
applyBrowserZoom(internalZoom) {
// The internal zoom and browser zoom are changed together, so the
// browser zoom is already applied.
return internalZoom;
}
/**
* Given a zoom level, return the internal zoom level needed to
* produce that zoom level.
* @param {number} totalZoom the total zoom level.
* @return {number} the zoom level internal to the viewer.
*/
internalZoomComponent(totalZoom) {
// The internal zoom and browser zoom are changed together, so the
// internal zoom is the total zoom.
return totalZoom;
}
}
/**
* This EmbeddedZoomManager responds to changes in the browser zoom,
* but does not control the browser zoom.
*/
class EmbeddedZoomManager extends ZoomManager {
/**
* Invoked when a browser-initiated zoom-level change occurs.
* @param {number} newZoom the new browser zoom level.
*/
onBrowserZoomChange(newZoom) {
let oldZoom = this.browserZoom_;
this.browserZoom_ = newZoom;
this.viewport_.updateZoomFromBrowserChange(oldZoom);
}
}
// Copyright 2015 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';
/**
* Returns a promise that will resolve to the default zoom factor.
* @return {Promise<number>} A promise that will resolve to the default zoom
* factor.
*/
function lookupDefaultZoom() {
return cr.sendWithPromise('getDefaultZoom');
}
/**
* Returns a promise that will resolve to the initial zoom factor
* upon starting the plugin. This may differ from the default zoom
* if, for example, the page is zoomed before the plugin is run.
* @return {Promise<number>} A promise that will resolve to the initial zoom
* factor.
*/
function lookupInitialZoom() {
return cr.sendWithPromise('getInitialZoom');
}
/**
* A class providing an interface to the browser.
*/
class BrowserApi {
/**
* @constructor
* @param {!Object} streamInfo The stream object which points to the data
* contained in the PDF.
* @param {number} defaultZoom The default browser zoom.
* @param {number} initialZoom The initial browser zoom
* upon starting the plugin.
* @param {boolean} manageZoom Whether to manage zoom.
*/
constructor(streamInfo, defaultZoom, initialZoom) {
this.streamInfo_ = streamInfo;
this.defaultZoom_ = defaultZoom;
this.initialZoom_ = initialZoom;
this.zoomBehavior_ = streamInfo.embedded ?
BrowserApi.ZoomBehavior.PROPAGATE_PARENT :
BrowserApi.ZoomBehavior.MANAGE;
}
/**
* Returns a promise to a BrowserApi.
* @param {!Object} streamInfo The stream object pointing to the data
* contained in the PDF.
* @param {boolean} manageZoom Whether to manage zoom.
*/
static create(streamInfo) {
return Promise.all([
lookupDefaultZoom(),
lookupInitialZoom()
]).then(function(zoomFactors) {
return new BrowserApi(
streamInfo, zoomFactors[0], zoomFactors[1]);
});
}
/**
* Returns the stream info pointing to the data contained in the PDF.
* @return {Object} The stream info object.
*/
getStreamInfo() {
return this.streamInfo_;
}
/**
* Sets the browser zoom.
* @param {number} zoom The zoom factor to send to the browser.
* @return {Promise} A promise that will be resolved when the browser zoom
* has been updated.
*/
setZoom(zoom) {
if (this.zoomBehavior_ != BrowserApi.ZoomBehavior.MANAGE)
return Promise.resolve();
return cr.sendWithPromise('setZoom', zoom);
}
/**
* Returns the default browser zoom factor.
* @return {number} The default browser zoom factor.
*/
getDefaultZoom() {
return this.defaultZoom_;
}
/**
* Returns the initial browser zoom factor.
* @return {number} The initial browser zoom factor.
*/
getInitialZoom() {
return this.initialZoom_;
}
/**
* Returns how to manage the zoom.
* @return {BrowserApi.ZoomBehavior} How to manage zoom.
*/
getZoomBehavior() {
return this.zoomBehavior_;
}
/**
* Adds an event listener to be notified when the browser zoom changes.
* @param {function} listener The listener to be called with the new zoom
* factor.
*/
addZoomEventListener(listener) {
if (this.zoomBehavior_ != BrowserApi.ZoomBehavior.MANAGE)
return;
cr.addWebUIListener('onZoomLevelChanged', function(newZoomFactor) {
listener(newZoomFactor);
});
}
};
/**
* Enumeration of ways to manage zoom changes.
* @enum {number}
*/
BrowserApi.ZoomBehavior = {
NONE: 0,
MANAGE: 1,
PROPAGATE_PARENT: 2
};
/**
* Creates a BrowserApi instance for an extension not running as a mime handler.
* @return {Promise<BrowserApi>} A promise to a BrowserApi instance constructed
* from the URL.
*/
function createBrowserApi(opts) {
let streamInfo = {
streamUrl: opts.streamURL,
originalUrl: opts.originalURL,
responseHeaders: opts.responseHeaders,
embedded: window.parent != window,
tabId: -1,
};
return new Promise(function(resolve, reject) {
resolve(BrowserApi.create(streamInfo));
});
}
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<style is="custom-style">
html {
--primary-text-color: var(--paper-grey-900);
--iron-icon-height: 20px;
--iron-icon-width: 20px;
--paper-icon-button: {
height: 32px;
padding: 6px;
width: 32px;
};
--paper-icon-button-ink-color: rgb(189, 189, 189);
--viewer-icon-ink-color: rgb(189, 189, 189);
}
</style>
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg size="24" name="pdf">
<svg>
<defs>
<!--
These icons are copied from Polymer's iron-icons and kept in sorted order.
See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-->
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
<g id="bookmark"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path></g>
<g id="bookmark-border"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"></path></g>
<g id="fullscreen-exit"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"></path></g>
<g id="remove"><path d="M19 13H5v-2h14v2z"></path></g>
<g id="rotate-right"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"></path></g>
</defs>
</svg>
</iron-iconset-svg>
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<dom-module id="viewer-bookmark" attributes="bookmark">
<template>
<style>
#item {
@apply(--layout-center);
@apply(--layout-horizontal);
cursor: pointer;
height: 30px;
position: relative;
}
#item:hover {
background-color: rgb(237, 237, 237);
}
paper-ripple {
/* Allowing the ripple to capture pointer events prevents a focus
* rectangle for showing up for clicks, while still allowing it with
* tab-navigation. This undoes a paper-ripple bug fix aimed at
* non-Chrome browsers. TODO(tsergeant): Improve focus in
* viewer-bookmark so this can be removed (https://crbug.com/5448190).
*/
pointer-events: auto;
}
#title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#expand {
--iron-icon-height: 16px;
--iron-icon-width: 16px;
--paper-icon-button-ink-color: var(--paper-grey-900);
height: 28px;
min-width: 28px;
padding: 6px;
transition: transform 150ms;
width: 28px;
}
:host-context([dir=rtl]) #expand {
transform: rotate(180deg);
}
:host([children-shown]) #expand {
transform: rotate(90deg);
}
</style>
<div id="item" on-click="onClick">
<paper-ripple></paper-ripple>
<paper-icon-button id="expand" icon="cr:chevron-right"
on-click="toggleChildren">
</paper-icon-button>
<span id="title" tabindex="0">{{bookmark.title}}</span>
</div>
<!-- dom-if will stamp the complex bookmark tree lazily as individual nodes
are opened. -->
<template is="dom-if" if="[[childrenShown]]" id="sub-bookmarks">
<template is="dom-repeat" items="[[bookmark.children]]">
<viewer-bookmark bookmark="{{item}}" depth="{{childDepth}}">
</viewer-bookmark>
</template>
</template>
</template>
<script src="viewer-bookmark.js"></script>
</dom-module>
// Copyright 2015 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.
/**
* The |title| is the text label displayed for the bookmark.
*
* The bookmark may point at a location in the PDF or a URI.
* If it points at a location, |page| indicates which 0-based page it leads to.
* Optionally, |y| is the y position in that page, in pixel coordinates.
* If it points at an URI, |uri| is the target for that bookmark.
*
* |children| is an array of the |Bookmark|s that are below this in a table of
* contents tree structure.
*/
var Bookmark;
(function() {
/** Amount that each level of bookmarks is indented by (px). */
var BOOKMARK_INDENT = 20;
Polymer({
is: 'viewer-bookmark',
properties: {
/** @type {Bookmark} */
bookmark: {type: Object, observer: 'bookmarkChanged_'},
depth: {type: Number, observer: 'depthChanged'},
childDepth: Number,
childrenShown: {type: Boolean, reflectToAttribute: true, value: false},
keyEventTarget: {
type: Object,
value: function() {
return this.$.item;
}
}
},
behaviors: [Polymer.IronA11yKeysBehavior],
keyBindings: {'enter': 'onEnter_', 'space': 'onSpace_'},
bookmarkChanged_: function() {
this.$.expand.style.visibility =
this.bookmark.children.length > 0 ? 'visible' : 'hidden';
},
depthChanged: function() {
this.childDepth = this.depth + 1;
this.$.item.style.webkitPaddingStart =
(this.depth * BOOKMARK_INDENT) + 'px';
},
onClick: function() {
if (this.bookmark.hasOwnProperty('page')) {
if (this.bookmark.hasOwnProperty('y')) {
this.fire(
'change-page-and-y',
{page: this.bookmark.page, y: this.bookmark.y});
} else {
this.fire('change-page', {page: this.bookmark.page});
}
} else if (this.bookmark.hasOwnProperty('uri')) {
this.fire('navigate', {uri: this.bookmark.uri, newtab: true});
}
},
onEnter_: function(e) {
// Don't allow events which have propagated up from the expand button to
// trigger a click.
if (e.detail.keyboardEvent.target != this.$.expand)
this.onClick();
},
onSpace_: function(e) {
// paper-icon-button stops propagation of space events, so there's no need
// to check the event source here.
this.onClick();
// Prevent default space scroll behavior.
e.detail.keyboardEvent.preventDefault();
},
toggleChildren: function(e) {
this.childrenShown = !this.childrenShown;
e.stopPropagation(); // Prevent the above onClick handler from firing.
}
});
})();
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="../viewer-bookmark/viewer-bookmark.html">
<dom-module id="viewer-bookmarks-content">
<template>
<template is="dom-repeat" items="[[bookmarks]]">
<viewer-bookmark bookmark="{{item}}" depth="0"></viewer-bookmark>
</template>
</template>
<script src="viewer-bookmarks-content.js"></script>
</dom-module>
// Copyright 2015 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.
Polymer({is: 'viewer-bookmarks-content'});
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<dom-module id="viewer-error-screen">
<template>
<style include="cr-shared-style"></style>
<dialog is="cr-dialog" id="dialog" no-cancel>
<div slot="title">
[[strings.errorDialogTitle]]
</div>
<div slot="body">
[[strings.pageLoadFailed]]
</div>
<div slot="button-container" hidden$="[[!reloadFn]]">
<paper-button class="action-button" on-click="reload">
[[strings.pageReload]]
</paper-button>
</div>
</dialog>
</template>
<script src="viewer-error-screen.js"></script>
</dom-module>
// Copyright 2014 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.
Polymer({
is: 'viewer-error-screen',
properties: {
reloadFn: Function,
strings: Object,
},
show: function() {
/** @type {!CrDialogElement} */ (this.$.dialog).showModal();
},
reload: function() {
if (this.reloadFn)
this.reloadFn();
}
});
<link rel="import" href="chrome://resources/html/polymer.html">
<dom-module id="viewer-page-indicator">
<template>
<style>
:host {
pointer-events: none;
position: fixed;
right: 0;
transition: opacity 400ms ease-in-out;
}
#text {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
color: white;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 48px;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
width: 62px;
}
#triangle-right {
border-bottom: 6px solid transparent;
border-left: 8px solid rgba(0, 0, 0, 0.5);
border-top: 6px solid transparent;
display: inline;
float: left;
height: 0;
margin-top: 18px;
width: 0;
}
</style>
<div id="text">{{label}}</div>
<div id="triangle-right"></div>
</template>
<script src="viewer-page-indicator.js"></script>
</dom-module>
// Copyright 2014 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.
Polymer({
is: 'viewer-page-indicator',
properties: {
label: {type: String, value: '1'},
index: {type: Number, observer: 'indexChanged'},
pageLabels: {type: Array, value: null, observer: 'pageLabelsChanged'}
},
/** @type {number|undefined} */
timerId: undefined,
/** @override */
ready: function() {
var callback = this.fadeIn.bind(this, 2000);
window.addEventListener('scroll', function() {
requestAnimationFrame(callback);
});
},
initialFadeIn: function() {
this.fadeIn(6000);
},
/** @param {number} displayTime */
fadeIn: function(displayTime) {
var percent = window.scrollY /
(document.scrollingElement.scrollHeight -
document.documentElement.clientHeight);
this.style.top =
percent * (document.documentElement.clientHeight - this.offsetHeight) +
'px';
//
this.style.opacity = 1;
clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
this.style.opacity = 0;
this.timerId = undefined;
}, displayTime);
},
pageLabelsChanged: function() {
this.indexChanged();
},
indexChanged: function() {
if (this.pageLabels)
this.label = this.pageLabels[this.index];
else
this.label = String(this.index + 1);
}
});
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
<dom-module id="viewer-page-selector">
<template>
<style>
:host {
color: #fff;
font-size: 1.23rem;
}
:host ::selection {
background: rgba(255, 255, 255, 0.3);
}
#pageselector {
--container: { visibility: hidden; };
--paper-input-container-underline: var(--container);
--paper-input-container-underline-focus: var(--container);
display: inline-block;
padding: 0;
width: 1ch;
}
#input {
-webkit-margin-start: -3px;
color: #fff;
line-height: 18px;
padding: 3px;
text-align: end;
vertical-align: baseline;
}
#input:focus,
#input:hover {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
#slash {
padding: 0 3px;
}
#pagelength-spacer {
display: inline-block;
text-align: start;
}
#input,
#slash,
#pagelength {
font-size: 0.81rem;
}
</style>
<paper-input-container id="pageselector" no-label-float>
<input id="input" is="iron-input" value="{{pageNo}}"
prevent-invalid-input allowed-pattern="\d" on-mouseup="select"
on-change="pageNoCommitted" aria-label$="{{strings.labelPageNumber}}">
</paper-input-container>
<span id="slash"> / </span>
<span id="pagelength-spacer">
<span id="pagelength">{{docLength}}</span>
</span>
</template>
<script src="viewer-page-selector.js"></script>
</dom-module>
// Copyright 2015 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.
Polymer({
is: 'viewer-page-selector',
properties: {
/**
* The number of pages the document contains.
*/
docLength: {type: Number, value: 1, observer: 'docLengthChanged_'},
/**
* The current page being viewed (1-based). A change to pageNo is mirrored
* immediately to the input field. A change to the input field is not
* mirrored back until pageNoCommitted() is called and change-page is fired.
*/
pageNo: {type: Number, value: 1},
strings: Object,
},
pageNoCommitted: function() {
var page = parseInt(this.$.input.value, 10);
if (!isNaN(page) && page <= this.docLength && page > 0)
this.fire('change-page', {page: page - 1});
else
this.$.input.value = this.pageNo;
this.$.input.blur();
},
/** @private */
docLengthChanged_: function() {
var numDigits = this.docLength.toString().length;
this.$.pageselector.style.width = numDigits + 'ch';
// Set both sides of the slash to the same width, so that the layout is
// exactly centered.
this.$['pagelength-spacer'].style.width = numDigits + 'ch';
},
select: function() {
this.$.input.select();
},
/**
* @return {boolean} True if the selector input field is currently focused.
*/
isActive: function() {
return this.shadowRoot.activeElement == this.$.input;
}
});
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<dom-module id="viewer-password-screen">
<template>
<style include="cr-shared-style">
#password {
--paper-input-container-focus-color: var(--google-blue-500);
--paper-input-container-input: {
font-size: inherit;
};
}
</style>
<dialog is="cr-dialog" id="dialog" no-cancel>
<div slot="title">[[strings.passwordDialogTitle]]</div>
<div slot="body">
<div id="message">[[strings.passwordPrompt]]</div>
<paper-input id="password"
type="password"
error-message="[[strings.passwordInvalid]]"
invalid="[[invalid]]"
no-label-float
autofocus>
</paper-input>
</div>
<div slot="button-container">
<paper-button id="submit" class="action-button" on-click="submit">
[[strings.passwordSubmit]]
</paper-button>
</div>
</dialog>
</template>
<script src="viewer-password-screen.js"></script>
</dom-module>
// Copyright 2014 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.
Polymer({
is: 'viewer-password-screen',
properties: {
invalid: Boolean,
strings: Object,
},
get active() {
return this.$.dialog.open;
},
show: function() {
this.$.dialog.showModal();
},
close: function() {
if (this.active)
this.$.dialog.close();
},
deny: function() {
var password = /** @type {!PaperInputElement} */ (this.$.password);
password.disabled = false;
this.$.submit.disabled = false;
this.invalid = true;
password.focus();
password.inputElement.select();
},
submit: function() {
var password = /** @type {!PaperInputElement} */ (this.$.password);
if (password.value.length == 0)
return;
password.disabled = true;
this.$.submit.disabled = true;
this.fire('password-submitted', {password: password.value});
},
});
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-up-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/transform-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../viewer-bookmarks-content/viewer-bookmarks-content.html">
<link rel="import" href="../viewer-page-selector/viewer-page-selector.html">
<link rel="import" href="../viewer-toolbar-dropdown/viewer-toolbar-dropdown.html">
<dom-module id="viewer-pdf-toolbar">
<template>
<style>
:host ::selection {
background: rgba(255, 255, 255, 0.3);
}
/* We introduce a wrapper aligner element to help with laying out the main
* toolbar content without changing the bottom-aligned progress bar. */
#aligner {
align-items: center;
display: flex;
padding: 0 8px;
width: 100%;
}
#title {
@apply(--layout-flex-5);
font-size: 0.87rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#pageselector-container {
@apply(--layout-flex-1);
text-align: center;
/* The container resizes according to the width of the toolbar. On small
* screens with large numbers of pages, overflow page numbers without
* wrapping. */
white-space: nowrap;
}
#buttons {
@apply(--layout-flex-5);
text-align: end;
user-select: none;
}
paper-icon-button {
-webkit-margin-end: 12px;
}
viewer-toolbar-dropdown {
-webkit-margin-end: 4px;
}
paper-progress {
--paper-progress-active-color: var(--google-blue-300);
--paper-progress-container-color: transparent;
--paper-progress-height: 3px;
transition: opacity 150ms;
width: 100%;
}
#toolbar {
@apply(--shadow-elevation-2dp);
background-color: rgb(50, 54, 57);
color: rgb(241, 241, 241);
display: flex;
height: 48px;
padding: 0 16px;
}
#progress-container {
bottom: 0;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: auto;
width: auto;
}
.invisible {
visibility: hidden;
}
@media(max-width: 675px) {
#bookmarks,
#rotate-left {
display: none;
}
#pageselector-container {
flex: 2;
}
}
@media(max-width: 450px) {
#rotate-right {
display: none;
}
}
@media(max-width: 400px) {
#buttons,
#pageselector-container {
display: none;
}
}
</style>
<div id="toolbar">
<div id="aligner">
<span id="title" title="{{docTitle}}">
<span>{{docTitle}}</span>
</span>
<div id="pageselector-container">
<viewer-page-selector id="pageselector" class="invisible"
doc-length="{{docLength}}" page-no="{{pageNo}}"
strings="{{strings}}">
</viewer-page-selector>
</div>
<div id="buttons" class="invisible">
<paper-icon-button id="rotate-right" icon="pdf:rotate-right"
on-click="rotateRight"
aria-label$="{{strings.tooltipRotateCW}}"
title$="{{strings.tooltipRotateCW}}">
</paper-icon-button>
<paper-icon-button id="download" icon="cr:file-download"
on-click="download"
aria-label$="{{strings.tooltipDownload}}"
title$="{{strings.tooltipDownload}}">
</paper-icon-button>
<!--paper-icon-button id="print" icon="cr:print"
on-click="print"
aria-label$="{{strings.tooltipPrint}}"
title$="{{strings.tooltipPrint}}">
</paper-icon-button-->
<viewer-toolbar-dropdown id="bookmarks"
hidden$="[[!bookmarks.length]]"
open-icon="pdf:bookmark"
closed-icon="pdf:bookmark-border"
header="{{strings.bookmarks}}">
<viewer-bookmarks-content bookmarks="{{bookmarks}}">
</viewer-bookmarks-content>
</viewer-toolbar-dropdown>
</div>
</div>
<div id="progress-container">
<paper-progress id="progress" value="{{loadProgress}}"></paper-progress>
</div>
</div>
</template>
<script src="viewer-pdf-toolbar.js"></script>
</dom-module>
// Copyright 2015 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.
(function() {
Polymer({
is: 'viewer-pdf-toolbar',
behaviors: [Polymer.NeonAnimationRunnerBehavior],
properties: {
/**
* The current loading progress of the PDF document (0 - 100).
*/
loadProgress: {type: Number, observer: 'loadProgressChanged'},
/**
* The title of the PDF document.
*/
docTitle: String,
/**
* The number of the page being viewed (1-based).
*/
pageNo: Number,
/**
* Tree of PDF bookmarks (or null if the document has no bookmarks).
*/
bookmarks: {type: Object, value: null},
/**
* The number of pages in the PDF document.
*/
docLength: Number,
/**
* Whether the toolbar is opened and visible.
*/
opened: {type: Boolean, value: true},
strings: Object,
animationConfig: {
value: function() {
return {
'entry': {
name: 'transform-animation',
node: this,
transformFrom: 'translateY(-100%)',
transformTo: 'translateY(0%)',
timing: {easing: 'cubic-bezier(0, 0, 0.2, 1)', duration: 250}
},
'exit': {
name: 'slide-up-animation',
node: this,
timing: {easing: 'cubic-bezier(0.4, 0, 1, 1)', duration: 250}
}
};
}
}
},
listeners: {'neon-animation-finish': '_onAnimationFinished'},
_onAnimationFinished: function() {
this.style.transform = this.opened ? 'none' : 'translateY(-100%)';
},
loadProgressChanged: function() {
if (this.loadProgress >= 100) {
this.$.pageselector.classList.toggle('invisible', false);
this.$.buttons.classList.toggle('invisible', false);
this.$.progress.style.opacity = 0;
}
},
hide: function() {
if (this.opened)
this.toggleVisibility();
},
show: function() {
if (!this.opened) {
this.toggleVisibility();
}
},
toggleVisibility: function() {
this.opened = !this.opened;
this.cancelAnimation();
this.playAnimation(this.opened ? 'entry' : 'exit');
},
selectPageNumber: function() {
this.$.pageselector.select();
},
shouldKeepOpen: function() {
return this.$.bookmarks.dropdownOpen || this.loadProgress < 100 ||
this.$.pageselector.isActive();
},
hideDropdowns: function() {
if (this.$.bookmarks.dropdownOpen) {
this.$.bookmarks.toggleDropdown();
return true;
}
return false;
},
setDropdownLowerBound: function(lowerBound) {
this.$.bookmarks.lowerBound = lowerBound;
},
rotateRight: function() {
this.fire('rotate-right');
},
download: function() {
this.fire('save');
},
print: function() {
this.fire('print');
}
});
})();
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<dom-module id="viewer-toolbar-dropdown">
<template>
<style>
:host {
text-align: start;
}
#container {
position: absolute;
/* Controls the position of the dropdown relative to the right of the
* screen. Default is aligned with the right of the toolbar buttons.
* TODO(tsergeant): Change the layout of the dropdown so this is not
* required.
*/
right: var(--viewer-toolbar-dropdown-right-distance, 28px);
}
:host-context([dir=rtl]) #container {
left: var(--viewer-toolbar-dropdown-right-distance, 28px);
right: auto;
}
#dropdown {
@apply(--shadow-elevation-2dp);
background-color: rgb(256, 256, 256);
border-radius: 4px;
color: var(--primary-text-color);
overflow-y: hidden;
padding-bottom: 2px;
width: 260px;
}
#scroll-container {
max-height: 300px;
overflow-y: auto;
padding: 6px 0 4px 0;
}
#icon {
cursor: pointer;
display: inline-block;
}
:host([dropdown-open]) #icon {
background-color: rgb(25, 27, 29);
border-radius: 4px;
}
#arrow {
-webkit-margin-start: -12px;
-webkit-padding-end: 4px;
}
h1 {
border-bottom: 1px solid rgb(219, 219, 219);
font-size: 0.87rem;
font-weight: 500;
margin: 0;
padding: 14px 28px;
}
</style>
<div on-click="toggleDropdown" id="icon">
<paper-icon-button id="main-icon" icon="[[dropdownIcon]]"
aria-label$="{{header}}" title$="{{header}}">
</paper-icon-button>
<iron-icon icon="cr:arrow-drop-down" id="arrow"></iron-icon>
</div>
<div id="container">
<div id="dropdown" style="display: none">
<h1>{{header}}</h1>
<div id="scroll-container">
<slot></slot>
</div>
</div>
</div>
</template>
<script src="viewer-toolbar-dropdown.js"></script>
</dom-module>
// Copyright 2015 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.
(function() {
/**
* Size of additional padding in the inner scrollable section of the dropdown.
*/
var DROPDOWN_INNER_PADDING = 12;
/** Size of vertical padding on the outer #dropdown element. */
var DROPDOWN_OUTER_PADDING = 2;
/** Minimum height of toolbar dropdowns (px). */
var MIN_DROPDOWN_HEIGHT = 200;
Polymer({
is: 'viewer-toolbar-dropdown',
properties: {
/** String to be displayed at the top of the dropdown. */
header: String,
/** Icon to display when the dropdown is closed. */
closedIcon: String,
/** Icon to display when the dropdown is open. */
openIcon: String,
/** True if the dropdown is currently open. */
dropdownOpen: {type: Boolean, reflectToAttribute: true, value: false},
/** Toolbar icon currently being displayed. */
dropdownIcon: {
type: String,
computed: 'computeIcon_(dropdownOpen, closedIcon, openIcon)'
},
/** Lowest vertical point that the dropdown should occupy (px). */
lowerBound: {type: Number, observer: 'lowerBoundChanged_'},
/**
* True if the max-height CSS property for the dropdown scroll container
* is valid. If false, the height will be updated the next time the
* dropdown is visible.
*/
maxHeightValid_: false,
/** Current animation being played, or null if there is none. */
animation_: Object
},
computeIcon_: function(dropdownOpen, closedIcon, openIcon) {
return dropdownOpen ? openIcon : closedIcon;
},
lowerBoundChanged_: function() {
this.maxHeightValid_ = false;
if (this.dropdownOpen)
this.updateMaxHeight();
},
toggleDropdown: function() {
this.dropdownOpen = !this.dropdownOpen;
if (this.dropdownOpen) {
this.$.dropdown.style.display = 'block';
if (!this.maxHeightValid_)
this.updateMaxHeight();
}
this.cancelAnimation_();
this.playAnimation_(this.dropdownOpen);
},
updateMaxHeight: function() {
var scrollContainer = this.$['scroll-container'];
var height = this.lowerBound - scrollContainer.getBoundingClientRect().top -
DROPDOWN_INNER_PADDING;
height = Math.max(height, MIN_DROPDOWN_HEIGHT);
scrollContainer.style.maxHeight = height + 'px';
this.maxHeightValid_ = true;
},
cancelAnimation_: function() {
if (this._animation)
this._animation.cancel();
},
/**
* Start an animation on the dropdown.
* @param {boolean} isEntry True to play entry animation, false to play
* exit.
* @private
*/
playAnimation_: function(isEntry) {
this.animation_ = isEntry ? this.animateEntry_() : this.animateExit_();
this.animation_.onfinish = () => {
this.animation_ = null;
if (!this.dropdownOpen)
this.$.dropdown.style.display = 'none';
};
},
animateEntry_: function() {
var maxHeight =
this.$.dropdown.getBoundingClientRect().height - DROPDOWN_OUTER_PADDING;
if (maxHeight < 0)
maxHeight = 0;
var fade = new KeyframeEffect(
this.$.dropdown, [{opacity: 0}, {opacity: 1}],
{duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
var slide = new KeyframeEffect(
this.$.dropdown,
[
{height: '20px', transform: 'translateY(-10px)'},
{height: maxHeight + 'px', transform: 'translateY(0)'}
],
{duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
return document.timeline.play(new GroupEffect([fade, slide]));
},
animateExit_: function() {
return this.$.dropdown.animate(
[
{transform: 'translateY(0)', opacity: 1},
{transform: 'translateY(-5px)', opacity: 0}
],
{duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'});
}
});
})();
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.html">
<dom-module id="viewer-zoom-button">
<template>
<style>
#wrapper {
transition: transform 250ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
:host([closed]) #wrapper {
/* 132px roughly flips the location of the button across the right edge
* of the page. */
transform: translateX(132px);
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
:host-context([dir=rtl]):host([closed]) #wrapper {
transform: translateX(-132px);
}
paper-fab {
@apply(--shadow-elevation-4dp);
--paper-fab-keyboard-focus-background: var(--viewer-icon-ink-color);
--paper-fab-mini: {
height: 36px;
padding: 8px;
width: 36px;
};
background-color: rgb(242, 242, 242);
color: var(--paper-grey-700);
overflow: visible;
}
</style>
<div id="wrapper">
<paper-fab id="button" mini icon="[[visibleIcon_]]" on-click="fireClick"
aria-label$="[[visibleTooltip_]]" title="[[visibleTooltip_]]">
</paper-fab>
</div>
</template>
<script src="viewer-zoom-button.js"></script>
</dom-module>
// Copyright 2015 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.
Polymer({
is: 'viewer-zoom-button',
properties: {
/**
* Icons to be displayed on the FAB. Multiple icons should be separated with
* spaces, and will be cycled through every time the FAB is clicked.
*/
icons: String,
/**
* Array version of the list of icons. Polymer does not allow array
* properties to be set from HTML, so we must use a string property and
* perform the conversion manually.
* @private
*/
icons_: {type: Array, value: [''], computed: 'computeIconsArray_(icons)'},
tooltips: Array,
closed: {type: Boolean, reflectToAttribute: true, value: false},
delay: {type: Number, observer: 'delayChanged_'},
/**
* Index of the icon currently being displayed.
*/
activeIndex: {type: Number, value: 0},
/**
* Icon currently being displayed on the FAB.
* @private
*/
visibleIcon_:
{type: String, computed: 'computeVisibleIcon_(icons_, activeIndex)'},
visibleTooltip_: {
type: String,
computed: 'computeVisibleTooltip_(tooltips, activeIndex)'
}
},
computeIconsArray_: function(icons) {
return icons.split(' ');
},
computeVisibleIcon_: function(icons, activeIndex) {
return icons[activeIndex];
},
computeVisibleTooltip_: function(tooltips, activeIndex) {
return tooltips[activeIndex];
},
delayChanged_: function() {
this.$.wrapper.style.transitionDelay = this.delay + 'ms';
},
show: function() {
this.closed = false;
},
hide: function() {
this.closed = true;
},
fireClick: function() {
// We cannot attach an on-click to the entire viewer-zoom-button, as this
// will include clicks on the margins. Instead, proxy clicks on the FAB
// through.
this.fire('fabclick');
this.activeIndex = (this.activeIndex + 1) % this.icons_.length;
}
});
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="../icons.html">
<link rel="import" href="viewer-zoom-button.html">
<dom-module id="viewer-zoom-toolbar">
<template>
<style>
:host {
bottom: 0;
padding: 48px 0;
position: fixed;
right: 0;
user-select: none;
z-index: 3;
}
:host-context([dir=rtl]) {
left: 0;
right: auto;
}
#zoom-buttons {
position: relative;
right: 48px;
}
:host-context([dir=rtl]) #zoom-buttons {
left: 48px;
right: auto;
}
viewer-zoom-button {
display: block;
}
/* A small gap between the zoom in/zoom out buttons. */
#zoom-out-button {
margin-top: 10px;
}
/* A larger gap between the fit button and bottom two buttons. */
#zoom-in-button {
margin-top: 24px;
}
</style>
<div id="zoom-buttons">
<viewer-zoom-button id="fit-button" on-fabclick="fitToggle" delay="100"
icons="pdf:fullscreen-exit cr:fullscreen">
</viewer-zoom-button>
<viewer-zoom-button id="zoom-in-button" icons="pdf:add"
on-fabclick="zoomIn" delay="50"></viewer-zoom-button>
<viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
on-fabclick="zoomOut" delay="0"></viewer-zoom-button>
</div>
</template>
<script src="viewer-zoom-toolbar.js"></script>
</dom-module>
// Copyright 2015 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.
(function() {
var FIT_TO_PAGE_BUTTON_STATE = 0;
var FIT_TO_WIDTH_BUTTON_STATE = 1;
Polymer({
is: 'viewer-zoom-toolbar',
properties: {
strings: {type: Object, observer: 'updateTooltips_'},
visible_: {type: Boolean, value: true}
},
isVisible: function() {
return this.visible_;
},
/**
* @private
* Change button tooltips to match any changes to localized strings.
*/
updateTooltips_: function() {
this.$['fit-button'].tooltips =
[this.strings.tooltipFitToPage, this.strings.tooltipFitToWidth];
this.$['zoom-in-button'].tooltips = [this.strings.tooltipZoomIn];
this.$['zoom-out-button'].tooltips = [this.strings.tooltipZoomOut];
},
fitToPage: function() {
this.fireFitToChangedEvent_(FittingType.FIT_TO_PAGE);
this.$['fit-button'].activeIndex = FIT_TO_WIDTH_BUTTON_STATE;
},
fitToWidth: function() {
this.fireFitToChangedEvent_(FittingType.FIT_TO_WIDTH);
this.$['fit-button'].activeIndex = FIT_TO_PAGE_BUTTON_STATE;
},
/**
* Handle clicks of the fit-button.
*/
fitToggle: function() {
this.fireFitToChangedEvent_(
this.$['fit-button'].activeIndex == FIT_TO_WIDTH_BUTTON_STATE ?
FittingType.FIT_TO_WIDTH :
FittingType.FIT_TO_PAGE);
},
/**
* Handle the keyboard shortcut equivalent of fit-button clicks.
*/
fitToggleFromHotKey: function() {
this.fitToggle();
// Toggle the button state since there was no mouse click.
var button = this.$['fit-button'];
button.activeIndex =
(button.activeIndex == FIT_TO_WIDTH_BUTTON_STATE ?
FIT_TO_PAGE_BUTTON_STATE :
FIT_TO_WIDTH_BUTTON_STATE);
},
/**
* Handle forcing zoom via scripting to a fitting type.
* @param {FittingType} fittingType Page fitting type to force.
*/
forceFit: function(fittingType) {
this.fireFitToChangedEvent_(fittingType);
// Set the button state since there was no mouse click.
var nextButtonState =
(fittingType == FittingType.FIT_TO_WIDTH ? FIT_TO_PAGE_BUTTON_STATE :
FIT_TO_WIDTH_BUTTON_STATE);
this.$['fit-button'].activeIndex = nextButtonState;
},
/**
* @private
* Fire a 'fit-to-changed' {CustomEvent} with the given FittingType as detail.
* @param {FittingType} fittingType to include as payload.
*/
fireFitToChangedEvent_: function(fittingType) {
this.fire('fit-to-changed', fittingType);
},
/**
* Handle clicks of the zoom-in-button.
*/
zoomIn: function() {
this.fire('zoom-in');
},
/**
* Handle clicks of the zoom-out-button.
*/
zoomOut: function() {
this.fire('zoom-out');
},
show: function() {
if (!this.visible_) {
this.visible_ = true;
this.$['fit-button'].show();
this.$['zoom-in-button'].show();
this.$['zoom-out-button'].show();
}
},
hide: function() {
if (this.visible_) {
this.visible_ = false;
this.$['fit-button'].hide();
this.$['zoom-in-button'].hide();
this.$['zoom-out-button'].hide();
}
},
});
})();
Reference in New Issue Copy Permalink