boranton/testcafe-workshop
2
0
Fork 1
Code Issues 2 Pull Requests Releases Wiki Activity

bundlify everything

Browse Source
This commit is contained in:
Kent C. Dodds 2016-06-16 02:30:38 -06:00
parent 985e1562ef
commit 1307a2b85d
10 changed files with 854 additions and 870 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -39,13 +39,6 @@
<p>Ported to ES6 by <a href="https://twitter.com/kentcdodds">Kent C. Dodds</a></p> <p>Ported to ES6 by <a href="https://twitter.com/kentcdodds">Kent C. Dodds</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
<script src="src/helpers.js"></script>
<script src="src/store.js"></script>
<script src="src/model.js"></script>
<script src="src/template.js"></script>
<script src="src/view.js"></script>
<script src="src/controller.js"></script>
<script src="src/app.js"></script>
<script src="dist/bundle.js"></script> <script src="dist/bundle.js"></script>
</body> </body>
</html> </html>

50
src/app.js
View File

@ -1,28 +1,32 @@
/* global app, log */ /* global app, log */
(function(window) { 'use strict'
'use strict'
/** require('./view')
* Sets up a brand new Todo list. require('./helpers')
* require('./controller')
* @param {string} name The name of your new to do list. require('./model')
*/ require('./store')
function Todo(name) { require('./template')
this.storage = new app.Store(name)
this.model = new app.Model(this.storage)
this.template = new app.Template()
this.view = new app.View(this.template)
this.controller = new app.Controller(this.model, this.view)
}
function onLoad() { /**
var todo = new Todo('todos-vanillajs') * Sets up a brand new Todo list.
todo.controller.setView(document.location.hash) *
log('view set') * @param {string} name The name of your new to do list.
} */
function Todo(name) {
this.storage = new app.Store(name)
this.model = new app.Model(this.storage)
this.template = new app.Template()
this.view = new app.View(this.template)
this.controller = new app.Controller(this.model, this.view)
}
function onLoad() {
var todo = new Todo('todos-vanillajs')
todo.controller.setView(document.location.hash)
log('view set')
}
// Export to window // Export to window
window.app = window.app || {} window.app = window.app || {}
window.app.onLoad = onLoad window.app.onLoad = onLoad
})(window)

11
src/bootstrap.js vendored
View File

@ -1,7 +1,8 @@
/* global app, $on */ /* global app, $on */
(function(window) { 'use strict'
'use strict'
$on(window, 'load', app.onLoad) require('./app')
$on(window, 'hashchange', app.onLoad) require('./helpers')
})(window)
$on(window, 'load', app.onLoad)
$on(window, 'hashchange', app.onLoad)

486
src/controller.js
View File

@ -1,268 +1,266 @@
(function(window) { 'use strict'
'use strict'
/** /**
* Takes a model and view and acts as the controller between them * Takes a model and view and acts as the controller between them
* *
* @constructor * @constructor
* @param {object} model The model instance * @param {object} model The model instance
* @param {object} view The view instance * @param {object} view The view instance
*/ */
function Controller(model, view) { function Controller(model, view) {
var that = this var that = this
that.model = model that.model = model
that.view = view that.view = view
that.view.bind('newTodo', function(title) { that.view.bind('newTodo', function(title) {
that.addItem(title) that.addItem(title)
})
that.view.bind('itemEdit', function(item) {
that.editItem(item.id)
})
that.view.bind('itemEditDone', function(item) {
that.editItemSave(item.id, item.title)
})
that.view.bind('itemEditCancel', function(item) {
that.editItemCancel(item.id)
})
that.view.bind('itemRemove', function(item) {
that.removeItem(item.id)
})
that.view.bind('itemToggle', function(item) {
that.toggleComplete(item.id, item.completed)
})
that.view.bind('removeCompleted', function() {
that.removeCompletedItems()
})
that.view.bind('toggleAll', function(status) {
that.toggleAll(status.completed)
})
}
/**
* Loads and initialises the view
*
* @param {string} '' | 'active' | 'completed'
*/
Controller.prototype.setView = function(locationHash) {
var route = locationHash.split('/')[1]
var page = route || ''
this._updateFilterState(page)
}
/**
* An event to fire on load. Will get all items and display them in the
* todo-list
*/
Controller.prototype.showAll = function() {
var that = this
that.model.read(function(data) {
that.view.render('showEntries', data)
})
}
/**
* Renders all active tasks
*/
Controller.prototype.showActive = function() {
var that = this
that.model.read({completed: false}, function(data) {
that.view.render('showEntries', data)
})
}
/**
* Renders all completed tasks
*/
Controller.prototype.showCompleted = function() {
var that = this
that.model.read({completed: true}, function(data) {
that.view.render('showEntries', data)
})
}
/**
* An event to fire whenever you want to add an item. Simply pass in the event
* object and it'll handle the DOM insertion and saving of the new item.
*/
Controller.prototype.addItem = function(title) {
var that = this
if (title.trim() === '') {
return
}
that.model.create(title, function() {
that.view.render('clearNewTodo')
that._filter(true)
})
}
/*
* Triggers the item editing mode.
*/
Controller.prototype.editItem = function(id) {
var that = this
that.model.read(id, function(data) {
that.view.render('editItem', {id: id, title: data[0].title})
})
}
/*
* Finishes the item editing mode successfully.
*/
Controller.prototype.editItemSave = function(id, title) {
var that = this
if (title.trim()) {
that.model.update(id, {title: title}, function() {
that.view.render('editItemDone', {id: id, title: title})
}) })
} else {
that.removeItem(id)
}
}
that.view.bind('itemEdit', function(item) { /*
that.editItem(item.id) * Cancels the item editing mode.
}) */
Controller.prototype.editItemCancel = function(id) {
var that = this
that.model.read(id, function(data) {
that.view.render('editItemDone', {id: id, title: data[0].title})
})
}
that.view.bind('itemEditDone', function(item) { /**
that.editItemSave(item.id, item.title) * By giving it an ID it'll find the DOM element matching that ID,
}) * remove it from the DOM and also remove it from storage.
*
* @param {number} id The ID of the item to remove from the DOM and
* storage
*/
Controller.prototype.removeItem = function(id) {
var that = this
that.model.remove(id, function() {
that.view.render('removeItem', id)
})
that.view.bind('itemEditCancel', function(item) { that._filter()
that.editItemCancel(item.id) }
})
that.view.bind('itemRemove', function(item) { /**
* Will remove all completed items from the DOM and storage.
*/
Controller.prototype.removeCompletedItems = function() {
var that = this
that.model.read({completed: true}, function(data) {
data.forEach(function(item) {
that.removeItem(item.id) that.removeItem(item.id)
}) })
})
that.view.bind('itemToggle', function(item) { that._filter()
that.toggleComplete(item.id, item.completed) }
})
/**
that.view.bind('removeCompleted', function() { * Give it an ID of a model and a checkbox and it will update the item
that.removeCompletedItems() * in storage based on the checkbox's state.
}) *
* @param {number} id The ID of the element to complete or uncomplete
that.view.bind('toggleAll', function(status) { * @param {object} checkbox The checkbox to check the state of complete
that.toggleAll(status.completed) * or not
}) * @param {boolean|undefined} silent Prevent re-filtering the todo items
} */
Controller.prototype.toggleComplete = function(id, completed, silent) {
/** var that = this
* Loads and initialises the view that.model.update(id, {completed: completed}, function() {
* that.view.render('elementComplete', {
* @param {string} '' | 'active' | 'completed' id: id,
*/ completed: completed
Controller.prototype.setView = function(locationHash) {
var route = locationHash.split('/')[1]
var page = route || ''
this._updateFilterState(page)
}
/**
* An event to fire on load. Will get all items and display them in the
* todo-list
*/
Controller.prototype.showAll = function() {
var that = this
that.model.read(function(data) {
that.view.render('showEntries', data)
})
}
/**
* Renders all active tasks
*/
Controller.prototype.showActive = function() {
var that = this
that.model.read({completed: false}, function(data) {
that.view.render('showEntries', data)
})
}
/**
* Renders all completed tasks
*/
Controller.prototype.showCompleted = function() {
var that = this
that.model.read({completed: true}, function(data) {
that.view.render('showEntries', data)
})
}
/**
* An event to fire whenever you want to add an item. Simply pass in the event
* object and it'll handle the DOM insertion and saving of the new item.
*/
Controller.prototype.addItem = function(title) {
var that = this
if (title.trim() === '') {
return
}
that.model.create(title, function() {
that.view.render('clearNewTodo')
that._filter(true)
})
}
/*
* Triggers the item editing mode.
*/
Controller.prototype.editItem = function(id) {
var that = this
that.model.read(id, function(data) {
that.view.render('editItem', {id: id, title: data[0].title})
})
}
/*
* Finishes the item editing mode successfully.
*/
Controller.prototype.editItemSave = function(id, title) {
var that = this
if (title.trim()) {
that.model.update(id, {title: title}, function() {
that.view.render('editItemDone', {id: id, title: title})
})
} else {
that.removeItem(id)
}
}
/*
* Cancels the item editing mode.
*/
Controller.prototype.editItemCancel = function(id) {
var that = this
that.model.read(id, function(data) {
that.view.render('editItemDone', {id: id, title: data[0].title})
})
}
/**
* By giving it an ID it'll find the DOM element matching that ID,
* remove it from the DOM and also remove it from storage.
*
* @param {number} id The ID of the item to remove from the DOM and
* storage
*/
Controller.prototype.removeItem = function(id) {
var that = this
that.model.remove(id, function() {
that.view.render('removeItem', id)
}) })
})
if (!silent) {
that._filter() that._filter()
} }
}
/** /**
* Will remove all completed items from the DOM and storage. * Will toggle ALL checkboxes' on/off state and completeness of models.
*/ * Just pass in the event object.
Controller.prototype.removeCompletedItems = function() { */
var that = this Controller.prototype.toggleAll = function(completed) {
that.model.read({completed: true}, function(data) { var that = this
data.forEach(function(item) { that.model.read({completed: !completed}, function(data) {
that.removeItem(item.id) data.forEach(function(item) {
}) that.toggleComplete(item.id, completed, true)
})
})
that._filter()
}
/**
* Updates the pieces of the page which change depending on the remaining
* number of todos.
*/
Controller.prototype._updateCount = function() {
var that = this
that.model.getCount(function(todos) {
that.view.render('updateElementCount', todos.active)
that.view.render('clearCompletedButton', {
completed: todos.completed,
visible: todos.completed > 0
}) })
that._filter() that.view.render('toggleAll', {checked: todos.completed === todos.total})
that.view.render('contentBlockVisibility', {visible: todos.total > 0})
})
}
/**
* Re-filters the todo items, based on the active route.
* @param {boolean|undefined} force forces a re-painting of todo items.
*/
Controller.prototype._filter = function(force) {
var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1)
// Update the elements on the page, which change with each completed todo
this._updateCount()
// If the last active route isn't "All", or we're switching routes, we
// re-create the todo item elements, calling:
// this.show[All|Active|Completed]();
if (force || this._lastActiveRoute !== 'All' || this._lastActiveRoute !== activeRoute) {
this['show' + activeRoute]()
} }
/** this._lastActiveRoute = activeRoute
* Give it an ID of a model and a checkbox and it will update the item }
* in storage based on the checkbox's state.
*
* @param {number} id The ID of the element to complete or uncomplete
* @param {object} checkbox The checkbox to check the state of complete
* or not
* @param {boolean|undefined} silent Prevent re-filtering the todo items
*/
Controller.prototype.toggleComplete = function(id, completed, silent) {
var that = this
that.model.update(id, {completed: completed}, function() {
that.view.render('elementComplete', {
id: id,
completed: completed
})
})
if (!silent) { /**
that._filter() * Simply updates the filter nav's selected states
} */
Controller.prototype._updateFilterState = function(currentPage) {
// Store a reference to the active route, allowing us to re-filter todo
// items as they are marked complete or incomplete.
this._activeRoute = currentPage
if (currentPage === '') {
this._activeRoute = 'All'
} }
/** this._filter()
* Will toggle ALL checkboxes' on/off state and completeness of models.
* Just pass in the event object.
*/
Controller.prototype.toggleAll = function(completed) {
var that = this
that.model.read({completed: !completed}, function(data) {
data.forEach(function(item) {
that.toggleComplete(item.id, completed, true)
})
})
that._filter() this.view.render('setFilter', currentPage)
} }
/** // Export to window
* Updates the pieces of the page which change depending on the remaining window.app = window.app || {}
* number of todos. window.app.Controller = Controller
*/
Controller.prototype._updateCount = function() {
var that = this
that.model.getCount(function(todos) {
that.view.render('updateElementCount', todos.active)
that.view.render('clearCompletedButton', {
completed: todos.completed,
visible: todos.completed > 0
})
that.view.render('toggleAll', {checked: todos.completed === todos.total})
that.view.render('contentBlockVisibility', {visible: todos.total > 0})
})
}
/**
* Re-filters the todo items, based on the active route.
* @param {boolean|undefined} force forces a re-painting of todo items.
*/
Controller.prototype._filter = function(force) {
var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1)
// Update the elements on the page, which change with each completed todo
this._updateCount()
// If the last active route isn't "All", or we're switching routes, we
// re-create the todo item elements, calling:
// this.show[All|Active|Completed]();
if (force || this._lastActiveRoute !== 'All' || this._lastActiveRoute !== activeRoute) {
this['show' + activeRoute]()
}
this._lastActiveRoute = activeRoute
}
/**
* Simply updates the filter nav's selected states
*/
Controller.prototype._updateFilterState = function(currentPage) {
// Store a reference to the active route, allowing us to re-filter todo
// items as they are marked complete or incomplete.
this._activeRoute = currentPage
if (currentPage === '') {
this._activeRoute = 'All'
}
this._filter()
this.view.render('setFilter', currentPage)
}
// Export to window
window.app = window.app || {}
window.app.Controller = Controller
})(window)

130
src/helpers.js
View File

@ -1,82 +1,78 @@
/*global NodeList */ 'use strict'
(function(window) {
'use strict'
// Get element(s) by CSS selector: // Get element(s) by CSS selector:
window.qs = function(selector, scope) { window.qs = function(selector, scope) {
return (scope || document).querySelector(selector) return (scope || document).querySelector(selector)
}
window.qsa = function(selector, scope) {
return (scope || document).querySelectorAll(selector)
}
window.log = function log() {
if (window.console && window.console.log) {
window.console.log.apply(window.console, arguments) // eslint-disable-line
} }
}
window.qsa = function(selector, scope) { // addEventListener wrapper:
return (scope || document).querySelectorAll(selector) window.$on = function(target, type, callback, useCapture) {
} target.addEventListener(type, callback, !!useCapture)
}
// Attach a handler to event for all elements that match the selector,
// now or in the future, based on a root element
window.$delegate = function(target, selector, type, handler) {
function dispatchEvent(event) {
var targetElement = event.target
var potentialElements = window.qsa(selector, target)
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0
window.log = function log() { if (hasMatch) {
if (window.console && window.console.log) { handler.call(targetElement, event)
window.console.log.apply(window.console, arguments) // eslint-disable-line
} }
} }
// addEventListener wrapper: // https://developer.mozilla.org/en-US/docs/Web/Events/blur
window.$on = function(target, type, callback, useCapture) { var useCapture = type === 'blur' || type === 'focus'
target.addEventListener(type, callback, !!useCapture)
window.$on(target, type, dispatchEvent, useCapture)
}
// Find the element's parent with the given tag name:
// $parent(qs('a'), 'div');
window.$parent = function(element, tagName) {
if (!element.parentNode) {
return
} }
if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) {
// Attach a handler to event for all elements that match the selector, return element.parentNode
// now or in the future, based on a root element
window.$delegate = function(target, selector, type, handler) {
function dispatchEvent(event) {
var targetElement = event.target
var potentialElements = window.qsa(selector, target)
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0
if (hasMatch) {
handler.call(targetElement, event)
}
}
// https://developer.mozilla.org/en-US/docs/Web/Events/blur
var useCapture = type === 'blur' || type === 'focus'
window.$on(target, type, dispatchEvent, useCapture)
} }
return window.$parent(element.parentNode, tagName)
}
// Find the element's parent with the given tag name: // removes an element from an array
// $parent(qs('a'), 'div'); // const x = [1,2,3]
window.$parent = function(element, tagName) { // remove(x, 2)
if (!element.parentNode) { // x ~== [1,3]
return window.remove = function remove(array, thing) {
} const index = array.indexOf(thing)
if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) { if (index === -1) {
return element.parentNode return array
}
return window.$parent(element.parentNode, tagName)
} }
array.splice(index, 1)
}
// removes an element from an array // pad the left of the given string by the given size with the given character
// const x = [1,2,3] // leftPad('10', 3, '0') -> 010
// remove(x, 2) window.leftPad = function leftPad(str, size, padWith) {
// x ~== [1,3] if (size <= str.length) {
window.remove = function remove(array, thing) { return str
const index = array.indexOf(thing) } else {
if (index === -1) { return Array(size - str.length + 1).join(padWith || '0') + str
return array
}
array.splice(index, 1)
} }
}
// pad the left of the given string by the given size with the given character // Allow for looping on nodes by chaining:
// leftPad('10', 3, '0') -> 010 // qsa('.foo').forEach(function () {})
window.leftPad = function leftPad(str, size, padWith) { NodeList.prototype.forEach = Array.prototype.forEach
if (size <= str.length) {
return str
} else {
return Array(size - str.length + 1).join(padWith || '0') + str
}
}
// Allow for looping on nodes by chaining:
// qsa('.foo').forEach(function () {})
NodeList.prototype.forEach = Array.prototype.forEach
})(window)

