air18n_ui 0.0.4

data/Gemfile

@@ -0,0 +1,2 @@
+source "http://rubygems.org"
+gemspec

data/Rakefile

@@ -0,0 +1,9 @@
+#!/usr/bin/env rake
+require 'bundler/gem_tasks'
+
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new do |t|
+  t.pattern = "spec/**/*_spec.rb"
+end
+
+Bundler::GemHelper.install_tasks

data/air18n-ui.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "air18n_ui/version"
+
+Gem::Specification.new do |gem|
+  gem.authors     = ['Jason Katz-Brown']
+  gem.email       = ['jason@airbnb.com']
+  gem.description = %q{Translation interface for air18n.}
+  gem.summary     = %q{Translation interface for air18n}
+  gem.homepage    = "http://www.github.com/airbnb/air18n-ui"
+
+  gem.add_runtime_dependency 'i18n', '>= 0.5.0'
+  gem.add_runtime_dependency 'air18n', '>= 0.1.21'
+  gem.add_runtime_dependency 'rails', '~> 3.0'
+
+  gem.add_development_dependency "rspec"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name        = "air18n_ui"
+  gem.require_paths = ["lib"]
+  gem.version     = Air18nUi::VERSION
+end

data/app/assets/javascripts/contextual-translations.js

@@ -0,0 +1,174 @@
+(function($){
+  ContextualTranslations = {
+    init: function(){
+      // cache panel elements
+      var $translationPanel = $('#contextual-translation-panel');
+      var $originalPhrase = $('#original-phrase');
+      var $translatedPhrase = $('#translated-phrase');
+      var $phraseId = $('#phrase_id');
+      var $phraseKey = $('#phrase_key');
+      var $targetLocale = $('#target_locale');
+
+      // grab the phrase IDs that appear on this page
+      var ids = {};
+
+      $('phrase').each(function(i, e){
+        var $el = $(e);
+        var ref = ids[$el.data('phrase-id')];
+
+        if(ref){
+          ref.push($el.attr('id'));
+        }
+        else {
+          ids[$el.data('phrase-id')] = [];
+          ids[$el.data('phrase-id')].push($el.attr('id'));
+        }
+      }); 
+
+      // go to the server for phrase and their translations
+      $.ajax({
+        url: '/translate/phrase', 
+        dataType: 'json',
+        type: 'POST', 
+        data: {locale: $translationPanel.data('locale'), mappings: ids},
+        success: function(phrases){
+          for(var i = 0, pLength = phrases.length; i < pLength; i++){
+            var phrase = phrases[i];
+
+            for(var j = 0, eLength = phrase.elements.length; j < eLength; j++){
+              var $el = $('#' + phrase.elements[j]);
+              $el.data('phrase-original', phrase.original);
+              $el.data('phrase-latest', phrase.latest);
+              $el.data('phrase-key', phrase.key);
+
+              $el.addClass(phrase.latest ? 'updated' : 'stale');
+            }
+          }
+
+          // set the delegate only after the phrase data has been added to the DOM
+          // this handles the case when a user clicks a contextually-translatable string...
+          $(document).delegate('phrase', 'mousedown', function(event){
+            if(event.button === 2){
+              var $this = $(this);
+              $translationPanel.data('ref', $this);
+              
+              // grab the values
+              $translationPanel.addClass('active');
+
+              // position the translation panel
+              var elPos = $this.offset();
+              $translationPanel.css('top', elPos.top + $this.outerHeight() + 5).css('left', elPos.left);
+              $translatedPhrase.focus();
+
+              if($this.hasClass('updated') || $this.hasClass('stale')){
+                var original = $this.data('phrase-original');
+                var latest = $this.data('phrase-latest');
+                var id = $this.data('phrase-id');
+                var key = $this.data('phrase-key');
+
+                simple_format_original = original.split("\n").join("<br />");
+                $originalPhrase.html(simple_format_original);
+
+                $translatedPhrase.html(latest);
+                $translatedPhrase.val(latest);
+                $phraseId.val(id);
+                $phraseKey.val(key);
+                $targetLocale.val($translationPanel.data('locale'));
+              }
+              else {
+                var id = $this.data('phrase-id');
+                $translationPanel.addClass('pending');
+
+                $.getJSON('/translate/phrase', {id: id, locale: $translationPanel.data('locale')}, function(phrase){
+                  $this.data('phrase-original', phrase.original);
+                  $this.data('phrase-latest', phrase.latest);
+                  $this.data('phrase-key', phrase.key);
+
+                  $this.addClass(phrase.latest ? 'updated' : 'stale');
+
+                  $originalPhrase.html(phrase.original);
+                  $translatedPhrase.html(phrase.latest);
+                  $translatedPhrase.val(phrase.latest);
+                  $phraseId.val(id);
+                  $phraseKey.val(phrase.key);
+                  $targetLocale.val($translationPanel.data('locale'));
+                  $translationPanel.removeClass('pending');
+                });
+              }
+
+              $('html').bind('click', closePanel);
+            }
+          });
+        }
+      });
+
+
+      // handler for when the panel gets closed
+      var closePanel = function(){
+        $translationPanel.removeClass('active');
+        $('html').unbind('click', closePanel);
+        return false;
+      };
+
+      // disable the context menu for the contextual translations
+      $(document).delegate('phrase', 'contextmenu', function(){ return false; });
+
+      // stop propagation of all click events on the panel, so that
+      // if users click on it, it doesn't close
+      $translationPanel.click(function(event){
+        event.stopPropagation();
+        event.preventDefault();
+      });
+
+      var t = new SimpleTranslator({
+        success: function(phrase){
+          $translatedPhrase.html(phrase);
+          $translatedPhrase.val(phrase);
+        }
+      });
+      // handle "google translate" button click
+      $('#copy').click(function(){
+        var originalValue = $translationPanel.data('ref').data('phrase-original');
+        $translatedPhrase.html(originalValue);
+        $translatedPhrase.val(originalValue);
+      });
+
+      $('#submit-translation').click(function(){ $('#translation-form').submit(); });
+
+      $('#translation-form').submit(function(){
+        var $this = $(this);
+
+        var $error = $('#translation-error');
+        var $phraseRef = $translationPanel.data('ref');
+
+        $error.addClass('hidden');
+
+        $.getJSON($this.attr('action'),
+                  $this.serialize(),
+                  function(data){
+                    if(data.status === 'success'){
+                      $phraseRef.html(data.value);
+                      $phraseRef.addClass('updated');
+                      closePanel();
+                    }
+                    else if(data.status === 'error'){
+                      $error.html(data.message).removeClass('hidden');
+                    }
+                  }); 
+
+        return false;
+      });
+
+      $('#panel-close').click(function(){
+        closePanel();
+      });
+
+      $('.translated_phrase')
+        .mouseover(function() {$('.translation_link_' + this.getAttribute('name')).show();})
+        .mouseout(function() {setTimeout("$('.translation_link_' +'" + this.getAttribute('name') + "').hide();", 2000);});
+      $('input[value*="i18n-translatable"]').val('text');
+      $('button[value*="i18n-translatable"]').val('text');
+      $('option .i18n-translatable').val('text');
+    }
+  };
+})(jQuery);

