Move code to the right place and give it a better style.

Highlight the background on hover.
13 years ago · 14eae7cb9f
3 changed files with 29 additions and 44 deletions
--- a/web/viewer.css
+++ b/web/viewer.css
@ -82,6 +82,7 @@ span#info {
				@@ -82,6 +82,7 @@ span#info {
  width: 350px;
  top: 62px;
  bottom: 18px;
+  z-index: 1;
 }

 #sidebar.released {
@ -90,7 +91,6 @@ span#info {
				@@ -90,7 +91,6 @@ span#info {
  -o-transition: left 0.25s ease-in-out 1s;
  -moz-transition: left 0.25s ease-in-out 1s;
  -webkit-transition: left 0.25s ease-in-out 1s;
-  z-index: 1;
 }

 #sidebar.pinned,
@ -105,9 +105,14 @@ span#info {
				@@ -105,9 +105,14 @@ span#info {
 #pinIcon {
 	position: absolute;
 	top: 4px;
-	right: 56px;
-	width: 11px;
-	height: 12px;
+	right: 55px;
+	width: 15px;
+	height: 15px;
+	background: center no-repeat;
+}
+
+#pinIcon:hover {
+	background-color: rgba(255,255,255,0.35);
 }

 #pinIcon.released {
--- a/web/viewer.html
+++ b/web/viewer.html
@ -34,45 +34,6 @@
				@@ -34,45 +34,6 @@

    </head>
 	
-	
-	<script type="text/javascript">
-	
-	function pinCleanup(sidebar, pinIcon) {
-		sidebar.className = sidebar.className.replace( /(?:^|\s)released(?!\S)/ , '' );
-		sidebar.className = sidebar.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );		
-		pinIcon.className = pinIcon.className.replace( /(?:^|\s)released(?!\S)/ , '' );
-		pinIcon.className = pinIcon.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );
-	}
-	
-	function pinActivate(sidebar, pinIcon) {		
-		sidebar.className += " pinned";
-		pinIcon.className += " pinned";
-	}
-
-	function pinDeactivate(sidebar, pinIcon) {		
-		sidebar.className += " released";
-		pinIcon.className += " released";	
-	}
-	
-	function pinToggle() {
-		var sidebar = document.getElementById("sidebar");
-		var pinIcon = document.getElementById("pinIcon");
-		
-		var pinState = pinIcon.className;
-		
-		pinCleanup(sidebar, pinIcon);
-		
-		if (pinState == "pinned")
-			pinDeactivate(sidebar, pinIcon);
-		else
-			pinActivate(sidebar, pinIcon);
-
-		sidebar.className = sidebar.className.trim();
-		pinIcon.className = pinIcon.className.trim();
-	}
-
-	</script>
-
  <body>
    <div id="controls">
      <button id="previous" onclick="PDFView.page--;" oncontextmenu="return false;">
@ -161,7 +122,7 @@
				@@ -161,7 +122,7 @@

    <div id="sidebar" class="released">
      <div id="sidebarBox">
-	    <div id="pinIcon" class="released" onClick="javascript:pinToggle()"></div>
+	    <div id="pinIcon" class="released" onClick="PDFView.pinSidebar()"></div>
 	    <div id="sidebarScrollView">
          <div id="sidebarView"></div>
        </div>
--- a/web/viewer.js
+++ b/web/viewer.js
@ -170,6 +170,7 @@ var PDFView = {
				@@ -170,6 +170,7 @@ var PDFView = {
  currentScale: kUnknownScale,
  currentScaleValue: null,
  initialBookmark: document.location.hash.substring(1),
+  pinState: false,

  setScale: function pdfViewSetScale(val, resetAutoSettings) {
    if (val == this.currentScale)
@ -572,6 +573,24 @@ var PDFView = {
				@@ -572,6 +573,24 @@ var PDFView = {
        break;
    }
  },
+  
+  pinSidebar: function pdfViewPinSidebar() {
+  
+    var sidebar = document.getElementById("sidebar");
+    var pinIcon = document.getElementById("pinIcon");
+
+    sidebar.className = sidebar.className.replace( /(?:^|\s)released(?!\S)/ , '' );
+    sidebar.className = sidebar.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );
+    pinIcon.className = pinIcon.className.replace( /(?:^|\s)released(?!\S)/ , '' );
+    pinIcon.className = pinIcon.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );
+    
+    var newClass = this.pinState ? " pinned" : " released";
+    
+    sidebar.className += newClass;
+    pinIcon.className += newClass;
+    
+    this.pinState = !this.pinState;
+  },

  getVisiblePages: function pdfViewGetVisiblePages() {
    var pages = this.pages;