216
src/model.js
View File

@ -1,122 +1,120 @@
(function(window) { 'use strict'
'use strict'
/** /**
* Creates a new Model instance and hooks up the storage. * Creates a new Model instance and hooks up the storage.
* *
* @constructor * @constructor
* @param {object} storage A reference to the client side storage class * @param {object} storage A reference to the client side storage class
*/ */
function Model(storage) { function Model(storage) {
this.storage = storage this.storage = storage
}
/**
* Creates a new todo model
*
* @param {string} [title] The title of the task
* @param {function} [callback] The callback to fire after the model is created
*/
Model.prototype.create = function(title, callback) {
title = title || ''
callback = callback || function() {
} }
/** var newItem = {
* Creates a new todo model title: title.trim(),
* completed: false
* @param {string} [title] The title of the task
* @param {function} [callback] The callback to fire after the model is created
*/
Model.prototype.create = function(title, callback) {
title = title || ''
callback = callback || function() {
}
var newItem = {
title: title.trim(),
completed: false
}
this.storage.save(newItem, callback)
} }
/** this.storage.save(newItem, callback)
* Finds and returns a model in storage. If no query is given it'll simply }
* return everything. If you pass in a string or number it'll look that up as
* the ID of the model to find. Lastly, you can pass it an object to match
* against.
*
* @param {string|number|object} [query] A query to match models against
* @param {function} [callback] The callback to fire after the model is found
*
* @example
* model.read(1, func); // Will find the model with an ID of 1
* model.read('1'); // Same as above
* //Below will find a model with foo equalling bar and hello equalling world.
* model.read({ foo: 'bar', hello: 'world' });
*/
Model.prototype.read = function(query, callback) {
var queryType = typeof query
callback = callback || function() {
}
if (queryType === 'function') { /**
callback = query * Finds and returns a model in storage. If no query is given it'll simply
return this.storage.findAll(callback) * return everything. If you pass in a string or number it'll look that up as
} else if (queryType === 'string' || queryType === 'number') { * the ID of the model to find. Lastly, you can pass it an object to match
query = parseInt(query, 10) * against.
this.storage.find({id: query}, callback) *
} else { * @param {string|number|object} [query] A query to match models against
this.storage.find(query, callback) * @param {function} [callback] The callback to fire after the model is found
} *
* @example
* model.read(1, func); // Will find the model with an ID of 1
* model.read('1'); // Same as above
* //Below will find a model with foo equalling bar and hello equalling world.
* model.read({ foo: 'bar', hello: 'world' });
*/
Model.prototype.read = function(query, callback) {
var queryType = typeof query
callback = callback || function() {
} }
/** if (queryType === 'function') {
* Updates a model by giving it an ID, data to update, and a callback to fire when callback = query
* the update is complete. return this.storage.findAll(callback)
* } else if (queryType === 'string' || queryType === 'number') {
* @param {number} id The id of the model to update query = parseInt(query, 10)
* @param {object} data The properties to update and their new value this.storage.find({id: query}, callback)
* @param {function} callback The callback to fire when the update is complete. } else {
*/ this.storage.find(query, callback)
Model.prototype.update = function(id, data, callback) { }
this.storage.save(data, callback, id) }
/**
* Updates a model by giving it an ID, data to update, and a callback to fire when
* the update is complete.
*
* @param {number} id The id of the model to update
* @param {object} data The properties to update and their new value
* @param {function} callback The callback to fire when the update is complete.
*/
Model.prototype.update = function(id, data, callback) {
this.storage.save(data, callback, id)
}
/**
* Removes a model from storage
*
* @param {number} id The ID of the model to remove
* @param {function} callback The callback to fire when the removal is complete.
*/
Model.prototype.remove = function(id, callback) {
this.storage.remove(id, callback)
}
/**
* WARNING: Will remove ALL data from storage.
*
* @param {function} callback The callback to fire when the storage is wiped.
*/
Model.prototype.removeAll = function(callback) {
this.storage.drop(callback)
}
/**
* Returns a count of all todos
*/
Model.prototype.getCount = function(callback) {
var todos = {
active: 0,
completed: 0,
total: 0
} }
/** this.storage.findAll(function(data) {
* Removes a model from storage data.forEach(function(todo) {
* if (todo.completed) {
* @param {number} id The ID of the model to remove todos.completed++
* @param {function} callback The callback to fire when the removal is complete. } else {
*/ todos.active++
Model.prototype.remove = function(id, callback) { }
this.storage.remove(id, callback)
}
/** todos.total++
* WARNING: Will remove ALL data from storage.
*
* @param {function} callback The callback to fire when the storage is wiped.
*/
Model.prototype.removeAll = function(callback) {
this.storage.drop(callback)
}
/**
* Returns a count of all todos
*/
Model.prototype.getCount = function(callback) {
var todos = {
active: 0,
completed: 0,
total: 0
}
this.storage.findAll(function(data) {
data.forEach(function(todo) {
if (todo.completed) {
todos.completed++
} else {
todos.active++
}
todos.total++
})
callback(todos)
}) })
} callback(todos)
})
}
// Export to window // Export to window
window.app = window.app || {} window.app = window.app || {}
window.app.Model = Model window.app.Model = Model
})(window)

