sidebar toggle working

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;
+  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 {
   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);

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>

web/viewer.js

@@ -476,14 +476,14 @@ var PDFView = {
     var loadingBox = document.getElementById('loadingBox');
     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');
     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');
+  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);
 
 /**
@@ -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 ||