tweaking celebration counter in the home

app/assets/javascripts/application.js

@@ -20,4 +20,5 @@
 //= require ./app/app.js
 //= require_tree ./lib
 //= require_tree ./app
+//= require_tree ./flipclock
 

app/assets/javascripts/flipclock/counter.js

@@ -0,0 +1,153 @@
+App.addChild('Counter', {
+  el: ".counter",
+
+  initialize: function(){
+    function lpad(str, padString, length) {
+      while (str.length < length)
+        str = padString + str;
+      return str;
+    }
+
+    // Start by creating the digits
+    this.$el.addClass('flip-clock-wrapper');
+    this.max = parseFloat(this.$el.data('max'));
+    this.initial = parseFloat(this.$el.data('initial'));
+    this.rate = parseFloat(this.$el.data('rate'));
+    this.current = this.initial;
+    if(this.current >= this.max){
+      $('.counter_panel.dynamic').hide();
+      $('.counter_panel.static').fadeIn(5000);
+      return;
+    }
+
+    var that = this;
+    var currentDigits = lpad(this.current.toString(), "0", this.max.toString().length);
+
+    _.each(this.max.toString(), function(digit, index){
+      that.$el.append(that.createDigit(currentDigits[index]));
+      if(index == 1 || index == 4){
+        that.$el.append($('<div class="spacer">&nbsp;</div>'));
+      }
+      that.select(this.$('ul.flip:last'));
+    });
+
+    this.digits = this.$('ul.flip');
+    this.digits.addClass("play");
+
+    this.setTimer();
+  },
+
+  setTimer: function(){
+    var that = this;
+    this.timer = window.setInterval(function(){ that.incrementCounter() }, 1000);
+  },
+
+  changeBanner: function(){
+    $('.counter_panel.dynamic').fadeOut('slow', function(){
+      $('.counter_panel.static').fadeIn('slow');
+    });
+  },
+
+  fetchCounter: function(){
+    var that = this;
+    $.get("/pt/projects/total_backed").success(function(data){
+      var value = parseInt(data);
+      if(value >= that.max){
+        window.clearTimeout(that.timer);
+        var delta = that.max - that.current;
+        that.incrementDigit((that.digits.length - 1), delta);
+        that.digits.each(function(){
+          that.select($(this));
+        });
+        window.setTimeout(that.changeBanner, 3500);
+      }
+    });
+  },
+
+  incrementCounter: function(){
+    var that = this;
+    var old = this.current;
+    this.current += this.rate;
+
+    // We need to wait for real backer sum if we are to close to max
+    if(this.max - this.current < 50){
+      window.clearTimeout(this.timer);
+      this.timer = window.setInterval(function(){ that.fetchCounter() }, 5000);
+    }
+
+    var delta = parseInt(this.current) - parseInt(old);
+    this.incrementDigit((this.digits.length - 1), delta);
+    this.digits.each(function(){
+      that.select($(this));
+    });
+  },
+
+  incrementDigit: function(digitIndex, delta){
+    if(digitIndex < 0){
+      console.log('out of digits');
+    }
+    if(delta <= 0){
+      return;
+    }
+    var digit = $(this.digits[digitIndex]);
+    digit.data('value', ((digit.data('value') + 1) % 10));
+    if(digit.data('value') == 0){
+      this.incrementDigit(digitIndex - 1, 1);
+    }
+    this.incrementDigit(digitIndex, delta - 1);
+  },
+
+  select: function($obj) {
+    var digit = $obj.data('value');
+    if(typeof digit === "undefined") {
+      digit = 0;
+    }
+
+    var active = $obj.find('.flip-clock-active');
+    if(active.data('digit') == digit){
+      return;
+    }
+
+    var target = $obj.find('[data-digit="'+digit+'"]');
+    active.removeClass("flip-clock-active");
+    var before = $obj.find('.flip-clock-before').removeClass("flip-clock-before");
+
+    if(before.length > 0 && active.length > 0){
+      active.addClass('flip-clock-before');
+    }
+    else{
+      if(target.is(':first-child')) {
+        $obj.find(':last-child').addClass("flip-clock-before");
+      }
+      else {
+        target.prev().addClass("flip-clock-before");
+      }
+    }
+
+    target.addClass("flip-clock-active");
+  },
+
+  createDigit: function(value){
+    var html = $('<ul data-value="' + value + '" class="flip" />');
+
+    for(var x = 0; x < 10; x++) {
+      var item = $([
+                   '<li data-digit="'+x+'">',
+                   '<a href="#">',
+                   '<div class="up">',
+                   '<div class="shadow"></div>',
+                   '<div class="inn">'+x+'</div>',
+                   '</div>',
+                   '<div class="down">',
+                   '<div class="shadow"></div>',
+                   '<div class="inn">'+x+'</div>',
+                   '</div>',
+                   '</a>',
+                   '</li>'
+      ].join(''));
+      html.append(item);
+    }
+    return html;
+  }
+});
+

