]> git.parisson.com Git - pdf.js.git/commitdiff
projects / pdf.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 51d831e)
Quick & dirty sidebar pinning.
authorgigaherz <gigaherz@gmail.com>
Sat, 4 Feb 2012 20:13:12 +0000 (21:13 +0100)
committergigaherz <gigaherz@gmail.com>
Sat, 4 Feb 2012 20:13:12 +0000 (21:13 +0100)
web/images/pin_down.png [new file with mode: 0644] patch | blob
web/images/pin_up.png [new file with mode: 0644] patch | blob
web/viewer.css patch | blob | history
web/viewer.html patch | blob | history

diff --git a/web/images/pin_down.png b/web/images/pin_down.png
new file mode 100644 (file)
index 0000000..06c985b
Binary files /dev/null and b/web/images/pin_down.png differ
diff --git a/web/images/pin_up.png b/web/images/pin_up.png
new file mode 100644 (file)
index 0000000..aff30c1
Binary files /dev/null and b/web/images/pin_up.png differ
diff --git a/web/viewer.css b/web/viewer.css
index 681e5046a61cd1127b0e1f83e9c142e27ddc6761..e8071a5ce3175426267caadf274a530772b1476b 100644 (file)
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -76,11 +76,15 @@ span#info {
 }
 
 /* === Sidebar === */
+
 #sidebar {
   position: fixed;
   width: 350px;
   top: 62px;
   bottom: 18px;
+}
+
+#sidebar.released {
   left: -290px;
   transition: left 0.25s ease-in-out 1s;
   -o-transition: left 0.25s ease-in-out 1s;
@@ -89,7 +93,8 @@ span#info {
   z-index: 1;
 }
 
-#sidebar:hover {
+#sidebar.pinned,
+#sidebar.released:hover {
   left: 0px;
   transition: left 0.25s ease-in-out 0s;
   -o-transition: left 0.25s ease-in-out 0s;
@@ -97,6 +102,22 @@ span#info {
   -webkit-transition: left 0.25s ease-in-out 0s;
 }
 
+#pinIcon {
+       position: absolute;
+       top: 4px;
+       right: 56px;
+       width: 11px;
+       height: 12px;
+}
+
+#pinIcon.released {
+       background-image: url('images/pin_up.png');
+}
+
+#pinIcon.pinned {
+       background-image: url('images/pin_down.png');
+}
+
 #sidebarBox {
   background-color: rgba(0, 0, 0, 0.7);
   width: 300px;
@@ -116,7 +137,7 @@ span#info {
   position: absolute;
   overflow: hidden;
   overflow-y: auto;
-  top: 10px;
+  top: 20px;
   bottom: 10px;
   left: 10px;
   width: 280px;
@@ -382,4 +403,4 @@ canvas {
 #loading {
        margin: 100px 0;
        text-align: center;
-}
+}
\ No newline at end of file
diff --git a/web/viewer.html b/web/viewer.html
index 7c55ec7350caff7fa5aee1db2073ae18af7f6c39..c9a35816f3b5bc545cb9a53bf916ace259e9cc1b 100644 (file)
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -33,6 +33,45 @@
         <script type="text/javascript" src="viewer.js"></script>
 
     </head>
+       
+       
+       <script type="text/javascript">
+       
+       function pinCleanup() {
+               var sidebarClass = document.getElementById("sidebar").className;
+               sidebarClass = sidebarClass.replace( /(?:^|\s)released(?!\S)/ , '' );
+               sidebarClass = sidebarClass.replace( /(?:^|\s)pinned(?!\S)/ , '' );     
+               document.getElementById("sidebar").className = sidebarClass;
+               
+               var iconClass = document.getElementById("pinIcon").className;
+               iconClass = iconClass.replace( /(?:^|\s)released(?!\S)/ , '' );
+               iconClass = iconClass.replace( /(?:^|\s)pinned(?!\S)/ , '' );   
+               document.getElementById("pinIcon").className = iconClass;
+       }
+       
+       function pinActivate() {
+               pinCleanup();
+               
+               document.getElementById("sidebar").className = (document.getElementById("sidebar").className + " pinned").trim();
+               document.getElementById("pinIcon").className = (document.getElementById("pinIcon").className + " pinned").trim();
+       }
+
+       function pinDeactivate() {
+               pinCleanup();
+               
+               document.getElementById("sidebar").className = (document.getElementById("sidebar").className + " released").trim();
+               document.getElementById("pinIcon").className = (document.getElementById("pinIcon").className + " released").trim();     
+       }
+       
+       function pinToggle() {
+               var iconClass = document.getElementById("pinIcon").className;
+               if(iconClass == "pinned")
+                       pinDeactivate();
+               else
+                       pinActivate();
+       }
+
+       </script>
 
   <body>
     <div id="controls">
@@ -120,9 +159,10 @@
       <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
     </div>
 
-    <div id="sidebar">
+    <div id="sidebar" class="released">
       <div id="sidebarBox">
-        <div id="sidebarScrollView">
+           <div id="pinIcon" class="released" onClick="javascript:pinToggle()"></div>
+           <div id="sidebarScrollView">
           <div id="sidebarView"></div>
         </div>
         <div id="outlineScrollView" hidden='true'>
Unnamed repository; edit this file 'description' to name the repository.