trestle-mobility 1.0.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61f40dc820abfc72674027e455750a9c9b6011bed7a16ea257013407895cfe57
-  data.tar.gz: a6f35d96c0ce62a1b31de8441de8341a5372ea1657ce3b227256540d27ecde45
+  metadata.gz: e4975d7d0e80af83f7b3cfa3b7ae2b44271a480a95633d22e94bde04ab05c63c
+  data.tar.gz: 4e3286506ad4402daa7ae713512a3dabc427b8a228f1509cc060830e5992750a
 SHA512:
-  metadata.gz: e3c4546221bf0a30e3d04bbf41b04513abe31177af38d1b5e9fe04b01d0ac30da33dc94e5ba96974a612badf78f7eaa70571905666ffb52e725fc211d8aa702e
-  data.tar.gz: bdf55d61911e8923ff421fc14a1d3bb80f42fcb8e08b500dfffd9bc3b0dc7a7a83134835d14b00c7672455ab995b77870eaf1c100d88cfc8cd94c6e118d4d02d
+  metadata.gz: 63d50b633c31eaa5ee891bbb8b82942fbadd2a5579bb14fc7abc6e838ce05843ee9021b9e33330d66880576119fa65cc06c7fc7902bf5e833f13bb9b84d6c4f7
+  data.tar.gz: 7629c8c73cb70615fb7188c060c3dded5d15249264e720c54e4fd4e9375751c231c821b35ba13d65b80c65f2a162fc1b0e1ed144f7f760eb045c38c058b67f2a

