From c8695cfa0a182c264551702a3a7b5b3ecb93f3fe Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Thu, 12 Apr 2012 15:08:07 -0700
Subject: [PATCH] sidebar toggle working
---
web/viewer.css | 72 +++++++++++++++----------------------------------
web/viewer.html | 39 +++++++++------------------
web/viewer.js | 38 +++++++++++++-------------
3 files changed, 55 insertions(+), 94 deletions(-)
diff --git a/web/viewer.css b/web/viewer.css
index ac61a7943..8168b330e 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -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);
diff --git a/web/viewer.html b/web/viewer.html
index 001b0b04f..9f835b6ee 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -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>
diff --git a/web/viewer.js b/web/viewer.js
index 3587c96bd..5b47d2c66 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -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 ||