JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
cursor hight fits text size
[peach-html5-editor.git] / editor.coffee
index 6a9d361..92fc1e0 100644 (file)
 # 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
 
+# xml 1.0 says:
+valid_attr_regex = new RegExp '^[a-zA-Z_:][-a-zA-Z0-9_:.]*$'
+# html5 spec is much more lax, but chromium won't let me make at attribute with the name "4"
+js_attr_regex = new RegExp '^[oO][nN].'
+
 debug_dot_at = (doc, x, y) ->
        return # disabled
        el = doc.createElement 'div'
@@ -236,6 +236,19 @@ outer_css = (args) ->
        ret += '@keyframes blink {'
        ret +=     'to { visibility: hidden; }'
        ret += '}'
+       ret += '.ann_box {'
+       ret +=     'z-index: 5;'
+       ret +=     'position: absolute;'
+       ret +=     'border: 1px solid rgba(0,0,0,0.1);'
+       ret +=     'outline: 1px solid rgba(255,255,255,0.1);' # in case there's a black background
+       ret += '}'
+       ret += '.ann_tag {'
+       ret +=     'z-index: 10;'
+       ret +=     'position: absolute;'
+       ret +=     'font-size: 8px;'
+       ret +=     'white-space: pre;'
+       ret +=     'background: rgba(255,255,255,0.4);'
+       ret += '}'
        return ret
 
 # key codes:
@@ -281,18 +294,21 @@ instantiate_tree = (tree, parent) ->
        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
+                                       continue
                                # TODO create in correct namespace
                                c.el = parent.ownerDocument.createElement c.name
                                for k, v of c.attrs
                                        # FIXME if attr_whitelist[k]?
-                                       c.el.setAttribute k, v
+                                       if valid_attr_regex.test k
+                                               unless js_attr_regex.test k
+                                                       c.el.setAttribute k, v
                                parent.appendChild c.el
                                if c.children.length
                                        instantiate_tree c.children, c.el
@@ -310,7 +326,7 @@ traverse_tree = (tree, cb) ->
        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"
@@ -323,7 +339,7 @@ find_next_cursor_position = (tree, n, i) ->
        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
@@ -335,7 +351,7 @@ find_next_cursor_position = (tree, n, i) ->
        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"
@@ -349,7 +365,7 @@ find_prev_cursor_position = (tree, n, i) ->
        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
@@ -364,7 +380,7 @@ find_prev_cursor_position = (tree, n, i) ->
 
 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
@@ -373,7 +389,7 @@ find_loc_cursor_position = (tree, loc) ->
                        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
@@ -429,14 +445,14 @@ is_space = (chr) ->
 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
@@ -458,13 +474,13 @@ tree_dedup_space = (tree) ->
 
        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
@@ -778,7 +794,12 @@ class PeachHTML5Editor
                @overlay.appendChild @cursor_el
                @cursor_visible = true
                @cursor_el.style.left = "#{loc.x + overlay_padding - 1}px"
-               @cursor_el.style.top = "#{loc.y + overlay_padding}px"
+               if loc.h < 5
+                       height = 12
+               else
+                       height = loc.h
+               @cursor_el.style.top = "#{loc.y + overlay_padding + Math.round(height * .07)}px"
+               @cursor_el.style.height = "#{Math.round height * 0.82}px"
                @matt cursor[0]
        matt: (n) ->
                while @matting.length > 0
@@ -788,7 +809,7 @@ class PeachHTML5Editor
                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
@@ -796,10 +817,10 @@ 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 - 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)"
+                       matt = domify @outer_idoc, div: class: 'ann_box', style: "left: #{bounds.x - 1 + overlay_padding}px; top: #{bounds.y - 2 + overlay_padding}px; width: #{bounds.w}px; height: #{bounds.h}px" # outline: 1000px solid rgba(0,153,255,#{alpha});
                        @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}>"]
+                       ann = domify @outer_idoc, div: class: 'ann_tag', style: "left: #{bounds.x + 1 + overlay_padding}px; top: #{bounds.y - 7 + overlay_padding}px", children: [domify @outer_idoc, text: " #{n.name} "]
                        @overlay.appendChild ann
                        @matting.push ann
                        n = n.parent
@@ -814,7 +835,7 @@ class PeachHTML5Editor
                        inner_flags = want_nl: true
                        is_br = false
                        switch n.type
-                               when TYPE_TAG
+                               when 'tag'
                                        if n.name is 'br'
                                                is_br = true
                                        is_text = false
@@ -857,12 +878,12 @@ class PeachHTML5Editor
                                                        inner_flags.block = true
                                                        is_block = true
                                                        in_flow_block = in_flow
-                               when TYPE_TEXT
+                               when 'text'
                                        is_text = true
                                        is_block = false
                                        in_flow = true
                                        in_flow_block = false
-                               else # TYPE_COMMENT, TYPE_DOCTYPE
+                               else # 'comment', 'doctype'
                                        is_text = false
                                        is_block = false
                                        in_flow = false
@@ -875,7 +896,7 @@ class PeachHTML5Editor
                                                        ret += "\n"
                                                ret += indent
                        switch n.type
-                               when TYPE_TAG
+                               when 'tag'
                                        ret += '<' + n.name
                                        attr_keys = []
                                        for k of n.attrs
@@ -894,11 +915,11 @@ class PeachHTML5Editor
                                                if n.children.length
                                                        ret += @pretty_html n.children, next_indent, inner_flags
                                                ret += "</#{n.name}>"
-                               when TYPE_TEXT
+                               when 'text'
                                        ret += enc_text n.text
-                               when TYPE_COMMENT
+                               when 'comment'
                                        ret += "<!--#{n.text}-->" # TODO encode?
-                               when TYPE_DOCTYPE
+                               when 'doctype'
                                        ret += "<!DOCTYPE #{n.name}"
                                        if n.public_identifier? and n.public_identifier.length > 0
                                                ret += " \"#{n.public_identifier}\""