X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=e3b922e4a80ed78fadf11c3d5718a869daf4860d;hb=7eb32af0eb10fd084b9179b1a266bd5236caebc9;hp=e0cae205e5885fa574184f37c251feea138e7eaf;hpb=78a645242be2358e81bdf56a82c7fc3a4564e4d9;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index e0cae20..e3b922e 100644 --- a/editor.coffee +++ b/editor.coffee @@ -19,54 +19,84 @@ TYPE_TEXT = peach_parser.TYPE_TEXT TYPE_COMMENT = peach_parser.TYPE_COMMENT TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE -get_el_offset = (el) -> - rect = el.getBoundingClientRect() +# 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) -> + 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 + x_fix = win.pageXOffset - doc.clientLeft return { - top: rect.top + win.pageYOffset - doc.clientTop - left: rect.left + win.pageXOffset - doc.clientLeft + x: rect.left + x_fix + y: rect.top + y_fix + w: rect.width ? (rect.right - rect.left) + h: rect.height ? (rect.top - rect.bottom) } -# figure out the top/left coordinates of where the cursor should be if it's at +# figure out the x/y coordinates of where the cursor should be if it's at # position ``i`` within text node ``n`` # # implementation: insert a span tag where we want the cursor, and ask the # browser where it put that span -cursor_to_loc = (n, i) -> - span = domify span: style: "height: 1em" +window.cursor_to_xyh = cursor_to_xyh = (n, i) -> parent = n.el.parentNode - if i is 0 - # cursor at start of text - parent.insertBefore span, n.el - ret = get_el_offset span - span.parentNode.removeChild span - return ret - else if i is n.text.length - # cursor at end of text - parent.insertBefore span, n.el.nextSibling - ret = get_el_offset span - span.parentNode.removeChild span - return ret - # cursor in middle of text - # split the text node - t0 = n.el.ownerDocument.createTextNode n.text.substr 0, i - t1 = n.el.ownerDocument.createTextNode n.text.substr i - parent.insertBefore t0, n.el - parent.insertBefore span, n.el - parent.insertBefore t1, n.el - parent.removeChild n.el - ret = get_el_offset span - parent.insertBefore n.el, t0 - parent.removeChild t0 - parent.removeChild span - parent.removeChild t1 + els = [] + txts = [] + plus_width = false + if n.text.length < 2 + bounds = get_el_offset n.el + if i is 1 + plus_width = true + else + if i is 0 # cursor at start of text + check_i = 0 + txts.push n.text.substr 0, 1 + txts.push n.text.substr 1 + else if i is n.text.length # cursor at end of text + check_i = 1 + plus_width = true + txts.push n.text.substr 0, n.text.length - 1 + txts.push n.text.substr n.text.length - 1 + else + check_i = 1 + txts.push n.text.substr 0, i + txts.push n.text.substr i, 1 + txts.push n.text.substr i + 1 + for txt, txt_i in txts + el = n.el.ownerDocument.createTextNode txt + if txt_i is check_i + span = n.el.ownerDocument.createElement 'span' + span.appendChild el + el = span + els.push el + parent.insertBefore el, n.el + parent.removeChild n.el + bounds = get_el_bounds els[check_i] + parent.insertBefore n.el, els[0] + for el in els + parent.removeChild el + ret = x: bounds.x, y: bounds.y, h: bounds.h + if plus_width + ret.x += bounds.w + # fudge case where bounds are BS because we're on non-significant whitespace + if i > 0 + first = cursor_to_xyh n, 0 + if ret.x <= first.x and ret.y is first.y + # no need for a loop here, because recursion + ret = cursor_to_xyh 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) -> @@ -189,26 +219,97 @@ instantiate_tree = (tree, parent) -> if c.children.length instantiate_tree c.children, c.el -find_next_cursor_position = (n, i) -> - if n.type is TYPE_TEXT - if n.text.length > i - return [n, i + 1] - return null - if n.type is TYPE_TAG - if n.children.length - for c in n.children - ret = find_next_cursor_position c, -1 +traverse_tree = (tree, state, cb) -> + for c in tree + cb c, state + break if state.done? + if c.children.length + traverse_tree c.children, state, cb + break if state.done? + return state +# find the next element in tree (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 = (tree, n, i) -> + if n? and n.type is TYPE_TEXT and n.text.length > i + return [n, i + 1] + 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 + if node is n + state.before = false + if found.node? + return [found.node, 0] + return null + +# TODO make it so cursor can go places that don't have text but could +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 tree, before: n?, (node, state) -> + if node.type is TYPE_TEXT + unless n? + state.node = node + state.done = true + if node is n + if state.prev? + state.node = state.prev + state.done = true + if node + state.prev = node + if found.node? + return [found.node, found.node.text.length] + return null + +find_loc_cursor_position = (tree, loc) -> + for c in tree + if c.type is TYPE_TAG or c.type is TYPE_TEXT + bounds = get_el_bounds c.el + continue if loc.x < bounds.x + continue if loc.x > bounds.x + bounds.w + continue if loc.y < bounds.y + continue if loc.y > bounds.y + bounds.h + if c.children.length + ret = find_loc_cursor_position c.children, loc return ret if ret? - return null - else - # FIXME create an empty text node if needed depending on tag name + if c.type is TYPE_TEXT + # click is within bounding box that contains all text. + return [c, 0] if c.text.length is 0 + before_i = 0 + before = cursor_to_xyh c, before_i + after_i = c.text.length + after = cursor_to_xyh c, after_i + if loc.y < before.y + before.h and loc.x < before.x + continue # before first char on first line + if loc.y > after.y and loc.x > after.x + continue # after last char on last line + if loc.y < before.y + console.log "Warning: click in bounding box but above first line" + continue # above first line (runaround?) + if loc.y > after.y + after.h + console.log "Warning: click in bounding box but below last line", loc.y, after.y, after.h + continue # below last line (shouldn't happen?) + while after_i - before_i > 1 + cur_i = Math.round((before_i + after_i) / 2) + cur = cursor_to_xyh c, cur_i + if loc.y < cur.y or (loc.y <= cur.y + cur.h and loc.x < cur.x) + after_i = cur_i + after = cur + else + before_i = cur_i + before = cur + # which one is closest? + if Math.abs(before.x - loc.x) < Math.abs(after.x - loc.x) + return [c, before_i] + else + return [c, after_i] return null class PeachHTML5Editor constructor: (in_el, options = {}) -> @in_el = in_el @tree = [] - @iframe = document.createElement('iframe') + @iframe = domify iframe: class: 'peach_html5_editor' @cursor = null @cursor_el = null @cursor_visible = false @@ -216,157 +317,124 @@ class PeachHTML5Editor @parser_opts = {} if opt_fragment @parser_opts.fragment = 'body' - @in_el.parentNode.appendChild @iframe - @idoc = @iframe.contentDocument - ignore_key_codes = - '18': true # alt - '20': true # capslock - '17': true # ctrl - '144': true # numlock - '16': true # shift - '91': true # windows "start" key - control_key_codes = # we react to these, but they aren't typing - '37': KEY_LEFT - '38': KEY_UP - '39': KEY_RIGHT - '40': KEY_DOWN - '35': KEY_END - '8': KEY_BACKSPACE - '46': KEY_DELETE - '13': KEY_ENTER - '27': KEY_ESCAPE - '36': KEY_HOME - '45': KEY_INSERT - '33': KEY_PAGE_UP - '34': KEY_PAGE_DOWN - '9': KEY_TAB + @iframe.onload = => + @idoc = @iframe.contentDocument - @idoc.body.onkeyup = (e) => - return if e.ctrlKey - return false if ignore_key_codes[e.keyCode]? - #return false if control_key_codes[e.keyCode]? - @idoc.body.onkeydown = (e) => - return if e.ctrlKey - return false if ignore_key_codes[e.keyCode]? - #return false if control_key_codes[e.keyCode]? - switch e.keyCode - when KEY_LEFT - return false - when KEY_UP - return false - when KEY_RIGHT - window.ce = @cursor_el - if @cursor? - new_cursor = find_next_cursor_position @cursor... - if new_cursor? - @move_cursor new_cursor - else - after = false - for c in @cursor[0].parent.children - if after - new_cursor = find_next_cursor_position c, -1 - if new_cursor? - @move_cursor new_cursor - break - if c is @cursor[0] - after = true - else - for c in @tree - new_cursor = find_next_cursor_position c, -1 + ignore_key_codes = + '18': true # alt + '20': true # capslock + '17': true # ctrl + '144': true # numlock + '16': true # shift + '91': true # windows "start" key + control_key_codes = # we react to these, but they aren't typing + '37': KEY_LEFT + '38': KEY_UP + '39': KEY_RIGHT + '40': KEY_DOWN + '35': KEY_END + '8': KEY_BACKSPACE + '46': KEY_DELETE + '13': KEY_ENTER + '27': KEY_ESCAPE + '36': KEY_HOME + '45': KEY_INSERT + '33': KEY_PAGE_UP + '34': KEY_PAGE_DOWN + '9': KEY_TAB + + @idoc.body.onclick = (e) => + # idoc.body.offset().left/top + new_cursor = find_loc_cursor_position @tree, x: e.pageX, y: 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]? + #return false if control_key_codes[e.keyCode]? + @idoc.body.onkeydown = (e) => + return if e.ctrlKey + return false if ignore_key_codes[e.keyCode]? + #return false if control_key_codes[e.keyCode]? + switch e.keyCode + when KEY_LEFT + if @cursor? + new_cursor = find_prev_cursor_position @tree, @cursor... if new_cursor? @move_cursor new_cursor - break - return false - when KEY_DOWN - return false - when KEY_END - return false - when KEY_BACKSPACE - return false - when KEY_DELETE - return false - when KEY_ENTER - return false - when KEY_ESCAPE - return false - when KEY_HOME - return false - when KEY_INSERT - return false - when KEY_PAGE_UP - return false - when KEY_PAGE_DOWN - return false - when KEY_TAB - return false - @idoc.body.onkeypress = (e) => - return if e.ctrlKey - return false if ignore_key_codes[e.keyCode]? - # in firefox, keyCode is only set for non-typing keys - switch e.keyCode - when KEY_LEFT - return false - when KEY_UP - return false - when KEY_RIGHT - console.log "hi" - console.log @cursor - if @cursor? - new_cursor = find_next_cursor_position @cursor... - if new_cursor? - @move_cursor new_cursor else - after = false - for c in @cursor[0].parent.children - if after - new_cursor = find_next_cursor_position c, -1 - if new_cursor? - @move_cursor new_cursor - break - if c is @cursor[0] - after = true - else - for c in @tree - new_cursor = find_next_cursor_position c, -1 + for c in @tree + new_cursor = find_next_cursor_position @tree, c, -1 + if new_cursor? + @move_cursor new_cursor + break + return false + when KEY_UP + return false + when KEY_RIGHT + if @cursor? + new_cursor = find_next_cursor_position @tree, @cursor... if new_cursor? @move_cursor new_cursor - break - return false - when KEY_DOWN - return false - when KEY_END - return false - when KEY_BACKSPACE - return false - when KEY_DELETE - return false - when KEY_ENTER - return false - when KEY_ESCAPE - return false - when KEY_HOME - return false - when KEY_INSERT - return false - when KEY_PAGE_UP - return false - when KEY_PAGE_DOWN - return false - when KEY_TAB - return false - char = e.charCode ? e.keyCode - @in_el.value += String.fromCharCode char + else + for c in @tree + new_cursor = find_prev_cursor_position @tree, c, -1 + if new_cursor? + @move_cursor new_cursor + break + return false + when KEY_DOWN + return false + when KEY_END + return false + when KEY_BACKSPACE + return false + when KEY_DELETE + return false + when KEY_ENTER + return false + when KEY_ESCAPE + return false + when KEY_HOME + return false + when KEY_INSERT + return false + when KEY_PAGE_UP + return false + when KEY_PAGE_DOWN + return false + when KEY_TAB + return false + @idoc.body.onkeypress = (e) => + return if e.ctrlKey + return false if ignore_key_codes[e.keyCode]? + return false if control_key_codes[e.keyCode]? # handled in keydown + char = e.charCode ? e.keyCode + if char and @cursor? + char = String.fromCharCode char + if @cursor[1] is 0 + @cursor[0].text = char + @cursor[0].text + else if @cursor[1] is @cursor[0].text.length - 1 + @cursor[0].text += char + else + @cursor[0].text = + @cursor[0].text.substr(0, @cursor[1]) + + char + + @cursor[0].text.substr(@cursor[1]) + @cursor[0].el.nodeValue = @cursor[0].text + @move_cursor [@cursor[0], @cursor[1] + 1] + return false + if options.stylesheet # TODO test this + istyle = @idoc.createElement 'style' + istyle.setAttribute 'src', options.stylesheet + @idoc.head.appendChild istyle + icss = @idoc.createElement 'style' + icss.appendChild @idoc.createTextNode css + @idoc.head.appendChild icss @load_html @in_el.value - return false - if options.stylesheet # TODO test this - istyle = @idoc.createElement 'style' - istyle.setAttribute 'src', options.stylesheet - @idoc.head.appendChild istyle - icss = @idoc.createElement 'style' - icss.appendChild @idoc.createTextNode css - @idoc.head.appendChild icss - @load_html @in_el.value + + @in_el.parentNode.appendChild @iframe clear_dom: -> # FIXME add parent node, so we don't empty body and delete cursor_el while @idoc.body.childNodes.length @@ -380,16 +448,18 @@ class PeachHTML5Editor @clear_dom() instantiate_tree @tree, @idoc.body move_cursor: (cursor) -> + return if @cursor? and cursor? and @cursor[0] is cursor[0] and @cursor[1] is cursor[1] @cursor = cursor - unless @cursor_el? - @cursor_el = domify div: id: 'peach_html5_editor_cursor' - unless @cursor_visible - @idoc.body.appendChild @cursor_el - @cursor_visible = true - # TODO figure out top/left coords for cursor - loc = cursor_to_loc cursor[0], cursor[1] - @cursor_el.style.top = "#{loc.top}px" - @cursor_el.style.left = "#{loc.left}px" + # replace cursor, to reset blink animation + if @cursor_visible + @cursor_el.parentNode.removeChild @cursor_el + @cursor_el = domify div: id: 'peach_html5_editor_cursor' + @idoc.body.appendChild @cursor_el + @cursor_visible = true + # TODO figure out x,y coords for cursor + loc = cursor_to_xyh cursor[0], cursor[1] + @cursor_el.style.left = "#{loc.x}px" + @cursor_el.style.top = "#{loc.y}px" window.peach_html5_editor = (args...) -> return new PeachHTML5Editor args...