248
src/store.js
View File

@ -1,144 +1,142 @@
(function(window) { 'use strict'
'use strict'
/** /**
* Creates a new client side storage object and will create an empty * Creates a new client side storage object and will create an empty
* collection if no collection already exists. * collection if no collection already exists.
* *
* @param {string} name The name of our DB we want to use * @param {string} name The name of our DB we want to use
* @param {function} callback Our fake DB uses callbacks because in * @param {function} callback Our fake DB uses callbacks because in
* real life you probably would be making AJAX calls * real life you probably would be making AJAX calls
*/ */
function Store(name, callback) { function Store(name, callback) {
callback = callback || function() { callback = callback || function() {
}
this._dbName = name
if (!localStorage[name]) {
var data = {
todos: []
} }
this._dbName = name localStorage[name] = JSON.stringify(data)
}
if (!localStorage[name]) { callback.call(this, JSON.parse(localStorage[name]))
var data = { }
todos: []
/**
* Finds items based on a query given as a JS object
*
* @param {object} query The query to match against (i.e. {foo: 'bar'})
* @param {function} callback The callback to fire when the query has
* completed running
*
* @example
* db.find({foo: 'bar', hello: 'world'}, function (data) {
* // data will return any items that have foo: bar and
* // hello: world in their properties
* });
*/
Store.prototype.find = function(query, callback) {
if (!callback) {
return
}
var todos = JSON.parse(localStorage[this._dbName]).todos
callback.call(this, todos.filter(function(todo) {
for (var q in query) {
if (query[q] !== todo[q]) {
return false
} }
localStorage[name] = JSON.stringify(data)
} }
return true
}))
}
callback.call(this, JSON.parse(localStorage[name])) /**
* Will retrieve all data from the collection
*
* @param {function} callback The callback to fire upon retrieving data
*/
Store.prototype.findAll = function(callback) {
callback = callback || function() {
}
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}
/**
* Will save the given data to the DB. If no item exists it will create a new
* item, otherwise it'll simply update an existing item's properties
*
* @param {object} updateData The data to save back into the DB
* @param {function} callback The callback to fire after saving
* @param {number} id An optional param to enter an ID of an item to update
*/
Store.prototype.save = function(updateData, callback, id) {
var data = JSON.parse(localStorage[this._dbName])
var todos = data.todos
callback = callback || function() {
} }
/** // If an ID was actually given, find the item and update each property
* Finds items based on a query given as a JS object if (id) {
*
* @param {object} query The query to match against (i.e. {foo: 'bar'})
* @param {function} callback The callback to fire when the query has
* completed running
*
* @example
* db.find({foo: 'bar', hello: 'world'}, function (data) {
* // data will return any items that have foo: bar and
* // hello: world in their properties
* });
*/
Store.prototype.find = function(query, callback) {
if (!callback) {
return
}
var todos = JSON.parse(localStorage[this._dbName]).todos
callback.call(this, todos.filter(function(todo) {
for (var q in query) {
if (query[q] !== todo[q]) {
return false
}
}
return true
}))
}
/**
* Will retrieve all data from the collection
*
* @param {function} callback The callback to fire upon retrieving data
*/
Store.prototype.findAll = function(callback) {
callback = callback || function() {
}
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}
/**
* Will save the given data to the DB. If no item exists it will create a new
* item, otherwise it'll simply update an existing item's properties
*
* @param {object} updateData The data to save back into the DB
* @param {function} callback The callback to fire after saving
* @param {number} id An optional param to enter an ID of an item to update
*/
Store.prototype.save = function(updateData, callback, id) {
var data = JSON.parse(localStorage[this._dbName])
var todos = data.todos
callback = callback || function() {
}
// If an ID was actually given, find the item and update each property
if (id) {
for (var i = 0; i < todos.length; i++) {
if (todos[i].id === id) {
for (var key in updateData) {
if (updateData.hasOwnProperty(key)) {
todos[i][key] = updateData[key]
}
}
break
}
}
localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
} else {
// Generate an ID
updateData.id = new Date().getTime()
todos.push(updateData)
localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, [updateData])
}
}
/**
* Will remove an item from the Store based on its ID
*
* @param {number} id The ID of the item you want to remove
* @param {function} callback The callback to fire after saving
*/
Store.prototype.remove = function(id, callback) {
var data = JSON.parse(localStorage[this._dbName])
var todos = data.todos
for (var i = 0; i < todos.length; i++) { for (var i = 0; i < todos.length; i++) {
if (todos[i].id == id) { // eslint-disable-line if (todos[i].id === id) {
todos.splice(i, 1) for (var key in updateData) {
if (updateData.hasOwnProperty(key)) {
todos[i][key] = updateData[key]
}
}
break break
} }
} }
localStorage[this._dbName] = JSON.stringify(data) localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, JSON.parse(localStorage[this._dbName]).todos) callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
} else {
// Generate an ID
updateData.id = new Date().getTime()
todos.push(updateData)
localStorage[this._dbName] = JSON.stringify(data)
callback.call(this, [updateData])
}
}
/**
* Will remove an item from the Store based on its ID
*
* @param {number} id The ID of the item you want to remove
* @param {function} callback The callback to fire after saving
*/
Store.prototype.remove = function(id, callback) {
var data = JSON.parse(localStorage[this._dbName])
var todos = data.todos
for (var i = 0; i < todos.length; i++) {
if (todos[i].id == id) { // eslint-disable-line
todos.splice(i, 1)
break
}
} }
/** localStorage[this._dbName] = JSON.stringify(data)
* Will drop all storage and start fresh callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
* }
* @param {function} callback The callback to fire after dropping the data
*/
Store.prototype.drop = function(callback) {
localStorage[this._dbName] = JSON.stringify({todos: []})
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}
// Export to window /**
window.app = window.app || {} * Will drop all storage and start fresh
window.app.Store = Store *
})(window) * @param {function} callback The callback to fire after dropping the data
*/
Store.prototype.drop = function(callback) {
localStorage[this._dbName] = JSON.stringify({todos: []})
callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
}
// Export to window
window.app = window.app || {}
window.app.Store = Store

