Commit 85b2958c authored by Eugene Shen's avatar Eugene Shen Committed by Sven Franck

Polish TodoMVC app based on merge request comments

Add transparent SVG and PNG icons to the manifest,
rename all functions following the Nexedi conventions,
link to the TodoMVC homepage, move Handlebars template to head,
and rename all files from tutorial_officejs_* to officejs_todomvc_*.
parent ad003082
......@@ -91,7 +91,7 @@
</item>
<item>
<key> <string>content_md5</string> </key>
<value> <string>c0e6b37c33e868aa4c227df87000ea8c</string> </value>
<value> <string>0c1f922efa45338fbeac96c16fe81084</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
......@@ -99,7 +99,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>tutorial_officejs_logo.png</string> </value>
<value> <string>officejs_todomvc_icon.png</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -109,15 +109,15 @@
</item>
<item>
<key> <string>filename</string> </key>
<value> <string>tutorial_officejs_logo.png</string> </value>
<value> <string>officejs_todomvc_icon (1).png</string> </value>
</item>
<item>
<key> <string>height</string> </key>
<value> <int>256</int> </value>
<value> <int>800</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>tutorial_officejs_logo_png</string> </value>
<value> <string>officejs_todomvc_icon_png</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -137,7 +137,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>OfficeJS Tutorial Logo</string> </value>
<value> <string>OfficeJS TodoMVC Icon PNG</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......@@ -147,7 +147,7 @@
</item>
<item>
<key> <string>width</string> </key>
<value> <int>256</int> </value>
<value> <int>800</int> </value>
</item>
</dictionary>
</pickle>
......
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
.st0{fill:#0082b9;}
.st1{fill:#CCE6F1;}
.st2{fill:#FCEA0D;}
.st3{fill:#FFFFFF;}
.st4{fill:#0082B9;}
.st5{fill:#D9D9D9;}
.st6{fill:#0A506D;}
]]>
</style>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="802" width="802" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<g id="svg_1" stroke="null">
<path id="svg_2" d="m798.00732,504.09964c-35.8938,179.46907 -212.09982,221.88906 -451.39192,219.71368l0,-318.69357l451.39192,98.97989z" class="st1" stroke="null"/>
<path id="svg_3" d="m747.97352,405.11975c0,212.09982 -182.73212,318.69357 -401.35812,318.69357l0,-415.49812l401.35812,96.80455z" class="st0" stroke="null"/>
<path id="svg_4" d="m346.61544,723.81331l0,0c-189.2583,3.26305 -342.6228,-135.96145 -341.53513,-317.6059c0,-105.50608 0,-156.62755 0,-262.13362c118.55836,16.31538 231.67829,7.61385 341.53513,-54.38456l0,634.12408z" class="st4" stroke="null"/>
<path id="svg_5" d="m508.68141,175.61684c0,21.75385 -19.57843,35.89385 -43.50766,31.54309l-76.13837,-13.05233c-23.92923,-4.35076 -43.50766,-25.0169 -43.50766,-46.77071l0,-88.10303c0,-21.75381 19.57843,-35.8938 43.50766,-31.54304l76.13837,13.05228c23.92923,4.35076 43.50766,25.0169 43.50766,46.77075l0,88.10299z" class="st6" stroke="null"/>
<path id="svg_6" d="m644.64286,128.84613l-137.04912,-19.57847c-14.14,-2.17538 -26.10461,2.17538 -34.80614,9.78924c-45.68304,-17.40305 -91.36608,-30.45537 -126.17222,-30.45537l0,635.21179c189.2583,3.26305 342.6228,-135.96141 341.53513,-317.6059c0,-59.82304 0,-109.85684 0,-142.48755c0,-25.0169 0,-39.1569 0,-39.1569l0,-48.94613c0,-21.75381 -19.57847,-42.41995 -43.50766,-46.77071l0.00001,0z" class="st6" stroke="null"/>
<path id="svg_7" d="m89.92025,226.73835l0,58.73532c0,0 63.08609,13.05228 131.61065,-5.43847l0,240.37981c-68.52452,-16.31538 -134.87369,-82.66456 -132.69831,-80.48918l0,72.87532c85.92761,97.89222 194.69673,98.97993 194.69673,98.97993l0,-412.23503c0,-1.08771 -100.0676,40.24457 -193.60906,27.19228l-0.00001,0.00002z" class="st3" stroke="null"/>
<path id="svg_8" d="m598.95983,369.2259l-140.31221,-31.54304l0,-67.43685l140.31221,25.0169l0,-61.99842l-196.87216,-34.80614l-1.08767,191.43368l141.39988,33.71842l0,55.47227c-45.68304,41.33228 -141.39988,63.08609 -141.39988,63.08609l0,67.43689c0,0 113.11989,-4.35076 197.95982,-102.24298l0,-138.13683l0.00001,0.00001z" class="st5" stroke="null"/>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Image" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_count</string> </key>
<value>
<persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
</value>
</item>
<item>
<key> <string>_mt_index</string> </key>
<value>
<persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
</value>
</item>
<item>
<key> <string>_tree</string> </key>
<value>
<persistent> <string encoding="base64">AAAAAAAAAAQ=</string> </persistent>
</value>
</item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>classification/collaborative/team</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value> <string>26e9392a4e89daec71298d7523ad3b92</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>image/svg+xml</string> </value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>officejs_todomvc_icon.svg</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>filename</string> </key>
<value> <string>method-draw-image.svg</string> </value>
</item>
<item>
<key> <string>height</string> </key>
<value> <int>-1</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>officejs_todomvc_icon_svg</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Image</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>OfficeJS TodoMVC Icon SVG</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>width</string> </key>
<value> <int>-1</int> </value>
</item>
</dictionary>
</pickle>
</record>
<record id="2" aka="AAAAAAAAAAI=">
<pickle>
<global name="Length" module="BTrees.Length"/>
</pickle>
<pickle> <int>0</int> </pickle>
</record>
<record id="3" aka="AAAAAAAAAAM=">
<pickle>
<global name="OOBTree" module="BTrees.OOBTree"/>
</pickle>
<pickle>
<none/>
</pickle>
</record>
<record id="4" aka="AAAAAAAAAAQ=">
<pickle>
<global name="OOBTree" module="BTrees.OOBTree"/>
</pickle>
<pickle>
<none/>
</pickle>
</record>
</ZopeData>
This source diff could not be displayed because it is too large. You can view the blob instead.
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Script" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>classification/collaborative/team</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>handlebars.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>handlebars_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Script</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Handlebars JS</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
......@@ -483,7 +483,7 @@ html .clear-completed:active {
}
.info a {
color: inherit;
color: lightslategray;
text-decoration: none;
font-weight: 400;
}
......
......@@ -79,7 +79,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>tutorial_officejs.css</string> </value>
<value> <string>officejs_todomvc.css</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -89,7 +89,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>tutorial_officejs_css</string> </value>
<value> <string>officejs_todomvc_css</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -107,7 +107,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>OfficeJS Tutorial CSS</string> </value>
<value> <string>OfficeJS TodoMVC CSS</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......
......@@ -3,22 +3,13 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS App</title>
<link href="officejs_todomvc_manifest.json" rel="manifest">
<title>OfficeJS TodoMVC App</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="jio.js"></script>
<script src="handlebars.js"></script>
<script src="tutorial_officejs_gadget_index.js"></script>
<link href="tutorial_officejs.css" rel="stylesheet">
<link href="tutorial_officejs_manifest.json" rel="manifest">
</head>
<body>
<div data-gadget-url="tutorial_officejs_gadget_model.html"
data-gadget-scope="model"
data-gadget-sandbox="public">
</div>
<main class="handlebars">
</main>
<script src="officejs_todomvc_gadget_index.js"></script>
<link href="officejs_todomvc.css" rel="stylesheet">
<script class="handlebars-template" type="text/x-handlebars-template">
<section class="todoapp">
<header class="header">
......@@ -56,7 +47,16 @@
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>Concept and themes from <a href="http://todomvc.com/">TodoMVC</a></p>
</footer>
</script>
</head>
<body>
<div data-gadget-url="officejs_todomvc_gadget_model.html"
data-gadget-scope="model"
data-gadget-sandbox="public">
</div>
<main class="handlebars-anchor">
</main>
</body>
</html>
\ No newline at end of file
......@@ -83,7 +83,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>tutorial_officejs_gadget_model.html</string> </value>
<value> <string>officejs_todomvc_gadget_index.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -93,7 +93,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>tutorial_officejs_gadget_model_html</string> </value>
<value> <string>officejs_todomvc_gadget_index_html</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -113,7 +113,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>OfficeJS Tutorial Model</string> </value>
<value> <string>OfficeJS TodoMVC Index</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*globals window, document, navigator, rJS, Handlebars*/
/*global window, document, navigator, rJS, Handlebars*/
(function (window, document, navigator, rJS, Handlebars) {
"use strict";
......@@ -12,7 +12,7 @@
/* Global Variables */
handlebars_template; // = Handlebars.compile(template.innerHTML);
handlebars_template;
/* Initialization */
......@@ -28,11 +28,15 @@
.declareService(function () {
var gadget = this,
template = gadget.element.querySelector(".handlebars-template"),
div = document.createElement("div");
gadget.element.appendChild(div);
handlebars_template = Handlebars.compile(template.innerHTML);
return gadget.declareGadget("tutorial_officejs_gadget_router.html", {
handlebars_template = Handlebars.compile(
document.head.querySelector(".handlebars-template").innerHTML
);
// Normally, router gadgets are declared in the HTML of the root gadget
// because one app only needs one router, and it is not dynamic at all.
// However, this is declared in JavaScript purely to serve as an example.
return gadget.declareGadget("officejs_todomvc_gadget_router.html", {
scope: "router",
sandbox: "public",
element: div
......@@ -40,7 +44,7 @@
.push(function () {
if (navigator.serviceWorker) {
return navigator.serviceWorker.register(
"tutorial_officejs_serviceworker.js"
"officejs_todomvc_serviceworker.js"
);
}
})
......@@ -71,7 +75,7 @@
})
.push(function (count_dict) {
todo_count_dict = count_dict;
return model_gadget.getTodos(gadget.state.query);
return model_gadget.getTodoList(gadget.state.query);
})
.push(function (todo_list) {
var plural = todo_list.length === 1 ? " item" : " items",
......@@ -97,7 +101,7 @@
}
}
gadget.element.querySelector(".handlebars").innerHTML =
gadget.element.querySelector(".handlebars-anchor").innerHTML =
handlebars_template({
todo_list: todo_list,
todo_exists: todo_count_dict.total >= 1,
......@@ -142,20 +146,20 @@
.push(function (model_gadget) {
switch (event.target.className) {
case "toggle":
return model_gadget.toggleOne(
return model_gadget.setOneTodoStatus(
jio_id,
!todo_item.classList.contains("completed")
);
case "toggle-all":
return model_gadget.toggleAll(event.target.checked);
return model_gadget.setAllTodoStatus(event.target.checked);
case "toggle-label":
return model_gadget.toggleAll(
return model_gadget.setAllTodoStatus(
!gadget.element.querySelector(".toggle-all").checked
);
case "destroy":
return model_gadget.removeOne(jio_id);
return model_gadget.removeOneTodo(jio_id);
case "clear-completed":
return model_gadget.removeCompleted();
return model_gadget.removeAllCompletedTodo();
default:
if (gadget.state.editing_jio_id
&& event.target.className !== "edit") {
......@@ -191,7 +195,7 @@
if (event.keyCode === ENTER_KEY && item) {
return gadget.getDeclaredGadget("model")
.push(function (model_gadget) {
return model_gadget.changeTitle(
return model_gadget.changeTodoTitle(
event.target.parentElement.getAttribute("data-jio-id"),
item
);
......
......@@ -79,7 +79,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>tutorial_officejs_gadget_router.js</string> </value>
<value> <string>officejs_todomvc_gadget_index.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -89,7 +89,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>tutorial_officejs_gadget_router_js</string> </value>
<value> <string>officejs_todomvc_gadget_index_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -107,7 +107,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>OfficeJS Tutorial Router Gadget JS</string> </value>
<value> <string>OfficeJS TodoMVC Index Gadget JS</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......
<!doctype html>
<html>
<head>
<title>Model Gadget</title>
<title>OfficeJS TodoMVC Model Gadget</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="jiodev.js"></script>
<script src="tutorial_officejs_gadget_model.js"></script>
<script src="officejs_todomvc_gadget_model.js"></script>
</head>
<body>
</body>
......
......@@ -83,7 +83,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>tutorial_officejs_gadget_router.html</string> </value>
<value> <string>officejs_todomvc_gadget_model.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -93,7 +93,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>tutorial_officejs_gadget_router_html</string> </value>
<value> <string>officejs_todomvc_gadget_model_html</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -113,7 +113,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>OfficeJS Tutorial Router</string> </value>
<value> <string>OfficeJS TodoMVC Model</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*globals window, RSVP, rJS, jIO*/
/*global window, RSVP, rJS, jIO*/
(function (window, RSVP, rJS, jIO) {
"use strict";
......@@ -31,9 +31,8 @@
/* Declared Methods */
.declareMethod("postTodo", function (title) {
var gadget = this,
storage = gadget.state.storage;
return storage.post({
var gadget = this;
return gadget.state.storage.post({
title: title,
completed: false,
creation_date: Date.now()
......@@ -41,9 +40,8 @@
})
.declareMethod("putTodo", function (id, todo) {
var gadget = this,
storage = gadget.state.storage;
return storage.get(id)