i18n_admin_utils 0.0.4 → 1.0.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    Y2U3NmI2Y2UyY2E1ZDk3MmUzY2U2Y2QxZTljNTY4NjY0NmYwNjEwZg==
+    NDIzYjQyMjUxZTY1ZDUzY2FiYWUzOTlmZjU2ZjAzYTQ1MmRmZDBiNA==
   data.tar.gz: !binary |-
-    M2VhOTQwNDJhY2ZhZGJiMTY5YTUxNDRmMzFhOWZkODlmZWMxM2Q2Mg==
+    ZmQ3Mzk2ZDIyNmY5NjNlY2U5Nzg2YmFiOWIzMzM3NjdlMmJiY2ZiYQ==
 SHA512:
   metadata.gz: !binary |-
-    MWI1OGYyZmU2MzdhMmRmOGRmNTBiYjBmNTNiZDRmYmY0MmFlMzE4ZTEzZmNm
-    Yjc5MDEyZGRjOWYxMTRkMDdkOTBkYmM3YmE4YjA4YTNlMmUyZDBjNTEzN2Uy
-    MWY3ZDNkODU1ZWI2N2ZlZTU3NGU3ZTFkOGU1OWYxYWFiNmMwNjM=
+    MzczOWZiMTIyNDg0NGY1ODg3NzI0YWQ2ZWQyN2JlYjY0ZjM4M2Y1NDhmM2I4
+    N2I4ZGRiOWE1MmY1M2I0ODE4OTMyYjZiZjVhNTgzY2I1YTY3MjVmMTFkMDY4
+    ZWEzMGQ1NTQwNjgwZDdmY2NiNjIxN2JjMmMzOWE1NjQzZjhiOGY=
   data.tar.gz: !binary |-
-    ODAyNTlkYmM2ODBhZTE0ZjcxNzUzMmNmZmQ2N2UyM2FkOThhZWFmOWRhNjQ4
-    NTNkYzUzZmM0ZTc0NmRkNDViNGIxMjdiYmFmNjA5MDdiYWU1ODM2MWFjNjM3
-    MWFmNjhhZGI3Y2RhYWZjNjhjOWRiNzk3NzZkMjQ1MjIzZjVlMDA=
+    ZGE1ZmM4N2YzMDkyNzg4OWZjZDk3YTUxOTE1MzFjZmY2MTg0MDRjYjdmMDdk
+    ZDJlY2U1NTJiZmQ5NjkyY2EzOWNhMzZmOGVjZjM1ZjM2ZGFiZDkwMTUxYjUz
+    NmYzZjUxNGM3MDcxMDRlZGE0ZWM3ZmRlZDc5MzI3YTgxZTcwNjk=

data/app/assets/javascripts/i18n_admin_utils/application.coffee

@@ -16,20 +16,77 @@
 #= require_tree .
 #= require bootstrap
 
-$(document).ready ()->
+$(document).ready () ->
   window.load_script_on($(this))
+
+  $('.loadonready').each () ->
+    container = $(this)
+    url = container.data('url')
+    container.html($('#loading_icon').html())
+    $.get(url).success (data) ->
+      container.html(data)
+      window.load_script_on(container)
+
   $(document).on 'click', 'form input.nosubmit, form button.nosubmit', (e) ->
     e.preventDefault();
 
   $(document).on 'keyup', 'input[data-update], textarea[data-update]', () ->
     input = $(this)
     form = input.closest('form')
-    console.log(form)
     form.find('input[name="' + input.data('update') + '"], textarea[name="' + input.data('update') + '"]').val(input.val())
 
+  $(document).on 'click', '.toogle-container', () ->
+    container = $($(this).data('container'))
+    if container.is(':visible')
+      container.hide()
+    else
+      container.show()
+
+  $(document).on 'keyup', 'input.translation_search', () ->
+    input = $(this)
+    val = input.val()
+
+
+    container = input.closest '.translation_container'
+    elements = container.find('.translation_list .translation_item')
+    if val.length == 0
+      show_translation_element(elements)
+    else
+      query = '[data-locale*="' + val + '"],[data-key*="' + val + '"], [data-filename*="' + val + '"]'
+      show_translation_element(elements.filter(query))
+      hide_translation_element(elements.not(query))
+
+  $(document).on 'click', '.translation_list .translation_item', () ->
+    item = $(this)
+    list = item.closest('.translation_list')
+    list.find('.translation_item.active').each () ->
+      $(this).removeClass('active')
+    item.addClass('active')
+    container = item.closest('.translation_container').find(list.data('container'))
+    container.html($('#loading_icon').html())
+    $.get(list.data('url'), {
+      translation: item.data('translation')
+    }).success (data) ->
+      container.html(data)
+      window.load_script_on(container)
+
 #Rerun this command for reloading script for new element added with ajax for example
 window.load_script_on = (container) ->
   container.find("[rel=tooltip]").tooltip({ container: 'body', animation: false, delay: 0});
   container.find("[rel=popover]").popover({ container: 'body', animation: false, delay: 0, trigger: 'hover'});
   container.find('[data-toggle="modal"]').modal('hide')
