├── .npmignore ├── examples └── todomvc │ ├── .gitignore │ ├── js │ ├── alt.js │ ├── app.js │ ├── actions │ │ └── TodoActions.js │ ├── components │ │ ├── Header.react.js │ │ ├── MainSection.react.js │ │ ├── TodoApp.react.js │ │ ├── Footer.react.js │ │ ├── TodoTextInput.react.js │ │ └── TodoItem.react.js │ └── stores │ │ └── TodoStore.js │ ├── todomvc-common │ ├── bower.json │ ├── bg.png │ ├── readme.md │ └── base.css │ ├── css │ └── app.css │ ├── index.html │ ├── package.json │ └── README.md ├── .gitignore ├── src ├── index.js ├── PouchActions.js └── PouchStore.js ├── .editorconfig ├── .jshintrc ├── README.md ├── package.json └── LICENSE /.npmignore: -------------------------------------------------------------------------------- 1 | examples 2 | npm-debug.log 3 | src 4 | -------------------------------------------------------------------------------- /examples/todomvc/.gitignore: -------------------------------------------------------------------------------- 1 | /js/bundle.js 2 | /js/bundle.min.js 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *~ 3 | *.sw[op] 4 | lib 5 | npm-debug.log 6 | dist 7 | -------------------------------------------------------------------------------- /examples/todomvc/js/alt.js: -------------------------------------------------------------------------------- 1 | var Alt = require('alt') 2 | var alt = new Alt() 3 | 4 | module.exports = alt 5 | -------------------------------------------------------------------------------- /examples/todomvc/todomvc-common/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todomvc-common", 3 | "version": "0.1.9" 4 | } 5 | -------------------------------------------------------------------------------- /examples/todomvc/todomvc-common/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olafura/PouchFlux/HEAD/examples/todomvc/todomvc-common/bg.png -------------------------------------------------------------------------------- /examples/todomvc/todomvc-common/readme.md: -------------------------------------------------------------------------------- 1 | # todomvc-common 2 | 3 | > Bower component for some common utilities we use in every app 4 | 5 | 6 | ## License 7 | 8 | MIT 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var PouchStore = require('./PouchStore'); 3 | var PouchActions = require('./PouchActions'); 4 | 5 | module.exports = {PouchStore, PouchActions}; 6 | -------------------------------------------------------------------------------- /examples/todomvc/js/app.js: -------------------------------------------------------------------------------- 1 | var TodoApp = require('./components/TodoApp.react') 2 | var React = require('react') 3 | React.render( 4 | React.createElement(TodoApp, {}), 5 | document.getElementById('todoapp') 6 | ) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/PouchActions.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | class PouchActions { 4 | constructor() { 5 | this.generateActions( 6 | 'changeName', 7 | 'put', 8 | 'updateAll', 9 | 'remove', 10 | 'sync', 11 | 'createDb', 12 | 'deleteDb' 13 | ); 14 | } 15 | } 16 | 17 | module.exports = PouchActions; 18 | -------------------------------------------------------------------------------- /examples/todomvc/js/actions/TodoActions.js: -------------------------------------------------------------------------------- 1 | var alt = require('../alt') 2 | var PouchActions = require('../../../../src/PouchActions'); 3 | 4 | class TodoActions extends PouchActions { 5 | constructor() { 6 | this.generateActions( 7 | 'create', 8 | 'updateText', 9 | 'toggleComplete', 10 | 'toggleCompleteAll', 11 | 'destroy', 12 | 'destroyCompleted' 13 | ) 14 | } 15 | } 16 | 17 | module.exports = alt.createActions(TodoActions) 18 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": false, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 2, 10 | "latedef": true, 11 | "newcap": false, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "white": true, 21 | "globals": { "window": true } 22 | } 23 | -------------------------------------------------------------------------------- /examples/todomvc/css/app.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * base.css overrides 10 | */ 11 | 12 | /** 13 | * We are not changing from display:none, but rather re-rendering instead. 14 | * Therefore this needs to be displayed normally by default. 15 | */ 16 | #todo-list li .edit { 17 | display: inline; 18 | } 19 | -------------------------------------------------------------------------------- /examples/todomvc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Alt - TodoMVC 6 | 7 | 8 | 9 | 10 |
11 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/todomvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todomvc-alt", 3 | "version": "1.0.0", 4 | "description": "Example Flux architecture using alt.", 5 | "repository": "https://github.com/goatslacker/alt", 6 | "main": "js/app.js", 7 | "dependencies": { 8 | "object-assign": "^2.0.0", 9 | "alt": "^0.14.5", 10 | "react": "^0.12.2" 11 | }, 12 | "devDependencies": { 13 | "browserify": "~4.2.2", 14 | "local-web-server": "^0.5.18", 15 | "babelify": "^5.0.3" 16 | }, 17 | "license": "MIT", 18 | "scripts": { 19 | "build": "browserify js/app.js > js/bundle.js", 20 | "serve": "ws", 21 | "test": "jest" 22 | }, 23 | "author": "Josh Perez ", 24 | "browserify": { 25 | "transform": [ 26 | "babelify" 27 | ] 28 | }, 29 | "jest": { 30 | "rootDir": "./js" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PouchFlux 2 | Flux with PouchDB 3 | 4 | ## Simple example 5 | 6 | Action 7 | ```js 8 | var alt = require('../alt'); 9 | var PouchActions = require('pouchflux/lib/PouchActions'); 10 | 11 | class ExampleActions extends PouchActions { 12 | } 13 | 14 | module.exports = alt.createActions(ExampleActions) 15 | ``` 16 | 17 | Store 18 | ```js 19 | var alt = require('../alt'); 20 | var PouchStore = require('pouchflux/lib/PouchStore'); 21 | 22 | var ExampleActions = require('../actions/ExampleActions'); 23 | 24 | var exampleStore = alt.createStore(class ExampleStore extends PouchStore { 25 | constructor() { 26 | super('exampleStore'); 27 | this.bindActions(ExampleActions) 28 | } 29 | 30 | }); 31 | module.exports = exampleStore; 32 | ``` 33 | 34 | You can choose to set the database name with the super function or later with 35 | the `PouchActions.changeName({'name':'exampleStore'});` 36 | 37 | A more detailed example is in the ported version of the TodoStore from Alt. 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pouchflux", 3 | "version": "0.0.14", 4 | "description": "PouchDB flux store", 5 | "author": "Olafur Arason ", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/olafura/PouchFlux" 9 | }, 10 | "main": "lib", 11 | "license": "Apache 2.0", 12 | "dependencies": { 13 | "alt": "~0.16", 14 | "debug": "^2.1.3", 15 | "object-assign": "^2.0.0", 16 | "pouchdb": "~3.6", 17 | "socket-pouch": "^0.2.0" 18 | }, 19 | "devDependencies": { 20 | "babel": "^5.1.11", 21 | "babel-core": "^5.1.11", 22 | "es3ify": "~0.1.3", 23 | "lintspaces": "^0.2.3", 24 | "memdown": "^1.0.0", 25 | "rimraf": "^2.3.2" 26 | }, 27 | "keywords": [ 28 | "flux", 29 | "alt", 30 | "pouchdb", 31 | "react", 32 | "database" 33 | ], 34 | "scripts": { 35 | "build": "npm run clean && npm run build-pf", 36 | "build-pf": "babel src --out-dir lib --stage 0", 37 | "clean": "rimraf lib", 38 | "lint": "lintspaces -e .editorconfig src/*", 39 | "hint": "jsxhint src/*", 40 | "prepublish": "npm run lint && npm run hint && npm run build" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/todomvc/js/components/Header.react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * @jsx React.DOM 10 | */ 11 | 12 | var React = require('react'); 13 | var TodoActions = require('../actions/TodoActions'); 14 | var TodoTextInput = require('./TodoTextInput.react'); 15 | 16 | var Header = React.createClass({ 17 | 18 | /** 19 | * @return {object} 20 | */ 21 | render: function() { 22 | return ( 23 | 31 | ); 32 | }, 33 | 34 | /** 35 | * Event handler called within TodoTextInput. 36 | * Defining this here allows TodoTextInput to be used in multiple places 37 | * in different ways. 38 | * @param {string} text 39 | */ 40 | _onSave: function(text) { 41 | if (text.trim()){ 42 | TodoActions.create(text); 43 | } 44 | 45 | } 46 | 47 | }); 48 | 49 | module.exports = Header; 50 | -------------------------------------------------------------------------------- /examples/todomvc/js/components/MainSection.react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * @jsx React.DOM 10 | */ 11 | 12 | var React = require('react'); 13 | var ReactPropTypes = React.PropTypes; 14 | var TodoActions = require('../actions/TodoActions'); 15 | var TodoItem = require('./TodoItem.react'); 16 | 17 | var MainSection = React.createClass({ 18 | 19 | propTypes: { 20 | allTodos: ReactPropTypes.object.isRequired, 21 | areAllComplete: ReactPropTypes.bool.isRequired 22 | }, 23 | 24 | /** 25 | * @return {object} 26 | */ 27 | render: function() { 28 | // This section should be hidden by default 29 | // and shown when there are todos. 30 | if (Object.keys(this.props.allTodos).length < 1) { 31 | return null; 32 | } 33 | 34 | var allTodos = this.props.allTodos; 35 | var todos = []; 36 | 37 | for (var key in allTodos) { 38 | todos.push(); 39 | } 40 | 41 | return ( 42 |
43 | 49 | 50 |
    {todos}
