Skip to content

Commit 76d18d5

Browse files
sindresorhussindresorhus
committed
PlastronJS: Convert to tabs
1 parent 3d71ff0 commit 76d18d5

File tree

8 files changed

+225
-228
lines changed

8 files changed

+225
-228
lines changed

‎labs/architecture-examples/plastronjs/index.html

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,49 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>PlastronJS • TodoMVC</title>
6-
<link rel="stylesheet" href="../../../assets/base.css">
7-
<!--[if IE]>
8-
<script src="http://github.com/assets/ie.js"></script>
9-
<![endif]-->
4+
<meta charset="utf-8">
5+
<title>PlastronJS • TodoMVC</title>
6+
<link rel="stylesheet" href="../../../assets/base.css">
7+
<!--[if IE]>
8+
<script src="http://github.com/assets/ie.js"></script>
9+
<![endif]-->
1010
</head>
1111
<body>
12-
<section id="todoapp">
13-
<header id="header">
14-
<h1>todos</h1>
15-
<input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
16-
</header>
17-
<section id="main">
18-
<input id="toggle-all" class="toggle-all" type="checkbox">
19-
<label for="toggle-all">Mark all as complete</label>
20-
<ul id="todo-list"></ul>
21-
</section>
22-
<footer id="footer">
23-
<span id="todo-count"><strong>0</strong> item left</span>
24-
<ul id="filters">
25-
<li>
26-
<a class="selected" href="#/">All</a>
27-
</li>
28-
<li>
29-
<a href="#/active">Active</a>
30-
</li>
31-
<li>
32-
<a href="#/completed">Completed</a>
33-
</li>
34-
</ul>
35-
<button id="clear-completed" class="clear-completed">Clear completed</button>
36-
</footer>
37-
</section>
38-
<footer id="info">
39-
<p>Double-click to edit a todo</p>
40-
<p>Created by <a href="http://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/#!/RhysBB">RhysBB</a>).</p>
41-
<p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</a></p>
42-
<p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
43-
</footer>
44-
<script src="../../../assets/base.js"></script>
45-
<!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
46-
<script src="js/compiled.js"></script>
12+
<section id="todoapp">
13+
<header id="header">
14+
<h1>todos</h1>
15+
<input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
16+
</header>
17+
<section id="main">
18+
<input id="toggle-all" class="toggle-all" type="checkbox">
19+
<label for="toggle-all">Mark all as complete</label>
20+
<ul id="todo-list"></ul>
21+
</section>
22+
<footer id="footer">
23+
<span id="todo-count"><strong>0</strong> item left</span>
24+
<ul id="filters">
25+
<li>
26+
<a class="selected" href="#/">All</a>
27+
</li>
28+
<li>
29+
<a href="#/active">Active</a>
30+
</li>
31+
<li>
32+
<a href="#/completed">Completed</a>
33+
</li>
34+
</ul>
35+
<button id="clear-completed" class="clear-completed">Clear completed</button>
36+
</footer>
37+
</section>
38+
<footer id="info">
39+
<p>Double-click to edit a todo</p>
40+
<p>Template by <a href="https://github.com/sindresorhus">Sindre Sorhus</a></p>
41+
<p>Created by <a href="http://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/#!/RhysBB">RhysBB</a>)</p>
42+
<p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</a></p>
43+
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
44+
</footer>
45+
<script src="../../../assets/base.js"></script>
46+
<!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
47+
<script src="js/compiled.js"></script>
4748
</body>
4849
</html>

‎labs/architecture-examples/plastronjs/js/controllers/listcontrol.js

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ goog.require('todomvc.todocontrol');
1717
* @extends {mvc.Control}
1818
*/
1919
todomvc.listcontrol = function(list) {
20-
goog.base(this, list);
21-
this.filter_ = todomvc.listcontrol.Filter.ALL;
20+
goog.base(this, list);
21+
this.filter_ = todomvc.listcontrol.Filter.ALL;
2222
};
2323
goog.inherits(todomvc.listcontrol, mvc.Control);
2424

@@ -27,9 +27,9 @@ goog.inherits(todomvc.listcontrol, mvc.Control);
2727
* @enum {Function}
2828
*/
2929
todomvc.listcontrol.Filter = {
30-
ALL: function() {return true},
31-
ACTIVE: function(model) {return !model.get('completed')},
32-
COMPLETED: function(model) {return model.get('completed')}
30+
ALL: function() {return true},
31+
ACTIVE: function(model) {return !model.get('completed')},
32+
COMPLETED: function(model) {return model.get('completed')}
3333
};
3434

3535

