wip

app/assets/javascripts/admin/commons/content_editor.js

@@ -10,10 +10,21 @@ window.osuny.contentEditor = {
         }
         this.sortHeadingsUrl = this.container.getAttribute('data-sort-headings-url');
         this.sortBlocksUrl = this.container.getAttribute('data-sort-blocks-url');
-
+        this.modeWriteContainer = this.container.querySelector('#mode-write-container');
+        this.modeStructureContainer = this.container.querySelector('#mode-structure-container');
+        this.initTabs();
         this.initSortable();
     },
 
+    initTabs: function () {
+        'use strict';
+        var tabs = document.querySelectorAll('[data-bs-toggle="tab"]'),
+            i;
+        for (i = 0; i < tabs.length; i++) {
+            tabs[i].addEventListener('shown.bs.tab', this.tabChanged.bind(this));
+        }
+    },
+
     initSortable: function () {
         'use strict';
         var sortableContainers = this.container.querySelectorAll('.js-content-editor-sortable-container'),
@@ -28,6 +39,20 @@ window.osuny.contentEditor = {
         }
     },
 
+    tabChanged: function (event) {
+        'use strict';
+        var tab = event.target,
+            id = tab.getAttribute('data-bs-target'),
+            div = this.container.querySelector(id),
+            source = div.dataset.source,
+            target = this.container.querySelector(div.dataset.target),
+            request;
+        // target.innerHTML = '';
+        // console.log(source);
+        // console.log(target);
+        // TODO load
+    },
+
     onSortableEnd: function (event) {
         'use strict';
         if (event.from.classList.contains('content-editor--write')) {

app/views/admin/communication/blocks/content/_editor.html.erb

@@ -4,8 +4,6 @@ mode_expert = about.headings.many?
 <div  class="js-content-editor mb-5"
       data-sort-blocks-url="<%= reorder_admin_communication_blocks_path(lang: nil, website_id: nil, extranet_id: nil) %>"
       data-sort-headings-url="<%= reorder_admin_communication_headings_path(lang: nil, website_id: nil, extranet_id: nil) %>"
-      data-mode-write="<%= admin_communication_contents_write_path(about_type: about.class.polymorphic_name, about_id: about.id) %>"
-      data-mode-structure="<%= admin_communication_contents_structure_path(about_type: about.class.polymorphic_name, about_id: about.id) %>"
       >
   <% if mode_expert %>
     <ul class="nav nav-tabs justify-content-md-end">
@@ -38,8 +36,10 @@ mode_expert = about.headings.many?
   <div class="tab-content">
     <div  class="tab-pane fade show active" 
           id="mode-write" 
+          data-source="<%= admin_communication_contents_write_path(about_type: about.class.polymorphic_name, about_id: about.id) %>"
+          data-target="#mode-write-container"
           role="tabpanel" 
-          aria-labelledby="mode-write-tab" 
+          aria-labelledby="mode-write-tab"
           tabindex="0">
       <% if mode_expert %>
         <div class="row">
@@ -48,12 +48,14 @@ mode_expert = about.headings.many?
           </div>
         </div>
       <% end %>
-      <div class="inner">
+      <div id="mode-write-container">
         <%= render 'admin/communication/contents/write', about: about %>
       </div>
     </div>
     <div  class="tab-pane fade" 
           id="mode-structure" 
+          data-source="<%= admin_communication_contents_structure_path(about_type: about.class.polymorphic_name, about_id: about.id) %>"
+          data-target="#mode-structure-container"
           role="tabpanel" 
           aria-labelledby="profile-tab" 
           tabindex="1">
@@ -62,7 +64,7 @@ mode_expert = about.headings.many?
           <p class="text-lg-end text-muted small mt-2">Dans le mode "Organiser le plan", vous ne voyez pas les blocs mais seulement les titres. Lorsque vous déplacez un titre, tous les blocs suivent. C'est le mode idéal pour ranger les documents longs.</p>
         </div>
       </div>
-      <div class="inner">
+      <div id="mode-structure-container">
         <%= render 'admin/communication/contents/structure', about: about %>
       </div>
     </div>