app/assets/stylesheets/application.css.sass

@@ -41,3 +41,7 @@ $images_path: "/assets/catarse/"
 @import resources/channels/about
 
 @import ./jquery-ui
+
+// Temporary styles for the 10M flipclock
+@import ./flipclock/flipclock
+@import ./flipclock/counter

app/assets/stylesheets/flipclock/_counter.sass

@@ -0,0 +1,26 @@
+.counter_panel
+  background: image-url('flipclock/bg_counter.png') left top no-repeat
+  width: 980px
+  height: 360px
+  margin: 2em auto
+  overflow: hidden
+  +border-radius(4px)
+
+  &.static
+    background: image-url('flipclock/bg_rewards.jpg') left top no-repeat
+    display: none
+
+  .counter_title
+    text-transform: uppercase
+    font-size: 15px
+    color: white
+    margin-top: 70px
+    text-align: center
+
+  .counter
+    overflow: hidden
+    margin: 40px auto 0 auto
+    width: 750px
+    .spacer
+      float: left
+      width: 20px

app/assets/stylesheets/flipclock/_flipclock.scss

@@ -0,0 +1,275 @@
+/* Reset */
+.flip-clock-wrapper * {
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.flip-clock-wrapper a {
+    cursor: pointer;
+    text-decoration: none;
+    color: #ccc;
+}
+
+.flip-clock-wrapper a:hover {
+    color: #fff;
+}
+
+.flip-clock-wrapper ul {
+    list-style: none
+}
+
+.flip-clock-wrapper.clearfix:before,
+.flip-clock-wrapper.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.flip-clock-wrapper.clearfix:after {
+    clear: both;
+}
+
+.flip-clock-wrapper.clearfix {
+    *zoom: 1;
+}
+
+/* Main */
+
+.flip-clock-wrapper {
+    min-height: 100%;
+    -webkit-user-select: none;
+}
+
+.flip-clock-meridium {
+	background: none;
+	box-shadow: 0 0 0 !important;
+	font-size: 36px !important;
+	color: rgb(49, 51, 51);
+	bottom: 10px;
+}
+
+
+.flip-clock-wrapper {
+    text-align: center;
+    position: relative;
+    width: 100%;
+    margin: 1em;
+}
+
+/* Skeleton */
+
+.flip-clock-wrapper ul {
+    position: relative;
+    float: left;
+    margin: 5px;
+    width: 78px;
+    height: 120px;
+    font-size: 80px;
+    font-weight: bold;
+    line-height: 87px;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
+}
+
+.flip-clock-wrapper ul li {
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+}
+
+.flip-clock-wrapper ul li:first-child {
+    z-index: 2;
+}
+
+.flip-clock-wrapper ul li a {
+    display: block;
+    height: 100%;
+    perspective: 200px;
+    margin: 0 !important;
+    overflow: visible !important;
+}
+
+.flip-clock-wrapper ul li a div {
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    overflow: hidden;
+}
+
+.flip-clock-wrapper ul li a div .shadow {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+
+.flip-clock-wrapper ul li a div.up {
+    transform-origin: 50% 100%;
+    top: 0;
+}
+
+.flip-clock-wrapper ul li a div.up:after {
+  content: "";
+  position:absolute;
+  top:59px;
+  left:0;
+  z-index: 5;
+    width: 100%;
+  height: 3px;
+  background-color: #689B31;
+  opacity: 0.4;
+}
+
+.flip-clock-wrapper ul li a div.down {
+    transform-origin: 50% 0%;
+    bottom: 0;
+}
+
+.flip-clock-wrapper ul li a div div.inn {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 200%;
+    color: #f0f0f0;
+    text-shadow: 0 1px 1px #689B31;
+    text-align: center;
+    background-color: #7AB73A;
+    border-radius: 4px;
+    font-size: 86px;
+}
+
+.flip-clock-wrapper ul li a div.up div.inn {
+    top: 0;
+    padding-top: 14px;
+
+}
+
+.flip-clock-wrapper ul li a div.down div.inn {
+    bottom: 0;
+    padding-top: 14px;
+}
+
+/* PLAY */
+
+.flip-clock-wrapper ul.play li.flip-clock-before {
+    z-index: 3;
+}
+
+.flip-clock-wrapper ul.play li.flip-clock-active {
+    animation: asd .5s .5s linear both;
+    z-index: 2;
+}
+
+@keyframes asd {
+    0% {
+        z-index: 2;
+    }
+    5% {
+        z-index: 4;
+    }
+    100% {
+        z-index: 4;
+    }
+}
+
+.flip-clock-wrapper ul.play li.flip-clock-active .down {
+    z-index: 2;
+    animation: turn .5s .5s linear both;
+}
+
+@keyframes turn {
+    0% {
+        transform: rotateX(90deg);
+    }
+    100% {
+        transform: rotateX(0deg);
+    }
+}
+
+.flip-clock-wrapper ul.play li.flip-clock-before .up {
+    z-index: 2;
+    animation: turn2 .5s linear both;
+}
+
+@keyframes turn2 {
+    0% {
+        transform: rotateX(0deg);
+    }
+    100% {
+        transform: rotateX(-90deg);
+    }
+}
+
+.flip-clock-wrapper ul li.flip-clock-active { z-index: 3; }
+
+/* SHADOW */
+
+.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
+    background: -moz-linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 66, 20, .1)), color-stop(100%, rgba(43, 66, 20, 1)));
+    background: linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: -o-linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: -ms-linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: linear-gradient(to bottom, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    animation: show .5s linear both;
+}
+
+.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
+    background: -moz-linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 66, 20, .1)), color-stop(100%, rgba(43, 66, 20, 1)));
+    background: linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: -o-linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: -ms-linear-gradient(top, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    background: linear-gradient(to bottom, rgba(43, 66, 20, .1) 0%, rgba(43, 66, 20, 1) 100%);
+    animation: hide .5s .3s linear both;
+}
+
+/*DOWN*/
+
+.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
+    background: -moz-linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 66, 20, 1)), color-stop(100%, rgba(43, 66, 20, .1)));
+    background: linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: -o-linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: -ms-linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: linear-gradient(to bottom, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    animation: show .5s linear both;
+}
+
+.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
+    background: -moz-linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 66, 20, 1)), color-stop(100%, rgba(43, 66, 20, .1)));
+    background: linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: -o-linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: -ms-linear-gradient(top, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    background: linear-gradient(to bottom, rgba(43, 66, 20, 1) 0%, rgba(43, 66, 20, .1) 100%);
+    animation: hide .5s .3s linear both;
+}
+
+@keyframes show {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes hide {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

app/assets/stylesheets/resources/projects/_index.sass

@@ -35,15 +35,14 @@
       padding-top: 20px
       padding-bottom: 30px
       float: left
+      width: 100%
       hr
-        +grid(8)
+        width: 100%
         border: none
         border-bottom: 1px rgba(black, 0.1) solid
-        +omega
         padding-top: 2px
       a
-        +grid(4)
-        +omega
+        float: right
         font-family: "Lato"
         font-size: 14px
         color: $pink

app/controllers/projects_controller.rb

@@ -7,6 +7,22 @@ class ProjectsController < ApplicationController
   respond_to :html
   respond_to :json, only: [:index, :show, :update]
 
+  # code fot the 10M celebration will soon be removed
+  helper_method :backer_stats
+  def backer_stats
+    @backer_stats ||= ActiveRecord::Base.connection.select_one(
+      "SELECT 
+          sum(value), 
+          sum(CASE WHEN confirmed_at BETWEEN (current_timestamp - '6 hours'::interval) AND (current_timestamp) THEN value ELSE NULL END)::numeric / (6*60*60) as rate 
+       FROM backers 
+       WHERE state NOT IN ('waiting_confirmation'::character varying::text, 'pending'::character varying::text, 'canceled'::character varying::text, 'deleted'::text)"
+    )
+  end
+
+  def total_backed
+    render json: backer_stats["sum"]
+  end
+
   def index
     index! do |format|
       format.html do
@@ -14,14 +30,14 @@ class ProjectsController < ApplicationController
           @projects = apply_scopes(Project).visible.order_for_search.includes(:project_total, :user, :category).page(params[:page]).per(6)
           return render partial: 'project', collection: @projects, layout: false
         else
-
           @title = t("site.title")
-          @recommends = if current_user && current_user.recommended_projects.present?
-                            current_user.recommended_projects.limit(3)
-                          else
-                            ProjectsForHome.recommends
-                          end
+          if current_user && current_user.recommended_projects.present?
+            @recommends = current_user.recommended_projects.limit(3)
+          else
+            @recommends = ProjectsForHome.recommends
+          end
 
+          @channel_projects = Project.from_channels.order_for_search.limit(3)
           @projects_near = Project.online.near_of(current_user.address_state).order("random()").limit(3) if current_user
           @expiring = ProjectsForHome.expiring
           @recent   = ProjectsForHome.recents

app/mailers/crowdfunding_poll.rb

@@ -0,0 +1,14 @@
+class CrowdfundingPoll < ActionMailer::Base
+  layout 'email'
+  def notify(user)
+    @user = user
+    address = Mail::Address.new(::Configuration[:email_contact])
+    address.display_name = ::Configuration[:company_name]
+    subject = "Qual a cara do financiamento coletivo no Brasil?"
+    mail({
+      from: address.format,
+      to: @user.email,
+      subject: subject
+    }).deliver
+  end
+end

app/models/project.rb

@@ -75,6 +75,10 @@ class Project < ActiveRecord::Base
     where("id IN (SELECT project_id FROM backers b WHERE b.state = 'confirmed' AND b.user_id = ?)", user_id)
   }
 
+  scope :from_channels, ->{
+    where("EXISTS (SELECT true FROM channels_projects cp WHERE cp.project_id = projects.id)")
+  }
+
   scope :to_finish, ->{ expired.with_states(['online', 'waiting_funds']) }
 
   attr_accessor :accepted_terms

app/models/projects_for_home.rb

@@ -4,4 +4,8 @@ class ProjectsForHome < Project
   scope :recommends, -> { where(origin: 'recommended') }
   scope :recents, -> { where(origin: 'recents') }
   scope :expiring, -> { where(origin: 'expiring') }
+
+  def to_partial_path
+    "projects/project"
+  end
 end

app/views/catarse_bootstrap/layouts/catarse_bootstrap.html.slim

@@ -16,5 +16,4 @@ html
 
 
   = javascript_include_tag :application
-  = render 'layouts/new_uservoice'
   = render 'layouts/analytics'

app/views/crowdfunding_poll/notify.html.slim

@@ -0,0 +1,21 @@
+- link_href = 'http://bit.ly/retratofinanciamentocoletivo'
+
+h2 style="font-size:22px;line-height:28px;margin:0 0 20px 0"
+  span style="font-family:arial,helvetica neue,helvetica,sans-serif"
+    = message.subject
+
+p Caro #{@user.name},
+p Ao apoiar um projeto no Catarse você não apenas ajudou a construir a nossa história como também a do financiamento coletivo no Brasil. 
+p 
+  | Agora, queremos conhecer melhor você e todos aqueles que decidiram compartilhar sonhos e projetos, para tentarmos entender quem são os personagens dessa história e para onde ela pode ir. 
+  | Gostaríamos de convidá-lo a responder a 
+  = link_to 'pesquisa Retrato do Financiamento Coletivo no Brasil', link_href
+  |  e a divulgá-la para todo mundo.
+p Só com a sua participação poderemos retratar esse complexo e múltiplo movimento que já ajudou milhares de ideias a sair do papel!
+p 
+  | Para responder a pesquisa, acesse: 
+  = link_to link_href, link_href
+p 
+  | Obrigado!
+  br/
+  | Equipe do Catarse

app/views/projects/_counter.html.slim

@@ -0,0 +1,5 @@
+.counter_panel.static
+.counter_panel.dynamic
+  .counter_title
+    | Apoie  um  projeto  e  vamos  juntos  aos  R$ 10  milhões  arrecadados!
+  .counter[data-max="10000000" data-initial="#{backer_stats['sum'].to_i}" data-rate="#{backer_stats['rate'] || 1.07851851851851851852}"]

app/views/projects/index.html.slim

@@ -1,6 +1,6 @@
 / Temporaly using channels banner
   = render partial: 'recommended_header'
-= render partial: 'channels/projects/banner'
+= render partial: 'counter'
 #page_content
   .container
     .main
@@ -10,43 +10,49 @@
             .title
               h2= t('sections.near.title')
           .projects
-            - @projects_near.each_with_index do |item,i|
-              == render 'project', project: item, custom_class: ((@projects_near.length == (i+1) ? 'last' : false) || (i==0 ? 'first' : false))
+            == render @projects_near
           .explore_link
-            hr
             = link_to t('main.links.near'), explore_path(anchor: :near)
+            hr
       .selected_projects.list
         .list_title
           .title
             h2= t('sections.selection.title')
         .projects
-          - @recommends.each_with_index do |item,i|
-            == render 'project', project: item, custom_class: ((@expiring.length == (i+1) ? 'last' : false) || (i==0 ? 'first' : false))
+          == render @recommends
         .explore_link
-          hr
           = link_to t('main.links.selected'), explore_path(anchor: :recommended)
+          hr
+
+      .channel_projects.list
+        .list_title
+          .title
+            h2= t('sections.channels.title')
+        .projects
+          == render @channel_projects
+        .explore_link
+          = link_to t('main.links.channels'), root_url(subdomain: 'asas')
+          hr
 
       .expiring_projects.list
         .list_title
           .title
             h2= t('sections.expiring.title')
         .projects
-          - @expiring.each_with_index do |item,i|
-            == render 'project', project: item, custom_class: ((@expiring.length == (i+1) ? 'last' : false) || (i==0 ? 'first' : false))
+          == render @expiring
         .explore_link
-          hr
           = link_to t('main.links.expiring'), explore_path(anchor: :expiring)
+          hr
 
       .recents_projects.list
         .list_title
           .title
             h2= t('sections.recents.title')
         .projects
-          - @recent.each_with_index do |item,i|
-            == render 'project', project: item, custom_class: ((@recent.length == (i+1) ? 'last' : false) || (i==0 ? 'first' : false))
+          == render @recent
         .explore_link
-          hr
           = link_to t('main.links.recents'), explore_path(anchor: :recent)
+          hr
 
     .sidebar
       .content

config/locales/en.yml

@@ -93,6 +93,7 @@ en:
       contact: Contact
   main:
     links:
+      channels: "explore the Asas Institute's Channel"
       selected: "explore more projects selected"
       expiring: "explore more expiring projects"
       recents: "explore more recent projects"
@@ -115,8 +116,8 @@ en:
       title: expiring
     recents:
       title: recent
-    partners:
-      title: partners
+    channels:
+      title: channels
   accept_terms_html: "I have read and accepted the %{link}."
   activerecord:
     errors:

config/locales/pt.yml

@@ -100,6 +100,7 @@ pt:
       contact: Contato
   main:
     links:
+      channels: "conheça o Canal Asas"
       selected: "explore mais projetos selecionados"
       expiring: "explore mais projetos na reta final"
       recents: "explore mais projetos recentes"
@@ -122,8 +123,8 @@ pt:
       title: "Na reta final"
     recents:
       title: "Novos e fresquinhos"
-    partners:
-      title: 'Parceiros'
+    channels:
+      title: 'Canal Asas'
   accept_terms_html: "Eu li e estou de acordo com os %{link}."
   activerecord:
     errors:

config/routes.rb

@@ -90,6 +90,7 @@ Catarse::Application.routes.draw do
     end
     collection do
       get 'video'
+      get 'total_backed'
     end
     member do
       put 'pay'

spec/models/project_spec.rb

@@ -251,6 +251,15 @@ describe Project do
     it{ should == [@p] }
   end
 
+  describe ".from_channels" do
+    before do
+      @p = create(:project, channels: [create(:channel)])
+      create(:project, channels: [])
+    end
+    subject{ Project.from_channels }
+    it{ should == [@p] }
+  end
+
   describe '#can_go_to_second_chance?' do
     let(:project) { create(:project, goal: 100, online_days: -3) }
     subject { project.can_go_to_second_chance? }

spec/models/projects_for_home_spec.rb

@@ -36,4 +36,9 @@ describe ProjectsForHome do
     it { should have(3).itens }
     it { should_not include(@not_expiring_01) }
   end
+
+  describe "to_partial_path" do
+    subject{ ProjectsForHome.new.to_partial_path }
+    it{ should == 'projects/project' }
+  end
 end