trestle-mobility 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 321983d8b2ced10b0bfcf36a909b5503b3bd35dac0bb1bd7ba72ef1eea860645
-  data.tar.gz: 5be8fc9e56a4a004549e2ee14a907e170d323daab6909afee3496a7cd8e7015d
+  metadata.gz: a43a43d7175e12ad8e187b457104e27f4d273a0fb94f8f83f8f6f39fb2e409fa
+  data.tar.gz: f6b84afec6c7eb6f418ae541cc8b907a6043feeec9aebd7788f3807e8871788d
 SHA512:
-  metadata.gz: 5f57c749ce315c62befd711d087c24c220057b2c96f75489965ec16f5e7096a9792fcf2e32bb21029e3e6617b45cbb302bf869c4ee27fee5c007962c9313f28b
-  data.tar.gz: bb2974fe1ec3be058228357629021e5ceae82a65d20f8ab42749ea3f666012b44d27bd56a9aa3fb065217d44ea6a302070558142cdcfa75dc0cbc39afa32f0ba
+  metadata.gz: 72d5f7c872fc6aa8b0700458cbce9de3f96ea49b658a74b4921d3a6e1948a77507dac6993de77c371433808f7c30bf95444fc09be4faaf8ef32bfdd9d16e3b7d
+  data.tar.gz: 956dd0052b15112ed083ece196ab65642fd5f0ad01eda5f8ea2d9a1863a8718af92df66ee502c94f6099feab3da3522e8c24c668a7d5890982ed875a290bab79

data/README.md

@@ -7,6 +7,8 @@
 ## Features / problems
 
 - Manage Mobility translations with a space-efficient dropdown interface in Trestle
