create overlay, move cursor to it, break typing

diff --git a/editor.coffee b/editor.coffee
index 94a42c2..b6bc94b 100644 (file)
--- 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 <http://www.gnu.org/licenses/>.
 
+# 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 (file)
--- 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; } */
        </style>
 </head>
 <body>