Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Quick & dirty sidebar pinning.

Browse Source
This commit is contained in:
gigaherz 2012-02-04 21:13:12 +01:00
parent 51d831ed03
commit a617aff425
4 changed files with 66 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/images/pin_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 B

BIN
web/images/pin_up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

27
web/viewer.css
View File

@ -76,11 +76,15 @@ span#info {
} }
/* === Sidebar === */ /* === Sidebar === */
#sidebar { #sidebar {
position: fixed; position: fixed;
width: 350px; width: 350px;
top: 62px; top: 62px;
bottom: 18px; bottom: 18px;
}
#sidebar.released {
left: -290px; left: -290px;
transition: left 0.25s ease-in-out 1s; transition: left 0.25s ease-in-out 1s;
-o-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; z-index: 1;
} }
#sidebar:hover { #sidebar.pinned,
#sidebar.released:hover {
left: 0px; left: 0px;
transition: left 0.25s ease-in-out 0s; transition: left 0.25s ease-in-out 0s;
-o-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; -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 { #sidebarBox {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
width: 300px; width: 300px;
@ -116,7 +137,7 @@ span#info {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
top: 10px; top: 20px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
width: 280px; width: 280px;
@ -382,4 +403,4 @@ canvas {
#loading { #loading {
margin: 100px 0; margin: 100px 0;
text-align: center; text-align: center;
} }

44
web/viewer.html
View File

@ -33,6 +33,45 @@
<script type="text/javascript" src="viewer.js"></script> <script type="text/javascript" src="viewer.js"></script>
</head> </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> <body>
<div id="controls"> <div id="controls">
@ -120,9 +159,10 @@
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea> <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div> </div>
<div id="sidebar"> <div id="sidebar" class="released">
<div id="sidebarBox"> <div id="sidebarBox">
<div id="sidebarScrollView"> <div id="pinIcon" class="released" onClick="javascript:pinToggle()"></div>
<div id="sidebarScrollView">
<div id="sidebarView"></div> <div id="sidebarView"></div>
</div> </div>
<div id="outlineScrollView" hidden='true'> <div id="outlineScrollView" hidden='true'>