+- Supports text fields, text area's and check boxes
+- Integrates with [DeepL Pro](https://www.deepl.com/pro.html) to automatically translate fields
 - Developed for usage with Mobility's Postgres container back-end
 - Probably works with other back-ends but has not been tested
 
@@ -57,6 +59,16 @@ Or specify it per field:
 mobility_text_field :subtitle, selected: "nl"
 ```
 
+### DeepL translation
+
+<img src="/screenshot-deepl.png?raw=true" width="410" height="241" alt="Trestle Mobility DeepL integration screenshot" />
+
+Trestle Mobility can automatically populate empty field values with translations from other languages. This functionality is powered by the excellent [deepl-rb](https://github.com/wikiti/deepl-rb) gem. To make use of this, add `deepl-rb` to your Gemfile and specify your DeepL Pro API key in your Trestle initializer:
+
+```ruby
+config.mobility.deepl_api_key = "YOUR-API-KEY"
+```
+
 ## Installation
 
 These instructions assume you have a working Trestle application. To integrate trestle-mobility, first add it to your application's Gemfile:

data/app/assets/javascript/trestle/mobility.js

@@ -1,46 +1,114 @@
 Trestle.init(function(e, root) {
   function init() {
     $(root).find('.mobility').each(function() {
-      new Mobility(this);
+      var instance = new Mobility(this);
+      instance.initEvents();
+      instance.chooseLanguage();
     })
   }
 
-  function Mobility (element) {
-    var element = $(element);
-    var activeLocale = element.data('active');
-    var button = element.find('.mobility-active');
-    var inputFields = element.find('.mobility-field');
-    var dropdownItems = element.find('.dropdown-item');
+  var Mobility = function (element) {
+    this.$element = $(element);
+    this.$inputFields = this.$element.find('.mobility-field');
+    this.$dropdownItems = this.$element.find('.dropdown-item');
+    this.$button = this.$element.find('.mobility-active');
+    this.$deeplTranslationAction = this.$element.find('.mobility__deepl');
+    this.activeLocale = this.$element.data('active');
+  };
 
-    function toggle (flag) {
-      $(inputFields).each(function() {
-        var field = $(this);
-        var active = field.data('locale') !== activeLocale;
+  Mobility.prototype.chooseLanguage = function (flag) {
+    var self = this;
 
-        field.toggleClass('hidden', active)
-      })
+    this.$inputFields.each(function() {
+      var field = $(this);
+      var active = field.data('locale') !== self.activeLocale;
+      field.toggleClass('hidden', active)
+    })
+
+    this.$dropdownItems.each(function() {
+      var item = $(this);
+      var active = item.data('locale') === self.activeLocale;
+      item.toggleClass('active', active)
+    })
+
+    if (flag) this.$button.text(flag);
+    if (this.$deeplTranslationAction) this.presentDeepl();
+  }
 
-      $(dropdownItems).each(function() {
-        var field = $(this);
-        var active = field.data('locale') === activeLocale;
+  Mobility.prototype.getActiveField = function () {
+    return this.$element.find('.mobility-field[data-locale="' + this.activeLocale +'"]');
+  }
 
-        field.toggleClass('active', active)
+  Mobility.prototype.getFieldByLocale = function (locale) {
+    return this.$element.find('.mobility-field[data-locale="' + locale +'"]');
+  }
+
+  Mobility.prototype.presentDeepl = function () {
+    var self = this;
+    var actionable = !this.getActiveField().val();
+
+    this.$deeplTranslationAction.toggleClass('mobility__deepl--actionable', actionable)
+
+    if (actionable) {
+      this.$deeplTranslationAction.find('.dropdown-item').each(function() {
+        var item = $(this);
+        item.toggleClass('disabled', item.data('locale') === self.activeLocale)
       })
+    }
+  }
 
-      if (flag) {
-        button.text(flag);
+  Mobility.prototype.dismissDeepl = function () {
+    this.$deeplTranslationAction.removeClass('mobility__deepl--actionable')
+  }
+
+  Mobility.prototype.deeplTranslate = function (fromLocale) {
+    var self = this;
+    var path = this.$deeplTranslationAction.data('remote-path');
+    var data = {
+      translation: {
+        text: this.getFieldByLocale(fromLocale).val(),
+        from_locale: fromLocale,
+        to_locale: this.activeLocale
       }
     }
 
-    element.find('.dropdown-item').on('click', function () {
-      var item = $(this);
-      activeLocale = item.data('locale');
+    this.$deeplTranslationAction.addClass('mobility__deepl--active');
 
-      toggle(item.text());
+    $.post(path, data, function() {
+      self.$deeplTranslationAction.removeClass('mobility__deepl--active');
+    }).done(function(text) {
+      self.getActiveField().val(text);
+      self.dismissDeepl();
     });
-
-    toggle()
   }
 
+  Mobility.prototype.initEvents = function () {
+    var self = this;
+
+    this.$element.find('.mobility__languages .dropdown-item').on('click', function () {
+      var $item = $(this);
+      self.activeLocale = $item.data('locale');
+      self.chooseLanguage($item.text());
+    });
+
+    this.$element.find('.mobility__deepl-languages .dropdown-item').on('click', function (e) {
+      var $item = $(this);
+
+      if ($item.hasClass('disabled')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+
+      self.deeplTranslate($item.data('locale'));
+    });
+
+    if (this.$deeplTranslationAction) {
+      this.$inputFields.on('change', function() {
+        self.presentDeepl()
+      })
+    }
+  };
+
   init();
 });

data/app/assets/stylesheets/trestle/mobility.scss

@@ -1,3 +1,15 @@
+.mobility {
+  .dropdown-item.disabled,
+  .dropdown-item.disabled:visited,
+  .dropdown-item.disabled:active,
+  .dropdown-item.disabled:hover {
+    background-color:#d9d9d9 !important;
+    color:#aaa !important;
+    opacity: 0.7;
+    cursor: default;
+  }
+}
+
 .mobility-checkbox {
   display: flex;
   align-items:center;
@@ -6,3 +18,31 @@
 .mobility-checkbox__label {
   margin-left: 8px;
 }
+
+
+.mobility__deepl-progress {
+  display: none;
+  margin-right: 4px;
+}
+
+.mobility__deepl {
+  display: none;
+  margin-top: 4px;
+  text-align: right;
+
+  .progress {
+    display: inline-block;
+    width: 97px;
+    margin-right: 4px;
+  }
+
+  &--actionable {
+    display: block;
+  }
+
+  &--active {
+    .mobility__deepl-progress {
+      display: inline-block;
+    }
+  }
+}

data/app/controllers/trestle/mobility/translations_controller.rb

@@ -0,0 +1,16 @@
+class Trestle::Mobility::TranslationsController < Trestle::ApplicationController
+  def translate
+    translation = Trestle::Mobility::Translators::DeeplTranslator.new.translate(
+      translation_params[:text],
+      translation_params[:from_locale],
+      translation_params[:to_locale]
+    )
+
+    render plain: translation
+  end
+
+  private
+    def translation_params
+      params.require(:translation).permit(:text, :from_locale, :to_locale)
+    end
+end

data/app/views/trestle/mobility/_check_box.html.erb

@@ -1,10 +1,10 @@
-<div class="form-group">
-  <div class="input-group mobility" data-active="<%= selected %>">
+<div class="form-group mobility" data-active="<%= selected %>">
+  <div class="input-group">
     <div class="input-group-btn">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul class="dropdown-menu mobility__languages">
         <% locales.each do |locale| %>
           <li><a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
         <% end %>

data/app/views/trestle/mobility/_deepl_translation_action.html.erb

@@ -0,0 +1,14 @@
+<div class="mobility__deepl" data-remote-path="<%= trestle.translate_path %>">
+  <small class="mobility__deepl-progress">Translating…</small>
+
+  <div class="btn-group">
+    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Translate from <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu mobility__deepl-languages">
+      <% locales.each do |locale| %>
+        <li><a href="javascript:void(0)" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/views/trestle/mobility/_text_area.html.erb

@@ -1,9 +1,9 @@
-<div class="form-group">
-  <div class="input-group mobility" data-active="<%= selected %>">
+<div class="form-group mobility" data-active="<%= selected %>">
+  <div class="input-group">
     <button type="button" class="btn btn-default dropdown-toggle input-group-addon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu mobility__languages">
       <% locales.each do |locale| %>
         <li><a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
       <% end %>
@@ -12,4 +12,7 @@
       <%= form.raw_text_area "#{field_name}_#{locale}", class: "form-control mobility-field#{locale == selected ? '' : ' hidden'}", placeholder: "#{label} (#{locale.upcase})", rows: rows, data: { locale: locale } %>
     <% end %>
   </div>
+
+  <%= render(partial: "trestle/mobility/deepl_translation_action",
+             locals: { locales: locales }) if Trestle.config.mobility.deepl_api_key %>
 </div>

data/app/views/trestle/mobility/_text_field.html.erb

@@ -1,10 +1,10 @@
-<div class="form-group">
-  <div class="input-group mobility" data-active="<%= selected %>">
+<div class="form-group mobility" data-active="<%= selected %>">
+  <div class="input-group">
     <div class="input-group-btn">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul class="dropdown-menu mobility__languages">
         <% locales.each do |locale| %>
           <li><a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
         <% end %>
@@ -14,4 +14,7 @@
       <%= form.raw_text_field "#{field_name}_#{locale}", class: "form-control mobility-field#{locale == selected ? '' : ' hidden'}", placeholder: "#{label} (#{locale.upcase})", data: { locale: locale } %>
     <% end %>
   </div>
+
+  <%= render(partial: "trestle/mobility/deepl_translation_action",
+             locals: { locales: locales }) if Trestle.config.mobility.deepl_api_key %>
 </div>

data/config/routes.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+Trestle::Engine.routes.draw do
+  controller "trestle/mobility/translations" do
+    post "translate"
+  end
+end

data/lib/trestle/mobility/configuration.rb

@@ -4,6 +4,7 @@ module Trestle
       include Configurable
 
       option :selected
+      option :deepl_api_key
     end
   end
 end

data/lib/trestle/mobility/translators/deepl_translator.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Trestle::Mobility::Translators
+  class DeeplTranslator
+    def initialize(*)
+      begin
+        require "deepl"
+      rescue LoadError
+        raise StandardError, "Add the 'deepl-rb' gem to your Gemfile"
+      end
+
+      configure_api_key!
+    end
+
+    def translate(text, from, to)
+      DeepL.translate(text, from, to)
+    end
+
+    private
+      def configure_api_key!
+        DeepL.configure do |config|
+          config.auth_key = Trestle.config.mobility.deepl_api_key
+        end
+      end
+  end
+end

data/lib/trestle/mobility/version.rb

@@ -1,5 +1,5 @@
 module Trestle
   module Mobility
-    VERSION = "0.4.0"
+    VERSION = "0.5.0"
   end
 end

data/lib/trestle/mobility.rb

@@ -3,6 +3,7 @@ require "emoji_flag"
 require "trestle"
 require "trestle/mobility/version"
 require "trestle/mobility/configuration"
+require "trestle/mobility/translators/deepl_translator"
 require "trestle/mobility/engine" if defined?(Rails)
 
 Trestle::Configuration.option :mobility, Trestle::Mobility::Configuration.new

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: trestle-mobility
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Richard Venneman
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-05-15 00:00:00.000000000 Z
+date: 2019-05-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: emoji_flag
@@ -95,19 +95,24 @@ files:
 - Rakefile
 - app/assets/javascript/trestle/mobility.js
 - app/assets/stylesheets/trestle/mobility.scss
+- app/controllers/trestle/mobility/translations_controller.rb
 - app/views/trestle/mobility/_check_box.html.erb
+- app/views/trestle/mobility/_deepl_translation_action.html.erb
 - app/views/trestle/mobility/_text_area.html.erb
 - app/views/trestle/mobility/_text_field.html.erb
 - bin/console
 - bin/setup
 - config/initializers/trestle.rb
+- config/routes.rb
 - lib/trestle/mobility.rb
 - lib/trestle/mobility/configuration.rb
 - lib/trestle/mobility/engine.rb
 - lib/trestle/mobility/fields/check_box.rb
 - lib/trestle/mobility/fields/text_area.rb
 - lib/trestle/mobility/fields/text_field.rb
+- lib/trestle/mobility/translators/deepl_translator.rb
 - lib/trestle/mobility/version.rb
+- screenshot-deepl.png
 - screenshot.png
 - trestle-mobility.gemspec
 homepage: https://github.com/richardvenneman/trestle-mobility