bettertabs 1.0

data/lib/bettertabs/bettertabs_helper.rb

@@ -0,0 +1,16 @@
+module BettertabsHelper
+
+  # Bettertabs helper
+  # Defines the bettertabs markup in the view.
+  def bettertabs(bettertabs_id, options={})
+    bettertabs_id = bettertabs_id.to_s
+    selected_tab_id = params[:"#{bettertabs_id}_selected_tab"] || options.delete(:selected_tab)
+    options[:class] = "bettertabs #{options[:class]}" # keep 'bettertabs' class even when the user adds more classes.
+    options[:id] ||= bettertabs_id
+    options[:render_only_active_content] = true if controller.request.xhr?
+    builder = BettertabsBuilder.new(bettertabs_id, self, selected_tab_id, options)
+    yield(builder)
+    builder.render
+  end
+  
+end

data/lib/bettertabs/javascripts/README.md

@@ -0,0 +1,38 @@
+Bettertabs Javascript Development
+=================================
+
+Bettertabs rails helper depends on the jquery.bettertabs plugin to work properly with javascript.
+
+
+## CoffeeScript ##
+
+The jquery.bettertabs plugin is written using CoffeeScript.
+How to install CoffeeScript: http://jashkenas.github.com/coffee-script/#installation
+
+To install, first make sure you have a working copy of the latest stable version of Node.js, and npm (the Node Package Manager).
+You can then install CoffeeScript with npm:
+
+    npm install coffee-script
+    
+
+Then you will be able to compile `jquery.bettertabs.coffee` into `jquery.bettertabs.js` using the coffee command:
+
+    coffee --watch --compile jquery.bettertabs.coffee
+    
+With this, each time you save the `jquery.bettertabs.coffee` file, `jquery.bettertabs.js` will be automatically updated.
+
+
+## JavaScript Compressor ##
+
+Before make a new release of the `jquery.bettertabs.js`, we have to be sure that an equivalent minified script is available.
+
+You can use for example the [YUI compressor](http://developer.yahoo.com/yui/compressor/), the [Google Cosure Compiler](http://code.google.com/closure/compiler/) or [JSMin](http://crockford.com/javascript/jsmin) among others..
+
+I used a simple solution of copy-paste the `jquery.bettertabs.js` in an online tool and then copy-paste again in the `jquery.bettertabs.min.js` file.
+
+Online compressors:
+
+  * http://refresh-sf.com/yui/
+  * http://yui.2clics.net/
+  * http://closure-compiler.appspot.com/home
+  * http://compressorrater.thruhere.net/

data/lib/bettertabs/javascripts/jquery.bettertabs.coffee

@@ -0,0 +1,77 @@
+###
+Bettertabs jQuery plugin v1.0
+
+jQuery(selector).bettertabs(); adds javascript to change content when click on tabs.
+
+Markup needed, the same that is generated by the rails bettertabs helper, added by the bettertabs plugin
+    https://github.com/agoragames/bettertabs
+
+Events: Each time a tab is selected, some events are fired, so you can easily activate
+behavior from another jquery script (using .bind); The available events are:
+    'bettertabs-before-deactivate':   fired on content that is active and will be deactivated
+    'bettertabs-before-activate':     fired on content that will be activated
+    'bettertabs-before-ajax-loading': fired on content that will be activated and needs ajax loading
+    'bettertabs-after-deactivate':    fired on content that was deactivated
+    'bettertabs-after-activate':      fired on content that was activated
+    'bettertabs-after-ajax-loading':  fired on content after it was loaded via ajax
+
+###
+
+$ = jQuery
+
+tab_type_attr = 'data-tab-type' # attribute on tab links that indicate the tab type
+show_content_id_attr = 'data-show-content-id' # attribute on tab links that indicate the related content id
+tab_type_of = ($tab_link) -> $tab_link.attr(tab_type_attr)
+content_id_from = ($tab_link) -> $tab_link.attr(show_content_id_attr)
+
+change_url = ($link) ->
+  # Use replaceState for HTML5 browsers, and just ignore for old browsers (no change url support).
+  # This will work on last modern browsers, but I could not find a neasy way to listen the popstate event,
+  # so better not to use pushState (because we can't safely revert to previous state), replaceState just works fine.
+  if history? and history.replaceState?
+    url = $link.attr 'href'
+    history.replaceState null, document.title, url
+
+$.fn.bettertabs = ->
+  @each ->
+    mytabs = $(this)
+    tabs = mytabs.find 'ul.tabs > li'
+    tabs_links = mytabs.find 'ul.tabs > li > a'
+    tabs_contents = mytabs.children '.content'
+    tabs_and_contents = tabs.add tabs_contents
+    
+    tabs_links.click (event) ->
+      this_link = $(this)
+      if tab_type_of(this_link) isnt 'link'
+        event.preventDefault()
+        this_tab = this_link.parent()
+        if not this_tab.is('.active') and not this_link.is('.ajax-loading')
+          this_tab_content = tabs_contents.filter "##{content_id_from this_link}"
+          previous_active_tab = tabs.filter '.active'
+          previous_active_tab_content = tabs_contents.filter '.active'
+          activate_tab_and_content = ->
+            tabs_and_contents.removeClass('active').addClass('hidden')
+            this_tab.removeClass('hidden').addClass('active')
+            this_tab_content.removeClass('hidden').addClass('active')
+            previous_active_tab_content.trigger 'bettertabs-after-deactivate'
+            this_tab_content.trigger 'bettertabs-after-activate'
+            change_url this_link
+          
+          previous_active_tab_content.trigger 'bettertabs-before-deactivate'
+          this_tab_content.trigger 'bettertabs-before-activate'
+          
+          if tab_type_of(this_link) is 'ajax' and not this_link.data('content-loaded-already')?
+            this_link.addClass('ajax-loading')
+            this_tab_content.trigger 'bettertabs-before-ajax-loading'
+            this_tab_content.load this_link.attr('href'), ->
+              this_link.removeClass('ajax-loading')
+              this_link.data('content-loaded-already', yes)
+              this_tab_content.trigger 'bettertabs-after-ajax-loading'
+              activate_tab_and_content()
+          else
+            activate_tab_and_content()
+
+
+
+
+

data/lib/bettertabs/javascripts/jquery.bettertabs.js

@@ -0,0 +1,81 @@
+(function() {
+  /*
+  Bettertabs jQuery plugin v1.0
+
+  jQuery(selector).bettertabs(); adds javascript to change content when click on tabs.
+
+  Markup needed, the same that is generated by the rails bettertabs helper, added by the bettertabs plugin
+      https://github.com/agoragames/bettertabs
+
+  Events: Each time a tab is selected, some events are fired, so you can easily activate
+  behavior from another jquery script (using .bind); The available events are:
+      'bettertabs-before-deactivate':   fired on content that is active and will be deactivated
+      'bettertabs-before-activate':     fired on content that will be activated
+      'bettertabs-before-ajax-loading': fired on content that will be activated and needs ajax loading
+      'bettertabs-after-deactivate':    fired on content that was deactivated
+      'bettertabs-after-activate':      fired on content that was activated
+      'bettertabs-after-ajax-loading':  fired on content after it was loaded via ajax
+
+  */  var $, change_url, content_id_from, show_content_id_attr, tab_type_attr, tab_type_of;
+  $ = jQuery;
+  tab_type_attr = 'data-tab-type';
+  show_content_id_attr = 'data-show-content-id';
+  tab_type_of = function($tab_link) {
+    return $tab_link.attr(tab_type_attr);
+  };
+  content_id_from = function($tab_link) {
+    return $tab_link.attr(show_content_id_attr);
+  };
+  change_url = function($link) {
+    var url;
+    if ((typeof history != "undefined" && history !== null) && (history.replaceState != null)) {
+      url = $link.attr('href');
+      return history.replaceState(null, document.title, url);
+    }
+  };
+  $.fn.bettertabs = function() {
+    return this.each(function() {
+      var mytabs, tabs, tabs_and_contents, tabs_contents, tabs_links;
+      mytabs = $(this);
+      tabs = mytabs.find('ul.tabs > li');
+      tabs_links = mytabs.find('ul.tabs > li > a');
+      tabs_contents = mytabs.children('.content');
+      tabs_and_contents = tabs.add(tabs_contents);
+      return tabs_links.click(function(event) {
+        var activate_tab_and_content, previous_active_tab, previous_active_tab_content, this_link, this_tab, this_tab_content;
+        this_link = $(this);
+        if (tab_type_of(this_link) !== 'link') {
+          event.preventDefault();
+          this_tab = this_link.parent();
+          if (!this_tab.is('.active') && !this_link.is('.ajax-loading')) {
+            this_tab_content = tabs_contents.filter("#" + (content_id_from(this_link)));
+            previous_active_tab = tabs.filter('.active');
+            previous_active_tab_content = tabs_contents.filter('.active');
+            activate_tab_and_content = function() {
+              tabs_and_contents.removeClass('active').addClass('hidden');
+              this_tab.removeClass('hidden').addClass('active');
+              this_tab_content.removeClass('hidden').addClass('active');
+              previous_active_tab_content.trigger('bettertabs-after-deactivate');
+              this_tab_content.trigger('bettertabs-after-activate');
+              return change_url(this_link);
+            };
+            previous_active_tab_content.trigger('bettertabs-before-deactivate');
+            this_tab_content.trigger('bettertabs-before-activate');
+            if (tab_type_of(this_link) === 'ajax' && !(this_link.data('content-loaded-already') != null)) {
+              this_link.addClass('ajax-loading');
+              this_tab_content.trigger('bettertabs-before-ajax-loading');
+              return this_tab_content.load(this_link.attr('href'), function() {
+                this_link.removeClass('ajax-loading');
+                this_link.data('content-loaded-already', true);
+                this_tab_content.trigger('bettertabs-after-ajax-loading');
+                return activate_tab_and_content();
+              });
+            } else {
+              return activate_tab_and_content();
+            }
+          }
+        }
+      });
+    });
+  };
+}).call(this);

data/lib/bettertabs/javascripts/jquery.bettertabs.min.js

@@ -0,0 +1,4 @@
+/**
+ * Bettertabs jQuery plugin v1.0
+ */
+(function(){var e,b,d,c,a,f;e=jQuery;a="data-tab-type";c="data-show-content-id";f=function(g){return g.attr(a)};d=function(g){return g.attr(c)};b=function(g){var h;if((typeof history!="undefined"&&history!==null)&&(history.replaceState!=null)){h=g.attr("href");return history.replaceState(null,document.title,h)}};e.fn.bettertabs=function(){return this.each(function(){var k,h,j,g,i;k=e(this);h=k.find("ul.tabs > li");i=k.find("ul.tabs > li > a");g=k.children(".content");j=h.add(g);return i.click(function(o){var q,r,n,m,p,l;m=e(this);if(f(m)!=="link"){o.preventDefault();p=m.parent();if(!p.is(".active")&&!m.is(".ajax-loading")){l=g.filter("#"+(d(m)));r=h.filter(".active");n=g.filter(".active");q=function(){j.removeClass("active").addClass("hidden");p.removeClass("hidden").addClass("active");l.removeClass("hidden").addClass("active");n.trigger("bettertabs-after-deactivate");l.trigger("bettertabs-after-activate");return b(m)};n.trigger("bettertabs-before-deactivate");l.trigger("bettertabs-before-activate");if(f(m)==="ajax"&&!(m.data("content-loaded-already")!=null)){m.addClass("ajax-loading");l.trigger("bettertabs-before-ajax-loading");return l.load(m.attr("href"),function(){m.removeClass("ajax-loading");m.data("content-loaded-already",true);l.trigger("bettertabs-after-ajax-loading");return q()})}else{return q()}}}})})}}).call(this);

data/lib/bettertabs/version.rb

@@ -0,0 +1,3 @@
+module Bettertabs
+  VERSION = "1.0"
+end

data/test/README_for_TEST.txt

@@ -0,0 +1,5 @@
+For test bettertabs in a full stack mode, we will have one simple rails app for each environment.
+Inside the Rails app, we will be able to test a request (including javascript behavior) thanks to Capybara and Rspec.
+
+Check this RailsCast to better understand how to test with Rspec and Capybara:
+http://asciicasts.com/episodes/257-request-specs-and-capybara

data/test/ruby_1_9/rails_3_0/.rspec

@@ -0,0 +1 @@
+--colour

data/test/ruby_1_9/rails_3_0/.rvmc

@@ -0,0 +1 @@
+rvm 1.9.2

data/test/ruby_1_9/rails_3_0/Gemfile

@@ -0,0 +1,11 @@
+source 'http://rubygems.org'
+
+gem 'rails', '3.0.6'
+gem 'haml', '>=3.0.18'
+gem 'rspec-rails'
+
+gem 'bettertabs'
+
+# To use debugger (ruby-debug for Ruby 1.8.7+, ruby-debug19 for Ruby 1.9.2+)
+# gem 'ruby-debug'
+gem 'ruby-debug19', :require => 'ruby-debug'

data/test/ruby_1_9/rails_3_0/Gemfile.lock

@@ -0,0 +1,105 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    abstract (1.0.0)
+    actionmailer (3.0.6)
+      actionpack (= 3.0.6)
+      mail (~> 2.2.15)
+    actionpack (3.0.6)
+      activemodel (= 3.0.6)
+      activesupport (= 3.0.6)
+      builder (~> 2.1.2)
+      erubis (~> 2.6.6)
+      i18n (~> 0.5.0)
+      rack (~> 1.2.1)
+      rack-mount (~> 0.6.14)
+      rack-test (~> 0.5.7)
+      tzinfo (~> 0.3.23)
+    activemodel (3.0.6)
+      activesupport (= 3.0.6)
+      builder (~> 2.1.2)
+      i18n (~> 0.5.0)
+    activerecord (3.0.6)
+      activemodel (= 3.0.6)
+      activesupport (= 3.0.6)
+      arel (~> 2.0.2)
+      tzinfo (~> 0.3.23)
+    activeresource (3.0.6)
+      activemodel (= 3.0.6)
+      activesupport (= 3.0.6)
+    activesupport (3.0.6)
+    archive-tar-minitar (0.5.2)
+    arel (2.0.9)
+    bettertabs (0.0.1)
+    builder (2.1.2)
+    columnize (0.3.2)
+    diff-lcs (1.1.2)
+    erubis (2.6.6)
+      abstract (>= 1.0.0)
+    haml (3.0.25)
+    i18n (0.5.0)
+    linecache19 (0.5.12)
+      ruby_core_source (>= 0.1.4)
+    mail (2.2.15)
+      activesupport (>= 2.3.6)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.16)
+    polyglot (0.3.1)
+    rack (1.2.2)
+    rack-mount (0.6.14)
+      rack (>= 1.0.0)
+    rack-test (0.5.7)
+      rack (>= 1.0)
+    rails (3.0.6)
+      actionmailer (= 3.0.6)
+      actionpack (= 3.0.6)
+      activerecord (= 3.0.6)
+      activeresource (= 3.0.6)
+      activesupport (= 3.0.6)
+      bundler (~> 1.0)
+      railties (= 3.0.6)
+    railties (3.0.6)
+      actionpack (= 3.0.6)
+      activesupport (= 3.0.6)
+      rake (>= 0.8.7)
+      thor (~> 0.14.4)
+    rake (0.8.7)
+    rspec (2.5.0)
+      rspec-core (~> 2.5.0)
+      rspec-expectations (~> 2.5.0)
+      rspec-mocks (~> 2.5.0)
+    rspec-core (2.5.1)
+    rspec-expectations (2.5.0)
+      diff-lcs (~> 1.1.2)
+    rspec-mocks (2.5.0)
+    rspec-rails (2.5.0)
+      actionpack (~> 3.0)
+      activesupport (~> 3.0)
+      railties (~> 3.0)
+      rspec (~> 2.5.0)
+    ruby-debug-base19 (0.11.25)
+      columnize (>= 0.3.1)
+      linecache19 (>= 0.5.11)
+      ruby_core_source (>= 0.1.4)
+    ruby-debug19 (0.11.6)
+      columnize (>= 0.3.1)
+      linecache19 (>= 0.5.11)
+      ruby-debug-base19 (>= 0.11.19)
+    ruby_core_source (0.1.5)
+      archive-tar-minitar (>= 0.5.2)
+    thor (0.14.6)
+    treetop (1.4.9)
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.26)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bettertabs
+  haml (>= 3.0.18)
+  rails (= 3.0.6)
+  rspec-rails
+  ruby-debug19

