Skip to content

T
todomvc
Commit 5bf7dbdb authored by Arthur Verschaeve's avatar Arthur Verschaeve
Browse files
Options

Merge pull request #1305 from foam-framework/foam-new-style 

Update the FOAM example to the new UI, and also to latest FOAM
parents f2c2be74 f92ad001
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 @ 5bf7dbdb
......@@ -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 @ 5bf7dbdb
......@@ -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 @ 5bf7dbdb
(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 @ 5bf7dbdb
(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 @ 5bf7dbdb
(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 @ 5bf7dbdb
......@@ -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 @ 5bf7dbdb
......@@ -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 @ 5bf7dbdb
{
"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