X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=370f2a1d457c42efdc233f7a7bf525da5c008d43;hb=ff17526a0c6a8c8e962a81f8e8b6a3f44053fef1;hp=b6bc94b2052a17d2fa0201783201193efb95eb2b;hpb=28e2a56749dc8ddd97c2d5b16f7b3558488f4a34;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index b6bc94b..370f2a1 100644 --- a/editor.coffee +++ b/editor.coffee @@ -15,7 +15,7 @@ # along with this program. If not, see . # SETTINGS -overlay_padding = 6 # TODO generate css from this +overlay_padding = 10 TYPE_TAG = peach_parser.TYPE_TAG TYPE_TEXT = peach_parser.TYPE_TEXT @@ -23,6 +23,7 @@ TYPE_COMMENT = peach_parser.TYPE_COMMENT TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE debug_dot_at = (doc, x, y) -> + return # disabled el = doc.createElement 'div' el.setAttribute 'style', "position: absolute; left: #{x}px; top: #{y}px; width: 1px; height: 3px; background-color: red" doc.body.appendChild el @@ -161,8 +162,8 @@ dom_to_html = (dom) -> ret += ">\n" return ret -domify = (h) -> - for tag, attrs of h +domify = (doc, hash) -> + for tag, attrs of hash if tag is 'text' return document.createTextNode attrs el = document.createElement tag @@ -174,23 +175,67 @@ domify = (h) -> el.setAttribute k, v return el -css = '' -css += 'div#peach_html5_editor_cursor {' -css += 'position: absolute;' -css += 'height: 1em;' -css += 'width: 2px;' -css += 'margin-left: -1px;' -css += 'margin-right: -1px;' -css += 'background: #444;' -css += '-webkit-animation: blink 1s steps(2, start) infinite;' -css += 'animation: blink 1s steps(2, start) infinite;' -css += '}' -css += '@-webkit-keyframes blink {' -css += 'to { visibility: hidden; }' -css += '}' -css += '@keyframes blink {' -css += 'to { visibility: hidden; }' -css += '}' +outer_css = (args) -> + w = args.w ? 300 + h = args.h ? 300 + inner_padding = args.inner_padding ? overlay_padding + frame_width = args.frame_width ? inner_padding + # TODO editor controls height... + shrink = (px) -> + w -= 2 * px + h -= 2 * px + return px + ret = '' + ret += 'body {' + ret += 'margin: 0;' + ret += 'padding: 0;' + ret += '}' + ret += '#wrap1 {' + ret += "border: #{shrink 1}px solid black;" + ret += "padding: #{shrink frame_width}px;" + ret += '}' + ret += '#wrap2 {' + ret += "border: #{shrink 1}px solid black;" + ret += "padding: #{shrink inner_padding}px;" + ret += '}' + ret += '#wrap3 {' + ret += 'position: relative;' + ret += '}' + ret += 'iframe {' + ret += 'box-sizing: border-box;' + ret += 'margin: 0;' + ret += 'border: none;' + ret += 'padding: 0;' + ret += "width: #{w}px;" + ret += "height: #{h}px;" + ret += '}' + ret += '#overlay {' + ret += 'position: absolute;' + ret += "left: -#{inner_padding}px;" + ret += "top: -#{inner_padding}px;" + ret += "right: -#{inner_padding}px;" + ret += "bottom: -#{inner_padding}px;" + ret += 'overflow: hidden;' + ret += '}' + ret += '.lightbox {' + ret += 'position: absolute;' + ret += 'background: rgba(100,100,100,0.2);' + ret += '}' + ret += '#cursor {' + ret += 'position: absolute;' + ret += 'height: 1em;' # FIXME adjust for hight of text + ret += 'width: 2px;' + ret += 'background: #444;' + ret += '-webkit-animation: blink 1s steps(2, start) infinite;' + ret += 'animation: blink 1s steps(2, start) infinite;' + ret += '}' + ret += '@-webkit-keyframes blink {' + ret += 'to { visibility: hidden; }' + ret += '}' + ret += '@keyframes blink {' + ret += 'to { visibility: hidden; }' + ret += '}' + return ret # key codes: KEY_LEFT = 37 @@ -208,13 +253,40 @@ KEY_PAGE_UP = 33 KEY_PAGE_DOWN = 34 KEY_TAB = 9 +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 + instantiate_tree = (tree, parent) -> - for c in tree + remove = [] + for c, i in tree switch c.type when TYPE_TEXT c.el = parent.ownerDocument.createTextNode c.text parent.appendChild c.el when TYPE_TAG + if c.name in ['script', 'object', 'iframe', 'link'] + # TODO put placeholders instead + remove.unshift i # TODO create in correct namespace c.el = parent.ownerDocument.createElement c.name for k, v of c.attrs @@ -223,6 +295,8 @@ instantiate_tree = (tree, parent) -> parent.appendChild c.el if c.children.length instantiate_tree c.children, c.el + for i in remove + tree.splice i, 1 traverse_tree = (tree, state, cb) -> for c in tree @@ -466,156 +540,176 @@ tree_dedup_space = (tree) -> queue null class PeachHTML5Editor - constructor: (in_el, options = {}) -> + # Options: (all optional) + # editor_id: "id" attribute for outer-most element created by/for editor + constructor: (in_el, options) -> + @options = options ? {} @in_el = in_el @tree = [] - @outer_el = domify div: class: 'peach_html5_editor', children: [ - @iframe = domify iframe: class: 'peach_html5_editor_iframe' - @overlay = domify div: class: 'peach_html5_editor_overlay' - ] + @initialized = false # when iframes have loaded + @outer_iframe # iframe to hold editor + @outer_idoc # "document" object for @outer_iframe + @iframe = null # iframe to hold editable content + @idoc = null # "document" object for @iframe @cursor = null @cursor_el = null @cursor_visible = false - opt_fragment = options.fragment ? true + opt_fragment = @options.fragment ? true @parser_opts = {} if opt_fragment @parser_opts.fragment = 'body' - @iframe.onload = => - @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 - - @overlay.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 - 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 - else - 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 - 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 unless @cursor? - return false unless @cursor[1] > 0 - @cursor[0].text = @cursor[0].text.substr(0, @cursor[1] - 1) + @cursor[0].text.substr(@cursor[1]) - @cursor[0].el.nodeValue = @cursor[0].text - @move_cursor [@cursor[0], @cursor[1] - 1] - return false - when KEY_DELETE - return false unless @cursor? - return false unless @cursor[1] < @cursor[0].text.length - @cursor[0].text = @cursor[0].text.substr(0, @cursor[1]) + @cursor[0].text.substr(@cursor[1] + 1) - @cursor[0].el.nodeValue = @cursor[0].text - @move_cursor [@cursor[0], @cursor[1]] - 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] - @changed() + @outer_iframe = domify document, iframe: {} + outer_iframe_style = 'border: none !important; margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important;' + if @options.editor_id? + @outer_iframe.setAttribute 'id', @options.editor_id + @outer_iframe.onload = => + console.log 'outer onload' + @outer_idoc = @outer_iframe.contentDocument + icss = domify @outer_idoc, style: children: [ + domify @outer_idoc, text: css + ] + @outer_idoc.head.appendChild icss + @iframe = domify @outer_idoc, iframe: {} + @iframe.onload = => + @init() + setTimeout (=> @init()), 200 # firefox never fires this onload + @outer_idoc.body.appendChild( + domify @outer_idoc, div: id: 'wrap1', children: [ + domify @outer_idoc, div: id: 'wrap2', children: [ + domify @outer_idoc, div: id: 'wrap3', children: [ + @iframe + @overlay = domify @outer_idoc, div: id: 'overlay' + ] + ] + ] + ) + outer_wrap = domify document, div: class: 'peach_html5_editor' + @in_el.parentNode.appendChild outer_wrap + outer_bounds = get_el_bounds outer_wrap + if outer_bounds.w < 300 + outer_bounds.w = 300 + if outer_bounds.h < 300 + outer_bounds.h = 300 + outer_iframe_style += "width: #{outer_bounds.w}px; height: #{outer_bounds.h}px;" + @outer_iframe.setAttribute 'style', outer_iframe_style + css = outer_css w: outer_bounds.w, h: outer_bounds.h + outer_wrap.appendChild @outer_iframe + init: -> # called by @iframe's onload (or timeout on firefox) + return if @initialized # ignore timeout for non-broken browsers + @idoc = @iframe.contentDocument + @overlay.onclick = (e) => + return @onclick e + @outer_idoc.body.onkeyup = (e) => + return @onkeyup e + @outer_idoc.body.onkeydown = (e) => + return @onkeydown e + @outer_idoc.body.onkeypress = (e) => + return @onkeypress e + if @options.stylesheet + # TODO test this + @idoc.head.appendChild domify @idoc, style: src: @options.stylesheet + @load_html @in_el.value + @initialized = true + if @options.initialized_cb? + @options.initialized_cb() + 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 + if new_cursor? + @move_cursor new_cursor + onkeyup: (e) -> + return if e.ctrlKey + return false if ignore_key_codes[e.keyCode]? + #return false if control_key_codes[e.keyCode]? + 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 + else + for c in @tree + new_cursor = find_next_cursor_position @tree, c, -1 + if new_cursor? + @move_cursor new_cursor + break 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 - document.head.appendChild icss - @load_html @in_el.value - - @in_el.parentNode.appendChild @outer_el - clear_dom: -> - # FIXME add parent node, so we don't empty body and delete cursor_el + 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 + 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 unless @cursor? + return false unless @cursor[1] > 0 + @cursor[0].text = @cursor[0].text.substr(0, @cursor[1] - 1) + @cursor[0].text.substr(@cursor[1]) + @cursor[0].el.nodeValue = @cursor[0].text + @move_cursor [@cursor[0], @cursor[1] - 1] + return false + when KEY_DELETE + return false unless @cursor? + return false unless @cursor[1] < @cursor[0].text.length + @cursor[0].text = @cursor[0].text.substr(0, @cursor[1]) + @cursor[0].text.substr(@cursor[1] + 1) + @cursor[0].el.nodeValue = @cursor[0].text + @move_cursor [@cursor[0], @cursor[1]] + 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 + 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] + @changed() + return false + clear_dom: -> # remove all the editable content (and cursor, overlays, etc) while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] @kill_cursor() - @cursor_visible = false return load_html: (html) -> @tree = peach_parser.parse html, @parser_opts @@ -643,11 +737,11 @@ class PeachHTML5Editor # replace cursor, to reset blink animation if @cursor_visible @cursor_el.parentNode.removeChild @cursor_el - @cursor_el = domify div: id: 'peach_html5_editor_cursor' + @cursor_el = domify @outer_idoc, div: id: 'cursor' @overlay.appendChild @cursor_el @cursor_visible = true # TODO figure out x,y coords for cursor - @cursor_el.style.left = "#{loc.x + overlay_padding}px" + @cursor_el.style.left = "#{loc.x + overlay_padding - 1}px" @cursor_el.style.top = "#{loc.y + overlay_padding}px" window.peach_html5_editor = (args...) ->