# SETTINGS
overlay_padding = 10
-TYPE_TAG = peach_parser.TYPE_TAG
-TYPE_TEXT = peach_parser.TYPE_TEXT
-TYPE_COMMENT = peach_parser.TYPE_COMMENT
-TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE
-
timeout = (ms, cb) -> return setTimeout cb, ms
debug_dot_at = (doc, x, y) ->
else
return window.getComputedStyle(el, null).getPropertyValue('display') is 'block'
-# pass a node (not an element) for a tag
-# returns if this is the sort of tag that cares about leading/trailing whitespace
-# FIXME this probably doesn't work all the time
-is_whitespace_significant = (n) ->
- if n.name is 'textarea'
- return true
- if n.name is 'pre'
- return true
- if n.el.currentStyle?
- return n.el.currentStyle['white-space'].substr(0, 3) is 'pre'
- else
- return window.getComputedStyle(n.el, null).getPropertyValue('white-space').substr(0, 3) is 'pre'
-
# Pass return value from dom event handlers to this.
# If they return false, this will addinionally stop propagation and default.
event_return = (e, bool) ->
tr: true
thead: true
tbody: true
+ ul: true
+ ol: true
}
-# FIXME terminology: s/dom/tree/; s/el/n/
-tree_to_html = (tree, indent = '', parent_is_block = false) ->
- ret = ''
- for n, i in tree
- switch n.type
- when TYPE_TAG
- is_block = is_display_block n.el
- if is_block
- is_tiny_block = false
- if is_whitespace_significant n
- is_tiny_block = true
- else
- if n.children.length is 1
- if n.children[0].type is TYPE_TEXT
- if n.children[0].text.length < 35
- is_tiny_block = true
- if is_block or (parent_is_block and i is 0)
- ret += indent
- ret += '<' + n.name
- attr_keys = []
- for k of n.attrs
- attr_keys.unshift k
- #attr_keys.sort()
- for k in attr_keys
- ret += " #{k}"
- if n.attrs[k].length > 0
- ret += "=\"#{enc_attr n.attrs[k]}\""
- ret += '>'
- unless void_elements[n.name]?
- if is_block
- next_indent = indent + ' '
- else
- next_indent = indent
- if n.children.length
- if is_block and not is_tiny_block
- ret += "\n"
- ret += tree_to_html n.children, next_indent, is_block and not is_tiny_block
- if is_block and not is_tiny_block
- ret += indent
- ret += "</#{n.name}>"
- if is_block or (parent_is_block and i is tree.length - 1)
- ret += "\n"
- when TYPE_TEXT
- if parent_is_block and i is 0
- ret += indent
- ret += enc_text n.text
- if parent_is_block and i is tree.length - 1
- ret += "\n"
- when TYPE_COMMENT
- ret += "<!--#{n.text}-->"
- when TYPE_DOCTYPE
- ret += "<!DOCTYPE #{n.name}"
- if n.public_identifier? and n.public_identifier.length > 0
- ret += " \"#{n.public_identifier}\""
- if n.system_identifier? and n.system_identifier.length > 0
- ret += " \"#{n.system_identifier}\""
- ret += ">\n"
- return ret
domify = (doc, hash) ->
for tag, attrs of hash
remove = []
for c, i in tree
switch c.type
- when TYPE_TEXT
+ when 'text'
c.el = parent.ownerDocument.createTextNode c.text
parent.appendChild c.el
- when TYPE_TAG
+ when 'tag'
if c.name in ['script', 'object', 'iframe', 'link']
# TODO put placeholders instead
remove.unshift i
return done
find_next_cursor_position = (tree, n, i) ->
- if n.type is TYPE_TEXT and n.text.length > i
+ if n.type is 'text' and n.text.length > i
orig_xyh = cursor_to_xyh n, i
unless orig_xyh?
console.log "ERROR: couldn't find xy for current cursor location"
state_before = true
found = null
traverse_tree tree, (node, state) ->
- if node.type is TYPE_TEXT and state_before is false
+ if node.type is 'text' and state_before is false
if cursor_to_xyh(node, 0)?
found = node
return true
return null
find_prev_cursor_position = (tree, n, i) ->
- if n? and n.type is TYPE_TEXT and i > 0
+ if n? and n.type is 'text' and i > 0
orig_xyh = cursor_to_xyh n, i
unless orig_xyh?
console.log "ERROR: couldn't find xy for current cursor location"
found_prev = n?
found = null
traverse_tree tree, (node) ->
- if node.type is TYPE_TEXT
+ if node.type is 'text'
if node is n
if found_prev?
found = found_prev
if found?
if cursor_to_xyh found, found.text.length # text visible?
return [found, found.text.length]
- return find_prev_cursor_position tree, ret[0], 0
+ return find_prev_cursor_position tree, found, 0
return null
find_loc_cursor_position = (tree, loc) ->
for c in tree
- if c.type is TYPE_TAG or c.type is TYPE_TEXT
+ if c.type is 'tag' or c.type is 'text'
bounds = get_el_bounds c.el
continue if loc.x < bounds.x
continue if loc.x > bounds.x + bounds.w
if c.children.length
ret = find_loc_cursor_position c.children, loc
return ret if ret?
- if c.type is TYPE_TEXT
+ if c.type is 'text'
# click is within bounding box that contains all text.
return [c, 0] if c.text.length is 0
before_i = 0
tree_remove_empty_text_nodes = (tree) ->
empties = []
traverse_tree tree, (n) ->
- if n.type is TYPE_TEXT
+ if n.type is 'text'
if n.text.length is 0
empties.unshift n
return false
for n in empties
# don't completely empty the tree
if tree.length is 1
- if tree[0].type is TYPE_TEXT
+ if tree[0].type is 'text'
console.log "oop, leaving a blank node because it's the only thing"
return
n.el.parentNode.removeChild n.el
iterate = (tree, cb) ->
for n in tree
- if n.type is TYPE_TEXT
+ if n.type is 'text'
i = 0
while i < n.text.length # don't foreach, cb might remove chars
advance = cb n, i
if advance
i += 1
- if n.type is TYPE_TAG
+ if n.type is 'tag'
block = is_display_block n.el
if block
cb null
@changed()
changed: ->
@in_el.onchange = null
- @in_el.value = tree_to_html @tree
+ @in_el.value = @pretty_html @tree
@in_el.onchange = =>
@load_html @in_el.value
@iframe.style.height = "0"
prev_bounds = x: 0, y: 0, w: 0, h: 0
alpha = 0.1
while n?.el?
- if n.type is TYPE_TEXT
+ if n.type is 'text'
n = n.parent
continue
bounds = get_el_bounds n.el
@matting.push ann
n = n.parent
alpha *= 1.5
+ pretty_html: (tree, indent = '', parent_flags = pre_ish: false, block: true, want_nl: false) ->
+ ret = ''
+ want_nl = parent_flags.want_nl
+ prev_in_flow_is_text = false
+ prev_in_flow_is_block = false
+ for n, i in tree
+ # figure out flags
+ inner_flags = want_nl: true
+ is_br = false
+ switch n.type
+ when 'tag'
+ if n.name is 'br'
+ is_br = true
+ is_text = false
+ if n.el.currentStyle?
+ cs = n.el.currentStyle
+ whitespace = cs['white-space']
+ display = cs['display']
+ position = cs['position']
+ float = cs['float']
+ else
+ cs = @iframe.contentWindow.getComputedStyle(n.el, null)
+ whitespace = cs.getPropertyValue 'white-space'
+ display = cs.getPropertyValue 'display'
+ position = cs.getPropertyValue 'position'
+ float = cs.getPropertyValue 'float'
+ if n.name is 'textarea'
+ inner_flags.pre_ish = true
+ else
+ inner_flags.pre_ish = whitespace.substr(0, 3) is 'pre'
+ switch float
+ when 'left', 'right'
+ in_flow = false
+ else
+ switch position
+ when 'absolute', 'fixed'
+ in_flow = false
+ else
+ if 'display' is 'none'
+ in_flow = false
+ else
+ in_flow = true
+ switch display
+ when 'inline', 'none'
+ inner_flags.block = false
+ is_block = in_flow_block = false
+ when 'inline-black'
+ inner_flags.block = true
+ is_block = in_flow_block = false
+ else # block, table, etc
+ inner_flags.block = true
+ is_block = true
+ in_flow_block = in_flow
+ when 'text'
+ is_text = true
+ is_block = false
+ in_flow = true
+ in_flow_block = false
+ else # 'comment', 'doctype'
+ is_text = false
+ is_block = false
+ in_flow = false
+ in_flow_block = false
+ # print whitespace if we can
+ unless parent_flags.pre_ish
+ unless prev_in_flow_is_text and is_br
+ if (i is 0 and parent_flags.block) or in_flow_block or prev_in_flow_is_block
+ if want_nl
+ ret += "\n"
+ ret += indent
+ switch n.type
+ when 'tag'
+ ret += '<' + n.name
+ attr_keys = []
+ for k of n.attrs
+ attr_keys.unshift k
+ #attr_keys.sort()
+ for k in attr_keys
+ ret += " #{k}"
+ if n.attrs[k].length > 0
+ ret += "=\"#{enc_attr n.attrs[k]}\""
+ ret += '>'
+ unless void_elements[n.name]?
+ if inner_flags.block
+ next_indent = indent + ' '
+ else
+ next_indent = indent
+ if n.children.length
+ ret += @pretty_html n.children, next_indent, inner_flags
+ ret += "</#{n.name}>"
+ when 'text'
+ ret += enc_text n.text
+ when 'comment'
+ ret += "<!--#{n.text}-->" # TODO encode?
+ when 'doctype'
+ ret += "<!DOCTYPE #{n.name}"
+ if n.public_identifier? and n.public_identifier.length > 0
+ ret += " \"#{n.public_identifier}\""
+ if n.system_identifier? and n.system_identifier.length > 0
+ ret += " \"#{n.system_identifier}\""
+ ret += ">"
+ want_nl = true
+ if in_flow
+ prev_in_flow_is_text = is_text
+ prev_in_flow_is_block = is_block or (in_flow and is_br)
+ if tree.length
+ # output final newline if allowed
+ unless parent_flags.pre_ish
+ if prev_in_flow_is_block or parent_flags.block
+ ret += "\n#{indent.substr 4}"
+ return ret
window.peach_html5_editor = (args...) ->
return new PeachHTML5Editor args...
Got questions, comments, patches, etc.? Contact Jason Woofenden