Merge pull request #62 from headwinds/gh-pages

Animating the podiums plus odd duplicate rendering

6 files changed, 261 insertions, 41 deletions

diff --git a/examples/modular-backbone/css/style.css b/examples/modular-backbone/css/style.css
index 589fe37..9af288d 100644
--- 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
index 9239cb2..3c3973f 100644
--- 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
index 629e96f..2bb4ec4 100644
--- 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,13 +114,16 @@ 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');
@@ -53,8 +131,93 @@ define([
             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
index d5dc83c..e05e5a5 100644
--- 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
index 5e52fbe..ae0166c 100644
--- a/examples/modular-backbone/templates/contributors/contributorsListTemplate.html
+++ b/examples/modular-backbone/templates/contributors/contributorsListTemplate.html
@@ -1,20 +1,30 @@
-<ul class="contributors">
-   <% _.each(contributors, function(contributor){ %>
-   <li style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
-   <div class="contributor" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
-      <ul>
-        <li class="pic" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
-          <p><a href="<%= contributor.get('githubPath') %>"><img width="<%= contributor.get("picWidth") %>" src="<%= contributor.get('avatar_url') %>&s=<%= contributor.get("picWidth") %>"></a></p>
-        </li>
-        <li class="username" style="width:<%= contributor.get('picWidth')%>;">
-            <p><a href="<%= contributor.get('githubPath') %>"><%= contributor.get("login") %></a></p>
-        </li>
-        <li class="contributions" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
-            <p style="background-color:<%= contributor.get("medalHex") %>"><%= contributor.get("contributions") %></p>
-        </li>
-      </ul> 
-    </div>
-  </li>  
-  <% }); %>
-</ul>
+<div class="base" style="height:<%= podium.baseHeight %>">
+  <p><%= podium.achievement %></p>
+</div>  
+<div class="top">
+  <ul class="contributors">
+     <% _.each(contributors, function(contributor){ %>
+     <li style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+     <div class="contributor" id="<%= contributor.get('name')%>" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+        <ul>
+          <li class="pic" style="background-color: <%= contributor.get('medalHex') %>; width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+            <p>
+              <a href="<%= contributor.get('githubPath') %>" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>; background: url(<%= contributor.get('avatar_url') %>) no-repeat center; background-size: <%= String( Number(contributor.get('picWidth').split("px")[0] ) - 40) + 'px' %> <%= String( Number(contributor.get('picWidth').split("px")[0] ) - 40) + 'px'  %>">
+              </a>
+            </p>
+          </li>
+          <li class="username" style="width:<%= contributor.get('picWidth')%>;">
+              <p><a href="<%= contributor.get('githubPath') %>"><%= contributor.get("login") %></a></p>
+          </li>
+          <li class="contributions" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+              <p style="background-color:<%= contributor.get("medalHex") %>"><%= contributor.get("contributions") %></p>
+          </li>
+        </ul> 
+      </div>
+    </li>  
+    <% }); %>
+  </ul>
+</div>
+
+
 
diff --git a/examples/modular-backbone/templates/contributors/contributorsTemplate.html b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
index 08643f2..10e1652 100644
--- a/examples/modular-backbone/templates/contributors/contributorsTemplate.html
+++ b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
@@ -6,5 +6,9 @@
     <tr><td><%= total_contributions %></td><td><%= total_contributors %></td></tr>
   </tbody>
 </table>
-<div id="contributors-list"></div>
+<div id="contributors-list">
+	<div id="bronze-podium" class="podium" style="width:640px"></div>
+	<div id="gold-podium" class="podium" style="width:120px"></div>
+	<div id="silver-podium" class="podium" style="width:200px"></div>
+</div>