Ported to ES6 by Kent C. Dodds
Part of TodoMVC
- - + + + + + + + + diff --git a/karma.conf.js b/karma.conf.js index 87efb5a..17c1adf 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,21 +1,19 @@ -const webpackEnv = {test: true} -const webpackConfig = require('./webpack.config')(webpackEnv) -process.env.BABEL_ENV = 'test' // so we load the correct babel plugins -const testGlob = 'src/js/**/*.test.js' -const srcGlob = 'src/js/**/*!(test|stub).js' - +var preprocessors = {} +preprocessors['src/**/*.js'] = ['coverage'] module.exports = function setKarmaConfig(config) { config.set({ basePath: '', frameworks: ['mocha', 'chai'], - files: [testGlob, srcGlob], - preprocessors: { - [testGlob]: ['webpack'], - [srcGlob]: ['webpack'], - }, - webpack: webpackConfig, - webpackMiddleware: {noInfo: true}, + files: [ + 'src/**/*.js', + 'test/stub/**/*.js', + 'test/unit/**/*.js', + ], + exclude: [ + 'src/app.js', + ], reporters: ['progress', 'coverage'], + preprocessors: preprocessors, coverageReporter: { reporters: [ {type: 'lcov', dir: 'coverage/', subdir: '.'}, diff --git a/package.json b/package.json index 10eb255..4f5b9af 100644 --- a/package.json +++ b/package.json @@ -5,35 +5,23 @@ "todomvc-common": "1.0.2" }, "devDependencies": { - "babel": "6.5.2", - "babel-core": "6.8.0", "babel-eslint": "6.0.4", - "babel-loader": "6.2.4", - "babel-plugin-__coverage__": "1.11.111", - "babel-preset-es2015-webpack": "6.4.1", - "babel-preset-stage-2": "6.5.0", "chai": "3.5.0", "cpy-cli": "1.0.0", - "css-loader": "0.23.1", "eslint": "2.9.0", "eslint-config-kentcdodds": "6.2.1", - "eslint-loader": "1.3.0", "ghooks": "1.2.1", + "http-server": "0.9.0", "istanbul": "0.4.3", "karma": "0.13.22", "karma-chai": "0.1.0", "karma-chrome-launcher": "1.0.1", "karma-coverage": "1.0.0", "karma-mocha": "1.0.1", - "karma-webpack": "1.7.0", "mocha": "2.5.3", "npm-run-all": "1.8.0", "opt-cli": "1.4.2", - "rimraf": "2.5.2", - "style-loader": "0.13.1", - "webpack": "2.1.0-beta.12", - "webpack-dev-server": "2.0.0-beta", - "webpack-validator": "2.1.2" + "rimraf": "2.5.2" }, "config": { "ghooks": { @@ -42,20 +30,10 @@ }, "scripts": { "test": "karma start", - "check-coverage": "istanbul check-coverage --statements 23 --branches 5 --functions 9 --lines 24", + "check-coverage": "istanbul check-coverage --statements 22 --branches 5 --functions 0 --lines 22", "watch:test": "npm test -- --auto-watch --no-single-run", - "validate": "npm-run-all --parallel validate-webpack:* lint test --serial check-coverage", - "validate-webpack:dev": "webpack-validator webpack.config.js --env.dev", - "validate-webpack:prod": "webpack-validator webpack.config.js --env.prod", - "clean-dist": "rimraf dist", - "copy-files": "cpy src/index.html src/favicon.ico dist", - "clean-and-copy": "npm run clean-dist && npm run copy-files", - "prestart": "npm run clean-and-copy", - "start": "webpack-dev-server --env.dev --content-base dist", - "prebuild": "npm run clean-and-copy", - "prebuild:prod": "npm run clean-and-copy", - "build": "webpack --env.dev", - "build:prod": "webpack --env.prod -p", + "validate": "npm-run-all --parallel lint test --serial check-coverage", + "start": "http-server", "lint": "eslint .", "setup": "npm install && npm run validate" } diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..da65a07 --- /dev/null +++ b/src/app.js @@ -0,0 +1,25 @@ +/* global app, $on */ +(function() { + 'use strict' + + /** + * Sets up a brand new Todo list. + * + * @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 setView() { + var todo = new Todo('todos-vanillajs') + todo.controller.setView(document.location.hash) + } + + $on(window, 'load', setView) + $on(window, 'hashchange', setView) +})() diff --git a/src/controller.js b/src/controller.js new file mode 100644 index 0000000..134e371 --- /dev/null +++ b/src/controller.js @@ -0,0 +1,268 @@ +(function(window) { + 'use strict' + + /** + * Takes a model and view and acts as the controller between them + * + * @constructor + * @param {object} model The model instance + * @param {object} view The view instance + */ + function Controller(model, view) { + var that = this + that.model = model + that.view = view + + that.view.bind('newTodo', function(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) + } + } + + /* + * 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) + }) + + that._filter() + } + + /** + * 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._filter() + } + + /** + * 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() + } + } + + /** + * 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() + } + + /** + * 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.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) diff --git a/src/helpers.js b/src/helpers.js new file mode 100644 index 0000000..d5a9865 --- /dev/null +++ b/src/helpers.js @@ -0,0 +1,52 @@ +/*global NodeList */ +(function(window) { + 'use strict' + + // Get element(s) by CSS selector: + window.qs = function(selector, scope) { + return (scope || document).querySelector(selector) + } + window.qsa = function(selector, scope) { + return (scope || document).querySelectorAll(selector) + } + + // addEventListener wrapper: + 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 + + 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) + } + + // 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()) { + return element.parentNode + } + return window.$parent(element.parentNode, tagName) + } + + // Allow for looping on nodes by chaining: + // qsa('.foo').forEach(function () {}) + NodeList.prototype.forEach = Array.prototype.forEach +})(window) diff --git a/src/js/app.js b/src/js/app.js deleted file mode 100755 index 2c0012f..0000000 --- a/src/js/app.js +++ /dev/null @@ -1,35 +0,0 @@ -import 'todomvc-common/base.css' -import 'todomvc-app-css/index.css' - -import View from './view' -import {$on, qsa, removeClass} from './helpers' -import Controller from './controller' -import Model from './model' -import Store from './store' -import Template from './template' - -var todo - -/** - * Sets up a brand new Todo list. - * - * @param {string} name The name of your new to do list. - */ -function Todo(name) { - this.storage = new Store(name) - this.model = new Model(this.storage) - this.template = new Template() - this.view = new View(this.template) - this.controller = new Controller(this.model, this.view) -} - -function setView() { - todo.controller.setView(document.location.hash) -} - -$on(window, 'load', function() { - todo = new Todo('todos-vanillajs') - setView() - removeClass(qsa('.hide'), 'hide') -}) -$on(window, 'hashchange', setView) diff --git a/src/js/controller.js b/src/js/controller.js deleted file mode 100755 index c126991..0000000 --- a/src/js/controller.js +++ /dev/null @@ -1,261 +0,0 @@ -export default Controller -/** -* Takes a model and view and acts as the controller between them -* -* @constructor -* @param {object} model The model instance -* @param {object} view The view instance -*/ -function Controller(model, view) { - var that = this - that.model = model - that.view = view - - that.view.bind('newTodo', function(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, 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}, function() { - that.view.render('editItemDone', {id, 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, 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) - }) - - that._filter() -} - -/** -* 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._filter() -} - -/** -* 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}, function() { - that.view.render('elementComplete', { - id, - completed, - }) - }) - - if (!silent) { - that._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() -} - -/** -* 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.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) -} diff --git a/src/js/controller.test.js b/src/js/controller.test.js deleted file mode 100644 index 884cafa..0000000 --- a/src/js/controller.test.js +++ /dev/null @@ -1,12 +0,0 @@ -import getModelStub from './model.stub' -import getViewStub from './view.stub' -import Controller from './controller' - -describe('controller', () => { - it('can be created', () => { - const view = getViewStub() - const model = getModelStub() - const controller = new Controller(model, view) - expect(controller).to.exist - }) -}) diff --git a/src/js/helpers.js b/src/js/helpers.js deleted file mode 100755 index 5a558c2..0000000 --- a/src/js/helpers.js +++ /dev/null @@ -1,61 +0,0 @@ -export {qs, qsa, removeClass, $on, $delegate, $parent} - -// Get element(s) by CSS selector: -function qs(selector, scope) { - return (scope || document).querySelector(selector) -} -function qsa(selector, scope) { - return (scope || document).querySelectorAll(selector) -} -function removeClass(el, className) { - if (el.length) { - for (var i = 0; i < el.length; i++) { - removeClass(el[i], className) - } - return - } - if (el.classList) { - el.classList.remove(className) - } else { - el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ') - } -} - -// addEventListener wrapper: -function $on(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 -function $delegate(target, selector, type, handler) { - // https://developer.mozilla.org/en-US/docs/Web/Events/blur - var useCapture = type === 'blur' || type === 'focus' - $on(target, type, dispatchEvent, useCapture) - - function dispatchEvent(event) { - var targetElement = event.target - var potentialElements = qsa(selector, target) - var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0 - - if (hasMatch) { - handler.call(targetElement, event) - } - } -} - -// Find the element's parent with the given tag name: -// $parent(qs('a'), 'div'); -function $parent(element, tagName) { - if (!element.parentNode) { - return undefined - } - if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) { - return element.parentNode - } - return $parent(element.parentNode, tagName) -} - -// Allow for looping on nodes by chaining: -// qsa('.foo').forEach(function () {}) -NodeList.prototype.forEach = Array.prototype.forEach diff --git a/src/js/model.js b/src/js/model.js deleted file mode 100755 index 06fa58a..0000000 --- a/src/js/model.js +++ /dev/null @@ -1,116 +0,0 @@ -export default Model - -/** -* Creates a new Model instance and hooks up the storage. -* -* @constructor -* @param {object} storage A reference to the client side storage class -*/ -function Model(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 = { - title: title.trim(), - completed: false - } - - 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 - return this.storage.findAll(callback) - } else if (queryType === 'string' || queryType === 'number') { - query = parseInt(query, 10) - this.storage.find({id: query}, callback) - } else { - this.storage.find(query, callback) - } - return undefined -} - -/** -* 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) { - data.forEach(function(todo) { - if (todo.completed) { - todos.completed++ - } else { - todos.active++ - } - - todos.total++ - }) - callback(todos) - }) -} diff --git a/src/js/model.stub.js b/src/js/model.stub.js deleted file mode 100644 index ef557af..0000000 --- a/src/js/model.stub.js +++ /dev/null @@ -1,6 +0,0 @@ -export default getModelStub - -function getModelStub() { - return { - } -} diff --git a/src/js/store.js b/src/js/store.js deleted file mode 100755 index d086f8e..0000000 --- a/src/js/store.js +++ /dev/null @@ -1,135 +0,0 @@ -export default Store -/** - * Creates a new client side storage object and will create an empty - * collection if no collection already exists. - * - * @param {string} name The name of our DB we want to use - * @param {function} callback Our fake DB uses callbacks because in - * real life you probably would be making AJAX calls - */ -function Store(name, callback) { - callback = callback || function() { - } - - this._dbName = name - - if (!localStorage[name]) { - var data = { - todos: [] - } - - localStorage[name] = JSON.stringify(data) - } - - callback.call(this, JSON.parse(localStorage[name])) -} - -/** -* 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 - } - } - 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) { // eslint-disable-line guard-for-in - 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++) { - if (todos[i].id === id) { - todos.splice(i, 1) - break - } - } - - localStorage[this._dbName] = JSON.stringify(data) - callback.call(this, JSON.parse(localStorage[this._dbName]).todos) -} - -/** -* Will drop all storage and start fresh -* -* @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) -} diff --git a/src/js/template.js b/src/js/template.js deleted file mode 100755 index 60c4f6f..0000000 --- a/src/js/template.js +++ /dev/null @@ -1,110 +0,0 @@ -export default Template - -var htmlEscapes = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - '\'': ''', - '`': '`' -} - -var escapeHtmlChar = function(chr) { - return htmlEscapes[chr] -} - -var reUnescapedHtml = /[&<>"'`]/g -var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source) - -var escape = function(string) { - if (string && reHasUnescapedHtml.test(string)) { - return string.replace(reUnescapedHtml, escapeHtmlChar) - } else { - return string - } -} - -/** -* Sets up defaults for all the Template methods such as a default template -* -* @constructor -*/ -function Template() { - this.defaultTemplate = ` -