partly implemented: click to place cursor

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

diff --git a/editor.coffee b/editor.coffee
index d4c0379..81ee87e 100644 (file)
--- a/editor.coffee
+++ b/editor.coffee
@@ -19,8 +19,20 @@ TYPE_TEXT = peach_parser.TYPE_TEXT
 TYPE_COMMENT = peach_parser.TYPE_COMMENT
 TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE
 
+# text nodes don't have getBoundingClientRect(), so wrap it in a span, measure
+# and then put it back
+get_text_bounding_rect = (el) ->
+       span = el.ownerDocument.createElement 'span'
+       el.parentNode.replaceChild span, el
+       span.appendChild el
+       ret = span.getBoundingClientRect()
+       span.parentNode.replaceChild el, span
+       return ret
 get_el_bounds = (el) ->
-       rect = el.getBoundingClientRect()
+       if el.getBoundingClientRect
+               rect = el.getBoundingClientRect()
+       else
+               rect = get_text_bounding_rect el
        doc = el.ownerDocument.documentElement
        win = el.ownerDocument.defaultView
        y_fix = win.pageYOffset - doc.clientTop
@@ -86,10 +98,6 @@ cursor_to_loc = (n, i) ->
                        ret = cursor_to_loc n, i - 1
        return ret
 
-# TODO
-#loc_to_cursor = (n, i) ->
-#      return top: , left:
-
 # encode text so it can be safely placed inside an html attribute
 enc_attr_regex = new RegExp '(&)|(")|(\u00A0)', 'g'
 enc_attr = (txt) ->
@@ -222,10 +230,10 @@ traverse_tree = (tree, state, cb) ->
        return state
 # find the next element in top (and decendants) that is after n and can contain text
 # TODO make it so cursor can go places that don't have text but could
-find_next_cursor_position = (top, n, i) ->
+find_next_cursor_position = (tree, n, i) ->
        if n? and n.type is TYPE_TEXT and n.text.length > i
                return [n, i + 1]
-       found = traverse_tree top, before: n?, (node, state) ->
+       found = traverse_tree tree, before: n?, (node, state) ->
                if node.type is TYPE_TEXT and state.before is false
                        state.node = node
                        state.done = true
@@ -236,10 +244,10 @@ find_next_cursor_position = (top, n, i) ->
        return null
 
 # TODO make it so cursor can go places that don't have text but could
-find_prev_cursor_position = (top, n, i) ->
+find_prev_cursor_position = (tree, n, i) ->
        if n? and n.type is TYPE_TEXT and i > 0
                return [n, i - 1]
-       found = traverse_tree top, before: n?, (node, state) ->
+       found = traverse_tree tree, before: n?, (node, state) ->
                if node.type is TYPE_TEXT
                        unless n?
                                state.node = node
@@ -254,6 +262,39 @@ find_prev_cursor_position = (top, n, i) ->
                return [found.node, found.node.text.length]
        return null
 
+find_loc_cursor_position = (tree, loc) ->
+       console.log tree, loc
+       for c in tree
+               if c.type is TYPE_TAG or c.type is TYPE_TEXT
+                       bounds = get_el_bounds c.el
+                       console.log bounds
+                       continue if loc.left < bounds.x
+                       continue if loc.left > bounds.x + bounds.w
+                       continue if loc.top < bounds.y
+                       continue if loc.top > bounds.y + bounds.h
+                       if c.type is TYPE_TEXT
+                               # click is within bounding box that contains all text.
+                               return [c, 0] if c.text.length is 0
+                               #if c.text.length is 1
+                                       # definitely no linebreak in it
+                                       #if loc
+                               #
+                               # for inline elements, this can include text in other tags on
+                               # the first or last lines.
+                               #
+                               # they clicked on text. now determine where in the text
+                               tries = {}
+                               cur = Math.floor(c.text.length / 2)
+                               #loop
+                               #       xy = tries[cur] = cursor_to_loc c, cur
+                               return [c, cur]
+                       if c.children.length
+                               console.log "in"
+                               ret = find_loc_cursor_position c.children, loc
+                               console.log 'found', ret if ret?
+                               return ret if ret?
+       return null
+
 class PeachHTML5Editor
        constructor: (in_el, options = {}) ->
                @in_el = in_el
@@ -293,6 +334,11 @@ class PeachHTML5Editor
                                '34': KEY_PAGE_DOWN
                                '9':  KEY_TAB
 
+                       @idoc.body.onclick = (e) =>
+                               # idoc.body.offset().left/top
+                               new_cursor = find_loc_cursor_position @tree, left: e.pageX, top: e.pageY
+                               if new_cursor?
+                                       @move_cursor new_cursor
                        @idoc.body.onkeyup = (e) =>
                                return if e.ctrlKey
                                return false if ignore_key_codes[e.keyCode]?