Micropost character countdown (Rails Tutorial, 2nd Ed, Chapter 10, Exercise 7)

Question

I attempted the micropost character countdown in The Rails Tutorial (Chapter 10, Exercise 7) using the information here as a base and with some help from StackOverflow answe

Answer 1

I am also going through this tutorial and found this post and while I like the css you added to make this look uniform (which I have taken to use as my own :)) I think your solution for this is over-complicated. For me it was simply two changes: the js script and adding the script to my view.

My JS file: character_countdown.js

function updateCountdown() {
  // 140 characters max
  var left = 140 - jQuery('.micropost_text_area').val().length;
  if(left == 1) {
    var charactersLeft = ' character left.'
  }
  else if(left < 0){
    var charactersLeft = ' characters too many.'
  }
  else{
    var charactersLeft = ' characters left.'
  }
  jQuery('.countdown').text(Math.abs(left) + charactersLeft);
}

jQuery(document).ready(function($) {
  updateCountdown();
  $('.micropost_text_area').change(updateCountdown);
  $('.micropost_text_area').keyup(updateCountdown);
});

and here is where I added it into the view

<script src="app/assets/javascripts/character_countdown.js"></script>
<%= form_for(@micropost) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>

Please let me know what you think :)

Answer 2

I've found a solution to both my questions (pluralization and getting rid of the minus numbers in all locales) that I think is pretty good, so I'll explain it in detail here and hopefully someone will find it useful.

If you want to see what it looks like before delving into the details, you can try it out for yourself at my Sample App deployment at Heroku.

Config

This solution uses the i18n-js gem, which is "a small library to provide the Rails I18n translations on the Javascript." The gem is great, but unfortunately doesn't play nice with Heroku as I would like, and doesn't seem like it will for the foreseeable future. So, the following configurations will need to be changed:

config/application.rb

# ...
config.assets.initialize_on_precompile = true

This means that before every deploy to Heroku, rake assets:precompile will need to be run, and once you've confirmed a successful deployment, run rake assets:clean to begin developing assets again. If this is too annoying, you'll need another solution.

Update:

If you enable user-env-compile in your Heroku environment, you can get Heroku to precompile your assets and still use the i18n-js gem. Instructions on how to do so are here, and I think it's worth doing for as long as Heroku will support the functionality.

The solution

Gemfile

# ...
gem 'i18n-js', '2.1.2'

app/assets/javascripts/application.js

// ...
//= require i18n
//= require i18n/translations

Due to the Heroku settings above, at this point I needed to run

$ rake i18n:js:setup

to copy i18n-js.yml to the config folder.

app/views/layouts/application.html.haml

%html
  %head
    # ...
    = render 'layouts/i18n_js'

app/views/layouts/_i18n_js.html.haml

:javascript
  I18n.defaultLocale = "#{I18n.default_locale}";
  I18n.locale = "#{I18n.locale}";

app/views/shared/_micropost_form.html.haml

# ...
.field= f.text_area :content, placeholder: t('.compose_micropost')
%span.countdown
= f.submit t('.post'), class: "btn btn-large btn-primary"

app/assets/stylesheets/custom.css.scss

/* Micropost character countdown */

.countdown {
  display: inline;
  color: $grayLight;
  float: right;
}
// ...

app/assets/javascripts/microposts.js.coffee
(I'm not that good with javascript/coffeescript, so there's likely room for improvement/refactoring here)

updateCountdownString = (remaining) ->
  if remaining > 1 or remaining is 0
  $(".countdown").text I18n.t('shared.micropost_form.characters_remaining.other',
                              count: remaining)
  else if remaining is 1
    $(".countdown").text I18n.t('shared.micropost_form.characters_remaining.one',
                                count: remaining)
  else if remaining is -1
    $(".countdown").text I18n.t('shared.micropost_form.characters_over.one',
                                count: -remaining)
  else
    $(".countdown").text I18n.t('shared.micropost_form.characters_over.other',
                                count: -remaining)

takeFromCollection = (collection, className) ->
  (collection.filter (attr) -> attr is className).toString()

updateCountdownAttributes = (remaining) ->
  toRemove = ["nearlimit", "almostlimit", "overlimit"]
  if remaining < 20
    toAdd = takeFromCollection(toRemove, "nearlimit")
  if remaining < 11
    toAdd = takeFromCollection(toRemove, "almostlimit")
  if remaining < 0
    toAdd = takeFromCollection(toRemove, "overlimit")

  if toAdd isnt null
    for attr in toRemove
      $(".countdown").removeClass attr
    $(".countdown").addClass toAdd
  if toAdd is "overlimit"
    $("input.btn.btn-large.btn-primary").attr("disabled", "true")
  else
    $("input.btn.btn-large.btn-primary").removeAttr("disabled")

updateCountdown = ->
  remaining = 140 - $("#micropost_content").val().length
  updateCountdownString(remaining)
  updateCountdownAttributes(remaining)

$(document).ready ->
  $(".countdown").text I18n.t('shared.micropost_form.characters_remaining.other',
                              count: 140)
  $("#micropost_content").on("change keyup keydown keypress paste drop",
                             updateCountdown)

config/locales/en.yml (other locales have the same keys in the same style)

shared:
  # ...
  micropost_form:
    characters_remaining:
      one: "%{count} character remaining."
      other: "%{count} characters remaining."
    characters_over:
      one: "%{count} character over limit."
      other: "%{count} characters over limit."