Fixed i18n form tabs for SnowcapAdminBundle

Author: jmsche

README.md

@@ -18,6 +18,10 @@ file in this bundle:
 
 [Read the Documentation for master](https://github.com/snowcap/SnowcapI18nBundle/blob/master/Resources/doc/index.md)
 
+The Changelog is available here:
+
+[Read the Changelog for master](https://github.com/snowcap/SnowcapI18nBundle/blob/master/Resources/doc/changelog.md)
+
 Installation
 ------------
 

Resources/doc/changelog.md

@@ -0,0 +1,25 @@
+SnowcapI18nBundle - Changelog
+=============================
+
+## 2015-07-10
+
+* When using SnowcapAdminBundle & embedding the i18n_form.html.twig file, you must now also include the i18n_form.js
+in your ``base.html.twig`` file in your AdminBundle:
+
+```jinja
+{# src/Acme/AdminBundle/Resources/views/base.html.twig #}
+
+{% extends 'SnowcapAdminBundle::admin_base.html.twig' %}
+
+{# ... #}
+
+{% block javascripts %}
+    {{ parent() }}
+    {% javascripts
+        'bundles/snowcapi18n/js/admin/i18n_form.js'
+        output='cache/assetic/js/acmeadmin.js'
+    %}
+        <script type="text/javascript" src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock javascripts %}
+```

Resources/public/js/admin/i18n_form.js

@@ -0,0 +1,36 @@
+jQuery(document).ready(function () {
+    // As the I18n form prototype will always have the same prefix it would be a problem
+    // for collections having translations (eg. Questions have multiple Answers, and these answers are translated).
+    // The current system does not work properly if we try to add 2+ Answers at the same time.
+    // This fix replaces any prefix having the "fake prefix" to a new unique prefix on-the-fly.
+    function replaceI18nTabTags() {
+        $('[data-admin=translatable-content]').each(function (index, el) {
+            var fakePrefix = 'I18N_TAB_PREFIX';
+            var $el = $(el);
+
+            if ($el.attr('data-prefix') === fakePrefix) {
+                // Prefix must be replaced
+                var prefix = Math.floor(Math.random() * 10000000 + 1);
+                $el.attr('data-prefix', prefix);
+
+                $('[data-toggle=tab]', $el).each(function (index, tab) {
+                    var $tab = $(tab);
+                    $tab.attr('href', $tab.attr('href').replace(fakePrefix, prefix));
+                });
+
+                $('.tab-pane', $el).each(function (index, pane) {
+                    var $pane = $(pane);
+                    $pane.attr('id', $pane.attr('id').replace(fakePrefix, prefix));
+                });
+            }
+        });
+    }
+
+    // Calling it when the page is displayed (for already displayed tabs)
+    replaceI18nTabTags();
+
+    // Calling it every time the form is changed
+    $(document).on('change', 'form', function() {
+        replaceI18nTabTags();
+    });
+});

Resources/views/Admin/i18n_form.html.twig

@@ -1,27 +1,29 @@
-{% set prefix = random() %}
-<ul class="nav nav-tabs translation-tabs">
-    {% for locale in _locales %}
-        {% block tab_item %}
-            <li class="{% if loop.first %}active{% endif %}"><a href="#{{ prefix }}_{{ locale }}" data-toggle="tab">{{ locale|language|capitalize }}</a></li>
-        {% endblock %}
-    {% endfor %}
-</ul>
-
-<div class="tab-content translation-content">
-    {% for locale in _locales %}
-        <div class="tab-pane{% if loop.first %} active{% endif %}" id="{{ prefix }}_{{ locale }}" data-locale="{{ locale|language|capitalize }}">
-            {% set translation = form.translations[locale] %}
-            
-            {% block i18n_form_fields %}
-                {% for field in translation %}
-                    {{ form_row(field) }}
-                {% endfor %}
+{% set prefix = 'I18N_TAB_PREFIX' %}
+<div data-admin="translatable-content" data-prefix="{{ prefix }}">
+    <ul class="nav nav-tabs translation-tabs">
+        {% for locale in _locales %}
+            {% block tab_item %}
+                <li class="{% if loop.first %}active{% endif %}"><a href="#{{ prefix }}_{{ locale }}" data-toggle="tab">{{ locale|language|capitalize }}</a></li>
             {% endblock %}
-        </div>
-    {% endfor %}
-    {% if form.translations.vars.errors is not empty %}
-        <div class="error">
-            {{ form_errors(form.translations) }}
-        </div>
-    {% endif %}
+        {% endfor %}
+    </ul>
+
+    <div class="tab-content translation-content">
+        {% for locale in _locales %}
+            <div class="tab-pane{% if loop.first %} active{% endif %}" id="{{ prefix }}_{{ locale }}" data-locale="{{ locale|language|capitalize }}">
+                {% set translation = form.translations[locale] %}
+
+                {% block i18n_form_fields %}
+                    {% for field in translation %}
+                        {{ form_row(field) }}
+                    {% endfor %}
+                {% endblock %}
+            </div>
+        {% endfor %}
+        {% if form.translations.vars.errors is not empty %}
+            <div class="error">
+                {{ form_errors(form.translations) }}
+            </div>
+        {% endif %}
+    </div>
 </div>