Add Category creation on Content creation page (UJS way). Induced som…

…e refactorisation in Categories views and model

app/controllers/admin/categories_controller.rb

@@ -4,9 +4,17 @@ class Admin::CategoriesController < Admin::BaseController
   cache_sweeper :blog_sweeper
 
   def index; redirect_to :action => 'new' ; end
-  def new; new_or_edit ; end
   def edit; new_or_edit;  end
 
+  def new 
+    respond_to do |format|
+      format.html { new_or_edit }
+      format.js { 
+        @category = Category.new
+      }
+    end
+  end
+
   def destroy
     @category = Category.find(params[:id])
     if request.post?
@@ -47,7 +55,15 @@ def new_or_edit
                 end
     @category.attributes = params[:category]
     if request.post?
-      save_category
+      respond_to do |format|
+        format.html { save_category }
+        format.js do 
+          @category.save
+          @article = Article.new
+          @article.categories << @category
+          return render(:partial => 'admin/content/categories')
+        end
+      end
       return
     end
     render 'new'

app/views/admin/categories/_form.html.erb

@@ -1,19 +1,22 @@
-<%= error_messages_for 'category' %>
-<div>
-  <h2><label for="category_name"><%= _("Name")%></label> </h2>
-  <p class='input_text_title'>
-    <%= text_field :category, :name, :class => 'medium'  %>
-  </p>
-</div>
-<div>
-  <h3><label for="category_keywords" class="content block"><%= _("Keywords") %></label></h3>
-  <p class='input_text_title'>
-    <%= text_field :category, :keywords, :class => 'medium' %>
-  </p>
-</div>
-<div>
-  <h3><label for="category_description" class="content block"><%= _("Description") %></label></h3>
-  <p class='input_text_title'>
-    <%= text_area :category, :description, :rows => 5, :class => 'medium' %>
-  </p>
-</div>
+<%= form_tag :action=>"edit", :id => @category.id do %>
+  <%= error_messages_for 'category' %>
+  <div>
+    <h2><label for="category_name"><%= _("Name")%></label> </h2>
+    <p class='input_text_title'>
+      <%= text_field :category, :name, :class => 'medium'  %>
+    </p>
+  </div>
+  <div>
+    <h3><label for="category_keywords" class="content block"><%= _("Keywords") %></label></h3>
+    <p class='input_text_title'>
+      <%= text_field :category, :keywords, :class => 'medium' %>
+    </p>
+  </div>
+  <div>
+    <h3><label for="category_description" class="content block"><%= _("Description") %></label></h3>
+    <p class='input_text_title'>
+      <%= text_area :category, :description, :rows => 5, :class => 'medium' %>
+    </p>
+  </div>
+  <%= cancel_or_save %>
+<% end %>

app/views/admin/categories/new.html.erb

@@ -2,10 +2,7 @@
 <% subtabs_for(:articles) %>
 
 <div class='category_editor'>
-  <%= form_tag :action=>"edit", :id => @category.id do %>
-    <%= render :partial => "form" %>
-    <%= cancel_or_save %>
-  <% end %>
+  <%= render :partial => "form" %>
 </div>
 
 <div id="category_container" class="list">

app/views/admin/categories/new.js.erb

@@ -0,0 +1,33 @@
+<div class="top-layer">
+  <div class="concrete">
+    <h1><%= _("%s Category", controller.action_name.capitalize) %></h1>
+    <%= render 'form' %>
+  </div>
+  <script type="text/javascript">
+    <!-- Rewrite cancel link to close that form -->
+    $$('.concrete a').each(function(cancel_link) {
+      cancel_link.observe('click', function(event) {
+        $$('.top-layer').each(function(layer) { layer.remove(); });
+        event.stop();
+      });
+      <!-- Ok, it's just for Mister Perfect -->
+      cancel_link.writeAttribute('href', '#close_form');
+      <!-- Intercepts form submission -->
+      $$('.concrete form').each(function(cat_form) {
+        cat_form.observe('submit', function(event) {
+          cat_form.request({
+            method: 'post',
+            onSuccess: function(transport) {
+              $$('.top-layer').each(function(layer) { layer.remove(); });
+              var response = transport.responseText;
+              var categories = $('categories');
+              categories.replace(response);
+              $$('#article_form .new_category').each(function(cat_link){ cat_link.observe('click', bind_new_category_overlay); });
+            }
+          });
+          event.stop();
+        });
+      });
+    });
+  </script>
+</div>

app/views/admin/content/_categories.html.erb

@@ -0,0 +1,8 @@
+    <div class='widget-content' id="categories">
+      <%- article_categories = @article ? @article.categories.map(&:id) : [] -%>
+      <%- Category.all.each do |cat| %>
+        <%= check_box_tag('categories[]', cat.id, (@article.categories.map(&:id).include? cat.id), :id => "category_#{h(cat.id)}") %>
+        <%= label_tag "category_#{h(cat.id)}", h(cat.name) %><br />
+      <% end -%>
+      <%= link_to _("New Category"), {:controller => 'admin/categories', :action => 'new' }, :class => 'new_category' %>
+    </div>

app/views/admin/content/_form.html.erb

@@ -30,13 +30,7 @@
 
   <div class='widget-container'>
     <h3 class='dark'><%= _("Categories") %></h3>
-    <div class='widget-content'>
-      <%- Category.all.each do |cat| %>
-        <%= check_box_tag('categories[]', cat.id, (@article.categories.map(&:id).include? cat.id), :id => "category_#{h(cat.id)}") %>
-        <%= label_tag "category_#{h(cat.id)}", h(cat.name) %><br />
-      <% end -%>
-      <%= link_to _("New Category"), {:controller => 'admin/categories', :action => 'new' } %>
-    </div>
+    <%= render 'categories' %>
   </div>
 </div>
 

public/javascripts/administration.js

@@ -16,9 +16,24 @@ function autosave_request(e) {
 }
 
 Event.observe(window, 'load', function() {
-  $$('.autosave').each(function(e){autosave_request(e)})
+  $$('.autosave').each(function(e){autosave_request(e)});
+  $$('#article_form .new_category').each(function(cat_link){ cat_link.observe('click', bind_new_category_overlay); });
 })
 
+// UJS for new category link in admin#new_article
+function bind_new_category_overlay(event) {
+  new Ajax.Request(event.element().readAttribute('href'),
+  {
+    method:'get',
+    onSuccess: function(transport){
+      var response = transport.responseText;
+      $('content').insert({bottom: response });
+    },
+    onFailure: function(){ alert('Something went wrong...') }
+  });
+  window.scrollTo(window.pageXOffset, 0); 
+  event.stop();
+}
 // JS QuickTags version 1.3.1
 //
 // Copyright (c) 2002-2008 Alex King

public/stylesheets/administration_structure.css

@@ -97,6 +97,7 @@ td.paginate {
   border-width: 0;
   display: block;
   padding: 1em 1.4em;
+  position: relative;
 }
 
 #footer { 
@@ -386,6 +387,26 @@ select {
   padding: 0.2em 0.4em; 
 }
 
+.top-layer {
+  position: absolute;
+  background-color: transparent;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.concrete {
+  padding: 1em 2em;
+  background-color: #F9F9F9;
+  border: 1px solid #A2A1A2;
+  width: 450px;
+  margin-left: auto;
+  margin-right: auto;
+  -moz-box-shadow: 10px 10px 5px #888;
+  -webkit-box-shadow: 10px 10px 5px #888;
+  box-shadow: 10px 10px 5px #888;
+}
 
 /*------------------------------------------------------------------
 3.3. Status and info