sibu 0.9.0 → 1.0.0

data/app/controllers/sibu/application_controller.rb

@@ -10,5 +10,13 @@ module Sibu
     def sibu_user
       send(conf[:current_user])
     end
+
+    def check_site_ownership!
+      if conf[:multi_user] && conf[:admin_filter]
+        unless @site.nil? || @site.user_id == sibu_user.id || conf[:admin_filter].call(sibu_user)
+          redirect_to main_app.root_url, alert: "Vous n'êtes pas autorisé(e) à consulter cette page."
+        end
+      end
+    end
   end
 end

data/app/controllers/sibu/pages_controller.rb

@@ -101,9 +101,9 @@ module Sibu
       @content_type = params[:content_type]
       @links = @site.pages_path_by_id if @site
       @element = @entity.element(*@section_id.split('|'), *@element_id.split('|'))
-      @repeat = params[:repeat]
+      @repeat = params[:repeat] == 'true'
+      @children = params[:children] == 'true'
       @size = params[:size].blank? ? :medium : params[:size].to_sym
-      @children = params[:children]
     end
 
     def update_element
@@ -146,7 +146,6 @@ module Sibu
     end
 
     def update_section
-      # {"utf8"=>"✓", "section"=>{"color"=>"#AFCA0B", "filters"=>"school_camps"}, "section_id"=>"cs1536301729", "refresh"=>"true", "commit"=>"Valider", "site_id"=>"3", "id"=>"1392"}
       @entity.section(params[:section_id]).merge!(section_params)
       logger.debug @entity.section(params[:section_id])
       @updated = @entity.save
@@ -161,10 +160,12 @@ module Sibu
     def set_page
       @page = Sibu::Page.find(params[:id])
       @site = Sibu::Site.includes(:pages).find(@page.site_id) if @page
+      check_site_ownership!
     end
 
     def set_site
       @site = Sibu::Site.find(params[:site_id])
+      check_site_ownership!
     end
 
     def set_edit_context

data/app/controllers/sibu/sites_controller.rb

@@ -37,6 +37,9 @@ module Sibu
         if conf[:custom_styles] && @site.previous_changes.has_key?(:custom_data)
           generate_styles(@site)
         end
+        if @site.previous_changes.has_key?(:version)
+          @site.update_paths
+        end
         redirect_to sites_url, notice: "Le site a bien été mis à jour."
       else
         flash.now[:alert] = "Une erreur s'est produite lors de l'enregistrement du site."
@@ -67,6 +70,7 @@ module Sibu
 
     def set_site
       @site = Sibu::Site.find(params[:id])
+      check_site_ownership!
     end
 
     def site_params

data/app/helpers/sibu/pages_helper.rb

@@ -36,26 +36,49 @@ module Sibu
     end
 
     [:h1, :h2, :h3, :h4, :h5, :h6, :span].each do |t|
-      define_method(t) do |elt, html_opts = {}|
-        defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "text" => DEFAULT_TEXT}
+      define_method(t) do |elt, html_opts = {}, &block|
+        defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "text" => Sibu::DEFAULT_TEXT}
         content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {}))
         html_opts.merge!({data: {id: elt_id(elt), type: "text"}}) if action_name != 'show'
-        content_tag(t, raw(content["text"]).html_safe, html_opts)
+        if block
+          @sb_section = (@sb_section || []) + [elt_id(elt)]
+          html_output = content_tag(t, capture(content, nested_elements(elt), &block), html_opts)
+          @sb_section -= [elt_id(elt)]
+          html_output
+        else
+          content_tag(t, raw(content["text"]).html_safe, html_opts)
+        end
       end
     end
 
