Skip to content

T
todomvc
Commit d29ad7ee authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Montage - code style

parent cb03b745
Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 306 deletions
labs/architecture-examples/montage/assets/app.css
View file @ d29ad7ee
#montage-todomvc .visible {display: block;} #montage-todomvc .visible {
display: block;
}
labs/architecture-examples/montage/core/todo.js
View file @ d29ad7ee
var Montage = require("montage").Montage; var Montage = require('montage').Montage;
exports.Todo = Montage.create(Montage, { exports.Todo = Montage.create(Montage, {
initWithTitle: { initWithTitle: {
value: function(title) { value: function (title) {
this.title = title; this.title = title;
return this; return this;
} }
}, },
title: { title: {
value: null value: null
}, },
completed: { completed: {
value: false value: false
} }
}); });
labs/architecture-examples/montage/index.html
View file @ d29ad7ee
<!doctype html> <!doctype html>
<html lang=en id=montage-todomvc> <head> <meta charset=utf-8> <html lang="en" id="montage-todomvc">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>Montage • TodoMVC</title> <title>Montage • TodoMVC</title>
<link rel=stylesheet href="../../../assets/base.css"> <link rel="stylesheet" href="../../../assets/base.css">
<link rel=stylesheet href="assets/app.css"> <link rel="stylesheet" href="assets/app.css">
<script src=bundle-0-d67ccde.js data-montage="packages/montage@4763f06/" data-montage-hash=4763f06 data-application-hash=1156f40></script> <script src="bundle-0-d67ccde.js"
<script type="text/montage-serialization">{"owner":{"prototype":"montage/ui/loader.reel"}}</script> data-montage="packages/montage@4763f06/"
</head> data-montage-hash="4763f06"
data-application-hash="1156f40"></script>
<script type="text/montage-serialization">
{
"owner": {
"prototype": "montage/ui/loader.reel"
}
}
</script>
</head>
<body></body> <body></body>
</html> </html>
labs/architecture-examples/montage/ui/main.reel/item-count-converter.js
View file @ d29ad7ee
var Montage = require("montage").Montage, var Montage = require('montage').Montage;
Converter = require("montage/core/converter/converter").Converter; var Converter = require('montage/core/converter/converter').Converter;
exports.ItemCountConverter = Montage.create(Converter, { exports.ItemCountConverter = Montage.create(Converter, {
convert: { convert: {
value: function(itemCount) { value: function (itemCount) {
return (1 === itemCount) ? "item" : "items"; return itemCount === 1 ? 'item' : 'items';
} }
} }
}); });
labs/architecture-examples/montage/ui/main.reel/main.css
View file @ d29ad7ee
#main, #main,
#footer, #footer,
#clear-completed-container {display: none;} #clear-completed-container {
display: none;
}
labs/architecture-examples/montage/ui/main.reel/main.html
View file @ d29ad7ee
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Template • TodoMVC</title> <title>Template • TodoMVC</title>
<link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" href="main.css">
<script type="text/montage-serialization"> <script type="text/montage-serialization">
{ {
"owner": { "owner": {
...@@ -15,7 +14,6 @@ ...@@ -15,7 +14,6 @@
"newTodoInput": {"#": "new-todo"} "newTodoInput": {"#": "new-todo"}
} }
}, },
"todoRepetition": { "todoRepetition": {
"prototype": "montage/ui/repetition.reel", "prototype": "montage/ui/repetition.reel",
"properties": { "properties": {
...@@ -25,7 +23,6 @@ ...@@ -25,7 +23,6 @@
"contentController": {"<-": "@owner.todoListController"} "contentController": {"<-": "@owner.todoListController"}
} }
}, },
"todoView": { "todoView": {
"prototype": "ui/todo-view.reel", "prototype": "ui/todo-view.reel",
"properties": { "properties": {
...@@ -35,7 +32,6 @@ ...@@ -35,7 +32,6 @@
"todo": {"<-": "@todoRepetition.objectAtCurrentIteration"} "todo": {"<-": "@todoRepetition.objectAtCurrentIteration"}
} }
}, },
"main": { "main": {
"prototype": "montage/ui/dynamic-element.reel", "prototype": "montage/ui/dynamic-element.reel",
"properties": { "properties": {
...@@ -45,7 +41,6 @@ ...@@ -45,7 +41,6 @@
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"} "classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
} }
}, },
"footer": { "footer": {
"prototype": "montage/ui/dynamic-element.reel", "prototype": "montage/ui/dynamic-element.reel",
"properties": { "properties": {
...@@ -55,7 +50,6 @@ ...@@ -55,7 +50,6 @@
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"} "classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
} }
}, },
"toggleAllCheckbox": { "toggleAllCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel", "prototype": "montage/ui/native/input-checkbox.reel",
"properties": { "properties": {
...@@ -65,7 +59,6 @@ ...@@ -65,7 +59,6 @@
"checked": {"<->": "@owner.allCompleted"} "checked": {"<->": "@owner.allCompleted"}
} }
}, },
"todoCount": { "todoCount": {
"prototype": "montage/ui/dynamic-text.reel", "prototype": "montage/ui/dynamic-text.reel",
"properties": { "properties": {
...@@ -75,11 +68,9 @@ ...@@ -75,11 +68,9 @@
"value": {"<-": "@owner.todosLeft.count()"} "value": {"<-": "@owner.todosLeft.count()"}
} }
}, },
"itemCountConverter": { "itemCountConverter": {
"prototype": "ui/main.reel/item-count-converter" "prototype": "ui/main.reel/item-count-converter"
}, },
"todoCountWording": { "todoCountWording": {
"prototype": "montage/ui/dynamic-text.reel", "prototype": "montage/ui/dynamic-text.reel",
"properties": { "properties": {
...@@ -89,7 +80,6 @@ ...@@ -89,7 +80,6 @@
"value": {"<-": "@owner.todosLeft.count()", "converter": {"@": "itemCountConverter"}} "value": {"<-": "@owner.todosLeft.count()", "converter": {"@": "itemCountConverter"}}
} }
}, },
"completedCount": { "completedCount": {
"prototype": "montage/ui/dynamic-text.reel", "prototype": "montage/ui/dynamic-text.reel",
"properties": { "properties": {
...@@ -99,7 +89,6 @@ ...@@ -99,7 +89,6 @@
"value": {"<-": "@owner.completedTodos.count()"} "value": {"<-": "@owner.completedTodos.count()"}
} }
}, },
"clearCompletedContainer": { "clearCompletedContainer": {
"prototype": "montage/ui/dynamic-element.reel", "prototype": "montage/ui/dynamic-element.reel",
"properties": { "properties": {
...@@ -109,7 +98,6 @@ ...@@ -109,7 +98,6 @@
"classList.visible": {"<-": "@owner.completedTodos.count()"} "classList.visible": {"<-": "@owner.completedTodos.count()"}
} }
}, },
"clearCompletedButton": { "clearCompletedButton": {
"prototype": "montage/ui/native/button.reel", "prototype": "montage/ui/native/button.reel",
"properties": { "properties": {
...@@ -125,10 +113,9 @@ ...@@ -125,10 +113,9 @@
} }
} }
</script> </script>
</head> </head>
<body> <body>
<div data-montage-id="mainComponent"> <div data-montage-id="mainComponent">
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
...@@ -157,5 +144,5 @@ ...@@ -157,5 +144,5 @@
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
</div> </div>
</body> </body>
</html> </html>
labs/architecture-examples/montage/ui/main.reel/main.js
View file @ d29ad7ee
var Montage = require("montage").Montage, var Montage = require('montage').Montage;
Component = require("montage/ui/component").Component, var Component = require('montage/ui/component').Component;
ArrayController = require("montage/ui/controller/array-controller").ArrayController, var ArrayController = require('montage/ui/controller/array-controller').ArrayController;
Todo = require("core/todo").Todo, var Todo = require('core/todo').Todo;
Serializer = require("montage/core/serializer").Serializer, var Serializer = require('montage/core/serializer').Serializer;
Deserializer = require("montage/core/deserializer").Deserializer, var Deserializer = require('montage/core/deserializer').Deserializer;
LOCAL_STORAGE_KEY = "todos-montage"; var LOCAL_STORAGE_KEY = 'todos-montage';
exports.Main = Montage.create(Component, { exports.Main = Montage.create(Component, {
newTodoForm: { newTodoForm: {
value: null value: null
}, },
...@@ -22,28 +21,29 @@ exports.Main = Montage.create(Component, { ...@@ -22,28 +21,29 @@ exports.Main = Montage.create(Component, {
}, },
didCreate: { didCreate: {
value: function() { value: function () {
this.todoListController = ArrayController.create(); this.todoListController = ArrayController.create();
this.load(); this.load();
} }
}, },
load: { load: {
value: function() { value: function () {
if (localStorage) { if (localStorage) {
var todoSerialization = localStorage.getItem(LOCAL_STORAGE_KEY); var todoSerialization = localStorage.getItem(LOCAL_STORAGE_KEY);
if (todoSerialization) { if (todoSerialization) {
var deserializer = Deserializer.create(), var deserializer = Deserializer.create();
self = this; var self = this;
try { try {
deserializer.initWithStringAndRequire(todoSerialization, require).deserializeObject(function(todos) { deserializer.initWithStringAndRequire(todoSerialization, require).deserializeObject(function (todos) {
self.todoListController.initWithContent(todos); self.todoListController.initWithContent(todos);
}, require); }, require);
} catch(e) { } catch (err) {
console.error("Could not load saved tasks."); console.error('Could not load saved tasks.');
console.debug("Could not deserialize", todoSerialization); console.debug('Could not deserialize', todoSerialization);
console.log(e.stack); console.log(err.stack);
} }
} }
} }
...@@ -51,10 +51,10 @@ exports.Main = Montage.create(Component, { ...@@ -51,10 +51,10 @@ exports.Main = Montage.create(Component, {
}, },
save: { save: {
value: function() { value: function () {
if (localStorage) { if (localStorage) {
var todos = this.todoListController.content, var todos = this.todoListController.content;
serializer = Serializer.create().initWithRequire(require); var serializer = Serializer.create().initWithRequire(require);
localStorage.setItem(LOCAL_STORAGE_KEY, serializer.serializeObject(todos)); localStorage.setItem(LOCAL_STORAGE_KEY, serializer.serializeObject(todos));
} }
...@@ -62,29 +62,27 @@ exports.Main = Montage.create(Component, { ...@@ -62,29 +62,27 @@ exports.Main = Montage.create(Component, {
}, },
prepareForDraw: { prepareForDraw: {
value: function() { value: function () {
this.newTodoForm.identifier = "newTodoForm"; this.newTodoForm.identifier = 'newTodoForm';
this.newTodoForm.addEventListener("submit", this, false); this.newTodoForm.addEventListener('submit', this, false);
this.addEventListener('destroyTodo', this, true);
this.addEventListener("destroyTodo", this, true); window.addEventListener('beforeunload', this, true);
window.addEventListener("beforeunload", this, true);
} }
}, },
captureDestroyTodo: { captureDestroyTodo: {
value: function(evt) { value: function (e) {
this.destroyTodo(evt.detail.todo); this.destroyTodo(e.detail.todo);
} }
}, },
handleNewTodoFormSubmit: { handleNewTodoFormSubmit: {
value: function(evt) { value: function (e) {
evt.preventDefault(); e.preventDefault();
var title = this.newTodoInput.value.trim(); var title = this.newTodoInput.value.trim();
if ("" === title) { if (title === '') {
return; return;
} }
...@@ -94,7 +92,7 @@ exports.Main = Montage.create(Component, { ...@@ -94,7 +92,7 @@ exports.Main = Montage.create(Component, {
}, },
createTodo: { createTodo: {
value: function(title) { value: function (title) {
var todo = Todo.create().initWithTitle(title); var todo = Todo.create().initWithTitle(title);
this.todoListController.addObjects(todo); this.todoListController.addObjects(todo);
return todo; return todo;
...@@ -102,31 +100,30 @@ exports.Main = Montage.create(Component, { ...@@ -102,31 +100,30 @@ exports.Main = Montage.create(Component, {
}, },
destroyTodo: { destroyTodo: {
value: function(todo) { value: function (todo) {
this.todoListController.removeObjects(todo); this.todoListController.removeObjects(todo);
return todo; return todo;
} }
}, },
allCompleted: { allCompleted: {
dependencies: ["todoListController.organizedObjects.completed"], dependencies: ['todoListController.organizedObjects.completed'],
get: function() { get: function () {
return this.todoListController.organizedObjects.getProperty("completed").all(); return this.todoListController.organizedObjects.getProperty('completed').all();
}, },
set: function(value) { set: function (value) {
this.todoListController.organizedObjects.forEach(function(member) { this.todoListController.organizedObjects.forEach(function (member) {
member.completed = value; member.completed = value;
}); });
} }
}, },
todosLeft: { todosLeft: {
dependencies: ["todoListController.organizedObjects.completed"], dependencies: ['todoListController.organizedObjects.completed'],
get: function() { get: function () {
if (this.todoListController.organizedObjects) { if (this.todoListController.organizedObjects) {
var todos = this.todoListController.organizedObjects; var todos = this.todoListController.organizedObjects;
return todos.filter(function(member) { return todos.filter(function (member) {
return !member.completed; return !member.completed;
}); });
} }
...@@ -134,12 +131,11 @@ exports.Main = Montage.create(Component, { ...@@ -134,12 +131,11 @@ exports.Main = Montage.create(Component, {
}, },
completedTodos: { completedTodos: {
dependencies: ["todoListController.organizedObjects.completed"], dependencies: ['todoListController.organizedObjects.completed'],
get: function() { get: function () {
if (this.todoListController.organizedObjects) { if (this.todoListController.organizedObjects) {
var todos = this.todoListController.organizedObjects; var todos = this.todoListController.organizedObjects;
return todos.filter(function(member) { return todos.filter(function (member) {
return member.completed; return member.completed;
}); });
} }
...@@ -147,8 +143,8 @@ exports.Main = Montage.create(Component, { ...@@ -147,8 +143,8 @@ exports.Main = Montage.create(Component, {
}, },
handleClearCompletedButtonAction: { handleClearCompletedButtonAction: {
value: function(evt) { value: function () {
var completedTodos = this.todoListController.organizedObjects.filter(function(todo) { var completedTodos = this.todoListController.organizedObjects.filter(function (todo) {
return todo.completed; return todo.completed;
}); });
...@@ -159,9 +155,8 @@ exports.Main = Montage.create(Component, { ...@@ -159,9 +155,8 @@ exports.Main = Montage.create(Component, {
}, },
captureBeforeunload: { captureBeforeunload: {
value: function() { value: function () {
this.save(); this.save();
} }
} }
}); });
labs/architecture-examples/montage/ui/todo-view.reel/todo-view.html
View file @ d29ad7ee
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TodoView</title> <title>TodoView</title>
<script type="text/montage-serialization"> <script type="text/montage-serialization">
{ {
"owner": { "owner": {
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
"editInput": {"@": "editInput"} "editInput": {"@": "editInput"}
} }
}, },
"todoTitle": { "todoTitle": {
"prototype": "montage/ui/dynamic-text.reel", "prototype": "montage/ui/dynamic-text.reel",
"properties": { "properties": {
...@@ -22,7 +21,6 @@ ...@@ -22,7 +21,6 @@
"value": {"<-": "@owner.todo.title"} "value": {"<-": "@owner.todo.title"}
} }
}, },
"todoCompletedCheckbox": { "todoCompletedCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel", "prototype": "montage/ui/native/input-checkbox.reel",
"properties": { "properties": {
...@@ -32,7 +30,6 @@ ...@@ -32,7 +30,6 @@
"checked": {"<->": "@owner.todo.completed"} "checked": {"<->": "@owner.todo.completed"}
} }
}, },
"destroyButton": { "destroyButton": {
"prototype": "montage/ui/native/button.reel", "prototype": "montage/ui/native/button.reel",
"properties": { "properties": {
...@@ -46,7 +43,6 @@ ...@@ -46,7 +43,6 @@
} }
] ]
}, },
"editInput": { "editInput": {
"prototype": "montage/ui/native/input-text.reel", "prototype": "montage/ui/native/input-text.reel",
"properties": { "properties": {
...@@ -58,8 +54,8 @@ ...@@ -58,8 +54,8 @@
} }
} }
</script> </script>
</head> </head>
<body> <body>
<li data-montage-id="todoView"> <li data-montage-id="todoView">
<div class="view"> <div class="view">
<input data-montage-id="todoCompletedCheckbox" class="toggle" type="checkbox"> <input data-montage-id="todoCompletedCheckbox" class="toggle" type="checkbox">
...@@ -70,5 +66,5 @@ ...@@ -70,5 +66,5 @@
<input data-montage-id="edit-input" class="edit" value="Rule the web"> <input data-montage-id="edit-input" class="edit" value="Rule the web">
</form> </form>
</li> </li>
</body> </body>
</html> </html>
labs/architecture-examples/montage/ui/todo-view.reel/todo-view.js
View file @ d29ad7ee
var Montage = require("montage").Montage, var Montage = require('montage').Montage;
Component = require("montage/ui/component").Component; var Component = require('montage/ui/component').Component;
exports.TodoView = Montage.create(Component, { exports.TodoView = Montage.create(Component, {
todo: { todo: {
value: null value: null
}, },
...@@ -12,37 +11,37 @@ exports.TodoView = Montage.create(Component, { ...@@ -12,37 +11,37 @@ exports.TodoView = Montage.create(Component, {
}, },
didCreate: { didCreate: {
value: function() { value: function () {
Object.defineBinding(this, "isCompleted", { Object.defineBinding(this, 'isCompleted', {
boundObject: this, boundObject: this,
boundObjectPropertyPath: "todo.completed", boundObjectPropertyPath: 'todo.completed',
oneway: true oneway: true
}); });
} }
}, },
prepareForDraw: { prepareForDraw: {
value: function() { value: function () {
this.element.addEventListener("dblclick", this, false); this.element.addEventListener('dblclick', this, false);
this.element.addEventListener("blur", this, true); this.element.addEventListener('blur', this, true);
this.element.addEventListener("submit", this, false); this.element.addEventListener('submit', this, false);
} }
}, },
captureDestroyButtonAction: { captureDestroyButtonAction: {
value: function() { value: function () {
this.dispatchDestroy(); this.dispatchDestroy();
} }
}, },
dispatchDestroy: { dispatchDestroy: {
value: function() { value: function () {
this.dispatchEventNamed("destroyTodo", true, true, {todo: this.todo}) this.dispatchEventNamed('destroyTodo', true, true, {todo: this.todo})
} }
}, },
handleDblclick: { handleDblclick: {
value: function(evt) { value: function () {
this.isEditing = true; this.isEditing = true;
} }
}, },
...@@ -52,10 +51,10 @@ exports.TodoView = Montage.create(Component, { ...@@ -52,10 +51,10 @@ exports.TodoView = Montage.create(Component, {
}, },
isEditing: { isEditing: {
get: function() { get: function () {
return this._isEditing; return this._isEditing;
}, },
set: function(value) { set: function (value) {
if (value === this._isEditing) { if (value === this._isEditing) {
return; return;
} }
...@@ -70,10 +69,10 @@ exports.TodoView = Montage.create(Component, { ...@@ -70,10 +69,10 @@ exports.TodoView = Montage.create(Component, {
}, },
isCompleted: { isCompleted: {
get: function() { get: function () {
return this._isCompleted; return this._isCompleted;
}, },
set: function(value) { set: function (value) {
if (value === this._isCompleted) { if (value === this._isCompleted) {
return; return;
} }
...@@ -84,28 +83,27 @@ exports.TodoView = Montage.create(Component, { ...@@ -84,28 +83,27 @@ exports.TodoView = Montage.create(Component, {
}, },
captureBlur: { captureBlur: {
value: function(evt) { value: function (e) {
if (this.isEditing && this.editInput.element === evt.target) { if (this.isEditing && this.editInput.element === e.target) {
this._submitTitle(); this._submitTitle();
} }
} }
}, },
handleSubmit: { handleSubmit: {
value: function(evt) { value: function (e) {
if (this.isEditing) { if (this.isEditing) {
evt.preventDefault(); e.preventDefault();
this._submitTitle(); this._submitTitle();
} }
} }
}, },
_submitTitle: { _submitTitle: {
value: function() { value: function () {
var title = this.editInput.value.trim(); var title = this.editInput.value.trim();
if ("" === title) { if (title === '') {
this.dispatchDestroy(); this.dispatchDestroy();
} else { } else {
this.todo.title = title; this.todo.title = title;
...@@ -116,21 +114,20 @@ exports.TodoView = Montage.create(Component, { ...@@ -116,21 +114,20 @@ exports.TodoView = Montage.create(Component, {
}, },
draw: { draw: {
value: function() { value: function () {
if (this.isEditing) { if (this.isEditing) {
this.element.classList.add("editing"); this.element.classList.add('editing');
this.editInput.element.focus(); this.editInput.element.focus();
} else { } else {
this.element.classList.remove("editing"); this.element.classList.remove('editing');
this.editInput.element.blur(); this.editInput.element.blur();
} }
if (this.isCompleted) { if (this.isCompleted) {
this.element.classList.add("completed"); this.element.classList.add('completed');
} else { } else {
this.element.classList.remove("completed"); this.element.classList.remove('completed');
} }
} }
} }
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7