diff --git a/web/viewer.css b/web/viewer.css index e18d9681e..18da0b3d1 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -20,6 +20,7 @@ body { top: 0px; height: 40px; width: 100%; + z-index: 1; } .separator { @@ -67,6 +68,7 @@ span#info { 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:hover { @@ -180,6 +182,20 @@ canvas { width: 816px; height: 1056px; margin: 10px auto; + position:relative; +} + +.page > a { + display: block; + position: absolute; +} + +.page > a:hover { + opacity: 0.2; + background: #ff0; + box-shadow: 0px 2px 10px #ff0; + -moz-box-shadow: 0px 2px 10px #ff0; + -webkit-box-shadow: 0px 2px 10px #ff0; } #viewer { diff --git a/web/viewer.js b/web/viewer.js index a16cd76b1..8af6e01d1 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -212,39 +212,24 @@ var PageView = function(container, content, id, width, height, }; function setupLinks(canvas, content, scale) { + function bindLink(link, dest) { + if (dest) { + link.onclick = function() { + PDFView.navigateTo(dest); + return false; + }; + } + } var links = content.getLinks(); - var currentLink = null; - if (links.length > 0) { - canvas.addEventListener('mousemove', function(e) { - var x = e.pageX; - var y = e.pageY; - for (var p = canvas; p; p = p.offsetParent) { - x -= p.offsetLeft; - y -= p.offsetTop; - } - x /= scale; - y /= scale; - var i, n = links.length; - for (i = 0; i < n; i++) { - var link = links[i]; - if (link.x <= x && link.y <= y && - x < link.x + link.width && y < link.y + link.height) { - currentLink = link; - canvas.style.cursor = 'pointer'; - return; - } - } - currentLink = null; - canvas.style.cursor = 'default'; - }, false); - canvas.addEventListener('mousedown', function(e) { - if (!currentLink) - return; - if (currentLink.url) - window.location.href = currentLink.url; - if (currentLink.dest) - navigateTo(currentLink.dest); - }, false); + for (var i = 0; i < links.length; i++) { + var link = document.createElement('a'); + link.style.left = Math.floor(links[i].x * scale) + 'px'; + link.style.top = Math.floor(links[i].y * scale) + 'px'; + link.style.width = Math.ceil(links[i].width * scale) + 'px'; + link.style.height = Math.ceil(links[i].height * scale) + 'px'; + link.href = links[i].url || ''; + bindLink(link, links[i].dest); + div.appendChild(link); } }