sidebar toggle working
This commit is contained in:
Artur Adib
parent
324ea1d743
commit
c8695cfa0a
@ -31,12 +31,17 @@ body {
|
||||
background-color: hsla(0,0%,0%,.1);
|
||||
box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
|
||||
overflow: auto;
|
||||
padding-top: 33px;
|
||||
}
|
||||
#sidebarContainer.hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#viewerContainer {
|
||||
-moz-box-flex: 1;
|
||||
height: 100%;
|
||||
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@ -65,6 +70,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;
|
||||
@ -237,7 +245,7 @@ body {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.toolbarButton.sidebarToggle::before {
|
||||
.toolbarButton#sidebarToggle::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-sidebarToggle.png);
|
||||
}
|
||||
@ -337,65 +345,26 @@ body {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: -27px;
|
||||
-moz-user-select:none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.viewerImage {
|
||||
/* width: 50%; */
|
||||
margin: 80px 20px 20px;
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,0%,.5),
|
||||
0 2px 8px hsla(0,0%,0%,.3);
|
||||
|
||||
}
|
||||
|
||||
|
||||
#thumbnailView {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
padding: 51px 40px 0;
|
||||
padding: 10px 40px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 150px;
|
||||
|
||||
/*
|
||||
width: 98px;
|
||||
height: 128px;
|
||||
margin: 0 10px 20px;
|
||||
background-color: white;
|
||||
background-image: url(images/thumbnail.png);
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,0%,.5),
|
||||
0 2px 8px hsla(0,0%,0%,.3);
|
||||
opacity: .8;
|
||||
-moz-transition-duration: 150ms;
|
||||
*/
|
||||
width: 134px;
|
||||
height: 134px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
line-height: 134px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnailImage {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 98px;
|
||||
height: 128px;
|
||||
/* background-image: url(images/thumbnail.png);*/
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,0%,.5),
|
||||
0 2px 8px hsla(0,0%,0%,.3);
|
||||
opacity: .8;
|
||||
z-index: 99;
|
||||
-moz-transition-duration: 150ms;
|
||||
}
|
||||
.thumbnailSelectionRing {
|
||||
position: absolute;
|
||||
width: 112px;
|
||||
@ -441,6 +410,9 @@ body {
|
||||
padding: 52px 4px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
#outlineView.hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.outlineEntry {
|
||||
width: -moz-calc(100% - 8px);
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
|
||||
<div class="toolbar">
|
||||
<div id="toolbarContainer">
|
||||
<div id="toolbarSidebar">
|
||||
<div id="toolbarSidebar" class="hidden">
|
||||
<div class="splitToolbarButton toggled">
|
||||
<div class="toolbarButton viewThumbnail toggled" title="Show Thumbnails"></div>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
@ -49,7 +49,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbarViewer">
|
||||
<div class="toolbarButton sidebarToggle toggled" title="Toggle Sidebar"></div>
|
||||
<div id="sidebarToggle" class="toolbarButton toggled" title="Toggle Sidebar"></div>
|
||||
<div class="toolbarButtonSpacer"></div>
|
||||
<div class="splitToolbarButton">
|
||||
<div class="toolbarButton pageUp" title="Previous Page"></div>
|
||||
@ -74,30 +74,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebarContainer">
|
||||
<div id="sidebarContainer" class="hidden">
|
||||
<div id="thumbnailView">
|
||||
<div class="thumbnail selected">
|
||||
<div class="thumbnailImage"></div>
|
||||
<div class="thumbnailSelectionRing"></div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<div class="thumbnailImage"></div>
|
||||
<div class="thumbnailSelectionRing"></div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<div class="thumbnailImage"></div>
|
||||
<div class="thumbnailSelectionRing"></div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<div class="thumbnailImage"></div>
|
||||
<div class="thumbnailSelectionRing"></div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<div class="thumbnailImage"></div>
|
||||
<div class="thumbnailSelectionRing"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outlineView">
|
||||
|
||||
<div id="outlineView" class="hidden">
|
||||
<div class="outlineEntry selected">Page 1</div>
|
||||
<div class="outlineEntry">Page 2</div>
|
||||
<div class="outlineEntry">Page 3</div>
|
||||
@ -113,6 +94,12 @@
|
||||
</div> <!-- outerContainer -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ................ OLD ................ -->
|
||||
|
||||
|
||||
<div style="display:none;">
|
||||
|
||||
<div id="controls">
|
||||
@ -199,7 +186,7 @@
|
||||
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<!-- <div id="sidebar">
|
||||
<div id="sidebarBox">
|
||||
<div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
|
||||
<div id="sidebarScrollView">
|
||||
@ -218,7 +205,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
<div id="loadingBox">
|
||||
<div id="loading">Loading... 0%</div>
|
||||
<div id="loadingBar"><div class="progress"></div></div>
|
||||
|
||||
@ -476,14 +476,14 @@ var PDFView = {
|
||||
var loadingBox = document.getElementById('loadingBox');
|
||||
loadingBox.setAttribute('hidden', 'true');
|
||||
|
||||
var sidebar = document.getElementById('sidebarView');
|
||||
sidebar.parentNode.scrollTop = 0;
|
||||
var thumbsView = document.getElementById('thumbnailView');
|
||||
thumbsView.parentNode.scrollTop = 0;
|
||||
|
||||
while (sidebar.hasChildNodes())
|
||||
sidebar.removeChild(sidebar.lastChild);
|
||||
while (thumbsView.hasChildNodes())
|
||||
thumbsView.removeChild(thumbsView.lastChild);
|
||||
|
||||
if ('_loadingInterval' in sidebar)
|
||||
clearInterval(sidebar._loadingInterval);
|
||||
if ('_loadingInterval' in thumbsView)
|
||||
clearInterval(thumbsView._loadingInterval);
|
||||
|
||||
var container = document.getElementById('viewer');
|
||||
while (container.hasChildNodes())
|
||||
@ -518,7 +518,7 @@ var PDFView = {
|
||||
var page = pdf.getPage(i);
|
||||
var pageView = new PageView(container, page, i, page.width, page.height,
|
||||
page.stats, this.navigateTo.bind(this));
|
||||
var thumbnailView = new ThumbnailView(sidebar, page, i,
|
||||
var thumbnailView = new ThumbnailView(thumbsView, page, i,
|
||||
page.width / page.height);
|
||||
bindOnAfterDraw(pageView, thumbnailView);
|
||||
|
||||
@ -618,7 +618,7 @@ var PDFView = {
|
||||
},
|
||||
|
||||
switchSidebarView: function pdfViewSwitchSidebarView(view) {
|
||||
var thumbsScrollView = document.getElementById('sidebarScrollView');
|
||||
var thumbsScrollView = document.getElementById('thumbnailView');
|
||||
var outlineScrollView = document.getElementById('outlineScrollView');
|
||||
var thumbsSwitchButton = document.getElementById('thumbsSwitch');
|
||||
var outlineSwitchButton = document.getElementById('outlineSwitch');
|
||||
@ -639,10 +639,6 @@ var PDFView = {
|
||||
}
|
||||
},
|
||||
|
||||
pinSidebar: function pdfViewPinSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('pinned');
|
||||
},
|
||||
|
||||
getVisiblePages: function pdfViewGetVisiblePages() {
|
||||
var pages = this.pages;
|
||||
var kBottomMargin = 10;
|
||||
@ -674,9 +670,10 @@ var PDFView = {
|
||||
var kBottomMargin = 5;
|
||||
var visibleThumbs = [];
|
||||
|
||||
var view = document.getElementById('sidebarScrollView');
|
||||
var view = document.getElementById('thumbnailView');
|
||||
var currentHeight = kBottomMargin;
|
||||
var top = view.scrollTop;
|
||||
|
||||
for (var i = 1; i <= thumbs.length; ++i) {
|
||||
var thumb = thumbs[i - 1];
|
||||
var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin;
|
||||
@ -687,6 +684,7 @@ var PDFView = {
|
||||
}
|
||||
|
||||
var bottom = top + view.clientHeight;
|
||||
|
||||
for (; i <= thumbs.length && currentHeight < bottom; ++i) {
|
||||
var singleThumb = thumbs[i - 1];
|
||||
visibleThumbs.push({ id: singleThumb.id, y: currentHeight,
|
||||
@ -1268,8 +1266,15 @@ window.addEventListener('load', function webViewerLoad(evt) {
|
||||
PDFBug.init();
|
||||
}
|
||||
|
||||
var sidebarScrollView = document.getElementById('sidebarScrollView');
|
||||
sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
|
||||
var thumbsView = document.getElementById('thumbnailView');
|
||||
thumbsView.addEventListener('scroll', updateThumbViewArea, true);
|
||||
|
||||
document.getElementById('sidebarToggle').addEventListener('click',
|
||||
function() {
|
||||
document.getElementById('toolbarSidebar').classList.toggle('hidden');
|
||||
document.getElementById('sidebarContainer').classList.toggle('hidden');
|
||||
updateThumbViewArea();
|
||||
});
|
||||
}, true);
|
||||
|
||||
/**
|
||||
@ -1368,9 +1373,6 @@ function updateThumbViewArea() {
|
||||
}, delay);
|
||||
}
|
||||
|
||||
window.addEventListener('transitionend', updateThumbViewArea, true);
|
||||
window.addEventListener('webkitTransitionEnd', updateThumbViewArea, true);
|
||||
|
||||
window.addEventListener('resize', function webViewerResize(evt) {
|
||||
if (document.getElementById('pageWidthOption').selected ||
|
||||
document.getElementById('pageFitOption').selected ||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user