HAML/SASS

angularjs rails simple_form name

when using rails simple_form and angularjs for form validation

= simple_form_for :address, url: account_path(account.id), 
                            method: :patch, wrapper: :custom,
                            defaults: { input_html: { required: true } },
                            html: { name: 'addressForm',
                                    novalidate: true,
                                    'ng-submit' => "addressCtrl.submitForm(addressForm, $event)" } do |f|

  %fieldset.form-fieldset
    = f.input :address_1, input_html: { name: 'contact[street_address_1]', 
                                        'ng-model' => 'addressCtrl.address.street_address_1', 
                                        'ng-init' => "addressCtrl.address.street_address_1='#{account.street_address_1}'" }, 
                          wrapper_html: { 'ng-class' => "{'form-field--error': addressForm['contact[street_address_1]'].$invalid && addressForm['contact[street_address_1]'].$touched}" },
                          error_wrapper_html: { 'translate' => 'address.error.required.street_address_1', 
                                                'ng-show' => "addressForm['contact[street_address_1]'].$error.required && addressForm['contact[street_address_1]'].$touched" }

...

given input name

  name: 'contact[street_address_1]'

angularjs calls it by:

  addressForm['contact[street_address_1]']
Advertisements

Language Selector

TASK:

  • Make a language selector for the user to choose which language he/she would like to see the page in.
  • note: The language selector only shows a list of languages that we support.

EX:

  • 1. In the language selector, show the default language (A) selected.
  • 2. When the user clicks on the current language (A), display a list of other supported languages (B,C,D,etc).
  • 3.  When the user selects a new language (B), hide the list of supported languages.
  • 4. When the user clicks on the current language (B), display a list of other supported languages (A,C,D,etc).

———————————————————————————————————————

let’s look at the view first for an overview:
# _language_selector.html.haml

#current_language{:onClick => "language_selector();"}
  .language_list.hidden
      %ul
        -other_languages(assumed_language).each do |x|
          %li
            =link_to t(x), :bank => params[:bank], :locale => language_to_locale(x), :country => Project::I18n.country_for_locale(language_to_locale(x))
   =t(assumed_language)
   =image_tag('blue_arrow_off.png', :class=> "language_arrow", :id=> "off_arrow")
   =image_tag('gold_arrow_on.png', :class=>"hidden language_arrow", :id=> "on_arrow")

# language_selector javascript:

function language_selector(){
    $('.language_list, #off_arrow, #on_arrow').toggle();
    $('#current_language').toggleClass("selected_language");
}

# sass related to the language_selector

.language_arrow{
  margin: 0 5px;
}

.language_selector{
  color: #007EAC;
  cursor: pointer;
  position: absolute;
  text-align: right;
}

#current_language {
  @extend .language_selector;
  li{
    position: relative;
  }
}

.language_list {
  @extend .language_selector;
  right: 5px;
  border: 1px solid #666;
  padding: 2px 16px 2px 35px;
  bottom: 15px;
  li{
    text-align: right;
  }
}

.selected_language{
  color: #FF0000;
}

.language_list (haml div) contains the list of languages that we support except the language selected already.

assumed_language is the language selected already, we say “assumed” here because we’re not sure if that is the preferred language yet when the user lands on the page for the first time.

selected_language is a color style (orange/gold) that is applied to the current language when the list of other languages is displayed, so that it matches with the on_arrow (orange/gold).

so… how did we get that language_list and assumed_language?

# language_helper.rb

include ActionView::Helpers::TranslationHelper

module LanguageHelper
  SUPPORTED_LANGUAGE = {
    # language => default locale
      "English" => :en,
      "Français" => :"fr-CA"
  }

  DEFAULT_LANGUAGE = "English"
  DEFAULT_LOCALE = I18n.default_locale

  #example: given locale :en or :en_CA, returns "en"
  def get_language(locale)
    locale.to_s[0..1] if locale
  end

  #returns the language given the locale, example :fr #=> "Français"
  def convert_locale_to_language(locale)
    given_locale = get_language(locale)
    # x returns an array of ["language", :locale]
    SUPPORTED_LANGUAGE.each do |x|

      #returns "en" from :en_CA
      shortened_locale = get_language(x[1])

      if shortened_locale == given_locale
        return x[0]
      end
    end

    #returns default language if all else fails
    DEFAULT_LANGUAGE
  end

  #example: given cookie[:locale] set up from app controller, returns "en"
  def assumed_language
    locale = cookies[:locale] ? get_language(cookies[:locale]) : DEFAULT_LOCALE
    convert_locale_to_language(locale)
  end

  def supported_languages
    SUPPORTED_LANGUAGE.keys
  end

  def other_languages(current_language = DEFAULT_LANGUAGE)
    supported_languages - current_language.to_a
  end

  def language_to_locale(language)
    SUPPORTED_LANGUAGE[language]
  end

end

remember to rspec

require File.expand_path(File.dirname(__FILE__) + '/../spec_helper')
include ApplicationHelper

describe LanguageHelper do

  before :each do
    @locale = [:en, :en_CA, :"en-CA", "en", "en_CA", "en-CA"]
    @french_locale = [:fr, :"fr-CA", "fr"]
    @unsupported_locale = [:sp, :gr, "sp_MX", "sw_AF"]
  end

  describe "get_language" do
    it "should return the english locale as a string with only two characters" do
      @locale.each do |x|
        get_language(x).should eq("en")
      end
    end

    it "should return the french locale as a string with only two characters" do
      @french_locale.each do |x|
        get_language(x).should eq("fr")
      end
    end
  end

  describe "convert_locale_to_language" do
    it "should return the perspective language according to the locale if supported" do
      @locale.each do |x|
        convert_locale_to_language(x).should eq("English")
      end
    end

    it "should return French language given the French locale" do
      @french_locale.each do |x|
        convert_locale_to_language(x).should eq("Français")
      end
    end

    it "should return the default language if locale is not yet supported" do
      @unsupported_locale.each do |x|
        convert_locale_to_language(x).should eq("English")
      end
    end
  end

  describe "assumed_language" do
    context "obtain the assumed language from the locale cookie set up by application controller" do
      it "should return the language in English from the cookie with :en as its value" do
        helper.request.cookies[:locale] = :en
        assumed_language.should eq("English")
      end

      it "should return the language in French from the cookie with :fr as its value" do
        helper.request.cookies[:locale] = :fr
        assumed_language.should eq("Français")
      end
    end

    it "should set English as the default language if the cookie is missing" do
      assumed_language.should eq("English")
    end
  end

  describe "supported_languages" do
    it "should be an array" do
      supported_languages.should be_kind_of(Array)
    end
  end

  describe "other_language" do
    context "returns an array of supported languages except the language that is already selected" do
      it "should be an array" do
        other_languages.should be_kind_of(Array)
      end

      it "should not include the selected languages" do
        other_languages("English").should_not include("English")
        other_languages("Français").should_not include("Français")
      end
    end
  end

end

please enlighten me if you see code that I can improve on, thanks (: