Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove flex box. Add side animation. Add dashed line around unload thumbnails.

Browse Source
This commit is contained in:
Brendan Dahl 2012-04-25 11:34:28 -07:00
parent 11d7278c93
commit 50088867c0
3 changed files with 197 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
web/viewer.css
View File

@ -14,51 +14,95 @@ body {
font-family: Segoe UI, Verdana, sans-serif; font-family: Segoe UI, Verdana, sans-serif;
} }
/* outer/inner center provides horizontal center */
.outerCenter {
float: right;
position: relative;
right: 50%;
}
.innerCenter {
float: right;
position: relative;
right: -50%;
}
#outerContainer { #outerContainer {
display: -moz-box;
-moz-box-orient: horizontal;
display: -webkit-box;
-webkit-box-orient: horizontal;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#sidebarContainer { #sidebarContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; width: 200px;
height: 100%; -moz-transition-property: left;
background-color: hsla(0,0%,0%,.1); -moz-transition-duration: 200ms;
box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25); -moz-transition-timing-function: ease;
overflow: auto; -webkit-transition-property: left;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
} }
#sidebarContainer.hidden { #sidebarContainer.hidden {
display:none; left: -200px;
}
#mainContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-moz-transition-property: left;
-moz-transition-duration: 200ms;
-moz-transition-timing-function: ease;
-webkit-transition-property: left;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
}
#mainContainer.sideBarOpen {
left: 200px;
}
#sidebarContent {
top: 0;
left: 0;
bottom: 0;
height: 100%;
overflow: auto;
position: absolute;
width: 200px;
background-color: hsla(0,0%,0%,.1);
box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
} }
#viewerContainer { #viewerContainer {
-moz-box-flex: 1; overflow: auto;
-webkit-box-flex: 1;
height: 100%;
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
padding-top: 30px; padding-top: 30px;
position: absolute;
top: 32px;
right: 0;
bottom: 0;
left: 0;
} }
.toolbar { .toolbar {
position: fixed; position: absolute;
width: 100%; left: 0;
right: 0;
height: 32px; height: 32px;
z-index: 9999; z-index: 9999;
cursor: default; cursor: default;
} }
#toolbarContainer { #toolbarContainer {
display: -moz-box;
display: -webkit-box;
width: 100%; width: 100%;
} }
#toolbarSidebar { #toolbarSidebar {
display: -moz-box;
display: -webkit-box;
width: 200px; width: 200px;
height: 32px; height: 32px;
background-image: url(images/texture.png), background-image: url(images/texture.png),
@ -71,15 +115,9 @@ body {
0 1px 0 hsla(0,0%,0%,.15), 0 1px 0 hsla(0,0%,0%,.15),
0 1px 1px hsla(0,0%,0%,.1); 0 1px 1px hsla(0,0%,0%,.1);
} }
#toolbarSidebar.hidden {
display:none;
}
#toolbarViewer { #toolbarViewer {
display: -moz-box; position: relative;
-moz-box-flex: 1;
display: -webkit-box;
-webkit-box-flex: 1;
margin-left: -1px; margin-left: -1px;
height: 32px; height: 32px;
background-image: url(images/texture.png), background-image: url(images/texture.png),
@ -94,22 +132,34 @@ body {
0 1px 1px hsla(0,0%,0%,.1); 0 1px 1px hsla(0,0%,0%,.1);
} }
#toolbarViewerLeft {
position: absolute;
top: 0;
left: 0;
}
#toolbarViewerRight {
position: absolute;
top: 0;
right: 0;
}
#toolbarViewerLeft > *,
#toolbarViewerMiddle > *,
#toolbarViewerRight > * {
float: left;
}
.splitToolbarButton { .splitToolbarButton {
margin: 4px 2px 4px 0; margin: 3px 2px 4px 0;
display: -moz-box; display: inline-block;
display: -webkit-box;
} }
.splitToolbarButton > .toolbarButton { .splitToolbarButton > .toolbarButton {
position: relative;
margin: 0 -1px;
padding: 3px 6px;
border-radius: 0; border-radius: 0;
float: left;
} }
.toolbarButton { .toolbarButton {
margin: 4px 2px 4px 0; border: 0 none;
display: -moz-box; background-color: rgba(0, 0, 0, 0);
display: -webkit-box;
} }
.splitToolbarButton:hover > .toolbarButton, .splitToolbarButton:hover > .toolbarButton,
@ -155,31 +205,33 @@ body {
border-left-color: transparent; border-left-color: transparent;
} }
.splitToolbarButtonSeparator { .splitToolbarButtonSeparator {
margin: 4px 0; padding: 8px 0;
width: 1px; width: 1px;
background-color: hsla(0,0%,00%,.5); background-color: hsla(0,0%,00%,.5);
z-index: 99; z-index: 99;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08); box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
display: inline-block;
margin: 5px 0;
float:left;
} }
.splitToolbarButton:hover > .splitToolbarButtonSeparator, .splitToolbarButton:hover > .splitToolbarButtonSeparator,
.splitToolbarButton.toggled > .splitToolbarButtonSeparator { .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
margin: 1px 0; padding: 13px 0;
margin: 0;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.03); box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
-moz-transition-property: margin; -moz-transition-property: padding;
-moz-transition-duration: 10ms; -moz-transition-duration: 10ms;
-moz-transition-timing-function: ease; -moz-transition-timing-function: ease;
-webkit-transition-property: margin; -webkit-transition-property: padding;
-webkit-transition-duration: 10ms; -webkit-transition-duration: 10ms;
-webkit-transition-timing-function: ease; -webkit-transition-timing-function: ease;
} }
.toolbarButton, .toolbarButton,
.dropdownToolbarButton { .dropdownToolbarButton {
-moz-box-flex: 0;
-webkit-box-flex: 1;
min-width: 16px; min-width: 16px;
padding: 3px 7px; padding: 3px;
margin: 4px 2px 4px 0; margin: 3px 2px 4px 0;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
color: hsl(0,0%,95%); color: hsl(0,0%,95%);
@ -282,6 +334,8 @@ body {
.toolbarButtonSpacer { .toolbarButtonSpacer {
width: 30px; width: 30px;
display: inline-block;
height: 1px;
} }
.toolbarButtonFlexibleSpacer { .toolbarButtonFlexibleSpacer {
@ -326,11 +380,9 @@ body {
} }
.toolbarButton.bookmark { .toolbarButton.bookmark {
display: block;
} }
.toolbarButton.bookmark::before { .toolbarButton.bookmark::before {
display: inline-block;
content: url(images/toolbarButton-bookmark.png); content: url(images/toolbarButton-bookmark.png);
} }
@ -412,6 +464,10 @@ body {
height: 142px; height: 142px;
} }
.thumbnail:not([data-loaded]) {
border: 1px dashed rgba(255, 255, 255, 0.5);
}
.thumbnailImage { .thumbnailImage {
-moz-transition-duration: 150ms; -moz-transition-duration: 150ms;
border: 1px solid transparent; border: 1px solid transparent;

139
web/viewer.html
View File

@ -39,77 +39,84 @@
<body> <body>
<div id="outerContainer"> <div id="outerContainer">
<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarSidebar" class="hidden">
<div class="splitToolbarButton toggled">
<div id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></div>
<div class="splitToolbarButtonSeparator"></div>
<div id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled></div>
</div>
</div>
<div id="toolbarViewer">
<div id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"></div>
<div class="toolbarButtonSpacer"></div>
<div class="splitToolbarButton">
<div class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--"></div>
<div class="splitToolbarButtonSeparator"></div>
<div class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++"></div>
</div>
<input type="number" id="pageNumber" class="toolbarField" onchange="PDFView.page = this.value;" value="1" size="4" min="1">
</input>
<div id="numPages" class="toolbarLabel"></div>
<div class="toolbarButtonFlexibleSpacer"></div>
<div class="splitToolbarButton">
<div class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();"></div>
<div class="splitToolbarButtonSeparator"></div>
<div class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();"></div>
</div>
<div class="dropdownToolbarButton">
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option id="pageWidthOption" value="page-width">Page Width</option>
<option id="pageFitOption" value="page-fit">Page Fit</option>
<option id="pageAutoOption" value="auto" selected="selected">Auto</option>
</select>
</div>
<div class="toolbarButtonFlexibleSpacer"></div>
<input id="fileInput" class="toolbarButton fileInput" type="file" oncontextmenu="return false;"/>
<div class="toolbarButtonSpacer"></div>
<!-- <div class="toolbarButton print" title="Print"></div> -->
<div id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();"></div>
<a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location">
</a>
</div>
</div>
</div>
<div id="sidebarContainer" class="hidden"> <div id="sidebarContainer" class="hidden">
<div id="thumbnailView"> <div id="toolbarSidebar">
<div class="splitToolbarButton toggled">
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></button>
<button id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled></button>
</div>
</div>
<div id="sidebarContent">
<div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
</div>
</div> <!-- sidebarContainer -->
<div id="mainContainer">
<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"></button>
<div class="toolbarButtonSpacer"></div>
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous"></button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next"></button>
</div>
<input type="number" id="pageNumber" class="toolbarField" onchange="PDFView.page = this.value;" value="1" size="4" min="1">
</input>
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<input id="fileInput" class="toolbarButton fileInput" type="file" oncontextmenu="return false;" style="display: none"/>
<!-- <div class="toolbarButton print" title="Print"></div> -->
<button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();"></button>
<div class="toolbarButtonSpacer"></div>
<a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location">
</a>
</div>
<div class="outerCenter">
<div class="innerCenter" id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();"></button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();"></button>
</div>
<span class="dropdownToolbarButton">
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option id="pageWidthOption" value="page-width">Page Width</option>
<option id="pageFitOption" value="page-fit">Page Fit</option>
<option id="pageAutoOption" value="auto" selected="selected">Auto</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div> </div>
<div id="outlineView" class="hidden"> <div id="viewerContainer">
<div id="viewer" />
</div> </div>
</div>
<div id="viewerContainer"> <div id="loadingBox">
<div id="viewer" /> <div id="loading">Loading... 0%</div>
</div> <div id="loadingBar"><div class="progress"></div></div>
</div>
<div id="loadingBox"> </div> <!-- mainContainer -->
<div id="loading">Loading... 0%</div>
<div id="loadingBar"><div class="progress"></div></div>
</div>
</div> <!-- outerContainer --> </div> <!-- outerContainer -->

31
web/viewer.js
View File

@ -214,6 +214,11 @@ var PDFView = {
currentScale: kUnknownScale, currentScale: kUnknownScale,
currentScaleValue: null, currentScaleValue: null,
initialBookmark: document.location.hash.substring(1), initialBookmark: document.location.hash.substring(1),
container: null,
// called once when the document is loaded
init: function pdfViewInit() {
this.container = document.getElementById('viewerContainer');
},
setScale: function pdfViewSetScale(val, resetAutoSettings) { setScale: function pdfViewSetScale(val, resetAutoSettings) {
if (val == this.currentScale) if (val == this.currentScale)
@ -245,10 +250,11 @@ var PDFView = {
return; return;
} }
var container = this.container;
var currentPage = this.pages[this.page - 1]; var currentPage = this.pages[this.page - 1];
var pageWidthScale = (window.innerWidth - kScrollbarPadding) / var pageWidthScale = (container.clientWidth - kScrollbarPadding) /
currentPage.width * currentPage.scale / kCssUnits; currentPage.width * currentPage.scale / kCssUnits;
var pageHeightScale = (window.innerHeight - kScrollbarPadding) / var pageHeightScale = (container.clientHeight - kScrollbarPadding) /
currentPage.height * currentPage.scale / kCssUnits; currentPage.height * currentPage.scale / kCssUnits;
if ('page-width' == value) if ('page-width' == value)
this.setScale(pageWidthScale, resetAutoSettings); this.setScale(pageWidthScale, resetAutoSettings);
@ -660,18 +666,19 @@ var PDFView = {
var visiblePages = []; var visiblePages = [];
var currentHeight = kBottomMargin; var currentHeight = kBottomMargin;
var windowTop = window.pageYOffset; var container = this.container;
var containerTop = container.scrollTop;
for (var i = 1; i <= pages.length; ++i) { for (var i = 1; i <= pages.length; ++i) {
var page = pages[i - 1]; var page = pages[i - 1];
var pageHeight = page.height + kBottomMargin; var pageHeight = page.height + kBottomMargin;
if (currentHeight + pageHeight > windowTop) if (currentHeight + pageHeight > containerTop)
break; break;
currentHeight += pageHeight; currentHeight += pageHeight;
} }
var windowBottom = window.pageYOffset + window.innerHeight; var containerBottom = containerTop + container.clientHeight;
for (; i <= pages.length && currentHeight < windowBottom; ++i) { for (; i <= pages.length && currentHeight < containerBottom; ++i) {
var singlePage = pages[i - 1]; var singlePage = pages[i - 1];
visiblePages.push({ id: singlePage.id, y: currentHeight, visiblePages.push({ id: singlePage.id, y: currentHeight,
view: singlePage }); view: singlePage });
@ -1288,6 +1295,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
}; };
window.addEventListener('load', function webViewerLoad(evt) { window.addEventListener('load', function webViewerLoad(evt) {
PDFView.init();
var params = PDFView.parseQueryString(document.location.search.substring(1)); var params = PDFView.parseQueryString(document.location.search.substring(1));
var file = PDFJS.isFirefoxExtension ? var file = PDFJS.isFirefoxExtension ?
@ -1322,11 +1330,20 @@ window.addEventListener('load', function webViewerLoad(evt) {
var thumbsView = document.getElementById('thumbnailView'); var thumbsView = document.getElementById('thumbnailView');
thumbsView.addEventListener('scroll', updateThumbViewArea, true); thumbsView.addEventListener('scroll', updateThumbViewArea, true);
var mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('transitionend', function(e) {
if (e.target == mainContainer) {
var event = document.createEvent('UIEvents');
event.initUIEvent('resize', false, false, window, 0);
window.dispatchEvent(event);
}
}, true);
document.getElementById('sidebarToggle').addEventListener('click', document.getElementById('sidebarToggle').addEventListener('click',
function() { function() {
this.classList.toggle('toggled'); this.classList.toggle('toggled');
document.getElementById('toolbarSidebar').classList.toggle('hidden');
document.getElementById('sidebarContainer').classList.toggle('hidden'); document.getElementById('sidebarContainer').classList.toggle('hidden');
mainContainer.classList.toggle('sideBarOpen');
updateThumbViewArea(); updateThumbViewArea();
}); });