Sage/i18n_yaml_editor

<div class="stats">
  stats: {
  total: <span class=""><%= keys.length %></span>,
  <span class="done">done: <%= keys.count{|_,key| key.complete? && !key.empty?} %></span>,
  <span class="incomplete">incomplete: <%= keys.count{|_,key| !key.complete?} %></span>,
  <span class="empty">empty: <%= keys.count{|_,key| key.empty?} %></span>}
</div>

<form id="updateform" action="/update" method="post">
  <% filters.each do |filter, value| %>
    <input name="filters[<%= filter %>" type="hidden" value="<%= value %>" class="changed"/>
  <% end %>

  <table class="keys" cellspacing="0">
    <% keys.each do |name, key| %>
      <tr class="translation
        <%= "incomplete" unless key.complete? %>
        <%= "empty" if key.empty? %>
        ">
        <td class="key">
          <span class="text"><%= key.name %></span>
        </td>
        <td class="translations">
          <table class="locales">
            <%
               data_type = key.translations.map(&:text).find { |t| t.present? || t == false }.class
               data_type = String if data_type == NilClass
            %>
            <%
               key.translations.sort_by(&:locale).each do |translation|
                 translation.text = [] if data_type == Array && translation.text.blank?
                 klasses = translation.text.map(&:class).uniq if data_type == Array
            %>
              <tr>
                <td class="locale"><%= translation.locale %>:</td>
                <td class="value">
                  <% if data_type == String || data_type < Numeric %>
                    <input type="text" name="translations[<%= translation.name %>]" value="<%= Rack::Utils.escape_html translation.text %>" />
                  <% elsif [TrueClass, FalseClass].include?(data_type) %>
                    <input type="radio" name="translations[<%= translation.name %>]" value="true" <%= 'checked' if translation.text == true %>/><label> True</label>
                    <input type="radio" name="translations[<%= translation.name %>]" value="false" <%= 'checked' if translation.text == false %>/><label> False</label>
                  <% elsif data_type == Array && (klasses.all? { |klass| klass == String } || klasses.all? { |klass| klass < Numeric}) %>
                    <textarea name="translations[<%= translation.name %>]" cols="35" rows="<%= translation.text.count %>"><%= translation.text.join("\n") %></textarea>
                  <% else %>
                    [read only]
                    <%= translation.text.class.name %>
                    <%= Rack::Utils.escape_html translation.text.inspect %>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </table>
        </td>
      </tr>
    <% end %>
  </table>

  <p class="pull-right"><input type="submit" id="save" value="Save" /></p>
</form>
<script>
  var updateForm = document.getElementById('updateform'),
      saveOnTop = document.createElement('button'),
      idx,
      changes,
      submitForm,
      input,
      inputs = updateForm.getElementsByTagName('input'),
      keygens = updateForm.getElementsByTagName('keygen'),
      selects = updateForm.getElementsByTagName('select'),
      textareas = updateForm.getElementsByTagName('textarea'),
      markChanged = function () {
        if (!(/(?:^|\s)changed(?!\S)/).test(this.className)) {
          this.className += ' changed';
        }
      };

  saveOnTop.innerHTML = 'Save';
  saveOnTop.onclick = function () { updateForm.onsubmit();};
  document.getElementById('save-on-top-container').appendChild(saveOnTop);


  for (idx in inputs) {
    input = inputs[idx];
    if (input.type === 'checkbox' ||
        input.type === 'file' ||
        input.type === 'password' ||
        input.type === 'radio' ||
        input.type === 'range' ||
        input.type === 'search' ||
        input.type === 'text') {
      input.onchange = markChanged;
    }
  }

  for (idx in keygens) {
    keygens[idx].onchange = markChanged;
  }

  for (idx in selects) {
    selects[idx].onchange = markChanged;
  }

  for (idx in textareas) {
    textareas[idx].onchange = markChanged;
  }

  updateForm.onsubmit = function () {
    submitForm = document.createElement('form');
    submitForm.action = this.action;
    submitForm.method = this.method;
    changes = this.getElementsByClassName('changed');
    while (changes.length > 0) {
      submitForm.appendChild(changes[0]);
    }
    document.body.appendChild(submitForm);
    submitForm.submit();
    return false;
  };
</script>