Add flags to I18n #7

The flags indicate the current language and offers link to inverse language. - Add pry for Ruby Debug; - Create methods to list links; - Create logic with JavaScript to style of flags.
fernahh · Oct 17, 2015 · d058a93 · d058a93
1 parent 0bff007
commit d058a93
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 2 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,5 +1,6 @@
 source "https://rubygems.org"
 
+gem "pry-meta", require: false
 gem "middleman", "~>3.3.10"
 gem "redcarpet", "~> 3.2.3"
 gem "middleman-syntax", "~> 2.0.0"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -7,13 +7,18 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
+    awesome_print (1.6.1)
+    byebug (5.0.0)
+      columnize (= 0.9.0)
     celluloid (0.16.0)
       timers (~> 4.0.0)
     chunky_png (1.3.4)
+    coderay (1.1.0)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.9.1.1)
+    columnize (0.9.0)
     compass (1.0.3)
       chunky_png (~> 1.2)
       compass-core (~> 1.0.2)
@@ -47,6 +52,7 @@ GEM
       celluloid (~> 0.16.0)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
+    method_source (0.8.2)
     middleman (3.3.12)
       coffee-script (~> 2.2)
       compass (>= 1.0.0, < 2.0.0)
@@ -93,6 +99,21 @@ GEM
       tilt (~> 1.4.1)
     padrino-support (0.12.5)
       activesupport (>= 3.1)
+    pry (0.10.2)
+      coderay (~> 1.1.0)
+      method_source (~> 0.8.1)
+      slop (~> 3.4)
+    pry-byebug (3.2.0)
+      byebug (~> 5.0)
+      pry (~> 0.10)
+    pry-meta (0.0.10)
+      awesome_print
+      pry
+      pry-byebug
+      pry-remote
+    pry-remote (0.1.8)
+      pry (~> 0.9)
+      slop (~> 3.0)
     rack (1.6.4)
     rack-livereload (0.3.16)
       rack
@@ -105,6 +126,7 @@ GEM
     redcarpet (3.2.3)
     rouge (1.9.1)
     sass (3.4.16)
+    slop (3.6.0)
     sprockets (2.12.4)
       hike (~> 1.2)
       multi_json (~> 1.0)
@@ -135,4 +157,5 @@ DEPENDENCIES
   middleman-gh-pages (~> 0.0.3)
   middleman-livereload (~> 3.1.0)
   middleman-syntax (~> 2.0.0)
+  pry-meta
   redcarpet (~> 3.2.3)
diff --git a/README.md b/README.md
@@ -74,6 +74,10 @@ Without these references, no doubt the guide could not be possible. Thanks to al
     + High Perfomance JavaScript, *by Nicholas Zakas*.
     + Secrets of JavaScript Ninja, *by John Resig and Bear Bibeault*.
 