51 |
52 | ); 53 | }, 54 | 55 | /** 56 | * Event handler to mark all TODOs as complete 57 | */ 58 | _onToggleCompleteAll: function() { 59 | TodoActions.toggleCompleteAll(); 60 | } 61 | 62 | }); 63 | 64 | module.exports = MainSection; 65 | -------------------------------------------------------------------------------- /examples/todomvc/js/stores/TodoStore.js: -------------------------------------------------------------------------------- 1 | var alt = require('../alt'); 2 | var React = require('react'); 3 | var merge = require('object-assign') 4 | var PouchStore = require('../../../../src/PouchStore'); 5 | 6 | var TodoActions = require('../actions/TodoActions') 7 | 8 | var todoStore = alt.createStore(class TodoStore extends PouchStore { 9 | constructor() { 10 | super('todoStore'); 11 | this.bindActions(TodoActions) 12 | } 13 | 14 | onCreate(text) { 15 | text = text.trim() 16 | if (text === '') { 17 | return false 18 | } 19 | // hand waving of course. 20 | var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36) 21 | this.onPut({ 22 | _id: id, 23 | complete: false, 24 | text: text 25 | }); 26 | } 27 | 28 | onUpdateText(x) { 29 | var id = x[0] 30 | var text = x[1] 31 | console.log('id', id); 32 | console.log('text', text) 33 | text = text ? text.trim() : '' 34 | if (text === '') { 35 | return false 36 | } 37 | var newdoc = merge(this.docs[id], { text }) 38 | TodoActions.put(newdoc) 39 | } 40 | 41 | onToggleComplete(id) { 42 | var doc = this.docs[id] 43 | var complete = !doc.complete 44 | var newdoc = merge(doc, { complete }) 45 | TodoActions.put(newdoc); 46 | } 47 | 48 | onToggleCompleteAll() { 49 | var complete = !todoStore.areAllComplete() 50 | this.onUpdateAll({ complete }) 51 | } 52 | 53 | onDestroy(key) { 54 | this.onRemove(this.docs[key]) 55 | } 56 | 57 | onDestroyCompleted() { 58 | for (var key in this.docs) { 59 | if (this.docs[key].complete) { 60 | this.onDestroy(key) 61 | } 62 | } 63 | } 64 | 65 | static areAllComplete() { 66 | var { docs } = this.getState() 67 | for (var id in docs) { 68 | if (!docs[id].complete) { 69 | return false 70 | } 71 | } 72 | return true 73 | } 74 | }) 75 | 76 | module.exports = todoStore 77 | -------------------------------------------------------------------------------- /examples/todomvc/js/components/TodoApp.react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * @jsx React.DOM 10 | */ 11 | 12 | /** 13 | * This component operates as a "Controller-View". It listens for changes in 14 | * the TodoStore and passes the new data to its children. 15 | */ 16 | 17 | var Footer = require('./Footer.react'); 18 | var Header = require('./Header.react'); 19 | var MainSection = require('./MainSection.react'); 20 | var React = require('react'); 21 | var TodoStore = require('../stores/TodoStore'); 22 | var FluxyMixin = require('alt/mixins/FluxyMixin'); 23 | 24 | /** 25 | * Retrieve the current TODO data from the TodoStore 26 | */ 27 | function getTodoState() { 28 | return { 29 | allTodos: TodoStore.getState().docs, 30 | areAllComplete: TodoStore.areAllComplete() 31 | }; 32 | } 33 | 34 | var TodoApp = React.createClass({ 35 | mixins: [FluxyMixin], 36 | 37 | statics: { 38 | storeListeners: { 39 | _updateAll: TodoStore 40 | } 41 | }, 42 | 43 | getInitialState: function() { 44 | return getTodoState(); 45 | }, 46 | 47 | /** 48 | * @return {object} 49 | */ 50 | render: function() { 51 | return ( 52 |
53 |
54 | 58 |
59 |
60 | ); 61 | }, 62 | 63 | /** 64 | * Event handler for 'change' events coming from the TodoStore 65 | */ 66 | _updateAll: function() { 67 | console.log('getting update'); 68 | var todoState = getTodoState() 69 | console.log('todoState', todoState); 70 | this.setState(todoState); 71 | } 72 | 73 | }); 74 | 75 | module.exports = TodoApp; 76 | -------------------------------------------------------------------------------- /examples/todomvc/js/components/Footer.react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * @jsx React.DOM 10 | */ 11 | 12 | var React = require('react'); 13 | var ReactPropTypes = React.PropTypes; 14 | var TodoActions = require('../actions/TodoActions'); 15 | 16 | var Footer = React.createClass({ 17 | 18 | propTypes: { 19 | allTodos: ReactPropTypes.object.isRequired 20 | }, 21 | 22 | /** 23 | * @return {object} 24 | */ 25 | render: function() { 26 | var allTodos = this.props.allTodos; 27 | var total = Object.keys(allTodos).length; 28 | 29 | if (total === 0) { 30 | return null; 31 | } 32 | 33 | var completed = 0; 34 | for (var key in allTodos) { 35 | if (allTodos[key].complete) { 36 | completed++; 37 | } 38 | } 39 | 40 | var itemsLeft = total - completed; 41 | var itemsLeftPhrase = itemsLeft === 1 ? ' item ' : ' items '; 42 | itemsLeftPhrase += 'left'; 43 | 44 | // Undefined and thus not rendered if no completed items are left. 45 | var clearCompletedButton; 46 | if (completed) { 47 | clearCompletedButton = 48 | ; 53 | } 54 | 55 | return ( 56 |
57 | 58 | 59 | {itemsLeft} 60 | 61 | {itemsLeftPhrase} 62 | 63 | {clearCompletedButton} 64 |
65 | ); 66 | }, 67 | 68 | /** 69 | * Event handler to delete all completed TODOs 70 | */ 71 | _onClearCompletedClick: function() { 72 | TodoActions.destroyCompleted(); 73 | } 74 | 75 | }); 76 | 77 | module.exports = Footer; 78 | -------------------------------------------------------------------------------- /examples/todomvc/js/components/TodoTextInput.react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * @jsx React.DOM 10 | */ 11 | 12 | var React = require('react'); 13 | var ReactPropTypes = React.PropTypes; 14 | 15 | var ENTER_KEY_CODE = 13; 16 | 17 | var TodoTextInput = React.createClass({ 18 | 19 | propTypes: { 20 | className: ReactPropTypes.string, 21 | id: ReactPropTypes.string, 22 | placeholder: ReactPropTypes.string, 23 | onSave: ReactPropTypes.func.isRequired, 24 | value: ReactPropTypes.string 25 | }, 26 | 27 | getInitialState: function() { 28 | return { 29 | value: this.props.value || '' 30 | }; 31 | }, 32 | 33 | /** 34 | * @return {object} 35 | */ 36 | render: function() /*object*/ { 37 | return ( 38 | 48 | ); 49 | }, 50 | 51 | /** 52 | * Invokes the callback passed in as onSave, allowing this component to be 53 | * used in different ways. 54 | */ 55 | _save: function() { 56 | this.props.onSave(this.state.value); 57 | this.setState({ 58 | value: '' 59 | }); 60 | }, 61 | 62 | /** 63 | * @param {object} event 64 | */ 65 | _onChange: function(/*object*/ event) { 66 | this.setState({ 67 | value: event.target.value 68 | }); 69 | }, 70 | 71 | /** 72 | * @param {object} event 73 | */ 74 | _onKeyDown: function(event) { 75 | if (event.keyCode === ENTER_KEY_CODE) { 76 | this._save(); 77 | } 78 | } 79 | 80 | }); 81 | 82 | module.exports = TodoTextInput; 83 | -------------------------------------------------------------------------------- /examples/todomvc/js/components/TodoItem.react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | * 9 | * @jsx React.DOM 10 | */ 11 | 12 | var React = require('react'); 13 | var ReactPropTypes = React.PropTypes; 14 | var TodoActions = require('../actions/TodoActions'); 15 | var TodoTextInput = require('./TodoTextInput.react'); 16 | 17 | var cx = require('react/lib/cx'); 18 | 19 | var TodoItem = React.createClass({ 20 | 21 | propTypes: { 22 | todo: ReactPropTypes.object.isRequired 23 | }, 24 | 25 | getInitialState: function() { 26 | return { 27 | isEditing: false 28 | }; 29 | }, 30 | 31 | /** 32 | * @return {object} 33 | */ 34 | render: function() { 35 | var todo = this.props.todo; 36 | 37 | var input; 38 | if (this.state.isEditing) { 39 | input = 40 | ; 45 | } 46 | 47 | // List items should get the class 'editing' when editing 48 | // and 'completed' when marked as completed. 49 | // Note that 'completed' is a classification while 'complete' is a state. 50 | // This differentiation between classification and state becomes important 51 | // in the naming of view actions toggleComplete() vs. destroyCompleted(). 52 | return ( 53 |
  • 59 |
    60 | 66 | 69 |
    71 | {input} 72 |
    • 73 | ); 74 | }, 75 | 76 | _onToggleComplete: function() { 77 | TodoActions.toggleComplete(this.props.todo._id); 78 | }, 79 | 80 | _onDoubleClick: function() { 81 | this.setState({isEditing: true}); 82 | }, 83 | 84 | /** 85 | * Event handler called within TodoTextInput. 86 | * Defining this here allows TodoTextInput to be used in multiple places 87 | * in different ways. 88 | * @param {string} text 89 | */ 90 | _onSave: function(text) { 91 | TodoActions.updateText(this.props.todo._id, text); 92 | this.setState({isEditing: false}); 93 | }, 94 | 95 | _onDestroyClick: function() { 96 | TodoActions.destroy(this.props.todo._id); 97 | } 98 | 99 | }); 100 | 101 | module.exports = TodoItem; 102 | -------------------------------------------------------------------------------- /src/PouchStore.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var merge = require('object-assign'); 4 | var Debug = require('debug'); 5 | var debug = Debug('pouchflux:store'); 6 | var PouchDB = require('pouchdb'); 7 | PouchDB.adapter('socket', require('socket-pouch/client')); 8 | 9 | class PouchStore { 10 | constructor(name, view, key, readyFunc) { 11 | debug('constructor', arguments); 12 | this.docs = {}; 13 | this.db = null; 14 | this.name = null; 15 | if(name) { 16 | var args = {name, view, key, readyFunc}; 17 | this.onChangeName(args); 18 | } 19 | } 20 | 21 | onChangeName(args) { 22 | var {name, view, key, readyFunc} = args; 23 | this.db = new PouchDB(name, {ajax: {cache: true}}); 24 | this.name = name; 25 | debug('db', this.db); 26 | debug('name', this.name); 27 | var options = { 28 | since: 'now', 29 | live: true, 30 | include_docs: true 31 | }; 32 | var watchChanges = function(result) { 33 | debug('result', result); 34 | if(result && result.rows) { 35 | var newrows = result.rows.map(function(row){return row.doc;}); 36 | this.onUpdateAll(newrows); 37 | } 38 | this.changes = this.db.changes(options).on('change', function(change) { 39 | debug('changes change', change); 40 | var doc = change.doc; 41 | if(doc) { 42 | this.onUpdateAll([doc]); 43 | } 44 | }.bind(this)).on('complete', function(info) { 45 | debug('changes complete', info); 46 | }.bind(this)).on('error', function (err) { 47 | debug('changes error', err); 48 | }.bind(this)); 49 | }.bind(this); 50 | if(view) { 51 | this.db.query(view, {include_docs: true}).then(watchChanges); 52 | options.filter = '_view'; 53 | options.view = view; 54 | } else { 55 | this.db.allDocs({include_docs: true}).then(watchChanges); 56 | } 57 | if(key) { 58 | this.key = key; 59 | } else { 60 | this.key = '_id'; 61 | } 62 | if(readyFunc) { 63 | readyFunc(); 64 | } 65 | } 66 | 67 | onPut(doc) { 68 | debug('put', doc); 69 | if(this.db) { 70 | this.db.put(doc).then(function(result) { 71 | debug('put result', result); 72 | }).catch(function(err) { 73 | debug('put error: ', err); 74 | }); 75 | } 76 | } 77 | 78 | onUpdateAll(docs) { 79 | debug('update', docs); 80 | if(this.db) { 81 | if(Array.isArray(docs)){ 82 | for(var i = 0; i < docs.length; i++) { 83 | var doc = docs[i]; 84 | debug('doc', doc); 85 | var key = doc[this.key]; 86 | debug('key', key); 87 | if(doc._deleted && key in this.docs) { 88 | delete this.docs[key]; 89 | } else { 90 | this.docs[key] = doc; 91 | } 92 | } 93 | } else { 94 | for(var key2 in this.docs) { 95 | this.docs[key2] = merge(this.docs[key2], docs); 96 | } 97 | } 98 | debug('docs', this.docs); 99 | if(this.processDocs) { 100 | this.processDocs(); 101 | } 102 | this.emitChange(); 103 | } 104 | } 105 | 106 | onRemove(doc) { 107 | if(this.db) { 108 | debug('remove', doc); 109 | this.db.remove(doc).then(function(result) { 110 | debug('remove result', result); 111 | }).catch(function(err) { 112 | debug('remove error: ', err); 113 | }); 114 | } 115 | } 116 | 117 | onSync(args) { 118 | var {destination, options} = args; 119 | debug('sync', this.name, destination, options); 120 | if(this.db) { 121 | if(options) { 122 | PouchDB.sync(this.name, destination, options); 123 | } else { 124 | PouchDB.sync(this.name, destination); 125 | } 126 | } 127 | } 128 | 129 | onCreateDb(name) { 130 | debug('createDB', name); 131 | } 132 | 133 | onDeleteDb(name) { 134 | debug('deleteDB', name); 135 | } 136 | } 137 | 138 | module.exports = PouchStore; 139 | -------------------------------------------------------------------------------- /examples/todomvc/README.md: -------------------------------------------------------------------------------- 1 | # Alt TodoMVC Example 2 | 3 | > A copy of [flux-todomvc](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) but using alt 4 | 5 | ## What is this? 6 | 7 | This is todomvc written to work with alt. It's mostly the same code as flux's todomvc, in fact I only changed a couple of lines in the view layer. The bulk of the changes were in the store and actions, and the removal of the dispatcher and the constants since alt handles those two for you. 8 | 9 | ## Learning Flux 10 | 11 | I won't document learning flux here, you can check out Flux's todomvc [README](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/README.md) which has a great overview. Alt is essentially flux so the concepts translate over well. 12 | 13 | ## Alt and Flux 14 | 15 | Instead, I'll use this space to talk about why alt and compare it to flux. 16 | 17 | 18 | ### Folder Structure 19 | 20 | The folder structure is very similar with the difference in that alt omits the `constants` and `dispatcher` 21 | 22 | Your tree would look something like this: 23 | 24 | ``` 25 | ./ 26 | index.html 27 | js/ 28 | actions/ 29 | TodoActions.js 30 | app.js 31 | bundle.js 32 | components/ 33 | Footer.react.js 34 | Header.react.js 35 | MainSection.react.js 36 | TodoApp.react.js 37 | TodoItem.react.js 38 | TodoTextInput.react.js 39 | stores/ 40 | TodoStore.js 41 | ``` 42 | 43 | You can read more about what the rest of the files do [here](https://github.com/facebook/flux/blob/master/examples/flux-todomvc/README.md#todomvc-example-implementation). 44 | 45 | ### Terse Syntax 46 | 47 | One of the main benefits of alt is the terse syntax. The actions in flux are ~80 LOC, and the dispatcher is ~15 LOC. With alt you can write both in ~15 LOC. 48 | 49 | Here are the actions: 50 | 51 | ```js 52 | var alt = require('../alt') 53 | 54 | class TodoActions { 55 | constructor() { 56 | this.generateActions( 57 | 'create', 58 | 'updateText', 59 | 'toggleComplete', 60 | 'toggleCompleteAll', 61 | 'destroy', 62 | 'destroyCompleted' 63 | ) 64 | } 65 | } 66 | 67 | module.exports = alt.createActions(TodoActions) 68 | ``` 69 | 70 | The store on flux closk in at ~160 LOC. In alt the store is 80 LOC. 71 | 72 | Here's the store: 73 | 74 | ```js 75 | var alt = require('../alt') 76 | var merge = require('object-assign') 77 | 78 | var TodoActions = require('../actions/TodoActions') 79 | 80 | var todoStore = alt.createStore(class TodoStore { 81 | constructor() { 82 | this.bindActions(TodoActions) 83 | 84 | this.todos = {} 85 | } 86 | 87 | update(id, updates) { 88 | this.todos[id] = merge(this.todos[id], updates) 89 | } 90 | 91 | updateAll(updates) { 92 | for (var id in this.todos) { 93 | this.update(id, updates) 94 | } 95 | } 96 | 97 | onCreate(text) { 98 | text = text.trim() 99 | if (text === '') { 100 | return false 101 | } 102 | // hand waving of course. 103 | var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36) 104 | this.todos[id] = { 105 | id: id, 106 | complete: false, 107 | text: text 108 | } 109 | } 110 | 111 | onUpdateText(x) { 112 | var { id, text } = x 113 | text = text.trim() 114 | if (text === '') { 115 | return false 116 | } 117 | this.update(id, { text }) 118 | } 119 | 120 | onToggleComplete(id) { 121 | var complete = !this.todos[id].complete 122 | this.update(id, { complete }) 123 | } 124 | 125 | onToggleCompleteAll() { 126 | var complete = !todoStore.areAllComplete() 127 | this.updateAll({ complete }) 128 | } 129 | 130 | onDestroy(id) { 131 | delete this.todos[id] 132 | } 133 | 134 | onDestroyCompleted() { 135 | for (var id in this.todos) { 136 | if (this.todos[id].complete) { 137 | this.onDestroy(id) 138 | } 139 | } 140 | } 141 | 142 | static areAllComplete() { 143 | var { todos } = this.getState() 144 | for (var id in todos) { 145 | if (!todos[id].complete) { 146 | return false 147 | } 148 | } 149 | return true 150 | } 151 | }) 152 | 153 | module.exports = todoStore 154 | ``` 155 | 156 | 157 | ### Running 158 | 159 | Install the dependencies first 160 | 161 | ``` 162 | npm install 163 | ``` 164 | 165 | Build a package 166 | 167 | ``` 168 | npm run build 169 | ``` 170 | 171 | Open index.html in your browser 172 | 173 | ``` 174 | open index.html 175 | ``` 176 | 177 | ## Credit 178 | 179 | The original flux TodoMVC application was created by [Bill Fisher](https://www.facebook.com/bill.fisher.771). All the view components and most of the rest of the code was written by Bill. The actions and stores have been alted by [Josh Perez](https://github.com/goatslacker) 180 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /examples/todomvc/todomvc-common/base.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | button { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | background: none; 12 | font-size: 100%; 13 | vertical-align: baseline; 14 | font-family: inherit; 15 | color: inherit; 16 | -webkit-appearance: none; 17 | -ms-appearance: none; 18 | -o-appearance: none; 19 | appearance: none; 20 | } 21 | 22 | body { 23 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 24 | line-height: 1.4em; 25 | background: #eaeaea url('bg.png'); 26 | color: #4d4d4d; 27 | width: 550px; 28 | margin: 0 auto; 29 | -webkit-font-smoothing: antialiased; 30 | -moz-font-smoothing: antialiased; 31 | -ms-font-smoothing: antialiased; 32 | -o-font-smoothing: antialiased; 33 | font-smoothing: antialiased; 34 | } 35 | 36 | button, 37 | input[type="checkbox"] { 38 | outline: none; 39 | } 40 | 41 | #todoapp { 42 | background: #fff; 43 | background: rgba(255, 255, 255, 0.9); 44 | margin: 130px 0 40px 0; 45 | border: 1px solid #ccc; 46 | position: relative; 47 | border-top-left-radius: 2px; 48 | border-top-right-radius: 2px; 49 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 50 | 0 25px 50px 0 rgba(0, 0, 0, 0.15); 51 | } 52 | 53 | #todoapp:before { 54 | content: ''; 55 | border-left: 1px solid #f5d6d6; 56 | border-right: 1px solid #f5d6d6; 57 | width: 2px; 58 | position: absolute; 59 | top: 0; 60 | left: 40px; 61 | height: 100%; 62 | } 63 | 64 | #todoapp input::-webkit-input-placeholder { 65 | font-style: italic; 66 | } 67 | 68 | #todoapp input::-moz-placeholder { 69 | font-style: italic; 70 | color: #a9a9a9; 71 | } 72 | 73 | #todoapp h1 { 74 | position: absolute; 75 | top: -120px; 76 | width: 100%; 77 | font-size: 70px; 78 | font-weight: bold; 79 | text-align: center; 80 | color: #b3b3b3; 81 | color: rgba(255, 255, 255, 0.3); 82 | text-shadow: -1px -1px rgba(0, 0, 0, 0.2); 83 | -webkit-text-rendering: optimizeLegibility; 84 | -moz-text-rendering: optimizeLegibility; 85 | -ms-text-rendering: optimizeLegibility; 86 | -o-text-rendering: optimizeLegibility; 87 | text-rendering: optimizeLegibility; 88 | } 89 | 90 | #header { 91 | padding-top: 15px; 92 | border-radius: inherit; 93 | } 94 | 95 | #header:before { 96 | content: ''; 97 | position: absolute; 98 | top: 0; 99 | right: 0; 100 | left: 0; 101 | height: 15px; 102 | z-index: 2; 103 | border-bottom: 1px solid #6c615c; 104 | background: #8d7d77; 105 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); 106 | background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); 107 | background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); 108 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); 109 | border-top-left-radius: 1px; 110 | border-top-right-radius: 1px; 111 | } 112 | 113 | #new-todo, 114 | .edit { 115 | position: relative; 116 | margin: 0; 117 | width: 100%; 118 | font-size: 24px; 119 | font-family: inherit; 120 | line-height: 1.4em; 121 | border: 0; 122 | outline: none; 123 | color: inherit; 124 | padding: 6px; 125 | border: 1px solid #999; 126 | box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); 127 | -moz-box-sizing: border-box; 128 | -ms-box-sizing: border-box; 129 | -o-box-sizing: border-box; 130 | box-sizing: border-box; 131 | -webkit-font-smoothing: antialiased; 132 | -moz-font-smoothing: antialiased; 133 | -ms-font-smoothing: antialiased; 134 | -o-font-smoothing: antialiased; 135 | font-smoothing: antialiased; 136 | } 137 | 138 | #new-todo { 139 | padding: 16px 16px 16px 60px; 140 | border: none; 141 | background: rgba(0, 0, 0, 0.02); 142 | z-index: 2; 143 | box-shadow: none; 144 | } 145 | 146 | #main { 147 | position: relative; 148 | z-index: 2; 149 | border-top: 1px dotted #adadad; 150 | } 151 | 152 | label[for='toggle-all'] { 153 | display: none; 154 | } 155 | 156 | #toggle-all { 157 | position: absolute; 158 | top: -42px; 159 | left: -4px; 160 | width: 40px; 161 | text-align: center; 162 | /* Mobile Safari */ 163 | border: none; 164 | } 165 | 166 | #toggle-all:before { 167 | content: '»'; 168 | font-size: 28px; 169 | color: #d9d9d9; 170 | padding: 0 25px 7px; 171 | } 172 | 173 | #toggle-all:checked:before { 174 | color: #737373; 175 | } 176 | 177 | #todo-list { 178 | margin: 0; 179 | padding: 0; 180 | list-style: none; 181 | } 182 | 183 | #todo-list li { 184 | position: relative; 185 | font-size: 24px; 186 | border-bottom: 1px dotted #ccc; 187 | } 188 | 189 | #todo-list li:last-child { 190 | border-bottom: none; 191 | } 192 | 193 | #todo-list li.editing { 194 | border-bottom: none; 195 | padding: 0; 196 | } 197 | 198 | #todo-list li.editing .edit { 199 | display: block; 200 | width: 506px; 201 | padding: 13px 17px 12px 17px; 202 | margin: 0 0 0 43px; 203 | } 204 | 205 | #todo-list li.editing .view { 206 | display: none; 207 | } 208 | 209 | #todo-list li .toggle { 210 | text-align: center; 211 | width: 40px; 212 | /* auto, since non-WebKit browsers doesn't support input styling */ 213 | height: auto; 214 | position: absolute; 215 | top: 0; 216 | bottom: 0; 217 | margin: auto 0; 218 | /* Mobile Safari */ 219 | border: none; 220 | -webkit-appearance: none; 221 | -ms-appearance: none; 222 | -o-appearance: none; 223 | appearance: none; 224 | } 225 | 226 | #todo-list li .toggle:after { 227 | content: '✔'; 228 | /* 40 + a couple of pixels visual adjustment */ 229 | line-height: 43px; 230 | font-size: 20px; 231 | color: #d9d9d9; 232 | text-shadow: 0 -1px 0 #bfbfbf; 233 | } 234 | 235 | #todo-list li .toggle:checked:after { 236 | color: #85ada7; 237 | text-shadow: 0 1px 0 #669991; 238 | bottom: 1px; 239 | position: relative; 240 | } 241 | 242 | #todo-list li label { 243 | white-space: pre; 244 | word-break: break-word; 245 | padding: 15px 60px 15px 15px; 246 | margin-left: 45px; 247 | display: block; 248 | line-height: 1.2; 249 | -webkit-transition: color 0.4s; 250 | transition: color 0.4s; 251 | } 252 | 253 | #todo-list li.completed label { 254 | color: #a9a9a9; 255 | text-decoration: line-through; 256 | } 257 | 258 | #todo-list li .destroy { 259 | display: none; 260 | position: absolute; 261 | top: 0; 262 | right: 10px; 263 | bottom: 0; 264 | width: 40px; 265 | height: 40px; 266 | margin: auto 0; 267 | font-size: 22px; 268 | color: #a88a8a; 269 | -webkit-transition: all 0.2s; 270 | transition: all 0.2s; 271 | } 272 | 273 | #todo-list li .destroy:hover { 274 | text-shadow: 0 0 1px #000, 275 | 0 0 10px rgba(199, 107, 107, 0.8); 276 | -webkit-transform: scale(1.3); 277 | -ms-transform: scale(1.3); 278 | transform: scale(1.3); 279 | } 280 | 281 | #todo-list li .destroy:after { 282 | content: '✖'; 283 | } 284 | 285 | #todo-list li:hover .destroy { 286 | display: block; 287 | } 288 | 289 | #todo-list li .edit { 290 | display: none; 291 | } 292 | 293 | #todo-list li.editing:last-child { 294 | margin-bottom: -1px; 295 | } 296 | 297 | #footer { 298 | color: #777; 299 | padding: 0 15px; 300 | position: absolute; 301 | right: 0; 302 | bottom: -31px; 303 | left: 0; 304 | height: 20px; 305 | z-index: 1; 306 | text-align: center; 307 | } 308 | 309 | #footer:before { 310 | content: ''; 311 | position: absolute; 312 | right: 0; 313 | bottom: 31px; 314 | left: 0; 315 | height: 50px; 316 | z-index: -1; 317 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 318 | 0 6px 0 -3px rgba(255, 255, 255, 0.8), 319 | 0 7px 1px -3px rgba(0, 0, 0, 0.3), 320 | 0 43px 0 -6px rgba(255, 255, 255, 0.8), 321 | 0 44px 2px -6px rgba(0, 0, 0, 0.2); 322 | } 323 | 324 | #todo-count { 325 | float: left; 326 | text-align: left; 327 | } 328 | 329 | #filters { 330 | margin: 0; 331 | padding: 0; 332 | list-style: none; 333 | position: absolute; 334 | right: 0; 335 | left: 0; 336 | } 337 | 338 | #filters li { 339 | display: inline; 340 | } 341 | 342 | #filters li a { 343 | color: #83756f; 344 | margin: 2px; 345 | text-decoration: none; 346 | } 347 | 348 | #filters li a.selected { 349 | font-weight: bold; 350 | } 351 | 352 | #clear-completed { 353 | float: right; 354 | position: relative; 355 | line-height: 20px; 356 | text-decoration: none; 357 | background: rgba(0, 0, 0, 0.1); 358 | font-size: 11px; 359 | padding: 0 10px; 360 | border-radius: 3px; 361 | box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2); 362 | } 363 | 364 | #clear-completed:hover { 365 | background: rgba(0, 0, 0, 0.15); 366 | box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3); 367 | } 368 | 369 | #info { 370 | margin: 65px auto 0; 371 | color: #a6a6a6; 372 | font-size: 12px; 373 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); 374 | text-align: center; 375 | } 376 | 377 | #info a { 378 | color: inherit; 379 | } 380 | 381 | /* 382 | Hack to remove background from Mobile Safari. 383 | Can't use it globally since it destroys checkboxes in Firefox and Opera 384 | */ 385 | 386 | @media screen and (-webkit-min-device-pixel-ratio:0) { 387 | #toggle-all, 388 | #todo-list li .toggle { 389 | background: none; 390 | } 391 | 392 | #todo-list li .toggle { 393 | height: 40px; 394 | } 395 | 396 | #toggle-all { 397 | top: -56px; 398 | left: -15px; 399 | width: 65px; 400 | height: 41px; 401 | -webkit-transform: rotate(90deg); 402 | -ms-transform: rotate(90deg); 403 | transform: rotate(90deg); 404 | -webkit-appearance: none; 405 | appearance: none; 406 | } 407 | } 408 | 409 | .hidden { 410 | display: none; 411 | } 412 | 413 | hr { 414 | margin: 20px 0; 415 | border: 0; 416 | border-top: 1px dashed #C5C5C5; 417 | border-bottom: 1px dashed #F7F7F7; 418 | } 419 | 420 | .learn a { 421 | font-weight: normal; 422 | text-decoration: none; 423 | color: #b83f45; 424 | } 425 | 426 | .learn a:hover { 427 | text-decoration: underline; 428 | color: #787e7e; 429 | } 430 | 431 | .learn h3, 432 | .learn h4, 433 | .learn h5 { 434 | margin: 10px 0; 435 | font-weight: 500; 436 | line-height: 1.2; 437 | color: #000; 438 | } 439 | 440 | .learn h3 { 441 | font-size: 24px; 442 | } 443 | 444 | .learn h4 { 445 | font-size: 18px; 446 | } 447 | 448 | .learn h5 { 449 | margin-bottom: 0; 450 | font-size: 14px; 451 | } 452 | 453 | .learn ul { 454 | padding: 0; 455 | margin: 0 0 30px 25px; 456 | } 457 | 458 | .learn li { 459 | line-height: 20px; 460 | } 461 | 462 | .learn p { 463 | font-size: 15px; 464 | font-weight: 300; 465 | line-height: 1.3; 466 | margin-top: 0; 467 | margin-bottom: 0; 468 | } 469 | 470 | .quote { 471 | border: none; 472 | margin: 20px 0 60px 0; 473 | } 474 | 475 | .quote p { 476 | font-style: italic; 477 | } 478 | 479 | .quote p:before { 480 | content: '“'; 481 | font-size: 50px; 482 | opacity: .15; 483 | position: absolute; 484 | top: -20px; 485 | left: 3px; 486 | } 487 | 488 | .quote p:after { 489 | content: '”'; 490 | font-size: 50px; 491 | opacity: .15; 492 | position: absolute; 493 | bottom: -42px; 494 | right: 3px; 495 | } 496 | 497 | .quote footer { 498 | position: absolute; 499 | bottom: -40px; 500 | right: 0; 501 | } 502 | 503 | .quote footer img { 504 | border-radius: 3px; 505 | } 506 | 507 | .quote footer a { 508 | margin-left: 5px; 509 | vertical-align: middle; 510 | } 511 | 512 | .speech-bubble { 513 | position: relative; 514 | padding: 10px; 515 | background: rgba(0, 0, 0, .04); 516 | border-radius: 5px; 517 | } 518 | 519 | .speech-bubble:after { 520 | content: ''; 521 | position: absolute; 522 | top: 100%; 523 | right: 30px; 524 | border: 13px solid transparent; 525 | border-top-color: rgba(0, 0, 0, .04); 526 | } 527 | 528 | .learn-bar > .learn { 529 | position: absolute; 530 | width: 272px; 531 | top: 8px; 532 | left: -300px; 533 | padding: 10px; 534 | border-radius: 5px; 535 | background-color: rgba(255, 255, 255, .6); 536 | -webkit-transition-property: left; 537 | transition-property: left; 538 | -webkit-transition-duration: 500ms; 539 | transition-duration: 500ms; 540 | } 541 | 542 | @media (min-width: 899px) { 543 | .learn-bar { 544 | width: auto; 545 | margin: 0 0 0 300px; 546 | } 547 | 548 | .learn-bar > .learn { 549 | left: 8px; 550 | } 551 | 552 | .learn-bar #todoapp { 553 | width: 550px; 554 | margin: 130px auto 40px auto; 555 | } 556 | } 557 | --------------------------------------------------------------------------------