- image manipulation

cheeaun · Sep 5, 2009 · 6bbe1c7 · 6bbe1c7
1 parent 38e075a
commit 6bbe1c7
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 0 deletions.
diff --git a/Assets/MooEditable/MooEditable.Image.css b/Assets/MooEditable/MooEditable.Image.css
@@ -0,0 +1,2 @@
+
+.mooeditable-ui-toolbar .image-item .button-icon{ background-position: 0 -208px; } 
diff --git a/Demos/MooEditable/MooEditable.Image.html b/Demos/MooEditable/MooEditable.Image.html
@@ -0,0 +1,59 @@
+<!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 basic example</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.Image.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.Image.js"></script>
+
+		<script type="text/javascript">
+			window.addEvent('domready', function(){
+				var mooeditable = $('textarea-1').mooEditable({
+					actions: 'bold italic underline strikethrough | image | toggleview'
+				});
+
+				// Post submit
+				$('theForm').addEvent('submit', function(e){
+					alert($('textarea-1').value);
+					return true;
+				});
+			});
+		</script>
+
+	</head>
+	<body>
+
+		<h1>MooEditable basic example</h1>
+
+		<form id="theForm" method="post" action="http://form-data.appspot.com/">
+
+			<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.Image.js b/Source/MooEditable/MooEditable.Image.js
@@ -0,0 +1,94 @@
+/*
+Script: MooEditable.Image.js
+	Image manipulation
+
+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.Image.js"></script>
+
+   <script type="text/javascript">
+	window.addEvent('load', function(){
+		var mooeditable = $('textarea-1').mooEditable({
+			actions: 'bold italic underline strikethrough | image | toggleview'
+		});
+   </script>
+
+License:
+	MIT-style license.
+
+Author:
+    Radovan Lozej <radovan lozej gmail com>
+*/
+
+MooEditable.UI.ImageDialog = function(editor){
+	var html = 'url <input type="text" class="dialog-url" value="" size="15" /> ' +
+		'alt <input type="text" class="dialog-alt" value="" size="8" /> ' +
+		'class <input type="text" class="dialog-class" value="" size="8" /> ' +
+		'align <select class="dialog-align"><option>none</option><option>left</option><option>center</option><option>right</option></select> '+
+		'<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('.dialog-url');
+			var node = editor.selection.getNode();
+			if(node.get('tag')=='img'){
+				this.el.getElement('.dialog-url').set('value',node.get('src'));
+				this.el.getElement('.dialog-alt').set('value',node.get('alt'));
+				this.el.getElement('.dialog-class').set('value',node.className);
+				this.el.getElement('.dialog-align').set('align',node.get('align'));
+			}
+			(function(){
+				input.focus();
+				input.select();
+			}).delay(10);
+		},
+		onClick: function(e){
+			if (e.target.tagName.toLowerCase() == 'button') e.preventDefault();
+			var button = document.id(e.target);
+			if (button.hasClass('dialog-cancel-button')) this.close();
+			else if (button.hasClass('dialog-ok-button')){
+				this.close();
+				var node = editor.selection.getNode();
+				if(node.get('tag')=='img'){
+					node.set('url',this.el.getElement('.dialog-url').get('value').trim());
+					node.set('alt',this.el.getElement('.dialog-alt').get('value').trim());
+					node.className = this.el.getElement('.dialog-class').get('value').trim();
+					node.set('align',this.el.getElement('.dialog-align').get('value'));
+				} else {
+					var div = new Element('div');
+					new Element('img',{
+						'src': this.el.getElement('.dialog-url').get('value').trim(),
+						'alt': this.el.getElement('.dialog-alt').get('value').trim(),
+						'class' : this.el.getElement('.dialog-class').get('value').trim(),
+						'align' : this.el.getElement('.dialog-align').get('value')
+					}).inject(div);
+					editor.selection.insertContent(div.get('html'));
+				}
+			}
+		}
+	});
+};
+
+MooEditable.Actions.extend({
+
+	image: {
+		title: 'Add/Edit Image',
+		options: {
+			shortcut: 'm'
+		},
+		dialogs: {
+			prompt: function(editor){
+				return MooEditable.UI.ImageDialog(editor);
+			}
+		},
+		command: function(){
+			this.dialogs.image.prompt.open();
+		}
+	}
+
+});