fix clicking coordinates

[peach-html5-editor.git] / editor.coffee

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}>"]