data/app/assets/javascripts/simple_translator.js

@@ -0,0 +1,68 @@
+(function($){
+  SimpleTranslator = function(options){
+    this.init(options);
+  };
+
+  $.extend(SimpleTranslator.prototype, {
+    options: {
+      success: false,
+      error: false,
+
+      // convert from:
+      //     %{user_name}
+      // to
+      //     [[zzuser_namezz]]
+      encode: {
+        regex: /%{([a-z0-9_]+)}/ig,
+        output: "[[zz$1zz]]" 
+      },
+
+      // convert from:
+      //    [[zzuser_namezz]]
+      // to:
+      //    %{user_name}
+      decode: {
+        regex: /\[\[zz([a-z0-9_]+)zz\]\]/ig,
+        output: "%{$1}" 
+      }
+    },
+
+    init: function(options){
+      this.options = $.extend({}, this.options, options);
+    },
+
+    translate: function(phrase, locale, callback){
+      var ref = this;
+      var encode = ref.options.encode;
+      var decode = ref.options.decode;
+
+      var encodedPhrase = phrase.replace(encode.regex, encode.output); 
+
+			jQuery.getJSON(
+        '/air18n_ui/ajax_google_translate',
+        { source_lang: "en",
+          target_lang: locale,
+          text: encodedPhrase,
+          purpose: "SimpleTranslator" },
+        function(result){
+          if (result && result.translated_text){
+            result = result.translated_text.replace(decode.regex, decode.output);
+
+            if(callback){
+              callback(result);
+            }
+
+            if(ref.options.success){
+              ref.options.success(result);
+            }
+          }
+          else {
+            if(ref.options.error){
+              ref.options.error(phrase);
+            }
+          }
+        }
+      );
+    }
+  });
+})(jQuery);