data/test/ruby_1_9/rails_3_0/README

@@ -0,0 +1,3 @@
+This Rails APP will serve as scenario to test the bettertabs gem in a ruby1.9/Rails3.0.X environment.
+Go to the rails app root path (bettertabs/test/ruby_1_9/rails_3_0) and run:
+  $ rake spec:requests

data/test/ruby_1_9/rails_3_0/Rakefile

@@ -0,0 +1,7 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+require 'rake'
+
+Rails30::Application.load_tasks

data/test/ruby_1_9/rails_3_0/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery
+end

data/test/ruby_1_9/rails_3_0/app/controllers/bettertabs_controller.rb

@@ -0,0 +1,24 @@
+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 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

data/test/ruby_1_9/rails_3_0/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/_ajax.html.haml

@@ -0,0 +1,6 @@
+= bettertabs :ajax do |tab|
+  = tab.ajax :ajax_tab_1 do
+    Content for the link tab
+  = tab.ajax :ajax_tab_2 do
+    Content for the static tab
+  = tab.ajax :ajax_tab_3, partial: 'tab_content'

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/_link.html.haml

@@ -0,0 +1,4 @@
+= bettertabs :link, class: 'link_class', selected_tab: selected_tab do |tab|
+  = tab.link :tab1, 'Tab One', url: { action: 'link_tab_1' } do
+    Hello World!
+  = tab.link :tab2, 'Tab Two', partial: 'tab_content', url: { action: 'link_tab_2' }

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/_mixed.html.haml

@@ -0,0 +1,6 @@
+= bettertabs :mixed do |tab|
+  = tab.link :link_tab do
+    Content for the link tab
+  = tab.static :static_tab do
+    Content for the static tab
+  = tab.ajax :ajax_tab, partial: 'tab_content'

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/_tab_content.html.haml

@@ -0,0 +1 @@
+tab_content partial content.

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/ajax.html.haml

@@ -0,0 +1,2 @@
+%h2 Testing ajax tabs
+= render 'ajax'

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/link_tab_1.html.haml

@@ -0,0 +1,2 @@
+%h2 Test with linked tabs, for tab1
+= render 'link', selected_tab: 'tab1'

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/link_tab_2.html.haml

@@ -0,0 +1,2 @@
+%h2 Test with linked tabs, for tab2
+= render 'link', selected_tab: 'tab2'

data/test/ruby_1_9/rails_3_0/app/views/bettertabs/mixed.html.haml

@@ -0,0 +1,2 @@
+%h2 This is 4x4 bettertabs
+= render 'mixed'