Add riot.js 2.0 example

semi87 · Aug 23, 2015 · 0117e01 · 0117e01
1 parent c3f5dc5
commit 0117e01
Show file tree

Hide file tree

Showing 16 changed files with 1,089 additions and 0 deletions.
diff --git a/examples/riotjs/.editorconfig b/examples/riotjs/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/examples/riotjs/.gitattributes b/examples/riotjs/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/examples/riotjs/.gitignore b/examples/riotjs/.gitignore
@@ -0,0 +1,11 @@
+node_modules/todomvc-app-css/*
+!node_modules/todomvc-app-css/index.css
+
+node_modules/todomvc-common/*
+!node_modules/todomvc-common/base.css
+!node_modules/todomvc-common/base.js
+
+node_modules/.bin
+node_modules/riot/*
+!node_modules/riot/riot.min.js
+!node_modules/riot/riot+compiler.min.js
diff --git a/examples/riotjs/index.html b/examples/riotjs/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" data-framework="riotjs">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Riot.js • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<todo></todo>
+		<script src="node_modules/todomvc-common/base.js"></script>
+		<script src="js/todo.html" type="riot/tag"></script>
+		<script src="node_modules/riot/riot+compiler.min.js"></script>
+		<script src="js/store.js"></script>
+		<script src="js/app.js"></script>
+	</body>
+</html>
diff --git a/examples/riotjs/js/app.js b/examples/riotjs/js/app.js
@@ -0,0 +1,7 @@
+/*global riot, todoStorage */
+
+(function () {
+	'use strict';
+
+	riot.mount('todo', { data: todoStorage.fetch() });
+}());
diff --git a/examples/riotjs/js/store.js b/examples/riotjs/js/store.js
@@ -0,0 +1,16 @@
+(function (exports) {
+
+	'use strict';
+
+	var STORAGE_KEY = 'todos-riotjs';
+
+	exports.todoStorage = {
+		fetch: function () {
+			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+		},
+		save: function (todos) {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+		}
+	};
+
+})(window);
diff --git a/examples/riotjs/js/todo.html b/examples/riotjs/js/todo.html
@@ -0,0 +1,170 @@
+/*global riot, todoStorage */
+<todo>
+	<section id="todoapp">
+		<header id="header">
+			<h1>todos</h1>
+			<input id="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" onkeyup={ addTodo }>
+		</header>
+		<section id="main" show={ todos.length }>
+			<input id="toggle-all" type="checkbox" checked={ allDone } onclick={ toggleAll }>
+			<ul id="todo-list">
+				<li riot-tag="todoitem" class="todo { completed: t.completed, editing: t.editing }"
+						each={ t, i in filteredTodos() } data={ t } parentview={ parent }></li>
+			</ul>
+		</section>
+		<footer id="footer" show={ todos.length }>
+			<span id="todo-count">
+				<strong>{ remaining }</strong> { remaining === 1 ? 'item' : 'items' } left
+			</span>
+			<ul id="filters">
+				<li><a class={ selected: activeFilter=='all' } href="#/all">All</a></li>
+				<li><a class={ selected: activeFilter=='active' } href="#/active">Active</a></li>
+				<li><a class={ selected: activeFilter=='completed' } href="#/completed">Completed</a></li>
+			</ul>
+			<button id="clear-completed" onclick={ removeCompleted } show={ todos.length > remaining }>
+				Clear completed</button>
+		</footer>
+	</section>
+	<footer id="info">
+		<p>Double-click to edit a todo</p>
+		<p>Written by <a href="http://github.com/txchen">Tianxiang Chen</a></p>
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+	</footer>
+	<script>
+	'use strict';
+
+	var ENTER_KEY = 13;
+	var self = this;
+	self.todos = opts.data || [];
+
+	riot.route.exec(function(base, filter) {
+		self.activeFilter = filter || 'all';
+	});
+
+	self.on('update', function() {
+		self.remaining = self.todos.filter(function(t) {
+			return !t.completed;
+		}).length;
+		self.allDone = self.remaining === 0;
+		self.saveTodos();
+	});
+
+	saveTodos() {
+		todoStorage.save(self.todos);
+		self.update();
+	};
+
+	filteredTodos() {
+		if (self.activeFilter === 'active') {
+			return self.todos.filter(function(t) {
+				return !t.completed;
+			});
+		} else if (self.activeFilter === 'completed') {
+			return self.todos.filter(function(t) {
+				return t.completed;
+			});
+		} else {
+			return self.todos;
+		}
+	};
+
+	addTodo(e) {
+		if (e.which === ENTER_KEY) {
+			var value = e.target.value && e.target.value.trim();
+			if (!value) {
+				return;
+			}
+			self.todos.push({ title: value, completed: false });
+			e.target.value = '';
+		}
+	};
+
+	removeTodo(todo) {
+		self.todos.some(function (t) {
+			if (todo === t) {
+				self.todos.splice(self.todos.indexOf(t), 1);
+			}
+		});
+		self.update();
+	};
+
+	toggleAll(e) {
+		self.todos.forEach(function (t) {
+			t.completed = e.target.checked;
+		});
+		return true;
+	};
+
+	removeCompleted() {
+		self.todos = self.todos.filter(function(t) {
+			return !t.completed;
+		});
+	};
+
+	riot.route(function(base, filter) {
+		self.activeFilter = filter;
+		self.update();
+	});
+	</script>
+</todo>
+
+<todoitem>
+	<div class="view">
+		<input class="toggle" type="checkbox" checked={ todo.completed } onclick={ toggleTodo }>
+		<label ondblclick={ editTodo }>{ todo.title }</label>
+		<button class="destroy" onclick={ removeTodo }></button>
+	</div>
+	<input name="todoeditbox" class="edit" type="text" onblur={ doneEdit } onkeyup={ editKeyUp }>
+	<script>
+	'use strict';
+
+	var ENTER_KEY = 13;
+	var ESC_KEY = 27;
+	var self = this;
+	self.todo = opts.data;
+	self.parentview = opts.parentview;
+	self.todo.editing = false;
+
+	toggleTodo() {
+		self.todo.completed = !self.todo.completed;
+		self.parentview.saveTodos();
+		return true;
+	};
+
+	editTodo() {
+		self.todo.editing = true;
+		self.todoeditbox.value = self.todo.title;
+	};
+
+	removeTodo() {
+		self.parentview.removeTodo(self.todo);
+	};
+
+	doneEdit() {
+		self.todo.editing = false;
+		var enteredText = self.todoeditbox.value && self.todoeditbox.value.trim();
+		if (enteredText) {
+			self.todo.title = enteredText;
+			self.parentview.saveTodos();
+		} else {
+			self.removeTodo();
+		}
+	};
+
+	editKeyUp(e) {
+		if (e.which === ENTER_KEY) {
+			self.doneEdit();
+		} else if (e.which === ESC_KEY) {
+			self.todoeditbox.value = self.todo.title;
+			self.doneEdit();
+		}
+	};
+
+	self.on('update', function() {
+		if (self.todo.editing) {
+			self.parentview.update();
+			self.todoeditbox.focus();
+		}
+	});
+	</script>
+</todoitem>
diff --git a/examples/riotjs/node_modules/riot/riot+compiler.min.js b/examples/riotjs/node_modules/riot/riot+compiler.min.js
diff --git a/examples/riotjs/node_modules/riot/riot.min.js b/examples/riotjs/node_modules/riot/riot.min.js