Created
December 11, 2014 19:13
-
-
Save bendavis78/8b4940bba02153e9c7f4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>VanillaJS • TodoMVC</title> | |
<link rel="stylesheet" href="style/base.css"> | |
<!--[if IE]> | |
<script src="style/ie.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<section id="todoapp"> | |
<header id="header"> | |
<h1>todos</h1> | |
<input id="new-todo" placeholder="What needs to be done?" autofocus> | |
</header> | |
<section id="main"> | |
<ul id="todo-list"></ul> | |
</section> | |
<footer id="footer"> | |
<span id="todo-count"></span> | |
<div id="sync-wrapper"> | |
<div id="sync-syncing">Currently syncing</div> | |
<div id="sync-error">There was a problem syncing</div> | |
</div> | |
</footer> | |
</section> | |
<footer id="info"> | |
<p>Double-click to edit a todo</p> | |
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p> | |
<p>Created by <a href="http://twitter.com/ffesseler">Florian Fesseler</a></p> | |
<p>Cleanup, edits by <a href="http://github.com/boushley">Aaron Boushley</a></p> | |
</footer> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/pouchdb/3.2.0/pouchdb.js"></script> | |
<script> | |
(function() { | |
'use strict'; | |
var ENTER_KEY = 13; | |
var newTodoDom = document.getElementById('new-todo'); | |
var syncDom = document.getElementById('sync-wrapper'); | |
// EDITING STARTS HERE (you dont need to edit anything above this line) | |
var dbName = 'todos'; | |
var db = new PouchDB(dbName); | |
var remoteCouch = 'http://localhost:5984/todos'; | |
db.info().then(function(info) { | |
db.changes({ | |
since: 'now', | |
live: true | |
}).on('change', showTodos); | |
}).catch(err); | |
var err = console.error.bind(console); | |
var log = console.log.bind(console); | |
db.info(function(err, info) { | |
db.changes({since: info.update_seq, onChange: showTodos, continuous: true}); | |
}); | |
// We have to create a new todo document and enter it in the database | |
function addTodo(text) { | |
var todo = { | |
_id: new Date().toISOString(), | |
title: text, | |
completed: false | |
}; | |
db.put(todo).then(function(result) { | |
console.log('Successfully posted a todo!'); | |
}).catch(err); | |
} | |
// Show the current list of todos by reading them from the database | |
function showTodos() { | |
db.allDocs({include_docs: true, descending: true}).then(function(doc) { | |
redrawTodosUI(doc.rows); | |
}).catch(err); | |
} | |
function checkboxChanged(todo, event) { | |
todo.completed = event.target.checked; | |
db.put(todo); | |
} | |
// User pressed the delete button for a todo, delete it | |
function deleteButtonPressed(todo) { | |
db.remove(todo); | |
} | |
// The input box when editing a todo has blurred, we should save | |
// the new title or delete the todo if the title is empty | |
function todoBlurred(todo, event) { | |
var trimmedText = event.target.value.trim(); | |
if (trimmedText) { | |
todo.title = trimmedText; | |
db.put(todo); | |
} else { | |
db.remove(todo); | |
} | |
} | |
// Initialise a sync with the remote server | |
function sync() { | |
syncDom.setAttribute('data-sync-state', 'syncing'); | |
PouchDB.sync(dbName, remoteCouch, {live: true}) | |
.on('complete', function(info) { | |
syncDom.setAttribute('data-sync-state', 'syncing'); | |
}); | |
} | |
// EDITING STARTS HERE (you dont need to edit anything below this line) | |
// There was some form or error syncing | |
function syncError() { | |
syncDom.setAttribute('data-sync-state', 'error'); | |
} | |
// User has double clicked a todo, display an input so they can edit the title | |
function todoDblClicked(todo) { | |
var div = document.getElementById('li_' + todo._id); | |
var inputEditTodo = document.getElementById('input_' + todo._id); | |
div.className = 'editing'; | |
inputEditTodo.focus(); | |
} | |
// If they press enter while editing an entry, blur it to trigger save | |
// (or delete) | |
function todoKeyPressed(todo, event) { | |
if (event.keyCode === ENTER_KEY) { | |
var inputEditTodo = document.getElementById('input_' + todo._id); | |
inputEditTodo.blur(); | |
} | |
} | |
// Given an object representing a todo, this will create a list item | |
// to display it. | |
function createTodoListItem(todo) { | |
var checkbox = document.createElement('input'); | |
checkbox.className = 'toggle'; | |
checkbox.type = 'checkbox'; | |
checkbox.addEventListener('change', checkboxChanged.bind(window, todo)); | |
var label = document.createElement('label'); | |
label.appendChild( document.createTextNode(todo.title)); | |
label.addEventListener('dblclick', todoDblClicked.bind(window, todo)); | |
var deleteLink = document.createElement('button'); | |
deleteLink.className = 'destroy'; | |
deleteLink.addEventListener( 'click', deleteButtonPressed.bind(window, todo)); | |
var divDisplay = document.createElement('div'); | |
divDisplay.className = 'view'; | |
divDisplay.appendChild(checkbox); | |
divDisplay.appendChild(label); | |
divDisplay.appendChild(deleteLink); | |
var inputEditTodo = document.createElement('input'); | |
inputEditTodo.id = 'input_' + todo._id; | |
inputEditTodo.className = 'edit'; | |
inputEditTodo.value = todo.title; | |
inputEditTodo.addEventListener('keypress', todoKeyPressed.bind(window, todo)); | |
inputEditTodo.addEventListener('blur', todoBlurred.bind(window, todo)); | |
var li = document.createElement('li'); | |
li.id = 'li_' + todo._id; | |
li.appendChild(divDisplay); | |
li.appendChild(inputEditTodo); | |
if (todo.completed) { | |
li.className += 'complete'; | |
checkbox.checked = true; | |
} | |
return li; | |
} | |
function redrawTodosUI(todos) { | |
var ul = document.getElementById('todo-list'); | |
ul.innerHTML = ''; | |
todos.forEach(function(todo) { | |
ul.appendChild(createTodoListItem(todo.doc)); | |
}); | |
} | |
function newTodoKeyPressHandler( event ) { | |
if (event.keyCode === ENTER_KEY) { | |
addTodo(newTodoDom.value); | |
newTodoDom.value = ''; | |
} | |
} | |
function addEventListeners() { | |
newTodoDom.addEventListener('keypress', newTodoKeyPressHandler, false); | |
} | |
addEventListeners(); | |
showTodos(); | |
if (remoteCouch) { | |
sync(); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment