added add table button

cheeaun · Sep 5, 2009 · 28d8bab · 28d8bab
1 parent eb8204c
commit 28d8bab
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 0 deletions.
diff --git a/Assets/MooEditable/Editable.css b/Assets/MooEditable/Editable.css
@@ -0,0 +1,3 @@
+table { border: 1px dashed #BBBBBB; font:inherit; }
+table td, table th { border: 1px dashed #BBBBBB; }
+table th { font-weight:bold ; }
diff --git a/Assets/MooEditable/MooEditable.Table.css b/Assets/MooEditable/MooEditable.Table.css
@@ -0,0 +1,6 @@
+
+.mooeditable-ui-toolbar .table-item .button-icon {
+	background: transparent url(Tango/table.png) no-repeat center center;
+}
+
+
diff --git a/Assets/MooEditable/Tango/table.png b/Assets/MooEditable/Tango/table.png
diff --git a/Demos/MooEditable/MooEditable.Table.html b/Demos/MooEditable/MooEditable.Table.html
@@ -0,0 +1,60 @@
+<!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 Table button</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.Table.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.Table.js"></script>
+
+		<script type="text/javascript">
+			window.addEvent('load', function(){
+				var mooeditable = $('textarea-1').mooEditable({
+					actions: 'bold italic underline strikethrough | table | toggleview',
+					externalCSS: '../../Assets/MooEditable/Editable.css'
+				});
+
+				// Post submit
+				$('theForm').addEvent('submit', function(e){
+					alert($('textarea-1').value);
+					return true;
+				});
+			});
+		</script>
+
+	</head>
+	<body>
+
+		<h1>MooEditable example with Table button</h1>
+
+		<form id="theForm" method="post" action="">
+
+			<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.Table.js b/Source/MooEditable/MooEditable.Table.js
@@ -0,0 +1,80 @@
+/*
+Script: MooEditable.Table.js
+	Add table
+
+Usage:
+   Add the following tags in your html
+   <link rel="stylesheet" type="text/css" href="MooEditable.Table.css">
+   <script type="text/javascript" src="mootools.js"></script>
+   <script type="text/javascript" src="MooEditable.js"></script>
+   <script type="text/javascript" src="MooEditable.Table.js"></script>
+
+   <script type="text/javascript">
+	window.addEvent('load', function(){
+		var mooeditable = $('textarea-1').mooEditable({
+			actions: 'bold italic underline strikethrough | table | toggleview'
+		});
+   </script>
+
+License:
+	MIT-style license.
+
+Author:
+    Radovan Lozej <radovan lozej gmail com>
+*/
+
+MooEditable.UI.TableDialog = function(editor){
+	var html = '<label class="dialog-label">Insert table</label>'
+		+ '<input type="text" class="table-r" value="" size="4" /> x '
+		+ '<input type="text" class="table-c" value="" size="4" />'
+		+ '<button class="dialog-button dialog-ok-button">OK</button>'
+		+ '<button class="dialog-button dialog-cancel-button">Cancel</button>';
+	return new MooEditable.UI.Dialog(html, {
+		'class': 'mooeditable-prompt-dialog',
+		onOpen: function(){
+			var input = this.el.getElement('.table-r');
+			(function(){
+				input.focus();
+				input.select();
+			}).delay(10);
+			//console.log(editor.selection.getNode());
+		},
+		onClick: function(e){
+			e.preventDefault();
+			if (e.target.tagName.toLowerCase() != 'button') return;
+			var button = document.id(e.target);
+			if (button.hasClass('dialog-cancel-button')) this.close();
+			else if (button.hasClass('dialog-ok-button')){
+				this.close();
+				var row = this.el.getElement('.table-r').value.toInt();
+				var col = this.el.getElement('.table-c').value.toInt();
+				if(!(row>0 && col>0)) return;
+				var div,table,tbody,ro = [];
+				div = new Element('tdiv');
+				table = new Element('table').set('border','0').set('width','100%').inject(div);
+				tbody = new Element('tbody').inject(table);
+				for(var r=0;r<row;r++){
+					ro[r] = new Element('tr').inject(tbody,'bottom');
+					for(var c=0;c<col;c++){
+						new Element((r==0)?'th':'td').set('html',(r==0)?('header '+(c+1)):' ').inject(ro[r],'bottom');
+					}
+				}
+				editor.selection.insertContent(div.get('html'));
+			}
+		}
+	});
+};
+
+
+MooEditable.Actions.table = {
+
+	title: 'Add Table',
+	dialogs: {
+		prompt: function(editor){
+			return MooEditable.UI.TableDialog(editor);
+		}
+	},
+	command: function(){
+		this.dialogs.table.prompt.open();
+	}
+};