resources/jquery/jquery.arrowSteps.js

   1 /**
   2  * jQuery arrowSteps plugin
   3  * Copyright Neil Kandalgaonkar, 2010
   4  *
   5  * This work is licensed under the terms of the GNU General Public License,
   6  * version 2 or later.
   7  * (see http://www.fsf.org/licensing/licenses/gpl.html).
   8  * Derivative works and later versions of the code must be free software
   9  * licensed under the same or a compatible license.
  10  *
  11  *
  12  * DESCRIPTION
  13  *
  14  * Show users their progress through a series of steps, via a row of items that fit
  15  * together like arrows. One item can be highlighted at a time.
  16  *
  17  *
  18  * SYNOPSIS
  19  *
  20  * <ul id="robin-hood-daffy">
  21  *   <li id="guard"><div>Guard!</div></li>
  22  *   <li id="turn"><div>Turn!</div></li>
  23  *   <li id="parry"><div>Parry!</div></li>
  24  *   <li id="dodge"><div>Dodge!</div></li>
  25  *   <li id="spin"><div>Spin!</div></li>
  26  *   <li id="ha"><div>Ha!</div></li>
  27  *   <li id="thrust"><div>Thrust!</div></li>
  28  * </ul>
  29  *
  30  * <script language="javascript"><!--
  31  *   $( '#robin-hood-daffy' ).arrowSteps();
  32  *
  33  *   $( '#robin-hood-daffy' ).arrowStepsHighlight( '#guard' );
  34  *   // 'Guard!' is highlighted.
  35  *
  36  *   // ... user completes the 'guard' step ...
  37  *
  38  *   $( '#robin-hood-daffy' ).arrowStepsHighlight( '#turn' );
  39  *   // 'Turn!' is highlighted.
  40  *
  41  *   //-->
  42  * </script>
  43  *
  44  */
  45
  46 ( function( $j ) {
  47         $j.fn.arrowSteps = function() {
  48                 this.addClass( 'arrowSteps' );
  49                 var $steps = this.find( 'li' );
  50
  51                 var width = parseInt( 100 / $steps.length, 10 );
  52                 $steps.css( 'width', width + '%' );
  53
  54                 // every step except the last one has an arrow at the right hand side. Also add in the padding
  55                 // for the calculated arrow width.
  56                 var arrowWidth = parseInt( this.outerHeight(), 10 );
  57                 $steps.filter( ':not(:last-child)' ).addClass( 'arrow' )
  58                       .find( 'div' ).css( 'padding-right', arrowWidth.toString() + 'px' );
  59
  60                 this.data( 'arrowSteps', $steps );
  61                 return this;
  62         };
  63
  64         $j.fn.arrowStepsHighlight = function( selector ) {
  65                 var $steps = this.data( 'arrowSteps' );
  66                 var $previous;
  67                 $j.each( $steps, function( i, step ) {
  68                         var $step = $j( step );
  69                         if ( $step.is( selector ) ) {
  70                                 if ($previous) {
  71                                         $previous.addClass( 'tail' );
  72                                 }
  73                                 $step.addClass( 'head' );
  74                         } else {
  75                                 $step.removeClass( 'head tail lasthead' );
  76                         }
  77                         $previous = $step;
  78                 } );
  79         };
  80
  81 } )( jQuery );