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, {
initWithTitle: {
value: function(title) {
value: function (title) {
this.title = title;
return this;
}
},
title: {
value: null
},
completed: {
value: false
}
});
labs/architecture-examples/montage/index.html
View file @ d29ad7ee
<!doctype html>
<html lang=en id=montage-todomvc> <head> <meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>Montage • TodoMVC</title>
<link rel=stylesheet href="../../../assets/base.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 type="text/montage-serialization">{"owner":{"prototype":"montage/ui/loader.reel"}}</script>
</head>
<html lang="en" id="montage-todomvc">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>Montage • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.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 type="text/montage-serialization">
{
"owner": {
"prototype": "montage/ui/loader.reel"
}
}
</script>
</head>
<body></body>
</html>
labs/architecture-examples/montage/ui/main.reel/item-count-converter.js
View file @ d29ad7ee
var Montage = require("montage").Montage,
Converter = require("montage/core/converter/converter").Converter;
var Montage = require('montage').Montage;
var Converter = require('montage/core/converter/converter').Converter;
exports.ItemCountConverter = Montage.create(Converter, {
convert: {
value: function(itemCount) {
return (1 === itemCount) ? "item" : "items";
value: function (itemCount) {
return itemCount === 1 ? 'item' : 'items';
}
}
});
labs/architecture-examples/montage/ui/main.reel/main.css
View file @ d29ad7ee
#main,
#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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "mainComponent"},
"newTodoForm": {"#": "newTodoForm"},
"newTodoInput": {"#": "new-todo"}
}
},
"todoRepetition": {
"prototype": "montage/ui/repetition.reel",
"properties": {
"element": {"#": "todo-list"}
},
"bindings": {
"contentController": {"<-": "@owner.todoListController"}
}
},
"todoView": {
"prototype": "ui/todo-view.reel",
"properties": {
"element": {"#": "todoView"}
},
"bindings": {
"todo": {"<-": "@todoRepetition.objectAtCurrentIteration"}
}
},
"main": {
"prototype": "montage/ui/dynamic-element.reel",
"properties": {
"element": {"#": "main"}
},
"bindings": {
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
}
},
"footer": {
"prototype": "montage/ui/dynamic-element.reel",
"properties": {
"element": {"#": "footer"}
},
"bindings": {
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
}
},
"toggleAllCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel",
"properties": {
"element": {"#": "toggle-all"}
},
"bindings": {
"checked": {"<->": "@owner.allCompleted"}
}
},
"todoCount": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "todo-count"}
},
"bindings": {
"value": {"<-": "@owner.todosLeft.count()"}
}
},
"itemCountConverter": {
"prototype": "ui/main.reel/item-count-converter"
},
"todoCountWording": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "todo-count-wording"}
},
"bindings": {
"value": {"<-": "@owner.todosLeft.count()", "converter": {"@": "itemCountConverter"}}
}
},
"completedCount": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "completed-count"}
},
"bindings": {
"value": {"<-": "@owner.completedTodos.count()"}
}
},
"clearCompletedContainer": {
"prototype": "montage/ui/dynamic-element.reel",
"properties": {
"element": {"#": "clear-completed-container"}
},
"bindings": {
"classList.visible": {"<-": "@owner.completedTodos.count()"}
}
},
"clearCompletedButton": {
"prototype": "montage/ui/native/button.reel",
"properties": {
"element": {"#": "clear-completed"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"},
"capture": false
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="main.css">
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "mainComponent"},
"newTodoForm": {"#": "newTodoForm"},
"newTodoInput": {"#": "new-todo"}
}
},
"todoRepetition": {
"prototype": "montage/ui/repetition.reel",
"properties": {
"element": {"#": "todo-list"}
},
"bindings": {
"contentController": {"<-": "@owner.todoListController"}
}
},
"todoView": {
"prototype": "ui/todo-view.reel",
"properties": {
"element": {"#": "todoView"}
},
"bindings": {
"todo": {"<-": "@todoRepetition.objectAtCurrentIteration"}
}
},
"main": {
"prototype": "montage/ui/dynamic-element.reel",
"properties": {
"element": {"#": "main"}
},
"bindings": {
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
}
},
"footer": {
"prototype": "montage/ui/dynamic-element.reel",
"properties": {
"element": {"#": "footer"}
},
"bindings": {
"classList.visible": {"<-": "@owner.todoListController.organizedObjects.0"}
}
},
"toggleAllCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel",
"properties": {
"element": {"#": "toggle-all"}
},
"bindings": {
"checked": {"<->": "@owner.allCompleted"}
}
},
"todoCount": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "todo-count"}
},
"bindings": {
"value": {"<-": "@owner.todosLeft.count()"}
}
},
"itemCountConverter": {
"prototype": "ui/main.reel/item-count-converter"
},
"todoCountWording": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "todo-count-wording"}
},
"bindings": {
"value": {"<-": "@owner.todosLeft.count()", "converter": {"@": "itemCountConverter"}}
}
},
"completedCount": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "completed-count"}
},
"bindings": {
"value": {"<-": "@owner.completedTodos.count()"}
}
},
"clearCompletedContainer": {
"prototype": "montage/ui/dynamic-element.reel",
"properties": {
"element": {"#": "clear-completed-container"}
},
"bindings": {
"classList.visible": {"<-": "@owner.completedTodos.count()"}
}
},
"clearCompletedButton": {
"prototype": "montage/ui/native/button.reel",
"properties": {
"element": {"#": "clear-completed"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"},
"capture": false
}
]
}
]
}
}
</script>
</head>
<body>
<div data-montage-id="mainComponent">
<section id="todoapp">
}
</script>
</head>
<body>
<div data-montage-id="mainComponent">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<form data-montage-id="newTodoForm">
......@@ -156,6 +143,6 @@
<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>
</footer>
</div>
</body>
</div>
</body>
</html>
labs/architecture-examples/montage/ui/main.reel/main.js
View file @ d29ad7ee
var Montage = require("montage").Montage,
Component = require("montage/ui/component").Component,
ArrayController = require("montage/ui/controller/array-controller").ArrayController,
Todo = require("core/todo").Todo,
Serializer = require("montage/core/serializer").Serializer,
Deserializer = require("montage/core/deserializer").Deserializer,
LOCAL_STORAGE_KEY = "todos-montage";
var Montage = require('montage').Montage;
var Component = require('montage/ui/component').Component;
var ArrayController = require('montage/ui/controller/array-controller').ArrayController;
var Todo = require('core/todo').Todo;
var Serializer = require('montage/core/serializer').Serializer;
var Deserializer = require('montage/core/deserializer').Deserializer;
var LOCAL_STORAGE_KEY = 'todos-montage';
exports.Main = Montage.create(Component, {
newTodoForm: {
value: null
},
......@@ -22,28 +21,29 @@ exports.Main = Montage.create(Component, {
},
didCreate: {
value: function() {
value: function () {
this.todoListController = ArrayController.create();
this.load();
}
},
load: {
value: function() {
value: function () {
if (localStorage) {
var todoSerialization = localStorage.getItem(LOCAL_STORAGE_KEY);
if (todoSerialization) {
var deserializer = Deserializer.create(),
self = this;
var deserializer = Deserializer.create();
var self = this;
try {
deserializer.initWithStringAndRequire(todoSerialization, require).deserializeObject(function(todos) {
deserializer.initWithStringAndRequire(todoSerialization, require).deserializeObject(function (todos) {
self.todoListController.initWithContent(todos);
}, require);
} catch(e) {
console.error("Could not load saved tasks.");
console.debug("Could not deserialize", todoSerialization);
console.log(e.stack);
} catch (err) {
console.error('Could not load saved tasks.');
console.debug('Could not deserialize', todoSerialization);
console.log(err.stack);
}
}
}
......@@ -51,10 +51,10 @@ exports.Main = Montage.create(Component, {
},
save: {
value: function() {
value: function () {
if (localStorage) {
var todos = this.todoListController.content,
serializer = Serializer.create().initWithRequire(require);
var todos = this.todoListController.content;
var serializer = Serializer.create().initWithRequire(require);
localStorage.setItem(LOCAL_STORAGE_KEY, serializer.serializeObject(todos));
}
......@@ -62,29 +62,27 @@ exports.Main = Montage.create(Component, {
},
prepareForDraw: {
value: function() {
this.newTodoForm.identifier = "newTodoForm";
this.newTodoForm.addEventListener("submit", this, false);
this.addEventListener("destroyTodo", this, true);
window.addEventListener("beforeunload", this, true);
value: function () {
this.newTodoForm.identifier = 'newTodoForm';
this.newTodoForm.addEventListener('submit', this, false);
this.addEventListener('destroyTodo', this, true);
window.addEventListener('beforeunload', this, true);
}
},
captureDestroyTodo: {
value: function(evt) {
this.destroyTodo(evt.detail.todo);
value: function (e) {
this.destroyTodo(e.detail.todo);
}
},
handleNewTodoFormSubmit: {
value: function(evt) {
evt.preventDefault();
value: function (e) {
e.preventDefault();
var title = this.newTodoInput.value.trim();
if ("" === title) {
if (title === '') {
return;
}
......@@ -94,7 +92,7 @@ exports.Main = Montage.create(Component, {
},
createTodo: {
value: function(title) {
value: function (title) {
var todo = Todo.create().initWithTitle(title);
this.todoListController.addObjects(todo);
return todo;
......@@ -102,31 +100,30 @@ exports.Main = Montage.create(Component, {
},
destroyTodo: {
value: function(todo) {
value: function (todo) {
this.todoListController.removeObjects(todo);
return todo;
}
},
allCompleted: {
dependencies: ["todoListController.organizedObjects.completed"],
get: function() {
return this.todoListController.organizedObjects.getProperty("completed").all();
dependencies: ['todoListController.organizedObjects.completed'],
get: function () {
return this.todoListController.organizedObjects.getProperty('completed').all();
},
set: function(value) {
this.todoListController.organizedObjects.forEach(function(member) {
set: function (value) {
this.todoListController.organizedObjects.forEach(function (member) {
member.completed = value;
});
}
},
todosLeft: {
dependencies: ["todoListController.organizedObjects.completed"],
get: function() {
dependencies: ['todoListController.organizedObjects.completed'],
get: function () {
if (this.todoListController.organizedObjects) {
var todos = this.todoListController.organizedObjects;
return todos.filter(function(member) {
return todos.filter(function (member) {
return !member.completed;
});
}
......@@ -134,12 +131,11 @@ exports.Main = Montage.create(Component, {
},
completedTodos: {
dependencies: ["todoListController.organizedObjects.completed"],
get: function() {
dependencies: ['todoListController.organizedObjects.completed'],
get: function () {
if (this.todoListController.organizedObjects) {
var todos = this.todoListController.organizedObjects;
return todos.filter(function(member) {
return todos.filter(function (member) {
return member.completed;
});
}
......@@ -147,8 +143,8 @@ exports.Main = Montage.create(Component, {
},
handleClearCompletedButtonAction: {
value: function(evt) {
var completedTodos = this.todoListController.organizedObjects.filter(function(todo) {
value: function () {
var completedTodos = this.todoListController.organizedObjects.filter(function (todo) {
return todo.completed;
});
......@@ -159,9 +155,8 @@ exports.Main = Montage.create(Component, {
},
captureBeforeunload: {
value: function() {
value: function () {
this.save();
}
}
});
labs/architecture-examples/montage/ui/todo-view.reel/todo-view.html
View file @ d29ad7ee
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TodoView</title>
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "todoView"},
"editInput": {"@": "editInput"}
}
},
"todoTitle": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "todoTitle"}
},
"bindings": {
"value": {"<-": "@owner.todo.title"}
}
},
"todoCompletedCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel",
"properties": {
"element": {"#": "todoCompletedCheckbox"}
},
"bindings": {
"checked": {"<->": "@owner.todo.completed"}
}
},
"destroyButton": {
"prototype": "montage/ui/native/button.reel",
"properties": {
"element": {"#": "destroyButton"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"},
"capture": true
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TodoView</title>
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "todoView"},
"editInput": {"@": "editInput"}
}
},
"todoTitle": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "todoTitle"}
},
"bindings": {
"value": {"<-": "@owner.todo.title"}
}
},
"todoCompletedCheckbox": {
"prototype": "montage/ui/native/input-checkbox.reel",
"properties": {
"element": {"#": "todoCompletedCheckbox"}
},
"bindings": {
"checked": {"<->": "@owner.todo.completed"}
}
},
"destroyButton": {
"prototype": "montage/ui/native/button.reel",
"properties": {
"element": {"#": "destroyButton"}
},
"listeners": [
{
"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>
<body>
<li data-montage-id="todoView">
<div class="view">
<input data-montage-id="todoCompletedCheckbox" class="toggle" type="checkbox">
<label data-montage-id="todoTitle"></label>
<button data-montage-id="destroyButton" class="destroy"></button>
</div>
<form data-montage-id="edit">
<input data-montage-id="edit-input" class="edit" value="Rule the web">
</form>
</li>
</body>
</script>
</head>
<body>
<li data-montage-id="todoView">
<div class="view">
<input data-montage-id="todoCompletedCheckbox" class="toggle" type="checkbox">
<label data-montage-id="todoTitle"></label>
<button data-montage-id="destroyButton" class="destroy"></button>
</div>
<form data-montage-id="edit">
<input data-montage-id="edit-input" class="edit" value="Rule the web">
</form>
</li>
</body>
</html>
labs/architecture-examples/montage/ui/todo-view.reel/todo-view.js
View file @ d29ad7ee
var Montage = require("montage").Montage,
Component = require("montage/ui/component").Component;
var Montage = require('montage').Montage;
var Component = require('montage/ui/component').Component;
exports.TodoView = Montage.create(Component, {
todo: {
value: null
},
......@@ -12,37 +11,37 @@ exports.TodoView = Montage.create(Component, {
},
didCreate: {
value: function() {
Object.defineBinding(this, "isCompleted", {
value: function () {
Object.defineBinding(this, 'isCompleted', {
boundObject: this,
boundObjectPropertyPath: "todo.completed",
boundObjectPropertyPath: 'todo.completed',
oneway: true
});
}
},
prepareForDraw: {
value: function() {
this.element.addEventListener("dblclick", this, false);
this.element.addEventListener("blur", this, true);
this.element.addEventListener("submit", this, false);
value: function () {
this.element.addEventListener('dblclick', this, false);
this.element.addEventListener('blur', this, true);
this.element.addEventListener('submit', this, false);
}
},
captureDestroyButtonAction: {
value: function() {
value: function () {
this.dispatchDestroy();
}
},
dispatchDestroy: {
value: function() {
this.dispatchEventNamed("destroyTodo", true, true, {todo: this.todo})
value: function () {
this.dispatchEventNamed('destroyTodo', true, true, {todo: this.todo})
}
},
handleDblclick: {
value: function(evt) {
value: function () {
this.isEditing = true;
}
},
......@@ -52,10 +51,10 @@ exports.TodoView = Montage.create(Component, {
},
isEditing: {
get: function() {
get: function () {
return this._isEditing;
},
set: function(value) {
set: function (value) {
if (value === this._isEditing) {
return;
}
......@@ -70,10 +69,10 @@ exports.TodoView = Montage.create(Component, {
},
isCompleted: {
get: function() {
get: function () {
return this._isCompleted;
},
set: function(value) {
set: function (value) {
if (value === this._isCompleted) {
return;
}
......@@ -84,28 +83,27 @@ exports.TodoView = Montage.create(Component, {
},
captureBlur: {
value: function(evt) {
if (this.isEditing && this.editInput.element === evt.target) {
value: function (e) {
if (this.isEditing && this.editInput.element === e.target) {
this._submitTitle();
}
}
},
handleSubmit: {
value: function(evt) {
value: function (e) {
if (this.isEditing) {
evt.preventDefault();
e.preventDefault();
this._submitTitle();
}
}
},
_submitTitle: {
value: function() {
value: function () {
var title = this.editInput.value.trim();
if ("" === title) {
if (title === '') {
this.dispatchDestroy();
} else {
this.todo.title = title;
......@@ -116,21 +114,20 @@ exports.TodoView = Montage.create(Component, {
},
draw: {
value: function() {
value: function () {
if (this.isEditing) {
this.element.classList.add("editing");
this.element.classList.add('editing');
this.editInput.element.focus();
} else {
this.element.classList.remove("editing");
this.element.classList.remove('editing');
this.editInput.element.blur();
}
if (this.isCompleted) {
this.element.classList.add("completed");
this.element.classList.add('completed');
} 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