Skip to content

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

Montage - code style

parent cb03b745
Hide 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">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <head>
<title>Montage • TodoMVC</title> <meta charset="utf-8">
<link rel=stylesheet href="../../../assets/base.css"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<link rel=stylesheet href="assets/app.css"> <title>Montage • TodoMVC</title>
<script src=bundle-0-d67ccde.js data-montage="packages/montage@4763f06/" data-montage-hash=4763f06 data-application-hash=1156f40></script> <link rel="stylesheet" href="../../../assets/base.css">
<script type="text/montage-serialization">{"owner":{"prototype":"montage/ui/loader.reel"}}</script> <link rel="stylesheet" href="assets/app.css">
</head> <script src="bundle-0-d67ccde.js"
data-montage="packages/montage@4763f06/"
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": { "properties": {
"properties": { "element": {"#": "mainComponent"},
"element": {"#": "mainComponent"}, "newTodoForm": {"#": "newTodoForm"},
"newTodoForm": {"#": "newTodoForm"}, "newTodoInput": {"#": "new-todo"}
"newTodoInput": {"#": "new-todo"} }
} },
}, "todoRepetition": {
"prototype": "montage/ui/repetition.reel",
"todoRepetition": { "properties": {
"prototype": "montage/ui/repetition.reel", "element": {"#": "todo-list"}
"properties": { },
"element": {"#": "todo-list"} "bindings": {
}, "contentController": {"<-": "@owner.todoListController"}
"bindings": { }
"contentController": {"<-": "@owner.todoListController"} },
} "todoView": {
}, "prototype": "ui/todo-view.reel",
"properties": {
"todoView": { "element": {"#": "todoView"}
"prototype": "ui/todo-view.reel", },
"properties": { "bindings": {
"element": {"#": "todoView"} "todo": {"<-": "@todoRepetition.objectAtCurrentIteration"}
}, }
"bindings": { },
"todo": {"<-": "@todoRepetition.objectAtCurrentIteration"} "main": {
} "prototype": "montage/ui/dynamic-element.reel",
}, "properties": {
"element": {"#": "main"}
"main": { },
"prototype": "montage/ui/dynamic-element.reel", "bindings": {
"properties": { "classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
"element": {"#": "main"} }
}, },
"bindings": { "footer": {
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"} "prototype": "montage/ui/dynamic-element.reel",
} "properties": {
}, "element": {"#": "footer"}
},
"footer": { "bindings": {
"prototype": "montage/ui/dynamic-element.reel", "classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
"properties": { }
"element": {"#": "footer"} },
}, "toggleAllCheckbox": {
"bindings": { "prototype": "montage/ui/native/input-checkbox.reel",
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"} "properties": {
} "element": {"#": "toggle-all"}
}, },
"bindings": {
"toggleAllCheckbox": { "checked": {"<->": "@owner.allCompleted"}
"prototype": "montage/ui/native/input-checkbox.reel", }
"properties": { },
"element": {"#": "toggle-all"} "todoCount": {
}, "prototype": "montage/ui/dynamic-text.reel",
"bindings": { "properties": {
"checked": {"<->": "@owner.allCompleted"} "element": {"#": "todo-count"}
} },
}, "bindings": {
"value": {"<-": "@owner.todosLeft.count()"}
"todoCount": { }
"prototype": "montage/ui/dynamic-text.reel", },
"properties": { "itemCountConverter": {
"element": {"#": "todo-count"} "prototype": "ui/main.reel/item-count-converter"
}, },
"bindings": { "todoCountWording": {
"value": {"<-": "@owner.todosLeft.count()"} "prototype": "montage/ui/dynamic-text.reel",
} "properties": {
}, "element": {"#": "todo-count-wording"}
},
"itemCountConverter": { "bindings": {
"prototype": "ui/main.reel/item-count-converter" "value": {"<-": "@owner.todosLeft.count()", "converter": {"@": "itemCountConverter"}}
}, }
},
"todoCountWording": { "completedCount": {
"prototype": "montage/ui/dynamic-text.reel", "prototype": "montage/ui/dynamic-text.reel",
"properties": { "properties": {
"element": {"#": "todo-count-wording"} "element": {"#": "completed-count"}
}, },
"bindings": { "bindings": {
"value": {"<-": "@owner.todosLeft.count()", "converter": {"@": "itemCountConverter"}} "value": {"<-": "@owner.completedTodos.count()"}
} }
}, },
"clearCompletedContainer": {
"completedCount": { "prototype": "montage/ui/dynamic-element.reel",
"prototype": "montage/ui/dynamic-text.reel", "properties": {
"properties": { "element": {"#": "clear-completed-container"}
"element": {"#": "completed-count"} },
}, "bindings": {
"bindings": { "classList.visible": {"<-": "@owner.completedTodos.count()"}
"value": {"<-": "@owner.completedTodos.count()"} }
} },
}, "clearCompletedButton": {
"prototype": "montage/ui/native/button.reel",
"clearCompletedContainer": { "properties": {
"prototype": "montage/ui/dynamic-element.reel", "element": {"#": "clear-completed"}
"properties": { },
"element": {"#": "clear-completed-container"} "listeners": [
}, {
"bindings": { "type": "action",
"classList.visible": {"<-": "@owner.completedTodos.count()"} "listener": {"@": "owner"},
} "capture": false
}, }
]
"clearCompletedButton": {
"prototype": "montage/ui/native/button.reel",
"properties": {
"element": {"#": "clear-completed"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"},
"capture": false
} }
] }
} </script>
} </head>
</script> <body>
</head> <div data-montage-id="mainComponent">
<body> <section id="todoapp">
<div data-montage-id="mainComponent">
<section id="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
<form data-montage-id="newTodoForm"> <form data-montage-id="newTodoForm">
...@@ -156,6 +143,6 @@ ...@@ -156,6 +143,6 @@
<p>Source available at <a href="http://github.com/mczepiel/montage-todomvc">Montage-TodoMVC</a> </p> <p>Source available at <a href="http://github.com/mczepiel/montage-todomvc">Montage-TodoMVC</a> </p>
<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">
<title>TodoView</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TodoView</title>
<script type="text/montage-serialization"> <script type="text/montage-serialization">
{ {
"owner": { "owner": {
"properties": { "properties": {
"element": {"#": "todoView"}, "element": {"#": "todoView"},
"editInput": {"@": "editInput"} "editInput": {"@": "editInput"}
} }
}, },
"todoTitle": {
"todoTitle": { "prototype": "montage/ui/dynamic-text.reel",
"prototype": "montage/ui/dynamic-text.reel", "properties": {
"properties": { "element": {"#": "todoTitle"}
"element": {"#": "todoTitle"} },
}, "bindings": {
"bindings": { "value": {"<-": "@owner.todo.title"}
"value": {"<-": "@owner.todo.title"} }
} },
}, "todoCompletedCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel",
"todoCompletedCheckbox": { "properties": {
"prototype": "montage/ui/native/input-checkbox.reel", "element": {"#": "todoCompletedCheckbox"}
"properties": { },
"element": {"#": "todoCompletedCheckbox"} "bindings": {
}, "checked": {"<->": "@owner.todo.completed"}
"bindings": { }
"checked": {"<->": "@owner.todo.completed"} },
} "destroyButton": {
}, "prototype": "montage/ui/native/button.reel",
"properties": {
"destroyButton": { "element": {"#": "destroyButton"}
"prototype": "montage/ui/native/button.reel", },
"properties": { "listeners": [
"element": {"#": "destroyButton"} {
}, "type": "action",
"listeners": [ "listener": {"@": "owner"},
{ "capture": true
"type": "action", }
"listener": {"@": "owner"}, ]
"capture": true },
"editInput": {
"prototype": "montage/ui/native/input-text.reel",
"properties": {
"element": {"#": "edit-input"}
},
"bindings": {
"value": {"<-": "@owner.todo.title"}
}
} }
]
},
"editInput": {
"prototype": "montage/ui/native/input-text.reel",
"properties": {
"element": {"#": "edit-input"}
},
"bindings": {
"value": {"<-": "@owner.todo.title"}
} }
} </script>
} </head>
</script> <body>
</head> <li data-montage-id="todoView">
<body> <div class="view">
<li data-montage-id="todoView"> <input data-montage-id="todoCompletedCheckbox" class="toggle" type="checkbox">
<div class="view"> <label data-montage-id="todoTitle"></label>
<input data-montage-id="todoCompletedCheckbox" class="toggle" type="checkbox"> <button data-montage-id="destroyButton" class="destroy"></button>
<label data-montage-id="todoTitle"></label> </div>
<button data-montage-id="destroyButton" class="destroy"></button> <form data-montage-id="edit">
</div> <input data-montage-id="edit-input" class="edit" value="Rule the web">
<form data-montage-id="edit"> </form>
<input data-montage-id="edit-input" class="edit" value="Rule the web"> </li>
</form> </body>
</li>
</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