Initial commit

elHornair · May 26, 2012 · b001903 · b001903
1 parent 119a926
commit b001903
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+vendors
+.idea
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8 />
+    <title></title>
+
+    <!--<link rel="stylesheet" type="text/css" href="static/main.css" />-->
+
+    <script src="vendors/yui-3.5.1/build/yui/yui-min.js"></script>
+    <script src="js/main.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+    <header>
+        <h1>Cheese App - Cheesy can be a good thing</h1>
+        <h2></h2>
+    </header>
+
+    <div id="content"></div>
+
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,74 @@
+/*global YUI */
+YUI({
+    modules: {
+        'cheese-model': {
+            fullpath: "js/model/CheeseModel.js"
+        },
+        'cheese-view': {
+            fullpath: "js/view/CheeseView.js"
+        },
+        'cheese-list': {
+            fullpath: "js/model/CheeseList.js"
+        },
+        'cheese-list-view': {
+            fullpath: "js/view/CheeseListView.js"
+        }
+    }
+}).use('app-base', 'app-transitions', 'cheese-model', 'cheese-view', 'cheese-list', 'cheese-list-view', function (Y) {
+
+    'use strict';
+
+    var app,
+        myCheeseList;
+
+    myCheeseList = new Y.CheeseList();
+    myCheeseList.add([
+        {type: 'Gruyere'},
+        {type: 'Emmentaler'},
+        {type: 'Jesus'}
+    ]);
+
+    app = new Y.App({
+        transitions: true,
+        viewContainer: '#content',
+        views: {
+            cheeseList: {
+                type: 'CheeseListView'
+            },
+            cheese: {
+                type: 'CheeseView',
+                parent: 'cheeseList'
+            }
+        },
+        routes: [{
+            path: '/cheese',
+            callback: function () {
+                this.showView('cheeseList', {
+                    model: myCheeseList
+                });
+                Y.one('h2').set('text', 'Mmmmmmh, cheese');
+            }
+        }, {
+            path: '/cheese/:id',
+            callback: function (request) {
+                var cheeseModel = myCheeseList.getByType(request.params.id);
+
+                if (!Y.Lang.isUndefined(cheeseModel)) {
+                    this.showView('cheese', {
+                        model: cheeseModel
+                    });
+                    Y.one('h2').set('text', cheeseModel.get('type'));
+                } else {
+                    this.fire('error', {
+                        type : 'cheese not found',
+                        error: "There was no cheese with type " + request.params.id + " found"
+                    });
+                }
+            }
+        }]
+    });
+
+    app.render();
+    app.navigate('/cheese');
+
+});
diff --git a/js/model/CheeseList.js b/js/model/CheeseList.js
@@ -0,0 +1,32 @@
+/*global YUI */
+YUI.add('cheese-list', function (Y) {
+
+    'use strict';
+
+    Y.CheeseList = Y.Base.create('cheeseList', Y.ModelList, [], {
+
+        model: Y.CheeseModel,
+
+        getTotalPieces: function () {
+            var numSlices = 0;
+
+            this.each(function (item) {
+                numSlices += item.get('pieces');
+            });
+
+            return numSlices;
+        },
+
+        getByType: function (type) {
+            var filteredList = Y.Array.filter(this.toArray(), function (item) {
+                return item.get('type') === type;
+            });
+
+            if (filteredList.length !== 0) {
+                return filteredList[0];
+            }
+        }
+
+    });
+
+}, '0.1', {requires: ['model-list', 'cheese-model']});
diff --git a/js/model/CheeseModel.js b/js/model/CheeseModel.js
@@ -0,0 +1,31 @@
+/*global YUI */
+YUI.add('cheese-model', function (Y) {
+
+    'use strict';
+
+    Y.CheeseModel = Y.Base.create('cheeseModel', Y.Model, [], {
+
+        allGone: function () {
+            return this.get('pieces') === 0;
+        },
+
+        eatPiece: function () {
+            if (this.allGone()) {
+                this.fire('error', {
+                    type : 'eat',
+                    error: "Oh snap! There isn't any cheese left."
+                });
+            } else {
+                this.set('pieces', this.get('pieces') - 1);
+            }
+        }
+    }, {
+        ATTRS: {
+            pieces: {
+                value: 3
+            },
+            type: {}
+        }
+    });
+
+}, '0.1', {requires: ['model']});
diff --git a/js/view/CheeseListView.js b/js/view/CheeseListView.js
@@ -0,0 +1,31 @@
+/*global YUI */
+YUI.add('cheese-list-view', function (Y) {
+
+    'use strict';
+
+    Y.CheeseListView = Y.Base.create('cheeseListView', Y.View, [], {
+
+        _template: '<p>There are ({pieces} pieces remaining)</p><ul>{itemList}</ul>',
+        _itemTemplate: '<li>Delicious <a href="/cheese/{type}">{type}</a> ({pieces} pieces remaining)</li>',
+
+        render: function () {
+            var container = this.get('container'),
+                html,
+                renderedItems = '';
+
+            this.get('model').each(function (item) {
+                renderedItems += Y.Lang.sub(this._itemTemplate, item.toJSON());
+            }, this);
+
+            html = Y.Lang.sub(this._template, {
+                pieces: this.get('model').getTotalPieces(),
+                itemList: renderedItems
+            });
+
+            container.setHTML(html);
+            return this;
+        }
+
+    });
+
+}, '0.1', {requires: ['model', 'cheese-list']});
diff --git a/js/view/CheeseView.js b/js/view/CheeseView.js
@@ -0,0 +1,35 @@
+/*global YUI */
+YUI.add('cheese-view', function (Y) {
+
+    'use strict';
+
+    Y.CheeseView = Y.Base.create('cheeseView', Y.View, [], {
+
+        _template: '{pieces} piece(s) of delicious {type} remaining.<button class="eat">Eat a Piece!</button>',
+
+        events: {
+            '.eat': {click: 'eatPiece'}
+        },
+
+        initializer: function () {
+            this.get('model').after('change', this.render, this);
+        },
+
+        render: function () {
+
+            var container = this.get('container'),
+                html = Y.Lang.sub(this._template, this.get('model').toJSON());
+
+            // TODO: this call somehow throws an error, when the view is not rendered for the first time
+            container.setHTML(html);
+
+            return this;
+        },
+
+        eatPiece: function (e) {
+            this.get('model').eatPiece(e);
+        }
+
+    });
+
+}, '0.1', {requires: ['model', 'cheese-model']});