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: Points on images now work

Browse Source
This commit is contained in:
Kovid Goyal 2012-01-07 21:04:17 +05:30
parent 34fbeef2a3
commit 383f2c62e2
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,19 +71,25 @@ get_current_time = (target) -> # {{{
fstr(ans) fstr(ans)
# }}} # }}}
viewport_to_document = (x, y, doc) -> # {{{ window_scroll_pos = (win) -> # {{{
win = doc.defaultView
if typeof(win.pageXOffset) == 'number' if typeof(win.pageXOffset) == 'number'
x += win.pageXOffset x = win.pageXOffset
y += win.pageYOffset y = win.pageYOffset
else # IE < 9 else # IE < 9
if document.body and ( document.body.scrollLeft or document.body.scrollTop ) if document.body and ( document.body.scrollLeft or document.body.scrollTop )
x += document.body.scrollLeft x = document.body.scrollLeft
y += document.body.scrollTop y = document.body.scrollTop
else if document.documentElement and ( document.documentElement.scrollLeft or document.documentElement.scrollTop) else if document.documentElement and ( document.documentElement.scrollLeft or document.documentElement.scrollTop)
y += document.documentElement.scrollTop y = document.documentElement.scrollTop
x += document.documentElement.scrollLeft x = document.documentElement.scrollLeft
return [x, y]
# }}}
viewport_to_document = (x, y, doc) -> # {{{
win = doc.defaultView
[wx, wy] = window_scroll_pos(win)
x += wx
y += wy
if doc != window.document if doc != window.document
# We are in a frame # We are in a frame
node = win.frameElement node = win.frameElement
@ -367,6 +373,7 @@ class CanonicalFragmentIdentifier
# }}} # }}}
at: (x, y, doc=window?.document) -> # {{{ at: (x, y, doc=window?.document) -> # {{{
# x, y are in viewport co-ordinates
cdoc = doc cdoc = doc
target = null target = null
cwin = cdoc.defaultView cwin = cdoc.defaultView
@ -389,8 +396,9 @@ class CanonicalFragmentIdentifier
if not cd if not cd
break break
x = x + cwin.pageXOffset - target.offsetLeft rect = target.getBoundingClientRect()
y = y + cwin.pageYOffset - target.offsetTop x = x - rect.x
y = y - rect.y
cdoc = cd cdoc = cd
cwin = cdoc.defaultView cwin = cdoc.defaultView
@ -400,8 +408,9 @@ class CanonicalFragmentIdentifier
tail = "~" + get_current_time(target) tail = "~" + get_current_time(target)
if name in ['img', 'video'] if name in ['img', 'video']
px = ((x + cwin.scrollX - target.offsetLeft)*100)/target.offsetWidth rect = target.getBoundingClientRect()
py = ((y + cwin.scrollY - target.offsetTop)*100)/target.offsetHeight px = ((x - rect.left)*100)/target.offsetWidth
py = ((y - rect.top)*100)/target.offsetHeight
tail = "#{ tail }@#{ fstr px },#{ fstr py }" tail = "#{ tail }@#{ fstr px },#{ fstr py }"
else if name != 'audio' else if name != 'audio'
# Get the text offset # Get the text offset
@ -532,12 +541,12 @@ class CanonicalFragmentIdentifier
node.scrollIntoView() node.scrollIntoView()
fn = -> fn = ->
rect = node.getBoundingClientRect() r = node.getBoundingClientRect()
[x, y] = viewport_to_document(rect.left, rect.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 += (r.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 += (r.y*node.offsetHeight)/100 y += (point.y*node.offsetHeight)/100
scrollTo(x, y) scrollTo(x, y)
if callback if callback
callback(x, y) callback(x, y)

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

@ -50,7 +50,7 @@
<p><a id="reset" href="/">Reset CFI to None</a></p> <p><a id="reset" href="/">Reset CFI to None</a></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</p> bold and not bold text as well as different points on the image</p>
<div id="overflow">But I must explain to you how all this mistaken <div id="overflow">But I must explain to you how all this mistaken
idea of denouncing pleasure and praising pain was born and I idea of denouncing pleasure and praising pain was born and I
will give you a complete account of the system, and expound the will give you a complete account of the system, and expound the
@ -71,6 +71,8 @@
righteous indignation and dislike men who are so beguiled and righteous indignation and dislike men who are so beguiled and
demoralized by the charms of pleasure of the moment, so blinded demoralized by the charms of pleasure of the moment, so blinded
by desire, that they cannot foresee by desire, that they cannot foresee
<img src="marker.png" width="150" height="200" alt="Test Image" style="border: solid 1px black; display:block"/>
</div> </div>
<h2>Some entities and comments</h2> <h2>Some entities and comments</h2>
<p>Entities: &amp; &copy; &sect; &gt; some text after entities</p> <p>Entities: &amp; &copy; &sect; &gt; some text after entities</p>
@ -108,6 +110,10 @@
tags, all </span> mixed together</span>. <span>Click all</span> tags, all </span> mixed together</span>. <span>Click all</span>
over this paragraph to test<span> things.</span></p> over this paragraph to test<span> things.</span></p>
<h2>Images</h2>
<p>Try clicking at different points along the image. Also try changing the magnification and then hitting reload.</p>
<img src="marker.png" width="150" height="200" alt="Test Image" style="border: solid 1px black"/>
</div> </div>
<img id="marker" style="position: absolute; display:none; 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> </body>