X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=blobdiff_plain;f=editor.coffee;h=b6bc94b2052a17d2fa0201783201193efb95eb2b;hp=94a42c2df4d24a3ad33330924f7bcefdea20cb19;hb=28e2a56749dc8ddd97c2d5b16f7b3558488f4a34;hpb=84a9c68f0c3af0ccdec6f82a14a7cc3fca5ab4ba

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 <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...