Skip to content

Instantly share code, notes, and snippets.

@assertchris
Created June 8, 2012 13:54
Show Gist options
  • Save assertchris/2895729 to your computer and use it in GitHub Desktop.
Save assertchris/2895729 to your computer and use it in GitHub Desktop.
Examples
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment