Merge pull request thomasdavis#62 from headwinds/gh-pages

thomasdavis · thomasdavis · commit 3c2636d722c3 · 2012-11-13T14:49:14.000-08:00
Animating the podiums plus odd duplicate rendering
diff --git a/examples/modular-backbone/css/style.css b/examples/modular-backbone/css/style.css
@@ -52,7 +52,7 @@ h1{
 }
 
 #page  {
-  
+  width: 960px;
 }
 
  #page .main {
@@ -138,6 +138,36 @@ h1{
 
 }
 
+#page #contributors-list .podium {
+  display: block;
+  position: relative;
+  float: left;
+  height: 100%;
+  width: 320px;
+}
+
+#page #contributors-list .podium .top {
+  display: block;
+  position: relative;
+  float: left;
+}
+
+#page #contributors-list .podium .base {
+  display: block;
+  position: relative;
+  float: left;
+  background-color: rgba(214, 214, 214, 0.38);
+  width: 100%;
+}
+
+#page #contributors-list .podium .base p {
+  text-align: left;
+  color: #666;
+  font-weight: normal; 
+  font-size: 12px; 
+  margin-left: 10px;
+}
+
 #page #contributors-list ul.contributors {
     list-style: none;
     margin: 0px;
@@ -161,7 +191,6 @@ h1{
     padding: 0px;
     top: 0px;
     left: 0px;
-    border: 1px solid #CCC;
  } 
 
  #page #contributors-list ul.contributors li div.contributor ul {
@@ -195,16 +224,15 @@ h1{
     left: 0px;
     width: 100%;
     height: 14px;
-    background-color: #CCC;
     text-align: center;
     font-size: 10px;
-    font-weight: bold;
-    color:#999;
+    font-weight: normal;
+    color:#333;
     line-height: 14px !important;
  }
 
  #page #contributors-list ul.contributors li div.contributor ul li.username p a {
-    color:#999;
+    color:#333;
     text-decoration: none;
  }
 
@@ -249,12 +277,11 @@ h1{
     width:100%;
     height: 15%;
     top: 85%;
-    background-color: #333;
     text-align: center;
     line-height: 14px !important;
     font-size: 10px;
-    font-weight: bold;
-    color:#666;
+    font-weight: normal;
+    color:#333;
     margin:0px;
     padding:0px;
  }
diff --git a/examples/modular-backbone/js/router.js b/examples/modular-backbone/js/router.js
@@ -8,6 +8,9 @@ define([
   'views/contributors/ContributorsView',
   'views/footer/FooterView'
 ], function($, _, Backbone, HomeView, ProjectsView, ContributorsView, FooterView) {
+  
+  var contributorsView;
+
   var AppRouter = Backbone.Router.extend({
     routes: {
       // Define some URL routes
@@ -18,7 +21,9 @@ define([
       '*actions': 'defaultAction'
     }
   });
+  
   var initialize = function(){
+
     var app_router = new AppRouter;
     
     app_router.on('route:showProjects', function(){
@@ -31,12 +36,15 @@ define([
 
     app_router.on('route:showContributors', function () {
     
+        // there is a problem here -- when it draws the first everything is fine
+        // but when it returns to this view, it adds the items to the list again
+        // even though the collection has the same number of models
+        // why won't it empty the divs?! I can do it in the console... 
+        if ( String(contributorsView) !== "undefined" ) contributorsView.clearListView();
+
         // Like above, call render but know that this view has nested sub views which 
         // handle loading and displaying data from the GitHub API  
-        var contributorsView = new ContributorsView();
-        //contributorsView.initialize();
-        //contributorsView.render();
-
+        contributorsView = new ContributorsView();
     });
 
     app_router.on('route:defaultAction', function (actions) {
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsListView.js b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
@@ -7,29 +7,104 @@ define([
 ], function($, _, Backbone, ContributorsCollection, contributorListTemplate){
   
   var ContributorsListView = Backbone.View.extend({
+
+    goldContributors : [],
+    silverContributors : [],
+    bronzeContributors : [],
+
     el : $("#contributors-list"),
     tagName:"ul",
-    render : function() {
+    
+    initialize : function() {
+     
+      var that = this;
+      that.bind("reset", that.clearView);
+    },
+
+    clearListView : function(){
 
+      console.log("clearing sub sub view");
+
+      $("#gold-podium").empty();
+      $("#silver-podium").empty();
+      $("#bronze-podium").empty();
+      
+    }, 
+
+    render : function() {
+   
+        // when it returns to this view, why does it redraw without clearing the lists?!
+        // something to do with how it's animating I think...not sure
         var that = this;
+
+        that.clearListView(); 
+       
         that.awardMedals(this.collection.models); 
 
+        // hide the container list while adding contributors
+        $('#contributors-list').hide();
+
+        // there are 3 podiums for each group 
+        var podium;
+
+        var goldPodium = {
+            baseHeight: '80px',
+            baseWidth: '120px',
+            achievement: 'Over 50 Contributions'
+        }; 
+
+        var silverPodium = {
+           baseHeight: '60px',
+           baseWidth: '160px',
+           achievement: '5 - 50 Contributions'
+        }
+
+         var bronzePodium = {
+           baseHeight: '40px',
+           baseWidth: '680px',
+           achievement: '1 - 5 Contributions'
+        }
+
+
         var data = {
-              contributors: this.collection.models,
-              _: _ 
+              contributors: that.goldContributors,
+              _: _,
+              podium : goldPodium 
             };
 
+        // render gold list  
+        data.contributors = that.goldContributors;
+        data.podium = goldPodium;
         var compiledTemplate = _.template( contributorListTemplate, data );
-        $("#contributors-list").html( compiledTemplate ); 
+        $("#gold-podium").html( compiledTemplate ); 
  
+        // render silver list
+        data.contributors = that.silverContributors;
+        data.podium = silverPodium;
+        var compiledTemplate = _.template( contributorListTemplate, data );
+        $("#silver-podium").html( compiledTemplate ); 
+
+        // render bronze list 
+        data.contributors = that.bronzeContributors;
+        data.podium = bronzePodium;
+        var compiledTemplate = _.template( contributorListTemplate, data );
+        $("#bronze-podium").html( compiledTemplate ); 
+
+        that.animate();
+
         return this;
       }, 
 
       awardMedals : function(aModels) {
+
+        var that = this; 
+
         var goldMedalHex = '#CFB52B';
         var silverMedalHex = '#E6E8FA';
         var bronzeMedalHex = '#A67D3D';
         var githubPath;
+        var contributors;
+        var count = 0;  
 
         _.each(aModels, function(contributor) {
 
@@ -39,22 +114,110 @@ define([
 
             if ( contributions >= 50 ) {
               medalHex = goldMedalHex;
-              picWidth = '160px';
+              picWidth = '120px';
+              contributors = that.goldContributors; 
             } else if ( contributions < 50 && contributions >= 5) {
               medalHex = silverMedalHex;
-              picWidth = '120px';
+              picWidth = '100px';
+              contributors = that.silverContributors; 
             } else {
               medalHex = bronzeMedalHex;
               picWidth = '80px';
+              contributors = that.bronzeContributors; 
             }
 
             githubPath = "https://github.com/" + contributor.get('login');
 
             contributor.set( 'medalHex', medalHex);
             contributor.set( 'picWidth', picWidth);
             contributor.set( 'githubPath', githubPath);
+            contributor.set( 'name', 'contributor' + count ); 
+            contributors.push(contributor);
+
+            count++; 
+
+        });
+      },
 
+      animate : function() {
+
+        var that = this; 
+
+        console.log("animating...");
+
+        $("#gold-podium").hide();
+        $("#silver-podium").hide();
+        $("#bronze-podium").hide();
+
+
+        // hide the container list while adding contributors
+        $('#contributors-list').show();
+
+        // animate in bronze
+        $("#bronze-podium").find(".base").hide();
+        $("#bronze-podium").find(".base").slideDown('slow').delay(0);
+
+        _.each(that.bronzeContributors, function(contributor) {
+          var hideId = '#' + contributor.get('name'); 
+
+          $( hideId ).hide(); 
+     
+        });
+
+        var bronzeDelayCount = 1000;
+        var bronzeDelayInc = 200;
+        _.each(that.bronzeContributors, function(contributor) {
+            var animateId = '#' + contributor.get('name'); 
+
+            $( animateId ).delay(bronzeDelayCount).slideDown('slow');
+            bronzeDelayCount += bronzeDelayInc;
+        });
+
+        
+        console.log(bronzeDelayCount);
+
+        // animate in silver
+        $("#silver-podium").find(".base").hide();
+        $("#silver-podium").find(".base").slideDown('slow').delay(bronzeDelayCount);
+        _.each(that.silverContributors, function(contributor) {
+          var hideId = '#' + contributor.get('name'); 
+
+          $( hideId ).hide(); 
+     
         });
+
+        var silverDelayCount = bronzeDelayCount;
+        var silverDelayInc = 400;
+        _.each(that.silverContributors, function(contributor) {
+            var animateId = '#' + contributor.get('name'); 
+
+            $( animateId ).delay(silverDelayCount).slideDown('slow');
+            silverDelayCount += silverDelayInc;
+        });
+
+        // animate in gold 
+        $("#gold-podium").find(".base").hide();
+        $("#gold-podium").find(".base").slideDown('slow').delay(silverDelayCount);
+        _.each(that.goldContributors, function(contributor) {
+          var hideId = '#' + contributor.get('name'); 
+
+          $( hideId ).hide(); 
+     
+        });
+
+        var goldDelayCount = silverDelayCount;
+        var goldDelayInc = 600;
+        _.each(that.goldContributors, function(contributor) {
+            var animateId = '#' + contributor.get('name'); 
+
+            $( animateId ).delay(goldDelayCount).slideDown('slow');
+            goldDelayCount += goldDelayInc;
+        });
+
+        $("#bronze-podium").show();
+        $("#silver-podium").show();
+        $("#gold-podium").show();
+
       }
 
   });
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsView.js b/examples/modular-backbone/js/views/contributors/ContributorsView.js
@@ -7,6 +7,8 @@ define([
   'text!templates/contributors/contributorsTemplate.html'
 ], function($, _, Backbone, ContributorsCollection, ContributorsListView, contributorsTemplate){
 
+  var contributorsListView;
+
   var ContributorsView = Backbone.View.extend({
     
     el: $("#page"),
@@ -21,7 +23,7 @@ define([
 
       this.collection = new ContributorsCollection([]); 
       this.collection.fetch({ success : onDataHandler, dataType: "jsonp" });
-
+  
     },
 
     render: function(){
@@ -39,7 +41,7 @@ define([
       this.$el.html( compiledTemplate ); 
 
       // sub view 
-      var contributorsListView = new ContributorsListView({ collection: this.collection}); 
+      contributorsListView = new ContributorsListView({ collection: this.collection}); 
       contributorsListView.render();
 
     },
@@ -54,9 +56,15 @@ define([
       });
 
       return total; 
+    },
+
+    clearListView: function() {
+      console.log("clearing sub view");
+      contributorsListView.clearListView();
     }
 
 
+
   });
   return ContributorsView;
 });
diff --git a/examples/modular-backbone/templates/contributors/contributorsListTemplate.html b/examples/modular-backbone/templates/contributors/contributorsListTemplate.html
diff --git a/examples/modular-backbone/templates/contributors/contributorsTemplate.html b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
