Cutlery/calibre
1
0
Fork 0
mirror of https://github.com/kovidgoyal/calibre.git synced 2025-07-09 03:04:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

EPUB CFI: at_current() works

Browse Source
This commit is contained in:
Kovid Goyal 2012-01-25 13:02:40 +05:30
parent bc4ff3e011
commit df246b0979
3 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/calibre/ebooks/oeb/display/cfi.coffee
View File

@ -579,29 +579,30 @@ class CanonicalFragmentIdentifier
get_cfi = (ox, oy) -> get_cfi = (ox, oy) ->
try try
cfi = this.at(ox, oy) cfi = window.cfi.at(ox, oy)
point = this.point(cfi) point = window.cfi.point(cfi)
catch err catch err
cfi = null cfi = null
if point.range != null if cfi
r = point.range if point.range != null
rect = r.getClientRects()[0] r = point.range
rect = r.getClientRects()[0]
x = (point.a*rect.left + (1-point.a)*rect.right) x = (point.a*rect.left + (1-point.a)*rect.right)
y = (rect.top + rect.bottom)/2 y = (rect.top + rect.bottom)/2
[x, y] = viewport_to_document(x, y, r.startContainer.ownerDocument) [x, y] = viewport_to_document(x, y, r.startContainer.ownerDocument)
else else
node = point.node node = point.node
r = node.getBoundingClientRect() r = node.getBoundingClientRect()
[x, y] = viewport_to_document(r.left, r.top, node.ownerDocument) [x, y] = viewport_to_document(r.left, r.top, node.ownerDocument)
if typeof(point.x) == 'number' and node.offsetWidth if typeof(point.x) == 'number' and node.offsetWidth
x += (point.x*node.offsetWidth)/100 x += (point.x*node.offsetWidth)/100
if typeof(point.y) == 'number' and node.offsetHeight if typeof(point.y) == 'number' and node.offsetHeight
y += (point.y*node.offsetHeight)/100 y += (point.y*node.offsetHeight)/100
if dist(viewport_to_document(ox, oy), [x, y]) > 50 if dist(viewport_to_document(ox, oy), [x, y]) > 50
cfi = null cfi = null
return cfi return cfi

17
src/calibre/ebooks/oeb/display/test-cfi/cfi-test.coffee
View File

@ -30,18 +30,23 @@ window_ypos = (pos=null) ->
window.scrollTo(0, pos) window.scrollTo(0, pos)
mark_and_reload = (evt) -> mark_and_reload = (evt) ->
# Remove image in case the click was on the image itself, we want the cfi to
# be on the underlying element
x = evt.clientX x = evt.clientX
y = evt.clientY y = evt.clientY
if evt.button == 2 if evt.button == 2
return # Right mouse click, generated only in firefox return # Right mouse click, generated only in firefox
reset = document.getElementById('reset')
if document.elementFromPoint(x, y) == reset if document.elementFromPoint(x, y)?.getAttribute('id') in ['reset', 'viewport_mode']
return return
# 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 = document.getElementById("marker")
if ms ms.style.display = 'none'
ms.parentNode?.removeChild(ms)
if document.getElementById('viewport_mode').checked
cfi = window.cfi.at_current()
window.cfi.scroll_to(cfi)
return
fn = () -> fn = () ->
try try

9
src/calibre/ebooks/oeb/display/test-cfi/index.html
View File

@ -8,6 +8,7 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
background-color: white; background-color: white;
padding-bottom: 500px;
} }
h1, h2 { color: #005a9c } h1, h2 { color: #005a9c }
@ -48,7 +49,13 @@
<div id="container"> <div id="container">
<h1 id="first-h1">Testing cfi.coffee</h1> <h1 id="first-h1">Testing cfi.coffee</h1>
<p>Click anywhere and the location will be marked with a marker, whose position is set via a CFI.</p> <p>Click anywhere and the location will be marked with a marker, whose position is set via a CFI.</p>
<p><a id="reset" href="/">Reset CFI to None</a></p> <p>
<a id="reset" href="/">Reset CFI to None</a>
&nbsp;
Test viewport location calculation:
<input type="checkbox" id="viewport_mode" title=
"Checking this will cause the window to scroll to a position based on a CFI calculated for the windows current position."/>
</p>
<h2>A div with scrollbars</h2> <h2>A div with scrollbars</h2>
<p>Scroll down and click on some elements. Make sure to hit both <p>Scroll down and click on some elements. Make sure to hit both
bold and not bold text as well as different points on the image</p> bold and not bold text as well as different points on the image</p>