Skip to content

Commit

Permalink
added ability to edit already created todo items
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsloughter
tsloughter committed Jan 16, 2012
1 parent 8d96b18 commit adc33e4
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 19 deletions.
16 changes: 8 additions & 8 deletions resources/style.css
View file
Expand Up @@ -18,8 +18,8 @@ body {
height:50px;
}
.hero-unit {
position:relative;
top:60px;
position:relative;
top:60px;
margin-bottom:0;
padding:5px 0;
background:transparent;}
Expand Down Expand Up @@ -135,7 +135,7 @@ ul#todo_list li:first-child {border-top:none;}
ul#todo_list li:hover {background-color:rgba(0,0,0,0.05);}
ul#todo_list input[type="checkbox"]{
float:left;
margin:4px 0;
margin:4px 15px;
position:relative;
display:inline-block;
}
Expand All @@ -147,7 +147,7 @@ ul#todo_list .icon.icon-remove {
}
ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}

.todo_content {padding:0 20px;font-size:18px; line-height:22px;color:#6C6B66;}
.todo_content {padding:0 5px;font-size:18px; line-height:22px;color:#6C6B66;}

/* Edit input */
#todo_list .editing .display, #todo_list .edit {display: none;}
Expand Down Expand Up @@ -192,8 +192,8 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
.container, .container-fluid, .footer { width: 300px; }

/* Columns */
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
.span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
.span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
.span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds { width: 300px; }

/* Offsets */
Expand Down Expand Up @@ -221,8 +221,8 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
.container, .container-fluid, .footer { width: 460px;}

/* Columns */
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
.span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
.span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
.span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds{ width: 460px; }
}

Expand Down
37 changes: 26 additions & 11 deletions src/todo.opa
View file
Expand Up @@ -62,12 +62,11 @@ module Todo {
add_todo_to_page(id, x, false)
}

exposed @async function db_add_todo(string id,string x) {
exposed @async function db_add_todo(string id, string x) {
username = User.get_username();
items = /todo_items[username];
@/todo_items[username] <-
StringMap.add(id, { value : x, done : false, created_at : "" },
items)
StringMap.add(id, { value : x, done : false, created_at : "" }, items)
}

exposed function add_todos() {
Expand All @@ -76,30 +75,46 @@ module Todo {
StringMap.iter((function(x,y){add_todo_to_page(x, y.value, y.done)}), items)
}

function add_todo_to_page(string id,string value,bool is_done) {
function update_todo(string id, string value) {
db_add_todo(id, value)
update_todo_on_page(id, value)
}

function update_todo_on_page(string id, string value) {
line = <div id={id^"_todo"} class="todo_content" onclick={function(_){make_editable(id, value)}}>{ value }</div>
_ = Dom.put_replace(#{id^"_input"}, Dom.of_xhtml(line));
void
}

function make_editable(string id, string value) {
line = <input id={id^"_input"} class="todo_content" onnewline={function(_){update_todo(id, Dom.get_value(#{id^"_input"}))}} value={ value } />
_ = Dom.put_replace(#{id^"_todo"}, Dom.of_xhtml(line));
update_counts()
}

function add_todo_to_page(string id, string value, bool is_done) {
line =
<li><div class="todo {if (is_done) "done" else ""}" id={ id }>
<div class="display">
<span class="todo_destroy icon icon-remove" onclick={function(_){remove_item(id)}}></span>
<input class="check" type="checkbox" onclick={function(_){make_done(id)}}/>
<div class="todo_content">{ value }</div>
</div>
<div class="edit">
<input class="todo-input xlarge" type="text" value="" />
<div id={id^"_todo"} class="todo_content" onclick={function(_){make_editable(id, value)}}>{ value }</div>
</div>
</div></li>
Dom.transform([#todo_list =+ line]);
Dom.scroll_to_bottom(#todo_list);
Dom.set_value(#new_todo, "");
update_counts()
}

function todos(){
if (User.is_logged()){
mypage("Todos",todos_page())
} else {
mypage("Sign Up",User.new())
}
}

function todos_page() {
<div class="topbar">
<div class="container">
Expand All @@ -110,7 +125,7 @@ module Todo {
<div class="container hero-unit">
<div id=#create_todo>
<input id=#new_todo class="xlarge" placeholder="What needs to be done?" type="text"
onnewline={function(_){add_todo(Dom.get_value(#new_todo))}} />
onnewline={function(_){add_todo(Dom.get_value(#new_todo))}} />
</div>
</div>
<div class="container" id="todoapp">
Expand All @@ -121,7 +136,7 @@ module Todo {
<div id="todo_stats" class="well">
<p class="todo_clear pull-right">
<a class="btn" href="#" onclick={function(_){remove_all_done()}}>
<span class="icon icon-white icon-trash"/> Clear
<span class="icon icon-white icon-trash"/> Clear
<span id=#number_done class="number-done">0</span>
completed <span class="word-done">items</span>
</a>
Expand All @@ -133,7 +148,7 @@ module Todo {
</div>
</div>
<div class="footer">Note: This is beta version. No guarentee your data wont be lost.</div>
</div>
</div>
}

resource =
Expand Down

0 comments on commit adc33e4

Please sign in to comment.