Friendpaste

--- Revision None
+++ Revision 5fad86446386
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+    <head>
+        <meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8"/>
+        <title>My Todos</title>
+        <script src="../script/couch.js" type="text/javascript" charset="utf-8"></script>
+        <script src="../script/json.js" type="text/javascript" charset="utf-8"></script>
+
+        <script type="text/javascript" charset="utf-8">
+        function $(e)
+        {
+            return document.getElementById(e);
+        }
+
+        var Couch_Todo = 
+        {
+            _todos:{},
+            db: new CouchDB("todo"),
+
+            insert: function(todo)
+            {
+                // DOM-fu
+                var list_item = document.createElement("li");
+                list_item.innerHTML = todo.text + ' <a href="#" onClick="Couch_Todo.remove(this.parentNode); return false;">X</a>';
+
+                $("todos").insertBefore(list_item, $("todos").firstChild);
+
+                this._todos[todo._id] = todo; // save todo object, so we can access the _rev when we want to delete.
+                list_item.id = todo._id; // save new id in DOM object
+
+                this.updateEmpty();
+            },
+
+            add: function(todo)
+            {
+                //automatically save time
+                todo.time = (new Date()).getTime();
+                this.db.save(todo);
+                this.insert(todo);
+            },
+
+            load:function()
+            {
+                var all_docs = this.db.view("todo/all");
+
+                if(all_docs && all_docs.total_rows > 0) {
+                    for(var idx = 0; idx < all_docs.total_rows; idx++) {
+                        var todo = all_docs.rows[idx];
+                        this.insert({
+                            _id:todo.id,
+                            _rev:todo.value.rev,
+                            text:todo.value.text
+                        });
+                    }
+                }
+            },
+
+            remove:function(li)
+            {
+                var doc = this._todos[li.id];
+                this.db.deleteDoc(doc);
+                this._todos[li.id] = null;
+
+                $("todos").removeChild($(li.id));
+                this.updateEmpty();
+
+                // focus the input field
+                $("todo").focus();
+            },
+
+            updateEmpty: function()
+            {
+                //if there are no todos, show a message
+                $("empty").style.display = (0 == $("todos").childNodes.length)?"block":"none";
+            }
+        }    
+
+        window.onload = function()
+        {
+            // load saved todos
+            Couch_Todo.load();
+
+            // what to do when hitting enter in the input field
+            $("add").onsubmit = function()
+            {
+                var value = $("todo").value;
+                $("todo").value = ""; // reset input box
+                if(value) { // don't add empty todos
+                    Couch_Todo.add({text:value});
+                }
+
+                // don't submit the form
+                return false;
+            }
+
+            // focus the input field when the document loads
+            $("todo").focus();
+        }
+        </script>
+    </head> 
+
+    <body id="index">
+        <form id="add" action="">
+                <input type="text" name="todo" value="" id="todo"/>
+        </form>
+
+        <ul id="todos"></ul>
+
+        <div id="empty">Enter todo items in the box above and hit enter.</div>
+    </body>
+</html>
a	b
	0	+	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	0	+	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	0	+	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	0	+	<head>
	0	+	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8"/>
	0	+	<title>My Todos</title>
	0	+	<script src="../script/couch.js" type="text/javascript" charset="utf-8"></script>
	0	+	<script src="../script/json.js" type="text/javascript" charset="utf-8"></script>
	0	+
	0	+	<script type="text/javascript" charset="utf-8">
	0	+	function $(e)
	0	+	{
	0	+	return document.getElementById(e);
	0	+	}
	0	+
	0	+	var Couch_Todo =
	0	+	{
	0	+	_todos:{},
	0	+	db: new CouchDB("todo"),
	0	+
	0	+	insert: function(todo)
	0	+	{
	0	+	// DOM-fu
	0	+	var list_item = document.createElement("li");
	0	+	list_item.innerHTML = todo.text + ' <a href="#" onClick="Couch_Todo.remove(this.parentNode); return false;">X</a>';
	0	+
	0	+	$("todos").insertBefore(list_item, $("todos").firstChild);
	0	+
	0	+	this._todos[todo._id] = todo; // save todo object, so we can access the _rev when we want to delete.
	0	+	list_item.id = todo._id; // save new id in DOM object
	0	+
	0	+	this.updateEmpty();
	0	+	},
	0	+
	0	+	add: function(todo)
	0	+	{
	0	+	//automatically save time
	0	+	todo.time = (new Date()).getTime();
	0	+	this.db.save(todo);
	0	+	this.insert(todo);
	0	+	},
	0	+
	0	+	load:function()
	0	+	{
	0	+	var all_docs = this.db.view("todo/all");
	0	+
	0	+	if(all_docs && all_docs.total_rows > 0) {
	0	+	for(var idx = 0; idx < all_docs.total_rows; idx++) {
	0	+	var todo = all_docs.rows[idx];
	0	+	this.insert({
	0	+	_id:todo.id,
	0	+	_rev:todo.value.rev,
	0	+	text:todo.value.text
	0	+	});
	0	+	}
	0	+	}
	0	+	},
	0	+
	0	+	remove:function(li)
	0	+	{
	0	+	var doc = this._todos[li.id];
	0	+	this.db.deleteDoc(doc);
	0	+	this._todos[li.id] = null;
	0	+
	0	+	$("todos").removeChild($(li.id));
	0	+	this.updateEmpty();
	0	+
	0	+	// focus the input field
	0	+	$("todo").focus();
	0	+	},
	0	+
	0	+	updateEmpty: function()
	0	+	{
	0	+	//if there are no todos, show a message
	0	+	$("empty").style.display = (0 == $("todos").childNodes.length)?"block":"none";
	0	+	}
	0	+	}
	0	+
	0	+	window.onload = function()
	0	+	{
	0	+	// load saved todos
	0	+	Couch_Todo.load();
	0	+
	0	+	// what to do when hitting enter in the input field
	0	+	$("add").onsubmit = function()
	0	+	{
	0	+	var value = $("todo").value;
	0	+	$("todo").value = ""; // reset input box
	0	+	if(value) { // don't add empty todos
	0	+	Couch_Todo.add({text:value});
	0	+	}
	0	+
	0	+	// don't submit the form
	0	+	return false;
	0	+	}
	0	+
	0	+	// focus the input field when the document loads
	0	+	$("todo").focus();
	0	+	}
	0	+	</script>
	0	+	</head>
	0	+
	0	+	<body id="index">
	0	+	<form id="add" action="">
	0	+	<input type="text" name="todo" value="" id="todo"/>
	0	+	</form>
	0	+
	0	+	<ul id="todos"></ul>
	0	+
	0	+	<div id="empty">Enter todo items in the box above and hit enter.</div>
	0	+	</body>
	0	+	</html>
...