Skip to content

T
todomvc
Commit f92ad001 authored by Braden Shepherdson's avatar Braden Shepherdson
Browse files
Options

Update the FOAM example to the new UI, and also to latest FOAM

parent f2c2be74
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 20911 additions and 34 deletions
examples/foam/bower.json deleted 100644 → 0
View file @ f2c2be74
{
"name": "todomvc-foam",
"version": "0.0.0",
"dependencies": {
"foam": "0.3.1",
"todomvc-app-css": "~1.0.1",
"todomvc-common": "~1.0.1"
}
}
examples/foam/index.html
View file @ f92ad001
......@@ -2,11 +2,10 @@
<head>
<meta charset="utf-8">
<title>FOAM • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="bower_components/todomvc-app-css/index.css">
<script src="bower_components/foam/build/foam.js"></script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="Todo.js"></script>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<script src="node_modules/todomvc-common/base.js"></script>
<script src="build/foam.js"></script>
</head>
<body><foam id="todo" model="Controller" showActions="false"></foam></body>
<body><foam id="todo" model="com.todomvc.Controller" showActions="false"></foam></body>
</html>
examples/foam/Todo.js → examples/foam/js/com/todomvc/Controller.js
View file @ f92ad001
......@@ -3,94 +3,52 @@
// Necessary JSHint options. CLASS is not a constructor, just a global function.
/* jshint newcap: false */
// These are provided by FOAM (up through EasyDAO) or defined in this file.
/* global CLASS, TRUE, SET, NOT, GROUP_BY, COUNT, EasyDAO, Todo, TodoDAO */
CLASS({
name: 'TodoDAO',
extendsModel: 'ProxyDAO',
methods: {
put: function (issue, s) {
// If the user tried to put an empty text, remove the entry instead.
if (!issue.text) {
this.remove(issue.id, { remove: s && s.put });
} else {
this.SUPER(issue, s);
}
}
}
});
CLASS({
name: 'Todo',
properties: [
'id',
{ name: 'completed', model_: 'BooleanProperty' },
{ name: 'text', preSet: function (_, text) { return text.trim(); } }
],
templates: [function toDetailHTML() {/*
<li id="%%id">
<div class="view">
$$completed{className: 'toggle'}
$$text{mode: 'read-only', tagName: 'label'}
<button class="destroy" id="<%= this.on('click', function () { this.parent.dao.remove(this.data); }) %>"></button>
</div>
$$text{className: 'edit'}
</li>
<%
var toEdit = function () { DOM.setClass(this.$, 'editing'); this.textView.focus(); }.bind(this);
var toDisplay = function () { DOM.setClass(this.$, 'editing', false); }.bind(this);
this.on('dblclick', toEdit, this.id);
this.on('blur', toDisplay, this.textView.id);
this.textView.subscribe(this.textView.ESCAPE, toDisplay);
this.setClass('completed', function () { return this.data.completed; }.bind(this), this.id);
%> */}]
});
// Needed to massage the HTML to fit TodoMVC spec; it works without this.
CLASS({
name: 'TodoFilterView',
extendsModel: 'ChoiceListView',
methods: {
choiceToHTML: function (id, choice) {
var self = this;
this.setClass('selected', function () { return self.label === choice[1]; }, id);
return '<li><a id="' + id + '" class="choice" href="javascript:;">' + choice[1] + '</a></li>';
}
}
});
/* global CLASS, TRUE, SET, GROUP_BY, COUNT */
CLASS({
package: 'com.todomvc',
name: 'Controller',
traits: ['foam.ui.CSSLoaderTrait'],
requires: ['foam.ui.TextFieldView', 'foam.ui.DAOListView', 'foam.dao.EasyDAO', 'foam.memento.WindowHashValue',
'com.todomvc.Todo', 'com.todomvc.TodoDAO', 'com.todomvc.TodoFilterView'],
properties: [
{
name: 'input',
setter: function (text) {
// This is a fake property that adds the todo when its value gets saved.
if (!text) { return; }
this.dao.put(Todo.create({text: text}));
this.propertyChange('input', text, '');
if (text) {
this.dao.put(this.Todo.create({text: text}));
this.propertyChange('input', text, '');
}
},
view: { factory_: 'TextFieldView', placeholder: 'What needs to be done?' }
view: { factory_: 'foam.ui.TextFieldView', placeholder: 'What needs to be done?' }
},
{ name: 'dao' },
{ name: 'filteredDAO', model_: 'DAOProperty', view: 'DAOListView' },
{ name: 'filteredDAO', model_: 'foam.core.types.DAOProperty', view: 'foam.ui.DAOListView' },
{ name: 'completedCount', model_: 'IntProperty' },
{ name: 'activeCount', model_: 'IntProperty', postSet: function (_, c) { this.toggle = !c; }},
{ name: 'toggle', model_: 'BooleanProperty', postSet: function (_, n) {
if (n === (this.activeCount > 0)) { this.dao.update(SET(Todo.COMPLETED, n)); }
{ name: 'activeCount', model_: 'IntProperty', postSet: function (_, c) { this.toggle = !c; }},
{ name: 'toggle', model_: 'BooleanProperty', postSet: function (_, n) {
if (n === this.activeCount > 0) {
this.dao.update(SET(this.Todo.COMPLETED, n));
}
}},
{
name: 'query',
postSet: function (_, q) { this.filteredDAO = this.dao.where(q); },
defaultValue: TRUE,
view: { factory_: 'TodoFilterView', choices: [[TRUE, 'All'], [NOT(Todo.COMPLETED), 'Active'], [Todo.COMPLETED, 'Completed']] }
view: 'com.todomvc.TodoFilterView'
},
{
name: 'memento',
factory: function () { return this.WindowHashValue.create(); }
}
],
actions: [
{
name: 'clear',
labelFn: function () { return 'Clear completed (' + this.completedCount + ')'; },
label: 'Clear completed',
isEnabled: function () { return this.completedCount; },
action: function () { this.dao.where(Todo.COMPLETED).removeAll(); }
action: function () { this.dao.where(this.Todo.COMPLETED).removeAll(); }
}
],
listeners: [
......@@ -98,7 +56,7 @@
name: 'onDAOUpdate',
isFramed: true,
code: function () {
this.dao.select(GROUP_BY(Todo.COMPLETED, COUNT()))(function (q) {
this.dao.select(GROUP_BY(this.Todo.COMPLETED, COUNT()))(function (q) {
this.completedCount = q.groups[true];
this.activeCount = q.groups[false];
}.bind(this));
......@@ -108,8 +66,8 @@
methods: {
init: function () {
this.SUPER();
this.filteredDAO = this.dao = TodoDAO.create({
delegate: EasyDAO.create({model: Todo, seqNo: true, daoType: 'StorageDAO', name: 'todos-foam'}) });
this.filteredDAO = this.dao = this.TodoDAO.create({
delegate: this.EasyDAO.create({model: this.Todo, seqNo: true, daoType: 'LOCAL', name: 'todos-foam'}) });
this.dao.listen(this.onDAOUpdate);
this.onDAOUpdate();
}
......@@ -144,15 +102,15 @@
var f = function () { return this.completedCount + this.activeCount == 0; }.bind(this.data);
this.setClass('hidden', f, 'main');
this.setClass('hidden', f, 'footer');
Events.relate(this.X.memento, this.queryView.label$,
function (memento) {
var s = memento && memento.substring(1);
var t = s ? s.capitalize() : 'All';
return t;
},
function (label) { var s = '/' + label.toLowerCase(); console.log('label->memento', label, s); return s; });
Events.relate(this.data.memento, this.queryView.text$,
function (memento) {
var s = memento && memento.substring(1);
var t = s ? s.capitalize() : 'All';
return t;
},
function (label) { return '/' + label.toLowerCase(); });
this.addInitializer(function () {
$('new-todo').focus();
X.$('new-todo').focus();
});
%>
*/}
......
examples/foam/js/com/todomvc/Todo.js 0 → 100644
View file @ f92ad001
(function () {
/* global CLASS */
'use strict';
CLASS({
package: 'com.todomvc',
name: 'Todo',
properties: [
'id',
{ name: 'completed', model_: 'BooleanProperty' },
{ name: 'text', preSet: function (_, text) { return text.trim(); } }
],
templates: [
function toDetailHTML() {/*
<li id="%%id">
<div class="view">
$$completed{className: 'toggle'}
$$text{mode: 'read-only', tagName: 'label'}
<button class="destroy" id="<%= this.on('click', function () { this.parent.dao.remove(this.data); }) %>"></button>
</div>
$$text{className: 'edit'}
</li>
<%
var toEdit = function () { DOM.setClass(this.$, 'editing'); this.textView.focus(); }.bind(this);
var toDisplay = function () { DOM.setClass(this.$, 'editing', false); }.bind(this);
this.on('dblclick', toEdit, this.id);
this.on('blur', toDisplay, this.textView.id);
this.textView.subscribe(this.textView.ESCAPE, toDisplay);
this.setClass('completed', function () { return this.data.completed; }.bind(this), this.id);
%>
*/}
]
});
})();
examples/foam/js/com/todomvc/TodoDAO.js 0 → 100644
View file @ f92ad001
(function () {
/* global CLASS */
'use strict';
CLASS({
package: 'com.todomvc',
name: 'TodoDAO',
extendsModel: 'foam.dao.ProxyDAO',
methods: [
function put(issue, s) {
// If the user tried to put an empty text, remove the entry instead.
if (!issue.text) {
this.remove(issue.id, { remove: s && s.put });
} else {
this.SUPER(issue, s);
}
}
]
});
})();
examples/foam/js/com/todomvc/TodoFilterView.js 0 → 100644
View file @ f92ad001
(function () {
/* global CLASS, TRUE, NOT */
'use strict';
// Needed to massage the HTML to fit TodoMVC spec; it works without this.
CLASS({
package: 'com.todomvc',
name: 'TodoFilterView',
extendsModel: 'foam.ui.ChoiceListView',
requires: ['com.todomvc.Todo'],
properties: [
{
name: 'choices',
factory: function () {
return [[TRUE, 'All'], [NOT(this.Todo.COMPLETED), 'Active'], [this.Todo.COMPLETED, 'Completed']];
}
}
],
methods: [
function choiceToHTML(id, choice) {
var self = this;
this.setClass('selected', function () { return self.text === choice[1]; }, id);
return '<li><a id="' + id + '" class="choice">' + choice[1] + '</a></li>';
}
]
});
})();
examples/foam/bower_components/todomvc-app-css/index.css → examples/foam/node_modules/todomvc-app-css/index.css
View file @ f92ad001
......@@ -15,11 +15,9 @@ button {
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
......@@ -33,7 +31,6 @@ body {
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
......@@ -83,7 +80,6 @@ input[type="checkbox"] {
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
......@@ -102,11 +98,9 @@ input[type="checkbox"] {
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
......@@ -191,7 +185,6 @@ label[for='toggle-all'] {
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
......@@ -323,19 +316,10 @@ html #clear-completed:active {
line-height: 20px;
text-decoration: none;
cursor: pointer;
visibility: hidden;
position: relative;
}
#clear-completed::after {
visibility: visible;
content: 'Clear completed';
position: absolute;
right: 0;
white-space: nowrap;
}
#clear-completed:hover::after {
#clear-completed:hover {
text-decoration: underline;
}
......
examples/foam/bower_components/todomvc-common/base.js → examples/foam/node_modules/todomvc-common/base.js
View file @ f92ad001
......@@ -114,7 +114,12 @@
})({});
if (location.hostname === 'todomvc.com') {
window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-31081062-1', 'auto');
ga('send', 'pageview');
}
/* jshint ignore:end */
......@@ -228,7 +233,7 @@
xhr.onload = function (e) {
var parsedResponse = JSON.parse(e.target.responseText);
if (parsedResponse instanceof Array) {
var count = parsedResponse.length
var count = parsedResponse.length;
if (count !== 0) {
issueLink.innerHTML = 'This app has ' + count + ' open issues';
document.getElementById('issue-count').style.display = 'inline';
......
examples/foam/package.json 0 → 100644
View file @ f92ad001
{
"private": true,
"dependencies": {
"todomvc-common": "^1.0.0",
"todomvc-app-css": "^1.0.1"
},
"devDependencies": {
"foam-framework": "0.4.2"
}
}
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