Permalink
Browse files

initial labs for epitome

  • Loading branch information...
1 parent 0952622 commit f9445c31c9d654d324326913795ee12daf2bbd15 @DimitarChristoff DimitarChristoff committed Jul 24, 2012
@@ -0,0 +1 @@
+/* base.css overrides */
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Epitome • TodoMVC</title>
+ <link rel="stylesheet" href="../../../assets/base.css">
+ <!-- CSS overrides - remove if you don't need it -->
+ <link rel="stylesheet" href="css/app.css">
+ <!--[if IE]>
+ <script src="../../../assets/ie.js"></script>
+ <![endif]-->
+</head>
+<body>
+ <section id="todoapp">
+ <header id="header">
+ <h1>todos</h1>
+ <input id="new-todo" placeholder="What needs to be done?" autofocus>
+ </header>
+ <!-- This section should be hidden by default and shown when there are todos -->
+ <section id="main">
+ <input id="toggle-all" type="checkbox">
+ <label for="toggle-all">Mark all as complete</label>
+ <ul id="todo-list"></ul>
+ </section>
+ <!-- This footer should hidden by default and shown when there are todos -->
+ <footer id="footer"></footer>
+ </section>
+ <footer id="info">
+ <p>Double-click to edit a todo</p>
+ <!-- Remove the below line ↓ -->
+ <!-- Change this out with your name and url ↓ -->
+ <p>Created by <a href="https://github.com/DimitarChristoff/">Dimitar Christoff</a></p>
+ <p>Powered by <a href="https://github.com/DimitarChristoff/Epitome">Epitome for MooTools</a><br/> <a href="http://travis-ci.org/DimitarChristoff/Epitome"></a><img src="https://secure.travis-ci.org/DimitarChristoff/Epitome.png?branch=master" /></a</p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+ </footer>
+
+ <script type="text/template" id="item-template">
+ <div class="view">
+ <input class="toggle" type="checkbox" <%=completedCheckbox%> />
+ <label><%=title%></label>
+ <button class="destroy"></button>
+ </div>
+ <input class="edit" type="text" value="<%=title%>" />
+ </script>
+
+ <script type="text/template" id="stats-template">
+ <span id="todo-count"><strong><%=remaining%></strong> item<% if (obj.remaining != 1) { %>s<% } %> left</span>
+ <ul id="filters">
+ <li>
+ <a class="selected" href="#!/">All</a>
+ </li>
+ <li>
+ <a href="#!/active">Active</a>
+ </li>
+ <li>
+ <a href="#!/completed">Completed</a>
+ </li>
+ </ul>
+ <% if (completed) { %>
+ <button id="clear-completed">Clear completed (<%=completed%>)</button>
+ <% } %>
+ </script>
+
+ <!-- Scripts here. Don't remove this ↓ -->
+ <script src="../assets/base.js"></script>
+
+ <!-- mootools -->
+ <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
+
+ <!-- epitome pre-compiled -->
+ <script src="../../../Epitome-min.js"></script>
+
+ <!-- fallback outside the main repo submodule-->
+ <script>window.Epitome || document.write('<script src="js/Epitome-min.js">\x3C/script>')</script>
+
+ <!-- todo app -->
+ <script src="js/models/todo-model.js"></script>
+ <script src="js/collections/todo-collection.js"></script>
+ <script src="js/views/todo-list.js"></script>
+ <script src="js/views/todo-main.js"></script>
+ <script src="js/app.js"></script>
+</body>
+</html>
Oops, something went wrong.
@@ -0,0 +1,73 @@
+(function(window) {
+ 'use strict';
+
+ var App = window.App;
+
+ // Your starting point. Enjoy the ride!
+ var todos = new App.TodoCollection(null, {
+ // a consistent collection if is needed if you want to use storage for a collection.
+ id: 'todos'
+ });
+
+ // populate from storage if available
+ todos.setUp(todos.retrieve());
+
+ // instantiate the todo list view
+ App.todoView = new App.TodoView({
+
+ // bind to the collection and its events and model events
+ collection: todos,
+
+ // encapsulating element to bind to
+ element: document.id('todo-list'),
+
+ // template to use
+ template: document.id('item-template').get('text')
+
+ });
+
+ // the main view is for the footer/stats/controls
+ App.mainView = new App.MainView({
+
+ // also bound to the same collection but with a different output logic.
+ collection: todos,
+
+ // encapsulating element to bind to
+ element: document.id('todoapp'),
+
+ // stats template from DOM
+ template: document.id('stats-template').get('text')
+ });
+
+ // the pseudo controller via Epitome.Router
+ App.router = new Epitome.Router({
+ routes: {
+ '': 'init',
+ '#!/': 'applyFilter',
+ '#!/:filter': 'applyFilter'
+ },
+
+ onInit: function() {
+ // we want to always have a state
+ this.navigate('#!/');
+ },
+
+ onApplyFilter: function(filter) {
+ // the filter is being used by the todo collection and view.
+ // when false, the whole collection is being passed.
+ todos.filterType = filter || false;
+
+ // render as per current filter
+ App.todoView.render();
+
+ // fix up the links quickie.
+ var self = this;
+ document.getElements('#filters li a').each(function(link) {
+ link.set('class', link.get('href') == self.req ? 'selected' : '');
+ });
+ }
+
+ });
+
+
+})(window);
@@ -0,0 +1,26 @@
+;(function(window) {
+ 'use strict';
+
+ window.App = window.App || {};
+
+ // a collection that holds the todos
+ App.TodoCollection = new Class({
+
+ // normal collection or Collection.Sync
+ Extends: Epitome.Collection,
+
+ // enable storage methods, namespaced as collection.
+ Implements: Epitome.Storage.localStorage('collection'),
+
+ // base model class prototype
+ model: App.Todo,
+
+ todoFilter: function(model) {
+ // references the filterType which the controller sets
+ return this.filterType === false ? true : model.get('completed') == this.filterType;
+ }
+
+ });
+
+
+}(window));
@@ -0,0 +1,32 @@
+;(function(window) {
+ 'use strict';
+
+ window.App = window.App || {};
+
+
+ // base structure for the todos themselves
+ App.Todo = new Class({
+
+ Extends: Epitome.Model,
+
+ options: {
+ defaults: {
+ completed: 'active',
+ title: ''
+ }
+ }
+ });
+
+ // a collection that holds the todos
+ App.TodoCollection = new Class({
+
+ Extends: Epitome.Collection,
+
+ Implements: Epitome.Storage.sessionStorage('collection'),
+
+ model: App.Todo
+
+ });
+
+
+}(window));
Oops, something went wrong.

0 comments on commit f9445c3

Please sign in to comment.