Skip to content

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

PlastronJS: Convert to tabs

parent 3d71ff07
Hide whitespace changes
Inline Side-by-side
Showing with 225 additions and 228 deletions
labs/architecture-examples/plastronjs/index.html
View file @ 76d18d5a
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PlastronJS • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
<meta charset="utf-8">
<title>PlastronJS • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
</header>
<section id="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</section>
<footer id="footer">
<span id="todo-count"><strong>0</strong> item left</span>
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" class="clear-completed">Clear completed</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/#!/RhysBB">RhysBB</a>).</p>
<p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
</footer>
<script src="../../../assets/base.js"></script>
<!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
<script src="js/compiled.js"></script>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
</header>
<section id="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</section>
<footer id="footer">
<span id="todo-count"><strong>0</strong> item left</span>
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" class="clear-completed">Clear completed</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Template by <a href="https://github.com/sindresorhus">Sindre Sorhus</a></p>
<p>Created by <a href="http://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/#!/RhysBB">RhysBB</a>)</p>
<p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="../../../assets/base.js"></script>
<!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
<script src="js/compiled.js"></script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/plastronjs/js/controllers/listcontrol.js
View file @ 76d18d5a
......@@ -17,8 +17,8 @@ goog.require('todomvc.todocontrol');
* @extends {mvc.Control}
*/
todomvc.listcontrol = function(list) {
goog.base(this, list);
this.filter_ = todomvc.listcontrol.Filter.ALL;
goog.base(this, list);
this.filter_ = todomvc.listcontrol.Filter.ALL;
};
goog.inherits(todomvc.listcontrol, mvc.Control);
......@@ -27,9 +27,9 @@ goog.inherits(todomvc.listcontrol, mvc.Control);
* @enum {Function}
*/
todomvc.listcontrol.Filter = {
ALL: function() {return true},
ACTIVE: function(model) {return !model.get('completed')},
COMPLETED: function(model) {return model.get('completed')}
ALL: function() {return true},
ACTIVE: function(model) {return !model.get('completed')},
COMPLETED: function(model) {return model.get('completed')}
};
......@@ -39,77 +39,77 @@ todomvc.listcontrol.Filter = {
* @inheritDoc
*/
todomvc.listcontrol.prototype.enterDocument = function() {
goog.base(this, 'enterDocument');
goog.base(this, 'enterDocument');
var list = /** @type {Object} */(this.getModel());
var list = /** @type {Object} */(this.getModel());
// create new model from text box
var input = this.getEls('input')[0];
this.on(goog.events.EventType.KEYUP, function(e) {
// create new model from text box
var input = this.getEls('input')[0];
this.on(goog.events.EventType.KEYUP, function(e) {
// on return get trimmed text
if (e.keyCode !== goog.events.KeyCodes.ENTER) return;
// on return get trimmed text
if (e.keyCode !== goog.events.KeyCodes.ENTER) return;
var text = goog.string.trim(input.value);
if (text === '') return;
var text = goog.string.trim(input.value);
if (text === '') return;
//create new model
list.newModel({'title': text});
//create new model
list.newModel({'title': text});
input.value = '';
input.value = '';
}, 'todo-entry');
}, 'todo-entry');
// clear completed
this.click(function(e) {
goog.array.forEach(list.get('completed'), function(model) {
model.dispose();
});
}, 'clear-completed');
// clear completed
this.click(function(e) {
goog.array.forEach(list.get('completed'), function(model) {
model.dispose();
});
}, 'clear-completed');
// toggle completed
this.click(function(e) {
var checked = e.target.checked;
goog.array.forEach(list.getModels(), function(model) {
model.set('completed', checked);
});
}, 'toggle-all');
// toggle completed
this.click(function(e) {
var checked = e.target.checked;
goog.array.forEach(list.getModels(), function(model) {
model.set('completed', checked);
});
}, 'toggle-all');
// refresh the view on changes that effect the models order
this.anyModelChange(function() {
this.refresh();
list.save();
}, this);
// refresh the view on changes that effect the models order
this.anyModelChange(function() {
this.refresh();
list.save();
}, this);
// hide/show footer and main body
this.modelChange(function() {
this.showMainFooter(!!list.getLength());
}, this);
this.showMainFooter(!!list.getLength());
// hide/show footer and main body
this.modelChange(function() {
this.showMainFooter(!!list.getLength());
}, this);
this.showMainFooter(!!list.getLength());
// update counts
this.bind('completed', function(completedModels) {
// update counts
this.bind('completed', function(completedModels) {
// update "left" count
soy.renderElement(goog.dom.getElement('todo-count'),
todomvc.templates.itemsLeft, {
left: list.getLength() - completedModels.length
});
// update "left" count
soy.renderElement(goog.dom.getElement('todo-count'),
todomvc.templates.itemsLeft, {
left: list.getLength() - completedModels.length
});
// update clear button
var clearButton = goog.dom.getElement('clear-completed');
goog.dom.setTextContent(clearButton,
'Clear completed (' + completedModels.length + ')');
goog.style.showElement(clearButton, completedModels.length);
// update clear button
var clearButton = goog.dom.getElement('clear-completed');
goog.dom.setTextContent(clearButton,
'Clear completed (' + completedModels.length + ')');
goog.style.showElement(clearButton, completedModels.length);
// update checkbox
var checkBox = this.getEls('.toggle-all')[0];
checkBox.checked = completedModels.length === list.getLength();
});
// update checkbox
var checkBox = this.getEls('.toggle-all')[0];
checkBox.checked = completedModels.length === list.getLength();
});
// get the saved todos
list.fetch();
// get the saved todos
list.fetch();
};
......@@ -119,11 +119,11 @@ todomvc.listcontrol.prototype.enterDocument = function() {
* @param {boolean=} opt_hide whether to hide the footer.
*/
todomvc.listcontrol.prototype.showMainFooter = function(opt_hide) {
var main = goog.dom.getElement('main');
var footer = goog.dom.getElementsByTagNameAndClass('footer')[0];
var main = goog.dom.getElement('main');
var footer = goog.dom.getElementsByTagNameAndClass('footer')[0];
goog.style.showElement(main, opt_hide);
goog.style.showElement(footer, opt_hide);
goog.style.showElement(main, opt_hide);
goog.style.showElement(footer, opt_hide);
};
......@@ -133,8 +133,8 @@ todomvc.listcontrol.prototype.showMainFooter = function(opt_hide) {
* @param {Function} filter to decide models returned.
*/
todomvc.listcontrol.prototype.setFilter = function(filter) {
this.filter_ = filter;
this.refresh();
this.filter_ = filter;
this.refresh();
};
......@@ -143,17 +143,17 @@ todomvc.listcontrol.prototype.setFilter = function(filter) {
*/
todomvc.listcontrol.prototype.refresh = function() {
// dispose and remove all the children.
this.forEachChild(function(child) {child.dispose();});
this.removeChildren(true);
// create new controls for the models
goog.array.forEach(this.getModel().getModels(this.filter_),
function(model) {
var newModelControl = new todomvc.todocontrol(model);
this.addChild(newModelControl);
newModelControl.render(goog.dom.getElement('todo-list'));
}, this);
// dispose and remove all the children.
this.forEachChild(function(child) {child.dispose();});
this.removeChildren(true);
// create new controls for the models
goog.array.forEach(this.getModel().getModels(this.filter_),
function(model) {
var newModelControl = new todomvc.todocontrol(model);
this.addChild(newModelControl);
newModelControl.render(goog.dom.getElement('todo-list'));
}, this);
};
labs/architecture-examples/plastronjs/js/controllers/todocontrol.js
View file @ 76d18d5a
......@@ -14,7 +14,7 @@ goog.require('todomvc.templates');
* @extends {mvc.Control}
*/
todomvc.todocontrol = function(model) {
goog.base(this, model);
goog.base(this, model);
};
goog.inherits(todomvc.todocontrol, mvc.Control);
......@@ -27,9 +27,9 @@ goog.inherits(todomvc.todocontrol, mvc.Control);
* @inheritDoc
*/
todomvc.todocontrol.prototype.createDom = function() {
var el = soy.renderAsFragment(todomvc.templates.todoItem, {
model: this.getModel().toJson()
}, null);
var el = soy.renderAsFragment(todomvc.templates.todoItem, {
model: this.getModel().toJson()
}, null);
this.setElementInternal(/** @type {Element} */(el));
};
......@@ -41,34 +41,34 @@ todomvc.todocontrol.prototype.createDom = function() {
*/
todomvc.todocontrol.prototype.enterDocument = function() {
var model = this.getModel();
// toggle complete
this.click(function(e) {
model.set('completed', e.target.checked);
}, 'toggle');
// delete the model
this.click(function(e) {
model.dispose();
}, 'destroy');
// dblclick to edit
this.on(goog.events.EventType.DBLCLICK, function(e) {
this.makeEditable(true);
}, 'view');
// save on edit
var inputEl = this.getEls('.edit')[0];
this.on(goog.events.EventType.KEYUP, function(e) {
if (e.keyCode === goog.events.KeyCodes.ENTER) {
model.set('title', inputEl.value);
}
}, 'edit');
this.on(goog.events.EventType.BLUR, function(e) {
model.set('title', inputEl.value);
}, 'edit');
var model = this.getModel();
// toggle complete
this.click(function(e) {
model.set('completed', e.target.checked);
}, 'toggle');
// delete the model
this.click(function(e) {
model.dispose();
}, 'destroy');
// dblclick to edit
this.on(goog.events.EventType.DBLCLICK, function(e) {
this.makeEditable(true);
}, 'view');
// save on edit
var inputEl = this.getEls('.edit')[0];
this.on(goog.events.EventType.KEYUP, function(e) {
if (e.keyCode === goog.events.KeyCodes.ENTER) {
model.set('title', inputEl.value);
}
}, 'edit');
this.on(goog.events.EventType.BLUR, function(e) {
model.set('title', inputEl.value);
}, 'edit');
};
......@@ -79,12 +79,12 @@ todomvc.todocontrol.prototype.enterDocument = function() {
*/
todomvc.todocontrol.prototype.makeEditable = function(editable) {
var inputEl = this.getEls('.edit')[0];
var inputEl = this.getEls('.edit')[0];
goog.dom.classes.enable(this.getElement(), 'editing', editable);
if (editable) {
inputEl.value = this.getModel().get('title');
inputEl.select();
}
goog.dom.classes.enable(this.getElement(), 'editing', editable);
if (editable) {
inputEl.value = this.getModel().get('title');
inputEl.select();
}
};
labs/architecture-examples/plastronjs/js/models/listmodel.js
View file @ 76d18d5a
......@@ -11,23 +11,23 @@ goog.require('todomvc.todomodel');
*/
todomvc.listmodel = function() {
var todosSchema = {
'completed': {
get: function() {
return this.getModels(function(mod) {
return mod.get('completed');
});
},
models: true
}
};
goog.base(this, {
'id': 'todos-plastronjs',
'sync': new todomvc.listsync(),
'schema': todosSchema,
'modelType': todomvc.todomodel
});
var todosSchema = {
'completed': {
get: function() {
return this.getModels(function(mod) {
return mod.get('completed');
});
},
models: true
}
};
goog.base(this, {
'id': 'todos-plastronjs',
'sync': new todomvc.listsync(),
'schema': todosSchema,
'modelType': todomvc.todomodel
});
};
goog.inherits(todomvc.listmodel, mvc.Collection);
......@@ -36,8 +36,8 @@ goog.inherits(todomvc.listmodel, mvc.Collection);
* @return {Object} todos as json.
*/
todomvc.listmodel.prototype.toJson = function() {
return goog.array.map(this.getModels(), function(mod) {
return mod.toJson();
});
return goog.array.map(this.getModels(), function(mod) {
return mod.toJson();
});
};
labs/architecture-examples/plastronjs/js/models/todomodel.js
View file @ 76d18d5a
......@@ -12,17 +12,17 @@ goog.require('mvc.Model.ValidateError');
* @extends {mvc.Model}
*/
todomvc.todomodel = function(opt_options) {
goog.base(this, opt_options);
goog.base(this, opt_options);
this.setter('title', function(title) {
var updated = goog.string.trim(title);
if (!updated.length)
throw new mvc.Model.ValidateError('null string');
return updated;
});
this.setter('title', function(title) {
var updated = goog.string.trim(title);
if (!updated.length)
throw new mvc.Model.ValidateError('null string');
return updated;
});
this.errorHandler(function() {
this.dispose();
});
this.errorHandler(function() {
this.dispose();
});
};
goog.inherits(todomvc.todomodel, mvc.Model);
labs/architecture-examples/plastronjs/js/sync/listsync.js
View file @ 76d18d5a
......@@ -9,7 +9,7 @@ goog.require('mvc.LocalSync');
* @extends {mvc.LocalSync}
*/
todomvc.listsync = function() {
goog.base(this);
goog.base(this);
};
goog.inherits(todomvc.listsync, mvc.LocalSync);
......@@ -18,13 +18,13 @@ goog.inherits(todomvc.listsync, mvc.LocalSync);
* @inheritDoc
*/
todomvc.listsync.prototype.read = function(model, opt_callback) {
var id = /** @type {string} */(model.get('id'));
var todos = this.store_.get(id) || [];
goog.array.forEach(/** @type {Array} */(todos),
function(todo) {
model.newModel(todo, true);
});
model.change();
var id = /** @type {string} */(model.get('id'));
var todos = this.store_.get(id) || [];
goog.array.forEach(/** @type {Array} */(todos),
function(todo) {
model.newModel(todo, true);
});
model.change();
};
labs/architecture-examples/plastronjs/plovr.json
View file @ 76d18d5a
{
"id" : "todomvc",
"inputs" : "js/app.js",
"paths" : ["js/","template/"],
"output-wrapper" : "(function(){%output%})();",
"mode" : "ADVANCED",
"level" : "VERBOSE",
"output-file" : "js/compiled.js",
"define" : {
"goog.LOCALE": "en_GB"
},
"checks": {
// Unfortunately, the Closure Library violates these in many places.
// "accessControls": "ERROR",
// "visibility": "ERROR"
"checkRegExp": "WARNING",
"checkTypes": "WARNING",
"checkVars": "WARNING",
"deprecated": "WARNING",
"fileoverviewTags": "WARNING",
"invalidCasts": "WARNING",
"missingProperties": "WARNING",
"nonStandardJsDocs": "WARNING",
"undefinedVars": "WARNING"
"id": "todomvc",
"inputs": "js/app.js",
"paths": ["js/", "template/"],
"output-wrapper": "(function(){%output%})();",
"mode": "ADVANCED",
"level": "VERBOSE",
"output-file": "js/compiled.js",
"define": {
"goog.LOCALE": "en_GB"
},
"checks": {
"checkRegExp": "WARNING",
"checkTypes": "WARNING",
"checkVars": "WARNING",
"deprecated": "WARNING",
"fileoverviewTags": "WARNING",
"invalidCasts": "WARNING",
"missingProperties": "WARNING",
"nonStandardJsDocs": "WARNING",
"undefinedVars": "WARNING"
}
}
}
\ No newline at end of file
labs/architecture-examples/plastronjs/template/templates.soy
View file @ 76d18d5a
......@@ -4,19 +4,19 @@
* @param model
*/
{template .todoItem}
<li {if $model['completed']}class="completed"{/if}>
<div class="view">
<input class="toggle" type="checkbox" {if $model['completed']}checked{/if}>
<label>{$model['title']}</label>
<button class="destroy"></button>
</div>
<input class="edit" type="text" value="">
</li>
<li {if $model['completed']}class="completed"{/if}>
<div class="view">
<input class="toggle" type="checkbox" {if $model['completed']}checked{/if}>
<label>{$model['title']}</label>
<button class="destroy"></button>
</div>
<input class="edit" type="text" value="">
</li>
{/template}
/**
* @param left
*/
{template .itemsLeft}
<strong>{$left}</strong> item{if $left != 1}s{/if} left
{/template}
<strong>{$left}</strong> item{if $left != 1}s{/if} left
{/template}
\ No newline at end of file
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