@@ -39,77 +39,77 @@ todomvc.listcontrol.Filter = {
3939
* @inheritDoc
4040
*/
4141
todomvc.listcontrol.prototype.enterDocument = function() {
42-
goog.base(this, 'enterDocument');
42+
goog.base(this, 'enterDocument');
4343

44-
var list = /** @type {Object} */(this.getModel());
44+
var list = /** @type {Object} */(this.getModel());
4545

46-
// create new model from text box
47-
var input = this.getEls('input')[0];
48-
this.on(goog.events.EventType.KEYUP, function(e) {
46+
// create new model from text box
47+
var input = this.getEls('input')[0];
48+
this.on(goog.events.EventType.KEYUP, function(e) {
4949

50-
// on return get trimmed text
51-
if (e.keyCode !== goog.events.KeyCodes.ENTER) return;
50+
// on return get trimmed text
51+
if (e.keyCode !== goog.events.KeyCodes.ENTER) return;
5252

53-
var text = goog.string.trim(input.value);
54-
if (text === '') return;
53+
var text = goog.string.trim(input.value);
54+
if (text === '') return;
5555

56-
//create new model
57-
list.newModel({'title': text});
56+
//create new model
57+
list.newModel({'title': text});
5858

59-
input.value = '';
59+
input.value = '';
6060

61-
}, 'todo-entry');
61+
}, 'todo-entry');
6262

63-
// clear completed
64-
this.click(function(e) {
65-
goog.array.forEach(list.get('completed'), function(model) {
66-
model.dispose();
67-
});
68-
}, 'clear-completed');
63+
// clear completed
64+
this.click(function(e) {
65+
goog.array.forEach(list.get('completed'), function(model) {
66+
model.dispose();
67+
});
68+
}, 'clear-completed');
6969

70-
// toggle completed
71-
this.click(function(e) {
72-
var checked = e.target.checked;
73-
goog.array.forEach(list.getModels(), function(model) {
74-
model.set('completed', checked);
75-
});
76-
}, 'toggle-all');
70+
// toggle completed
71+
this.click(function(e) {
72+
var checked = e.target.checked;
73+
goog.array.forEach(list.getModels(), function(model) {
74+
model.set('completed', checked);
75+
});
76+
}, 'toggle-all');
7777

78-
// refresh the view on changes that effect the models order
79-
this.anyModelChange(function() {
80-
this.refresh();
81-
list.save();
82-
}, this);
78+
// refresh the view on changes that effect the models order
79+
this.anyModelChange(function() {
80+
this.refresh();
81+
list.save();
82+
}, this);
8383

8484

85-
// hide/show footer and main body
86-
this.modelChange(function() {
87-
this.showMainFooter(!!list.getLength());
88-
}, this);
89-
this.showMainFooter(!!list.getLength());
85+
// hide/show footer and main body
86+
this.modelChange(function() {
87+
this.showMainFooter(!!list.getLength());
88+
}, this);
89+
this.showMainFooter(!!list.getLength());
9090

91-
// update counts
92-
this.bind('completed', function(completedModels) {
91+
// update counts
92+
this.bind('completed', function(completedModels) {
9393

94-
// update "left" count
95-
soy.renderElement(goog.dom.getElement('todo-count'),
96-
todomvc.templates.itemsLeft, {
97-
left: list.getLength() - completedModels.length
98-
});
94+
// update "left" count
95+
soy.renderElement(goog.dom.getElement('todo-count'),
96+
todomvc.templates.itemsLeft, {
97+
left: list.getLength() - completedModels.length
98+
});
9999

100-
// update clear button
101-
var clearButton = goog.dom.getElement('clear-completed');
102-
goog.dom.setTextContent(clearButton,
103-
'Clear completed (' + completedModels.length + ')');
104-
goog.style.showElement(clearButton, completedModels.length);
100+
// update clear button
101+
var clearButton = goog.dom.getElement('clear-completed');
102+
goog.dom.setTextContent(clearButton,
103+
'Clear completed (' + completedModels.length + ')');
104+
goog.style.showElement(clearButton, completedModels.length);
105105

106-
// update checkbox
107-
var checkBox = this.getEls('.toggle-all')[0];
108-
checkBox.checked = completedModels.length === list.getLength();
109-
});
106+
// update checkbox
107+
var checkBox = this.getEls('.toggle-all')[0];
108+
checkBox.checked = completedModels.length === list.getLength();
109+
});
110110

111-
// get the saved todos
112-
list.fetch();
111+
// get the saved todos
112+
list.fetch();
113113
};
114114

115115

@@ -119,11 +119,11 @@ todomvc.listcontrol.prototype.enterDocument = function() {
119119
* @param {boolean=} opt_hide whether to hide the footer.
120120
*/
121121
todomvc.listcontrol.prototype.showMainFooter = function(opt_hide) {
122-
var main = goog.dom.getElement('main');
123-
var footer = goog.dom.getElementsByTagNameAndClass('footer')[0];
122+
var main = goog.dom.getElement('main');
123+
var footer = goog.dom.getElementsByTagNameAndClass('footer')[0];
124124

125-
goog.style.showElement(main, opt_hide);
126-
goog.style.showElement(footer, opt_hide);
125+
goog.style.showElement(main, opt_hide);
126+
goog.style.showElement(footer, opt_hide);
127127
};
128128

129129

@@ -133,8 +133,8 @@ todomvc.listcontrol.prototype.showMainFooter = function(opt_hide) {
133133
* @param {Function} filter to decide models returned.
134134
*/
135135
todomvc.listcontrol.prototype.setFilter = function(filter) {
136-
this.filter_ = filter;
137-
this.refresh();
136+
this.filter_ = filter;
137+
this.refresh();
138138
};
139139

140140

@@ -143,17 +143,17 @@ todomvc.listcontrol.prototype.setFilter = function(filter) {
143143
*/
144144
todomvc.listcontrol.prototype.refresh = function() {
145145

146-
// dispose and remove all the children.
147-
this.forEachChild(function(child) {child.dispose();});
148-
this.removeChildren(true);
149-
150-
// create new controls for the models
151-
goog.array.forEach(this.getModel().getModels(this.filter_),
152-
function(model) {
153-
var newModelControl = new todomvc.todocontrol(model);
154-
this.addChild(newModelControl);
155-
newModelControl.render(goog.dom.getElement('todo-list'));
156-
}, this);
146+
// dispose and remove all the children.
147+
this.forEachChild(function(child) {child.dispose();});
148+
this.removeChildren(true);
149+
150+
// create new controls for the models
151+
goog.array.forEach(this.getModel().getModels(this.filter_),
152+
function(model) {
153+
var newModelControl = new todomvc.todocontrol(model);
154+
this.addChild(newModelControl);
155+
newModelControl.render(goog.dom.getElement('todo-list'));
156+
}, this);
157157
};
158158

159159

0 commit comments

Comments
 (0)