This commit is contained in:
Kovid Goyal 2012-01-05 19:01:01 +05:30
parent 436d604f1c
commit 5b147cd745
3 changed files with 31 additions and 28 deletions

View File

@ -6,6 +6,10 @@
Released under the GPLv3 License
Based on code originally written by Peter Sorotkin
(http://code.google.com/p/epub-revision/source/browse/trunk/src/samples/cfi/epubcfi.js)
Improvements with respect to that code:
1. Works on all browsers (WebKit, Firefox and IE >= 8)
2. Works if the point is after the last text character in an element
3. Works for elements that are scrollable (i.e. have their own scrollbars)
To check if this script is compatible with the current browser, call
window.cfi.is_compatible() it will throw an exception if not compatible.
@ -470,7 +474,12 @@ class CanonicalFragmentIdentifier
x = (point.a*rect.left + (1-point.a)*rect.right)
y = (rect.top + rect.bottom)/2
[x, y] = viewport_to_document(x, y, ndoc)
span.outerHTML = span.innerHTML
tn = if span.firstChild then span.firstChild.nodeValue else ''
tn = ndoc.createTextNode(tn)
p = span.parentNode
p.insertBefore(tn, span)
p.removeChild(span)
p.normalize()
if callback
callback(x, y)
else

View File

@ -13,47 +13,42 @@ log = (error) ->
else if process?.stdout?.write
process.stdout.write(error + '\n')
viewport_top = (node) ->
$(node).offset().top - window.pageYOffset
viewport_left = (node) ->
$(node).offset().left - window.pageXOffset
show_cfi = (dont_seek) ->
show_cfi = () ->
if window.current_cfi
fn = (x, y) ->
ms = $("#marker")
ms.css('visibility', 'visible')
# This strange sequence is needed to get it to work in Chrome
# when called from the onload handler
ms.offset({left:x-1, top:y-30})
ms.offset()
ms.offset({left:x-1, top:y-30})
ms = document.getElementById("marker").style
ms.display = 'block'
ms.top = y - 30 + 'px'
ms.left = x - 1 + 'px'
window.cfi.scroll_to(window.current_cfi, fn)
null
mark_and_reload = (evt) ->
window.current_cfi = window.cfi.at(evt.clientX, evt.clientY)
if window.current_cfi
fn = () ->
# Remove image in case the click was on the image itself, we want the cfi to
# be on the underlying element
ms = document.getElementById("marker")
ms.parentNode.removeChild(ms)
fn = () ->
window.current_cfi = window.cfi.at(evt.clientX, evt.clientY)
if window.current_cfi
epubcfi = "#epubcfi(#{ window.current_cfi })"
newloc = window.location.href.replace(/#.*$/, '') + epubcfi
window.location.replace(newloc)
document.getElementById('current-cfi').innerHTML = window.current_cfi
window.location.reload()
setTimeout(fn, 1)
setTimeout(fn, 1)
null
window.onload = ->
window.onscroll = show_cfi
window.onresize = show_cfi
try
window.cfi.is_compatible()
catch error
alert(error)
return
document.onclick = mark_and_reload
for iframe in document.getElementsByTagName("iframe")
iframe.contentWindow.onscroll = show_cfi
r = location.hash.match(/#epubcfi\((.+)\)$/)
if r
window.current_cfi = r[1]

View File

@ -3,7 +3,6 @@
<head>
<title>Testing CFI functionality</title>
<script type="text/javascript" src="cfi.coffee"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cfi-test.coffee"></script>
<style type="text/css">
body { font-family: sans-serif }
@ -35,7 +34,7 @@
<body>
<div id="container">
<h1 id="first-h1">Testing EPUB CFI</h1>
<div>Current CFI:&nbsp;<span id="current-cfi">None</span></div>
<div id="current-cfi">Current CFI:&nbsp;None</div>
<h2>A div with scrollbars</h2>
<div id="overflow"> But I must explain to you how all this mistaken
idea of denouncing pleasure and praising pain was born and I
@ -59,7 +58,7 @@
by desire, that they cannot foresee
</div>
</div>
<img id="marker" style="position: absolute; visibility: hidden; z-index:10" src="marker.png" alt="Marker" />
<img id="marker" style="position: absolute; display:none; z-index:10" src="marker.png" alt="Marker" />
</body>
</html>