Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Request to add NX framework TodoMVC app. #1679

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Request to add NX framework TodoMVC app. #1679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions examples/nx/.gitignore
View file
Open in desktop
@@ -0,0 +1,6 @@
node_modules/todomvc-app-css
!node_modules/todomvc-app-css/index.css

node_modules/todomvc-common
!node_modules/todomvc-common/base.js
!node_modules/todomvc-common/base.css
7 changes: 7 additions & 0 deletions examples/nx/css/app.css
View file
Open in desktop
@@ -0,0 +1,7 @@
todo-app {
display: block;
}

[cloak] {
display: none;
}
56 changes: 56 additions & 0 deletions examples/nx/index.html
View file
Open in desktop
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NX • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<todo-app class="todoapp" cloak>
<header class="header">
<h1>todos</h1>
<input #keyup="todos.create($event) & key 'enter'" class="new-todo"
placeholder="What needs to be done?" autocomplete="off" autofocus>
</header>
<section class="main" @hidden="!todos.all.length">
<input class="toggle-all" type="checkbox" name="todos.allCompleted" bind>
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list" @repeat="todos[status]" repeat-value="todo">
<li @class="{completed: todo.completed, editing: todo.editing}">
<div class="view">
<input class="toggle" type="checkbox" name="todo.completed" bind>
<label #dblclick="todo.editing = true">@{todo.title}</label>
<button #click="todos.remove(todo)" class="destroy"></button>
</div>
<input is="todo-input" class="edit" @todo="todo"
#blur,keyup="todos.edit(todo, $event) & key 'enter'"
#keyup="todo.editing = false & key 'esc'">
</li>
</ul>
</section>
<footer class="footer" @hidden="!todos.all.length">
<span class="todo-count">@{todos.active.length | unit 'item'} left</span>
<ul class="filters">
<li><a @class="{selected: status === 'all'}" #click="status = 'all'">All</a></li>
<li><a @class="{selected: status === 'active'}" #click="status = 'active'">Active</a></li>
<li><a @class="{selected: status === 'completed'}" #click="status = 'completed'">Completed</a></li>
</ul>
<button class="clear-completed" @hidden="!todos.completed.length" #click="todos.clearCompleted()">
Clear completed
</button>
</footer>
</todo-app>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/solkimicreb">Bertalan Miklos</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="node_modules/todomvc-common/base.js"></script>
<script src="node_modules/nx-framework/nx-alpha.4.0.0.js"></script>
<script src="js/app.js"></script>
<script src="js/input.js"></script>
</body>
</html>
67 changes: 67 additions & 0 deletions examples/nx/js/app.js
View file
Open in desktop
@@ -0,0 +1,67 @@
/* global nx, localStorage */

(function () {
'use strict';

// this is a middleware function, which is used to add functionality to components
function setup(elem, state) {
state.status = state.status || 'all';
state.todos = {
all: JSON.parse(localStorage.getItem('todos-nx')) || [],
get completed() {
return this.all.filter(todo => todo.completed);
},
get active() {
return this.all.filter(todo => !todo.completed);
},
get allCompleted() {
return this.all.every(todo => todo.completed);
},
set allCompleted(value) {
if (value) {
this.all.forEach(todo => todo.completed = true);
} else {
this.all.forEach(todo => todo.completed = false);
}
},
create(event) {
const title = event.target.value.trim();
if (title) {
this.all.push({title});
}
event.target.value = '';
},
edit(todo, event) {
todo.title = event.target.value.trim();
if (!todo.title) {
this.remove(todo);
}
todo.editing = false;
},
remove(todo) {
const index = this.all.indexOf(todo);
this.all.splice(index, 1);
},
clearCompleted() {
this.all = this.active;
},
toJSON() {
return this.all.map(todo => ({title: todo.title, completed: todo.completed}));
}
};

// auto save todos when the todos array or a todo title/completed is mutated/changed
elem.$observe(() => localStorage.setItem('todos-nx', JSON.stringify(state.todos)));

// reveal the element by removing the cloak attribute (styled in app.css)
elem.removeAttribute('cloak');
}

// define an app component with the above and an URL-state synchronizing middleware
nx.components.app()
.use(nx.middlewares.params({
status: { type: 'string', history: true }
}))
.use(setup)
.register('todo-app');
})();
21 changes: 21 additions & 0 deletions examples/nx/js/input.js
View file
Open in desktop
@@ -0,0 +1,21 @@
/* global nx */

(function () {
'use strict';

// this is a middleware function, which is used to add functionality to components
function setup(elem) {
// define a custom attribute named 'todo' that runs the passed function on value change
elem.$attribute('todo', (todo) => {
elem.value = todo.title;
if (todo.editing) {
elem.focus();
}
});
}

// define a type extension with the above middleware to the native 'input' element
nx.component({element: 'input'})
.use(setup)
.register('todo-input');
})();