192
src/template.js
View File

@ -1,112 +1,110 @@
(function(window) { 'use strict'
'use strict'
var htmlEscapes = { var htmlEscapes = {
'&': '&amp;', '&': '&amp;',
'<': '&lt;', '<': '&lt;',
'>': '&gt;', '>': '&gt;',
'"': '&quot;', '"': '&quot;',
'\'': '&#x27;', '\'': '&#x27;',
'`': '&#x60;' '`': '&#x60;'
} }
var escapeHtmlChar = function(chr) { var escapeHtmlChar = function(chr) {
return htmlEscapes[chr] return htmlEscapes[chr]
} }
var reUnescapedHtml = /[&<>"'`]/g var reUnescapedHtml = /[&<>"'`]/g
var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source) var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source)
var escape = function(string) { var escape = function(string) {
return (string && reHasUnescapedHtml.test(string)) ? return (string && reHasUnescapedHtml.test(string)) ?
string.replace(reUnescapedHtml, escapeHtmlChar) : string.replace(reUnescapedHtml, escapeHtmlChar) :
string string
} }
/** /**
* Sets up defaults for all the Template methods such as a default template * Sets up defaults for all the Template methods such as a default template
* *
* @constructor * @constructor
*/ */
function Template() { function Template() {
this.defaultTemplate = '<li data-id="{{id}}" class="{{completed}}">' + this.defaultTemplate = '<li data-id="{{id}}" class="{{completed}}">' +
'<div class="view">' + '<div class="view">' +
'<input class="toggle" type="checkbox" {{checked}}>' + '<input class="toggle" type="checkbox" {{checked}}>' +
'<label>{{title}}</label>' + '<label>{{title}}</label>' +
'<button class="destroy"></button>' + '<button class="destroy"></button>' +
'</div>' + '</div>' +
'</li>' '</li>'
} }
/** /**
* Creates an <li> HTML string and returns it for placement in your app. * Creates an <li> HTML string and returns it for placement in your app.
* *
* NOTE: In real life you should be using a templating engine such as Mustache * NOTE: In real life you should be using a templating engine such as Mustache
* or Handlebars, however, this is a vanilla JS example. * or Handlebars, however, this is a vanilla JS example.
* *
* @param {object} data The object containing keys you want to find in the * @param {object} data The object containing keys you want to find in the
* template to replace. * template to replace.
* @returns {string} HTML String of an <li> element * @returns {string} HTML String of an <li> element
* *
* @example * @example
* view.show({ * view.show({
* id: 1, * id: 1,
* title: "Hello World", * title: "Hello World",
* completed: 0, * completed: 0,
* }); * });
*/ */
Template.prototype.show = function(data) { Template.prototype.show = function(data) {
var i, l var i, l
var view = '' var view = ''
for (i = 0, l = data.length; i < l; i++) { for (i = 0, l = data.length; i < l; i++) {
var template = this.defaultTemplate var template = this.defaultTemplate
var completed = '' var completed = ''
var checked = '' var checked = ''
if (data[i].completed) { if (data[i].completed) {
completed = 'completed' completed = 'completed'
checked = 'checked' checked = 'checked'
}
template = template.replace('{{id}}', data[i].id)
template = template.replace('{{title}}', escape(data[i].title))
template = template.replace('{{completed}}', completed)
template = template.replace('{{checked}}', checked)
view = view + template
} }
return view template = template.replace('{{id}}', data[i].id)
template = template.replace('{{title}}', escape(data[i].title))
template = template.replace('{{completed}}', completed)
template = template.replace('{{checked}}', checked)
view = view + template
} }
/** return view
* Displays a counter of how many to dos are left to complete }
*
* @param {number} activeTodos The number of active todos.
* @returns {string} String containing the count
*/
Template.prototype.itemCounter = function(activeTodos) {
var plural = activeTodos === 1 ? '' : 's'
return '<strong>' + activeTodos + '</strong> item' + plural + ' left' /**
* Displays a counter of how many to dos are left to complete
*
* @param {number} activeTodos The number of active todos.
* @returns {string} String containing the count
*/
Template.prototype.itemCounter = function(activeTodos) {
var plural = activeTodos === 1 ? '' : 's'
return '<strong>' + activeTodos + '</strong> item' + plural + ' left'
}
/**
* Updates the text within the "Clear completed" button
*
* @param {[type]} completedTodos The number of completed todos.
* @returns {string} String containing the count
*/
Template.prototype.clearCompletedButton = function(completedTodos) {
if (completedTodos > 0) {
return 'Clear completed'
} else {
return ''
} }
}
/** // Export to window
* Updates the text within the "Clear completed" button window.app = window.app || {}
* window.app.Template = Template
* @param {[type]} completedTodos The number of completed todos.
* @returns {string} String containing the count
*/
Template.prototype.clearCompletedButton = function(completedTodos) {
if (completedTodos > 0) {
return 'Clear completed'
} else {
return ''
}
}
// Export to window
window.app = window.app || {}
window.app.Template = Template
})(window)

