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: 0;
width: 200px;
+ -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;
+}
+#sidebarContainer.hidden {
+ 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);
- 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),
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),
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,
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%);
.toolbarButtonSpacer {
width: 30px;
+ display: inline-block;
+ height: 1px;
}
.toolbarButtonFlexibleSpacer {
}
.toolbarButton.bookmark {
- display: block;
}
.toolbarButton.bookmark::before {
- display: inline-block;
content: url(images/toolbarButton-bookmark.png);
}
height: 142px;
}
+.thumbnail:not([data-loaded]) {
+ border: 1px dashed rgba(255, 255, 255, 0.5);
+}
+
.thumbnailImage {
-moz-transition-duration: 150ms;
border: 1px solid transparent;
<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 id="sidebarContainer" class="hidden">
+ <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="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 id="outlineView" class="hidden">
</div>
</div>
- </div>
-
- <div id="sidebarContainer" class="hidden">
- <div id="thumbnailView">
+ </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 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 -->
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)
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);
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 });
};
window.addEventListener('load', function webViewerLoad(evt) {
+ PDFView.init();
var params = PDFView.parseQueryString(document.location.search.substring(1));
var file = PDFJS.isFirefoxExtension ?
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');
+ mainContainer.classList.toggle('sideBarOpen');
updateThumbViewArea();
});
projects / pdf.js.git / commitdiff