X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=6fa48cb25a760ee88d2ecaf3e0b021c36424a8dd;hb=0bea1824fce33615c4ebc5f1a44b002bb76a8d1c;hp=e1937a04a9419c6312fa4d76d221e651b4d94101;hpb=0d08650c4c8c17d8218fdb31e6ff65f3568a81bd;p=peach-html5-editor.git

diff --git a/editor.coffee b/editor.coffee
index e1937a0..6fa48cb 100644
--- a/editor.coffee
+++ b/editor.coffee
@@ -636,14 +636,17 @@ class PeachHTML5Editor
 		@options = options ? {}
 		@in_el = in_el
 		@tree = []
+		@matting = []
 		@inited = false # when iframes have loaded
 		@outer_iframe # iframe to hold editor
 		@outer_idoc # "document" object for @outer_iframe
+		@wrap2 = null # scrollbar is on this
 		@iframe = null # iframe to hold editable content
 		@idoc = null # "document" object for @iframe
 		@cursor = null
 		@cursor_el = null
 		@cursor_visible = false
+		@iframe_offset = null
 		opt_fragment = @options.fragment ? true
 		@parser_opts = {}
 		if opt_fragment
@@ -665,7 +668,7 @@ class PeachHTML5Editor
 			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: id: 'wrap2', children: [
+					@wrap2 = domify @outer_idoc, div: id: 'wrap2', children: [
 						domify @outer_idoc, div: id: 'wrap3', children: [
 							@iframe
 							@overlay = domify @outer_idoc, div: id: 'overlay'
@@ -703,10 +706,16 @@ class PeachHTML5Editor
 		@inited = true
 		if @options.on_init?
 			@options.on_init()
+	overlay_event_to_inner_xy: (e) ->
+		unless @iframe_offset?
+			@iframe_offset = get_el_bounds @iframe
+		x = e.pageX # TODO ?cross-browserify
+		y = e.pageY + @wrap2.scrollTop # TODO ?cross-browserify
+		# TODO adjust for scrolling
+		return x: x - @iframe_offset.x, y: y - @iframe_offset.y
 	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
+		xy = @overlay_event_to_inner_xy e
+		new_cursor = find_loc_cursor_position @tree, xy
 		if new_cursor?
 			@move_cursor new_cursor
 		return false
@@ -824,6 +833,7 @@ class PeachHTML5Editor
 			@cursor_el.parentNode.removeChild @cursor_el
 			@cursor_visible = false
 		@cursor = null
+		@matt null
 	move_cursor: (cursor) ->
 		loc = cursor_to_xyh cursor[0], cursor[1]
 		unless loc?
@@ -838,6 +848,31 @@ class PeachHTML5Editor
 		@cursor_visible = true
 		@cursor_el.style.left = "#{loc.x + overlay_padding - 1}px"
 		@cursor_el.style.top = "#{loc.y + overlay_padding}px"
+		@matt cursor[0]
+	matt: (n) ->
+		while @matting.length > 0
+			@overlay.removeChild @matting[0]
+			@matting.shift()
+		return unless n?
+		prev_bounds = x: 0, y: 0, w: 0, h: 0
+		alpha = 0.1
+		while n?.el?
+			if n.type is TYPE_TEXT
+				n = n.parent
+				continue
+			bounds = get_el_bounds n.el
+			return unless bounds?
+			if bounds.x is prev_bounds.x and bounds.y is prev_bounds.y and bounds.w is prev_bounds.w and bounds.h is prev_bounds.h
+				n = n.parent
+				continue
+			matt = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x - 1 + overlay_padding}px; top: #{bounds.y - 1 + overlay_padding}px; width: #{bounds.w}px; height: #{bounds.h}px; outline: 1000px solid rgba(0,153,255,#{alpha}); border: 1px solid rgba(0,0,0,.1)"
+			@overlay.appendChild matt
+			@matting.push matt
+			ann = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x - 2 + overlay_padding}px; top: #{bounds.y - 6 + overlay_padding}px; font-size: 8px", children: [domify @outer_idoc, text: "<#{n.name}>"]
+			@overlay.appendChild ann
+			@matting.push ann
+			n = n.parent
+			alpha *= 1.5
 
 window.peach_html5_editor = (args...) ->
 	return new PeachHTML5Editor args...