├── .gitignore
├── LICENSE
├── README.md
├── app
    ├── components
    │   ├── Md.js
    │   └── removeCommonIndent.js
    ├── data
    │   ├── actions
    │   │   ├── board.js
    │   │   └── index.js
    │   ├── middleware
    │   │   ├── boardNavigation.js
    │   │   ├── index.js
    │   │   └── persist.js
    │   ├── reducers
    │   │   ├── dummyReducer.js
    │   │   ├── index.js
    │   │   └── tdo
    │   │   │   ├── boards
    │   │   │       └── index.js
    │   │   │   ├── cleanup.js
    │   │   │   ├── getDefaultData.js
    │   │   │   ├── index.js
    │   │   │   ├── lists
    │   │   │       └── index.js
    │   │   │   ├── migrate.js
    │   │   │   ├── tasks
    │   │   │       └── index.js
    │   │   │   └── tutorial.js
    │   └── services
    │   │   ├── GHAuth.js
    │   │   └── Gists.js
    ├── extension.js
    ├── index.html
    ├── index.js
    ├── index.scss
    ├── routes
    │   ├── Controller.js
    │   ├── default
    │   │   ├── BoardEditor.js
    │   │   ├── Controller.js
    │   │   ├── ListEditor.js
    │   │   ├── Task.js
    │   │   ├── index.js
    │   │   ├── index.scss
    │   │   └── styling.js
    │   ├── help
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── index.js
    │   ├── index.scss
    │   └── settings
    │   │   ├── Controller.js
    │   │   ├── index.js
    │   │   └── index.scss
    └── themes
    │   ├── dark
    │       └── index.scss
    │   ├── extension.scss
    │   └── index.scss
├── assets
    ├── favicon.png
    └── screenshot.png
├── circle.yml
├── config
    ├── babel.config.js
    ├── deploy-ghpages.sh
    ├── webpack.config.js
    ├── webpack.dev.js
    ├── webpack.extension.js
    └── webpack.prod.js
├── extension
    ├── assets
    │   ├── icon_128.png
    │   ├── icon_16.png
    │   └── icon_48.png
    ├── background.js
    └── manifest_chrome.json
├── package.json
├── test
    └── README.md
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | bin
 2 | obj
 3 | dist
 4 | dist_extension
 5 | node_modules
 6 | .vs
 7 | .idea
 8 | *.user
 9 | *.db
10 | *.pem
11 | packages


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Marko Stijak
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tdo
 2 | 
 3 | > This project is not maintained anymore. The new version of tdo based on Firebase is available at https://github.com/codaxy/tdo.
 4 | 
 5 | A flexible TODO list with the following features:
 6 | 
 7 | - Markdown support
 8 | - Keyboard navigation
 9 | - Use of hashtags for categories, priorities, etc
