From 28e2a56749dc8ddd97c2d5b16f7b3558488f4a34 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Mon, 7 Mar 2016 22:04:38 -0500 Subject: [PATCH] create overlay, move cursor to it, break typing --- editor.coffee | 31 ++++++++++++++++++++++--------- editor_tests_compiled.html | 26 ++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 11 deletions(-) diff --git a/editor.coffee b/editor.coffee index 94a42c2..b6bc94b 100644 --- a/editor.coffee +++ b/editor.coffee @@ -14,6 +14,9 @@ # You should have received a copy of the GNU Affero General Public License # along with this program. If not, see . +# SETTINGS +overlay_padding = 6 # TODO generate css from this + TYPE_TAG = peach_parser.TYPE_TAG TYPE_TEXT = peach_parser.TYPE_TEXT TYPE_COMMENT = peach_parser.TYPE_COMMENT @@ -466,7 +469,10 @@ class PeachHTML5Editor constructor: (in_el, options = {}) -> @in_el = in_el @tree = [] - @iframe = domify iframe: class: 'peach_html5_editor' + @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' + ] @cursor = null @cursor_el = null @cursor_visible = false @@ -501,9 +507,10 @@ class PeachHTML5Editor '34': KEY_PAGE_DOWN '9': KEY_TAB - @idoc.body.onclick = (e) => - # idoc.body.offset().left/top - new_cursor = find_loc_cursor_position @tree, x: e.pageX, y: e.pageY + @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) => @@ -599,14 +606,15 @@ class PeachHTML5Editor @idoc.head.appendChild istyle icss = @idoc.createElement 'style' icss.appendChild @idoc.createTextNode css - @idoc.head.appendChild icss + document.head.appendChild icss @load_html @in_el.value - @in_el.parentNode.appendChild @iframe + @in_el.parentNode.appendChild @outer_el clear_dom: -> # FIXME add parent node, so we don't empty body and delete cursor_el while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] + @kill_cursor() @cursor_visible = false return load_html: (html) -> @@ -621,6 +629,11 @@ class PeachHTML5Editor @in_el.value = dom_to_html @tree @in_el.onchange = => @load_html @in_el.value + kill_cursor: -> # remove it, forget where it was + if @cursor_visible + @cursor_el.parentNode.removeChild @cursor_el + @cursor_visible = false + @cursor = null move_cursor: (cursor) -> loc = cursor_to_xyh cursor[0], cursor[1] unless loc? @@ -631,11 +644,11 @@ class PeachHTML5Editor if @cursor_visible @cursor_el.parentNode.removeChild @cursor_el @cursor_el = domify div: id: 'peach_html5_editor_cursor' - @idoc.body.appendChild @cursor_el + @overlay.appendChild @cursor_el @cursor_visible = true # TODO figure out x,y coords for cursor - @cursor_el.style.left = "#{loc.x}px" - @cursor_el.style.top = "#{loc.y}px" + @cursor_el.style.left = "#{loc.x + overlay_padding}px" + @cursor_el.style.top = "#{loc.y + overlay_padding}px" window.peach_html5_editor = (args...) -> return new PeachHTML5Editor args... diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html index b860a5a..d529b4f 100644 --- a/editor_tests_compiled.html +++ b/editor_tests_compiled.html @@ -9,11 +9,33 @@ box-sizing: border-box; width: 100%; } - iframe { + .peach_html5_editor { + width: 300px; + height: 300px; + border: 1px solid black; + padding: 5px; + position: relative; + } + .peach_html5_editor_overlay { + position: absolute; + top: -1px; + left: -1px; + width: 312px; + height: 312px; + overflow: hidden; + } + .peach_html5_editor_lightbox { + position: absolute; + background: rgba(100,100,100,0.2); + } + .peach_html5_editor_iframe { + box-sizing: border-box; + margin: 0; + border: none; + padding: 0; width: 300px; height: 300px; } - /* iframe { width: 400px; } */ -- 1.7.10.4