More tweaks, optimization

donnielrt · Sep 1, 2012 · 5f88bbc · 5f88bbc
1 parent 016616e
commit 5f88bbc
Show file tree

Hide file tree

Showing 25 changed files with 149 additions and 2,748 deletions.
diff --git a/public/js/app/main.js b/public/js/app/main.js
@@ -1,12 +1,15 @@
 require.config({
 	paths: {
-		"modernizr": "../libs/modernizr.min",
-		"bootstrap": "../libs/bootstrap.min",
-		"underscore": "../libs/underscore",
-		"backbone": "../libs/backbone",
-    "backbone-forms": "../libs/backbone-forms",
-		"analytics": "//google-analytics.com/ga",
-    "text": "../libs/text"
+
+    "modernizr": "../libs/modernizr.min",
+    "text": "../libs/require/text",
+    "underscore": "../libs/underscore",
+
+    "bootstrap": "../libs/bootstrap/bootstrap.min",
+
+		"backbone": "../libs/backbone/backbone",
+
+    "analytics": "//google-analytics.com/ga"
 	},
 	shim: {
 		'backbone': {

diff --git a/public/js/app/routes/router.js b/public/js/app/routes/router.js
@@ -5,6 +5,7 @@ define([
   'views/quests/form',
   'views/quests/remove',
   'views/quests/list',
+  'text!templates/common/header.html',
   'models/quest',
   'collections/quests'],
   function(
@@ -14,6 +15,7 @@ define([
     QuestFormView,
     QuestDeleteView,
     QuestsView,
+    HeaderView,
     Quest,
     Quests){
 
@@ -62,6 +64,10 @@ define([
 
 		},
 
+    getHeader: function (title, description) {
+      return _.template(HeaderView, { title: title, description: description } );
+    },
+
     quests: function (append) {
 
       // list quests
@@ -70,7 +76,7 @@ define([
       if(append) {
         this.appView.render().$el.append(questsView.el);
       } else {
-        this.appView.$el.html(questsView.el);
+        this.appView.$el.html(this.getHeader("Quests", "Here are you current quests")).append(questsView.el);
       }
 
 
@@ -81,11 +87,23 @@ define([
     questView: function (id) {
 
       var quest = new Quest({_id: id}),
-        questsView = new QuestsView({collection: null, model: quest});
+        questsView,
+        $root = this.appView.$el,
+        that = this;
+
+      questsView = new QuestView({model: quest, singleView: true});
+
+      quest.fetch({
+        success: function(model, response) {
+
+          $root.html(that.getHeader(model.get('name'), model.get('description')));
+          $root.append(questsView.$el);
+
+        }
+      });
+
 
-      quest.fetch();
 
-      this.appView.$el.html(questsView.render().$el);
       return this;
 
     },
@@ -95,33 +113,45 @@ define([
       var quest = new Quest(),
         questView = new QuestFormView({model: quest});
 
-      this.appView.$el.html(questView.render().$el);
+      this.appView.$el.html(this.getHeader("Create Quest", "Enter quest details here")).append(questView.render().$el);
 
       return this;
 
     },
 
 		questEdit: function (id) {
 
-			var quest = new Quest({_id: id}), questView;
+			var quest = new Quest({_id: id}),
+        questView,
+        $root = this.appView.$el,
+        that = this;
 
       questView = new QuestFormView({model: quest});
-			quest.fetch();
-
-			this.appView.$el.html(questView.render().$el);
+			quest.fetch({
+        success: function(model, response) {
+          $root.html(that.getHeader(model.get('name'), model.get('description')));
+          $root.append(questView.$el);
+        }
+      });
 
       return this;
 
 		},
 
 		questRemove: function (id) {
 
-      var quest = new Quest({_id: id}), questView;
+      var quest = new Quest({_id: id}),
+        questView,
+        $root = this.appView.$el,
+        that = this;
 
       questView = new QuestDeleteView({model: quest});
-      quest.fetch();
-
-      this.appView.$el.html(questView.render().$el);
+      quest.fetch({
+        success: function(model, response) {
+          $root.html(that.getHeader(model.get('name'), model.get('description')));
+          $root.append(questView.$el);
+        }
+      });
 
       return this;
 

diff --git a/public/js/app/templates/common/header.html b/public/js/app/templates/common/header.html
@@ -0,0 +1,4 @@
+<div class="hero-unit">
+    <h1><%= title %></h1>
+    <p><%= description %></p>
+</div>
diff --git a/public/js/app/templates/quests/_item.html b/public/js/app/templates/quests/_item.html
diff --git a/public/js/app/templates/quests/form.html b/public/js/app/templates/quests/form.html
@@ -1,21 +1,21 @@
 <div class="alert is-not-displayed"></div>
 <fieldset>
 
-    <legend><%= name %></legend>
+    <legend><%= isNew %> Quest</legend>
 
     <div class="control-group">
         <label class="control-label" for="name">Name</label>
 
         <div class="controls">
-            <input type="text" id="name" name="name" placeholder="Quest Name" value="<%= name %>"/>
+            <input type="text" id="name" class="input-xxlarge" name="name" placeholder="Quest Name" value="<%= name %>"/>
         </div>
     </div>
 
     <div class="control-group">
         <label class="control-label" for="description">Description</label>
 
         <div class="controls">
-            <textarea id="description" name="description" placeholder="Quest Description"><%= description %></textarea>
+            <textarea id="description" class="input-xxlarge" name="description" placeholder="Quest Description"><%= description %></textarea>
         </div>
     </div>
 

diff --git a/public/js/app/templates/quests/list.html b/public/js/app/templates/quests/list.html
@@ -1,9 +1,30 @@
 <div class="row-fluid quests">
 
-    <% if(!Quests.length) { %>
-    <ul id="#quests-list">
-        <li class="span12"><h2>No Quests found!</h2></li>
-    </ul>
-    <% } %>
+    <div class="well span12">
+
+        <ul id="#quests-list" class="list list-plain">
+        <% if(!Quests.length) { %>
+            <li class="span12"><h2>You have not created any quests!</h2><p>Why don't you <a href="quests/new">begin your epic journey</a>?</p></li>
+        <% } else { %>
+            <% _.each(Quests, function (quest) {
+                if(++ctr % 4 === 0) {
+                    newRow = " list-row-new";
+                }
+                else {
+                    newRow = "";
+                }
+            %>
+            <li class="quest-item<%= newRow %>">
+                <a href="#quests/<%= quest._id %>" data-internal="true"><h2><%= quest.name %></h2></a>
+                <p><%= quest.description %></p>
+                <p><a class="btn" href="#quests/<%= quest._id %>" data-internal="true">View details &raquo;</a></p>
+
+            </li>
+            <%
+            }); %>
+        <% }  %>
+        </ul>
+
+    </div>
 
 </div><!--/row-->
diff --git a/public/js/app/templates/quests/remove.html b/public/js/app/templates/quests/remove.html
@@ -1,3 +1,3 @@
 <h2>Are you sure you want to delete <%= name %>?</h2>
 <p>This action cannot be undone!</p>
-<p><a class="btn btn-remove" href="#quests/<%= _id %>/remove" data-internal="true"><i class="icon-trash"></i> Delete</a> <a href="#quests/<%= _id %>" class="btn btn-cancel" data-internal="true">Cancel</a></p>
+<p><a class="btn btn-remove btn-danger" href="#quests/<%= _id %>/remove" data-internal="true"><i class="icon-trash"></i> Delete</a> <a href="#quests/<%= _id %>" class="btn btn-cancel" data-internal="true">Cancel</a></p>
diff --git a/public/js/app/templates/quests/single.html b/public/js/app/templates/quests/single.html
@@ -1,25 +1,30 @@
-<div class="row-fluid">
-	<div class="span8"><h2><%= name %></h2></div>
-	<div class="span4">
-		<div class="span4">
-			<div class="btn-group">
-				<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
-				<ul class="dropdown-menu">
-					<li><a data-internal="true" href="#quests/<%= _id %>/edit">Edit</a></li>
-					<li><a data-internal="true" href="#quests/<%= _id %>/remove">Remove</a></li>
-				</ul>
-
-			</div>
-		</div>
-	</div>
-</div>
-
-<div class="row-fluid">
-	<div class="span12"><p><%= description %></p></div>
-</div>
-
-<div class="row-fluid">
-
-	<div class="span3"><a class="btn"  data-internal="true" href="<%= lastPage %>">&laquo; Back</a></div>
+<div class="well">
+
+    <div class="row-fluid">
+        <div class="span12"><h2><%= name %></h2></div>
+    </div>
+
+    <div class="row-fluid">
+        <div class="span12"><p><%= description %></p></div>
+    </div>
+
+    <div class="row-fluid">
+
+        <div class="span12">
+
+            <div class="btn-group actions-group pull-left">
+                <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Actions <span
+                    class="caret"></span></a>
+                <ul class="dropdown-menu">
+                    <li><a data-internal="true" href="#quests/<%= _id %>/edit">Edit</a></li>
+                    <li><a data-internal="true" href="#quests/<%= _id %>/remove">Delete</a></li>
+                </ul>
+
+            </div>
+            <a class="btn pull-left" data-internal="true" href="<%= lastPage %>">&laquo; Back</a>
+
+        </div>
+
+    </div>
 
 </div>
diff --git a/public/js/app/views/quests/form.js b/public/js/app/views/quests/form.js
@@ -37,6 +37,13 @@ define([
 
 			var templateData = this.model.toJSON();
 
+      templateData.isNew = this.model.isNew() ? "Create " : "Edit ";
+
+      _.defer(function() {
+
+        // datepicker
+
+      });
       this.$el.html($(_.template(questFormTemplate)(templateData)));
 
       return this;

diff --git a/public/js/app/views/quests/list.js b/public/js/app/views/quests/list.js
@@ -1,12 +1,12 @@
-define(['backbone', 'views/quests/single', 'text!templates/quests/list.html'], function(Backbone, QuestView, questsTemplate){
+define(['backbone', 'text!templates/quests/list.html'], function(Backbone, questsTemplate){
 
   "use strict";
 
 	var QuestsView = Backbone.View.extend({
 
-		id:  "quests-list",
-    tagName: "ul",
-    className: "list-plain list",
+		tag: "ul",
+    id: "quests-list",
+    className: "list list-plain",
 
 		template: _.template(questsTemplate),
 
@@ -35,35 +35,10 @@ define(['backbone', 'views/quests/single', 'text!templates/quests/list.html'], f
 
 		render: function() {
 
-      var $root = this.$el, data = {}, ctr = 0, singleView = _.isEmpty(this.collection), questView;
-
-			// we use this for both a single or multiple quests
-      if(!singleView) {
-        data = this.collection.toJSON();
-      } else if (!_.isEmpty(this.model)) {
-        data = [this.model.toJSON()];
-      }
+      var $root = this.$el, Quests = this.collection.toJSON();
 
       // set up base template
-      $root.empty().before(this.template({Quests: data}));
-
-      // multiple quests
-      if(!singleView) {
-
-				this.collection.each(function (quest) {
-
-					questView = new QuestView({model: quest, singleView: false, newRow: (++ctr % 4 === 0) });
-
-          $root.append(questView.render().$el);
-        });
-
-      } else {
-
-        questView = new QuestView({model: this.model, singleView: true, lastPage: '#quests' });
-
-        $root.append(questView.$el);
-
-      }
+      $root.html(this.template({Quests: Quests, ctr: 0}));
 
       return this;
 		}

diff --git a/public/js/app/views/quests/single.js b/public/js/app/views/quests/single.js
@@ -11,7 +11,7 @@ define([
 
 	return Backbone.View.extend({
 
-		tagName:  "li",
+		tagName:  "div",
 
 		events: {
 		},
@@ -30,7 +30,7 @@ define([
 
 		},
 
-		render: function(options) {
+		render: function() {
 
 			var templateData = this.model.toJSON();
 
@@ -40,7 +40,7 @@ define([
 
       if(this.singleView) {
         templateData = _.extend(this.model.toJSON(), { lastPage: this.lastPage } );
-        this.$el.addClass("span8").html(_.template(singleQuestTemplate)(templateData));
+        this.$el.html(_.template(singleQuestTemplate)(templateData));
       } else {
         this.$el.addClass("span4").html(_.template(questItemTemplate)(templateData));
       }