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

Merge pull request #1614 from brendandahl/new-ui2

Browse Source 
Remove flex box.
This commit is contained in:
Artur Adib 2012-04-25 13:59:30 -07:00
commit b98a747c63
3 changed files with 200 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
web/viewer.css
View File

@ -14,51 +14,94 @@ body {
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 {
display: -moz-box;
-moz-box-orient: horizontal;
display: -webkit-box;
-webkit-box-orient: horizontal;
width: 100%;
height: 100%;
}
#sidebarContainer {
position: absolute;
top: 0;
bottom: 0;
left: -200px;
width: 200px;
height: 100%;
-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;
}
#outerContainer.sideBarOpen > #sidebarContainer {
left: 0px;
}
#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;
}
#outerContainer.sideBarOpen > #mainContainer {
left: 200px;
}
#sidebarContent {
top: 32px;
left: 0;
bottom: 0;
overflow: auto;
position: absolute;
width: 200px;
background-color: hsla(0,0%,0%,.1);
box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
overflow: auto;
}
#sidebarContainer.hidden {
display:none;
}
#viewerContainer {
-moz-box-flex: 1;
-webkit-box-flex: 1;
height: 100%;
overflow: auto;
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
padding-top: 30px;
position: absolute;
top: 32px;
right: 0;
bottom: 0;
left: 0;
}
.toolbar {
position: fixed;
width: 100%;
position: absolute;
left: 0;
right: 0;
height: 32px;
z-index: 9999;
cursor: default;
}
#toolbarContainer {
display: -moz-box;
display: -webkit-box;
width: 100%;
}
#toolbarSidebar {
display: -moz-box;
display: -webkit-box;
width: 200px;
height: 32px;
background-image: url(images/texture.png),
@ -71,15 +114,9 @@ body {
0 1px 0 hsla(0,0%,0%,.15),
0 1px 1px hsla(0,0%,0%,.1);
}
#toolbarSidebar.hidden {
display:none;
}
#toolbarViewer {
display: -moz-box;
-moz-box-flex: 1;
display: -webkit-box;
-webkit-box-flex: 1;
position: relative;
margin-left: -1px;
height: 32px;
background-image: url(images/texture.png),
@ -94,22 +131,34 @@ body {
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 {
margin: 4px 2px 4px 0;
display: -moz-box;
display: -webkit-box;
margin: 3px 2px 4px 0;
display: inline-block;
}
.splitToolbarButton > .toolbarButton {
position: relative;
margin: 0 -1px;
padding: 3px 6px;
border-radius: 0;
float: left;
}
.toolbarButton {
margin: 4px 2px 4px 0;
display: -moz-box;
display: -webkit-box;
border: 0 none;
background-color: rgba(0, 0, 0, 0);
}
.splitToolbarButton:hover > .toolbarButton,
@ -155,31 +204,33 @@ body {
border-left-color: transparent;
}
.splitToolbarButtonSeparator {
margin: 4px 0;
padding: 8px 0;
width: 1px;
background-color: hsla(0,0%,00%,.5);
z-index: 99;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
display: inline-block;
margin: 5px 0;
float:left;
}
.splitToolbarButton:hover > .splitToolbarButtonSeparator,
.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
margin: 1px 0;
padding: 13px 0;
margin: 0;
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-timing-function: ease;
-webkit-transition-property: margin;
-webkit-transition-property: padding;
-webkit-transition-duration: 10ms;
-webkit-transition-timing-function: ease;
}
.toolbarButton,
.dropdownToolbarButton {
-moz-box-flex: 0;
-webkit-box-flex: 1;
min-width: 16px;
padding: 3px 7px;
margin: 4px 2px 4px 0;
padding: 3px;
margin: 3px 2px 4px 0;
border: 1px solid transparent;
border-radius: 2px;
color: hsl(0,0%,95%);
@ -282,6 +333,8 @@ body {
.toolbarButtonSpacer {
width: 30px;
display: inline-block;
height: 1px;
}
.toolbarButtonFlexibleSpacer {
@ -326,11 +379,9 @@ body {
}
.toolbarButton.bookmark {
display: block;
}
.toolbarButton.bookmark::before {
display: inline-block;
content: url(images/toolbarButton-bookmark.png);
}
@ -418,6 +469,12 @@ body {
.thumbnail {
margin-bottom: 15px;
float: left;
width: 114px;
height: 142px;
}
.thumbnail:not([data-loaded]) {
border: 1px dashed rgba(255, 255, 255, 0.5);
}
.thumbnailImage {

136
web/viewer.html
View File

@ -39,78 +39,84 @@
<body>
<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>
<div class="toolbarLabel">Page: </div>
<input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1">
</input>
<div id="numPages" class="toolbarLabel" style="margin-left:5px;"></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 id="sidebarContainer">
<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>
<div id="sidebarContent">
<div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
</div>
</div> <!-- sidebarContainer -->
<div id="sidebarContainer" class="hidden">
<div id="thumbnailView">
<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>
<div class="toolbarLabel">Page: </div>
<input type="number" id="pageNumber" class="toolbarField pageNumber" 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 id="outlineView" class="hidden">
<div id="viewerContainer">
<div id="viewer" />
</div>
</div>
<div id="viewerContainer">
<div id="viewer" />
</div>
<div id="loadingBox">
<div id="loading">Loading... 0%</div>
<div id="loadingBar"><div class="progress"></div></div>
</div>
<div id="loadingBox">
<div id="loading">Loading... 0%</div>
<div id="loadingBar"><div class="progress"></div></div>
</div>
</div> <!-- mainContainer -->
</div> <!-- outerContainer -->

39
web/viewer.js
View File

@ -214,6 +214,11 @@ var PDFView = {
currentScale: kUnknownScale,
currentScaleValue: null,
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) {
if (val == this.currentScale)
@ -245,10 +250,11 @@ var PDFView = {
return;
}
var container = this.container;
var currentPage = this.pages[this.page - 1];
var pageWidthScale = (window.innerWidth - kScrollbarPadding) /
var pageWidthScale = (container.clientWidth - kScrollbarPadding) /
currentPage.width * currentPage.scale / kCssUnits;
var pageHeightScale = (window.innerHeight - kScrollbarPadding) /
var pageHeightScale = (container.clientHeight - kScrollbarPadding) /
currentPage.height * currentPage.scale / kCssUnits;
if ('page-width' == value)
this.setScale(pageWidthScale, resetAutoSettings);
@ -660,18 +666,19 @@ var PDFView = {
var visiblePages = [];
var currentHeight = kBottomMargin;
var windowTop = window.pageYOffset;
var container = this.container;
var containerTop = container.scrollTop;
for (var i = 1; i <= pages.length; ++i) {
var page = pages[i - 1];
var pageHeight = page.height + kBottomMargin;
if (currentHeight + pageHeight > windowTop)
if (currentHeight + pageHeight > containerTop)
break;
currentHeight += pageHeight;
}
var windowBottom = window.pageYOffset + window.innerHeight;
for (; i <= pages.length && currentHeight < windowBottom; ++i) {
var containerBottom = containerTop + container.clientHeight;
for (; i <= pages.length && currentHeight < containerBottom; ++i) {
var singlePage = pages[i - 1];
visiblePages.push({ id: singlePage.id, y: currentHeight,
view: singlePage });
@ -687,8 +694,8 @@ var PDFView = {
var view = document.getElementById('thumbnailView');
var currentHeight = kBottomMargin;
var top = view.scrollTop;
var top = view.scrollTop;
for (var i = 1; i <= thumbs.length; ++i) {
var thumb = thumbs[i - 1];
var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin;
@ -1065,7 +1072,7 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
canvas.className = 'thumbnailImage';
div.setAttribute('data-loaded', true);
var ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing';
ring.appendChild(canvas);
@ -1288,6 +1295,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
};
window.addEventListener('load', function webViewerLoad(evt) {
PDFView.init();
var params = PDFView.parseQueryString(document.location.search.substring(1));
var file = PDFJS.isFirefoxExtension ?
@ -1322,11 +1330,20 @@ window.addEventListener('load', function webViewerLoad(evt) {
var thumbsView = document.getElementById('thumbnailView');
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',
function() {
this.classList.toggle('toggled');
document.getElementById('toolbarSidebar').classList.toggle('hidden');
document.getElementById('sidebarContainer').classList.toggle('hidden');
console.log('toggling');
document.getElementById('outerContainer').classList.toggle('sidebarOpen');
updateThumbViewArea();
});