redactor-plugins.js

        return;

      // Set cursor at the end of the expanded text
      var left = current.textContent.substring(0, cursorAt),
          right = current.textContent.substring(cursorAt),
          autoExpand = event.target.nodeName == 'I',
          selected = item.variable + (autoExpand ? '.' : '')
          newLeft = left.replace(search, '%{' + selected + '}');

      current.textContent = newLeft
        // Drop the remaining part of a variable block, if any
        + right.replace(/[^%}]*?[%}]/, '');

      this.range.setStart(current, newLeft.length - 1);
      this.range.setEnd(current, newLeft.length - 1);
      this.selection.addRange();
      if (!autoExpand)
          return plugin.destroy();

      plugin.typeahead.val(selected);
      plugin.typeahead.typeahead('lookup');
      return false;
    }
  };
};

RedactorPlugins.translatable = function() {
  return {
    langs: undefined,
    config: undefined,
    textareas: {},
    current: undefined,
    primary: undefined,
    button: undefined,

    init: function() {
      $.ajax({
        url: 'ajax.php/i18n/langs/all',
        success: this.translatable.setLangs.bind(this)
      });
      getConfig().then(this.translatable.setConfig.bind(this));
      this.opts.keydownCallback = this.translatable.showCommit.bind(this);
      this.translatable.translateTag = this.$textarea.data('translateTag');
    },

    setLangs: function(langs) {
      this.translatable.langs = langs;
      this.translatable.buildDropdown();
    },

    setConfig: function(config) {
      this.translatable.config = config;
      this.translatable.buildDropdown();
    },

    buildDropdown: function() {
      if (!this.translatable.config || !this.translatable.langs)
        return;

      var plugin = this.translatable,
          primary = this.$textarea,
          primary_lang = plugin.config.primary_language.replace('-','_'),
          primary_info = plugin.langs[primary_lang],
          dropdown = {},
          items = {};

      langs = plugin.langs;
      plugin.textareas[primary_lang] = primary;
      plugin.primary = plugin.current = primary_lang;

      dropdown[primary_lang] = {
        title: '<i class="flag flag-'+primary_info.flag+'"></i> '+primary_info.name,
        func: function() { plugin.switchTo(primary_lang); }
      }

      $.each(langs, function(lang, info) {
        if (lang == primary_lang)
          return;
        dropdown[lang] = {
          title: '<i class="flag flag-'+info.flag+'"></i> '+info.name,
          func: function() { plugin.switchTo(lang); }
        };
        plugin.textareas[lang] = primary.clone(false).attr({
          lang: lang,
          dir: info['direction'],
          'class': '',
        })
        .removeAttr('name').removeAttr('data-translate-tag')
        .text('')
        .insertAfter(primary);
      });

      // Add the button to the toolbar
      plugin.button = this.button.add('translate', __('Translate')),
      this.button.setAwesome('translate', 'flag flag-' + plugin.config.primary_lang_flag);
      plugin.button.parent().addClass('pull-right');
      this.button.addDropdown(plugin.button, dropdown);

      // Flip back to primary language before submitting
      this.$textarea.closest('form').submit(function() {
        plugin.switchTo(primary_lang);
      });
    },

    switchTo: function(lang) {
      var that = this;

      if (lang == this.translatable.current)
        return;

      if (this.translatable.translations === undefined) {
        this.translatable.fetch('ajax.php/i18n/translate/' + this.translatable.translateTag)
        .then(function(json) {
          that.translatable.translations = json;
          $.each(json, function(l, text) {
            that.translatable.textareas[l].val(text);
          });
          // Now switch to the language
          that.translatable.switchTo(lang);
        });
        return;
      }

      var html = this.$editor.html();
      this.$textarea.val(this.clean.onSync(html));
      this.$textarea = this.translatable.textareas[lang];
      this.code.set(this.$textarea.val());
      this.translatable.current = lang;

      this.button.setAwesome('translate', 'flag flag-' + this.translatable.langs[lang].flag);
      this.$editor.attr({lang: lang, dir: this.translatable.langs[lang].direction});
    },

    showCommit: function() {
      var plugin = this.translatable;

      if (this.translatable.current == this.translatable.primary) {
        if (this.translatable.$commit)
          this.translatable.$commit
          .slideUp(function() { $(this).remove(); plugin.$commit = undefined; });
        return true;
      }

      if (this.translatable.$commit)
        return true;

      this.translatable.$commit = $('<div class="language-commit"></div>')
      .hide()
      .appendTo(this.$box)
      .append($('<button type="button" class="white button commit"><i class="fa fa-save icon-save"></i> '+__('Save')+'</button>')
        .on('click', $.proxy(this.translatable.commit, this))
      )
      .slideDown();
    },

    commit: function() {
      var changes = {}, self = this,
          plugin = this.translatable,
          $commit = plugin.$commit;
      $commit.find('button').empty().text(' '+__('Saving'))
          .prop('disabled', true)
          .prepend($('<i>').addClass('fa icon-spin icon-spinner'));
      changes[plugin.current] = this.code.get();
      $.ajax('ajax.php/i18n/translate/' + plugin.translateTag, {
        type: 'post',
        data: changes,
        success: function() {
          $commit.slideUp(function() { $(this).remove(); plugin.$commit = undefined; });
        }
      });
    },

    urlcache: {},
    fetch: function( url, data, callback ) {
      var urlcache = this.translatable.urlcache;
      if ( !urlcache[ url ] ) {
        urlcache[ url ] = $.Deferred(function( defer ) {
          $.ajax( url, { data: data, dataType: 'json' } )
            .then( defer.resolve, defer.reject );
        }).promise();
      }
      return urlcache[ url ].done( callback );
    },
  };
};