10 | - Auto remove completed items after period of time
11 | - CSS hackability: write functions to assign CSS styles andclasses to tasks and lists
12 | - Gist storage
13 | - Ability to work with a large number of tasks
14 | 
15 | ![Screenshot](/assets/screenshot.png)
16 | 
17 | [Open](https://mstijak.github.io/tdo/)
18 | 
19 | Also available as a [Chrome extension](https://chrome.google.com/webstore/detail/tdo/aaaabkbhklmpmlnjnbicdahijpkgnkfk).
20 | 
21 | ## Install & Run
22 | 
23 | Install:
24 | ```
25 | yarn
26 | ```    
27 | Run:
28 | ```
29 | yarn start    
30 | ```
31 | 
32 | If you don't use yarn yet, npm will do too.
33 | 
34 | ### Thanks
35 | 
36 | Thanks to CircleCI the app is auto deployed to GH Pages.
37 |  
38 | Thanks to https://github.com/Villanuevand/deployment-circleci-gh-pages for 
39 | providing instructions for setting up CircleCI.
40 | 
41 | 


--------------------------------------------------------------------------------
/app/components/Md.js:
--------------------------------------------------------------------------------
 1 | import { HtmlElement } from 'cx/widgets';
 2 | import marked from 'marked';
 3 | import {removeCommonIndent} from './removeCommonIndent';
 4 | 
 5 | 
 6 | export class Md extends HtmlElement {
 7 | 
 8 |     declareData() {
 9 |         super.declareData(...arguments, {
10 |             source: undefined
11 |         })
12 |     }
13 | 
14 |     prepareData(context, instance) {
15 |         var {data} = instance;
16 | 
17 |         if (data.source || this.content) {
18 |             data.source = removeCommonIndent(data.source || this.content);
19 |             data.innerHtml = marked(data.source);
20 |         }
21 | 
22 |         super.prepareData(context, instance)
23 |     }
24 | 
25 |     isValidHtmlAttribute(attrName) {
26 |         if (attrName == 'source')
27 |             return false;
28 |         return super.isValidHtmlAttribute(attrName);
29 |     }
30 | 
31 |     add(x) {
32 | 
33 |         if (Array.isArray(x))
34 |             x.forEach(t=>this.add(t));
35 | 
36 |         if (typeof x != 'string')
37 |             return;
38 | 
39 |         this.content += x;
40 |     }
41 | }
42 | 
43 | Md.prototype.trimWhitespace = false;
44 | Md.prototype.content = '';
45 | 
46 | 


--------------------------------------------------------------------------------
/app/components/removeCommonIndent.js:
--------------------------------------------------------------------------------
 1 | export function removeCommonIndent(text) {
 2 |    var lines = text.split('\n');
 3 |    var indent = 100000;
 4 |    var firstNonEmpty = 100000, lastNonEmpty;
 5 |    lines.forEach((l, index)=> {
 6 |       for (var i = 0; i < l.length; i++) {
 7 |          if (l[i] != ' ') {
 8 |             if (i < indent)
 9 |                indent = i;
10 |             lastNonEmpty = index;
11 |             if (index < firstNonEmpty)
12 |                firstNonEmpty = index;
13 |             break;
14 |          }
15 |       }
16 |    });
17 | 
18 |    if (indent == 0)
19 |       return text;
20 | 
21 |    return lines.filter((v, i)=> (i >= firstNonEmpty && i <= lastNonEmpty))
22 |       .map(l=>(l.length > indent ? l.substring(indent) : ''))
23 |       .join('\n');
24 | }
25 | 


--------------------------------------------------------------------------------
/app/data/actions/board.js:
--------------------------------------------------------------------------------
 1 | import uid from 'uid';
 2 | 
 3 | export const ADD_BOARD = 'ADD_BOARD';
 4 | export const REMOVE_BOARD = 'REMOVE_BOARD';
 5 | 
 6 | export const GOTO_BOARD = 'GOTO_BOARD';
 7 | export const GOTO_ANY_BOARD = 'SELECT_FIRST_BOARD';
 8 | 
 9 | export const gotoBoard = id => ({
10 |     type: GOTO_BOARD,
11 |     id: id
12 | });
13 | 
14 | export const gotoAnyBoard = (forced) => ({
15 |     type: GOTO_ANY_BOARD,
16 |     forced: forced
17 | });
18 | 
19 | export const addBoard = (board = {}) => dispatch => {
20 |     if (!board)
21 |         board.id = uid();
22 | 
23 |     board.createdDate = new Date().toISOString();
24 | 
25 |     dispatch({
26 |         type: ADD_BOARD,
27 |         data: board
28 |     });
29 | };
30 | 
31 | export const removeBoard = id => ({
32 |     type: REMOVE_BOARD,
33 |     id: id
34 | });
35 | 


--------------------------------------------------------------------------------
/app/data/actions/index.js:
--------------------------------------------------------------------------------
 1 | export const REQUEST_TDO = 'REQUEST_TDO';
 2 | export const RECEIVE_TDO = 'RECEIVE_TDO';
 3 | export const LOAD_DEFAULT_TDO = 'LOAD_DEFAULT_TDO';
 4 | 
 5 | export const loadDefault = () => ({
 6 |     type: LOAD_DEFAULT_TDO
 7 | });
 8 | 
 9 | import { Gists } from '../services/Gists';
10 | import { GHAuth } from '../services/GHAuth';
11 | 
12 | import { gotoAnyBoard } from './board';
13 | 
14 | export const loadData = () => dispatch => {
15 |     var storage = GHAuth.get();
16 |     if (storage && storage.token && storage.gistId) {
17 |         dispatch({
18 |             type: REQUEST_TDO
19 |         });
20 |         let gists = new Gists(storage);
21 |         return gists.load()
22 |             .then(x=> {
23 |                 dispatch({
24 |                     type: RECEIVE_TDO,
25 |                     data: x
26 |                 });
27 |                 dispatch(gotoAnyBoard())
28 |             });
29 |     }
30 |     else {
31 |         let data = localStorage.tdo && JSON.parse(localStorage.tdo);
32 |         if (data) {
33 |             dispatch({
34 |                 type: RECEIVE_TDO,
35 |                 data: data
36 |             });
37 |         }
38 |         else {
39 |             dispatch(loadDefault());
40 |         }
41 |         dispatch(gotoAnyBoard());
42 |     }
43 | };
44 | 
45 | export * from './board';


--------------------------------------------------------------------------------
/app/data/middleware/boardNavigation.js:
--------------------------------------------------------------------------------
 1 | import { GOTO_BOARD, GOTO_ANY_BOARD } from '../actions';
 2 | 
 3 | export default store => next => action => {
 4 |     switch (action.type) {
 5 | 
 6 |         case GOTO_BOARD:
 7 |             window.location.hash = '#' + action.id;
 8 |             return;
 9 | 
10 |         case GOTO_ANY_BOARD:
11 |             if (action.forced || (window.location.hash || '#') == '#') {
12 |                 var {tdo} = store.getState();
13 |                 if (tdo.boards.length > 0)
14 |                     window.location.hash = '#' + tdo.boards[0].id;
15 |             }
16 |             return;
17 | 
18 |         default:
19 |             return next(action);
20 |     }
21 | };


--------------------------------------------------------------------------------
/app/data/middleware/index.js:
--------------------------------------------------------------------------------
1 | import boardNav from './boardNavigation';
2 | import persist from './persist';
3 | import thunk from 'redux-thunk';
4 | 
5 | export default [boardNav, thunk, persist];
6 | 


--------------------------------------------------------------------------------
/app/data/middleware/persist.js:
--------------------------------------------------------------------------------
 1 | import {Gists} from '../services/Gists';
 2 | import {GHAuth} from '../services/GHAuth';
 3 | 
 4 | var saved, saveTaskId;
 5 | 
 6 | function save(tdo) {
 7 |     if (tdo != saved && tdo.lists && tdo.lists.length > 0) {
 8 |         saved = tdo;
 9 |         var gh = GHAuth.get();
10 |         if (gh && gh.token && gh.gistId) {
11 |             if (saveTaskId)
12 |                 clearTimeout(saveTaskId);
13 |             saveTaskId = setTimeout(()=> {
14 |                 saveTaskId = null;
15 |                 let gists = new Gists(gh);
16 |                 gists.update(tdo);
17 |             }, 5000);
18 |         }
19 |         else {
20 |             localStorage.tdo = JSON.stringify(tdo);
21 |         }
22 |     }
23 | }
24 | 
25 | export default store => next => action => {
26 |     var result = next(action);
27 |     var {tdo} = store.getState();
28 |     save(tdo);
29 |     return result;
30 | };
31 | 


--------------------------------------------------------------------------------
/app/data/reducers/dummyReducer.js:
--------------------------------------------------------------------------------
1 | export default defaultState => (state = defaultState, action)  => state;
2 | 


--------------------------------------------------------------------------------
/app/data/reducers/index.js:
--------------------------------------------------------------------------------
 1 | import {combineReducers} from 'redux';
 2 | import tdo from './tdo';
 3 | 
 4 | import dummy from './dummyReducer';
 5 | 
 6 | export default combineReducers({
 7 |     tdo,
 8 |     hash: dummy('#'),
 9 |     search: dummy({}),
10 |     pages: dummy({}),
11 |     layout: dummy({})
12 | });
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/boards/index.js:
--------------------------------------------------------------------------------
 1 | import { append, updateArray } from 'cx/data';
 2 | import { ADD_BOARD, REMOVE_BOARD } from '../../../actions';
 3 | 
 4 | export default function(state = [], action) {
 5 |     switch (action.type) {
 6 |         case 'ADD_BOARD':
 7 |             return append(state, action.data);
 8 | 
 9 |         case 'REMOVE_BOARD':
10 |             return updateArray(state,
11 |                 b => ({
12 |                     ...b,
13 |                     deleted: true,
14 |                     deletedDate: new Date().toISOString()
15 |                 }),
16 |                 b=>b.id == action.id);
17 | 
18 |         default:
19 |             return state;
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/cleanup.js:
--------------------------------------------------------------------------------
 1 | import { dateDiff } from 'cx/util';
 2 | 
 3 | function defaultValue(value, def) {
 4 |     if (typeof value == "number")
 5 |         return value;
 6 |     return def;
 7 | }
 8 | 
 9 | export function cleanup(data) {
10 | 
11 |     var now = new Date().getTime();
12 |     var oneDay = 24 * 60 * 60 * 1000; //ms
13 |     var retention = defaultValue(data.settings.purgeDeletedObjectsAfterDays, 7) * oneDay;
14 |     var completedTaskRetention = defaultValue(data.settings.deleteCompletedTasksAfterDays, 7) * oneDay;
15 | 
16 |     var boardKeys = {};
17 |     for (var board of data.boards) {
18 |         if (!board.deleted || (board.deletedDate && Date.parse(board.deletedDate) + retention > now))
19 |             boardKeys[board.id] = true;
20 |     }
21 |     data.boards = data.boards.filter(b=>boardKeys[b.id]);
22 | 
23 | 
24 |     var listKeys = {};
25 |     for (var list of data.lists) {
26 |         if (boardKeys[list.boardId] && !list.deleted || (list.deletedDate && Date.parse(list.deletedDate) + retention > now))
27 |             listKeys[list.id] = true;
28 |     }
29 |     data.lists = data.lists.filter(b=>listKeys[b.id]);
30 | 
31 |     var taskKeys = {};
32 |     for (var task of data.tasks) {
33 |         if (listKeys[task.listId] && !task.deleted || (task.deletedDate && Date.parse(task.deletedDate) + retention < now))
34 |             if (!task.completed || !data.settings.deleteCompletedTasks || (task.completedDate && (Date.parse(task.completedDate) + completedTaskRetention > now)))
35 |                 taskKeys[task.id] = true;
36 |     }
37 |     data.tasks = data.tasks.filter(b=>taskKeys[b.id]);
38 | }
39 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/getDefaultData.js:
--------------------------------------------------------------------------------
 1 | import uid from "uid";
 2 | 
 3 | export function getDefaultData() {
 4 |     var board = {
 5 |         id: uid(),
 6 |         name: 'Tasks',
 7 |         createdDate: new Date().toISOString()
 8 |     };
 9 | 
10 |     var list = {
11 |         id: uid(),
12 |         boardId: board.id,
13 |         name: 'List 1',
14 |         createdDate: new Date().toISOString()
15 |     };
16 | 
17 |     return {
18 |         boards: [board],
19 |         lists: [list],
20 |         tasks: []
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/index.js:
--------------------------------------------------------------------------------
 1 | import { migrate } from './migrate';
 2 | import { getDefaultData } from './getDefaultData';
 3 | import { combineReducers } from 'redux';
 4 | 
 5 | import dummy from '../dummyReducer';
 6 | import boards from './boards';
 7 | import lists from './lists';
 8 | import tasks from './tasks';
 9 | 
10 | import {
11 |     REQUEST_TDO, RECEIVE_TDO,
12 |     LOAD_DEFAULT_TDO
13 | }
14 | from '../../actions';
15 | 
16 | const tdo = combineReducers({
17 |     version: dummy(0),
18 |     boards,
19 |     lists,
20 |     tasks,
21 |     settings: dummy({})
22 | });
23 | 
24 | export default function(state = {}, action) {
25 |     switch (action.type) {
26 |         case REQUEST_TDO:
27 |             return {
28 |                 ...state,
29 |                 status: 'loading'
30 |             };
31 | 
32 |         case RECEIVE_TDO:
33 |             migrate(action.data);
34 |             return action.data;
35 | 
36 |         case LOAD_DEFAULT_TDO:
37 |             var data = getDefaultData();
38 |             migrate(data);
39 |             return data;
40 | 
41 |         default:
42 |             return tdo(state, action);
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/lists/index.js:
--------------------------------------------------------------------------------
1 | export default function(state = [], action) {
2 |     switch (action.type) {
3 |         
4 | 
5 |         default:
6 |             return state;
7 |     }
8 | }
9 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/migrate.js:
--------------------------------------------------------------------------------
 1 | import uid from 'uid';
 2 | import {cleanup} from './cleanup';
 3 | import {getTutorial} from './tutorial';
 4 | 
 5 | var migrations = [];
 6 | 
 7 | //zero
 8 | migrations.push(function (data) {});
 9 | 
10 | //add boards
11 | migrations.push(function (data) {
12 | 
13 |     if (!Array.isArray(data.boards))
14 |         data.boards = [];
15 | 
16 |     if (!Array.isArray(data.lists))
17 |         data.lists = [];
18 | 
19 |     if (!Array.isArray(data.tasks))
20 |         data.tasks = [];
21 | 
22 |     if (data.boards.length == 0) {
23 |         data.boards = [{
24 |             id: uid(),
25 |             name: 'Tasks'
26 |         }];
27 |     }
28 | 
29 |     data.lists.forEach(l=> {
30 |         if (!l.boardId)
31 |             l.boardId = data.boards[0].id;
32 |     });
33 | });
34 | 
35 | //settings
36 | migrations.push(function (data) {
37 |     if (!data.settings)
38 |         data.settings = {
39 |             completedTasksRetentionDays: 1,
40 |             deleteCompletedTasks: true,
41 |             deleteCompletedTasksAfterDays: 7,
42 |             purgeDeletedObjectsAfterDays: 3
43 |         };
44 | });
45 | 
46 | //created => createdDate
47 | migrations.push(function (data) {
48 |     var {boards, lists, tasks} = data;
49 | 
50 |     for (var array of [boards, lists, tasks]) {
51 |         for (var b of array) {
52 |             if (b.created) {
53 |                 b.createdDate = b.created;
54 |                 delete b.created;
55 |             }
56 |             if (b.isDeleted) {
57 |                 b.deleted = b.isDeleted;
58 |                 delete b.isDeleted;
59 |             }
60 |         }
61 |     }
62 | });
63 | 
64 | //taskStyles
65 | migrations.push(function (data) {
66 |     var {settings} = data;
67 | 
68 |     if (!Array.isArray(settings.taskStyles))
69 |         settings.taskStyles = [{
70 |             regex: '!important',
71 |             style: 'color: orange'
72 |         }, {
73 |             regex: '#idea',
74 |             style: 'color: yellow'
75 |         }];
76 | });
77 | 
78 | //add tutorial
79 | migrations.push(function (data) {
80 |     var tutorial = getTutorial();
81 |     data.boards = [...data.boards, ...tutorial.boards];
82 |     data.lists = [...data.lists, ...tutorial.lists];
83 |     data.tasks = [...data.tasks, ...tutorial.tasks];
84 | });
85 | 
86 | 
87 | export function migrate(data) {
88 |     var version = data.version || 0;
89 | 
90 |     for (var v = version + 1; v < migrations.length; v++) {
91 |         migrations[v](data);
92 |         data.version = v;
93 |     }
94 | 
95 |     cleanup(data);
96 | }
97 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/tasks/index.js:
--------------------------------------------------------------------------------
1 | export default function(state = [], action) {
2 |     switch (action.type) {
3 |         
4 | 
5 |         default:
6 |             return state;
7 |     }
8 | }
9 | 


--------------------------------------------------------------------------------
/app/data/reducers/tdo/tutorial.js:
--------------------------------------------------------------------------------
  1 | import uid from "uid";
  2 | 
  3 | export function getTutorial() {
  4 | 
  5 |     const createdDate = new Date().toISOString();
  6 | 
  7 |     var board = {
  8 |         id: uid(),
  9 |         name: 'Tutorial',
 10 |         createdDate
 11 |     };
 12 | 
 13 |     var formatting = {
 14 |         id: uid(),
 15 |         boardId: board.id,
 16 |         name: 'Formatting',
 17 |         headerStyle: 'color: lightgreen',
 18 |         createdDate
 19 |     };
 20 | 
 21 |     var keyboard = {
 22 |         id: uid(),
 23 |         boardId: board.id,
 24 |         name: 'Keyboard',
 25 |         headerStyle: 'color: lightblue',
 26 |         createdDate
 27 |     };
 28 | 
 29 |     var general = {
 30 |         id: uid(),
 31 |         boardId: board.id,
 32 |         name: 'General',
 33 |         headerStyle: 'color: white',
 34 |         createdDate
 35 |     };
 36 | 
 37 |     var tasks = [{
 38 |         id: uid(),
 39 |         listId: formatting.id,
 40 |         name: `Use Markdown to make some text **bold** or *italic*`,
 41 |         createdDate
 42 |     }, {
 43 |         id: uid(),
 44 |         listId: formatting.id,
 45 |         name: `You can also use other Markdown features such as [links](https://github.com/mstijak/tdo) or lists.
 46 |         
 47 | * Item 1
 48 | * Item 2
 49 | * Item 3
 50 | `,
 51 |         createdDate
 52 |     }, {
 53 |         id: uid(),
 54 |         listId: formatting.id,
 55 |         name: `You can customize task highlighting in Settings. #idea`,
 56 |         createdDate
 57 |     }, {
 58 |         id: uid(),
 59 |         listId: formatting.id,
 60 |         name: `Add some custom CSS and override background or text color of the whole application. #idea
 61 |         
 62 | Hint: \`body \{ color: lightblue \}\``,
 63 |         createdDate
 64 |     }, {
 65 |         id: uid(),
 66 |         listId: keyboard.id,
 67 |         name: 'Press ? to get Help. !important',
 68 |         createdDate
 69 |     }, {
 70 |         id: uid(),
 71 |         listId: keyboard.id,
 72 |         name: 'Use arrow keys to navigate lists and tasks',
 73 |         createdDate
 74 |     }, {
 75 |         id: uid(),
 76 |         listId: keyboard.id,
 77 |         name: 'Hit `Enter` to edit the selected task',
 78 |         createdDate
 79 |     }, {
 80 |         id: uid(),
 81 |         listId: keyboard.id,
 82 |         name: 'Hit `Space` to mark the task deleted',
 83 |         createdDate
 84 |     }, {
 85 |         id: uid(),
 86 |         listId: keyboard.id,
 87 |         name: 'Press the `Insert` key to insert a new task at cursor position',
 88 |         createdDate
 89 |     }, {
 90 |         id: uid(),
 91 |         listId: keyboard.id,
 92 |         name: 'Press the `Delete` key to delete the selected task',
 93 |         createdDate
 94 |     }, {
 95 |         id: uid(),
 96 |         listId: keyboard.id,
 97 |         name: 'Use `Ctrl` + `Up/Down/Left/Right` arrow keys to move the selected task around',
 98 |         createdDate
 99 |     }, {
100 |         id: uid(),
101 |         listId: general.id,
102 |         name: 'Double click on the list header to edit the list',
103 |         createdDate
104 |     }, {
105 |         id: uid(),
106 |         listId: general.id,
107 |         name: 'Double click on a task to edit it',
108 |         createdDate
109 |     }, {
110 |         id: uid(),
111 |         listId: general.id,
112 |         name: 'Hit Add Board (on the top) and enjoy **`tdo`**!',
113 |         createdDate
114 |     }, ];
115 | 
116 | 
117 |     return {
118 |         boards: [board],
119 |         lists: [keyboard, formatting, general],
120 |         tasks: tasks
121 |     }
122 | }
123 | 


--------------------------------------------------------------------------------
/app/data/services/GHAuth.js:
--------------------------------------------------------------------------------
 1 | export class GHAuth {
 2 |     static get() {
 3 |         return localStorage.gh && JSON.parse(localStorage.gh);
 4 |     }
 5 | 
 6 |     static set(gh) {
 7 |         if (gh)
 8 |             localStorage.gh = JSON.stringify(gh);
 9 |         else
10 |             delete localStorage.gh;
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/app/data/services/Gists.js:
--------------------------------------------------------------------------------
 1 | export class Gists {
 2 | 
 3 |     constructor(gh) {
 4 |         this.gh = gh;
 5 |     }
 6 | 
 7 |     checkOk(response) {
 8 |         if (!response.ok)
 9 |             throw new Error(`Invalid response received. ${response.statusText}`);
10 |         return response;
11 |     }
12 | 
13 |     get() {
14 |         let options = {
15 |             headers: {
16 |                 'Authorization': `token ${this.getToken()}`
17 |             }
18 |         };
19 | 
20 |         return fetch(`https://api.github.com/gists/${this.getGistId()}`, options)
21 |             .then(::this.checkOk)
22 |             .then(x=>x.json());
23 |     }
24 | 
25 |     load() {
26 |         return this.get()
27 |             .then(x=> {
28 |                 var tdo = x.files['tdo.json'];
29 |                 var data = {};
30 |                 if (tdo && tdo.content)
31 |                     data = JSON.parse(tdo.content);
32 |                 return data;
33 |             })
34 |     }
35 | 
36 |     create(data) {
37 |         let options = {
38 |             method: 'POST',
39 |             headers: {
40 |                 'Authorization': `token ${this.getToken()}`,
41 |                 'Content-Type': 'application/json'
42 |             },
43 |             body: JSON.stringify({
44 |                 description: 'tdo tasks',
45 |                 files: this.convertFiles(data)
46 |             })
47 |         };
48 |         return fetch(`https://api.github.com/gists`, options)
49 |             .then(::this.checkOk)
50 |             .then(x=>x.json())
51 |     }
52 | 
53 |     update(data) {
54 |         let options = {
55 |             method: 'PATCH',
56 |             headers: {
57 |                 'Authorization': `token ${this.getToken()}`,
58 |                 'Content-Type': 'application/json'
59 |             },
60 |             body: JSON.stringify({
61 |                 files: this.convertFiles(data)
62 |             })
63 |         };
64 |         return fetch(`https://api.github.com/gists/${this.getGistId()}`, options)
65 |             .then(::this.checkOk)
66 |             .then(x=>x.json())
67 |     }
68 | 
69 |     convertFiles(data) {
70 |         return {
71 |             "tdo.json": {
72 |                 content: JSON.stringify(data, null, 2)
73 |             }
74 |         }
75 |     }
76 | 
77 |     getGistId() {
78 |         if (!this.gh || !this.gh.gistId)
79 |             throw new Error('GistId not set. Please visit the Settings page.');
80 |         return this.gh.gistId;
81 |     }
82 | 
83 |     getToken() {
84 |         if (!this.gh || !this.gh.token)
85 |             throw new Error('GitHub personal access token not set. Please visit the Settings page.');
86 |         return this.gh.token;
87 |     }
88 | }
89 | 


--------------------------------------------------------------------------------
/app/extension.js:
--------------------------------------------------------------------------------
1 | import "./themes/extension.scss";
2 | import "./index";
3 | 


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>tdo - Hackable TODO list</title>
 5 | 
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 8 |     <meta name="keywords" content="cx, webpack, react, babel, jquery, angular, ext js, ui, widgets, charts, data-binding, framework, application, responsive, ria, spa, single page application">
 9 | 
10 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
11 | 
12 |     <link rel="icon" href="assets/favicon.png" />
13 | 
14 |     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.from,Array.prototype.find,Array.prototype.findIndex,Math.log10,Intl.~locale.en"></script>
15 | 
16 |     <script src="https://unpkg.com/react@15.4.1/dist/react.min.js"></script>
17 |     <script src="https://unpkg.com/react-dom@15.4.1/dist/react-dom.min.js"></script>
18 | </head>
19 | <body>
20 |     <div id="app"></div>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
  1 | import { startAppLoop, Widget, FocusManager } from 'cx/ui';
  2 | import { Debug } from 'cx/util';
  3 | import {createStore, ReduxStoreView} from 'cx-redux';
  4 | import { applyMiddleware } from 'redux';
  5 | import Routes from './routes';
  6 | import './index.scss';
  7 | import reducer from './data//reducers';
  8 | import middleware from './data/middleware';
  9 | 
 10 | const reduxStore = createStore(
 11 |     reducer,
 12 |     applyMiddleware(...middleware)
 13 | );
 14 | 
 15 | const store = new ReduxStoreView(reduxStore);
 16 | 
 17 | var stop;
 18 | if (module.hot) {
 19 |     // accept itself
 20 |     module.hot.accept();
 21 | 
 22 |     // remember data on dispose
 23 |     module.hot.dispose(function (data) {
 24 |         data.state = store.getData();
 25 |         if (stop)
 26 |             stop();
 27 |     });
 28 | 
 29 |     // apply data on hot replace
 30 |     if (module.hot.data)
 31 |         store.load(module.hot.data.state);
 32 | }
 33 | 
 34 | function updateHash() {
 35 |     store.set('hash', window.location.hash || '#')
 36 | }
 37 | 
 38 | updateHash();
 39 | setInterval(updateHash, 100);
 40 | 
 41 | Widget.resetCounter(); //preserve React keys
 42 | Debug.enable('app-data');
 43 | 
 44 | stop = startAppLoop(document.getElementById('app'), store, Routes);
 45 | 
 46 | // is there a better way to do this
 47 | document.body.addEventListener('keyup', e => {
 48 | 
 49 |     switch (e.key) {
 50 |         case '?':
 51 |             if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
 52 |                 e.preventDefault();
 53 |                 e.stopPropagation();
 54 |                 window.location.hash = '#help';
 55 |             }
 56 |             break;
 57 | 
 58 |         case 'Escape':
 59 |             if (!document.activeElement.classList.contains('cxb-task')) {
 60 |                 e.preventDefault();
 61 |                 e.stopPropagation();
 62 |                 var els = document.getElementsByClassName('cxb-task');
 63 |                 if (els && els.length > 0)
 64 |                     FocusManager.focusFirst(els[0]);
 65 |             }
 66 |             break;
 67 | 
 68 |         case '/':
 69 |             if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
 70 |                 e.preventDefault();
 71 |                 e.stopPropagation();
 72 |                 var el = document.getElementById('search');
 73 |                     FocusManager.focusFirst(el);
 74 |             }
 75 |             break;
 76 | 
 77 |         case '{':
 78 |             {
 79 |                 if(!e.ctrlKey) break;
 80 |                 let {hash, tdo} = store.getData();
 81 |                 hash = hash.split('#').join('');
 82 |                 var boardInd = tdo.boards.findIndex(a=>a.id == hash);
 83 |                 if(boardInd == -1) break;
 84 |                 var prevInd = (boardInd - 1);
 85 |                 if(prevInd < 0) prevInd = tdo.boards.length - 1;
 86 |                 var nextBoard = tdo.boards[prevInd];
 87 |                 window.location = '#' + nextBoard.id;
 88 |                 break;
 89 |             }
 90 | 
 91 |         case '}':
 92 |             {
 93 |                 if(!e.ctrlKey) break;
 94 |                 let {hash, tdo} = store.getData();
 95 |                 hash = hash.split('#').join('');
 96 |                 var boardInd = tdo.boards.findIndex(a=>a.id == hash);
 97 |                 if(boardInd == -1) break;
 98 |                 var nextBoard = tdo.boards[(boardInd + 1) % tdo.boards.length];
 99 |                 window.location = '#' + nextBoard.id;
100 |                 break;
101 |             }
102 |     }
103 | });
104 | 


--------------------------------------------------------------------------------
/app/index.scss:
--------------------------------------------------------------------------------
 1 | $font-size: 12.5px;
 2 | 
 3 | $cx-default-color: rgba(255, 255, 255, 0.9);
 4 | $cx-default-box-font-size: $font-size;
 5 | $cx-default-input-border-color: rgba(255, 255, 255, 0.1);
 6 | $cx-default-input-background-color: rgba(255, 255, 255, 0.1);
 7 | $cx-default-input-color: rgba(255, 255, 255, 0.9);
 8 | $cx-default-radio-color: $cx-default-input-color;
 9 | 
10 | @import "~cx/src/variables";
11 | 
12 | ///@import "~cx-core/src/ui/form/variables";
13 | 
14 | //$cx-input-state-style-map: map-merge($cx-input-state-style-map, (
15 | //  color: rgba(255, 255, 255, 0.9),
16 | //  background: rgba(255, 255, 255, 0.1),
17 | //  border-color: rgba(128, 128, 128, 0.1)
18 | //));
19 | 
20 | @import "~cx/src/index";
21 | 
22 | 
23 | html {
24 |   height: 100%;
25 |   font-size: $font-size;
26 | }
27 | 
28 | body {
29 |   margin: 0;
30 |   height: 100%;
31 |   font-size: 100%; //Chrome extension
32 | 
33 |   //font-family: -apple-system, BlinkMacSystemFont,
34 |   //"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
35 |   //"Fira Sans", "Droid Sans", "Helvetica Neue",
36 |   //sans-serif;
37 | 
38 |   font-family: 'Consolas', monospace;
39 | }
40 | 
41 | #app {
42 |   height: 100%;
43 | }
44 | 
45 | * {
46 |   box-sizing: border-box;
47 | }
48 | 
49 | @import "routes/index";
50 | @import "themes/index";


--------------------------------------------------------------------------------
/app/routes/Controller.js:
--------------------------------------------------------------------------------
 1 | import { Controller } from 'cx/ui';
 2 | import { append } from 'cx/data';
 3 | import uid from 'uid';
 4 | import { loadData, addBoard, gotoBoard } from '../data/actions';
 5 | 
 6 | export default class extends Controller {
 7 |     init() {
 8 |         super.init();
 9 | 
10 |         this.store.set('layout.mode', this.getLayoutMode())
11 | 
12 |         this.store.dispatch(
13 |             loadData()
14 |         );
15 |     }
16 | 
17 |     getLayoutMode() {
18 |         if (window.innerWidth >= 1200)
19 |             return 'desktop';
20 | 
21 |         if (window.innerWidth >= 760)
22 |             return 'tablet';
23 | 
24 |         return 'phone';
25 |     }
26 | 
27 |     addBoard(e) {
28 |         e.preventDefault();
29 | 
30 |         var id = uid();
31 | 
32 |         this.store.dispatch(
33 |             addBoard({
34 |                 id: id,
35 |                 name: 'New Board',
36 |                 edit: true
37 |             })
38 |         );
39 | 
40 |         this.store.dispatch(
41 |             gotoBoard(id)
42 |         );
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/app/routes/default/BoardEditor.js:
--------------------------------------------------------------------------------
 1 | import { HtmlElement, TextField, TextArea, Button } from 'cx/widgets';
 2 | import { LabelsTopLayout } from 'cx/ui';
 3 | 
 4 | export default <cx>
 5 |     <div class="cxb-listeditor">
 6 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
 7 |             <TextField
 8 |                 value:bind="$board.name"
 9 |                 label="Name"
10 |                 autoFocus
11 |                 style="width:100%;"
12 |             />
13 |         </div>
14 | 
15 |         <br/>
16 | 
17 |         <div>
18 |             <Button onClick="boardMoveLeft">Move Left</Button>
19 |             <Button onClick="boardMoveRight" style="float:right">Move Right</Button>
20 |         </div>
21 | 
22 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
23 |             <TextField
24 |                 value:bind="$board.headerClass"
25 |                 label="Header Class"
26 |                 placeholder="CSS class"
27 |                 style="width:100%;"
28 |             />
29 |         </div>
30 | 
31 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
32 |             <TextArea
33 |                 value:bind="$board.headerStyle"
34 |                 label="Header Style"
35 |                 placeholder="color, font-size, ..."
36 |                 reactOn="input"
37 |                 style="width:100%;"
38 |             />
39 |         </div>
40 | 
41 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
42 |             <TextField
43 |                 value:bind="$board.className"
44 |                 label="Board Class"
45 |                 placeholder="CSS class"
46 |                 style="width:100%;"
47 |             />
48 |         </div>
49 | 
50 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
51 |             <TextArea
52 |                 value:bind="$board.style"
53 |                 label="Board Style"
54 |                 placeholder="background, color, ..."
55 |                 reactOn="input"
56 |                 style="width:100%;"
57 |             />
58 |         </div>
59 | 
60 |         <br/>
61 | 
62 |         <div>
63 |             <Button onClick={(e, {store}) => { store.delete('$board.edit')}}>Save</Button>
64 |             <Button mod="danger" confirm="All lists and tasks from this board will be deleted. Are you sure?" onClick="deleteBoard" style="float:right">Delete</Button>
65 |         </div>
66 |         <br/>
67 |     </div>
68 | </cx>
69 | 


--------------------------------------------------------------------------------
/app/routes/default/Controller.js:
--------------------------------------------------------------------------------
  1 | import { Controller, FocusManager } from 'cx/ui';
  2 | import { append } from 'cx/data';
  3 | import { KeyCode, closest } from 'cx/util';
  4 | 
  5 | 
  6 | 
  7 | 
  8 | import {removeBoard, gotoAnyBoard} from 'app/data/actions';
  9 | 
 10 | import uid from 'uid';
 11 | 
 12 | export default class extends Controller {
 13 | 
 14 |     init() {
 15 |         super.init();
 16 | 
 17 |         this.store.set(
 18 |             'activeBoards',
 19 |             this.store.get('tdo.boards').filter(i => !i.deleted)
 20 |         );
 21 |     }
 22 | 
 23 |     addList(e, {store}) {
 24 |         if (e)
 25 |             e.preventDefault();
 26 | 
 27 |         var boardId = store.get('$board.id') || store.get('tdo.boards')[0].id;
 28 | 
 29 |         this.store.update('tdo.lists', append, {
 30 |             id: uid(),
 31 |             name: 'New List',
 32 |             edit: true,
 33 |             createdDate: new Date().toISOString(),
 34 |             boardId: boardId
 35 |         });
 36 |     }
 37 | 
 38 |     deleteList(e, {store}) {
 39 |         store.update('$list', list => ({
 40 |             ...list,
 41 |             deleted: true,
 42 |             deletedDate: new Date().toISOString(),
 43 |         }));
 44 |     }
 45 | 
 46 |     prepareTask(listId) {
 47 |         return {
 48 |             id: uid(),
 49 |             listId,
 50 |             createdDate: new Date().toISOString(),
 51 |             isNew: true
 52 |         }
 53 |     }
 54 | 
 55 |     addTask(e, {store}) {
 56 |         var listId = store.get('$list.id');
 57 |         this.store.update('tdo.tasks', append, this.prepareTask(listId));
 58 |         e.preventDefault();
 59 |     }
 60 | 
 61 |     moveTaskUp(e, {store}) {
 62 |         e.stopPropagation();
 63 |         e.preventDefault();
 64 |         let {tdo, $task} = store.getData();
 65 |         let {tasks} = tdo;
 66 |         let index = tasks.indexOf($task);
 67 |         let insertPos = -1;
 68 |         for (var i = index - 1; i >= 0; i--)
 69 |             if (tasks[i].listId == $task.listId) {
 70 |                 insertPos = i;
 71 |                 break;
 72 |             }
 73 |         if (insertPos != -1) {
 74 |             this.store.set('tdo.tasks', [
 75 |                 ...tasks.slice(0, insertPos),
 76 |                 $task,
 77 |                 ...tasks.slice(insertPos, index),
 78 |                 ...tasks.slice(index + 1)
 79 |             ]);
 80 |         }
 81 |     }
 82 | 
 83 |     moveTaskDown(e, {store}) {
 84 |         e.stopPropagation();
 85 |         e.preventDefault();
 86 |         let {tdo, $task} = store.getData();
 87 |         let {tasks} = tdo;
 88 |         let index = tasks.indexOf($task);
 89 |         let insertPos = -1;
 90 | 
 91 |         for (var i = index + 1; i < tasks.length; i++)
 92 |             if (tasks[i].listId == $task.listId) {
 93 |                 insertPos = i;
 94 |                 break;
 95 |             }
 96 | 
 97 |         if (insertPos != -1) {
 98 |             this.store.set('tdo.tasks', [
 99 |                 ...tasks.slice(0, index),
100 |                 ...tasks.slice(index + 1, insertPos + 1),
101 |                 $task,
102 |                 ...tasks.slice(insertPos + 1)
103 |             ]);
104 |         }
105 |     }
106 | 
107 |     moveTaskNextBoard(tdo, boardId, store, lists) {
108 |         var ind = tdo.boards.findIndex(a=>a.id == boardId);
109 |         if(ind != -1) {
110 |             // let it loop back to the start
111 |             var nextInd = (ind + 1) % tdo.boards.length;
112 |             boardId = tdo.boards[nextInd].id;
113 |             ind = lists.findIndex(a=>a.boardId == boardId);
114 |             store.set('$task.listId', lists[ind].id);
115 |             window.location = '#' + boardId;
116 |         }
117 |     }
118 | 
119 |     moveTaskPrevBoard(tdo, boardId, store, lists) {
120 |         var ind = tdo.boards.findIndex(a=>a.id == boardId);
121 |         if(ind != -1) {
122 |             // let it loop back to the start
123 |             var prevInd = ind - 1;
124 |             if(prevInd < 0) prevInd = tdo.boards.length - 1;
125 |             boardId = tdo.boards[prevInd].id;
126 |             ind = lists.findIndex(a=>a.boardId == boardId);
127 |             store.set('$task.listId', lists[ind].id);
128 |             window.location = '#' + boardId;
129 |         }
130 |     }
131 | 
132 |     moveTaskNextList($task, tdo, boardId, store, lists) {
133 |         var listIndex = lists.findIndex(a=>a.id == $task.listId);
134 |         var topHalf = lists.slice(listIndex + 1, lists.length);
135 |         var bottomHalf = lists.slice(0, listIndex);
136 |         var ind = topHalf.findIndex(a=>a.boardId == boardId);
137 |         if(ind != -1) {
138 |             store.set('$task.listId', topHalf[ind].id);
139 |         } else {
140 |             // Wasn't in the top half, move to the bottom half
141 |             // May loop back around
142 |             ind = bottomHalf.findIndex(a=>a.boardId == boardId);
143 |             if(ind != -1) {
144 |                 store.set('$task.listId', bottomHalf[ind].id);
145 |             }
146 |         }
147 |     }
148 | 
149 |     moveTaskPrevList($task, tdo, boardId, store, lists) {
150 |         var listIndex = lists.findIndex(a=>a.id == $task.listId);
151 |         var topHalf = lists.slice(listIndex + 1, lists.length).reverse();
152 |         var bottomHalf = lists.slice(0, listIndex).reverse();
153 |         var ind = bottomHalf.findIndex(a=>a.boardId == boardId);
154 |         if(ind != -1) {
155 |             store.set('$task.listId', bottomHalf[ind].id);
156 |         } else {
157 |             // Wasn't in the bottom half, move to the top half
158 |             ind = topHalf.findIndex(a=>a.boardId == boardId);
159 |             if(ind != -1) {
160 |                 store.set('$task.listId', topHalf[ind].id);
161 |             }
162 |         }
163 |     }
164 | 
165 |     getBoardId($task, lists) {
166 |         var listIndex = lists.findIndex(a=>a.id == $task.listId);
167 |         if(listIndex == -1) return null;
168 |         return lists[listIndex].boardId;
169 |     }
170 | 
171 |     moveTaskRight(e, {store}) {
172 |         e.stopPropagation();
173 |         e.preventDefault();
174 |         let {tdo, $task} = store.getData();
175 |         let lists = tdo.lists.filter(a => !a.deleted);
176 | 
177 |         var boardId = this.getBoardId($task, lists);
178 |         if (boardId == null) return;
179 | 
180 |         if(e.shiftKey) {
181 |             this.moveTaskNextBoard(tdo, boardId, store, lists);
182 |         } else {
183 |             this.moveTaskNextList($task, tdo, boardId, store, lists);
184 |         }
185 | 
186 |         store.set('activeTaskId', $task.id);
187 |     }
188 | 
189 |     moveTaskLeft(e, {store}) {
190 |         e.stopPropagation();
191 |         e.preventDefault();
192 |         let {tdo, $task} = store.getData();
193 |         let lists = tdo.lists.filter(a => !a.deleted);
194 | 
195 |         var boardId = this.getBoardId($task, lists);
196 |         if (boardId == null) return;
197 | 
198 |         if(e.shiftKey) {
199 |             this.moveTaskPrevBoard(tdo, boardId, store, lists);
200 |         } else {
201 |             this.moveTaskPrevList($task, tdo, boardId, store, lists);
202 |         }
203 | 
204 |         store.set('activeTaskId', $task.id);
205 |     }
206 | 
207 |     onTaskKeyDown(e, instance) {
208 |         let t = instance.data.task;
209 |         let {store} = instance;
210 |         let tasks = this.store.get('tdo.tasks');
211 |         let {tdo, $task, $board} = store.getData();
212 | 
213 |         let code = (c) => c.charCodeAt(0);
214 |         switch (e.keyCode) {
215 |             case KeyCode.delete:
216 |             case code('D'):
217 |                 if (e.keyCode === code('D') && !e.shiftKey)
218 |                     return;
219 | 
220 |                 store.update('$task', task => ({
221 |                     ...task,
222 |                     deleted: true,
223 |                     deletedDate: new Date().toISOString()
224 |                 }));
225 | 
226 |                 var item = closest(e.target, (el) => el.classList.contains('cxe-menu-item'));
227 |                 var elementReceivingFocus = item.nextSibling || item.previousSibling;
228 |                 if (elementReceivingFocus)
229 |                     FocusManager.focusFirst(elementReceivingFocus);
230 | 
231 |                 break;
232 | 
233 |             case KeyCode.insert:
234 |             case code('O'):
235 |                 let nt = this.prepareTask(t.listId);
236 |                 this.store.set('activeTaskId', nt.id);
237 |                 let index = tasks.indexOf(t)
238 |                 if (index < tasks.length - 1 && e.keyCode === code('O') && !e.shiftKey)
239 |                     index++; // Create task below
240 | 
241 |                 this.store.set('tdo.tasks', [...tasks.slice(0, index), nt, ...tasks.slice(index)]);
242 |                 break;
243 | 
244 |             case KeyCode.up:
245 |                 if (e.ctrlKey) this.moveTaskUp(e, instance);
246 |                 break;
247 | 
248 |             case KeyCode.down:
249 |                 if (e.ctrlKey) this.moveTaskDown(e, instance);
250 |                 break;
251 | 
252 |             case KeyCode.right:
253 |                 if (e.ctrlKey) this.moveTaskRight(e, instance);
254 |                 break;
255 | 
256 |             case KeyCode.left:
257 |                 if (e.ctrlKey) this.moveTaskLeft(e, instance);
258 |                 break;
259 |         }
260 |     }
261 | 
262 |     onTaskListKeyDown(e, instance) {
263 |         let code = (c) => c.charCodeAt(0),
264 |             list;
265 | 
266 |         switch (e.keyCode) {
267 |             case code('K'):
268 |                 if (e.currentTarget.previousSibling)
269 |                     FocusManager.focusFirst(e.currentTarget.previousSibling);
270 |                 break;
271 | 
272 |             case code('J'):
273 |                 if (e.currentTarget.nextSibling)
274 |                     FocusManager.focusFirst(e.currentTarget.nextSibling);
275 |                 break;
276 | 
277 |             case KeyCode.left:
278 |             case code('H'):
279 |                 list = closest(e.target, (el) => el.classList.contains('cxb-tasklist'));
280 |                 if (list.previousSibling)
281 |                     FocusManager.focusFirst(list.previousSibling);
282 |                 break;
283 | 
284 |             case KeyCode.right:
285 |             case code('L'):
286 |                 list = closest(e.target, (el) => el.classList.contains('cxb-tasklist'));
287 |                 if (list.nextSibling)
288 |                     FocusManager.focusFirst(list.nextSibling);
289 |                 break;
290 |         }
291 |     }
292 | 
293 |     listMoveLeft(e, {store}) {
294 |         var {tdo, $list} = store.getData();
295 |         var {lists} = tdo;
296 |         var index = lists.indexOf($list);
297 |         if (index > 0) {
298 |             store.set('tdo.lists', [
299 |                 ...lists.slice(0, index - 1),
300 |                 $list,
301 |                 lists[index - 1],
302 |                 ...lists.slice(index + 1)
303 |             ]);
304 |         }
305 |     }
306 | 
307 |     listMoveRight(e, {store}) {
308 |         var {tdo, $list} = store.getData();
309 |         var {lists} = tdo;
310 |         var index = lists.indexOf($list);
311 |         if (index + 1 < lists.length) {
312 |             store.set('tdo.lists', [
313 |                 ...lists.slice(0, index),
314 |                 lists[index + 1],
315 |                 $list,
316 |                 ...lists.slice(index + 2)
317 |             ]);
318 |         }
319 |     }
320 | 
321 |     boardMoveLeft(e, {store}) {
322 |         var {tdo, $board} = store.getData();
323 |         var {boards} = tdo;
324 |         var index = boards.indexOf($board);
325 |         if (index > 0) {
326 |             store.set('tdo.boards', [
327 |                 ...boards.slice(0, index - 1),
328 |                 $board,
329 |                 boards[index - 1],
330 |                 ...boards.slice(index + 1)
331 |             ]);
332 |         }
333 |     }
334 | 
335 |     boardMoveRight(e, {store}) {
336 |         var {tdo, $board} = store.getData();
337 |         var {boards} = tdo;
338 |         var index = boards.indexOf($board);
339 |         if (index + 1 < boards.length) {
340 |             store.set('tdo.boards', [
341 |                 ...boards.slice(0, index),
342 |                 boards[index + 1],
343 |                 $board,
344 |                 ...boards.slice(index + 2)
345 |             ]);
346 |         }
347 |     }
348 | 
349 |     deleteBoard(e, {store}) {
350 |         var id = store.get('$board.id');
351 |         store.dispatch(removeBoard(id));
352 |         store.dispatch(gotoAnyBoard(true));
353 |     }
354 | }
355 | 


--------------------------------------------------------------------------------
/app/routes/default/ListEditor.js:
--------------------------------------------------------------------------------
 1 | import { HtmlElement, TextField, TextArea, LookupField, Button } from 'cx/widgets';
 2 | import { LabelsTopLayout } from 'cx/ui';
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | export default <cx>
11 |     <div class="cxb-listeditor">
12 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
13 |             <TextField
14 |                 value:bind="$list.name"
15 |                 label="Name"
16 |                 autoFocus
17 |                 style="width:100%;"
18 |             />
19 |         </div>
20 | 
21 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
22 |             <LookupField
23 |                 value:bind="$list.boardId"
24 |                 label="Board"
25 |                 options:bind="activeBoards"
26 |                 optionTextField="name"
27 |                 style="width:100%;"
28 |                 required
29 |             />
30 |         </div>
31 | 
32 |         <br/>
33 | 
34 |         <div>
35 |             <Button onClick="listMoveLeft">Move Left</Button>
36 |             <Button onClick="listMoveRight" style="float:right">Move Right</Button>
37 |         </div>
38 | 
39 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
40 |             <TextField
41 |                 value:bind="$list.headerClass"
42 |                 label="Header Class"
43 |                 placeholder="CSS class"
44 |                 style="width:100%;"
45 |             />
46 |         </div>
47 | 
48 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
49 |             <TextArea
50 |                 value:bind="$list.headerStyle"
51 |                 label="Header Style"
52 |                 placeholder="color"
53 |                 reactOn="input"
54 |                 style="width:100%;"
55 |             />
56 |         </div>
57 | 
58 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
59 |             <TextField
60 |                 value:bind="$list.className"
61 |                 label="List Class"
62 |                 placeholder="CSS class"
63 |                 style="width:100%;"
64 |             />
65 |         </div>
66 | 
67 |         <div layout={{ type: LabelsTopLayout, mod: 'stretch' }}>
68 |             <TextArea
69 |                 value:bind="$list.listStyle"
70 |                 label="List Style"
71 |                 placeholder="width, background"
72 |                 reactOn="input"
73 |                 style="width:100%;"
74 |             />
75 |         </div>
76 | 
77 |         <br/>
78 | 
79 |         <div>
80 |         <Button onClick={(e, {store}) => { store.delete('$list.edit')}}>Save</Button>
81 |         <Button mod="danger" confirm="Are you sure?" onClick="deleteList" style="float:right">Delete</Button>
82 |         </div>
83 |         <br/>
84 |     </div>
85 | </cx>
86 | 


--------------------------------------------------------------------------------
/app/routes/default/Task.js:
--------------------------------------------------------------------------------
  1 | import { VDOM, Widget } from 'cx/ui';
  2 | import { isFocused } from 'cx/util';
  3 | 
  4 | import marked from 'marked';
  5 | import {getStyles} from './styling';
  6 | 
  7 | export class Task extends Widget {
  8 | 
  9 |     init() {
 10 |         if (this.bind)
 11 |             this.task = {bind: this.bind};
 12 | 
 13 |         super.init();
 14 |     }
 15 | 
 16 |     declareData() {
 17 |         super.declareData(...arguments, {
 18 |             task: undefined,
 19 |             styles: undefined
 20 |         })
 21 |     }
 22 | 
 23 |     render(context, instance, key) {
 24 |         return <TaskCmp key={key} instance={instance} data={instance.data} />
 25 |     }
 26 | }
 27 | 
 28 | 
 29 | class TaskCmp extends VDOM.Component {
 30 | 
 31 |     constructor(props) {
 32 |         super(props);
 33 | 
 34 |         this.state = {
 35 |             edit: false,
 36 |             scrollHeight: null
 37 |         };
 38 | 
 39 |         this.dom = {};
 40 |     }
 41 | 
 42 |     render() {
 43 |         let {instance, data} = this.props;
 44 |         let {widget} = instance;
 45 |         let {CSS} = widget;
 46 | 
 47 |         let className = CSS.block("task", {}, {
 48 |             edit: this.state.edit,
 49 |             completed: !!data.task.completed
 50 |         });
 51 | 
 52 |         return <div className={className}
 53 |                     onKeyDown={::this.onKeyDown}
 54 |                     ref={el=> {
 55 |                         this.dom.el = el
 56 |                     }}
 57 |                     tabIndex={0}
 58 |                     onClick={::this.onClick}
 59 |                     onTouchStart={::this.onTouchStart}
 60 |                     onDoubleClick={e=>{this.toggleEditMode()}}>
 61 |             { !this.state.edit && this.renderContent() }
 62 |             { this.state.edit && this.renderEditor() }
 63 |         </div>
 64 |     }
 65 | 
 66 |     renderContent() {
 67 |         var {data, instance} = this.props;
 68 |         var {widget} = this.props.instance;
 69 |         var html = data.task.name ? marked(data.task.name) : '<p>&nbsp;</p>';
 70 | 
 71 |         var styles = getStyles(data.task.name, data.styles);
 72 |         var className = widget.CSS.element('checkbox', "input", {
 73 |             checked: !!data.task.completed,
 74 |         });
 75 | 
 76 |         return [
 77 |             <div className={className} onClick={() => {
 78 |                 this.setCompleted(!data.task.completed);
 79 |             }}>
 80 |                 <svg className="cxe-checkbox-input-check" viewBox="0 0 64 64">
 81 |                     <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z" fill="currentColor"></path>
 82 |                 </svg>
 83 |             </div>,
 84 |             <div key="content"
 85 |                  className={widget.CSS.expand("cxe-task-content", styles.className)}
 86 |                  style={styles.style}
 87 |                  dangerouslySetInnerHTML={{__html: html}}
 88 |             />]
 89 |     }
 90 | 
 91 |     renderEditor() {
 92 |         var {data} = this.props;
 93 |         var style = {};
 94 |         if (this.state.scrollHeight) {
 95 |             style.height = `${this.state.scrollHeight}px`;
 96 |         }
 97 |         return <textarea defaultValue={data.task.name}
 98 |                          onMouseDown={e=>{e.stopPropagation();}}
 99 |                          onKeyDown={::this.onEditorKeyDown}
100 |                          ref={c=> {
101 |                              this.dom.editor = c;
102 |                          }}
103 |                          style={style}
104 |                          rows={1}
105 |                          onBlur={::this.onEditorBlur}
106 |                          onChange={::this.onChange}
107 |         />
108 |     }
109 | 
110 |     onCheck(e) {
111 |         e.preventDefault();
112 |         e.stopPropagation();
113 |         this.setCompleted(e.target.checked);
114 |     }
115 | 
116 |     setCompleted(completed = true) {
117 |         let {instance, data} = this.props;
118 | 
119 |         instance.set('task', {
120 |             ...data.task,
121 |             completed: completed,
122 |             completedDate: new Date().toISOString()
123 |         });
124 |     }
125 | 
126 |     onKeyDown(e) {
127 |         let {instance, data} = this.props;
128 |         let {widget} = instance;
129 | 
130 |         switch (e.keyCode) {
131 |             case 13:
132 |             case 73: // i (insert)
133 |             case 65: // a (append)
134 |                 e.stopPropagation();
135 |                 e.preventDefault()
136 |                 this.toggleEditMode();
137 |                 break;
138 | 
139 |             case 32: 
140 |             case 88: // x
141 |                 e.stopPropagation();
142 |                 e.preventDefault();
143 |                 this.setCompleted(!data.task.completed);
144 |                 break;
145 | 
146 |             default:
147 |                 if (widget.onKeyDown)
148 |                     instance.invoke("onKeyDown", e, instance);
149 |                 break;
150 |         }
151 |     }
152 | 
153 |     save(e) {
154 |         let {instance} = this.props;
155 |         let {data} = instance;
156 | 
157 |         var task = {
158 |             ...data.task,
159 |             name: e.target.value,
160 |             lastChange: new Date().toISOString()
161 |         };
162 | 
163 |         delete task.isNew;
164 | 
165 |         instance.set('task', task);
166 |     }
167 | 
168 |     onEditorKeyDown(e) {
169 |         let {instance} = this.props;
170 | 
171 |         switch (e.keyCode) {
172 |             case 13:
173 |                 e.stopPropagation();
174 |                 if (e.ctrlKey) {
175 |                     this.save(e);
176 |                     this.toggleEditMode();
177 |                 }
178 |                 break;
179 | 
180 |             case 27:
181 |                 this.save(e);
182 |                 this.toggleEditMode();
183 |                 break;
184 | 
185 |             default:
186 |                 e.stopPropagation()
187 |                 break;
188 |         }
189 |     }
190 | 
191 |     onEditorBlur(e) {
192 |         this.save(e);
193 |         this.setState({
194 |             edit: false
195 |         });
196 |     }
197 | 
198 |     onChange(e) {
199 |         this.componentDidUpdate();
200 |     }
201 | 
202 |     onClick(e) {
203 |         e.preventDefault();
204 |         e.stopPropagation();
205 |     }
206 | 
207 |     onTouchStart(e) {
208 |         if (!this.state.edit && isFocused(this.dom.el)) {
209 |             this.toggleEditMode();
210 |             e.stopPropagation();
211 |             e.preventDefault();
212 |         }
213 |     }
214 | 
215 |     toggleEditMode() {
216 |         var change = {
217 |             edit: !this.state.edit
218 |         };
219 | 
220 |         if (change.edit)
221 |             change.scrollHeight = null;
222 | 
223 |         this.setState(change, () => {
224 |             if (this.state.edit)
225 |                 this.dom.editor.focus();
226 |             else
227 |                 this.dom.el.focus();
228 |         })
229 |     }
230 | 
231 |     componentDidMount() {
232 |         this.props.instance.parent.toggleEditMode = ::this.toggleEditMode;
233 |         let {instance, data} = this.props;
234 |         let {store} = instance;
235 | 
236 |         if (this.dom.el.parentNode.parentNode.parentNode.contains(document.activeElement))
237 |             this.toggleEditMode();
238 | 
239 |         if (data.task.id == store.get('activeTaskId'))
240 |             setTimeout(()=> {
241 |                 this.dom.el.focus();
242 |             }, 10);
243 |     }
244 | 
245 |     componentDidUpdate() {
246 |         if (this.state.edit) {
247 |             this.dom.editor.style.width = `${this.dom.editor.scrollWidth}px`;
248 |             if (this.dom.editor.scrollHeight > this.dom.editor.offsetHeight) {
249 |                 this.setState({
250 |                     scrollHeight: Math.ceil(this.dom.editor.scrollHeight)
251 |                 });
252 |             }
253 |         }
254 |     }
255 | }
256 | 


--------------------------------------------------------------------------------
/app/routes/default/index.js:
--------------------------------------------------------------------------------
  1 | import { HtmlElement, Repeater, List, Menu, MenuItem, TextArea, Button } from 'cx/widgets';
  2 | import { FirstVisibleChildLayout } from 'cx/ui';
  3 | 
  4 | import {Md} from 'app/components/Md';
  5 | import {Task} from './Task';
  6 | 
  7 | import Controller from './Controller';
  8 | import ListEditor from './ListEditor';
  9 | import BoardEditor from './BoardEditor';
 10 | 
 11 | let searchTerms = null;
 12 | let searchQuery = null;
 13 | 
 14 | 
 15 | function filterItems(item, {search, list, settings}) {
 16 |     if (item.deleted || item.listId != list.id)
 17 |         return false;
 18 | 
 19 |     if (!item.isNew && search && search.query) {
 20 |         if (searchQuery != search.query) {
 21 |             searchTerms = search.query.split(' ').map(w=>new RegExp(w, 'gi'));
 22 |             searchQuery = search.query;
 23 |         }
 24 |         return item.name && searchTerms.every(ex=>item.name.match(ex));
 25 |     }
 26 | 
 27 |     if (item.completed && item.completedDate) {
 28 |         var now = new Date().getTime();
 29 |         var cmp = Date.parse(item.completedDate);
 30 |         if (cmp + settings.completedTasksRetentionDays * 24 * 60 * 60 * 1000 < now)
 31 |             return false;
 32 |     }
 33 | 
 34 |     return true;
 35 | }
 36 | 
 37 | function filterBoards(b, activeBoardId) {
 38 |     return b.id == activeBoardId && !b.deleted;
 39 | }
 40 | 
 41 | function filterLists(l, activeBoardId) {
 42 |     return l.boardId == activeBoardId && !l.deleted;
 43 | }
 44 | 
 45 | const editTaskboard = (e, {store}) => {
 46 |     e.preventDefault();
 47 |     store.toggle('$list.edit')
 48 | };
 49 | 
 50 | export default <cx>
 51 |     <div class="cxb-taskboard" controller={Controller} layout={FirstVisibleChildLayout}>
 52 |         <div class="cxe-taskboard-loading" visible:expr="{$page.status}=='loading'">
 53 |             Loading...
 54 |         </div>
 55 |         <div class="cxe-taskboard-error" visible:expr="{$page.status}=='error'">
 56 |             Error occurred while fetching data from GitHub. <Button onClick="load">Retry</Button>
 57 |         </div>
 58 |         <Repeater
 59 |             records:bind="tdo.boards"
 60 |             recordName="$board"
 61 |             keyField="id"
 62 |             filter={filterBoards}
 63 |             filterParams:bind="$route.boardId"
 64 |         >
 65 |             <div
 66 |                 class:tpl="cxe-taskboard-lists {$board.className}"
 67 |                 style:bind="$board.style"
 68 |             >
 69 |                 <Repeater
 70 |                     records:bind="tdo.lists"
 71 |                     recordName="$list"
 72 |                     keyField="id"
 73 |                     filter={filterLists}
 74 |                     filterParams:bind="$board.id"
 75 |                 >
 76 |                     <div
 77 |                         class:tpl="cxb-tasklist {$list.className}"
 78 |                         style:bind="$list.listStyle">
 79 |                         <header class="cxe-tasklist-header">
 80 |                             <h2
 81 |                                 class:tpl="{$list.headerClass}"
 82 |                                 text:bind="$list.name"
 83 |                                 style:bind="$list.headerStyle"
 84 |                                 onDoubleClick={editTaskboard}
 85 |                             />
 86 |                             <a href="#"
 87 |                                tabIndex={-1}
 88 |                                onClick={editTaskboard}
 89 |                             >
 90 |                                 &#x270e;
 91 |                             </a>
 92 |                         </header>
 93 |                         <ListEditor visible:expr="!!{$list.edit}" />
 94 |                         <Menu class="cxe-tasklist-items" onKeyDown="onTaskListKeyDown" itemPadding="small">
 95 |                             <Repeater records:bind="tdo.tasks"
 96 |                                       recordName="$task"
 97 |                                       keyField="id"
 98 |                                       filter={filterItems}
 99 |                                       filterParams={{
100 |                                           list: {bind: '$list'},
101 |                                           search: {bind: 'search'},
102 |                                           settings: {bind: 'tdo.settings'}
103 |                                       }}>
104 |                                 <MenuItem pad={false}>
105 |                                     <Task
106 |                                         bind="$task"
107 |                                         styles:bind="tdo.settings.taskStyles"
108 |                                         onKeyDown="onTaskKeyDown"
109 |                                     />
110 |                                 </MenuItem>
111 |                             </Repeater>
112 |                             <a class="cxe-tasklist-add" onClick="addTask" href="#">Add Task</a>
113 |                         </Menu>
114 |                     </div>
115 |                 </Repeater>
116 |                 <div class="cxb-tasklist">
117 |                     <Menu class="cxe-tasklist-items" onKeyDown="onTaskListKeyDown" itemPadding="small">
118 |                         <a class="cxe-tasklist-add"
119 |                            onClick="addList"
120 |                            href="#"
121 |                         >
122 |                             Add List
123 |                         </a>
124 | 
125 |                         <a class="cxe-tasklist-add"
126 |                            onClick={(e, {store}) => { e.preventDefault(); store.set('$board.edit', true)}}
127 |                            href="#"
128 |                         >
129 |                             Edit Board
130 |                         </a>
131 |                     </Menu>
132 |                     <BoardEditor visible:expr="!!{$board.edit}" />
133 |                 </div>
134 |             </div>
135 |         </Repeater>
136 |     </div>
137 | </cx>;
138 | 


--------------------------------------------------------------------------------
/app/routes/default/index.scss:
--------------------------------------------------------------------------------
  1 | .cxe-taskboard-loading,
  2 | .cxe-taskboard-error {
  3 |   padding: 3rem;
  4 | }
  5 | 
  6 | .cxe-taskboard-lists {
  7 |   flex-direction: row;
  8 |   flex-wrap: wrap;
  9 | 
 10 |   @media screen and (min-width: 700px) {
 11 |     display: flex;
 12 |   }
 13 | }
 14 | 
 15 | .cxb-tasklist {
 16 |   padding: 1rem 1.5rem;
 17 | 
 18 |   @media screen and (min-width: 700px) {
 19 |     width: 29rem;
 20 |   }
 21 | }
 22 | 
 23 | .cxe-tasklist-header {
 24 |   display: flex;
 25 | 
 26 |   h2 {
 27 |     margin: 0 0 1rem 0;
 28 |     font-size: 1.1rem;
 29 |     font-weight: bold;
 30 |     font-style: normal;
 31 |     flex: 1;
 32 |   }
 33 | 
 34 |   a {
 35 |     transform: scaleX(-1);
 36 |     opacity: 0.5;
 37 | 
 38 |     &:hover {
 39 |       opacity: 1;
 40 |     }
 41 |   }
 42 | 
 43 | 
 44 | }
 45 | 
 46 | .cxe-tasklist-items {
 47 |   margin: 0 0 1rem 0;
 48 | }
 49 | 
 50 | .cxe-tasklist-add {
 51 |   display: block;
 52 |   padding: 0.5rem 0.5rem 0.5rem 2.5rem;
 53 | }
 54 | 
 55 | .cxb-task {
 56 | 
 57 |   border: 1px solid transparent;
 58 |   margin: -1px;
 59 | 
 60 |   &:focus {
 61 |     outline: none;
 62 |   }
 63 | 
 64 |   padding: 0 0.5rem 0 2.5rem;
 65 |   transition: max-height 0.2s;
 66 | 
 67 | 
 68 |   p {
 69 |     margin: 0.5rem 0 0.5rem 0;
 70 |     white-space: pre-wrap;
 71 |   }
 72 | 
 73 |   .cxe-checkbox-input {
 74 |     position: absolute;
 75 |     left: 8px;
 76 |     top: 7px;
 77 |   }
 78 | 
 79 |   textarea {
 80 |     width: 100%;
 81 |     background: rgba(128, 128, 128, 0.1);
 82 |     color: white;
 83 |     border: none;
 84 |     font-family: inherit;
 85 |     padding: 0.5rem 0;
 86 |     font-size: inherit;
 87 |     overflow: hidden;
 88 |     display: block;
 89 |     box-sizing: border-box;
 90 | 
 91 |     &:focus {
 92 |       outline: none;
 93 |     }
 94 |   }
 95 | }
 96 | 
 97 | .cxe-task-content {
 98 |   .cxb-task.cxs-completed & {
 99 |     opacity: 0.3;
100 |   }
101 | }
102 | 
103 | .cxb-listeditor {
104 |   animation-name: maxHeight1000;
105 |   animation-duration: 1s;
106 |   overflow: hidden;
107 | }
108 | 
109 | @keyframes maxHeight1000 {
110 |   from { max-height: 0; }
111 |   to { max-height: 1000px; }
112 | }
113 | 
114 | 


--------------------------------------------------------------------------------
/app/routes/default/styling.js:
--------------------------------------------------------------------------------
 1 | import { parseStyle } from 'cx/util';
 2 | 
 3 | var styles = -1, rules;
 4 | 
 5 | export function getStyles(text, taskStyles) {
 6 |     if (styles !== taskStyles) {
 7 |         rules = [];
 8 |         if (Array.isArray(taskStyles)) {
 9 |             taskStyles.forEach(s=> {
10 |                 try {
11 |                     if (s.regex && (s.style || s.className)) {
12 |                         var rule = {
13 |                             regex: new RegExp(s.regex),
14 |                             style: parseStyle(s.style),
15 |                             className: s.className
16 |                         };
17 |                         rules.push(rule);
18 |                     }
19 |                 } catch (e) {
20 |                     console.log('Task style error.', e);
21 |                 }
22 |             });
23 |         }
24 |     }
25 | 
26 |     var result = {
27 |         style: {},
28 |         className: []
29 |     };
30 | 
31 |     if (text) {
32 |         for (var i = 0; i < rules.length; i++) {
33 |             if (text.match(rules[i].regex)) {
34 |                 Object.assign(result.style, rules[i].style);
35 |                 if (rules[i].className)
36 |                     result.className.push(rules[i].className);
37 |             }
38 |         }
39 |     }
40 | 
41 |     return result;
42 | }
43 | 


--------------------------------------------------------------------------------
/app/routes/help/index.js:
--------------------------------------------------------------------------------
 1 | import { HtmlElement, Repeater, List, Menu, TextField, Radio, LabeledContainer, Button, PureContainer } from 'cx/widgets';
 2 | import { LabelsLeftLayout, UseParentLayout } from 'cx/ui';
 3 | import {Md} from 'app/components/Md';
 4 | 
 5 | export default <cx>
 6 |     <div class="cxb-help">
 7 |         <Md>
 8 |             ## Help
 9 | 
10 |             Use double-click to edit lists and tasks.
11 | 
12 |             ### Keyboard Shortcuts (Windows)
13 | 
14 |             `Up` or `k` Move cursor to the previous task
15 | 
16 |             `Down` or `j` Move cursor to the next task
17 | 
18 |             `Left` or `h` Move cursor to the previous list
19 | 
20 |             `Right` or `l` Move cursor to the next list
21 | 
22 |             `Enter` or `i` Edit task at cursor position
23 | 
24 |             `Space` or `x` Mark task as completed
25 | 
26 |             `/` Search
27 | 
28 |             `o` Insert task below cursor position
29 | 
30 |             `Insert` or `Shift` + `O` Insert task at cursor position
31 | 
32 |             `Delete` or `Shift` + `D` Delete task
33 | 
34 |             `Escape` or `Ctrl` + `Enter` Exit task edit mode
35 | 
36 |             `Escape` (when cursor is not in a task list) Move cursor to the first task list
37 | 
38 |             -----------
39 | 
40 |             `Ctrl` + `Left` Move task to the previous list
41 | 
42 |             `Ctrl` + `Right` Move task to the next list
43 | 
44 |             `Ctrl` + `Up` Move task up
45 | 
46 |             `Ctrl` + `Down` Move task down
47 | 
48 | 
49 |         </Md>
50 |     </div>
51 | </cx>;
52 | 


--------------------------------------------------------------------------------
/app/routes/help/index.scss:
--------------------------------------------------------------------------------
 1 | .cxb-help {
 2 |   padding: 3rem;
 3 | 
 4 |   code {
 5 |     text-align: center;
 6 |     display: inline-block;
 7 |     width: 6rem;
 8 | 
 9 |     &:last-child {
10 |       margin-right: 2rem;
11 |     }
12 |   }
13 | }


--------------------------------------------------------------------------------
/app/routes/index.js:
--------------------------------------------------------------------------------
  1 | import { HtmlElement, Tab, TextField, Route, Menu, MenuItem, Submenu, Sandbox, Repeater, PureContainer } from 'cx/widgets';
  2 | import { FirstVisibleChildLayout } from 'cx/ui';
  3 | 
  4 | 
  5 | 
  6 | 
  7 | 
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | 
 14 | import Default from './default';
 15 | import Settings from './settings';
 16 | import Help from './help';
 17 | import Controller from './Controller';
 18 | 
 19 | const BoardItems = <cx>
 20 |     <PureContainer>
 21 |         <Repeater
 22 |             records:bind="tdo.boards"
 23 |             filter={b => !b.deleted}
 24 |         >
 25 |             <MenuItem
 26 |                 mod={{
 27 |                     active: {expr: '{hash}=="#" + {$record.id}'},
 28 |                     test: true
 29 |                 }}
 30 |                 pad
 31 |             >
 32 |                 <a href:tpl="#{$record.id}"
 33 |                    className:bind="$record.headerClass"
 34 |                    style:bind="$record.headerStyle"
 35 |                    text:bind="$record.name"
 36 |                 />
 37 |             </MenuItem>
 38 |         </Repeater>
 39 | 
 40 |         <MenuItem pad>
 41 |             <a href="#" onClick="addBoard">Add Board</a>
 42 |         </MenuItem>
 43 | 
 44 |         <div class="spacer" visible:expr="{layout.mode}=='desktop'"/>
 45 |         <hr visible:expr="{layout.mode}=='phone'"/>
 46 |     </PureContainer>
 47 | </cx>;
 48 | 
 49 | const MenuItems = <cx>
 50 |     <PureContainer>
 51 |         <MenuItem mod={{active: {expr: '{hash}=="#settings"'}}} pad>
 52 |             <a href="#settings">
 53 |                 Settings
 54 |             </a>
 55 |         </MenuItem>
 56 | 
 57 |         <MenuItem mod={{active: {expr: '{hash}=="#help"'}}} pad>
 58 |             <a href="#help">
 59 |                 Help <code>?</code>
 60 |             </a>
 61 |         </MenuItem>
 62 | 
 63 |         <div class="spacer" visible:expr="{layout.mode}=='desktop'"/>
 64 |         <hr visible:expr="{layout.mode}!='desktop'"/>
 65 | 
 66 |         <MenuItem pad>
 67 |             <a href="https://github.com/mstijak/tdo" target="_blank">Report/Suggest</a>
 68 |         </MenuItem>
 69 | 
 70 |         <MenuItem pad>
 71 |             <a href={`http://twitter.com/home?status=${encodeURIComponent("tdo - hackable todo list #todo https://goo.gl/rhkuYP")}`}
 72 |                target="_blank">Tweet</a>
 73 |         </MenuItem>
 74 |     </PureContainer>
 75 | </cx>;
 76 | 
 77 | export default <cx>
 78 |     <div class="cxb-layout" controller={Controller}>
 79 |         <style innerHtml:bind="tdo.settings.css"/>
 80 |         <Sandbox key:bind="hash" storage:bind="pages" immutable>
 81 |             <header class="cxe-layout-header">
 82 |                 <h1>tdo</h1>
 83 |                 <TextField value:bind="search.query" placeholder="Search..." mod="search" id="search" autoFocus/>
 84 | 
 85 |                 <Menu horizontal>
 86 |                     <BoardItems visible:expr="{layout.mode}=='desktop' || {layout.mode}=='tablet'" />
 87 |                     <MenuItems visible:expr="{layout.mode}=='desktop'" />
 88 |                     <MenuItem visible:expr="{layout.mode}!='desktop'">
 89 |                         <Submenu>
 90 |                             &#9776;
 91 |                             <Menu putInto="dropdown">
 92 |                                 <BoardItems visible:expr="{layout.mode}=='phone'" />
 93 |                                 <MenuItems />
 94 |                             </Menu>
 95 |                         </Submenu>
 96 |                     </MenuItem>
 97 |                 </Menu>
 98 |             </header>
 99 |             <main class="cxe-layout-main" layout={FirstVisibleChildLayout}>
100 |                 <Route url:bind="hash" route="#settings">
101 |                     <Settings />
102 |                 </Route>
103 |                 <Route url:bind="hash" route="#help">
104 |                     <Help />
105 |                 </Route>
106 |                 <Route url:bind="hash" route="#(:boardId)">
107 |                     <Default />
108 |                 </Route>
109 |             </main>
110 |         </Sandbox>
111 |     </div>
112 | </cx>;
113 | 


--------------------------------------------------------------------------------
/app/routes/index.scss:
--------------------------------------------------------------------------------
 1 | .cxe-layout-header {
 2 |   display: flex;
 3 |   padding: 1rem;
 4 | 
 5 |   .spacer {
 6 |     width: 6rem;
 7 |   }
 8 | 
 9 |   h1 {
10 |     margin: 0;
11 |     font-size: 1.5rem;
12 |   }
13 | 
14 |   a {
15 |     padding: 0.5rem 1rem;
16 |   }
17 | }
18 | 
19 | .cxb-textfield.cxm-search {
20 |   margin: 0 2em;
21 |   width: 20rem;
22 | 
23 |   @media screen and (max-width: 1200px) {
24 |     width: auto;
25 |     flex: 1;
26 |   }
27 | 
28 |   transition: width 0.5s;
29 | 
30 |   &:placeholder-shown {
31 |     width: 10rem;
32 |   }
33 | 
34 |   .cxe-textfield-input {
35 |     background: transparent;
36 |     color: inherit;
37 |     border: none;
38 |     height: auto;
39 |   }
40 | }
41 | 
42 | @import "default/index";
43 | @import "settings/index";
44 | @import "help/index";


--------------------------------------------------------------------------------
/app/routes/settings/Controller.js:
--------------------------------------------------------------------------------
 1 | import { Controller } from 'cx/ui';
 2 | import { MsgBox } from 'cx/widgets';
 3 | import { append } from 'cx/data';
 4 | import { Gists } from '../../data/services/Gists';
 5 | import { loadData, loadDefault } from '../../data/actions';
 6 | 
 7 | export default class extends Controller {
 8 |     init() {
 9 |         super.init();
10 | 
11 |         this.store.set('$page.gh', JSON.parse(localStorage.gh || '{}'));
12 |     }
13 | 
14 |     load() {
15 |         var gh = this.store.get('$page.gh');
16 |         var gists = new Gists(gh);
17 |         gists.get()
18 |             .then(()=> {
19 |                 this.persist();
20 |                 this.store.dispatch(
21 |                     loadData(gh)
22 |                 );
23 |             })
24 |             .catch(e=> {
25 |                 MsgBox.alert('Error occurred: ' + e);
26 |                 console.log(e);
27 |             })
28 |     }
29 | 
30 |     create() {
31 |         var gh = this.store.get('$page.gh');
32 |         var gists = new Gists(gh);
33 |         gists
34 |             .create(this.store.get('tdo'))
35 |             .then(x=> {
36 |                 this.store.set('$page.gh.gistId', x.id);
37 |                 this.persist();
38 |             });
39 |     }
40 | 
41 |     persist() {
42 |         this.store.set('$page.gh.verified', true);
43 |         let gh = this.store.get('$page.gh');
44 |         localStorage.gh = JSON.stringify(gh);
45 |     }
46 | 
47 |     unlink(e) {
48 |         e.preventDefault();
49 |         this.store.set('$page.gh', null);
50 |         localStorage.gh = null;
51 |         this.store.dispatch(
52 |             loadDefault()
53 |         )
54 |     }
55 | 
56 |     changeGist(e) {
57 |         e.preventDefault();
58 |         this.store.set('$page.gh.verified', false);
59 |     }
60 | 
61 |     addTaskStyle(e) {
62 |         e.preventDefault();
63 |         this.store.update('tdo.settings.taskStyles', append, {});
64 |     }
65 | 
66 |     removeTaskStyle(e, {store}) {
67 |         e.preventDefault();
68 |         var style = store.get('$record');
69 |         this.store.update('tdo.settings.taskStyles', styles => styles.filter(x=>x != style));
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/app/routes/settings/index.js:
--------------------------------------------------------------------------------
  1 | import { HtmlElement, Repeater, List, Text, Menu, TextField, TextArea, NumberField, Radio, Checkbox, LabeledContainer, Button, PureContainer } from 'cx/widgets';
  2 | import { LabelsLeftLayout, LabelsTopLayout, UseParentLayout } from 'cx/ui';
  3 | import {Md} from 'app/components/Md';
  4 | import Controller from './Controller';
  5 | 
  6 | 
  7 | export default <cx>
  8 |     <div class="cxb-settings" controller={Controller}>
  9 |         <h2>Settings</h2>
 10 | 
 11 |         <h3>GitHub</h3>
 12 |         <div visible:expr="{$page.gh.verified}">
 13 |             <p preserveWhitespace>
 14 |                 Your tasks are persisted to the Gist
 15 |                 <a href="https://gist.github.com" text:bind="$page.gh.gistId" />.
 16 |             </p>
 17 |             <p preserveWhitespace>
 18 |                 <a href="#" onClick="unlink">Unlink completely</a>
 19 |                 <a href="#" onClick="changeGist">Switch gists</a>
 20 |             </p>
 21 |         </div>
 22 |         <div layout={LabelsLeftLayout} visible:expr="!{$page.gh.verified}">
 23 |             <Md>
 24 |                 GitHub gists can be used to store task data. In order to connect with GitHub please [create a GitHub Personal
 25 |                 Access Token](https://github.com/settings/tokens) with **gist** scope and paste it below.
 26 |                 The token will enable read/write access to your GitHub gists. Tokens are stored in **localStorage**, so don't do
 27 |                 this on a public computer.
 28 |             </Md>
 29 | 
 30 |             <TextField
 31 |                 value:bind="$page.gh.token"
 32 |                 placeholder="GitHub Personal Access Token"
 33 |                 label="Token"
 34 |                 style="width: 30rem"
 35 |             />
 36 | 
 37 |             <LabeledContainer label="Gist">
 38 |                 <Radio value:bind="$page.initMode" option="create" text="Create a new gist" />
 39 |                 <Radio value:bind="$page.initMode" option="load" text="Load an existing gist"/>
 40 |             </LabeledContainer>
 41 | 
 42 |             <PureContainer layout={UseParentLayout} visible:expr="{$page.initMode}=='load'">
 43 |                 <TextField
 44 |                     value:bind="$page.gh.gistId"
 45 |                     placeholder="Gist Identifier"
 46 |                     label="GistId"
 47 |                     style="width: 30rem" />
 48 |                 <Button
 49 |                     onClick="load"
 50 |                     confirm="Loading the gist will remove all your locally stored tasks. Do you want to proceed?"
 51 |                 >
 52 |                     Load
 53 |                 </Button>
 54 |             </PureContainer>
 55 | 
 56 |             <PureContainer layout={UseParentLayout} visible:expr="{$page.initMode}=='create'">
 57 |                 <Button onClick="create">
 58 |                     Create Gist
 59 |                 </Button>
 60 |             </PureContainer>
 61 |         </div>
 62 | 
 63 |         <h3>Maintenance</h3>
 64 | 
 65 |         <div layout={LabelsLeftLayout}>
 66 |             <NumberField
 67 |                 value:bind="tdo.settings.completedTasksRetentionDays"
 68 |                 label="Show completed tasks for"
 69 |                 style="width:5rem"
 70 |                 inputStyle="text-align:center"
 71 |                 help="day(s)."
 72 |             />
 73 |             <NumberField
 74 |                 value:bind="tdo.settings.deleteCompletedTasksAfterDays"
 75 |                 enabled:bind="tdo.settings.deleteCompletedTasks"
 76 |                 style="width:5rem"
 77 |                 inputStyle="text-align:center"
 78 |                 label={<Checkbox value:bind="tdo.settings.deleteCompletedTasks">Delete completed tasks after</Checkbox>}
 79 |                 help="day(s)"
 80 |             />
 81 |             <NumberField
 82 |                 value:bind="tdo.settings.purgeDeletedObjectsAfterDays"
 83 |                 label="Purge deleted objects after"
 84 |                 style="width:5rem"
 85 |                 inputStyle="text-align:center"
 86 |                 help="day(s)"
 87 |             />
 88 |         </div>
 89 | 
 90 |         <h3>Task Styles</h3>
 91 | 
 92 |         <Repeater records:bind="tdo.settings.taskStyles">
 93 |             <PureContainer layout={LabelsTopLayout}>
 94 |                 <span text:tpl="{[{$index}+1]}." />
 95 |                 <TextField value:bind="$record.regex" label="Regex" />
 96 |                 <TextField value:bind="$record.style" label="Style" />
 97 |                 <TextField value:bind="$record.className" label="Class" />
 98 |                 <a href="#" onClick="removeTaskStyle">Remove</a>
 99 |             </PureContainer>
100 |         </Repeater>
101 |         <p>
102 |             <a href="#" onClick="addTaskStyle">Add</a>
103 |         </p>
104 | 
105 |         <h3>Custom CSS</h3>
106 | 
107 |         <TextArea value:bind="tdo.settings.css" rows={20} style="width:600px" />
108 |     </div>
109 | </cx>;
110 | 


--------------------------------------------------------------------------------
/app/routes/settings/index.scss:
--------------------------------------------------------------------------------
1 | .cxb-settings {
2 |   padding: 3rem;
3 |   max-width: 50rem;
4 | 
5 |   h3 {
6 |     margin-top: 3rem;
7 |     margin-bottom: 0.5rem;
8 |   }
9 | }


--------------------------------------------------------------------------------
/app/themes/dark/index.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background: #363636;
  3 |   color: rgba(255, 255, 255, 0.8);
  4 | }
  5 | 
  6 | a {
  7 |   color: rgba(255, 255, 255, 0.5);
  8 |   text-decoration: none;
  9 | 
 10 |   &:hover {
 11 |     color: rgba(255, 255, 255, 0.8);
 12 |   }
 13 | }
 14 | 
 15 | h2 {
 16 |   font-weight: normal;
 17 |   font-style: italic;
 18 |   margin-top: 0;
 19 | }
 20 | 
 21 | code {
 22 |   background: rgba(128, 128, 128, 0.25);
 23 |   padding: 1px 3px;
 24 |   border-radius: 2px;
 25 | }
 26 | 
 27 | .cxb-tasklist {
 28 |   border-right: 1px solid rgba(128, 128, 128, 0.1);
 29 |   border-bottom: 1px solid rgba(128, 128, 128, 0.1);
 30 | }
 31 | 
 32 | .cxe-tasklist-header {
 33 |   color: rgba(255, 255, 255, 0.5);
 34 | }
 35 | 
 36 | .cxe-tasklist-add {
 37 |   color: rgba(255, 255, 255, 0.5) !important;
 38 | }
 39 | 
 40 | .cxb-task {
 41 |   a {
 42 |     color: #00c1ff;
 43 |   }
 44 | }
 45 | 
 46 | .cxe-layout-header {
 47 | 
 48 |   border-bottom: 1px solid rgba(128, 128, 128, 0.1);
 49 | 
 50 |   a {
 51 |     text-decoration: none;
 52 |   }
 53 | 
 54 |   .cxm-active {
 55 |     color: white;
 56 |     background: rgba(128, 128, 128, 0.5) !important;
 57 |   }
 58 | 
 59 |   .cxm-active.cxs-cursor {
 60 |     color: white;
 61 |     background: rgba(123, 190, 255, 0.6) !important;
 62 |   }
 63 | }
 64 | 
 65 | .cxb-help {
 66 |   code {
 67 |     background: rgba(128, 128, 128, 0.25);
 68 |     border-radius: 2px;
 69 |     padding: 5px;
 70 |   }
 71 | 
 72 |   hr {
 73 |     border-top: none;
 74 |     border-bottom: 1px solid rgba(128, 128, 128, 0.1);
 75 |     margin: 2rem 0;
 76 |   }
 77 | }
 78 | 
 79 | .cxe-window-body {
 80 |   background: gray;
 81 | }
 82 | 
 83 | .cxb-dropdown {
 84 |   background: #444444;
 85 | }
 86 | 
 87 | ::-webkit-scrollbar-track {
 88 |   background-color: transparent;
 89 | }
 90 | 
 91 | ::-webkit-scrollbar {
 92 |   background-color: transparent;
 93 | }
 94 | 
 95 | ::-webkit-scrollbar:horizontal {
 96 |   height: 6px;
 97 | }
 98 | 
 99 | ::-webkit-scrollbar:vertical {
100 |   width: 6px;
101 | }
102 | 
103 | ::-webkit-scrollbar-thumb {
104 |   background-color: rgba(255, 255, 255, 0.2);
105 |   border-radius: 3px;
106 | }


--------------------------------------------------------------------------------
/app/themes/extension.scss:
--------------------------------------------------------------------------------
1 | html {
2 |   min-width: 780px;
3 | }


--------------------------------------------------------------------------------
/app/themes/index.scss:
--------------------------------------------------------------------------------
1 | @import "dark/index";


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mstijak/tdo/94e40a1f85a0d7824f0dc7b858279689b97006a9/assets/favicon.png


--------------------------------------------------------------------------------
/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mstijak/tdo/94e40a1f85a0d7824f0dc7b858279689b97006a9/assets/screenshot.png


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | machine:
 2 |   node:
 3 |     version: 7
 4 |   environment:
 5 |     YARN_VERSION: 0.18.1
 6 |     PATH: "${PATH}:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
 7 | 
 8 | dependencies:
 9 |   pre:
10 |     - |
11 |       if [[ ! -e ~/.yarn/bin/yarn || $(yarn --version) != "${YARN_VERSION}" ]]; then
12 |         curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION
13 |       fi
14 | 
15 |   cache_directories:
16 |     - ~/.yarn
17 |     - ~/.cache/yarn
18 | 
19 |   override:
20 |     - node -v
21 |     - yarn install
22 | 
23 | general:
24 |   branches:
25 |     ignore:
26 |       - gh-pages
27 | 
28 | deployment:
29 |   staging:
30 |     branch: master
31 |     commands:
32 |       - yarn run build
33 |       - sh ./config/deploy-ghpages.sh dist


--------------------------------------------------------------------------------
/config/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "cacheDirectory": true,
 3 |     "cacheIdentifier": "1",
 4 |     "presets": [
 5 |         [
 6 |             "cx-env",
 7 |             {
 8 |                 loose: true,
 9 |                 modules: false,
10 |                 cx: {
11 |                     imports: {
12 |                         useSrc: true
13 |                     }
14 |                 }
15 |             }
16 |         ]
17 |     ],
18 |     "plugins": []
19 | };
20 | 
21 | 


--------------------------------------------------------------------------------
/config/deploy-ghpages.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | # ideas used from https://gist.github.com/motemen/8595451
 3 | 
 4 | # abort the script if there is a non-zero error
 5 | set -e
 6 | 
 7 | # show where we are on the machine
 8 | pwd
 9 | 
10 | remote=$(git config remote.origin.url)
11 | 
12 | siteSource="$1"
13 | 
14 | if [ ! -d "$siteSource" ]
15 | then
16 |     echo "Usage: $0 <site source dir>"
17 |     exit 1
18 | fi
19 | 
20 | # make a directory to put the gp-pages branch
21 | mkdir gh-pages-branch
22 | cd gh-pages-branch
23 | # now lets setup a new repo so we can update the gh-pages branch
24 | git config --global user.email "$GH_EMAIL" > /dev/null 2>&1
25 | git config --global user.name "$GH_NAME" > /dev/null 2>&1
26 | git init
27 | git remote add --fetch origin "$remote"
28 | 
29 | # switch into the the gh-pages branch
30 | if git rev-parse --verify origin/gh-pages > /dev/null 2>&1
31 | then
32 |     git checkout gh-pages
33 |     # delete any old site as we are going to replace it
34 |     # Note: this explodes if there aren't any, so moving it here for now
35 |     git rm -rf .
36 | else
37 |     git checkout --orphan gh-pages
38 | fi
39 | 
40 | # copy over or recompile the new site
41 | cp -a "../${siteSource}/." .
42 | 
43 | # stage any changes and new files
44 | git add -A
45 | # now commit, ignoring branch gh-pages doesn't seem to work, so trying skip
46 | git commit --allow-empty -m "Deploy to GitHub pages [ci skip]"
47 | # and push, but send any output to /dev/null to hide anything sensitive
48 | git push --force --quiet origin gh-pages > /dev/null 2>&1
49 | 
50 | # go back to where we started and remove the gh-pages git repo we made and used
51 | # for deployment
52 | cd ..
53 | rm -rf gh-pages-branch
54 | 
55 | echo "Finished Deployment!"
56 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack'),
 2 |     HtmlWebpackPlugin = require('html-webpack-plugin'),
 3 |     path = require('path'),
 4 |     babelCfg = require("./babel.config"),
 5 |     paths = {
 6 |         root: path.join(__dirname, '../'),
 7 |         app: path.join(__dirname, '../app/'),
 8 |         dist: path.join(__dirname, '../dist/')
 9 |     };
10 | 
11 | module.exports = {
12 |     resolve: {
13 |         alias: {
14 |             //cx: paths.root + 'node_modules/cx-core/src/',
15 |             app: paths.app
16 |             //uncomment the line below to alias cx-react to cx-preact or some other React replacement library
17 |             //'cx-react': 'cx-preact',
18 |         }
19 |     },
20 | 
21 |     module: {
22 |         loaders: [{
23 |             test: /\.js$/,
24 |             //add here any ES6 based library
25 |             include: /[\\\/](app|cx-redux|cx|redux|redux-thunk|lodash)[\\\/]/,
26 |             loader: 'babel-loader',
27 |             query: babelCfg
28 |         }]
29 |     },
30 |     entry: {
31 |         app: paths.app + 'index.js'
32 |     },
33 |     externals: {
34 |         "react": "React",
35 |         "react-dom": "ReactDOM"
36 |     },
37 |     output: {
38 |         path: paths.dist,
39 |         filename: "[name].js"
40 |     },
41 |     plugins: [
42 |         // new webpack.optimize.CommonsChunkPlugin({
43 |         //     names: ["vendor"],
44 |         //     minChunks: Infinity
45 |         // }),
46 |         new HtmlWebpackPlugin({
47 |             template: paths.app + 'index.html',
48 |             hash: true
49 |         })
50 |     ]
51 | };
52 | 
53 | 
54 | 


--------------------------------------------------------------------------------
/config/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack'),
 2 |     merge = require('webpack-merge'),
 3 |     common = require('./webpack.config');
 4 | 
 5 | var specific = {
 6 |     module: {
 7 |         loaders: [{
 8 |             test: /\.scss$/,
 9 |             loaders: ["style-loader", "css-loader", "sass-loader"]
10 |         }, {
11 |             test: /\.css$/,
12 |             loaders: ["style-loader", "css-loader"]
13 |         }]
14 |     },
15 |     plugins: [
16 |         new webpack.HotModuleReplacementPlugin()
17 |     ],
18 |     output: {
19 |         publicPath: '/'
20 |     },
21 |     devtool: 'eval',
22 |     devServer: {
23 |         hot: true,
24 |         port: 8088,
25 |         noInfo: false,
26 |         inline: true,
27 |         historyApiFallback: true
28 |     }
29 | };
30 | 
31 | module.exports = merge(common, specific);
32 | 


--------------------------------------------------------------------------------
/config/webpack.extension.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack'),
 2 |     ExtractTextPlugin = require("extract-text-webpack-plugin"),
 3 |     CopyWebpackPlugin = require("copy-webpack-plugin"),
 4 |     CrxWebpackPlugin = require('crx-webpack-plugin'),
 5 |     ZipPlugin = require('zip-webpack-plugin'),
 6 |     merge = require('webpack-merge'),
 7 |     common = require('./webpack.config'),
 8 |     path = require('path');
 9 | 
10 | var extensionResourcePath = path.join(__dirname, '../extension'),
11 |     extensionContentPath = path.join(__dirname, '../extension/dist/chrome'),
12 |     extensionOutputPath = path.join(__dirname, '../extension/dist'),
13 | 	extensionSecretsPath = path.join(__dirname, '../extension'),
14 |     appPath = path.join(__dirname, '../app');
15 | 
16 | var sass = new ExtractTextPlugin({
17 |     filename: "app.css",
18 |     allChunks: true
19 | });
20 | 
21 | var specific = {
22 |     module: {
23 |         loaders: [{
24 |             test: /\.scss$/,
25 |             loaders: sass.extract(['css', 'sass'])
26 |         }, {
27 |             test: /\.css$/,
28 |             loaders: sass.extract(['css'])
29 |         }]
30 |     },
31 |     plugins: [
32 |         new CopyWebpackPlugin([
33 |             { from: path.join(__dirname, '../assets'), to: path.join(extensionContentPath, '/assets'), ignore: '*.db' },
34 |             { from: path.join(__dirname, '../extension/assets'), to: path.join(extensionContentPath, '/assets'), ignore: '*.db' },
35 |             { from: path.join(__dirname, '../extension/manifest_chrome.json'), to: path.join(extensionContentPath, '/manifest.json') },
36 |             { from: path.join(__dirname, '../extension/background.js'), to: extensionContentPath },
37 | 			{ from: path.join(extensionSecretsPath, '/chrome.pem'), to: path.join(extensionContentPath, '/key.pem') }
38 |         ]),
39 |         new webpack.optimize.UglifyJsPlugin(),
40 |         new webpack.DefinePlugin({
41 |             'process.env.NODE_ENV': JSON.stringify('production')
42 |         }),
43 |         sass,
44 |         new CrxWebpackPlugin({
45 |             // updateUrl: 'http://localhost:8000/',
46 |             // updateFilename: 'updates.xml',
47 |             keyFile: path.join(extensionSecretsPath, '/chrome.pem'),
48 |             contentPath: extensionContentPath,
49 |             outputPath: extensionOutputPath,
50 |             name: 'tdo'
51 |         }),
52 |         new ZipPlugin({
53 |             path: extensionOutputPath,
54 |             filename: 'chrome.zip'
55 |         })
56 |     ],
57 | 
58 |     entry: {
59 |         app: [
60 |             path.join(appPath, 'extension.js')
61 |         ]
62 |     },
63 | 
64 |     output: {
65 |         path: extensionContentPath,
66 |         publicPath: '.'
67 |     }
68 | };
69 | 
70 | module.exports = merge(common, specific);
71 | 


--------------------------------------------------------------------------------
/config/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack'),
 2 |     ExtractTextPlugin = require("extract-text-webpack-plugin"),
 3 |     CopyWebpackPlugin = require("copy-webpack-plugin"),
 4 |     merge = require('webpack-merge'),
 5 |     common = require('./webpack.config'),
 6 |     path = require('path');
 7 | 
 8 | var sass = new ExtractTextPlugin({
 9 |     filename: "app.css",
10 |     allChunks: true
11 | });
12 | 
13 | var specific = {
14 |     module: {
15 |         loaders: [{
16 |             test: /\.scss$/,
17 |             loaders: sass.extract(['css-loader', 'sass-loader'])
18 |         }, {
19 |             test: /\.css$/,
20 |             loaders: sass.extract(['css-loader'])
21 |         }]
22 |     },
23 | 
24 |     plugins: [
25 |         new CopyWebpackPlugin([{ from: path.join(__dirname, '../assets'), to: path.join(__dirname, '../dist/assets') }]),
26 |         new webpack.optimize.UglifyJsPlugin(),
27 |         new webpack.DefinePlugin({
28 |             'process.env.NODE_ENV': JSON.stringify('production')
29 |         }),
30 |         sass
31 |     ],
32 | 
33 |     output: {
34 |         publicPath: '.'
35 |     }
36 | };
37 | 
38 | module.exports = merge(common, specific);
39 | 


--------------------------------------------------------------------------------
/extension/assets/icon_128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mstijak/tdo/94e40a1f85a0d7824f0dc7b858279689b97006a9/extension/assets/icon_128.png


--------------------------------------------------------------------------------
/extension/assets/icon_16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mstijak/tdo/94e40a1f85a0d7824f0dc7b858279689b97006a9/extension/assets/icon_16.png


--------------------------------------------------------------------------------
/extension/assets/icon_48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mstijak/tdo/94e40a1f85a0d7824f0dc7b858279689b97006a9/extension/assets/icon_48.png


--------------------------------------------------------------------------------
/extension/background.js:
--------------------------------------------------------------------------------
 1 | try{
 2 | 	chrome.contextMenus.create({
 3 | 		'id': 'launch_tdo_on_tab',
 4 | 		'title': 'Launch on Tab',
 5 | 		'contexts': ['browser_action'],
 6 | 	});
 7 | 	
 8 | 	chrome.contextMenus.onClicked.addListener(function(info, tab){
 9 | 		console.log(info);
10 | 		switch(info.menuItemId){
11 | 			case 'launch_tdo_on_tab':
12 | 				chrome.tabs.create({ url: 'index.html', active: true });
13 | 				break;
14 | 		}
15 | 	});
16 | }catch(_err){
17 | 	console.error(_err);
18 | }
19 | 


--------------------------------------------------------------------------------
/extension/manifest_chrome.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"manifest_version": 2,
 3 | 	
 4 | 	"name": "tdo",
 5 | 	"version": "1.0.6",
 6 | 	"description": "Keyboard driven, hackable TODO list",
 7 | 	"author": "Marko Stijak",
 8 | 	"homepage_url": "https://github.com/mstijak/tdo",
 9 | 	
10 | 	"icons": {
11 | 		"16": "assets/icon_16.png",
12 | 		"48": "assets/icon_48.png",
13 | 		"128": "assets/icon_128.png"
14 | 	},
15 | 	
16 | 	"permissions": [
17 | 		"storage",
18 | 		"contextMenus"
19 | 	],
20 | 	
21 | 	"content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.polyfill.io https://unpkg.com; object-src 'self'",
22 | 	
23 | 	"browser_action": {
24 | 		"default_icon": "assets/icon_16.png",
25 | 		"default_title": "tdo",
26 | 		"default_popup": "index.html"
27 | 	},
28 | 	"background": {
29 | 		"persistent": true,
30 | 		"scripts": ["background.js"]
31 | 	},
32 | 	
33 | 	"commands": {
34 | 		"_execute_browser_action": {
35 | 			"description": "Open tdo.",
36 | 			"suggested_key": {
37 | 				"default": "Ctrl+Shift+9"
38 | 			}
39 | 		}
40 | 	}
41 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tdo",
 3 |   "version": "1.0.0",
 4 |   "description": "Hackable TODO list",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "exit 0",
 8 |     "start": "webpack-dev-server --config config/webpack.dev.js --open",
 9 |     "build": "webpack --config config/webpack.prod.js",
10 |     "build:extension": "webpack --config config/webpack.extension.js"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/mstijak/tdo.git"
15 |   },
16 |   "keywords": [
17 |     "todo",
18 |     "list",
19 |     "cx"
20 |   ],
21 |   "author": "Marko Stijak",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/mstijak/tdo/issues"
25 |   },
26 |   "homepage": "https://github.com/mstijak/tdo#readme",
27 |   "dependencies": {
28 |     "copy-webpack-plugin": "^4.1.1",
29 |     "cx": "^17.10.6",
30 |     "cx-react": "^17.10.0",
31 |     "cx-redux": "^17.5.0",
32 |     "marked": "^0.3.6",
33 |     "react": "^16.0.0",
34 |     "react-dom": "^16.0.0",
35 |     "redux": "^3.7.2",
36 |     "redux-thunk": "^2.2.0",
37 |     "uid": "0.0.2"
38 |   },
39 |   "devDependencies": {
40 |     "babel-core": "^6.26.0",
41 |     "babel-loader": "^7.1.2",
42 |     "babel-preset-cx-env": "^17.6.2",
43 |     "crx-webpack-plugin": "^0.1.5",
44 |     "css-loader": "^0.28.7",
45 |     "extract-text-webpack-plugin": "^3.0.1",
46 |     "html-webpack-plugin": "^2.30.1",
47 |     "node-sass": "^4.5.3",
48 |     "sass-loader": "^6.0.6",
49 |     "style-loader": "^0.19.0",
50 |     "webpack": "^3.8.1",
51 |     "webpack-dev-server": "^2.9.2",
52 |     "webpack-merge": "^4.1.0",
53 |     "zip-webpack-plugin": "^2.0.0"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/test/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mstijak/tdo/94e40a1f85a0d7824f0dc7b858279689b97006a9/test/README.md


--------------------------------------------------------------------------------