@options = options ? {}
@in_el = in_el
@tree = []
+ @matting = []
@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
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'
@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
@cursor_el.parentNode.removeChild @cursor_el
@cursor_visible = false
@cursor = null
+ @matt null
move_cursor: (cursor) ->
loc = cursor_to_xyh cursor[0], cursor[1]
unless loc?
@cursor_visible = true
@cursor_el.style.left = "#{loc.x + overlay_padding - 1}px"
@cursor_el.style.top = "#{loc.y + overlay_padding}px"
+ @matt cursor[0]
+ matt: (n) ->
+ while @matting.length > 0
+ @overlay.removeChild @matting[0]
+ @matting.shift()
+ return unless n?
+ prev_bounds = x: 0, y: 0, w: 0, h: 0
+ alpha = 0.1
+ while n?.el?
+ if n.type is TYPE_TEXT
+ n = n.parent
+ continue
+ bounds = get_el_bounds n.el
+ return unless bounds?
+ 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 - 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}>"]
+ @overlay.appendChild ann
+ @matting.push ann
+ n = n.parent
+ alpha *= 1.5
window.peach_html5_editor = (args...) ->
return new PeachHTML5Editor args...