Skip to content

Instantly share code, notes, and snippets.

@theblacksquid

theblacksquid/index.coffee

Last active July 18, 2016 00:27
Show Gist options
  • Save theblacksquid/094e9903cac36231049d471dd9da2ff8 to your computer and use it in GitHub Desktop.
Save theblacksquid/094e9903cac36231049d471dd9da2ff8 to your computer and use it in GitHub Desktop.
Download ZIP
pure Coffeescript todos app
Raw
index.coffee
class Item
@_itemcount: 0
constructor: ->
@constructor._itemcount++ # refers to <classname>._itemcount
@id = @constructor._itemcount
@note = ""
@completed = false
class List
constructor: ->
@list = []
add: (items...) ->
for item in items
@list.push item
@
get_item: (id) ->
@list.filter ((item) -> if item.id is id then item)
remove: (id) ->
index = @list.indexOf(@get_item id)
if (index > -1) is true
@list.splice index, 1
class ItemView
# the el attribute refers to the DOM element to where this
# view will be bound to
constructor: (@el) ->
@item = new Item
template: (input) ->
"""
<li id='#{input.id}-view'>
<input type='checkbox' id='#{input.id}-tick'>
#{input.note}
<button class='delete' id='#{input.id}-delete'>X</button>
</li>
"""
render: ->
$(@el).append @template(@item)
@remove() # make sure to add any DOM events to the render method
remove: ->
button = $("#"+"#{@item.id}-delete")
self = $("#"+"#{@item.id}-view")
button.click (-> self.remove())
class ListView
constructor: (@el) ->
@list = new List
template: ->
"""
<p><input id='input' type='text' placeholder='what do you need done?'></p>
<button id='add-item'>Add Item</button> <br />
<input type='checkbox' id='mark-all'> Mark All
<ul id='list'></ul>
<button id='delete-selected'>Delete Selected</button>
"""
render: ->
$(@el).append @template() # blank string is a placeholder
@addItem()
@markAllPressed()
@deleteSelected()
addItem: ->
self = @
$("#add-item").click (->
note = $('#input').val()
item = new ItemView("#list")
item.item.note = note
self.list.add item.item
item.render()
)
markAllPressed: ->
$('#mark-all').change (->
checked = @checked
$(":checkbox").prop("checked", checked)
)
deleteSelected: ->
$("#delete-selected").click (->
$(".delete").click()
)
myView = new ListView("#app")
myView.render()
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Todo's in Coffee</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// Generated by CoffeeScript 1.10.0
(function() {
var Item, ItemView, List, ListView, myView,
slice = [].slice;
Item = (function() {
Item._itemcount = 0;
function Item() {
this.constructor._itemcount++;
this.id = this.constructor._itemcount;
this.note = "";
this.completed = false;
}
return Item;
})();
List = (function() {
function List() {
this.list = [];
}
List.prototype.add = function() {
var i, item, items, len;
items = 1 <= arguments.length ? slice.call(arguments, 0) : [];
for (i = 0, len = items.length; i < len; i++) {
item = items[i];
this.list.push(item);
}
return this;
};
List.prototype.get_item = function(id) {
return this.list.filter((function(item) {
if (item.id === id) {
return item;
}
}));
};
List.prototype.remove = function(id) {
var index;
index = this.list.indexOf(this.get_item(id));
if ((index > -1) === true) {
return this.list.splice(index, 1);
}
};
return List;
})();
ItemView = (function() {
function ItemView(el) {
this.el = el;
this.item = new Item;
}
ItemView.prototype.template = function(input) {
return "<li id='" + input.id + "-view'>\n <input type='checkbox' id='" + input.id + "-tick'>\n " + input.note + " \n <button class='delete' id='" + input.id + "-delete'>X</button>\n</li>";
};
ItemView.prototype.render = function() {
$(this.el).append(this.template(this.item));
return this.remove();
};
ItemView.prototype.remove = function() {
var button, self;
button = $("#" + (this.item.id + "-delete"));
self = $("#" + (this.item.id + "-view"));
return button.click((function() {
return self.remove();
}));
};
return ItemView;
})();
ListView = (function() {
function ListView(el) {
this.el = el;
this.list = new List;
}
ListView.prototype.template = function() {
return "<p><input id='input' type='text' placeholder='what do you need done?'></p>\n<button id='add-item'>Add Item</button> <br />\n<input type='checkbox' id='mark-all'> Mark All\n<ul id='list'></ul>\n<button id='delete-selected'>Delete Selected</button>";
};
ListView.prototype.render = function() {
$(this.el).append(this.template());
this.addItem();
this.markAllPressed();
return this.deleteSelected();
};
ListView.prototype.addItem = function() {
var self;
self = this;
return $("#add-item").click((function() {
var item, note;
note = $('#input').val();
item = new ItemView("#list");
item.item.note = note;
self.list.add(item.item);
return item.render();
}));
};
ListView.prototype.markAllPressed = function() {
return $('#mark-all').change((function() {
var checked;
checked = this.checked;
return $(":checkbox").prop("checked", checked);
}));
};
ListView.prototype.deleteSelected = function() {
return $("#delete-selected").click((function() {
return $(".delete").click();
}));
};
return ListView;
})();
myView = new ListView("#app");
myView.render();
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment