diff options
4 files changed, 215 insertions, 33 deletions
diff --git a/examples/modular-backbone/css/style.css b/examples/modular-backbone/css/style.css index 589fe37..9469c2a 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,37 @@ 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; + width: 320px; +} + +#page #contributors-list .podium .base { + display: block; + position: relative; + float: left; + width: 320px; + background-color: rgba(214, 214, 214, 0.38); +} + +#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 +192,6 @@ h1{ padding: 0px; top: 0px; left: 0px; - border: 1px solid #CCC; } #page #contributors-list ul.contributors li div.contributor ul { @@ -195,16 +225,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 +278,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/views/contributors/ContributorsListView.js b/examples/modular-backbone/js/views/contributors/ContributorsListView.js index 629e96f..2976896 100644 --- a/examples/modular-backbone/js/views/contributors/ContributorsListView.js +++ b/examples/modular-backbone/js/views/contributors/ContributorsListView.js @@ -7,29 +7,81 @@ define([ ], function($, _, Backbone, ContributorsCollection, contributorListTemplate){ var ContributorsListView = Backbone.View.extend({ + + goldContributors : [], + silverContributors : [], + bronzeContributors : [], + el : $("#contributors-list"), tagName:"ul", render : function() { + var that = this; + var that = this; 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', + achievement: 'Over 50 Contributions' + }; + + var silverPodium = { + baseHeight: '60px', + achievement: '5 - 50 Contributions' + } + + var bronzePodium = { + baseHeight: '40px', + 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) { @@ -40,12 +92,15 @@ define([ if ( contributions >= 50 ) { medalHex = goldMedalHex; picWidth = '160px'; + contributors = that.goldContributors; } else if ( contributions < 50 && contributions >= 5) { medalHex = silverMedalHex; - picWidth = '120px'; + picWidth = '105px'; + contributors = that.silverContributors; } else { medalHex = bronzeMedalHex; picWidth = '80px'; + contributors = that.bronzeContributors; } githubPath = "https://github.com/" + contributor.get('login'); @@ -53,8 +108,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/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..e316fdc 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"></div> + <div id="gold-podium" class="podium"></div> + <div id="silver-podium" class="podium"></div> +</div> |