data/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.4.0] - 2020-12-08
+- Ability to customise placeholder on the fields ([#5](https://github.com/richardvenneman/trestle-mobility/pull/5), thanks [@asad-ali-bhatti](https://github.com/asad-ali-bhatti))
+
+## [1.3.0] - 2019-11-08
+### Added
+- Support for Bootstrap 4 (that comes with Trestle 0.9.0)
+
+## [1.2.0] - 2019-08-14
+### Added
+- Start documenting changes
+
+### Changed
+- Support nested forms ([#3](https://github.com/richardvenneman/trestle-mobility/pull/3))

data/README.md

@@ -9,8 +9,6 @@
 - 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
 
 <img src="/screenshot.png?raw=true" width="529" height="242" alt="Trestle Mobility screenshot" />
 
@@ -24,7 +22,7 @@ gem 'trestle-mobility'
 
 Run `bundle install`, and then run the install generator to set up configuration options.
 
-    $ rails generate trestle:auth:install
+    $ rails generate trestle:mobility:install
 
 ## Usage
 
@@ -68,3 +66,9 @@ Trestle Mobility can automatically populate empty field values with translations
 ```ruby
 config.mobility.deepl_api_key = "YOUR-API-KEY"
 ```
+
+It is possible to pass any DeepL API options to the field (check out the [deepl-rb documentation](https://github.com/wikiti/deepl-rb#translate) section on params):
+
+```ruby
+mobility_text_area :content, rows: 14, deepl_query_params: { tag_handling: "xml" }
+```

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

@@ -22,7 +22,7 @@ Trestle.init(function(e, root) {
     this.$inputFields.each(function() {
       var field = $(this);
       var active = field.data('locale') !== self.activeLocale;
-      field.toggleClass('hidden', active)
+      field.toggleClass('mobility-field--hidden', active)
     })
 
     this.$dropdownItems.each(function() {
@@ -64,11 +64,13 @@ Trestle.init(function(e, root) {
   Mobility.prototype.deeplTranslate = function (fromLocale) {
     var self = this;
     var path = this.$deeplTranslationAction.data('remote-path');
+    var queryParams = this.$deeplTranslationAction.data('deepl-query-params');
     var data = {
       translation: {
         text: this.getFieldByLocale(fromLocale).val(),
         from_locale: fromLocale,
-        to_locale: this.activeLocale
+        to_locale: this.activeLocale,
+        query_params: queryParams
       }
     }
 

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

@@ -1,28 +1,64 @@
 .mobility {
+  .input-group-prepend {
+    display: flex;
+
+    .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .dropdown-toggle {
+    border-width: 1px;
+  }
+
+  .dropdown-item {
+    display: block;
+    width: 100%;
+    padding: .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: nowrap;
+    border: 0;
+
+    &:not(:hover, .active) {
+      color: #212529;
+      background-color: transparent;
+    }
+  }
+
   .dropdown-item.disabled,
   .dropdown-item.disabled:visited,
   .dropdown-item.disabled:active,
   .dropdown-item.disabled:hover {
-    background-color:#d9d9d9 !important;
-    color:#aaa !important;
+    background-color: #d9d9d9 !important;
+    color: #aaa !important;
     opacity: 0.7;
     cursor: default;
   }
-}
 
-.mobility-checkbox {
-  display: flex;
-  align-items:center;
+  .form-control {
+    border-left-width: 0;
+    border-top-right-radius: .25rem !important;
+    border-bottom-right-radius: .25rem !important;
+  }
 }
 
-.mobility-checkbox__label {
-  margin-left: 8px;
+.mobility-field {
+  &--hidden {
+    display: none !important;
+  }
 }
 
-
-.mobility__deepl-progress {
-  display: none;
-  margin-right: 4px;
+.mobility-checkbox {
+  margin-right: 0;
+  flex: 1;
+  padding: 0 8px;
+  border: solid #ccc;
+  border-width: 1px 1px 1px;
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
 }
 
 .mobility__deepl {
@@ -30,10 +66,8 @@
   margin-top: 4px;
   text-align: right;
 
-  .progress {
-    display: inline-block;
-    width: 97px;
-    margin-right: 4px;
+  .spinner-border {
+    display: none;
   }
 
   &--actionable {
@@ -41,7 +75,7 @@
   }
 
   &--active {
-    .mobility__deepl-progress {
+    .spinner-border {
       display: inline-block;
     }
   }

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

@@ -3,7 +3,8 @@ class Trestle::Mobility::TranslationsController < Trestle::ApplicationController
     translation = Trestle::Mobility::Translators::DeeplTranslator.new.translate(
       translation_params[:text],
       translation_params[:from_locale],
-      translation_params[:to_locale]
+      translation_params[:to_locale],
+      translation_params[:query_params] || {}
     )
 
     render plain: translation
@@ -11,6 +12,6 @@ class Trestle::Mobility::TranslationsController < Trestle::ApplicationController
 
   private
     def translation_params
-      params.require(:translation).permit(:text, :from_locale, :to_locale)
+      params.require(:translation).permit(:text, :from_locale, :to_locale, query_params: {})
     end
 end

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

@@ -1,20 +1,20 @@
 <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">
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" 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 mobility__languages">
+      <div 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>
+          <a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
         <% end %>
-      </ul>
+      </div>
     </div>
     <% locales.each do |locale| %>
       <%=
-        content_tag(:div, "#{field_name.to_s.humanize} (#{locale.upcase})", { class: "form-control mobility-checkbox mobility-field#{locale == selected ? '' : ' hidden'}", data: { locale: locale } }) do
-          form.raw_check_box("#{field_name}_#{locale}", { class: "mobility-checkbox__input" }, "1", "0") +
-          form.label("#{field_name}_#{locale}", "#{label} (#{locale.upcase})", class: "mobility-checkbox__label")
+        content_tag(:div, "#{field_name.to_s.humanize} (#{locale.upcase})", { class: "form-check form-check-inline mobility-checkbox mobility-field#{locale == selected ? '' : ' mobility-field--hidden'}", data: { locale: locale } }) do
+          builder.raw_check_box("#{field_name}_#{locale}", { class: "form-check-input mobility-checkbox__input" }, "1", "0") +
+          builder.label("#{field_name}_#{locale}", "#{label} (#{locale.upcase})", class: "form-check-label mobility-checkbox__label")
         end
       %>
     <% end %>

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

@@ -1,14 +1,13 @@
-<div class="mobility__deepl" data-remote-path="<%= trestle.translate_path %>">
-  <small class="mobility__deepl-progress">Translating…</small>
-
+<div class="mobility__deepl" data-remote-path="<%= trestle.translate_path %>" data-deepl-query-params="<%= deepl_query_params %>">
   <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 class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      Translate from
     </button>
-    <ul class="dropdown-menu mobility__deepl-languages">
+    <div 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>
+        <a href="javascript:void(0)" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
       <% end %>
-    </ul>
+    </div>
   </div>
 </div>

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

@@ -1,18 +1,36 @@
 <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 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 %>
-    </ul>
-    <% locales.each do |locale, index| %>
-      <%= form.raw_text_area "#{field_name}_#{locale}", class: "form-control mobility-field#{locale == selected ? '' : ' hidden'}", placeholder: "#{label} (#{locale.upcase})", rows: rows, data: { locale: locale } %>
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
+      </button>
+      <div class="dropdown-menu mobility__languages">
+        <% locales.each do |locale| %>
+          <a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
+        <% end %>
+      </div>
+    </div>
+    <% locales.each do |locale| %>
+      <%=
+        builder.raw_text_area(
+          "#{field_name}_#{locale}",
+          options.merge(
+            class: "form-control mobility-field#{locale == selected ? '' : ' mobility-field--hidden'}",
+            placeholder: options[: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 %>
+  <%=
+    render(
+      partial: "trestle/mobility/deepl_translation_action",
+      locals: {
+        locales: locales,
+        deepl_query_params: deepl_query_params.to_json
+      }
+    ) if Trestle.config.mobility.deepl_api_key
+  %>
 </div>

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

@@ -1,20 +1,36 @@
 <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">
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" 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 mobility__languages">
+      <div 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>
+          <a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
         <% end %>
-      </ul>
+      </div>
     </div>
     <% locales.each do |locale| %>
-      <%= form.raw_text_field "#{field_name}_#{locale}", class: "form-control mobility-field#{locale == selected ? '' : ' hidden'}", placeholder: "#{label} (#{locale.upcase})", data: { locale: locale } %>
+      <%=
+        builder.raw_text_field(
+          "#{field_name}_#{locale}",
+          options.merge(
+            class: "form-control mobility-field#{locale == selected ? '' : ' mobility-field--hidden'}",
+            placeholder: options[: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 %>
+  <%=
+    render(
+      partial: "trestle/mobility/deepl_translation_action",
+      locals: {
+        locales: locales,
+        deepl_query_params: deepl_query_params.to_json
+      }
+    ) if Trestle.config.mobility.deepl_api_key
+  %>
 </div>

data/lib/trestle/mobility/fields/check_box.rb

@@ -9,6 +9,7 @@ module Trestle
 
           @template.render partial: "trestle/mobility/check_box",
                            locals: {
+                             builder: builder,
                              field_name: name,
                              label: label,
                              locales: locales,

data/lib/trestle/mobility/fields/text_area.rb

@@ -2,19 +2,25 @@ module Trestle
   module Mobility
     module Fields
       class TextArea < Trestle::Form::Field
+        def defaults
+          super.merge(rows: 5)
+        end
+
         def field
           label = options[:label] || name.to_s.humanize
           locales = options[:locales] || I18n.available_locales.sort
           selected = options[:selected] || Trestle.config.mobility.selected.call || locales.first
-          rows = options[:rows] || 5
+          deepl_query_params =  options[:deepl_query_params] || {}
 
           @template.render partial: "trestle/mobility/text_area",
                            locals: {
+                             builder: builder,
+                             options: options,
                              field_name: name,
                              label: label,
                              locales: locales,
                              selected: selected,
-                             rows: rows
+                             deepl_query_params: deepl_query_params
                            }
         end
       end

data/lib/trestle/mobility/fields/text_field.rb

@@ -6,13 +6,17 @@ module Trestle
           label = options[:label] || name.to_s.humanize
           locales = options[:locales] || I18n.available_locales.sort
           selected = options[:selected] || Trestle.config.mobility.selected.call || locales.first
+          deepl_query_params =  options[:deepl_query_params] || {}
 
           @template.render partial: "trestle/mobility/text_field",
                            locals: {
+                             builder: builder,
+                             options: options,
                              field_name: name,
                              label: label,
                              locales: locales,
-                             selected: selected
+                             selected: selected,
+                             deepl_query_params: deepl_query_params
                            }
         end
       end

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

@@ -12,8 +12,8 @@ module Trestle::Mobility::Translators
       configure_api_key!
     end
 
-    def translate(text, from, to)
-      DeepL.translate(text, from, to)
+    def translate(text, from, to, query_params = {})
+      DeepL.translate(text, from, to, query_params)
     end
 
     private

data/lib/trestle/mobility/version.rb

@@ -1,5 +1,5 @@
 module Trestle
   module Mobility
-    VERSION = "1.0.0"
+    VERSION = "1.4.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: trestle-mobility
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.4.0
 platform: ruby
 authors:
 - Richard Venneman
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-05-18 00:00:00.000000000 Z
+date: 2020-12-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: emoji_flag
@@ -89,6 +89,7 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - ".travis.yml"
+- CHANGELOG.md
 - Gemfile
 - LICENSE.md
 - README.md
@@ -135,7 +136,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: Mobility integration plugin for the Trestle admin framework