fix clicking coordinates

diff --git a/editor.coffee b/editor.coffee
index 2462650..6fa48cb 100644 (file)
--- a/editor.coffee
+++ b/editor.coffee
@@ -640,11 +640,13 @@ class PeachHTML5Editor
                @inited = false # when iframes have loaded
                @outer_iframe # iframe to hold editor
                @outer_idoc # "document" object for @outer_iframe
+               @wrap2 = null # scrollbar is on this
                @iframe = null # iframe to hold editable content
                @idoc = null # "document" object for @iframe
                @cursor = null
                @cursor_el = null
                @cursor_visible = false
+               @iframe_offset = null
                opt_fragment = @options.fragment ? true
                @parser_opts = {}
                if opt_fragment
@@ -666,7 +668,7 @@ class PeachHTML5Editor
                        setTimeout (=> @init() unless @inited), 200 # firefox never fires this onload
                        @outer_idoc.body.appendChild(
                                domify @outer_idoc, div: id: 'wrap1', children: [
-                                       domify @outer_idoc, div: id: 'wrap2', children: [
+                                       @wrap2 = domify @outer_idoc, div: id: 'wrap2', children: [
                                                domify @outer_idoc, div: id: 'wrap3', children: [
                                                        @iframe
                                                        @overlay = domify @outer_idoc, div: id: 'overlay'
@@ -704,10 +706,16 @@ class PeachHTML5Editor
                @inited = true
                if @options.on_init?
                        @options.on_init()
+       overlay_event_to_inner_xy: (e) ->
+               unless @iframe_offset?
+                       @iframe_offset = get_el_bounds @iframe
+               x = e.pageX # TODO ?cross-browserify
+               y = e.pageY + @wrap2.scrollTop # TODO ?cross-browserify
+               # TODO adjust for scrolling
+               return x: x - @iframe_offset.x, y: y - @iframe_offset.y
        onclick: (e) ->
-               x = (e.offsetX ? e.layerX) - overlay_padding
-               y = (e.offsetY ? e.layerY) - overlay_padding
-               new_cursor = find_loc_cursor_position @tree, x: x, y: y
+               xy = @overlay_event_to_inner_xy e
+               new_cursor = find_loc_cursor_position @tree, xy
                if new_cursor?
                        @move_cursor new_cursor
                return false
@@ -857,7 +865,7 @@ class PeachHTML5Editor
                        if bounds.x is prev_bounds.x and bounds.y is prev_bounds.y and bounds.w is prev_bounds.w and bounds.h is prev_bounds.h
                                n = n.parent
                                continue
-                       matt = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x + overlay_padding}px; top: #{bounds.y + overlay_padding}px; width: #{bounds.w}px; height: #{bounds.h}px; outline: 1000px solid rgba(0,153,255,#{alpha}); border: 1px solid rgba(0,0,0,.3)"
+                       matt = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x - 1 + overlay_padding}px; top: #{bounds.y - 1 + overlay_padding}px; width: #{bounds.w}px; height: #{bounds.h}px; outline: 1000px solid rgba(0,153,255,#{alpha}); border: 1px solid rgba(0,0,0,.1)"
                        @overlay.appendChild matt
                        @matting.push matt
                        ann = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x - 2 + overlay_padding}px; top: #{bounds.y - 6 + overlay_padding}px; font-size: 8px", children: [domify @outer_idoc, text: "<#{n.name}>"]

diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html
index 0b844e8..f91086a 100644 (file)
--- a/editor_tests_compiled.html
+++ b/editor_tests_compiled.html
@@ -22,7 +22,9 @@
        <h1>Peach HTML5 Editor test page (compiled version)</h1>
        <p>This version of the editor test page requires that you've compiled all the source files. (Just run <code>make</code>).</p>
        <form action="#" method="get">
-       <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">&lt;p&gt;  a b c d e f g h i j k l m n o p q r s t u v w x y z  a b c d e f g h i j k l m n o p q r s t u v w x y z                                                                a b c d e f g h i j k l m n o p q r s t u v w x y z  &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
+       <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">&lt;p&gt;  a b c      
+       d e f g h i j <a href="http://example.com">Click me!</a> o p q r&lt;/p>
+       &lt;p> y z     &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
 &lt;p style="white-space: pre-wrap"&gt;this &amp;lt;p&amp;gt; has     white-space: pre-wrap&lt;/p&gt;
 
 &lt;div&gt;