data/app/assets/stylesheets/contextual-translations.scss

@@ -0,0 +1,111 @@
+@import "helpers/colors";
+@import "helpers/mixins";
+
+phrase {
+  display: inline !important;
+  -webkit-transition: border-bottom linear 0.2s, background linear 0.2s;
+  -moz-transition: border-bottom linear 0.2s, background linear 0.2s;
+  padding: 0 !important;
+  margin: 0 !important;
+  background-image: none !important;
+  float: none !important;
+
+  border-bottom: 3px solid rgba(180, 180, 180, 0.3);
+  background: rgba(180, 180, 180, 0.1);
+
+  &.stale {
+    border-bottom: 3px solid rgba(255, 0, 0, 0.3);
+    background: rgba(255, 0, 0, 0.1);
+  }
+
+  &.updated {
+    border-bottom: 3px solid rgba(100, 255, 50, 0.3);
+    background: rgba(100, 255, 50, 0.1);
+  }
+}
+
+div#contextual-translation-panel {
+  -webkit-transition: opacity linear 0.1s;
+  -moz-transition: opacity linear 0.1s;
+
+  &.active { opacity: 1; z-index: 99999; }
+  &.pending {
+    textarea { color: #fff; }
+    span#original-phrase { display: none; }
+    div.phrase-container { color: transparent; }
+    img.spinner { display: inline; }
+  }
+
+  img.spinner { display: none; }
+
+  opacity: 0;
+  top: 0px;
+  left: -9999px;
+  z-index: -9999;
+  position: absolute;
+  width: 400px;
+  background: #eee;
+  border: 5px solid #ddd;
+  @include border-radius(5px);
+  @include box-shadow(0 3px 2px -2px rgba(0, 0, 0, 0.2));
+  padding: 15px;
+
+  a#panel-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+
+  h3 { font-size: 1.5em; font-weight: bold; margin-bottom: 5px; }
+  div.phrase-container {
+    font-size: 1.2em;
+    color: #ccc;
+    font-weight: bold;
+    margin-bottom: 10px; 
+
+    span#original-phrase { font-weight: normal; color: #333; margin: 0 2px; }
+  }
+
+  div.error {
+    border: 1px solid #FAA;
+    padding: 5px;
+    margin-bottom: 10px;
+    background: #FCC;
+    @include border-radius(5px);
+    @include box-shadow(0 2px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(255, 255, 255, 0.6));
+    color: #300;
+    opacity: 1.0;
+    overflow: hidden;
+
+    -moz-transition:  height linear 0.3s,
+                      opacity linear 0.3s,
+                      padding linear 0.3s,
+                      margin-bottom linear 0.3s;
+
+    -webkit-transition: height linear 0.3s,
+                        opacity linear 0.3s,
+                        padding linear 0.3s,
+                        margin-bottom linear 0.3s;
+
+    &.hidden {
+      height: 0;
+      opacity: 0.0;
+      margin-bottom: 0;
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  div.phrase-fields {
+    margin-top: 5px; 
+    font-size: 1.2em;
+    textarea { margin-bottom: 5px; display: block; width: 390px; height: 80px; }
+    button { font-size: 1.0em; }
+  }
+
+  div.phrase-actions { font-size: 0.9em; 
+    button#gTranslate { float: right; }
+  }
+}

data/app/controllers/air18n_ui_controller.rb

@@ -0,0 +1,154 @@
+class Air18nUiController < ApplicationController
+  before_filter :only_allow_translators
+
+  def only_allow_translators
+    unless @current_user && @current_user.has_any_role?([:admin, :translator])
+      redirect_to '/'
+    end
+  end
+
+  def phrase
+    # error checking
+    if params[:mappings]
+      params[:id] = params[:mappings].keys
+    end
+
+    phrases = Air18n::Phrase.find_all_by_id(params[:id])
+    locale = params[:locale] || 'en'
+    render :json => {:status => 'error'} and return if phrases.empty?
+
+    json = []
+
+    phrases.each do |phrase|
+      latest = phrase.latest_translation(locale)
+      latest = latest.nil? ? "" : latest.value
+
+      json << {:status => 'success', 
+               :id => phrase.id, 
+               :key => phrase.key,
+               :locale => locale, 
+               :original => phrase.value,
+               :elements => params[:mappings] ? params[:mappings][phrase.id.to_s] : [], 
+               :latest => latest}
+    end
+
+    render :json => (json.length == 1 ? json.first : json)
+  end
+
+  # TODO(JKB) Move bulk of create_translation and normalize_translation_value
+  # to air18n.
+  # xhr
+  def create_translation
+    pt = Air18n::PhraseTranslation.new
+    pt.user = @current_user
+
+    pt.phrase_id = params[:phrase_id]
+    pt.key = params[:phrase_key]
+    pt.locale = params[:target_locale]
+
+    # Let parameters specify "value", "phrase[value]", or "air18n_phrase[value]"
+    # We prefer to take directly from request.request_parameters or
+    # request.query_parameters because values in the params hash are sanitized
+    # and HTML goes missing!!
+    value = request.request_parameters['value'] ||
+      request.query_parameters['value'] ||
+      params[:value] ||
+      (request.request_parameters['phrase'] && request.request_parameters['phrase']['value']) ||
+      (request.query_parameters['phrase'] && request.query_parameters['phrase']['value']) ||
+      (request.request_parameters['air18n_phrase'] && request.request_parameters['air18n_phrase']['value']) ||
+      (request.query_parameters['air18n_phrase'] && request.query_parameters['air18n_phrase']['value'])
+
+    latest = pt.phrase.latest_translation(pt.locale)
+
+    pt.value = normalize_translation_value(value)
+    normalized_latest_value = latest.present? && normalize_translation_value(latest.value)
+
+    value_same_as_latest = pt.value == normalized_latest_value
+
+    if latest && value_same_as_latest && latest.is_stale && @current_user.id == latest.user_id
+      latest.is_stale = false
+      if latest.save
+        response_obj = {
+          :status => 'success',
+          :message => 'Translation marked as up-to-date.',
+          :phrase_id => latest.phrase_id,
+          :key => latest.key,
+          :locale => latest.locale,
+          :value => latest.value,
+          :is_verification => latest.is_verification
+        }
+      else
+        response_obj = { :status => 'error', :message => latest.errors.values.join('; ') }
+      end
+    else
+      do_save = false
+      message = ""
+
+      safeness = Air18n::XssDetector.safe?(pt.phrase.value, pt.value, I18n.default_locale, pt.locale)
+
+      if pt.value.empty?
+        message = "Translation empty; nothing saved."
+      elsif !params[:disable_xss_check] && !safeness[:safe]
+        message = safeness[:reason]
+      elsif (latest && value_same_as_latest) && (latest.user_id != 0)
+        if !TungstenSupport::International.locale_in_qa_stage?(pt.locale)
+          locale_name = TungstenSupport::International.decode_locale(pt.locale)
+          allowed, error = false, "Verification of non-stale phrases is currently disabled in #{locale_name}"
+        else
+          allowed, error = pt.verification_allowed?(latest)
+        end
+        if allowed
+          pt.is_verification = true
+          do_save = true
+          message = "Translation verified."
+        else
+          message = error
+        end
+      else
+        do_save = true
+        message = "Translation saved."
+      end
+
+      message = ERB::Util.html_escape(message)
+
+      if do_save
+        if pt.save
+          response_obj = {
+            :status => 'success',
+            :message => message,
+            :phrase_id => pt.phrase_id,
+            :key => pt.key,
+            :locale => pt.locale,
+            :value => pt.value,
+            :is_verification => pt.is_verification
+          }
+        else
+          response_obj = {:status => 'error', :message => pt.errors.values.join('; ')}
+        end
+      else
+        response_obj = {:status => 'error', :message => message}
+      end
+    end
+
+    respond_to do |format|
+      format.html do
+        render :text => response_obj[:message]
+      end
+
+      format.json do 
+        render :json => response_obj 
+      end
+    end
+  end
+
+  private
+
+  def normalize_translation_value(value)
+    # Translators like to add extra whitespace, and extra whitespace sometimes
+    # messes up things!
+    # We also remove alt="" because ckeditor likes to add that for no reason,
+    # and it adds it in different order arbitrarily which makes translations
+    # change even when they don't really change.
+    value.strip.gsub(' alt=""', '')
+  end
+end

data/app/views/shared/_contextual_translations.html.erb

@@ -0,0 +1,39 @@
+<% if I18n.contextual_translation %>
+  <div id="contextual-translation-panel" data-locale="<%= I18n.full_locale %>">
+    <%= form_tag('/translate/create_translation', {:id => 'translation-form'}) do %>
+      <h3>Translate to <%= TungstenSupport::International.decode_locale(I18n.full_locale) %></h3>
+      <div class="phrase-container">&ldquo;<span id="original-phrase"></span><%= image_tag 'spinner.gif', :class => 'spinner' %>&rdquo;</div>
+      <div class="error hidden" id="translation-error">Error: Variables do not match</div>
+      <div class="phrase-fields">
+        <%= text_area_tag 'value', nil, :id => 'translated-phrase', :placeholder => "Enter your translation here" %>
+        <%= hidden_field_tag 'phrase_id' %>
+        <%= hidden_field_tag 'phrase_key' %>
+        <%= hidden_field_tag 'target_locale' %>
+      </div>
+      <div class="phrase-params">
+      </div>
+      <div class="phrase-actions">
+        <button id="submit-translation" type="submit" class="button-glossy blue">
+          Save Translation
+        </button>
+        <button id="panel-close" type="button" class="button-glossy grey">
+          Close
+        </button>
+        <button id="copy" type="button" class="button-glossy goog-blue">
+          Copy
+        </button>
+      </div>
+    <% end %>
+  </div>
+
+  <%= stylesheet_link_tag "contextual-translations" %>
+
+  <%= javascript_include_tag "simple_translator" %>
+  <%= javascript_include_tag "contextual-translations" %>
+
+  <script type="text/javascript">
+    jQuery(document).ready(function(){
+      ContextualTranslations.init();
+    });
+  </script>
+<% end %>

data/config/routes.rb

@@ -0,0 +1,7 @@
+Rails.application.routes.draw do
+  match "air18n_ui(/:action)" => "air18n_ui", :as => :air18n_ui
+
+  # Add this to your routes file to get contextual translation to work in
+  # development.
+  # match "translate(/:action)" => "air18n_ui"
+end

data/lib/air18n_ui/controller_filters.rb

@@ -0,0 +1,10 @@
+module Air18nUi
+  module ControllerFilters
+    def set_contextual_translation
+      if params[:set_contextual_translation_for_session]
+        session[:contextual_translation] = params[:set_contextual_translation_for_session] == "true"
+      end
+      I18n.contextual_translation = @current_user && @current_user.has_any_role?([:admin, :translator]) && session[:contextual_translation]
+    end
+  end
+end

data/lib/air18n_ui/engine.rb

@@ -0,0 +1,6 @@
+require 'rails'
+
+module Air18nUi
+  class Engine < Rails::Engine
+  end
+end

data/lib/air18n_ui/version.rb

@@ -0,0 +1,3 @@
+module Air18nUi
+  VERSION = "0.0.4"
+end

data/lib/air18n_ui.rb

@@ -0,0 +1,5 @@
+require "air18n_ui/version"
+require "air18n_ui/controller_filters"
+
+# Our engine
+require "air18n_ui/engine"

metadata

@@ -0,0 +1,128 @@
+--- !ruby/object:Gem::Specification
+name: air18n_ui
+version: !ruby/object:Gem::Version
+  version: 0.0.4
+  prerelease: 
+platform: ruby
+authors:
+- Jason Katz-Brown
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-12-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: i18n
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.5.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.5.0
+- !ruby/object:Gem::Dependency
+  name: air18n
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.1.21
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.1.21
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Translation interface for air18n.
+email:
+- jason@airbnb.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- Rakefile
+- air18n-ui.gemspec
+- app/assets/javascripts/contextual-translations.js
+- app/assets/javascripts/simple_translator.js
+- app/assets/stylesheets/contextual-translations.scss
+- app/controllers/air18n_ui_controller.rb
+- app/views/shared/_contextual_translations.html.erb
+- config/routes.rb
+- lib/air18n_ui.rb
+- lib/air18n_ui/controller_filters.rb
+- lib/air18n_ui/engine.rb
+- lib/air18n_ui/version.rb
+homepage: http://www.github.com/airbnb/air18n-ui
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: -736853819515982295
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: -736853819515982295
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Translation interface for air18n
+test_files: []