Improve specs and dummy app to include only_content_blocks. Review RE…

…ADME and examples document to include new content

README.md

@@ -24,17 +24,17 @@ The bettertabs gem includes a dummy test app, that is used for development (to e
 
   * [Try online the demo app](http://bettertabs-demo.herokuapp.com)
   * Or to run it on your machine:
-        
+
         $ git clone git://github.com/agoragames/bettertabs.git
         $ cd bettertabs
         /bettertabs$ bundle install
         /bettertabs$ bundle exec rackup config.ru
 
 
 ## Requirements: ##
-  * Ruby 1.9.2
-  * Rails 3.1+
-  * [jquery-rails](https://github.com/rails/jquery-rails) with jQuery 1.3 or higher
+  * Ruby 1.9
+  * Rails 3.1 or higher
+  * jQuery 1.3 or higher
 
 Anyway you can use bettertabs without javascript (or use your own javascript handler) since the bettertabs helper only generates the appropriate markup.
 
@@ -63,16 +63,17 @@ Bettertabs supports three kinds of tabs:
   * **Link Tabs**: Loads only the active tab contents; when click on another tab, go to the specified URL. No JavaScript needed.
   * **Static Tabs**: Loads all content of all static tabs, but only show the active content; when click on another tab, activate its related content. When JavaScript disabled, it behaves like *link tabs*.
   * **Ajax Tabs**: Loads only the active tab contents; when click on another tab, loads its content via ajax and show. When JavaScript disabled, it behaves like *link tabs*.
+  * **Only Content**: You can also add a block of content that is always visible (with no tab)
 
 An usage example should be self explanatory (using HAML, but it also works with ERB and other template systems):
 
     = bettertabs :profile_tabs, :selected_tab => :friends do |tab|
       = tab.static :general, 'My Profile' do
         %h2 General Info
         = show_user_general_info(@user)
-          
+
       = tab.ajax :friends, :partial => 'shared/friends', :locals => { :user => @user }
-      
+
       = tab.link :groups do
         = render :partial => 'groups/user_groups', :locals => { :user => @user }
 
@@ -86,7 +87,7 @@ The option `:selected_tab` specifies the default selected tab, when the page is
   * [Bettertabs CSS reference guide](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md)
   * [Bettertabs helper](https://github.com/agoragames/bettertabs/blob/master/app/helpers/bettertabs_helper.rb) (params and options)
   * [Test Dummy Rails 3.1 application](https://github.com/agoragames/bettertabs/tree/master/spec/dummy) that has some usage examples
-  
+
 
 ## Tabs Routes ##
 
@@ -102,7 +103,7 @@ in a view accessible by a route like this:
 
     match 'profile/:nickname', :to => 'profiles#lookup', :as => 'profile'
 
-When you go to `/profile/dude`, your tabs links will have the following hrefs: 
+When you go to `/profile/dude`, your tabs links will have the following hrefs:
 
   * :general tab href: `/profile/dude?profile_tabs_selected_tab=general`
   * :friends tab href: `/profile/dude?profile_tabs_selected_tab=friends`
@@ -117,8 +118,8 @@ So now the tabs links will point to the following URLs:
 
   * :general tab href: `/profile/dude/general`
   * :friends tab href: `/profile/dude/friends`
-  
-  
+
+
 ## JavaScript with the jquery.bettertabs plugin #
 
 The bettertabs helper will generate the needed markup that has an inline script at the bottom:
@@ -132,7 +133,7 @@ You can see the jquery.bettertabs source code in the github repo:
   * [CoffeeScript version](https://github.com/agoragames/bettertabs/raw/master/app/assets/javascripts/jquery.bettertabs.js.coffee)
   * [JavaScript (generated by coffee) version](https://github.com/agoragames/bettertabs/raw/master/app/assets/javascripts/jquery.bettertabs.js)
   * [Compressed JavaScript](https://github.com/agoragames/bettertabs/raw/master/app/assets/javascripts/jquery.bettertabs.min.js)
-  
+
 The plugin defines one single jQuery method `jQuery(selector).bettertabs();` that is applied to the generated markup.
 
 This script will take the tab type from each tab link `data-tab-type` attribute (that can be "link", "static" or "ajax"), and will match each tab with its content using the tab link `data-show-content-id` attribute, that is the id of the related content.
@@ -159,7 +160,7 @@ You can interact with the bettertabs widget in the following ways:
   * **Hook some behavior when a tab is clicked**: attach a 'click' handler to the tab link or use any of the provided custom events.
   * **Show a loading clock while ajax is loading**: or any other kind of feedback to the user, use any of the provided custom events. You can also handle it styling the CSS class `.ajax-loading` that is added to the ajax tab link while ajax content is loading (see the [Styles Reference Guide](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md))
   * **Change the browser URL**: in the same way the plugin does when a tab is clicked, use `jQuery.Bettertabs.change_browser_url(new_url);`
-  
+
 Custom events that are attached to each tab content:
 
   * *'bettertabs-before-deactivate'*:   fired on content that is active and will be deactivated
@@ -175,7 +176,7 @@ Usage example of custom events:
     $("#profile_tabs_friends_content").bind('bettertabs-after-activate', function(){
       alert('friends content is visible');
     });
-    
+
     // Display the $('#loading-clock') element while ajax tabs are loading
     $("#profile_tabs").bind('bettertabs-before-ajax-loading', function(){
       $('#loading-clock').show();
@@ -187,7 +188,7 @@ Usage example of custom events:
 ## CSS Styles ##
 
 Bettertabs provides a rails helper to generate HTML and a jQuery plugin as JavaScript, but not any CSS styles because those are very different for each project and can not be abstracted into a common purpose CSS stylesheet.
-  
+
 Perhaps the most important CSS rule here is to define `display: none;` for `div.content.hidden`, because contents are never hidden using the jquery.hide() method or similar. The jquery.bettertabs plugin just adds the `.active` class to the active tab and active content, and the `.hidden` class to the non active content. You will need to use a CSS rule like this:
 
       div.bettertabs div.content.hidden { display: none; }
@@ -196,17 +197,11 @@ Use the [Bettertabs CSS Guidelines](https://github.com/agoragames/bettertabs/blo
 
 
 ## How to help make Bettertabs even Better ##
- 
+
 * Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
 * Fork the project
 * Start a feature/bugfix branch
 * Commit and push until you are happy with your contribution
 * Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
 * Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
 
-
-## Future work ##
-
-  * Try to make it compatible with ruby 1.8.x
-  * Improve tests to check the JavaScript code (Jasmine, Evergreen, Capybara, whatever)
-

doc/EXAMPLES.md

@@ -41,7 +41,7 @@ In partial `app/views/home/_mytabs.html.erb`:
       <%= tab.static :about, 'Who am I?', :partial => '/shared/about' %>
       <%= tab.static :contact_me %>
     <% end %>
-     
+
 
 The :about and :contact_me tabs will get the content from the referenced partials. Put any content there, for example:
 
@@ -53,7 +53,7 @@ In partial `app/views/home/_contact_me.html.erb`:
 
     <h2>How to contact me:<h2/>
     <p><%= @contact_info.inspect %></p>
-    
+
 In controller `app/controllers/home_controller.rb`:
 
     class HomeController < ApplicationController
@@ -79,31 +79,31 @@ Ajax tabs perform an asynchronous call to get the content before showing it. Giv
 supposing the bettertabs_id is :mytabs, it will generate the following markup for the tab item:
 
     <li id="home_mytabs_tab">
-      <a data-tab-type="ajax" 
-         data-show-content-id="home_mytabs_content" 
-         data-ajax-url="/home/ajax_tab" 
+      <a data-tab-type="ajax"
+         data-show-content-id="home_mytabs_content"
+         data-ajax-url="/home/ajax_tab"
          href="/home/index">
          Home
       </a>
     </li>
-    
+
 The attributes *data-tab-type*, *data-show-content-id* and *data-ajax-url* will be used by the jquery.bettertabs plugin.
 
 So here there are two important options:
 
   * :url => The tag link href. Is used to change the browser url (html5 browsers only) and as url when JavaScript is off. Default to current url plus the param `#{bettertabs_id}_selected_tab=#{tab_id}`.
   * :ajax_url => Defaults to :url plus the param `ajax=true`. Is used to perform the ajax request.
-  
+
 Both options have a default value, so if you just write:
 
     tab.ajax :home
 
 supposing the bettertabs_id is :mytabs, and the current url is '/home', it will generate the following markup for the tab item:
 
     <li id="home_mytabs_tab">
-      <a data-tab-type="ajax" 
-         data-show-content-id="home_mytabs_content" 
-         data-ajax-url="/home?mytabs_selected_tab=home&ajax=true" 
+      <a data-tab-type="ajax"
+         data-show-content-id="home_mytabs_content"
+         data-ajax-url="/home?mytabs_selected_tab=home&ajax=true"
          href="/home?mytabs_selected_tab=home">
          Home
       </a>
@@ -135,7 +135,7 @@ In partial `app/views/home/_mytabs.html.erb`:
       <%= tab.ajax :about, 'Who am I?', :partial => '/shared/about' %>
       <%= tab.ajax :contact_me %>
     <% end %>
-     
+
 **Note** that the only difference between this example and the *static tabs example* is to use `tab.ajax` declaration instead of `tab.static`.
 
 Partials `app/views/shared/_about.html.erb` and `app/views/home/_contact_us.html.erb` (same as in the *static tabs example*).
@@ -156,7 +156,7 @@ In controller `app/controllers/home_controller.rb`, you can load only the needed
         when 'contact_us' then
           @contact_info = { :address => 'The Hell', :telephone => '666'}
         end
-        
+
         # When ajax, render only the selected tab content (handled by bettertabs helper)
         render :partial => 'mytabs' and return if request.xhr? # you can also check if params[:ajax].present?
       end
@@ -177,29 +177,43 @@ Since the *mytabs* partial just contains the bettertabs helper, and bettertabs h
     * to send the link to other person and he/she will open the selected tab
   * Easily change the behavior of a tab to be `ajax`, `static` or `link`. It always work.
   * Keep your views DRY, clean and readable
-
 
-## Example using HAML and ruby1.9.2 ##
+## Adding Blocks Of Content with no Tabs
+
+Sometimes is possible you want to add inline content that has to be always visible, for example if the tabs are a form and you want to show the "save" button, taking advantage of the easy styling:
+
+    <%= bettertabs :mytabs do |tab| %>
+      <%= tab.static :personal_data %>
+      <%= tab.static :credit_card %>
+      <%= tab.static :bonus_fields %>
+
+      <%= tab.only_content_block do %>
+        <%= button_tag 'Save' %>
+      <% end %>
+
+    <% end %>
+
+## Example using HAML and ruby1.9 ##
 
 Is easy to mix all types of tabs, and customize them using the provided options:
-  
+
     = bettertabs :bettertabs_example, :selected_tab => :chooseme, :class => 'bettertabs example', :list_html_options => {:class => 'list_class'} do |tab|
-    
+
       = tab.static :simplest_tab, class: 'awesome-tab' do
         Click this tab to see this content.
-        
+
       = tab.static :chooseme, 'Please, Click me!' # as default, renders partial: 'chooseme'
-        
+
       = tab.static :render_another_partial, partial: 'another_partial'
-      
+
       = tab.link :link_to_another_place, url: go_to_other_place_url  # will make a new request
-        
+
       = tab.ajax :cool_ajax, ajax_url: remote_call_path, partial: 'cool_partial'
       -# In this case, you shoud take care of that remote_call_path is using the same partial: 'cool_partial'
-      
+
       = tab.ajax :album, url: url_for(@album), partial: 'shared/album'
       -# This one will make the ajax call to the ajax_url: url_for(@album, :ajax => true)
-      
+
       = tab.ajax :ajax_tab, title: 'Content is loaded only once'
 
 

spec/dummy/app/controllers/bettertabs_controller.rb

@@ -1,24 +1,27 @@
 class BettertabsController < ApplicationController
-  
+
   def static
   end
-  
+
   def link_tab_1
   end
-  
+
   def link_tab_2
   end
-  
+
   def ajax
     render partial: 'ajax' and return if request.xhr?
   end
-
+
+  def only_content_block
+  end
+
   def mixed
     render partial: 'mixed' and return if request.xhr?
   end
-  
+
   def mixed_with_erb
     render partial: 'tab_content' and return if request.xhr? and params[:erb_test_selected_tab] == 'ajax_tab'
   end
-  
+
 end

spec/dummy/app/views/bettertabs/_mixed.html.haml

@@ -3,4 +3,6 @@
     Content for the link tab
   = tab.static :static_tab do
     Content for the static tab
-  = tab.ajax :ajax_tab, partial: 'tab_content'
+  = tab.ajax :ajax_tab, partial: 'tab_content'
+  = tab.only_content_block do
+    This block is always visible (has not tab)

spec/dummy/app/views/bettertabs/_tab_content.html.haml

@@ -1,3 +1,4 @@
-tab_content partial content.
 - if local_assigns.has_key? :local_var
   = local_var
+- else
+  tab_content partial content.

spec/dummy/app/views/bettertabs/mixed_with_erb.html.erb

@@ -5,4 +5,7 @@
   <% end %>
   <%= tab.static :static_tab, partial: 'tab_content' %>
   <%= tab.ajax :ajax_tab, partial: 'tab_content' %>
-<% end %>
+  <%= tab.only_content_block do %>
+    This block is always visible (has not tab)
+  <% end %>
+<% end %>

spec/dummy/app/views/bettertabs/only_content_block.html.haml

@@ -0,0 +1,12 @@
+%h2 Testing Content Blocks (that have with no tab) mixed with static tabs
+= bettertabs :static, :class => 'bettertabs example', :list_html_options => {:class => 'list_class'} do |tab|
+  = tab.only_content_block do
+    Content for only_content_block_1
+
+  = tab.static :static_tab_1 do
+    Content for static_tab_1
+
+  = tab.only_content_block :partial => 'tab_content', :locals => {:local_var => 'Content for only_content_block_2'}
+
+  = tab.static :static_tab_2 do
+    Content for static_tab_2

spec/dummy/app/views/bettertabs/static.html.haml

@@ -1,15 +1,10 @@
 %h2 Testing static tabs
 = bettertabs :static, :class => 'bettertabs example', :list_html_options => {:class => 'list_class'} do |tab|
-  = tab.only_content_block do
-    Content for only_content_block_1
 
   = tab.static :static_tab_1 do
     Content for static_tab_1
 
-  = tab.only_content_block do
-    Content for only_content_block_2
-
   = tab.static :static_tab_2 do
     Content for static_tab_2
 
-  = tab.static :tab_content, 'Static Tab 3', :locals => {:local_var => 'Local value'} # should render partial 'tab_content'
+  = tab.static :tab_content, 'Static Tab 3', :locals => {:local_var => 'Content for static_tab_3'} # should render partial 'tab_content'

spec/dummy/app/views/layouts/application.html.erb

@@ -14,13 +14,14 @@
   <%= link_to 'see code in Github', 'http://github.com/agoragames/bettertabs/tree/master/spec/dummy' %></br>
   For this demo, the hidden content is shown inside a dashed border to see what is loaded when you click a tab,</br>
   click on the links below to see different types of tabs (static, link or ajax).
-  
+
 </p>
 <div class="nav">
-  <%= link_to 'static', { action: 'static'}, title: 'Using only static tabs' %> | 
-  <%= link_to 'link', { action: 'link_tab_1'}, title: 'Using only link tabs' %> | 
-  <%= link_to 'ajax', { action: 'ajax'}, title: 'Using only ajax tabs' %> | 
-  <%= link_to 'mixed', { action: 'mixed'}, title: 'Using static, link and ajax tabs in the same widget' %> | 
+  <%= link_to 'static', { action: 'static'}, title: 'Using only static tabs' %> |
+  <%= link_to 'link', { action: 'link_tab_1'}, title: 'Using only link tabs' %> |
+  <%= link_to 'ajax', { action: 'ajax'}, title: 'Using only ajax tabs' %> |
+  <%= link_to 'content blocks', { action: 'only_content_block'}, title: 'Also content with no tabs' %> |
+  <%= link_to 'mixed', { action: 'mixed'}, title: 'Using static, link and ajax tabs in the same widget' %> |
   <%= link_to 'mixed (erb)', { action: 'mixed_with_erb'}, title: 'Using static, link and ajax tabs in a ERB template' %>
 </div>