Got questions, comments, patches, etc.?
Contact Jason Woofenden
gitweb
/
peach-html5-editor.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
cursor blinks black/white
[peach-html5-editor.git]
/
editor.coffee
diff --git
a/editor.coffee
b/editor.coffee
index
a2af4a5
..
870c61b
100644
(file)
--- a/
editor.coffee
+++ b/
editor.coffee
@@
-24,6
+24,19
@@
next_frame = (cb) ->
else
timeout 16, cb
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"
# 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"
@@
-232,14
+245,20
@@
outer_css = (args) ->
ret += 'height: 1em;' # FIXME adjust for hight of text
ret += 'width: 2px;'
ret += 'background: #444;'
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 += '-webkit-animation: blink 1s linear infinite;'
+ ret += 'animation: blink 1s linear infinite;'
ret += '}'
ret += '@-webkit-keyframes blink {'
ret += '}'
ret += '@-webkit-keyframes blink {'
- ret += 'to { visibility: hidden; }'
+ ret += '0% { background-color: rgba(0,0,0,0.7); }'
+ ret += '50% { background-color: rgba(0,0,0,0.7); }'
+ ret += '50.001% { background-color: rgba(255,255,255,0.7); }'
+ ret += '100% { background-color: rgba(255,255,255,0.7); }'
ret += '}'
ret += '@keyframes blink {'
ret += '}'
ret += '@keyframes blink {'
- ret += 'to { visibility: hidden; }'
+ ret += '0% { background-color: rgba(0,0,0,0.7); }'
+ ret += '50% { background-color: rgba(0,0,0,0.7); }'
+ ret += '50.001% { background-color: rgba(255,255,255,0.7); }'
+ ret += '100% { background-color: rgba(255,255,255,0.7); }'
ret += '}'
ret += '.ann_box {'
ret += 'z-index: 5;'
ret += '}'
ret += '.ann_box {'
ret += 'z-index: 5;'
@@
-253,6
+272,10
@@
outer_css = (args) ->
ret += 'font-size: 8px;'
ret += 'white-space: pre;'
ret += 'background: rgba(255,255,255,0.4);'
ret += 'font-size: 8px;'
ret += 'white-space: pre;'
ret += 'background: rgba(255,255,255,0.4);'
+ ret += '-ms-user-select: none;'
+ ret += '-webkit-user-select: none;'
+ ret += '-moz-user-select: none;'
+ ret += 'user-select: none;'
ret += '}'
return ret
ret += '}'
return ret
@@
-583,6
+606,7
@@
tree_dedup_space = (tree) ->
class PeachHTML5Editor
# Options: (all optional)
# editor_id: "id" attribute for outer-most element created by/for editor
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 ? {}
# on_init: callback for when the editable content is in place
constructor: (in_el, options) ->
@options = options ? {}
@@
-615,7
+639,7
@@
class PeachHTML5Editor
domify @outer_idoc, text: css
]
@outer_idoc.head.appendChild icss
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
@iframe.onload = =>
@init()
setTimeout (=> @init() unless @inited), 200 # firefox never fires this onload
@@
-657,9
+681,12
@@
class PeachHTML5Editor
@outer_idoc.body.onkeypress = (e) =>
@have_focus()
return event_return e, @onkeypress e
@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
# 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?
@load_html @in_el.value
@inited = true
if @options.on_init?
@@
-858,12
+885,14
@@
class PeachHTML5Editor
display = cs['display']
position = cs['position']
float = cs['float']
display = cs['display']
position = cs['position']
float = cs['float']
+ visibility = cs['visibility']
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'
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'
+ visibility = cs.getPropertyValue 'visibility'
if n.name is 'textarea'
inner_flags.pre_ish = true
else
if n.name is 'textarea'
inner_flags.pre_ish = true
else
@@
-879,7
+908,11
@@
class PeachHTML5Editor
if 'display' is 'none'
in_flow = false
else
if 'display' is 'none'
in_flow = false
else
- in_flow = true
+ switch visibility
+ when 'hidden', 'collapse'
+ in_flow = false
+ else # visible
+ in_flow = true
switch display
when 'inline', 'none'
inner_flags.block = false
switch display
when 'inline', 'none'
inner_flags.block = false