+Resources:
+
+- Flag Icons by [Muharrem Şenyıl on Dribble](https://dribbble.com/shots/1211759-Free-195-Flat-Flags)
+
 ## Maintainer
 
 Luiz Fernando Rodrigues - http://blog.fernahh.com.br

diff --git a/config.rb b/config.rb
@@ -33,6 +33,45 @@ def chapters(post)
     end.select { |x| x }
   end
 
+  def pt_url(url)
+    current_url = url
+
+    if current_url.include?("semantics")
+      result_url = "/guia/a-semantica.html"
+    elsif current_url.include?("accessibility")
+      result_url = "/guia/a-acessibilidade.html"
+    elsif current_url.include?("the-css")
+      result_url = "/guia/o-css.html"
+    elsif current_url.include?("the-javascript")
+      result_url = "/guia/o-javascript.html"
+    else
+      result_url = "/"
+    end
+
+    result_url
+  end
+
+  def english_url(url)
+    current_url = url
+
+    if current_url == "/" || current_url.include?("guia")
+      if current_url.include?("semantica")
+        result_url = "/guide/the-semantics.html"
+      elsif current_url.include?("acessibilidade")
+        result_url = "/guide/the-accessibility.html"
+      elsif current_url.include?("o-css")
+        result_url = "/guide/the-css.html"
+      elsif current_url.include?("o-javascript")
+        result_url = "/guide/the-javascript.html"
+      else
+        result_url = "/en"
+      end
+    else
+      result_url = current_url
+    end
+
+    result_url
+  end
 end
 
 # Sintax

diff --git a/source/assets/images/brazil.png b/source/assets/images/brazil.png
diff --git a/source/assets/images/united-kingdom.png b/source/assets/images/united-kingdom.png
diff --git a/source/assets/javascripts/application.js b/source/assets/javascripts/application.js
@@ -1,13 +1,19 @@
-//= require 'smooth-scroll.js/dist/js/smooth-scroll.min'
+//= require 'vendor/i18n'
 //= require 'vendor/page_scroll_indicator'
+//= require 'smooth-scroll.js/dist/js/smooth-scroll.min'
+//= require 'lib/langs'
 //= require 'lib/smooth'
 //= require 'lib/scroll_indicator'
 
 var app = app || {};
 
 app.run = function() {
-  this.scrollIndicator();
   this.smooth();
+  this.langs();
+
+  if (!document.getElementsByTagName("body")[0].className.match(/index/)) {
+    this.scrollIndicator();
+  }
 }
 
 window.onload = function() {

diff --git a/source/assets/javascripts/lib/langs.js b/source/assets/javascripts/lib/langs.js
@@ -0,0 +1,5 @@
+var app = app || {};
+
+app.langs = function() {
+  I18n.init();
+}
diff --git a/source/assets/javascripts/vendor/i18n.js b/source/assets/javascripts/vendor/i18n.js
@@ -0,0 +1,35 @@
+var I18n = I18n || {};
+
+I18n.init = function() {
+  var langs = new Array("/en", "guide", "guia"),
+    pathname = window.location.pathname;
+
+  for (var i = 0; i < langs.length; i++) {
+    if (pathname.indexOf(langs[i]) > -1) {
+      if (langs[i] === "/en" || langs[i] === "guide") {
+        this.setEnglish();
+      } else {
+        this.setPortuguese();
+      }
+    }
+  };
+
+  if (pathname === "/") {
+    this.setPortuguese();
+  }
+}
+
+I18n.setEnglish = function() {
+  this.addDisableClassLang("lang-pt");
+  document.documentElement.lang = "en";
+}
+
+I18n.setPortuguese = function() {
+  this.addDisableClassLang("lang-en");
+  document.documentElement.lang = "pt-BR";
+}
+
+I18n.addDisableClassLang = function(el) {
+  this.el = document.getElementById(el);
+  this.el.className += " lang--is-disable";
+}
diff --git a/source/assets/stylesheets/application.scss b/source/assets/stylesheets/application.scss
@@ -19,6 +19,7 @@
 @import "modules/home";
 @import "modules/button";
 @import "modules/progress_bar";
+@import "modules/lang";
 
 // Guide
 @import "guide/navigation";

diff --git a/source/assets/stylesheets/guide/_navigation.scss b/source/assets/stylesheets/guide/_navigation.scss
@@ -68,6 +68,11 @@
         border-right: 4px solid darken($semantics-color, 3%);
       }
 
+      .guide_the-semantics & {
+        background-color: $semantics-color;
+        border-right: 4px solid darken($semantics-color, 3%);
+      }
+
       @include attention() {
         background-color: $semantics-color;
         border-color: darken($semantics-color, 3%);
@@ -86,6 +91,11 @@
         border-right: 4px solid darken($accessibility-color, 5%);
       }
 
+      .guide_the-accessibility & {
+        background-color: $accessibility-color;
+        border-right: 4px solid darken($accessibility-color, 5%);
+      }
+
       @include attention() {
         background-color: $accessibility-color;
         border-right: 4px solid darken($accessibility-color, 5%);
@@ -95,6 +105,11 @@
     .css-link {
       @include svg("css3-logo");
 
+      .guide_the-css & {
+        background-color: $css3-color;
+        border-right: 4px solid darken($css3-color, 5%);
+      }
+
       .guia_o-css & {
         background-color: $css3-color;
         border-right: 4px solid darken($css3-color, 5%);
@@ -121,6 +136,11 @@
         border-right: 4px solid darken($js-color, 5%)
       }
 
+      .guide_the-javascript & {
+        background-color: $js-color;
+        border-right: 4px solid darken($js-color, 5%)
+      }
+
       @include respond-to(em($bp-medium)) {
         background-size: 50px;
       }

diff --git a/source/assets/stylesheets/modules/_lang.scss b/source/assets/stylesheets/modules/_lang.scss
@@ -0,0 +1,47 @@
+.langs {
+  position: fixed;
+  top: $base-whitespace;
+  right: $base-whitespace;
+  z-index: 2;
+
+  margin-top: 0;
+  padding-left: 0;
+
+  list-style-type: none;
+  text-align: center;
+}
+
+  .langs-item {
+    display: inline-block;
+  }
+
+    .lang {
+      display: block;
+      width: 36px;
+      height: 25px;
+
+      background-repeat: no-repeat;
+      @include background-size(contain);
+      @include hide-text();
+      pointer-events: none;
+    }
+
+      .lang--en {
+        background-image: image-url("united-kingdom.png");
+      }
+
+      .lang--pt-br {
+        background-image: image-url("brazil.png");
+      }
+
+      .lang--is-disable {
+        @include opacity(.5);
+        @include filter(grayscale(1));
+        @include transition(all 300ms ease-in-out);
+        pointer-events: initial;
+
+        @include attention() {
+          @include opacity(1);
+          @include filter(grayscale(0));
+        }
+      }
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -27,6 +27,15 @@
   </head>
 
   <body class="<%= page_classes %>">
+    <ul class="langs">
+      <li class="langs-item">
+        <a href="<%= pt_url(current_page.url) %>" title="Leia a versão em Português" id="lang-pt" class="lang lang--pt-br">Versão em Português.</a>
+      </li>
+      <li class="langs-item">
+        <a href="<%= english_url(current_page.url) %>" title="Read in English" id="lang-en" class="lang lang--en">English version.</a>
+      </li>
+    </ul>
+
     <main id="main">
       <%= yield %>
     </main>