django-modeltranslation-language-tabs

admin.py

from __future__ import unicode_literals

from django.conf import settings


class LanguageTabsMixin(object):
    change_form_template = 'admin/modeltranslation/change_form.html'

    def change_view(self, request, object_id, form_url='', extra_context=None):
        context = extra_context or {}
        context['tab_languages'] = settings.LANGUAGES
        return super(LanguageTabsMixin, self).change_view(
            request,
            object_id=object_id,
            form_url=form_url,
            extra_context=context
        )

    def add_view(self, request, form_url='', extra_context=None):
        context = extra_context or {}
        context['tab_languages'] = settings.LANGUAGES
        return super(LanguageTabsMixin, self).add_view(
            request,
            form_url=form_url,
            extra_context=context
        )

change_form.html

{% extends 'admin/change_form.html' %}
{% load i18n admin_static admin_modify cms_admin %}
{% block extrahead %}{{ block.super }}
<script src="{% static 'admin/modeltranslation/language_tabs.js' %}" type="text/javascript"></script>
<link href="{% static 'admin/modeltranslation/language_tabs.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block field_sets %}
<div id="page_form_lang_tabs" class="languagetabs_mixin">
    {% for lang_code, lang_name in tab_languages %}
        <input type="submit" class="language_button{% if forloop.first %} selected{% endif %}" value="{{ lang_name }}" data-language="{{ lang_code }}">
    {% endfor %}
    <div class="lang_tabs_line"></div>
</div>
{{ block.super }}
{% endblock %}

language_tabs.css

/* assumes djangocms-admin-style is installed */

.pseudo-hidden {
    position: absolute;
    left: -9000000px;
    top: 0;
}

language_tabs.js

var ModelTranslation = (function( $ ) {
    'use strict';

    $('document').ready(init);

    var $buttons;
    var $menu;
    var fields = {};
    var now_lang = 'de';

    function init() {
        $menu = $('#page_form_lang_tabs.languagetabs_mixin');
        $buttons = $('input', $menu);
        prepare_form();
        $buttons.bind({ click: change_language });
    };

    function change_language(e) {
        e.preventDefault();
        var $button = $(this);
        var lang = $button.data('language');
        $buttons.removeClass('selected');
        $button.addClass('selected');
        fields[now_lang].addClass('pseudo-hidden');
        fields[lang].removeClass('pseudo-hidden');
        now_lang = lang;
    };

    function prepare_form() {
        var cms_path = getQueryVariable('cms_path');
        if (cms_path) {
            // assume its /lang_code/whatever-slug/xy/
            var cms_path = decodeURIComponent(cms_path);
            var pieces = cms_path.split('/');
            if (pieces.length > 2) {
                var new_lang = pieces[1];
                var $new_selected = $buttons.filter("[data-language='" + new_lang + "']");
                if ($new_selected.size()) {
                    $buttons.removeClass('selected');
                    $new_selected.addClass('selected');
                }
            }
        }
        for( var i = 0; i < $buttons.length; i++ ) {
            var $button = $( $buttons[i] );
            var lang = $button.data('language');
            fields[lang] = $('.form-row[class$="_' + lang + '"]');
            if ( $button.hasClass('selected') ) {
                now_lang = lang;
            } else {
                // TODO delay until ckeditor is loaded
                fields[lang].addClass('pseudo-hidden');
            }
        }
    };

    // hate this! but this is a good solution, from
    // https://css-tricks.com/snippets/javascript/get-url-variables/
    function getQueryVariable(variable)
    {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
    }

})( django.jQuery );