else
timeout 16, cb
+this_url_sans_path = ->
+ ret = "#{window.location.href}"
+ clip = ret.lastIndexOf '#'
+ if clip > -1
+ ret = ret.substr 0, clip
+ clip = ret.lastIndexOf '?'
+ if clip > -1
+ ret = ret.substr 0, clip
+ clip = ret.lastIndexOf '/'
+ if clip > -1
+ ret = ret.substr 0, clip + 1
+ return ret
+
# xml 1.0 spec, chromium and firefox accept these, plus lots of unicode chars
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"
ret += 'body {'
ret += 'margin: 0;'
ret += 'padding: 0;'
+ ret += 'color: black;'
+ ret += 'background: white;'
ret += '}'
ret += '#wrap1 {'
ret += "border: #{occupy 1}px solid black;"
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 += 'background: linear-gradient(0deg, rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1));'
+ ret += 'background-size: 200% 200%;'
+ ret += '-webkit-animation: blink 1s linear normal infinite;'
+ ret += 'animation: blink 1s linear normal infinite;'
ret += '}'
ret += '@-webkit-keyframes blink {'
- ret += 'to { visibility: hidden; }'
+ ret += '0%{background-position:0% 0%}'
+ ret += '100%{background-position:0% -100%}'
ret += '}'
- ret += '@keyframes blink {'
- ret += 'to { visibility: hidden; }'
+ ret += '@keyframes blink { '
+ ret += '0%{background-position:0% 0%}'
+ ret += '100%{background-position:0% -100%}'
ret += '}'
ret += '.ann_box {'
ret += 'z-index: 5;'
class PeachHTML5Editor
# Options: (all optional)
# editor_id: "id" attribute for outer-most element created by/for editor
+ # css_file: filename of a css file to style editable content
# on_init: callback for when the editable content is in place
constructor: (in_el, options) ->
@options = options ? {}
domify @outer_idoc, text: css
]
@outer_idoc.head.appendChild icss
- @iframe = domify @outer_idoc, iframe: {}
+ @iframe = domify @outer_idoc, iframe: sandbox: 'allow-same-origin allow-scripts'
@iframe.onload = =>
@init()
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: style: "position: absolute; top: 0; left: 1px; font-size: 10px", children: [ domify @outer_idoc, text: "Peach HTML5 Editor" ]
@wrap2 = domify @outer_idoc, div: id: 'wrap2', children: [
domify @outer_idoc, div: id: 'wrap3', children: [
@iframe
@outer_idoc.body.onkeypress = (e) =>
@have_focus()
return event_return e, @onkeypress e
- if @options.stylesheet
+ # chromium doesn't resolve relative urls as though they were at the same domain
+ # so add a <base> tag
+ @idoc.head.appendChild domify @idoc, base: href: this_url_sans_path()
+ if @options.css_file
# TODO test this
- @idoc.head.appendChild domify @idoc, style: src: @options.stylesheet
+ @idoc.head.appendChild domify @idoc, link: rel: 'stylesheet', type: 'text/css', href: @options.css_file
@load_html @in_el.value
@inited = true
if @options.on_init?