Fixing showing and hiding of page elements on items selected

43737b1a · James Thomas · 6dc4577e · 43737b1a · 43737b1a · 43737b1a
Commit 43737b1a authored May 16, 2012 by James Thomas
4 changed files
--- a/architecture-examples/dojo/css/app.css
+++ b/architecture-examples/dojo/css/app.css
+#clear-completed, #footer, #main {
+    display: none;
+}
+
+#todoapp.todos_selected #clear-completed,
+#todoapp.todos_present #footer, 
+#todoapp.todos_present #main {
+    display: inherit;
+}
+
 #todo-list li .toggle.dijitChecked:after {
 	color: #85ada7;
 	text-shadow: 0 1px 0 #669991;
@@ -5,7 +15,6 @@
 	position: relative;
 }

-
 /* When checkbox is selected, score through todo item content */
 .dijitCheckBoxChecked + .todo-content {
    color: #666;

--- a/architecture-examples/dojo/index.html
+++ b/architecture-examples/dojo/index.html
@@ -13,9 +13,11 @@
 </head>
 <body class="claro">
    <section id="todoapp" data-dojo-type="todo.app"></section>
-		<div id="credits">
-			Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a>
-		</div>
+	<footer id="info">
+		<p>Double-click to edit a todo</p>
+        <p>Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a></p>
+	</footer>
+	
 	<script src="../../assets/base.js"></script>
 	<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'/code/JavaScript/todomvc/architecture-examples/dojo/js/todo/'}, deps:['dojo/parser', 'todo/app']" src="/code/JavaScript/Libraries/DTK/dojo-release-1.7.2-src/dojo/dojo.js"></script>
 </body>

--- a/architecture-examples/dojo/js/todo/app.html
+++ b/architecture-examples/dojo/js/todo/app.html
@@ -22,10 +22,7 @@
 	    </ul>
 	</section>

-
-		<!-- This footer should hidden by default and shown when there are todos -->
    <footer id="footer" data-dojo-attach-point="todo_stats">
-	<!-- This should be `0 items left` by default -->
        <span id="todo-count">
            <strong>
                <span data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.incomplete" class="number"></span>

--- a/architecture-examples/dojo/js/todo/app.js
+++ b/architecture-examples/dojo/js/todo/app.js
@@ -6,12 +6,14 @@ define(["dojo/_base/declare",
        // Parent classes
        "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
        // General application modules
-        "dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", "dojox/mvc", "todo/model/TodoModel",
+        "dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", 
+        "dojo/keys", "dojox/mvc", "todo/model/TodoModel",
        // Widget template
        "dojo/text!./app.html",
        // Template Widgets
        "dijit/InlineEditBox", "todo/form/CheckBox", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output"],
-    function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, _event, on, domClass, domAttr, mvc, TodoModel, template) {
+    function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, _event, on, domClass, domAttr, 
+             keys, mvc, TodoModel, template) {

    return declare("todo.app", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString: template,
@@ -94,8 +96,8 @@ define(["dojo/_base/declare",
         * we a number of completed and incomplete todo items.
         */
        onItemStatusUpdate: function () {
-            domClass.toggle(this.todo_stats, "items_selected", this.model.complete.value > 0);
-            domClass.toggle(this.todo_stats, "items_present", this.model.todos.get("length"));
+            domClass.toggle(this.domNode, "todos_selected", this.model.complete.value > 0);
+            domClass.toggle(this.domNode, "todos_present", this.model.todos.get("length"));
        },

        /**
@@ -104,7 +106,7 @@ define(["dojo/_base/declare",
         * text value as new todo item in the model.
         */
        onKeyPress: function (event) {
-            if (event.keyCode !== 13) return;
+            if (event.keyCode !== keys.ENTER) return;

            this.addToModel(event.target.value, false);
            event.target.value = "";