Skip to content

GitLab

T
tangled
Commit 8ea559bb authored by raymes@google.com's avatar raymes@google.com
Browse files
Options

Hookup the page-indicator and progress-bar elements in the PDF extension. 

This hooks up the page-indicator (so that the correct page is displayed) and
the progress bar (so that the correct progress is displayed) in PDF.

BUG=303491
R=arv@chromium.org, koz@chromium.org

Review URL: https://codereview.chromium.org/138703009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@252175 0039d316-1c4b-4281-b951-d872f2087c98
parent 450698fb
Hide whitespace changes
Inline Side-by-side
Showing with 271 additions and 4 deletions
chrome/browser/resources/pdf/index.html
View file @ 8ea559bb
......@@ -12,6 +12,8 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
......@@ -243,6 +245,132 @@ license that can be found in the LICENSE file.
<div id="icon"></div>
</template>
</polymer-element>
<polymer-element name="viewer-page-indicator" attributes="text" assetpath="html_office/elements/viewer-page-indicator/">
<template>
<style>/* 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. */
:host {
-webkit-transition: opacity 400ms ease-in-out;
pointer-events: none;
position: fixed;
right: 0;
}
#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">{{text}}</div>
<div id="triangle-right"></div>
</template>
</polymer-element>
<polymer-element name="viewer-progress-bar" attributes="progress text numSegments" assetpath="html_office/elements/viewer-progress-bar/">
<template>
<style>/* 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. */
:host {
-webkit-transition: opacity 400ms ease-in-out;
background: rgb(29, 39, 57);
border-radius: 5px;
bottom: 26px;
box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2);
height: auto;
left: 26px;
pointer-events: none;
position: fixed;
width: auto;
}
.scaler {
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
float: left;
height: 44px;
margin: 8px;
width: 44px;
}
#segments {
border-radius: 50%;
height: 176px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 176px;
}
.segment {
-webkit-transform-origin: 0 100%;
background: rgb(227, 234, 249);
box-shadow: 0 0 0 6px rgb(29, 39, 57) inset;
height: 50%;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.center-circle {
background-color: rgb(29, 39, 57);
border-radius: 50%;
height: 80px;
left: 44px;
margin: 0;
padding: 0;
position: absolute;
top: 44px;
width: 80px;
}
#text {
color: rgb(227, 234, 249);
float: left;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 58px;
margin-right: 10px;
margin-top: 1px;
}
</style>
<div class="scaler">
<ul id="segments"></ul>
<div class="center-circle"></div>
</div>
<div id="text">{{text}}</div>
</template>
</polymer-element>
<style>
body {
......@@ -250,6 +378,18 @@ license that can be found in the LICENSE file.
margin: 0;
}
viewer-toolbar {
visibility: hidden;
z-index: 3;
}
viewer-page-indicator {
visibility: hidden;
z-index: 3;
}
viewer-progress-bar {
z-index: 3;
}
viewer-error-screen {
visibility: hidden;
z-index: 2;
}
#plugin {
......@@ -267,6 +407,8 @@ license that can be found in the LICENSE file.
<body>
<div id="sizer"></div>
<viewer-page-indicator id="page-indicator"></viewer-page-indicator>
<viewer-progress-bar id="progress-bar"></viewer-progress-bar>
<viewer-toolbar id="toolbar">
<polymer-selector>
......
chrome/browser/resources/pdf/index.in.html
View file @ 8ea559bb
......@@ -11,12 +11,26 @@
<link rel="import" href="../../../../third_party/polymer/polymer-selector/polymer-selector.html">
<link rel="import" href="html_office/elements/viewer-toolbar/viewer-toolbar.html">
<link rel="import" href="html_office/elements/viewer-button/viewer-button.html">
<link rel="import" href="html_office/elements/viewer-page-indicator/viewer-page-indicator.html">
<link rel="import" href="html_office/elements/viewer-progress-bar/viewer-progress-bar.html">
<style>
body {
background-color: #ccc;
margin: 0;
}
viewer-toolbar {
visibility: hidden;
z-index: 3;
}
viewer-page-indicator {
visibility: hidden;
z-index: 3;
}
viewer-progress-bar {
z-index: 3;
}
viewer-error-screen {
visibility: hidden;
z-index: 2;
}
#plugin {
......@@ -34,6 +48,8 @@
<body>
<div id="sizer"></div>
<viewer-page-indicator id="page-indicator"></viewer-page-indicator>
<viewer-progress-bar id="progress-bar"></viewer-progress-bar>
<viewer-toolbar id="toolbar">
<polymer-selector>
......
chrome/browser/resources/pdf/index.js
View file @ 8ea559bb
......@@ -448,3 +448,71 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function
},
});
})();
;
Polymer('viewer-page-indicator', {
text: '1',
timerId: undefined,
ready: function() {
var scrollCallback = function() {
var percent = window.scrollY /
(document.body.scrollHeight -
document.documentElement.clientHeight);
this.style.top = percent *
(document.documentElement.clientHeight - this.offsetHeight) + 'px';
this.style.opacity = 1;
clearTimeout(this.timerId);
this.timerId = setTimeout(function() {
this.style.opacity = 0;
this.timerId = undefined;
}.bind(this), 2000);
}.bind(this);
window.addEventListener('scroll', function() {
requestAnimationFrame(scrollCallback);
});
scrollCallback();
},
});
;
Polymer('viewer-progress-bar', {
progress: 0,
text: 'Loading',
numSegments: 8,
segments: [],
ready: function() {
this.numSegmentsChanged();
},
progressChanged: function() {
var numVisible = this.progress * this.segments.length / 100.0;
for (var i = 0; i < this.segments.length; i++) {
this.segments[i].style.visibility =
i < numVisible ? 'visible' : 'hidden';
}
if (this.progress >= 100 || this.progress < 0)
this.style.opacity = 0;
},
numSegmentsChanged: function() {
// Clear the existing segments.
this.segments = [];
var segmentsElement = this.$.segments;
segmentsElement.innerHTML = '';
// Create the new segments.
var segment = document.createElement('li');
segment.classList.add('segment');
var angle = 360 / this.numSegments;
for (var i = 0; i < this.numSegments; ++i) {
var segmentCopy = segment.cloneNode(true);
segmentCopy.style.webkitTransform =
'rotate(' + (i * angle) + 'deg) skewY(' +
-1 * (90 - angle) + 'deg)';
segmentsElement.appendChild(segmentCopy);
this.segments.push(segmentCopy);
}
this.progressChanged();
}
});
chrome/browser/resources/pdf/pdf.js
View file @ 8ea559bb
......@@ -21,29 +21,67 @@ var sizer;
// The toolbar element.
var viewerToolbar;
// The page indicator element.
var viewerPageIndicator;
// The progress bar element.
var viewerProgressBar;
// The viewport object.
var viewport;
// The document dimensions.
var documentDimensions;
// Returns true if the fit-to-page button is enabled.
function isFitToPageEnabled() {
return $('fit-to-page-button').classList.contains('polymer-selected');
}
function updateProgress(progress) {
viewerProgressBar.progress = progress;
if (progress == -1) {
// Document load failed.
sizer.style.display = 'none';
viewerToolbar.style.visibility = 'hidden';
}
}
// Called when a message is received from the plugin.
function handleMessage(message) {
if (message.data.type == 'documentDimensions') {
viewport.setDocumentDimensions(message.data);
documentDimensions = message.data;
viewport.setDocumentDimensions(documentDimensions);
viewerToolbar.style.visibility = 'visible';
viewerPageIndicator.initialFadeIn();
viewerToolbar.initialFadeIn();
} else if (message.data.type == 'loadProgress') {
updateProgress(message.data['progress']);
}
}
// Callback that's called when the viewport changes.
function viewportChangedCallback(zoom, x, y, scrollbarWidth, hasScrollbars) {
function viewportChangedCallback(zoom,
x,
y,
scrollbarWidth,
hasScrollbars,
page) {
// Offset the toolbar position so that it doesn't move if scrollbars appear.
var toolbarRight = hasScrollbars.y ? 0 : scrollbarWidth;
var toolbarBottom = hasScrollbars.x ? 0 : scrollbarWidth;
viewerToolbar.style.right = toolbarRight + 'px';
viewerToolbar.style.bottom = toolbarBottom + 'px';
// Show or hide the page indicator.
if (documentDimensions.pageDimensions.length > 1 && hasScrollbars.y)
viewerPageIndicator.style.visibility = 'visible';
else
viewerPageIndicator.style.visibility = 'hidden';
// Update the most visible page.
viewerPageIndicator.text = page + 1;
// Notify the plugin of the viewport change.
plugin.postMessage({
type: 'viewport',
......@@ -56,6 +94,8 @@ function viewportChangedCallback(zoom, x, y, scrollbarWidth, hasScrollbars) {
function load() {
sizer = $('sizer');
viewerToolbar = $('toolbar');
viewerPageIndicator = $('page-indicator');
viewerProgressBar = $('progress-bar');
// Create the viewport.
viewport = new Viewport(window,
......
chrome/browser/resources/pdf/viewport.js
View file @ 8ea559bb
......@@ -129,13 +129,14 @@ Viewport.prototype = {
* Called when the viewport should be updated.
*/
updateViewport_: function() {
// Shift the toolbar so that it doesn't move when the scrollbars display
var needsScrollbars = this.documentHasScrollbars();
var page = this.getMostVisiblePage();
this.viewportChangedCallback_(this.zoom_,
this.window_.pageXOffset,
this.window_.pageYOffset,
this.scrollbarWidth_,
needsScrollbars);
needsScrollbars,
page);
},
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment