assertchris · June 8, 2012 13:54
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
    <head>
        <style type="text/css">

            body
            {
                margin: 0;
                padding: 0;
                background: #fff;
                font-family: arial;
                font-size: 14px;
                color: #333;
            }

            .tasks-container
            {
                width: 320px;
                height: 480px;
                margin: 20px auto;
                position: relative;
                background-color: #f5f5f5;
                overflow: hidden;
            }

            .tasks-heading
            {
                margin: 0;
                padding: 0;
                position: absolute;
                top: 10px;
                left: 20px;
                width: 280px;
            }

            .add-link
            {
                position: absolute;
                right: 0;
                top: 0;
                width: 32px;
                height: 32px;
                line-height: 32px;
                border-radius: 16px;
                font-size: 20px;
                text-align: center;
                background-color: #ccc;
                text-decoration: none;
                color: #fff;
            }

            .add-container
            {
                position: absolute;
                top: 480px;
                left: 20px;
                width: 280px;
                height: 40px;
                background-color: #f0f0f0;
                border: solid 1px #d5d5d5;
                opacity: 0;
            }

            .text-input
            {
                position: absolute;
                top: 5px;
                left: 5px;
                width: 250px;
                height: 30px;
                line-height: 30px;
                border: 0;
                padding: 0 10px;
            }

            .save-link, .edit-link, .delete-link
            {
                position: absolute;
                color: #f00;
                right: 15px;
                top: 0;
                line-height: 40px;
            }

            .edit-link
            {
                right: 50px;
            }

            .delete-link
            {
                right: 0;
            }

            .tasks-list
            {
                position: absolute;
                top: 50px;
                left: 40px;
                height: 400px;
                margin: 0;
                padding: 0;
                width: 260px;
            }

            li
            {
                width: 100%;
                position: relative;
                line-height: 40px;
            }


        </style>
    </head>
    <body>
        <div class="tasks-container">
            <h1 class="tasks-heading">
                <a href="#" class="add-link">+</a>
                Tasks
            </h1>
            <div class="add-container">
                <input type="text" class="text-input" id="theTextInput" />
                <a href="#" class="save-link">save</a>
            </div>
            <ol class="tasks-list">
                <li id="task_0">
                    <span class="text-span">Design the web app</span>
                    <a href="#" class="edit-link">edit</a>
                    <a href="#" class="delete-link">delete</a>
                </li>
                <li id="task_1">
                    <span class="text-span">Build the web app</span>
                    <a href="#" class="edit-link">edit</a>
                    <a href="#" class="delete-link">delete</a>
                </li>
                <li id="task_2">
                    <span class="text-span">Have some tea</span>
                    <a href="#" class="edit-link">edit</a>
                    <a href="#" class="delete-link">delete</a>
                </li>
            </ol>
        </div>
        <script type="text/javascript" src="mootools.core.js"></script>
        <script type="text/javascript">
            window.addEvent("domready", function() {

                var tasksContainer = document.getElement(".tasks-container");


                var addContainer = document.getElement(".add-container");
                var addLink = document.getElement(".add-link");
                var addFx = new Fx.Morph(addContainer, {
                    "duration": 250
                });

                var saveLink = document.getElement(".save-link");
                var textInput = document.getElement(".text-input");
                var tasksList = document.getElement(".tasks-list");

                var editingTask = null;
                var taskId = 3;
                var goingUp = true;

                addLink.addEvent("click", function(e) {

                    e.preventDefault();

                    if (goingUp) {

                        addFx.start({
                            "top": 440,
                            "opacity": 1
                        });

                        goingUp = false;

                    } else {

                        addFx.start({
                            "top": 480,
                            "opacity": 0
                        });

                        goingUp = true;

                    }

                    editingTask = null;
                    
                });

                saveLink.addEvent("click", function(e) {

                    e.preventDefault();

                    if (editingTask == null) {

                        var item = new Element("li", {
                            "id": "task_" + taskId++
                        });

                        var span = new Element("span", {
                            "class": "text-span",
                            "text": textInput.get("value")
                        });

                        var editLink = new Element("a", {
                            "text": "edit",
                            "class": "edit-link",
                            "href": "#"
                        });

                        var deleteLink = new Element("a", {
                            "text": "delete",
                            "class": "delete-link",
                            "href": "#"
                        });

                        tasksList.adopt(
                            item.adopt(span, editLink, deleteLink)
                        );

                        textInput.set("value", "");

                    } else {

                        // editingTask = "task_14"
                        // "#task_14 .text-span"

                        var span = document.getElement("#" + editingTask + " .text-span");
                        span.set("text", textInput.get("value"));

                        textInput.set("value", "");
                        editingTask = null;

                        addFx.start({
                            "top": 480,
                            "opacity": 0
                        });

                        goingUp = true;

                    }
                    
                });



                tasksContainer.addEvents({
                    "click:relay(.edit-link)": function(e) {

                        e.preventDefault();

                        var parent = this.getParent("li");
                        var span = parent.getElement(".text-span");

                        editingTask = parent.get("id");
                        textInput.set("value", span.get("text"));

                        addFx.start({
                            "top": 440,
                            "opacity": 1
                        });

                        goingUp = false;

                    },

                    "click:relay(.delete-link)": function(e) {

                        e.preventDefault();

                        if (confirm("Are you sure you want to delete?")) {

                            this.getParent("li").dispose();

                        }

                    }
                });

            });
        </script> 
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">

	body
	{
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: arial;
	font-size: 14px;
	color: #333;
	}

	.tasks-container
	{
	width: 320px;
	height: 480px;
	margin: 20px auto;
	position: relative;
	background-color: #f5f5f5;
	overflow: hidden;
	}

	.tasks-heading
	{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 10px;
	left: 20px;
	width: 280px;
	}

	.add-link
	{
	position: absolute;
	right: 0;
	top: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 16px;
	font-size: 20px;
	text-align: center;
	background-color: #ccc;
	text-decoration: none;
	color: #fff;
	}

	.add-container
	{
	position: absolute;
	top: 480px;
	left: 20px;
	width: 280px;
	height: 40px;
	background-color: #f0f0f0;
	border: solid 1px #d5d5d5;
	opacity: 0;
	}

	.text-input
	{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 250px;
	height: 30px;
	line-height: 30px;
	border: 0;
	padding: 0 10px;
	}

	.save-link, .edit-link, .delete-link
	{
	position: absolute;
	color: #f00;
	right: 15px;
	top: 0;
	line-height: 40px;
	}

	.edit-link
	{
	right: 50px;
	}

	.delete-link
	{
	right: 0;
	}

	.tasks-list
	{
	position: absolute;
	top: 50px;
	left: 40px;
	height: 400px;
	margin: 0;
	padding: 0;
	width: 260px;
	}

	li
	{
	width: 100%;
	position: relative;
	line-height: 40px;
	}


	</style>
	</head>
	<body>
	<div class="tasks-container">
	<h1 class="tasks-heading">
	<a href="#" class="add-link">+</a>
	Tasks
	</h1>
	<div class="add-container">
	<input type="text" class="text-input" id="theTextInput" />
	<a href="#" class="save-link">save</a>
	</div>
	<ol class="tasks-list">
	<li id="task_0">
	<span class="text-span">Design the web app</span>
	<a href="#" class="edit-link">edit</a>
	<a href="#" class="delete-link">delete</a>
	</li>
	<li id="task_1">
	<span class="text-span">Build the web app</span>
	<a href="#" class="edit-link">edit</a>
	<a href="#" class="delete-link">delete</a>
	</li>
	<li id="task_2">
	<span class="text-span">Have some tea</span>
	<a href="#" class="edit-link">edit</a>
	<a href="#" class="delete-link">delete</a>
	</li>
	</ol>
	</div>
	<script type="text/javascript" src="mootools.core.js"></script>
	<script type="text/javascript">
	window.addEvent("domready", function() {

	var tasksContainer = document.getElement(".tasks-container");


	var addContainer = document.getElement(".add-container");
	var addLink = document.getElement(".add-link");
	var addFx = new Fx.Morph(addContainer, {
	"duration": 250
	});

	var saveLink = document.getElement(".save-link");
	var textInput = document.getElement(".text-input");
	var tasksList = document.getElement(".tasks-list");

	var editingTask = null;
	var taskId = 3;
	var goingUp = true;

	addLink.addEvent("click", function(e) {

	e.preventDefault();

	if (goingUp) {

	addFx.start({
	"top": 440,
	"opacity": 1
	});

	goingUp = false;

	} else {

	addFx.start({
	"top": 480,
	"opacity": 0
	});

	goingUp = true;

	}

	editingTask = null;

	});

	saveLink.addEvent("click", function(e) {

	e.preventDefault();

	if (editingTask == null) {

	var item = new Element("li", {
	"id": "task_" + taskId++
	});

	var span = new Element("span", {
	"class": "text-span",
	"text": textInput.get("value")
	});

	var editLink = new Element("a", {
	"text": "edit",
	"class": "edit-link",
	"href": "#"
	});

	var deleteLink = new Element("a", {
	"text": "delete",
	"class": "delete-link",
	"href": "#"
	});

	tasksList.adopt(
	item.adopt(span, editLink, deleteLink)
	);

	textInput.set("value", "");

	} else {

	// editingTask = "task_14"
	// "#task_14 .text-span"

	var span = document.getElement("#" + editingTask + " .text-span");
	span.set("text", textInput.get("value"));

	textInput.set("value", "");
	editingTask = null;

	addFx.start({
	"top": 480,
	"opacity": 0
	});

	goingUp = true;

	}

	});



	tasksContainer.addEvents({
	"click:relay(.edit-link)": function(e) {

	e.preventDefault();

	var parent = this.getParent("li");
	var span = parent.getElement(".text-span");

	editingTask = parent.get("id");
	textInput.set("value", span.get("text"));

	addFx.start({
	"top": 440,
	"opacity": 1
	});

	goingUp = false;

	},

	"click:relay(.delete-link)": function(e) {

	e.preventDefault();

	if (confirm("Are you sure you want to delete?")) {

	this.getParent("li").dispose();

	}

	}
	});

	});
	</script>
	</body>
	</html>