Re-coded the overlay with tabindex focus/blur.

cheeaun · Jul 12, 2009 · 1c64554 · 1c64554
1 parent 234753e
commit 1c64554
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/Assets/MooEditable/MooEditable.css b/Assets/MooEditable/MooEditable.css
@@ -170,6 +170,9 @@
 	background-color: #ddd;
 	font-size: 12px;
 	z-index: 100;
+	outline: 0;
+	-moz-outline: 0;
+	-webkit-outline: 0;
 }
 
 .mooeditable-ui-button-overlay .overlay-content{

diff --git a/Demos/MooEditable/MooEditable.UI.ButtonOverlay.html b/Demos/MooEditable/MooEditable.UI.ButtonOverlay.html
@@ -41,7 +41,7 @@
 					command: function(buttonOverlay, e){
 						var el = e.target;
 						if (el.tagName.toLowerCase() != 'a') return;
-						this.selection.insertContent(el.get('text'));
+						this.selection.insertContent($(el).get('text'));
 					}
 				};
 
@@ -59,7 +59,7 @@
 					command: function(buttonOverlay, e){
 						var el = e.target;
 						if (el.tagName.toLowerCase() != 'a') return;
-						this.selection.insertContent('number ' + el.get('text'));
+						this.selection.insertContent('number ' + $(el).get('text'));
 					}
 				};
 

diff --git a/Source/MooEditable/MooEditable.UI.ButtonOverlay.js b/Source/MooEditable/MooEditable.UI.ButtonOverlay.js
@@ -36,29 +36,24 @@ MooEditable.UI.ButtonOverlay = new Class({
 		this.overlay = new Element('div', {
 			'class': 'mooeditable-ui-button-overlay ' + self.name + '-overlay ' + self.options.overlayClass,
 			html: '<div class="overlay-content ' + self.options.overlayContentClass + '">' + html + '</div>',
+			tabindex: 0,
 			styles: {
-				display: 'none',
+				left: '-999em',
 				position: 'absolute',
 				width: self.options.overlaySize.x,
 				height: self.options.overlaySize.y
 			},
 			events: {
-				mousedown: self.clickOverlay.bind(self)
+				mousedown: self.clickOverlay.bind(self),
+				focus: self.openOverlay.bind(self),
+				blur: self.closeOverlay.bind(self)
 			}
 		}).inject(document.body).store('MooEditable.UI.ButtonOverlay', this);
 		this.overlayVisible = false;
-		window.addEvent('click', function(e){
-			var el = e.target;
-			if (el == self.el) return;
-			if (Element.hasClass(el, self.name + '-overlay')) return;
-			if (Element.getParents(el, '.' + self.name + '-overlay').length) return;
-			self.closeOverlay();
-		});
 	},
 
 	openOverlay: function(){
 		if (this.overlayVisible) return;
-		this.overlay.setStyle('display', '');
 		this.overlayVisible = true;
 		this.activate();
 		this.fireEvent('openOverlay', this);
@@ -67,32 +62,33 @@ MooEditable.UI.ButtonOverlay = new Class({
 
 	closeOverlay: function(){
 		if (!this.overlayVisible) return;
-		this.overlay.setStyle('display', 'none');
+		this.overlay.setStyle('left', '-999em');
 		this.overlayVisible = false;
 		this.deactivate();
 		this.fireEvent('closeOverlay', this);
 		return this;
 	},
 
 	clickOverlay: function(e){
+		if (e.target == this.overlay || e.target.parentNode == this.overlay) return;
 		e.preventDefault();
 		this.action(e);
-		this.closeOverlay();
+		this.overlay.blur();
 	},
 
 	click: function(e){
 		e.preventDefault();
 		if (this.disabled) return;
 		if (this.overlayVisible){
-			this.closeOverlay();
+			this.overlay.blur();
 			return;
 		} else {
 			var coords = this.el.getCoordinates();
 			this.overlay.setStyles({
 				top: coords.bottom,
 				left: coords.left
 			});
-			this.openOverlay();
+			this.overlay.focus();
 		}
 	}