+  container.find('textarea.autosize').autosize()
+  window.load_rails_embed_code_editor() #Reload editors
+
+
+show_translation_element = (elements) ->
+  elements.each () ->
+    element = $(this)
+    if not element.is ':visible'
+      element.slideDown(200)
 
+hide_translation_element = (elements) ->
+  elements.each () ->
+    element = $(this)
+    if  element.is ':visible'
+      element.slideUp(200)

data/app/assets/javascripts/i18n_admin_utils/jquery.autosize.min.js

@@ -0,0 +1,7 @@
+/*!
+	Autosize v1.18.6 - 2014-03-13
+	Automatically adjust textarea height based on user input.
+	(c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
+	license: http://www.opensource.org/licenses/mit-license.php
+*/
+(function(e){var t,o={className:"autosizejs",id:"autosizejs",append:"",callback:!1,resizeDelay:10,placeholder:!0},i='<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',n=["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing","textIndent"],a=e(i).data("autosize",!0)[0];a.style.lineHeight="99px","99px"===e(a).css("lineHeight")&&n.push("lineHeight"),a.style.lineHeight="",e.fn.autosize=function(i){return this.length?(i=e.extend({},o,i||{}),a.parentNode!==document.body&&e(document.body).append(a),this.each(function(){function o(){var t,o=window.getComputedStyle?window.getComputedStyle(u,null):!1;o?(t=u.getBoundingClientRect().width,0===t&&(t=parseInt(o.width,10)),e.each(["paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],function(e,i){t-=parseInt(o[i],10)})):t=Math.max(p.width(),0),a.style.width=t+"px"}function s(){var s={};if(t=u,a.className=i.className,a.id=i.id,d=parseInt(p.css("maxHeight"),10),e.each(n,function(e,t){s[t]=p.css(t)}),e(a).css(s).attr("wrap",p.attr("wrap")),o(),window.chrome){var r=u.style.width;u.style.width="0px",u.offsetWidth,u.style.width=r}}function r(){var e,n;t!==u?s():o(),a.value=!u.value&&i.placeholder?(p.attr("placeholder")||"")+i.append:u.value+i.append,a.style.overflowY=u.style.overflowY,n=parseInt(u.style.height,10),a.scrollTop=0,a.scrollTop=9e4,e=a.scrollTop,d&&e>d?(u.style.overflowY="scroll",e=d):(u.style.overflowY="hidden",c>e&&(e=c)),e+=w,n!==e&&(u.style.height=e+"px",f&&i.callback.call(u,u))}function l(){clearTimeout(h),h=setTimeout(function(){var e=p.width();e!==g&&(g=e,r())},parseInt(i.resizeDelay,10))}var d,c,h,u=this,p=e(u),w=0,f=e.isFunction(i.callback),z={height:u.style.height,overflow:u.style.overflow,overflowY:u.style.overflowY,wordWrap:u.style.wordWrap,resize:u.style.resize},g=p.width();p.data("autosize")||(p.data("autosize",!0),("border-box"===p.css("box-sizing")||"border-box"===p.css("-moz-box-sizing")||"border-box"===p.css("-webkit-box-sizing"))&&(w=p.outerHeight()-p.height()),c=Math.max(parseInt(p.css("minHeight"),10)-w||0,p.height()),p.css({overflow:"hidden",overflowY:"hidden",wordWrap:"break-word",resize:"none"===p.css("resize")||"vertical"===p.css("resize")?"none":"horizontal"}),"onpropertychange"in u?"oninput"in u?p.on("input.autosize keyup.autosize",r):p.on("propertychange.autosize",function(){"value"===event.propertyName&&r()}):p.on("input.autosize",r),i.resizeDelay!==!1&&e(window).on("resize.autosize",l),p.on("autosize.resize",r),p.on("autosize.resizeIncludeStyle",function(){t=null,r()}),p.on("autosize.destroy",function(){t=null,clearTimeout(h),e(window).off("resize",l),p.off("autosize").off(".autosize").css(z).removeData("autosize")}),r())})):this}})(window.jQuery||window.$);

data/app/assets/javascripts/i18n_admin_utils/translation_helper.coffee

@@ -1,5 +1,4 @@
 #Script that add forms to edit non existing translation
-
 $(document).ready () ->
   $('span.translation_missing').each ->
     span = $(this)
@@ -11,12 +10,6 @@ $(document).ready () ->
       content: content
     })
 
-  $('.loadonready').each () ->
-    container = $(this)
-    url = container.data('url')
-    $.get(url).success (data) ->
-      container.html(data)
-      window.load_script_on(container)
 
   $(document).on 'submit', 'form.translation_helper', (e)->
     e.preventDefault()
@@ -41,7 +34,6 @@ $(document).ready () ->
 get_content = (span)->
   url = '/translation/edit'
   key = span.attr('title').match(/translation missing: (.*)/)[1]
-  console.log(key)
   content = "<form action='" + url + "' method='post' class='translation_helper'>"
   content += "<div class='alert alert-danger hidden'></div>"
   content += "<input type='hidden' name='key' value='" + key + "'>"

data/app/assets/stylesheets/i18n_admin_utils/animation.scss

@@ -0,0 +1,38 @@
+@import "variables";
+
+.spinner {
+  width: 30px;
+  height: 30px;
+  background-color: $lighter_grey;
+
+  margin: 100px auto;
+  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
+  animation: rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes rotateplane {
+  0% {
+    -webkit-transform: perspective(120px)
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateY(180deg)
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
+  }
+}
+
+@keyframes rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  }
+  50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  }
+  100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}

data/app/assets/stylesheets/i18n_admin_utils/application.scss

@@ -9,14 +9,139 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require_tree .
  *= require bootstrap
+ *= require_tree .
  */
 
+@import 'variables';
+
+$headerheight: 70px;
+
+html, body {
+  height: 100%;
+  .wrapper {
+    min-height: calc(100vh - #{$headerheight});
+    height: 100%;
+  }
+}
+
 body {
-  padding-top: 70px;
+  padding-top: $headerheight;
+}
+
+.translation_missing_container .row {
+  padding: 1rem 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.editor_container {
+  .ace_editor {
+    overflow: hidden;
+  }
+}
+
+$border-color: $lightest_grey;
+$titleheight: 70px;
+$translation_container_offset: $titleheight+$headerheight;
+
+div.translation_title {
+  height: $titleheight;
+}
+div.translation_container {
+  border-top: 1px solid $border-color;
+  min-height: calc(100vh - #{$translation_container_offset});
+  div.translation_list {
+    border-right: 1px solid $border-color;
+    padding-right: 0;
+    padding-left: 0;
+    min-height: calc(100vh - #{$translation_container_offset+1});
+    div.translation_filter {
+      padding: 1rem;
+      background-color: $white_grey;
+      border-bottom: 1px solid $border-color;
+      input[type="text"] {
+      }
+    }
+    div.translation_item {
+      padding: 2rem;
+      cursor: pointer;
+      &.active {
+        background-color: #4183C4;
+      }
+      &:nth-child(even) {
+        background-color: $white_grey;
+      }
+      &:hover:not(.active) {
+        background-color: $lighter_grey;
+      }
+
+      border-bottom: 1px solid $border-color;
+
+      .translation_filename {
+        direction: rtl;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        unicode-bidi: bidi-override;
+        font-style: italic;
+      }
+
+      &.active {
+        background-color: #6B9ED1;
+        color: white;
+        position: relative;
+
+        &:after, &:before {
+          left: 100%;
+          top: 50%;
+          border: solid transparent;
+          content: " ";
+          height: 0;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+        }
+
+        &:after {
+          border-color: rgba(65, 131, 196, 0);
+          border-left-color: #6B9ED1;
+          border-width: 10px;
+          margin-top: -10px;
+        }
+        &:before {
+          border-color: rgba(65, 131, 196, 0);
+          border-left-color: $border-color;
+          border-width: 11px;
+          margin-top: -11px;
+        }
+      }
+    }
+  }
+
+  div.translation_edit_container {
+    position: relative;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    textarea {
+      height: 10rem;
+      resize: none;
+      width: 100%;
+      padding: 20px;
+      border: 0;
+      border-top: 1px solid $border-color;
+      border-bottom: 1px solid $border-color;
+      background: #fff;
+      color: #999999;
+      font-size: 21px;
+      line-height: 1.6em;
+      resize: none;
+      -moz-transition: color 0.15s ease-in 0;
+      -webkit-transition: color 0.15s ease-in 0;
+      transition: color 0.15s ease-in 0;
+      box-shadow: none;
+    }
+    button {
+      margin-top: 1rem;
+    }
+  }
 }
 
-.translation_missing_container .row{
-  margin-top: 5px;
-}

data/app/assets/stylesheets/i18n_admin_utils/general.scss

@@ -0,0 +1,20 @@
+@import "variables";
+
+.text-md
+{
+  font-size: $text_sm;
+}
+
+.text-md
+{
+  font-size: $text_md;
+}
+
+.text-lg
+{
+  font-size: $text_lg;
+}
+
+.text-bold {
+  font-weight: bold;
+}

data/app/assets/stylesheets/i18n_admin_utils/variables.scss

@@ -0,0 +1,8 @@
+$light_grey: #d5d5d5;
+$lighter_grey: #e5e5e5;
+$lightest_grey: #f5f5f5;
+$white_grey: #fcfcfc;
+
+$text_sm: 1rem;
+$text_md: 2rem;
+$text_lg: 4rem;

data/app/controllers/i18n_admin_utils/application_controller.rb

@@ -1,5 +1,6 @@
 module I18nAdminUtils
   class ApplicationController < ::ApplicationController
     protect_from_forgery with: :exception
+    layout 'i18n_admin_utils/application'
   end
 end

data/app/controllers/i18n_admin_utils/translation_controller.rb

@@ -25,11 +25,16 @@ module I18nAdminUtils
       end
     end
 
+    def show
+      unless params[:translation].nil?
+        render :partial => 'show', :locals => {:translation => params[:translation]}
+      end
+    end
+
     #Return a list of all the missing translation
     def missing_list
-      translation = I18nAdminUtils::SearchTranslation.search
-      puts translation
-      render :partial => 'missing_list', :layouts => false, :locals=> {:translation => translation}
+      translations = I18nAdminUtils::SearchTranslation.search
+      render :partial => 'missing_list', :layouts => false, :locals => {:translations => translations}
     end
 
     def i18n_redirect(message, success = true)

data/app/views/i18n_admin_utils/translation/_missing_list.html.erb

@@ -1,74 +1,28 @@
-<div class='translation_missing_container'>
-  <div class='container'>
-    <div class='row'>
-      <div class='col-md-1'>
-        <strong>Locale</strong>
+<% translations.each do |translation| %>
+    <div class="translation_item" data-translation='<%= translation.to_json %>'
+         data-locale='<%= translation[:locale] %>'
+         data-key='<%= translation[:key] %>'
+         data-filename='<%= translation[:filename] %>'>
+      <div class="row">
+        <div class="col-md-1">
+          <%= translation[:locale] %>
+        </div>
+        <div class="col-md-5">
+          <%= translation[:key] %>
+        </div>
+        <div class="col-md-6 ">
+          <div class="translation_filename">
+            <%= translation[:filename].reverse %>
+          </div>
+        </div>
       </div>
+    </div>
+<% end %>
+
+
+
+
 
-      <div class='col-md-2'>
-        <strong> Key</strong>
-      </div>
 
-      <div class='col-md-8'>
-        <strong>Translation</strong>
-      </div>
 
-      <div class='col-md-1'>
-        <div class='pull-right'>
-          <strong> Submit</strong>
-        </div>
-      </div>
-    </div>
-    <% translation.each do |translation| %>
-        <div class='row' data-locale='<%= translation[:locale] %>' data-key='<%= translation[:key] %>'>
-          <%= form_tag translation_edit_path, :class => 'translation_helper' do %>
-              <div class='col-md-1'>
-                <%= translation[:locale] %>
-              </div>
-              <div class='col-md-2'>
-                <%= translation[:key] %>
-              </div>
-              <%= hidden_field_tag :locale, translation[:locale] %>
-              <%= hidden_field_tag :key, translation[:key] %>
-              <div class='col-md-8'>
-                <div class='input-group'>
-                  <%= text_field_tag :value, '', :class => 'form-control', 'data-update' => 'value_ta' %>
-                  <% id = "#{translation[:locale]}_#{translation[:key]}".gsub(/\./, '_') %>
-                  <span class="input-group-btn">
-                      <button class='btn btn-default nosubmit' title='Click to open larger edit box' rel='tooltip' data-toggle="modal" data-target="#<%= id %>">
-                        <span class='glyphicon glyphicon-edit'></span>
-                      </button>
-                  </span>
-                </div>
-                <div>
-                  <div class="modal fade" id="<%= id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                    <div class="modal-dialog">
-                      <div class="modal-content">
-                        <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                          <h4 class="modal-title" id="myModalLabel">Input translation</h4>
-                        </div>
-                        <div class="modal-body">
-                          <%= text_area_tag :value_ta, '', :class => 'form-control', 'data-update' => 'value' %>
-                        </div>
-                        <div class="modal-footer">
-                          <button type="button" class="btn btn-default nosubmit" data-dismiss="modal">Ok</button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class='col-md-1'>
-                <div class='pull-right'>
-                  <button class='btn btn-primary'>
-                    Add
-                  </button>
-                </div>
-              </div>
-          <% end %>
-        </div>
-    <% end %>
 
-  </div>
-</div>