381
src/view.js
View File

@ -1,220 +1,217 @@
/*global qs, qsa, $on, $parent, $delegate */ /*global qs, qsa, $on, $parent, $delegate */
/* eslint no-invalid-this: 0 */ /* eslint no-invalid-this: 0 */
'use strict'
(function(window) { /**
'use strict' * View that abstracts away the browser's DOM completely.
* It has two simple entry points:
*
* - bind(eventName, handler)
* Takes a todo application event and registers the handler
* - render(command, parameterObject)
* Renders the given command with the options
*/
function View(template) {
this.template = template
/** this.ENTER_KEY = 13
* View that abstracts away the browser's DOM completely. this.ESCAPE_KEY = 27
* It has two simple entry points:
*
* - bind(eventName, handler)
* Takes a todo application event and registers the handler
* - render(command, parameterObject)
* Renders the given command with the options
*/
function View(template) {
this.template = template
this.ENTER_KEY = 13 this.$todoList = qs('.todo-list')
this.ESCAPE_KEY = 27 this.$todoItemCounter = qs('.todo-count')
this.$clearCompleted = qs('.clear-completed')
this.$main = qs('.main')
this.$footer = qs('.footer')
this.$toggleAll = qs('.toggle-all')
this.$newTodo = qs('.new-todo')
}
this.$todoList = qs('.todo-list') View.prototype._removeItem = function(id) {
this.$todoItemCounter = qs('.todo-count') var elem = qs('[data-id="' + id + '"]')
this.$clearCompleted = qs('.clear-completed')
this.$main = qs('.main') if (elem) {
this.$footer = qs('.footer') this.$todoList.removeChild(elem)
this.$toggleAll = qs('.toggle-all') }
this.$newTodo = qs('.new-todo') }
View.prototype._clearCompletedButton = function(completedCount, visible) {
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount)
this.$clearCompleted.style.display = visible ? 'block' : 'none'
}
View.prototype._setFilter = function(currentPage) {
qs('.filters .selected').className = ''
qs('.filters [href="#/' + currentPage + '"]').className = 'selected'
}
View.prototype._elementComplete = function(id, completed) {
var listItem = qs('[data-id="' + id + '"]')
if (!listItem) {
return
} }
View.prototype._removeItem = function(id) { listItem.className = completed ? 'completed' : ''
var elem = qs('[data-id="' + id + '"]')
if (elem) { // In case it was toggled from an event and not by clicking the checkbox
this.$todoList.removeChild(elem) qs('input', listItem).checked = completed
}
View.prototype._editItem = function(id, title) {
var listItem = qs('[data-id="' + id + '"]')
if (!listItem) {
return
}
listItem.className = listItem.className + ' editing'
var input = document.createElement('input')
input.className = 'edit'
listItem.appendChild(input)
input.focus()
input.value = title
}
View.prototype._editItemDone = function(id, title) {
var listItem = qs('[data-id="' + id + '"]')
if (!listItem) {
return
}
var input = qs('input.edit', listItem)
listItem.removeChild(input)
listItem.className = listItem.className.replace('editing', '')
qsa('label', listItem).forEach(function(label) {
label.textContent = title
})
}
View.prototype.render = function(viewCmd, parameter) {
var that = this
var viewCommands = {
showEntries: function() {
that.$todoList.innerHTML = that.template.show(parameter)
},
removeItem: function() {
that._removeItem(parameter)
},
updateElementCount: function() {
that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter)
},
clearCompletedButton: function() {
that._clearCompletedButton(parameter.completed, parameter.visible)
},
contentBlockVisibility: function() {
that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none'
},
toggleAll: function() {
that.$toggleAll.checked = parameter.checked
},
setFilter: function() {
that._setFilter(parameter)
},
clearNewTodo: function() {
that.$newTodo.value = ''
},
elementComplete: function() {
that._elementComplete(parameter.id, parameter.completed)
},
editItem: function() {
that._editItem(parameter.id, parameter.title)
},
editItemDone: function() {
that._editItemDone(parameter.id, parameter.title)
} }
} }
View.prototype._clearCompletedButton = function(completedCount, visible) { viewCommands[viewCmd]()
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount) }
this.$clearCompleted.style.display = visible ? 'block' : 'none'
}
View.prototype._setFilter = function(currentPage) { View.prototype._itemId = function(element) {
qs('.filters .selected').className = '' var li = $parent(element, 'li')
qs('.filters [href="#/' + currentPage + '"]').className = 'selected' return parseInt(li.dataset.id, 10)
} }
View.prototype._elementComplete = function(id, completed) { View.prototype._bindItemEditDone = function(handler) {
var listItem = qs('[data-id="' + id + '"]') var that = this
$delegate(that.$todoList, 'li .edit', 'blur', function() {
if (!listItem) { if (!this.dataset.iscanceled) {
return handler({
id: that._itemId(this),
title: this.value
})
} }
})
listItem.className = completed ? 'completed' : '' $delegate(that.$todoList, 'li .edit', 'keypress', function(event) {
if (event.keyCode === that.ENTER_KEY) {
// In case it was toggled from an event and not by clicking the checkbox // Remove the cursor from the input when you hit enter just like if it
qs('input', listItem).checked = completed // were a real form
} this.blur()
View.prototype._editItem = function(id, title) {
var listItem = qs('[data-id="' + id + '"]')
if (!listItem) {
return
} }
})
}
listItem.className = listItem.className + ' editing' View.prototype._bindItemEditCancel = function(handler) {
var that = this
$delegate(that.$todoList, 'li .edit', 'keyup', function(event) {
if (event.keyCode === that.ESCAPE_KEY) {
this.dataset.iscanceled = true
this.blur()
var input = document.createElement('input') handler({id: that._itemId(this)})
input.className = 'edit'
listItem.appendChild(input)
input.focus()
input.value = title
}
View.prototype._editItemDone = function(id, title) {
var listItem = qs('[data-id="' + id + '"]')
if (!listItem) {
return
} }
})
}
var input = qs('input.edit', listItem) View.prototype.bind = function(event, handler) { // eslint-disable-line
listItem.removeChild(input) var that = this
if (event === 'newTodo') {
listItem.className = listItem.className.replace('editing', '') $on(that.$newTodo, 'change', function() {
handler(that.$newTodo.value)
qsa('label', listItem).forEach(function(label) {
label.textContent = title
})
}
View.prototype.render = function(viewCmd, parameter) {
var that = this
var viewCommands = {
showEntries: function() {
that.$todoList.innerHTML = that.template.show(parameter)
},
removeItem: function() {
that._removeItem(parameter)
},
updateElementCount: function() {
that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter)
},
clearCompletedButton: function() {
that._clearCompletedButton(parameter.completed, parameter.visible)
},
contentBlockVisibility: function() {
that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none'
},
toggleAll: function() {
that.$toggleAll.checked = parameter.checked
},
setFilter: function() {
that._setFilter(parameter)
},
clearNewTodo: function() {
that.$newTodo.value = ''
},
elementComplete: function() {
that._elementComplete(parameter.id, parameter.completed)
},
editItem: function() {
that._editItem(parameter.id, parameter.title)
},
editItemDone: function() {
that._editItemDone(parameter.id, parameter.title)
}
}
viewCommands[viewCmd]()
}
View.prototype._itemId = function(element) {
var li = $parent(element, 'li')
return parseInt(li.dataset.id, 10)
}
View.prototype._bindItemEditDone = function(handler) {
var that = this
$delegate(that.$todoList, 'li .edit', 'blur', function() {
if (!this.dataset.iscanceled) {
handler({
id: that._itemId(this),
title: this.value
})
}
}) })
$delegate(that.$todoList, 'li .edit', 'keypress', function(event) { } else if (event === 'removeCompleted') {
if (event.keyCode === that.ENTER_KEY) { $on(that.$clearCompleted, 'click', function() {
// Remove the cursor from the input when you hit enter just like if it handler()
// were a real form
this.blur()
}
}) })
}
View.prototype._bindItemEditCancel = function(handler) { } else if (event === 'toggleAll') {
var that = this $on(that.$toggleAll, 'click', function() {
$delegate(that.$todoList, 'li .edit', 'keyup', function(event) { handler({completed: this.checked})
if (event.keyCode === that.ESCAPE_KEY) {
this.dataset.iscanceled = true
this.blur()
handler({id: that._itemId(this)})
}
}) })
} else if (event === 'itemEdit') {
$delegate(that.$todoList, 'li label', 'dblclick', function() {
handler({id: that._itemId(this)})
})
} else if (event === 'itemRemove') {
$delegate(that.$todoList, '.destroy', 'click', function() {
handler({id: that._itemId(this)})
})
} else if (event === 'itemToggle') {
$delegate(that.$todoList, '.toggle', 'click', function() {
handler({
id: that._itemId(this),
completed: this.checked
})
})
} else if (event === 'itemEditDone') {
that._bindItemEditDone(handler)
} else if (event === 'itemEditCancel') {
that._bindItemEditCancel(handler)
} }
}
View.prototype.bind = function(event, handler) { // eslint-disable-line // Export to window
var that = this window.app = window.app || {}
if (event === 'newTodo') { window.app.View = View
$on(that.$newTodo, 'change', function() {
handler(that.$newTodo.value)
})
} else if (event === 'removeCompleted') {
$on(that.$clearCompleted, 'click', function() {
handler()
})
} else if (event === 'toggleAll') {
$on(that.$toggleAll, 'click', function() {
handler({completed: this.checked})
})
} else if (event === 'itemEdit') {
$delegate(that.$todoList, 'li label', 'dblclick', function() {
handler({id: that._itemId(this)})
})
} else if (event === 'itemRemove') {
$delegate(that.$todoList, '.destroy', 'click', function() {
handler({id: that._itemId(this)})
})
} else if (event === 'itemToggle') {
$delegate(that.$todoList, '.toggle', 'click', function() {
handler({
id: that._itemId(this),
completed: this.checked
})
})
} else if (event === 'itemEditDone') {
that._bindItemEditDone(handler)
} else if (event === 'itemEditCancel') {
that._bindItemEditCancel(handler)
}
}
// Export to window
window.app = window.app || {}
window.app.View = View
})(window)

3
webpack.config.babel.js
View File

@ -4,7 +4,7 @@ const webpackValidator = require('webpack-validator')
const {getIfUtils} = require('webpack-config-utils') const {getIfUtils} = require('webpack-config-utils')
module.exports = env => { module.exports = env => {
const {ifProd} = getIfUtils(env) const {ifProd, ifNotProd} = getIfUtils(env)
const config = webpackValidator({ const config = webpackValidator({
context: resolve('src'), context: resolve('src'),
entry: './bootstrap.js', entry: './bootstrap.js',
@ -12,6 +12,7 @@ module.exports = env => {
filename: 'bundle.js', filename: 'bundle.js',
path: resolve('dist'), path: resolve('dist'),
publicPath: '/dist/', publicPath: '/dist/',
pathinfo: ifNotProd(),
}, },
devtool: ifProd('source-map', 'eval'), devtool: ifProd('source-map', 'eval'),
}) })