New ToDo example App

Based on Release 1.1 & Sugar Growl

examples/todo.js/app/app.js

@@ -5,8 +5,6 @@ var App = (function(lng, undefined) {
         version: '0.1'
     });
 
-    
-
     return {
 
     };

examples/todo.js/app/events.js

@@ -1,13 +1,13 @@
 App.Events = (function(lng, undefined) {
 
     //Login
-    lng.Dom('#btnLogin').tap(function(evet) {
+    lng.dom('#btnLogin').tap(function(event) {
         lng.Router.section('main');
         App.Data.refresh();
     });
 
     //Create new todo
-    lng.Dom('#btnNewTodo').tap(function(event) {
+    lng.dom('#btnNewTodo').tap(function(event) {
 
         var name = lng.dom('#txtNewName');
         var description = lng.dom('#txtNewDescription');
@@ -27,13 +27,13 @@ App.Events = (function(lng, undefined) {
     });
 
     //View ToDo
-    lng.Dom('#done li, #pending li').tap(function(event) {
+    lng.dom('#done li, #pending li').tap(function(event) {
         var todo_id = lng.dom(this).attr('id');
         App.View.todo(todo_id)
     });
 
     //Done ToDo
-    lng.Dom('#btnDoneTodo').tap(function(event) {
+    lng.dom('#btnDoneTodo').tap(function(event) {
         var current_todo = lng.Data.Cache.get('current_todo');
 
         App.Data.doneTodo(current_todo.id);
@@ -41,7 +41,7 @@ App.Events = (function(lng, undefined) {
     });
 
     //Update ToDo
-    lng.Dom('#btnUpdateTodo').tap(function(event) {
+    lng.dom('#btnUpdateTodo').tap(function(event) {
         var current_todo = lng.Data.Cache.get('current_todo');
         var name = lng.dom('#txtEditName');
         var description = lng.dom('#txtEditDescription');
@@ -52,11 +52,11 @@ App.Events = (function(lng, undefined) {
             description: description.val()
         });
 
-        App.View.returnToMain('ToDo updated', 'write');
+        App.View.returnToMain('ToDo updated', 'pencil');
     });
 
     //Delete ToDo
-    lng.Dom('#btnDeleteTodo').tap(function(event) {
+    lng.dom('#btnDeleteTodo').tap(function(event) {
         var current_todo = lng.Data.Cache.get('current_todo');
 
         var options = [
@@ -68,6 +68,14 @@ App.Events = (function(lng, undefined) {
                     App.Data.removeTodo(current_todo.id);
                     App.View.returnToMain('ToDo deleted', 'trash');
                 }
+            },
+            {
+                name: '...No, sorry.',
+                icon: 'home',
+                color: 'red',
+                callback: function() {
+                    lng.Sugar.Growl.hide();
+                }
             }
         ];
         lng.Sugar.Growl.option('Are you sure?', options);

examples/todo.js/app/view.js

@@ -26,9 +26,9 @@ App.View = (function(lng, App, undefined) {
                 var data = result[0];
                 lng.Data.Cache.set('current_todo', data);
 
-                $('#txtEditName').val(data.name);
-                $('#txtEditDescription').val(data.description);
-                $('#txtEditName').val(data.name);
+                lng.dom('#txtEditName').val(data.name);
+                lng.dom('#txtEditDescription').val(data.description);
+                lng.dom('#txtEditName').val(data.name);
 
                 lng.Router.section('view');
             }
@@ -36,15 +36,13 @@ App.View = (function(lng, App, undefined) {
     };
 
     var returnToMain = function(message, icon) {
-        lng.Sugar.Growl.notify(message, 'Tap to close', icon, 'error', 5);
-
-        //lng.Sugar.Growl.show(message, icon, true);
+        lng.Sugar.Growl.show(message, 'Please wait...', icon, true, 2);
         App.Data.refresh();
 
         setTimeout(function() {
             lng.Router.back();
             lng.Sugar.Growl.hide();
-        }, 1000);
+        }, 2000);
     };
 
     var list = function(container, template, rows) {

examples/todo.js/assets/sugars/lungo.sugar.growl.js

@@ -1,171 +0,0 @@
-/** 
- * Description or Responsability 
- * 
- * @namespace LUNGO.Sugar
- * @class Growl
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-LUNGO.Sugar.Growl = (function(lng, undefined) {
-    var _options = [];
-
-    var SELECTOR = {
-        BODY: 'body',
-        GROWL: '.growl',
-        MODAL: '.growl .modal',
-        NOTIFY: '.growl .notify',
-        MODAL_HREF: '.growl .modal a'
-    }
-
-    var CSS_CLASS = {
-        VISIBLE: 'visible',
-        SHOW: 'show',
-        HIDE: 'hide',
-        WORKING: 'working',
-        INPUT: 'input'
-    }
-
-    var CALLBACK_HIDE = 'LUNGO.Sugar.Growl.hide()';
-    var MARKUP_GROWL = '<div class="growl"><div class="modal"></div><div class="notify"></div></div>';
-
-    var show = function(title, icon, animate, seconds, callback) {
-        _showGrowlModal(true);
-        
-        var modal = $(SELECTOR.MODAL);
-        modal.removeClass(CSS_CLASS.SHOW);
-        modal.removeClass(CSS_CLASS.INPUT);
-        modal.html('<span class="big icon ' + icon + '"></span><strong>' + title + '<strong>');
-        _animate(modal, animate);
-        modal.show().addClass(CSS_CLASS.SHOW);
-
-        _auto_hide(seconds, callback);
-    };
-
-    var hide = function() {
-        _hide_children();
-
-        setTimeout(function() {
-            $(SELECTOR.GROWL).hide();
-        }, 100);
-    };
-
-    var notify = function(title, description, icon, type, seconds, callback) {
-        _showGrowlModal(false);
-
-        var notify = $(SELECTOR.NOTIFY);
-        if (type) {
-            notify.addClass(type);
-        }
-        notify.html('<span class="icon ' + icon + '"></span><strong>' + title + '</strong><br/><em>' + description + '</strong>');
-
-        setTimeout(function() {
-            notify.addClass(CSS_CLASS.SHOW);
-        }, 300);
-
-        _auto_hide(seconds, callback);
-    };
-
-    var option = function(title, options) {
-        _showGrowlModal(true);
-
-        _options = options;
-
-        $(SELECTOR.MODAL).removeClass(CSS_CLASS.WORKING).removeClass(CSS_CLASS.SHOW);
-        
-        var buttons = _createButtons(options);
-        $(SELECTOR.MODAL).addClass('input').html('<span class="title">' + title + '</span>' + buttons);
-        $('.growl .modal').show().addClass('show');
-    };
-
-    var _init = function() {
-        //TODO: Append stylesheet (.less)
-        $(SELECTOR.BODY).append(MARKUP_GROWL);
-        _subscribeEvents();
-    };
-
-    var _showGrowlModal = function(modal) {
-        var growl = $(SELECTOR.GROWL);
-        if (!growl.is(CSS_CLASS.VISIBLE)) {
-            growl.show();
-        }
-        if (modal) {
-            growl.addClass('modal');
-        }
-    };
-
-    var _animate = function(element, animate) {
-        if (animate) {
-            element.addClass(CSS_CLASS.WORKING);
-        }
-        else {
-            element.removeClass(CSS_CLASS.WORKING);
-        }
-    };
-
-    var _createButtons = function(options) {
-        var buttons = '';
-        for (var i = 0, len = options.length; i < len; i++) {
-            buttons += _option_button(options[i].color, 'growl_option_' + i, options[i].icon, options[i].name);
-        };
-        buttons += _option_button('red', undefined, 'cancel', 'Cancel');
-
-        return buttons;
-    };
-
-    var _option_button = function(color, id, icon, label) {
-        id = (id !== undefined) ? 'id="' + id + '"' : '';
-        return '<a href="#" ' + id + ' class="button ' + color + '"><span class="icon ' + icon + '"></span>' + label + '</a>';
-    };
-
-    var _auto_hide = function(seconds, callback) {
-        if (seconds != undefined && seconds != 0) {
-            if (callback === undefined) {
-                callback = CALLBACK_HIDE;
-            }
-            setTimeout(callback, seconds * 1000);
-        }
-    };
-
-    var _hide_children = function() {
-        _hide_child(SELECTOR.MODAL);
-        _hide_child(SELECTOR.NOTIFY);
-    };
-
-    var _hide_child = function(selector) {
-        var child = $(selector);
-        if (child.hasClass(CSS_CLASS.SHOW)) {
-            child.removeClass(CSS_CLASS.SHOW);
-            //child.removeClass(CSS_CLASS.INPUT).html('');
-        }
-    };
-
-    var _subscribeEvents = function() {
-        //BINDING EVENT
-        //CF.app.EVENTS.touch
-        $(SELECTOR.NOTIFY).bind('click', function() {
-            $(SELECTOR.NOTIFY).removeClass(CSS_CLASS.SHOW);
-        });
-
-
-        $('.growl .modal a').live('click', function(event) {
-            if ($(this).attr('id') !== ''){
-                id = $(this).attr('id').replace(/growl_option_/g, '');
-                setTimeout(_options[id].callback, 100);
-            } else {
-                event.preventDefault();
-                hide();
-                return false;
-            }
-        });
-    };
-
-    _init();
-
-    return {
-        show: show,
-        hide: hide,
-        notify: notify,
-        option: option
-    }
-})(LUNGO);

examples/todo.js/index.html

@@ -19,30 +19,29 @@
     <link rel="apple-touch-startup-image" href="assets/images/default.png">
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="../../release/lungo-1.1.min.css">
-    <link rel="stylesheet" href="../../release/lungo-1.1.min.icons.css">
     <link rel="stylesheet" href="../../release/lungo.theme.default.css">
     <!-- Sugars :) -->
-    <link rel="stylesheet" href="assets/sugars/lungo.sugar.growl.css">
+    <link rel="stylesheet" href="assets/sugars/lungo.sugar.growl.min.css">
 </head>
 
 <body class="app">
-
     <section id="login">
         <article class="splash">
             <div class="indented">
-                <h1>ToDo<span class="semi-opacity">.js</span></h1>
-            <div class="form">
-                <input type="text" placeholder="Type your user" disabled/>
-                <input type="password" placeholder="Type your password" disabled/>
-                <a href="#" id="btnLogin" class="button big blue" data-icon="key">Test Demo!</a>
+                <h1>ToDo.<span class="semi-opacity">js<span></h1>
+                <input type="text" placeholder="Type your user" />
+                <input type="password" placeholder="Type your password" />
+                <a href="#" id="btnLogin" class="button big" data-icon="key">Test Demo!</a>
+                <div class="copyright">Copyright TapQuo Inc, 2011</div>
             </div>
-            <div class="copyright">Copyright TapQuo Inc, 2011</div>
         </article>
     </section>
 
 	<section id="main">
 		<header data-title="ToDo.js">
-			<a href="#new" data-target="section" class="button onright articblue" data-icon="add">&nbsp;New</a>
+            <nav class="onright">
+			     <a href="#new" data-target="section" data-icon="add"></a>
+            </nav>
 		</header>
 
         <article id="pending" class="list"></article>
@@ -50,24 +49,25 @@
 
         <footer class="toolbar">
             <nav>
-                <a href="#pending" data-target="article" class="current" data-title="Pending ToDo's" data-icon="inbox"></a>
-                <a href="#done" data-target="article" data-title="Done ToDo's" data-icon="folder"></a>
+                <a href="#pending" data-target="article" class="current" data-title="Pending ToDo's" data-icon="folder"></a>
+                <a href="#done" data-target="article" data-title="Done ToDo's" data-icon="trash"></a>
             </nav>
         </footer>
     </section>
 
     <section id="view">
-        <header data-back="home articblue" data-title="View ToDo's" >
-            <a href="#" id="btnDoneTodo" class="button onright blue" data-icon="check">&nbsp;Done</a>
+        <header data-back="home articblue" data-title="View" >
+            <nav class="onright">
+                <a href="#" id="btnDeleteTodo" data-icon="trash"></a>
+            </nav>
         </header>
         <article class="list">
             <div class="indented">
                 <ul class="form">
+                    <li class="tip dark" data-icon="pencil mini">Edit ToDo</li>
                     <li class="dark">
                         <label>Name</label>
                         <input type="text" id="txtEditName" placeholder="Input text"/>
-                    </li>
-                    <li>
                         <label>Description</label>
                         <textarea id="txtEditDescription" placeholder="Textarea sample"></textarea>
                     </li>
@@ -82,14 +82,18 @@
                         </label>
                     </li>
                 </ul>
-                <a href="#" id="btnUpdateTodo" class="button big green" data-icon="write">Update</a>
-                <a href="#" id="btnDeleteTodo" class="button big red" data-icon="trash">Delete</a>
+                <a href="#" id="btnUpdateTodo" class="button big" data-icon="pencil">Update</a>
+                <a href="#" id="btnDoneTodo" class="button big red" data-icon="check">Done</a>
             </div>
         </article>
     </section>
 
     <section id="new">
-		<header data-back="home articblue" data-title="New ToDo"></header>
+		<header data-title="New ToDo">
+            <nav>
+                <a href="#back" data-target="section" class="current" data-icon="left"><abbr>Back</abbr></a>
+            </nav>
+        </header>
 		<article class="list">
             <div class="indented">
                 <ul class="form">
@@ -105,15 +109,14 @@
                         <label>Type</label>
                         <label class="select">
                             <select id="txtNewType">
-                                <option value="1">One</option>
-                                <option value="2">Two</option>
-                                <option value="3">Three</option>
+                                <option value="1">Personal</option>
+                                <option value="2">Someday</option>
+                                <option value="3">Tomorrow</option>
                             </select>
                         </label>
                     </li>
                 </ul>
-                <a href="#" id="btnNewTodo" class="button big blue" data-icon="check">Add ToDo</a>
-                <a href="#back" data-target="section" class="button big red" data-icon="cancel">Cancel</a>
+                <a href="#" id="btnNewTodo" class="button big" data-icon="check">Add ToDo</a>
             </div>
 		</article>
 	</section>
@@ -121,7 +124,7 @@
     <!-- LungoJS (Production mode) -->
     <script src="../../release/lungo-1.1.packed.js"></script>
 
-    <script src="assets/sugars/lungo.sugar.growl.js"></script>
+    <script src="assets/sugars/lungo.sugar.growl.min.js"></script>
     <!-- LungoJS - Sandbox App -->
     <script src="app/app.js"></script>
     <script src="app/data.js"></script>