-    def p(elt, opts = {})
-      repeat = opts.delete(:repeat)
-      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "text" => DEFAULT_PARAGRAPH}
-      content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {}))
-      opts.merge!({data: {id: elt_id(elt), repeat: repeat, type: "paragraph"}}) if action_name != 'show'
-      content_tag(:div, content_tag(:p, raw(content["text"]).html_safe), opts)
+    [:div, :section, :article, :aside, :header, :footer, :nav, :main, :ul].each do |t|
+      define_method(t) do |elt, html_opts = {}, &block|
+        t_id = elt.is_a?(Hash) ? elt["id"] : elt
+        @sb_section = (@sb_section || []) + [t_id]
+        html_opts = {"id" => t_id}.merge(html_opts)
+        html_opts.merge!(@sb_section.length == 1 ? {"data-sb-id" => t_id, "data-sb-entity" => @sb_entity == @site ? 'site' : 'page'} : {"data-id" => elt_id(elt), "data-type" =>  "group", "data-repeat" => false, "data-children" => false}) if action_name != 'show'
+        html_output = content_tag(t, capture(current_elt(elt), nested_elements(t_id), &block), html_opts)
+        @sb_section -= [t_id]
+        html_output
+      end
     end
 
     def sb
       self
     end
 
+    def join_tokens(tokens, suffix)
+      (tokens + [suffix]).select {|t| !t.blank?}.join("|")
+    end
+
+    def nested_elements(id)
+      element_id = elt_id(id)
+      element_id_tokens = (@sb_section + element_id.split("|")).uniq
+      nested_elts = @sb_entity.elements(*element_id_tokens)
+      nested_elts.blank? ? [{"id" => element_id.split("|").last, "data-id" => join_tokens(element_id_tokens[1..-1], "#{element_id}0")}] :
+          nested_elts.map {|e| e.merge({"data-id" => join_tokens(element_id_tokens[1..-1], e['id'])})}
+    end
+
     def select_element(id)
       @sb_entity.element(*@sb_section, id)
     end
@@ -65,11 +88,19 @@ module Sibu
       items.blank? ? [{"id" => "el#{Time.current.to_i}"}] : items
     end
 
+    def p(elt, opts = {})
+      repeat = opts.delete(:repeat)
+      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "text" => Sibu::DEFAULT_PARAGRAPH}
+      content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {}))
+      opts.merge!({data: {id: elt_id(elt), repeat: repeat, type: "paragraph"}}) if action_name != 'show'
+      content_tag(:div, content_tag(:p, raw(content["text"]).html_safe), opts)
+    end
+
     def img(elt, opts = {})
       wrapper = opts.delete(:wrapper)
       repeat = opts.delete(:repeat)
       size = opts.delete(:size)
-      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "src" => DEFAULT_IMG}
+      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "src" => Sibu::DEFAULT_IMG}
       content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {}))
       if action_name == 'show'
         content["src"] = ("/#{conf[:deployment_path]}" + content["src"]) if @online && conf[:deployment_path]
@@ -90,8 +121,16 @@ module Sibu
       content_tag(wrapper, capture(*elts(elt), &block), opts)
     end
 
+    def empty_tag(elt, tag, type, opts = {})
+      repeat = opts.delete(:repeat)
+      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt}.merge!(default_content(type))
+      opts = defaults.merge(opts)
+      opts.merge!({data: {id: elt_id(elt), type: type, repeat: repeat}}) if action_name != 'show'
+      content_tag(tag, nil, opts)
+    end
+
     def form_label(elt, html_opts = {}, &block)
-      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "text" => DEFAULT_TEXT}
+      defaults = {"id" => elt.is_a?(Hash) ? elt["id"] : elt, "text" => Sibu::DEFAULT_TEXT}
       content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {}))
       html_opts.merge!({data: {id: elt_id(elt), type: "text"}}) if action_name != 'show'
       content_tag(:label, raw(content["text"]).html_safe, html_opts)
@@ -125,20 +164,23 @@ module Sibu
 
     alias site sb_site
 
