MooEditable.UI.ButtonOverlay class and demo.

cheeaun · Mar 15, 2009 · f946301 · f946301
1 parent 32daf95
commit f946301
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 0 deletions.
diff --git a/Demos/MooEditable/MooEditable.UI.ButtonOverlay.html b/Demos/MooEditable/MooEditable.UI.ButtonOverlay.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>MooEditable example with an example Button Overlay</title>
+
+		<style type="text/css">
+			body{
+				font-family: sans-serif;
+				font-size: .9em;
+			}
+			#textarea-1{
+				width: 700px;
+				height: 200px;
+				padding: 10px;
+				border: 2px solid #ddd;
+			}
+		</style>
+
+		<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
+		<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.Extras.css">
+		<script type="text/javascript" src="../assets/mootools.js"></script>
+		<script type="text/javascript" src="../../Source/MooEditable/MooEditable.js"></script>
+		<script type="text/javascript" src="../../Source/MooEditable/MooEditable.UI.ButtonOverlay.js"></script>
+
+		<script type="text/javascript">
+			window.addEvent('load', function(){
+				var mooeditable = $('textarea-1').mooEditable();
+
+				MooEditable.Actions.buttonOverlay1 = {
+					title: 'Button Overlay 1',
+					type: 'button-overlay',
+					options: {
+						mode: 'text',
+						overlayHTML: (function(){
+								var html = '';
+								for (var i=1; i<=20; i++) html += '<a href="#">' + i + '</a> ';
+								return html;
+							})()
+					},
+					command: function(buttonOverlay, e){
+						var el = e.target;
+						if (el.tagName.toLowerCase() != 'a') return;
+						this.selection.insertContent(el.get('text'));
+					}
+				};
+
+				MooEditable.Actions.buttonOverlay2 = {
+					title: 'Button Overlay 2',
+					type: 'button-overlay',
+					options: {
+						mode: 'text',
+						overlayHTML: (function(){
+								var html = '';
+								for (var i=10; i<=20; i++) html += '<a href="#">' + i + '</a> ';
+								return html;
+							})()
+					},
+					command: function(buttonOverlay, e){
+						var el = e.target;
+						if (el.tagName.toLowerCase() != 'a') return;
+						this.selection.insertContent('number ' + el.get('text'));
+					}
+				};
+
+				mooeditable.toolbar.addItem('buttonOverlay1');
+				mooeditable.toolbar.addItem('buttonOverlay2');
+
+				// Post submit
+				$('theForm').addEvent('submit', function(e){
+					alert($('textarea-1').value);
+					return true;
+				});
+			});
+		</script>
+
+	</head>
+	<body>
+
+		<h1>MooEditable example with an example Button Overlay</h1>
+
+		<form id="theForm" method="post" action="http://xrado.hopto.org/post.php">
+
+			<label for="textarea-1">Textarea 1</label>
+			<textarea id="textarea-1" name="editable1">
+			&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
+			</textarea>
+
+			<input type="submit">
+
+		</form>
+
+		<div id="data"></div>
+
+	</body>
+</html>
diff --git a/Source/MooEditable/MooEditable.UI.ButtonOverlay.js b/Source/MooEditable/MooEditable.UI.ButtonOverlay.js
@@ -0,0 +1,99 @@
+/*
+Script: MooEditable.UI.ButtonOverlay.js
+	UI Class to create a button element with a popup overlay.
+
+License:
+	MIT-style license.
+
+Copyright:
+	Copyright (c) 2007-2009 [Lim Chee Aun](http://cheeaun.com).
+*/
+
+MooEditable.UI.ButtonOverlay = new Class({
+
+	Extends: MooEditable.UI.Button,
+
+	options: {
+		/*
+		onOpenOverlay: $empty,
+		onCloseOverlay: $empty,
+		*/
+		overlayHTML: '',
+		overlayClass: '',
+		overlaySize: {x: 150, y: 'auto'},
+		overlayContentClass: ''
+	},
+
+	initialize: function(options){
+		this.parent(options);
+		this.render();
+		this.el.addClass('mooeditable-ui-buttonOverlay');
+		this.renderOverlay(this.options.overlayHTML);
+	},
+
+	renderOverlay: function(html){
+		var self = this;
+		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>',
+			styles: {
+				display: 'none',
+				position: 'absolute',
+				width: self.options.overlaySize.x,
+				height: self.options.overlaySize.y
+			},
+			events: {
+				click: self.clickOverlay.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);
+		return this;
+	},
+
+	closeOverlay: function(){
+		if (!this.overlayVisible) return;
+		this.overlay.setStyle('display', 'none');
+		this.overlayVisible = false;
+		this.deactivate();
+		this.fireEvent('closeOverlay', this);
+		return this;
+	},
+
+	clickOverlay: function(e){
+		e.preventDefault();
+		this.action(e);
+		this.closeOverlay();
+	},
+
+	click: function(e){
+		e.preventDefault();
+		if (this.disabled) return;
+		if (this.overlayVisible){
+			this.closeOverlay();
+			return;
+		} else {
+			var coords = this.el.getCoordinates();
+			this.overlay.setStyles({
+				top: coords.bottom,
+				left: coords.left
+			});
+			this.openOverlay();
+		}
+	}
+
+});