sibu 0.9.3 → 1.0.2

data/app/views/sibu/images/edit.js.erb

@@ -1,3 +1,5 @@
-$(".sibu_edit_image").html("<%= j(render 'edit_form') %>");
-$(".sibu_image").removeClass("selected");
-$("<%= "#sibu_image_#{@image.id}" %>").addClass("selected");
+document.querySelector(".sibu_edit_image").innerHTML = "<%= j(render 'edit_form') %>";
+if (document.querySelector(".sibu_image.selected")) {
+    document.querySelector(".sibu_image.selected").classList.remove("selected");
+}
+document.querySelector("<%= "#sibu_image_#{@image.id}" %>").classList.add("selected");

data/app/views/sibu/pages/_code_edit_panel.html.erb

@@ -1,7 +1,8 @@
 <h2>Modifier le contenu</h2>
 <div id="edit_msg"></div>
+<%= render 'element_actions' %>
 <div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+  <form class="edit_element_form" action="<%= update_element_site_page_path(@site.id, @page.id, format: :js) %>" accept-charset="UTF-8" method="patch">
     <div class="sibu_field">
       <%= label_tag 'element[code]', "Code d'intégration du contenu" %>
       <%= text_area_tag 'element[code]', @element["code"], placeholder: ' ex: <iframe src="..."></iframe>'  %>
@@ -14,5 +15,5 @@
       <%= submit_tag 'Valider' %>
       <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
     </div>
-  <% end %>
+  </form>
 </div>

data/app/views/sibu/pages/_form.html.erb

@@ -13,6 +13,13 @@
       <small>L'adresse (ou URL) de la page, utilisée par les navigateurs web pour y accéder</small>
     </div>
   </div>
+  <div class="sibu_field">
+    <%= f.label :source, "Référence" %>
+    <div>
+      <%= f.text_field :source, placeholder: "Référence interne optionnelle (Ex: test mise en page 2) " %>
+      <small>Un bref descriptif de la page, à usage interne uniquement</small>
+    </div>
+  </div>
   <div class="sibu_field">
     <%= f.label :is_home, "Page d'accueil" %>
     <div>
@@ -56,6 +63,7 @@
     </div>
   </div>
   <%= f.hidden_field :site_id %>
+  <%= f.hidden_field :site_id %>
   <div class="sibu_actions">
     <%= f.submit 'Valider' %>
     <%= link_to 'Annuler', :back %>

data/app/views/sibu/pages/_link_edit_panel.html.erb

@@ -2,32 +2,32 @@
 <div id="edit_msg"></div>
 <%= render 'element_actions' %>
 <div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+  <form class="edit_element_form" action="<%= update_element_site_page_path(@site.id, @page.id, format: :js) %>" accept-charset="UTF-8" method="patch">
     <% current_type = link_type(@element["value"]) %>
     <div class="sibu_field">
       <%= label_tag 'element[text]', 'Libellé' %>
       <%= text_field_tag 'element[text]', @element["text"] %>
     </div>
     <div id="link_internal" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'internal', current_type == 'internal', class: 'radio' %>
+      <%= radio_button_tag :mode, 'internal', current_type == 'internal', class: 'radio', onclick: 'setLinkMode(this)' %>
       <%= label_tag 'mode_internal', 'Lien vers une page du site' %>
       <%= select_tag 'element[value]', available_links, prompt: 'Sélectionnez une page', disabled: current_type != 'internal' %>
       <%= hidden_field_tag 'element[target]', '_self', disabled: current_type != 'internal' %>
     </div>
     <div id="link_external" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'external', current_type == 'external', class: 'radio' %>
+      <%= radio_button_tag :mode, 'external', current_type == 'external', class: 'radio', onclick: 'setLinkMode(this)' %>
       <%= label_tag 'mode_external', 'Lien personnalisé' %>
       <%= text_field_tag 'element[value]', (@element["value"] if current_type == 'external'), placeholder: 'Ex : http://www.un-site.com', disabled: current_type != 'external' %>
       <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'external' %>
     </div>
     <div id="link_email" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'email', current_type == 'email', class: 'radio' %>
+      <%= radio_button_tag :mode, 'email', current_type == 'email', class: 'radio', onclick: 'setLinkMode(this)' %>
       <%= label_tag 'mode_external', 'Lien vers un Email' %>
       <%= text_field_tag 'element[value]', (@element["value"] if current_type == 'email'), placeholder: 'Ex : email@exemple.fr', disabled: current_type != 'email' %>
       <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'email' %>
     </div>
     <div id="link_document" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'document', current_type == 'document', class: 'radio' %>
+      <%= radio_button_tag :mode, 'document', current_type == 'document', class: 'radio', onclick: 'setLinkMode(this)' %>
       <%= label_tag 'mode_document', 'Lien vers un document' %>
       <%= select_tag 'element[value]', available_docs, prompt: 'Sélectionnez un document', disabled: current_type != 'document' %>
       <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'document' %>
@@ -46,5 +46,5 @@
       <%= submit_tag 'Valider' %>
       <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
     </div>
-  <% end %>
+  </form>
 </div>

data/app/views/sibu/pages/_map_edit_panel.html.erb

@@ -1,7 +1,8 @@
 <h2>Modifier la carte</h2>
 <div id="edit_msg"></div>
+<%= render 'element_actions' %>
 <div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+  <form class="edit_element_form" action="<%= update_element_site_page_path(@site.id, @page.id, format: :js) %>" accept-charset="UTF-8" method="patch">
     <div class="sibu_field">
       <%= label_tag 'element[data-lat]', 'Latitude' %>
       <%= text_field_tag 'element[data-lat]', @element["data-lat"] %>
@@ -23,5 +24,5 @@
       <%= submit_tag 'Valider' %>
       <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
     </div>
-  <% end %>
+  </form>
 </div>

data/app/views/sibu/pages/_media_edit_panel.html.erb

@@ -2,7 +2,7 @@
 <div id="edit_msg"></div>
 <%= render 'element_actions' %>
 <div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+  <form class="edit_element_form" action="<%= update_element_site_page_path(@site.id, @page.id, format: :js) %>" accept-charset="UTF-8" method="patch">
     <div class="sibu_image_selection">
       <div class="sibu_select_images sibu_field">
         <p>Sélectionnez ou <%= link_to 'téléchargez', new_image_path(page_id: @page.id, section_id: @section_id, entity_type: @entity_type,
@@ -32,19 +32,19 @@
         </table>
       </div>
       <div class="sibu_selected_image">
-        <% if @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
+        <% if @element["src"] == Sibu::DEFAULT_IMG || @element["src"].blank? %>
           <p>Veuillez sélectionner une image.</p>
         <% end %>
-        <div class="sibu_custom_center" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
+        <div class="sibu_custom_center" style="display: <%= (@element["src"] == Sibu::DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
           <%= check_box_tag('custom_center', true, (!@element["class"].blank? && @element["class"].include?('posx')), id: 'custom_center', class: 'checkbox') %>
           <%= label_tag 'custom_center', "Recentrer l'image" %>
         </div>
         <div class="sibu_center">
-          <%= image_tag(@element["src"]) unless @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
+          <%= image_tag(@element["src"]) unless @element["src"] == Sibu::DEFAULT_IMG || @element["src"].blank? %>
           <div id="sibu_center_pos" style="display: none;">✕</div>
           <div id="sibu_center_desc" style="display: none;"><em>Cliquez sur l'image pour la recentrer sur un point donné (à utiliser lorsque l'image est tronquée car la zone d'affichage est trop petite).</em></div>
         </div>
-        <div class="sibu_field" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
+        <div class="sibu_field" style="display: <%= (@element["src"] == Sibu::DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
           <%= label_tag 'element[alt]', 'Légende / texte alternatif' %>
           <%= text_field_tag 'element[alt]', @element["alt"] %>
         </div>
@@ -60,5 +60,5 @@
       <%= submit_tag 'Valider' %>
       <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
     </div>
-  <% end %>
+  </form>
 </div>

data/app/views/sibu/pages/_new_section_panel.html.erb

@@ -19,7 +19,7 @@
             <h3 style="display: none;"><%= t "sibu.section.category.#{cat}" %></h3>
             <% sections.each do |st| %>
               <div data-sb-template="<%= st["template"] %>" data-sb-category="<%= st["category"] %>">
-                <%= render "shared/#{@site.section_template(st)}", sec: st %>
+                <%= render_page_section st %>
               </div>
             <% end %>
           </div>

data/app/views/sibu/pages/_paragraph_edit_panel.html.erb

@@ -2,7 +2,7 @@
 <div id="edit_msg"></div>
 <%= render 'element_actions' %>
 <div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+  <form class="edit_element_form" action="<%= update_element_site_page_path(@site.id, @page.id, format: :js) %>" accept-charset="UTF-8" method="patch">
     <div id="editor-container"></div>
 
     <%= hidden_field_tag 'element[text]' %>
@@ -14,5 +14,5 @@
       <%= submit_tag 'Valider' %>
       <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
     </div>
-  <% end %>
+  </form>
 </div>

data/app/views/sibu/pages/_text_edit_panel.html.erb

@@ -2,7 +2,7 @@
 <div id="edit_msg"></div>
 <%= render 'element_actions' %>
 <div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+  <form class="edit_element_form" action="<%= update_element_site_page_path(@site.id, @page.id, format: :js) %>" accept-charset="UTF-8" method="patch">
     <div class="sibu_field">
       <%= label_tag 'element[text]', 'Texte' %>
       <%= text_field_tag 'element[text]', @element["text"] %>
@@ -15,5 +15,5 @@
       <%= submit_tag 'Valider' %>
       <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
     </div>
-  <% end %>
+  </form>
 </div>

data/app/views/sibu/pages/child_element.js.erb

@@ -1,6 +1,6 @@
 <% if @added.nil? %>
-$("#edit_panel #edit_msg").html("<p class='sibu_alert'>Une erreur s'est produite lors de l'ajout du sous-menu.</p>");
+document.querySelector("#edit_panel #edit_msg").innerHTML = "<p class='sibu_alert'>Une erreur s'est produite lors de l'ajout du sous-menu.</p>";
 <% else %>
-$("#edit_panel").slideUp();
+document.querySelector("#edit_panel").classList.remove('active');
 location.reload(true);
 <% end %>

data/app/views/sibu/pages/clone_element.js.erb

@@ -1,6 +1,6 @@
 <% if @cloned.nil? %>
-$("#edit_panel #edit_msg").html("<p class='sibu_alert'>Une erreur s'est produite lors de l'enregistrement.</p>");
+document.querySelector("#edit_panel #edit_msg").innerHTML = "<p class='sibu_alert'>Une erreur s'est produite lors de l'enregistrement.</p>";
 <% else %>
-$("#edit_panel").slideUp();
+document.querySelector("#edit_panel").classList.remove("active");
 refreshAfterEdit(true, '<%= @section_id %>');
 <% end %>

data/app/views/sibu/pages/create_section.js.erb

@@ -1,6 +1,6 @@
 <% if @created %>
 location.reload(true);
 <% else %>
-$("#edit_section_msg").html("<p class='sibu_alert'>Une erreur s'est produite lors de l'enregistrement.</p>");
+document.querySelector("#edit_section_msg").innerHTML = "<p class='sibu_alert'>Une erreur s'est produite lors de l'enregistrement.</p>";
 <% end %>
 

data/app/views/sibu/pages/delete_element.js.erb

@@ -1,6 +1,6 @@
 <% if @deleted %>
 refreshAfterEdit(true, '<%= @section_id %>');
 <% else %>
-$("#edit_section_msg").text("La suppression n'a pas pu être effectuée.");
+document.querySelector("#edit_section_msg").innerHTML = "<p class='sibu_alert'>La suppression n'a pas pu être effectuée.</p>";
 <% end %>
 

data/app/views/sibu/pages/delete_section.js.erb

@@ -1,6 +1,6 @@
 <% if @deleted %>
 location.reload(true);
 <% else %>
-$("#edit_section_msg").text("Une erreur s'est produite lors de la suppression.");
+document.querySelector("#edit_section_msg").innerHTML = "<p class='sibu_alert'>Une erreur s'est produite lors de la suppression..</p>";
 <% end %>
 

data/app/views/sibu/pages/edit_element.js.erb

@@ -1,105 +1,107 @@
-var editPanel = $("#edit_panel");
-editPanel.html("");
+var editPanel = document.querySelector("#edit_panel");
+editPanel.innerHTML = "";
+
 <% case @content_type %>
 <% when 'text' %>
-  editPanel.html("<%= j(render 'text_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'text_edit_panel') %>";
 <% when 'embed' %>
-  editPanel.html("<%= j(render 'code_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'code_edit_panel') %>";
 <% when 'paragraph' %>
-  editPanel.html("<%= j(render 'paragraph_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'paragraph_edit_panel') %>";
 <% when 'media' %>
-  editPanel.html("<%= j(render 'media_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'media_edit_panel') %>";
 <% when 'link' %>
-  editPanel.html("<%= j(render 'link_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'link_edit_panel') %>";
 <% when 'group' %>
-  editPanel.html("<%= j(render 'group_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'group_edit_panel') %>";
 <% when 'map' %>
-  editPanel.html("<%= j(render 'map_edit_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'map_edit_panel') %>";
 <% when /^widget/ %>
-  editPanel.html("<%= j(render "shared/sibu/#{@content_type}_panel") %>");
+  editPanel.innerHTML = "<%= j(render "shared/sibu/#{@content_type}_panel") %>";
 <% else %>
-  editPanel.html("<%= j(render 'error_panel') %>");
+  editPanel.innerHTML = "<%= j(render 'error_panel') %>";
 <% end %>
 
-
-editPanel.slideDown("fast", function() {
+editPanel.classList.add("active");
+setTimeout(function() {
     <% case @content_type %>
     <% when 'paragraph' %>
         var quill = initQuillEditor('#editor-container');
         quill.root.innerHTML = "<%= j(raw(@element["text"] || 'Texte à modifier')) %>";
         quill.on('text-change', function() {
-            $("#element_text").val(quill.root.innerHTML);
-        });
-        var wrapper = $("[data-sb-id='<%= @section_id %>']").find("[data-id='<%= @element_id %>']");
-        editPanel.find(".ql-editor").css({
-            "font-family": wrapper.css("font-family"),
-            "font-size": wrapper.css("font-size"),
-            "color": wrapper.css("color"),
-            "text-align": wrapper.css("text-align")
+            document.querySelector("#element_text").value = quill.root.innerHTML;
         });
+        var wrapper = document.querySelector("[data-sb-id='<%= @section_id %>'] [data-id='<%= @element_id %>']"),
+            editor = editPanel.querySelector(".ql-editor");
+        editor.style['font-family'] = wrapper.style['font-family'];
+        editor.style['font-size'] = wrapper.style['font-size'];
+        editor.style.color = wrapper.style.color;
+        editor.style['text-align'] = wrapper.style['text-align'];
     <% when 'media' %>
-        var images = editPanel.find(".sibu_image");
-        var customCenter = $("#custom_center");
-        images.click(function() {
-            if(!$(this).hasClass('selected')) {
-                images.removeClass('selected');
-                $(this).addClass('selected');
-                var imgElt = $(this).find("img");
-                $("#element_src").val(imgElt.data("src"));
-                $("#element_alt").val(imgElt.data("alt"));
-                editPanel.find(".sibu_center").html(
-                    '<img src="' + $("#element_src").val() + '"/>' +
-                    '<div id="sibu_center_pos" style="display: none;">✕</div>' +
-                    '<div id="sibu_center_desc" style="display: none;"><em>Cliquez sur l\'image pour la recentrer sur un point donné (à utiliser lorsque l\'image est tronquée car la zone d\'affichage est trop petite)</em></div>');
-                editPanel.find(".sibu_selected_image > p:first-child").hide();
-                editPanel.find(".sibu_selected_image").find(".sibu_custom_center").show();
-                editPanel.find(".sibu_selected_image").find(".sibu_field").show();
-                if(customCenter.is(":checked")) {
-                    customCenter.removeAttr("checked");
-                    $("#element_class").val("");
-                    $(".sibu_center").attr("style", "");
+        var images = editPanel.querySelectorAll(".sibu_image");
+        var customCenter = document.querySelector("#custom_center");
+        for (var i = 0; i < images.length; i++) {
+            images[i].addEventListener("click", function(evt) {
+                if(!evt.currentTarget.classList.contains('selected')) {
+                    evt.currentTarget.classList.remove('selected');
+                    evt.currentTarget.classList.add('selected');
+                    var imgElt = evt.currentTarget.querySelector("img");
+                    document.querySelector("#element_src").value = imgElt.getAttribute("data-src");
+                    document.querySelector("#element_alt").value = imgElt.getAttribute("data-alt");
+                    editPanel.querySelector(".sibu_center").innerHTML =
+                        '<img src="' + $("#element_src").val() + '"/>' +
+                        '<div id="sibu_center_pos" style="display: none;">✕</div>' +
+                        '<div id="sibu_center_desc" style="display: none;"><em>Cliquez sur l\'image pour la recentrer sur un point donné (à utiliser lorsque l\'image est tronquée car la zone d\'affichage est trop petite)</em></div>';
+                    editPanel.querySelector(".sibu_selected_image > p:first-child").style.display = "none";
+                    editPanel.querySelector(".sibu_selected_image .sibu_custom_center").style.display = "block";
+                    editPanel.querySelector(".sibu_selected_image .sibu_field").style.display = "";
+                    if(customCenter.checked) {
+                        customCenter.removeAttribute("checked");
+                        document.querySelector("#element_class").value = "";
+                        document.querySelector(".sibu_center").setAttribute("style", "");
+                    }
                 }
-            }
-        });
-        if(editPanel.find(".sibu_center img").size() > 0) {
-            if(customCenter.is(":checked")) {
+            })
+        }
+        if(editPanel.querySelectorAll(".sibu_center img").length > 0) {
+            if(customCenter.checked) {
                 initCustomCenter("<%= @element_id %>");
             }
         }
-        customCenter.change(function() {
-          if($(this).is(":checked")) {
+        customCenter.onchange = function(evt) {
+          if(this.checked) {
               initCustomCenter("<%= @element_id %>");
           } else {
-              $("#element_class").val("");
-              $(".sibu_center").attr("style", "");
-              $(".sibu_center > #sibu_center_pos").hide();
-              $(".sibu_center > #sibu_center_desc").hide();
+              document.querySelector("#element_class").value = "";
+              document.querySelector(".sibu_center").setAttribute("style", "");
+              document.querySelector(".sibu_center > #sibu_center_pos").style.display = "none";
+              document.querySelector(".sibu_center > #sibu_center_desc").style.display = "none";
           }
-        });
+        };
     <% when 'link' %>
-        $("input[name='mode']").change(function() {
-            var selected = $(this).val();
-            $("#link_" + selected).find("#element_value, #element_target").removeAttr("disabled");
-            $(".sibu_edit_form").find(".link_mode").each(function() {
-              if($(this).attr("id") !== ("link_" + selected)) {
-                $(this).find("#element_value, #element_target").attr("disabled", "disabled");
-              }
-            });
-        });
     <% else %>
     <% end %>
 
     <% if @repeat %>
-        $("#clone_elt, #duplicate_elt").show();
+        document.querySelector("#clone_elt").style.display = "inline-block";
+        document.querySelector("#duplicate_elt").style.display = "inline-block";
     <% else %>
-        $("#clone_elt, #duplicate_elt").remove();
+        document.querySelector("#clone_elt").remove();
+        document.querySelector("#duplicate_elt").remove();
     <% end %>
 
     <% if @children %>
-        $("#child_elt").show();
+        document.querySelector("#child_elt").style.display = "inline-block";
     <% else %>
-        $("#child_elt").remove();
+        document.querySelector("#child_elt").remove();
     <% end %>
+    var formElt = document.querySelector("form.edit_element_form");
+    if (formElt) {
+        formElt.onsubmit = function(evt) {
+            evt.preventDefault();
+            submitForm(formElt);
+        }
+    }
     sibuCallback("editElement", "<%= @content_type %>");
-});
+}, 500);
 document.body.style.overflow = "hidden";

data/app/views/sibu/pages/edit_section.js.erb

@@ -1,7 +1,8 @@
-var editPanel = $("#edit_panel");
-editPanel.html("");
-editPanel.html("<%= j(render conf[:section_form]) %>");
-editPanel.slideDown("fast", function() {
+var editPanel = document.querySelector("#edit_panel");
+editPanel.innerHTML = "";
+editPanel.innerHTML = "<%= j(render conf[:section_form]) %>";
+editPanel.classList.add("active");
+setTimeout(function() {
     sibuCallback("editSection");
-});
+}, 500);
 document.body.style.overflow = "hidden";

data/app/views/sibu/pages/index.html.erb

@@ -8,7 +8,7 @@
     <tr>
       <th>Nom</th>
       <th>Chemin d'accès</th>
-      <th>Origine</th>
+      <th>Référence</th>
       <th>Mise à jour</th>
       <th></th>
     </tr>
@@ -31,7 +31,7 @@
     <% end %>
     <% if @pages.empty? %>
       <tr>
-        <td colspan="4">Aucune page créée pour le moment.</td>
+        <td colspan="5">Aucune page créée pour le moment.</td>
       </tr>
     <% end %>
     </tbody>

data/app/views/sibu/pages/new_section.js.erb

@@ -1,16 +1,25 @@
-var sectionsPanel = $("#sections_panel");
-if (sectionsPanel.size()) {
-    sectionsPanel.html("<%= j(render 'new_section_panel') %>");
-    van11yAccessibleTabPanelAria($(".sibu_sections_tabs")[0]);
-    var sections = sectionsPanel.find(".sibu_sections [data-sb-template]");
-    sections.click(function() {
-        if(!$(this).hasClass('selected')) {
-            sections.removeClass('selected');
-            $(this).addClass('selected');
-            $("#section_template").val($(this).data("sb-template"));
-            $("#section_category").val($(this).data("sb-category"));
-        }
-    });
+var sectionsPanel = document.querySelector("#sections_panel");
+if (sectionsPanel) {
+    sectionsPanel.innerHTML = "<%= j(render 'new_section_panel') %>";
+    try {
+      sibuVan11yAccessibleTabPanelAria(document.querySelector(".sibu_sections_tabs"));
+    } catch (e) {
+        console.log('Sibu sections - Tabs init error : ' + e);
+    }
+    var sections = sectionsPanel.querySelectorAll(".sibu_sections [data-sb-template]");
+    for (var i = 0; i < sections.length; i++) {
+      sections[i].addEventListener("click", function(evt) {
+          if(!evt.currentTarget.classList.contains('selected')) {
+              var selected = sectionsPanel.querySelector(".sibu_sections [data-sb-template].selected");
+              if (selected) {
+                  selected.classList.remove('selected');
+              }
+              evt.currentTarget.classList.add('selected');
+              document.querySelector("#section_template").value = evt.currentTarget.getAttribute('data-sb-template');
+              document.querySelector("#section_category").value = evt.currentTarget.getAttribute('data-sb-category');
+          }
+      });
+    }
     if(typeof initSectionsForm === "function") {
         initSectionsForm();
     }