Merge pull request #159 from antonioperic/page-improvments-137

fixed slug generation and image preview #137
BitBagCommerce · Jun 26, 2018 · 1742c23 · 1742c23
2 parents 5af3f6b + 3a74790
commit 1742c23
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/Resources/public/js/bitbag-page-slug.js b/src/Resources/public/js/bitbag-page-slug.js
@@ -3,11 +3,11 @@
 
     $.fn.extend({
         pageSlugGenerator: function () {
-            var timeout;
+            let timeout;
 
-            $('[name*="bitbag_page[translations]"][name*="[name]"]').on('input', function() {
+            $('[name*="bitbag_sylius_cms_plugin_page[translations]"][name*="[name]"]').on('input', function() {
                 clearTimeout(timeout);
-                var element = $(this);
+                let element = $(this);
 
                 timeout = setTimeout(function() {
                     updateSlug(element);
@@ -20,10 +20,10 @@
             });
 
             function updateSlug(element) {
-                var slugInput = element.parents('.content').find('[name*="[slug]"]');
-                var loadableParent = slugInput.parents('.field.loadable');
+                let slugInput = element.parents('.content').find('[name*="[slug]"]');
+                let loadableParent = slugInput.parents('.field.loadable');
 
-                if ('readonly' == slugInput.attr('readonly')) {
+                if ('readonly' === slugInput.attr('readonly')) {
                     return;
                 }
 

diff --git a/src/Resources/views/Macro/translationForm.html.twig b/src/Resources/views/Macro/translationForm.html.twig
@@ -24,3 +24,32 @@
         {% endfor %}
     </div>
 {% endmacro %}
+
+{% macro translationFormWithSlug(translations, slugFieldTemplate, resource) %}
+    {% import '@BitBagSyliusCmsPlugin/Macro/imageWidget.html.twig' as image %}
+    {% import '@SyliusUi/Macro/flags.html.twig' as flags %}
+
+    <div class="ui styled fluid accordion">
+        {% for locale, translationForm in translations %}
+            <div data-locale="{{ locale }}">
+                <div class="title{% if 0 == loop.index0 %} active{% endif %}">
+                    <i class="dropdown icon"></i>
+                    {{ flags.fromLocaleCode(locale) }} {{ locale|sylius_locale_name }}
+                </div>
+                <div class="ui content{% if 0 == loop.index0 %} active{% endif %}">
+                    {% for field in translationForm %}
+
+                        {% if field.vars.name == 'slug' %}
+                            {% include slugFieldTemplate with { 'slugField': translationForm.slug, 'resource': resource } %}
+                        {% elseif 'image' == field.vars.name %}
+                            {{ image.imageWidget(field) }}
+                        {% else %}
+                            {{ form_row(field) }}
+                        {% endif %}
+
+                    {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+{% endmacro %}
diff --git a/src/Resources/views/Page/Crud/_form.html.twig b/src/Resources/views/Page/Crud/_form.html.twig
@@ -1,4 +1,4 @@
-{% from '@BitBagSyliusCmsPlugin/Macro/translationForm.html.twig' import translationForm %}
+{% from '@BitBagSyliusCmsPlugin/Macro/translationForm.html.twig' import translationFormWithSlug %}
 {% form_theme form '@BitBagSyliusCmsPlugin/Form/theme.html.twig' %}
 
 <div class="ui two column stackable grid">
@@ -15,6 +15,6 @@
 
 <div class="ui one column stackable grid">
     <div class="column" id="bitbag-block-image">
-        {{ translationForm(form.translations, resource) }}
+        {{ translationFormWithSlug(form.translations, '@BitBagSyliusCmsPlugin/Page/Crud/_slugField.html.twig', page) }}
     </div>
 </div>
diff --git a/src/Resources/views/Page/create.html.twig b/src/Resources/views/Page/create.html.twig
@@ -33,4 +33,5 @@
     {{ sonata_block_render_event(event_prefix ~ '.javascripts') }}
 
     <script src="{{ asset('bundles/bitbagsyliuscmsplugin/js/bitbag-page-slug.js') }}"></script>
+    <script src="{{ asset('bundles/bitbagsyliuscmsplugin/js/bitbag-block-image-preview.js') }}"></script>
 {% endblock %}