+    def render_page_section(s)
+      @sb_section = [s['id']]
+      @sb_entity = @page
+      render partial: "shared/#{@site.section_template(s)}",
+             locals: {sibu: self, sibu_section: s, sibu_attrs: sibu_attributes(s).html_safe}
+    end
+
+    def sibu_attributes(section)
+      action_name != 'show' ? ('data-sb-id="' + section['id'] + '" data-sb-entity="page"') : ''
+    end
+
     def section(id, tag, html_opts = {}, &block)
       @sb_section = [id]
-      opts = action_name != 'show' ? html_opts.merge({"data-sb-id" => id, "data-sb-repeat" => @sb_entity != @site, "data-sb-entity" => @sb_entity == @site ? 'site' : 'page'}) : html_opts
+      opts = action_name != 'show' ? html_opts.merge({"data-sb-id" => id, "data-sb-entity" => @sb_entity == @site ? 'site' : 'page'}) : html_opts
       content_tag(tag, capture(self, &block), opts)
     end
 
-    def sections(id, tag, html_opts = {}, &block)
-      (@sb_entity.find_or_init(id)["elements"].map.with_index do |elt, i|
-        @sb_section = [id, elt["id"]]
-        opts = action_name != 'show' ? html_opts.merge({"data-sb-id" => @sb_section.join('|'), "data-sb-repeat" => true, "data-sb-entity" => @sb_entity == @site ? 'site' : 'page'}) : html_opts
-        content_tag(tag, capture(self, i, &block), opts)
-      end).join('').html_safe
-    end
-
     def elts(id)
       items = []
       element_id = elt_id(id)
@@ -155,8 +197,9 @@ module Sibu
     def link(elt, html_opts = {}, &block)
       repeat = html_opts.delete(:repeat)
       children = html_opts.delete(:children)
-      defaults = {"id" => elt_id(elt), "value" => "", "text" => DEFAULT_TEXT}
-      content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {}))
+      defaults = {"id" => elt_id(elt), "value" => "", "text" => Sibu::DEFAULT_TEXT}
+      link_elt = current_elt(elt)
+      content = defaults.merge(link_elt)
       val = content.delete("value") || ""
       text = content.delete("text")
       html_opts.merge!({data: {id: elt_id(elt), type: "link", repeat: repeat, children: children}}) if action_name != 'show'
@@ -172,16 +215,18 @@ module Sibu
       else
         content["href"] = @links.keys.include?(val.to_s) ? (action_name == 'show' ? link_path(val) : site_page_edit_content_path(@site.id, val)) : '#'
       end
-      # Note : sends elts in given order
       if block_given?
-        content_tag(:a, capture(*([raw(text)] + elts(elt)), &block), content.merge(html_opts).except("elements"))
+        @sb_section = (@sb_section || []) + [elt_id(elt)]
+        html_output = content_tag(:a, capture(link_elt, elts(elt), &block), content.merge(html_opts).except("elements"))
+        @sb_section -= [elt_id(elt)]
+        html_output
       else
         content_tag(:a, raw(text), content.merge(html_opts).except("elements"))
       end
     end
 
     def interactive_map(elt, html_opts = {})
-      defaults = {"data-lat" => "45.68854", "data-lng" => "5.91587", "data-title" => DEFAULT_TEXT}
+      defaults = {"data-lat" => "45.68854", "data-lng" => "5.91587", "data-title" => Sibu::DEFAULT_TEXT}
       content = defaults.merge(elt.is_a?(Hash) ? elt : (select_element(elt) || {"id" => elt}))
       html_opts.merge!({data: {id: elt_id(elt), type: "map"}}) if action_name != 'show'
       content_tag(:div, nil, content.merge(html_opts))
@@ -190,5 +235,24 @@ module Sibu
     def elt_id(elt)
       elt.is_a?(Hash) ? (elt["data-id"] || elt["id"]) : elt
     end
