{ "name": "todo-mvc", "master": true, "version": "1.0.1", "description": "Create a Todo manager.\n\nThe purpose of this example is to learn how to code in System Designer.\n\nTaken from TodoMVC, http://todomvc.com.\n\nBased on the work made by TasteJS (under a Creative Commons Attribution 4.0 International License).", "schemas": { "16a9f1c82c18818": { "_id": "16a9f1c82c18818", "_name": "TodoItem", "_inherit": [ "_Component" ], "component": "link", "todo": "property", "render": "method" }, "1740a1d82d1d818": { "_id": "1740a1d82d1d818", "_name": "TodoApp", "_inherit": [ "_Component" ], "component": "link", "list": "link", "toggleButton": "link", "footer": "link", "render": "method", "bindEvents": "method", "addItem": "event", "removeItem": "event", "toggleItem": "event", "clearCompletedItems": "event", "toggleAllItems": "event", "editItem": "event", "saveItem": "event" }, "11a211d1b71929d": { "_id": "11a211d1b71929d", "_name": "Todo", "_inherit": [ "_Component" ], "isCompleted": "property", "label": "property" }, "1ff3e1dc98118dc": { "_id": "1ff3e1dc98118dc", "_name": "HTMLComponent", "_inherit": [ "_Component" ], "template": "property", "style": "property", "render": "method" }, "10e201646713c17": { "_id": "10e201646713c17", "_name": "TodoFooter", "_inherit": [ "_Component" ], "component": "link", "clear": "link", "render": "method" }, "185be1d12213f59": { "_id": "185be1d12213f59", "_name": "TodoList", "_inherit": [ "_Component" ], "render": "method" }, "1a1c918f9c1283e": { "_id": "1a1c918f9c1283e", "_name": "Router", "_inherit": [ "_Component" ], "path": "property", "start": "method" }, "1541114a9a17011": { "_id": "1541114a9a17011", "_name": "Store", "_inherit": [ "_Component" ], "add": "method", "remove": "method", "get": "method", "getAll": "method" }, "1723516a30132ac": { "_id": "1723516a30132ac", "_name": "_Database", "_inherit": [ "_Component" ], "_core": true, "insert": "event", "update": "event", "remove": "event" }, "1dd961a048100cc": { "_id": "1dd961a048100cc", "_name": "TodoToggleButton", "_inherit": [ "_Component" ], "component": "link", "render": "method" } }, "models": { "101e8182641017c": { "_id": "101e8182641017c", "_name": "TodoItem", "component": { "type": "HTMLComponent", "readOnly": false, "mandatory": false, "default": "todoitem" }, "todo": { "type": "Todo", "readOnly": false, "mandatory": false, "default": "" }, "render": {} }, "1f99b13a2c10817": { "_id": "1f99b13a2c10817", "_name": "TodoApp", "component": { "type": "HTMLComponent", "readOnly": false, "mandatory": false, "default": "todoapp" }, "toggleButton": { "type": "TodoToggleButton", "readOnly": false, "mandatory": false, "default": "todo-toggle-button" }, "list": { "type": "TodoList", "readOnly": false, "mandatory": false, "default": "todo-list" }, "footer": { "type": "TodoFooter", "readOnly": false, "mandatory": false, "default": "todo-footer" }, "render": {}, "addItem": { "params": [ { "name": "node", "type": "DOMElement", "mandatory": false, "default": null } ] }, "bindEvents": {}, "removeItem": { "params": [ { "name": "id", "type": "string", "mandatory": false, "default": "" } ] }, "toggleItem": { "params": [ { "name": "id", "type": "string", "mandatory": false, "default": "" } ] }, "clearCompletedItems": {}, "toggleAllItems": { "params": [ { "name": "value", "type": "boolean", "mandatory": false, "default": false } ] }, "editItem": { "params": [ { "name": "node", "type": "DOMElement", "mandatory": false, "default": null } ] }, "saveItem": { "params": [ { "name": "node", "type": "DOMElement", "mandatory": false, "default": null } ] } }, "1f4381d57e18dc2": { "_id": "1f4381d57e18dc2", "_name": "Todo", "label": { "type": "string", "readOnly": false, "mandatory": false, "default": "new todo" }, "isCompleted": { "type": "boolean", "readOnly": false, "mandatory": false, "default": false } }, "1b91e159ee1ac17": { "_id": "1b91e159ee1ac17", "_name": "HTMLComponent", "template": { "type": "html", "readOnly": false, "mandatory": false, "default": "" }, "style": { "type": "css", "readOnly": false, "mandatory": false, "default": "" }, "render": { "params": [ { "name": "elt", "type": "DOMElement", "mandatory": false, "default": null } ] } }, "1db15107941dcbc": { "_id": "1db15107941dcbc", "_name": "TodoFooter", "component": { "type": "HTMLComponent", "readOnly": false, "mandatory": false, "default": "footer" }, "render": {}, "clear": { "type": "HTMLComponent", "readOnly": false, "mandatory": false, "default": "clearcompleted" } }, "13b02113771092d": { "_id": "13b02113771092d", "_name": "TodoList", "render": {} }, "1c77717cd21a4f5": { "_id": "1c77717cd21a4f5", "_name": "Router", "path": { "type": "string", "readOnly": false, "mandatory": false, "default": "" }, "start": {} }, "1ce171b33918f6a": { "_id": "1ce171b33918f6a", "_name": "Store", "add": { "params": [ { "name": "todo", "type": "object", "mandatory": true, "default": {} } ] }, "remove": { "params": [ { "name": "id", "type": "string", "mandatory": true, "default": "" } ] }, "getAll": { "result": "array" }, "get": { "params": [ { "name": "id", "type": "string", "mandatory": false, "default": "" } ], "result": "any" } }, "154bc108b91ea44": { "_id": "154bc108b91ea44", "_name": "_Database", "_core": true, "insert": { "params": [ { "name": "event", "type": "dbInsertEvent" } ] }, "update": { "params": [ { "name": "event", "type": "dbUpdateEvent" } ] }, "remove": { "params": [ { "name": "event", "type": "dbRemoveEvent" } ] } }, "1b3e315905198bb": { "_id": "1b3e315905198bb", "_name": "TodoToggleButton", "render": {}, "component": { "type": "HTMLComponent", "readOnly": false, "mandatory": false, "default": "toggleall" } } }, "behaviors": { "18dab15bb11ee9b": { "_id": "18dab15bb11ee9b", "component": "13e7b1b46c1b2ef", "state": "start", "action": "function start() { \n var store = null;\n \n // get data from localstore\n store = this.require('store').getAll();\n store.forEach(function (todo) {\n this.require('db').collections().Todo.insert(todo);\n }.bind(this));\n \n // add CSS\n this.require('page').render();\n\n // add TodoApp widget\n this.require('todo-app').render();\n this.require('todo-app').bindEvents();\n \n // add footer\n this.require('info').render();\n \n // start router\n this.require('router').start();\n}", "useCoreAPI": false, "core": false }, "103b6139091a334": { "_id": "103b6139091a334", "component": "HTMLComponent", "state": "render", "action": "function render(elt) { \n var eltStyle = document.createElement('style'),\n style = this.style(),\n template = this.template(),\n domNode = elt;\n\n // render style\n if (style) {\n eltStyle.innerHTML = style;\n document.head.appendChild(eltStyle);\n }\n \n // render html\n if (template) {\n if (domNode === null) {\n domNode = document.body;\n }\n \n domNode.insertAdjacentHTML('beforeend', template);\n }\n}", "useCoreAPI": false, "core": false }, "12d0c1b8bf1ecb8": { "_id": "12d0c1b8bf1ecb8", "component": "TodoApp", "state": "render", "action": "function render() { \n // template \n this.component().render(); \n \n // toggle button\n this.toggleButton().render();\n \n // list\n this.list().render();\n \n // footer\n this.footer().render();\n}", "useCoreAPI": false, "core": false }, "1ee1810bf31a414": { "_id": "1ee1810bf31a414", "component": "TodoFooter", "state": "render", "action": "function render() { \n var template = this.component().template(),\n domNode = null,\n domTodoApp = null, \n path = this.require('router').path(),\n Todo = this.require('db').collections().Todo,\n uncompletedTodo = [],\n completedTodo = [];\n \n domTodoApp = document.getElementsByClassName('todoapp')[0];\n if (domTodoApp) {\n \n // clean space\n domNode = document.getElementsByClassName('footer')[0];\n if (domNode) {\n domNode.parentNode.removeChild(domNode);\n } \n \n if (Todo.count() > 0) {\n \n uncompletedTodo = Todo.find({\n 'isCompleted': false\n });\n \n // templating\n template = template.replace(/{nbItems}/g, uncompletedTodo.length);\n template = template.replace(/{item}/g, uncompletedTodo.length > 1 ? 'items' : 'item');\n template = template.replace(/{select_all}/g, path === '' ? 'selected' : '');\n template = template.replace(/{select_active}/g, path === 'active' ? 'selected' : '');\n template = template.replace(/{select_completed}/g, path === 'completed' ? 'selected' : '');\n \n // if run inside System Designer\n if (location.href.indexOf('/app/') !== -1) {\n template = template.replace(/{path}/g, '#' + document.location.href.split('#')[1].split('?')[0].split('/')[0]);\n } else {\n template = template.replace(/{path}/g, '');\n }\n \n domTodoApp.insertAdjacentHTML('beforeend', template);\n \n // clear button\n completedTodo = Todo.find({\n 'isCompleted': true\n });\n \n if (completedTodo.length > 0) {\n template = this.clear().template();\n \n domNode = document.getElementsByClassName('footer')[0];\n domNode.insertAdjacentHTML('beforeend', template);\n }\n }\n }\n}", "useCoreAPI": false, "core": false }, "12704171731fa79": { "_id": "12704171731fa79", "component": "TodoApp", "state": "bindEvents", "action": "function bindEvents() { \n\tvar dom = null;\n\t\n\tdom = document.getElementsByClassName('todoapp')[0];\n\tdom.addEventListener('keyup', function keyup(e) {\n\t var ENTER_CODE = 13;\n\t \n\t if (e.keyCode == ENTER_CODE) {\n\t switch (true) {\n\t case e.target.className === 'new-todo':\n \t this.addItem(e.target);\n \t break;\n \t case e.target.className === 'edit':\n \t this.saveItem(e.target);\n \t break;\n \t default:\n \t break;\n\t }\n\t }\n\t}.bind(this));\n\t\n\tdom = document.getElementsByClassName('todoapp')[0];\n\tdom.addEventListener('click', function click(e) {\n\t var id = '';\n\t \n\t switch (true) {\n\t case e.target.className === 'destroy':\n\t id = e.target.parentNode.parentNode.getAttribute('data-id');\n\t this.removeItem(id);\n\t break;\n\t case e.target.className === 'toggle':\n\t id = e.target.parentNode.parentNode.getAttribute('data-id');\n\t this.toggleItem(id);\n\t break;\n\t case e.target.className === 'clear-completed':\n this.clearCompletedItems();\n\t break;\n\t case e.target.className === 'toggle-all':\n this.toggleAllItems(e.target.checked);\n\t break;\n\t default:\n\t break;\n\t }\n\t}.bind(this));\n\t\n\tdom = document.getElementsByClassName('todoapp')[0];\n\tdom.addEventListener('dblclick', function dbclick(e) {\n\t switch (true) {\n\t case e.target.tagName === 'LABEL':\n\t this.editItem(e.target.parentNode.parentNode);\n\t break;\n\t default:\n\t break;\n\t }\n\t}.bind(this));\n}", "useCoreAPI": false, "core": false }, "17d07185ae1bf87": { "_id": "17d07185ae1bf87", "component": "TodoApp", "state": "addItem", "action": "function addItem(node) { \n var Todo = this.require('Todo');\n \n if (node.value.trim().length > 0) {\n new Todo({\n 'label': node.value.trim(),\n 'isCompleted': false\n });\n node.value = '';\n }\n}", "useCoreAPI": false, "core": false }, "192f912efc13eb3": { "_id": "192f912efc13eb3", "component": "Todo", "state": "init", "action": "function init(conf) { \n var todoApp = this.require('todo-app');\n \n if (todoApp) {\n if (todoApp.toggleButton()) {\n todoApp.toggleButton().render();\n }\n if (todoApp.list()) {\n todoApp.list().render();\n }\n if (todoApp.footer()) {\n todoApp.footer().render();\n }\n }\n}", "useCoreAPI": false, "core": false }, "1405c13bb6137c2": { "_id": "1405c13bb6137c2", "component": "TodoList", "state": "render", "action": "function render() { \n var domNode = null,\n path = this.require('router').path(),\n Todo = this.require('db').collections().Todo,\n todos = [];\n \n domNode = document.getElementsByClassName('todo-list')[0];\n if (domNode) {\n \n // clean\n this.require('db').collections().TodoItem.remove();\n domNode.innerHTML = '';\n \n // find todos depenfing of path\n switch (path) {\n case 'active':\n todos = Todo.find({\n 'isCompleted': false\n });\n break;\n case 'completed':\n todos = Todo.find({\n 'isCompleted': true\n });\n break;\n default: \n todos = Todo.find({});\n break;\n }\n \n // add the todos in the list\n todos.forEach(function(todo) {\n var TodoItem = this.require('TodoItem'),\n todoItem = new TodoItem({\n todo: this.require(todo._id)\n });\n \n todoItem.render();\n }.bind(this));\n }\n}", "useCoreAPI": false, "core": false }, "15f5414fe61ccd7": { "_id": "15f5414fe61ccd7", "component": "TodoItem", "state": "render", "action": "function render() { \n var template = this.component().template(),\n domNode = null;\n \n // templating\n template = template.replace(/{id}/g, this.todo().id());\n template = template.replace(/{checked}/g, this.todo().isCompleted() ? 'checked': '');\n template = template.replace(/{label}/g, this.todo().label()); \n template = template.replace(/{completed}/g, this.todo().isCompleted() ? 'completed': ''); \n \n domNode = document.getElementsByClassName('todo-list')[0];\n domNode.insertAdjacentHTML('beforeend', template);\n}", "useCoreAPI": false, "core": false }, "130591377c16440": { "_id": "130591377c16440", "component": "Router", "state": "start", "action": "function start() { \n var currentPath = window.location.href.split('#/')[1];\n \n // init \n if (currentPath) {\n this.path(currentPath);\n }\n \n // on url change\n window.addEventListener('hashchange', function (e) {\n this.path(window.location.href.split('#/')[1]);\n }.bind(this));\n}", "useCoreAPI": false, "core": false }, "1c661163d414918": { "_id": "1c661163d414918", "component": "Router", "state": "path", "action": "function path(value) { \n // render TodoApp widget\n this.require('todo-app').toggleButton().render();\n this.require('todo-app').list().render();\n this.require('todo-app').footer().render();\n}", "useCoreAPI": false, "core": false }, "107be1485a17252": { "_id": "107be1485a17252", "component": "Store", "state": "add", "action": "function add(todo) { \n var store = null,\n todos = {\n 'Todo': {}\n };\n \n try {\n if (typeof localStorage !== 'undefined') {\n store = localStorage.getItem('todos-system');\n if (store) {\n todos = JSON.parse(store);\n }\n \n todos.Todo[todo._id] = todo;\n \n localStorage.setItem('todos-system', JSON.stringify(todos));\n } else {\n this.require('logger').warn('no localStorage object found.');\n }\n } catch(e) {}\n}", "useCoreAPI": false, "core": false }, "13ec21928013caf": { "_id": "13ec21928013caf", "component": "Store", "state": "remove", "action": "function remove(id) { \n var store = null,\n todos = {\n 'Todo': {}\n };\n \n try { \n if (typeof localStorage !== 'undefined') {\n store = localStorage.getItem('todos-system');\n if (store) {\n todos = JSON.parse(store);\n }\n \n delete todos.Todo[id];\n \n localStorage.setItem('todos-system', JSON.stringify(todos));\n } else {\n this.require('logger').warn('no localStorage object found.');\n }\n } catch(e) {}\n}", "useCoreAPI": false, "core": false }, "12ab411c671f7c8": { "_id": "12ab411c671f7c8", "component": "Store", "state": "getAll", "action": "function getAll() { \n var store = null,\n todos = {\n 'Todo': {}\n },\n result = [],\n id = '';\n\t\n try {\n if (typeof localStorage !== 'undefined') {\n store = localStorage.getItem('todos-system');\n if (store) {\n store = localStorage.getItem('todos-system');\n todos = JSON.parse(store);\n }\n \n for (id in todos.Todo) {\n result.push(todos.Todo[id]);\n }\n } else {\n this.require('logger').warn('no localStorage object found.');\n }\n } catch(e) {}\n \n return result;\n}", "useCoreAPI": false, "core": false }, "1de8c154bb18a01": { "_id": "1de8c154bb18a01", "component": "_Database", "state": "insert", "action": "function insert(event) { \n if (event.collection === 'Todo') {\n this.require('store').add(event.document);\n }\n}", "useCoreAPI": false, "core": false }, "1adce1764013758": { "_id": "1adce1764013758", "component": "_Database", "state": "remove", "action": "function remove(event) { \n if (event.collection === 'Todo') {\n\t this.require('store').remove(event.id);\n }\n}", "useCoreAPI": false, "core": false }, "11040179ef13eb8": { "_id": "11040179ef13eb8", "component": "TodoToggleButton", "state": "render", "action": "function render() { \n var domNode = null;\n \n // clean\n domNode = document.getElementsByClassName('toggle-all')[0];\n if (domNode) {\n domNode.parentNode.removeChild(domNode);\n } \n domNode = document.querySelector('label[for=toggle-all]');\n if (domNode) {\n domNode.parentNode.removeChild(domNode);\n } \n \n if (this.require('db').collections().Todo.count() > 0) {\n this.component().render(document.getElementsByClassName('main')[0]);\n }\n}", "useCoreAPI": false, "core": false }, "1dcca14ac81485e": { "_id": "1dcca14ac81485e", "component": "_Database", "state": "update", "action": "function update(event) { \n var document = {},\n store = this.require('store');\n\n\tif (event.collection === 'Todo') {\n\t document = store.get(event.id);\n\t document[event.field] = event.value;\n\t store.add(document);\n }\n}", "useCoreAPI": false, "core": false }, "1731a1fcac1f119": { "_id": "1731a1fcac1f119", "component": "Store", "state": "get", "action": "function get(id) { \n var store = null,\n todos = {\n 'Todo': {}\n },\n result = [];\n \n\ttry { \n if (typeof localStorage !== 'undefined') {\n store = localStorage.getItem('todos-system');\n if (store) {\n todos = JSON.parse(store);\n }\n \n result = todos.Todo[id];\n } else {\n this.require('logger').warn('no localStorage object found.');\n }\n } catch(e) {}\n\t\n return result;\n}", "useCoreAPI": false, "core": false }, "189961a32819de9": { "_id": "189961a32819de9", "component": "TodoApp", "state": "removeItem", "action": "function removeItem(id) { \n this.require(id).destroy();\n \n this.toggleButton().render();\n this.list().render();\n this.footer().render();\n}", "useCoreAPI": false, "core": false }, "17ab514348121b3": { "_id": "17ab514348121b3", "component": "TodoApp", "state": "toggleItem", "action": "function toggleItem(id) { \n this.require(id).isCompleted(!this.require(id).isCompleted());\n\t\n this.toggleButton().render();\n this.list().render();\n this.footer().render();\n}", "useCoreAPI": false, "core": false }, "119191db0917a5e": { "_id": "119191db0917a5e", "component": "TodoApp", "state": "clearCompletedItems", "action": "function clearCompletedItems() { \n var Todo = this.require('db').collections().Todo;\n \n Todo.remove({\n\t 'isCompleted': true\n });\n\t\n this.toggleButton().render();\n this.list().render();\n this.footer().render();\n}", "useCoreAPI": false, "core": false }, "11355111d516779": { "_id": "11355111d516779", "component": "TodoApp", "state": "toggleAllItems", "action": "function toggleAllItems(value) { \n var Todo = this.require('db').collections().Todo;\n \n Todo.update({}, {\n 'isCompleted': value\n });\n \n this.list().render();\n this.footer().render();\n}", "useCoreAPI": false, "core": false }, "169021b1611a39f": { "_id": "169021b1611a39f", "component": "TodoApp", "state": "editItem", "action": "function editItem(node) { \n node.setAttribute('class', 'editing');\n node.children[1].value = node.children[1].value;\n node.children[1].focus();\n}", "useCoreAPI": false, "core": false }, "1a2f014dd11c329": { "_id": "1a2f014dd11c329", "component": "TodoApp", "state": "saveItem", "action": "function saveItem(node) { \n var value = node.value,\n li = node.parentNode,\n id = li.getAttribute('data-id'),\n label = '';\n \n if (value.trim().length > 0) {\n this.require(id).label(value);\n \n label = document.querySelector('li[data-id=\\'' + id +'\\'] label');\n label.innerText = value;\n } else {\n this.removeItem(id);\n }\n \n li.setAttribute('class', '');\n node.blur();\n}", "useCoreAPI": false, "core": false } }, "types": { "DOMElement": { "_id": "17e7e1bd1419021", "name": "DOMElement", "type": "object" }, "dbUpdateEvent": { "_id": "1f5c41309711752", "name": "dbUpdateEvent", "type": "object", "schema": { "collection": { "type": "string", "mandatory": true, "default": "" }, "id": { "type": "string", "mandatory": true, "default": "" }, "field": { "type": "string", "mandatory": true, "default": "" }, "value": { "type": "any", "mandatory": true, "default": null } } }, "dbRemoveEvent": { "_id": "1952e1ac4213f4a", "name": "dbRemoveEvent", "type": "object", "schema": { "collection": { "type": "string", "mandatory": true, "default": "" }, "id": { "type": "string", "mandatory": true, "default": "" } } }, "dbInsertEvent": { "_id": "148ef1e19810e6d", "name": "dbInsertEvent", "type": "object", "schema": { "collection": { "type": "string", "mandatory": true, "default": "" }, "document": { "type": "object", "mandatory": true, "default": {} } } } }, "components": { "TodoApp": { "todo-app": { "_id": "todo-app", "component": "todoapp", "footer": "todo-footer", "list": "todo-list", "toggleButton": "todo-toggle-button" } }, "TodoItem": {}, "Todo": {}, "TodoFooter": { "todo-footer": { "_id": "todo-footer", "clear": "clearcompleted", "component": "footer" } }, "HTMLComponent": { "todoitem": { "_id": "todoitem", "template": "