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

Highlight the background on hover.
This commit is contained in:
gigaherz 2012-02-07 09:23:23 +01:00
parent 6bb14af71c
commit 14eae7cb9f
3 changed files with 29 additions and 44 deletions

View File

@ -82,6 +82,7 @@ span#info {
width: 350px;
top: 62px;
bottom: 18px;
z-index: 1;
}
#sidebar.released {
@ -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 {
#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 {

View File

@ -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 @@
<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>

View File

@ -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 = {
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;