+
+    def current_elt(elt)
+      (elt.is_a?(Hash) ? elt : (select_element(elt) || {})).except('elements')
+    end
+
+    def default_content(type)
+      case type
+      when "text"
+        {"text" => Sibu::DEFAULT_TEXT}
+      when "link"
+        {"value" => "", "text" => Sibu::DEFAULT_TEXT}
+      when "paragraph"
+        {"text" => Sibu::DEFAULT_PARAGRAPH}
+      when "media"
+        {"src" => Sibu::DEFAULT_IMG}
+      when "embed"
+        {"code" => '<p>Contenu HTML personnalisé (iframe, etc...)</p>'}
+      end
+    end
   end
 end

data/app/models/sibu/page.rb

@@ -30,12 +30,12 @@ module Sibu
       save
     end
 
-    def update_path
+    def update_path(force_update = false)
       prefix = site.version == Sibu::Site::DEFAULT_VERSION ? '' : "#{site.version}/"
       if is_home == 'true'
-        self.path = ''
+        self.path = prefix
       else
-        self.path = "#{prefix}#{name.parameterize}" if self.path.blank?
+        self.path = "#{prefix}#{name.parameterize}" if self.path.blank? || force_update
       end
     end
 

data/app/models/sibu/site.rb

@@ -36,7 +36,7 @@ module Sibu
     end
 
     def section_template(section)
-        "#{site_template.path}/#{section["category"]}/#{section["template"]}"
+      "#{site_template.path}/#{section["category"]}/#{section["template"]}"
     end
 
     def not_found
@@ -51,6 +51,13 @@ module Sibu
       pages.where(id: page_id).select(:id, :path).first
     end
 
+    def update_paths
+      pages.each do |p|
+        p.update_path(true)
+        p.save
+      end
+    end
+
     def save_and_init
       if valid?
         self.sections = site_template.sections
@@ -69,6 +76,13 @@ module Sibu
       Hash[pages.collect {|p| [p.id.to_s, p.path]}]
     end
 
+    def update_paths
+      pages.each do |p|
+        p.update_path(true)
+        p.save
+      end
+    end
+
     def init_pages(source)
       site_data = Rails.application.config.sibu[:site_data][source]
       site_data.pages.each do |p|

data/app/models/sibu/site_template.rb

@@ -6,7 +6,7 @@ module Sibu
     store :default_styles, accessors: [:primary_font, :secondary_font, :primary_color, :secondary_color], coder: JSON
 
     def reference
-      name.parameterize.gsub('-', '_')
+      ref || name.parameterize.gsub('-', '_')
     end
 
     def available_sections(path_prefix = 'app/views/shared')
@@ -16,6 +16,9 @@ module Sibu
         sections_list += Dir.glob(dir + "*.erb").map {|f| f.split('/').last}.
             map {|f| f[1..-1].gsub('.html.erb', '')}.map {|f| {"id" => "sibu_template_#{f}", "category" => cat, "template" => f}}
       end
+      if Rails.application.config.sibu[:sections_ordering]
+        sections_list = Rails.application.config.sibu[:sections_ordering].call(sections_list)
+      end
       sections_list
     end
   end

data/app/views/layouts/sibu/edit_content.html.erb

@@ -2,13 +2,12 @@
 <html>
 <head>
   <title><%= conf[:title] %></title>
-  <%= stylesheet_link_tag "#{conf[:stylesheet]}-edit", media: 'all' %>
   <%= stylesheet_link_tag 'sibu/sibu', media: 'all' %>
+  <%= stylesheet_link_tag conf[:stylesheet], media: 'all' %>
   <%= javascript_include_tag "#{conf[:javascript]}-edit" %>
-  <%= javascript_include_tag 'sibu/sibu' %>
   <% if @site %>
     <%= stylesheet_link_tag (conf[:custom_styles] ? @site.style_url : @site.site_template.path), media: "all" %>
