related layouts rendered from ajax call

ezecosystem · Jul 10, 2018 · 1c69c7c · 1c69c7c
1 parent a373fe5
commit 1c69c7c
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 17 deletions.
diff --git a/bundle/Resources/public/css/style.css b/bundle/Resources/public/css/style.css
diff --git a/bundle/Resources/public/js/app.js b/bundle/Resources/public/js/app.js
@@ -299,21 +299,55 @@ $(document).ready(function () {
     this.$el = $(el);
     this.csrf = $('meta[name=ngbm-admin-csrf-token]').attr('content');
     this.basePath = $('meta[name=ngbm-admin-base-path]').attr('content') + 'layouts/';
-    this.$blockCacheModal = $('#clearBlockCachesModal');
-    this.initLayouts();
+    this.$content = this.$el.find('.layouts-box-content');
+    this.$loader = this.$el.find('.layout-loading');
+    this.fetchedLayouts = false;
+    this.$toggleBtn = $('#node-tab-nglayouts').find('a');
+    this.url = el.dataset.url;
+    this.setupEvents();
   }
+  LayoutsBox.prototype.setupEvents = function () {
+    this.$toggleBtn.on('click', this.getLayouts.bind(this));
+  };
   LayoutsBox.prototype.initLayouts = function () {
     var self = this;
     this.$el.find('.layout-list-item').each(function () {
       return new LayoutMapped(this, self);
     });
   };
   LayoutsBox.prototype.cacheModalStartLoading = function () {
-    if (!this.$blockCacheModal.find('.modal-loading').length) this.$blockCacheModal.find('.modal-body').append('<div class="modal-loading"><i class="loading-ng-icon"></i></div>');
+    if (!this.$blockCacheModal.find('.modal-loading').length) {
+      this.$blockCacheModal.find('.modal-title').html('&nbsp;');
+      this.$blockCacheModal.find('.modal-body').append('<div class="modal-loading"><i class="loading-ng-icon"></i></div>');
+    }
   };
   LayoutsBox.prototype.cacheModalStopLoading = function () {
     this.$blockCacheModal.find('.modal-loading').remove();
   };
+  LayoutsBox.prototype.showLoader = function () {
+    this.$el.addClass('loading');
+  };
+  LayoutsBox.prototype.hideLoader = function () {
+    this.$el.removeClass('loading');
+  };
+  LayoutsBox.prototype.getLayouts = function () {
+    if (this.fetchedLayouts) return;
+    var self = this;
+    $.ajax({
+      type: 'GET',
+      url: this.url,
+      beforeSend: function () {
+        self.showLoader();
+      },
+      success: function (data) {
+        self.fetchedLayouts = true;
+        self.$content.html(data);
+        self.$blockCacheModal = $('#clearBlockCachesModal');
+        self.initLayouts();
+        self.hideLoader();
+      },
+    });
+  };
 
   $('.mapped-layouts-box').each(function () {
     return new LayoutsBox(this);

diff --git a/bundle/Resources/sass/_layouts.scss b/bundle/Resources/sass/_layouts.scss
@@ -293,3 +293,20 @@
         text-align: center;
     }
 }
+
+.mapped-layouts-box {
+    > .layout-loading {
+        display: none;
+        position: relative;
+        // background: $lightBg;
+        padding: 5em 0;
+        text-align: center;
+        i {
+        }
+    }
+    &.loading {
+        > .layout-loading {
+            display: block;
+        }
+    }
+}
diff --git a/bundle/Resources/translations/messages.de.yml b/bundle/Resources/translations/messages.de.yml
@@ -41,3 +41,7 @@ netgen_admin_ui.layouts.mappings.targets: 'Ziele'
 netgen_admin_ui.layouts.mappings.conditions: 'Bedingungen'
 
 netgen_admin_ui.layouts.edit_layout: 'Layout bearbeiten'
+
+layouts.layout.clear_block_caches: 'Clear block caches'
+layouts.layout.clear_block_caches.note: 'Clears ESI and AJAX block caches'
+layouts.layout.clear_cache: 'Clear layout cache'
diff --git a/bundle/Resources/translations/messages.en.yml b/bundle/Resources/translations/messages.en.yml
@@ -51,3 +51,7 @@ netgen_admin_ui.layouts.edit_layout: 'Edit layout'
 netgen_admin_ui.layouts.cache_clear.question: 'Are you sure you want to clear caches for this layout?'
 netgen_admin_ui.layouts.cache_clear.cancel: 'Cancel'
 netgen_admin_ui.layouts.cache_clear.submit: 'Clear cache'
+
+layouts.layout.clear_block_caches: 'Clear block caches'
+layouts.layout.clear_block_caches.note: 'Clears ESI and AJAX block caches'
+layouts.layout.clear_cache: 'Clear layout cache'
diff --git a/bundle/Resources/translations/messages.fr.yml b/bundle/Resources/translations/messages.fr.yml
@@ -41,3 +41,7 @@ netgen_admin_ui.layouts.mappings.targets: 'Cibles'
 netgen_admin_ui.layouts.mappings.conditions: 'Conditions'
 
 netgen_admin_ui.layouts.edit_layout: 'Editer le layout'
+
+layouts.layout.clear_block_caches: 'Clear block caches'
+layouts.layout.clear_block_caches.note: 'Clears ESI and AJAX block caches'
+layouts.layout.clear_cache: 'Clear layout cache'
diff --git a/bundle/Resources/views/layouts/layout.html.twig b/bundle/Resources/views/layouts/layout.html.twig
@@ -16,8 +16,8 @@
             <div class="layout-dropdown dropdown">
                 <button id="layout-{{ layout.id }}-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-h"></i></button>
                 <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="layout-{{ layout.id }}-dropdown">
-                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-layout-cache">{{ 'layouts.layout.clear_cache'|trans({}, 'ngbm_admin') }} <span class="note">{{ 'layouts.layout.clear_cache.note'|trans({}, 'ngbm_admin') }}</span></button></li>
-                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-block-caches">{{ 'layouts.layout.clear_block_caches'|trans({}, 'ngbm_admin') }} <span class="note">{{ 'layouts.layout.clear_block_caches.note'|trans({}, 'ngbm_admin') }}</span></button></li>
+                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-layout-cache">{{ 'layouts.layout.clear_cache'|trans }}</button></li>
+                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-block-caches">{{ 'layouts.layout.clear_block_caches'|trans }} <span class="note">{{ 'layouts.layout.clear_block_caches.note'|trans }}</span></button></li>
                 </ul>
             </div>
         {% endif %}

diff --git a/bundle/Resources/views/layouts/location_layouts.html.twig b/bundle/Resources/views/layouts/location_layouts.html.twig
@@ -1,8 +1,6 @@
-<div class="mapped-layouts-box">
-    {% include '@NetgenAdminUI/layouts/rules.html.twig' %}
+{% include '@NetgenAdminUI/layouts/rules.html.twig' %}
 
-    {% include '@NetgenAdminUI/layouts/related_layouts.html.twig' %}
-</div>
+{% include '@NetgenAdminUI/layouts/related_layouts.html.twig' %}
 
 <div class="modal fade ngmodal" id="clearBlockCachesModal" tabindex="-1" role="dialog" aria-labelledby="clearBlockCachesModalLabel">
     <div class="modal-dialog modal-md nl-modal-cache" role="document">

diff --git a/bundle/Resources/views/layouts/rule.html.twig b/bundle/Resources/views/layouts/rule.html.twig
@@ -36,8 +36,8 @@
             <div class="layout-dropdown dropdown">
                 <button id="layout-{{ rule.layout.id }}-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-h"></i></button>
                 <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="layout-{{ rule.layout.id }}-dropdown">
-                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-layout-cache">{{ 'layouts.layout.clear_cache'|trans({}, 'ngbm_admin') }} <span class="note">{{ 'layouts.layout.clear_cache.note'|trans({}, 'ngbm_admin') }}</span></button></li>
-                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-block-caches">{{ 'layouts.layout.clear_block_caches'|trans({}, 'ngbm_admin') }} <span class="note">{{ 'layouts.layout.clear_block_caches.note'|trans({}, 'ngbm_admin') }}</span></button></li>
+                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-layout-cache">{{ 'layouts.layout.clear_cache'|trans }}</button></li>
+                    <li><button {% if not http_cache_enabled %}disabled="disabled"{% endif %} class="js-clear-block-caches">{{ 'layouts.layout.clear_block_caches'|trans }} <span class="note">{{ 'layouts.layout.clear_block_caches.note'|trans }}</span></button></li>
                 </ul>
             </div>
         {% endif %}

diff --git a/bundle/ezpublish_legacy/ngadminui/design/ngadminui/templates/tabs/nglayouts.tpl b/bundle/ezpublish_legacy/ngadminui/design/ngadminui/templates/tabs/nglayouts.tpl
@@ -1,8 +1,6 @@
 {if and( ezmodule( 'nglayouts' ), fetch( 'user', 'has_access_to', hash( 'module', 'nglayouts', 'function', 'editor' ) ) )}
-    {symfony_render(
-        symfony_path(
-            'ngadmin_layouts_location_layouts',
-            hash( 'locationId', $node.node_id )
-        )
-    )}
+    <div class="mapped-layouts-box" data-url="{symfony_path( 'ngadmin_layouts_location_layouts', hash( 'locationId', $node.node_id ) )}">
+        <div class="layouts-box-content"></div>
+        <div class="layout-loading"><i class="loading-ng-icon"></i></div>
+    </div>
 {/if}