akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

sidebar toggle working

Artur Adib 13 years ago
parent
324ea1d743
commit
c8695cfa0a
3 changed files with 55 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      web/viewer.css
  2. 39
      web/viewer.html
  3. 38
      web/viewer.js

72
web/viewer.css
Unescape View File

@ -31,12 +31,17 @@ body {
background-color: hsla(0,0%,0%,.1); background-color: hsla(0,0%,0%,.1);
box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25); box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
overflow: auto; overflow: auto;
padding-top: 33px;
}
#sidebarContainer.hidden {
display:none;
} }
#viewerContainer { #viewerContainer {
-moz-box-flex: 1; -moz-box-flex: 1;
height: 100%; 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;
} }
.toolbar { .toolbar {
@ -65,6 +70,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; display: -moz-box;
@ -237,7 +245,7 @@ body {
min-width: 30px; min-width: 30px;
} }
.toolbarButton.sidebarToggle::before { .toolbarButton#sidebarToggle::before {
display: inline-block; display: inline-block;
content: url(images/toolbarButton-sidebarToggle.png); content: url(images/toolbarButton-sidebarToggle.png);
} }
@ -337,65 +345,26 @@ body {
cursor: default; 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 { #thumbnailView {
position: fixed; position: fixed;
width: 120px; width: 120px;
height: 100%; height: 100%;
padding: 51px 40px 0; padding: 10px 40px 0;
overflow: auto; overflow: auto;
} }
.thumbnail { .thumbnail {
position: relative; width: 134px;
float: left; height: 134px;
width: 120px; margin-top: 15px;
height: 150px; margin-bottom: 15px;
margin-left:auto;
/* margin-right:auto;
width: 98px; line-height: 134px;
height: 128px; text-align: center;
margin: 0 10px 20px; overflow: hidden;
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;
*/
} }
.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 { .thumbnailSelectionRing {
position: absolute; position: absolute;
width: 112px; width: 112px;
@ -441,6 +410,9 @@ body {
padding: 52px 4px 0; padding: 52px 4px 0;
overflow: auto; overflow: auto;
} }
#outlineView.hidden {
display:none;
}
.outlineEntry { .outlineEntry {
width: -moz-calc(100% - 8px); width: -moz-calc(100% - 8px);

39
web/viewer.html
Unescape View File

@ -41,7 +41,7 @@
<div class="toolbar"> <div class="toolbar">
<div id="toolbarContainer"> <div id="toolbarContainer">
<div id="toolbarSidebar"> <div id="toolbarSidebar" class="hidden">
<div class="splitToolbarButton toggled"> <div class="splitToolbarButton toggled">
<div class="toolbarButton viewThumbnail toggled" title="Show Thumbnails"></div> <div class="toolbarButton viewThumbnail toggled" title="Show Thumbnails"></div>
<div class="splitToolbarButtonSeparator"></div> <div class="splitToolbarButtonSeparator"></div>
@ -49,7 +49,7 @@
</div> </div>
</div> </div>
<div id="toolbarViewer"> <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="toolbarButtonSpacer"></div>
<div class="splitToolbarButton"> <div class="splitToolbarButton">
<div class="toolbarButton pageUp" title="Previous Page"></div> <div class="toolbarButton pageUp" title="Previous Page"></div>
@ -74,30 +74,11 @@
</div> </div>
</div> </div>
<div id="sidebarContainer"> <div id="sidebarContainer" class="hidden">
<div id="thumbnailView"> <div id="thumbnailView">
<div class="thumbnail selected">
<div class="thumbnailImage"></div>
<div class="thumbnailSelectionRing"></div>
</div> </div>
<div class="thumbnail">
<div class="thumbnailImage"></div> <div id="outlineView" class="hidden">
<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 class="outlineEntry selected">Page 1</div> <div class="outlineEntry selected">Page 1</div>
<div class="outlineEntry">Page 2</div> <div class="outlineEntry">Page 2</div>
<div class="outlineEntry">Page 3</div> <div class="outlineEntry">Page 3</div>
@ -113,6 +94,12 @@
</div> <!-- outerContainer --> </div> <!-- outerContainer -->
<!-- ................ OLD ................ -->
<div style="display:none;"> <div style="display:none;">
<div id="controls"> <div id="controls">
@ -199,7 +186,7 @@
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea> <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div> </div>
<div id="sidebar"> <!-- <div id="sidebar">
<div id="sidebarBox"> <div id="sidebarBox">
<div id="pinIcon" onClick="PDFView.pinSidebar()"></div> <div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
<div id="sidebarScrollView"> <div id="sidebarScrollView">
@ -218,7 +205,7 @@
</div> </div>
</div> </div>
</div> </div>
-->
<div id="loadingBox"> <div id="loadingBox">
<div id="loading">Loading... 0%</div> <div id="loading">Loading... 0%</div>
<div id="loadingBar"><div class="progress"></div></div> <div id="loadingBar"><div class="progress"></div></div>

38
web/viewer.js
Unescape View File

@ -476,14 +476,14 @@ var PDFView = {
var loadingBox = document.getElementById('loadingBox'); var loadingBox = document.getElementById('loadingBox');
loadingBox.setAttribute('hidden', 'true'); loadingBox.setAttribute('hidden', 'true');
var sidebar = document.getElementById('sidebarView'); var thumbsView = document.getElementById('thumbnailView');
sidebar.parentNode.scrollTop = 0; thumbsView.parentNode.scrollTop = 0;
while (sidebar.hasChildNodes()) while (thumbsView.hasChildNodes())
sidebar.removeChild(sidebar.lastChild); thumbsView.removeChild(thumbsView.lastChild);
if ('_loadingInterval' in sidebar) if ('_loadingInterval' in thumbsView)
clearInterval(sidebar._loadingInterval); clearInterval(thumbsView._loadingInterval);
var container = document.getElementById('viewer'); var container = document.getElementById('viewer');
while (container.hasChildNodes()) while (container.hasChildNodes())
@ -518,7 +518,7 @@ var PDFView = {
var page = pdf.getPage(i); var page = pdf.getPage(i);
var pageView = new PageView(container, page, i, page.width, page.height, var pageView = new PageView(container, page, i, page.width, page.height,
page.stats, this.navigateTo.bind(this)); page.stats, this.navigateTo.bind(this));
var thumbnailView = new ThumbnailView(sidebar, page, i, var thumbnailView = new ThumbnailView(thumbsView, page, i,
page.width / page.height); page.width / page.height);
bindOnAfterDraw(pageView, thumbnailView); bindOnAfterDraw(pageView, thumbnailView);
@ -618,7 +618,7 @@ var PDFView = {
}, },
switchSidebarView: function pdfViewSwitchSidebarView(view) { switchSidebarView: function pdfViewSwitchSidebarView(view) {
var thumbsScrollView = document.getElementById('sidebarScrollView'); var thumbsScrollView = document.getElementById('thumbnailView');
var outlineScrollView = document.getElementById('outlineScrollView'); var outlineScrollView = document.getElementById('outlineScrollView');
var thumbsSwitchButton = document.getElementById('thumbsSwitch'); var thumbsSwitchButton = document.getElementById('thumbsSwitch');
var outlineSwitchButton = document.getElementById('outlineSwitch'); var outlineSwitchButton = document.getElementById('outlineSwitch');
@ -639,10 +639,6 @@ var PDFView = {
} }
}, },
pinSidebar: function pdfViewPinSidebar() {
document.getElementById('sidebar').classList.toggle('pinned');
},
getVisiblePages: function pdfViewGetVisiblePages() { getVisiblePages: function pdfViewGetVisiblePages() {
var pages = this.pages; var pages = this.pages;
var kBottomMargin = 10; var kBottomMargin = 10;
@ -674,9 +670,10 @@ var PDFView = {
var kBottomMargin = 5; var kBottomMargin = 5;
var visibleThumbs = []; var visibleThumbs = [];
var view = document.getElementById('sidebarScrollView'); var view = document.getElementById('thumbnailView');
var currentHeight = kBottomMargin; var currentHeight = kBottomMargin;
var top = view.scrollTop; var top = view.scrollTop;
for (var i = 1; i <= thumbs.length; ++i) { for (var i = 1; i <= thumbs.length; ++i) {
var thumb = thumbs[i - 1]; var thumb = thumbs[i - 1];
var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin; var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin;
@ -687,6 +684,7 @@ var PDFView = {
} }
var bottom = top + view.clientHeight; var bottom = top + view.clientHeight;
for (; i <= thumbs.length && currentHeight < bottom; ++i) { for (; i <= thumbs.length && currentHeight < bottom; ++i) {
var singleThumb = thumbs[i - 1]; var singleThumb = thumbs[i - 1];
visibleThumbs.push({ id: singleThumb.id, y: currentHeight, visibleThumbs.push({ id: singleThumb.id, y: currentHeight,
@ -1268,8 +1266,15 @@ window.addEventListener('load', function webViewerLoad(evt) {
PDFBug.init(); PDFBug.init();
} }
var sidebarScrollView = document.getElementById('sidebarScrollView'); var thumbsView = document.getElementById('thumbnailView');
sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true); 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); }, true);
/** /**
@ -1368,9 +1373,6 @@ function updateThumbViewArea() {
}, delay); }, delay);
} }
window.addEventListener('transitionend', updateThumbViewArea, true);
window.addEventListener('webkitTransitionEnd', updateThumbViewArea, true);
window.addEventListener('resize', function webViewerResize(evt) { window.addEventListener('resize', function webViewerResize(evt) {
if (document.getElementById('pageWidthOption').selected || if (document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected || document.getElementById('pageFitOption').selected ||

Write Preview
Loading…
Cancel
Save