-    <%= javascript_include_tag "#{@site.site_template.path}-core" %>
+    <%= javascript_include_tag @site.site_template.path %>
   <% end %>
   <%= csrf_meta_tags %>
   <%= yield :styles %>
@@ -42,46 +41,53 @@
     </div>
   <% end %>
 <% end %>
+<%= javascript_include_tag 'sibu/sibu' %>
 <script>
-    var rootElt = $('html, body');
-
-    $(function () {
+    document.addEventListener("DOMContentLoaded", function() {
         initOverlays();
         sibuCallback("editContent");
         <% unless @edit_section.blank? %>
-          $("[data-sb-overlay='<%= @edit_section %>']").click();
+          document.querySelector("[data-sb-overlay='<%= @edit_section %>']").click();
         <% end %>
     });
 
     function setEditMode(section, overlay, left, top, width, height) {
-        var editMode = $("#edit_mode_overlay");
-        editMode.find(".overlay_top").css("height", top);
-        editMode.find(".overlay_bottom").css("top", top + height);
-        editMode.find(".overlay_left").css({"height": height, "width": left, "top": top});
-        editMode.find(".overlay_right").css({"height": height, "left": left + width, "top": top});
-        editMode.find(".edit_mode_actions").css({"top": (top <= 120 ? (top + height) : (top - 40 - 20)), left: left, width: width});
-        editMode.find("#edit_section_msg").text("Modifier la section");
-        editMode.show();
-        if(!section.data('sb-repeat')) {
-            editMode.find("#new_section_before").hide();
-            editMode.find("#new_section_after").hide();
-            editMode.find("#delete_section").hide();
+        var editMode = document.querySelector("#edit_mode_overlay");
+        editMode.querySelector(".overlay_top").style.height = top + "px";
+        editMode.querySelector(".overlay_bottom").style.top = top + height + "px";
+        var leftOverlay = editMode.querySelector(".overlay_left"), rightOverlay = editMode.querySelector(".overlay_right"),
+            editModeActions = editMode.querySelector(".edit_mode_actions");
+        leftOverlay.style.height = height + "px";
+        leftOverlay.style.width = left + "px";
+        leftOverlay.style.top = top + "px";
+        rightOverlay.style.height = height + "px";
+        rightOverlay.style.left = left + width + "px";
+        rightOverlay.style.top = top + "px";
+        editModeActions.style.top = (top <= 120 ? (top + height) : (top - 40 - 20)) + "px";
+        editModeActions.style.left = left + "px";
+        editModeActions.style.width = width + "px";
+        editMode.querySelector("#edit_section_msg").innerText = "Modifier la section";
+        editMode.style.display = "block";
+        if(section.getAttribute('data-sb-entity') === 'site') {
+            editMode.querySelector("#new_section_before").style.display = "none";
+            editMode.querySelector("#new_section_after").style.display = "none";
+            editMode.querySelector("#delete_section").style.display = "none";
         } else {
-            editMode.find("#new_section_before").show();
-            editMode.find("#new_section_after").show();
-            editMode.find("#delete_section").show();
+            editMode.querySelector("#new_section_before").style.display = "block";
+            editMode.querySelector("#new_section_after").style.display = "block";
+            editMode.querySelector("#delete_section").style.display = "block";
         }
-        rootElt.animate({scrollTop: top}, 500);
-        section.addClass('sb-editing');
+        window.scrollTo(0, top);
+        section.classList.add('sb-editing');
         initInnerOverlays(section);
-        $("#edit_overlays").html("");
+        document.querySelector("#edit_overlays").innerHTML = "";
     }
 
     function cancelEditMode() {
         refreshAfterEdit(false);
-        $("#edit_mode_overlay").hide();
+        document.querySelector("#edit_mode_overlay").style.display = "none";
         cancelEdit();
-        $(".sb-editing").removeClass("sb-editing");
+        document.querySelector(".sb-editing").classList.remove("sb-editing");
         initOverlays();
         if(typeof editCancelledCallback === "function") {
             editCancelledCallback();
@@ -89,110 +95,109 @@
     }
 
     function newSection(isAfter) {
-        var section = $(".sb-editing").first();
-        var sectionsPanel = $("#sections_panel");
-        sectionsPanel.html(
+        var section = document.querySelector(".sb-editing");
+        var sectionsPanel = document.querySelector("#sections_panel");
+        sectionsPanel.innerHTML =
             '<div class="sibu_panel sibu_view"><h2>Choix du type de section</h2></div>' +
             '<div><div class="sibu_sections sibu_site_content" style="text-align: center;">Chargement en cours...</div></div>' +
-            '<div class="sibu_panel sibu_view"><div class="sibu_actions"><a href="#" onclick="cancelSectionsEdit(); return false;">Annuler</a></div></div>'
-        );
-        sectionsPanel.slideDown("fast");
-        $.ajax({
-            url: "<%= new_section_site_page_path(@site.id, @page.id) %>",
-            method: "GET",
-            data: {
-                section_id: section.data("sb-id"),
-                entity: section.data("sb-entity"),
+            '<div class="sibu_panel sibu_view"><div class="sibu_actions"><a href="#" onclick="cancelSectionsEdit(); return false;">Annuler</a></div></div>';
+        sectionsPanel.classList.add("active");
+        sendXmlHttpRequest(
+            "GET",
+            "<%= new_section_site_page_path(@site.id, @page.id) %>",
+            {
+                section_id: section.getAttribute("data-sb-id"),
+                entity: section.getAttribute("data-sb-entity"),
                 after: isAfter
             }
-        })
+        );
     }
 
     function editSection() {
-        var section = $(".sb-editing").first();
-        $.ajax({
-            url: "<%= edit_section_site_page_path(@site.id, @page.id) %>",
-            method: "GET",
-            data: {
-                section_id: section.data("sb-id"),
-                entity: section.data("sb-entity")
+        var section = document.querySelector(".sb-editing");
+        sendXmlHttpRequest(
+            "GET",
+            "<%= edit_section_site_page_path(@site.id, @page.id) %>",
+            {
+                section_id: section.getAttribute("data-sb-id"),
+                entity: section.getAttribute("data-sb-entity")
             }
-        })
+        );
     }
 
     function deleteSection() {
         if (window.confirm("Supprimer la section ?")) {
-            var section = $(".sb-editing").first();
-            $.ajax({
-                url: "<%= delete_section_site_page_path(@site.id, @page.id) %>",
-                method: "DELETE",
-                data: {
-                    section_id: section.data("sb-id"),
-                    entity: section.data("sb-entity")
+            var section = document.querySelector(".sb-editing");
+            sendXmlHttpRequest(
+                "DELETE",
+                "<%= delete_section_site_page_path(@site.id, @page.id) %>",
+                {
+                    section_id: section.getAttribute("data-sb-id"),
+                    entity: section.getAttribute("data-sb-entity")
                 }
-            })
+            );
         }
     }
 
     function cloneElement(entity, sectionId, elementId) {
         if (window.confirm("Dupliquer l'élément ?")) {
-            $.ajax({
-                url: "<%= clone_element_site_page_path(@site.id, @page.id) %>",
-                method: "POST",
-                data: {
+            sendXmlHttpRequest(
+                "POST",
+                "<%= clone_element_site_page_path(@site.id, @page.id) %>",
+                {
                     section_id: sectionId,
                     element_id: elementId,
                     entity: entity
                 }
-            })
+            );
         }
     }
 
     function deleteElement(entity, sectionId, elementId) {
         if (window.confirm("Supprimer l'élément ?")) {
-            $.ajax({
-                url: "<%= delete_element_site_page_path(@site.id, @page.id) %>",
-                method: "DELETE",
-                data: {
+            sendXmlHttpRequest(
+                "DELETE",
+                "<%= delete_element_site_page_path(@site.id, @page.id) %>",
+                {
                     section_id: sectionId,
                     element_id: elementId,
                     entity: entity
                 }
-            })
+            );
         }
     }
 
     function addChildElement(entity, sectionId, elementId) {
         if (window.confirm("Ajouter un sous-menu ?")) {
-            $.ajax({
-                url: "<%= child_element_site_page_path(@site.id, @page.id) %>",
-                method: "POST",
-                data: {
+            sendXmlHttpRequest(
+                "POST",
+                "<%= child_element_site_page_path(@site.id, @page.id) %>",
+                {
                     section_id: sectionId,
                     element_id: elementId,
                     entity: entity
                 }
-            })
+            );
         }
     }
 
     function cancelEdit() {
-        $("#edit_panel").slideUp("fast");
-        $("#edit_panel").html("");
+        document.querySelector("#edit_panel").classList.remove("active");
+        document.querySelector("#edit_panel").innerHTML = "";
         document.body.style.overflow = "initial";
     }
 
     function cancelSectionsEdit() {
-        $("#sections_panel").slideUp("fast");
-        $("#sections_panel").html("");
+        document.querySelector("#edit_panel").classList.remove("active");
+        document.querySelector("#sections_panel").innerHTML = "";
         document.body.style.overflow = "initial";
     }
 
     function editContent(eltId, sectionId, entity, repeat, contentType, size, children) {
-        $.ajax({
-            url: "<%= edit_element_site_page_path(@site.id, @page.id) %>",
-            method: "GET",
-            data: {
+        sendXmlHttpRequest(
+            "GET",
+            "<%= edit_element_site_page_path(@site.id, @page.id, format: :js) %>",
+            {
                 element_id: eltId,
                 section_id: sectionId,
                 entity: entity,
@@ -201,60 +206,112 @@
                 size: size,
                 children: children
             }
-        })
+        );
     }
 
     function initInnerOverlays(section) {
-        var editables = section.find("[data-type]");
-        editables.off();
-        editables.hover(function(evt) {
-            evt.stopPropagation();
-            $(this).addClass("sb-editable");
-        }, function() {
-            $(this).removeClass("sb-editable");
-        });
-        editables.click(function(evt) {
-            evt.stopPropagation();
-            evt.preventDefault();
-            var elt = $(this), eltId = elt.data("id"), repeat = elt.data("repeat"), type = elt.data("type"),
-                size = elt.data("size"), children = elt.data("children");
-            var sectionId = section.data("sb-id"), entity = section.data("sb-entity");
-            editContent(eltId, sectionId, entity, repeat, type, size, children);
-        })
+        var editables = section.querySelectorAll("[data-type]");
+        for (var i = 0; i < editables.length; i++) {
+            if (editables[i].getAttribute("data-type") !== 'group' || editables[i].getAttribute("data-repeat") !== 'false' || editables[i].getAttribute("data-children") !== 'false') {
+                editables[i].addEventListener("mouseenter", function(evt) {
+                    evt.stopPropagation();
+                    evt.currentTarget.classList.add("sb-editable");
+                });
+                editables[i].addEventListener("mouseleave", function(evt) {
+                    evt.currentTarget.classList.remove("sb-editable");
+                });
+                editables[i].addEventListener("click", function(evt) {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    var elt = evt.currentTarget, eltId = elt.getAttribute("data-id"), repeat = elt.getAttribute("data-repeat"),
+                        type = elt.getAttribute("data-type"), size = elt.getAttribute("data-size"), children = elt.getAttribute("data-children");
+                    var sectionId = section.getAttribute("data-sb-id"), entity = section.getAttribute("data-sb-entity");
+                    editContent(eltId, sectionId, entity, repeat, type, size, children);
+                });
+            }
+        }
     }
 
     function initOverlays() {
-        var container = $("#edit_overlays");
-        container.html("");
-        $("[data-sb-id]").each(function() {
-          var section = $(this);
-          var offset = section.offset();
-          var yOffset = offset.top - $(".sibu_content_panel").offset().top;
-          var width = section.outerWidth(), height = (section.outerHeight() === 0 ? childrenHeight(section) : section.outerHeight());
-          var overlay = $("<div data-sb-overlay='" + section.attr("data-sb-id") + "'>Modifier</div>");
-          container.append(overlay);
-          overlay.css({top: yOffset, left: offset.left, width: width, height: height});
-          overlay.hover(function() {
-              $(this).css("opacity", 1);
-          }, function() {
-              $(this).css("opacity", 0);
-          });
-          overlay.click(function() {
-              setEditMode(section, $(this), offset.left, yOffset, width, height);
-          })
-        });
+        var container = document.querySelector("#edit_overlays"), sections = document.querySelectorAll("[data-sb-id]");
+        container.innerHTML = "";
+
+        for (var i = 0; i < sections.length; i++) {
+            var sectionBox = sections[i].getBoundingClientRect();
+            var yOffset = sectionBox.top - document.querySelector(".sibu_content_panel").getBoundingClientRect().top;
+            var width = sections[i].offsetWidth, height = (sections[i].offsetHeight === 0 ? childrenHeight(sections[i]) : sections[i].offsetHeight);
+            var overlay = document.createElement("div");
+            overlay.setAttribute("data-sb-overlay", sections[i].getAttribute("data-sb-id"));
+            overlay.innerHTML = "Modifier";
+            container.appendChild(overlay);
+            overlay.style.top = yOffset + "px";
+            overlay.style.left = sectionBox.left + "px";
+            overlay.style.width = width + "px";
+            overlay.style.height = height + "px";
+            overlay.addEventListener("click", (function(section, offsetLeft, offsetTop, editWidth, editHeight) {
+                return function(evt) {
+                    setEditMode(section, evt.currentTarget, offsetLeft, offsetTop, editWidth, editHeight);
+                };
+            })(sections[i], sectionBox.left, yOffset, width, height));
+        }
     }
 
     function childrenHeight(parentElt) {
-        var height = 0;
-        parentElt.find("*").each(function() {
-            var childHeight = $(this).height();
+        var height = 0, children = parentElt.querySelectorAll("*");
+        for (var i = 0; i < children.length; i++) {
+            var childHeight = children[i].clientHeight;
             if(childHeight > height) {
                 height = childHeight;
             }
-        });
+        }
         return height;
     }
+
+    function submitForm(formElt, callback) {
+        sendXmlHttpRequest(formElt.getAttribute("method").toUpperCase(), formElt.getAttribute("action"),
+            new FormData(formElt))
+    }
+
+    function sendXmlHttpRequest(method, url, data, callback) {
+        var req = new XMLHttpRequest(), param;
+        if (callback) {
+            req.onload = callback;
+        } else {
+            req.onload = function() {
+                eval(req.responseText);
+            }
+        }
+
+        if (method === 'GET') {
+            var params = [];
+            for(param in data ) {
+                if (data.hasOwnProperty(param)) {
+                    params.push(encodeURIComponent(param) + '=' + encodeURIComponent(data[param] || ""));
+                }
+            }
+            req.open(method, url + '?' + params.join('&').replace(/%20/g, '+'));
+            req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+            req.send();
+        } else {
+            if (data instanceof FormData) {
+                formData = data;
+            } else {
+                var formData = new FormData();
+                for (var key in data) {
+                    if (data.hasOwnProperty(key)) {
+                        formData.append(key, data[key]);
+                    }
+                }
+            }
+
+            req.open(method, url);
+            req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+            var token = document.getElementsByName("csrf-token")[0].content;
+            req.setRequestHeader('X-CSRF-Token', token);
+
+            req.send(formData);
+        }
+    }
 </script>
 <%= yield :site_scripts %>
 <%= yield :page_scripts %>