[Summary view] [Print] [Text view]

   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  /**
  13   * @class jQuery.plugin.arrowSteps
  14   */
  15  ( function ( $ ) {
  16      /**
  17       * Show users their progress through a series of steps, via a row of items that fit
  18       * together like arrows. One item can be highlighted at a time.
  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>
  31       *       $( '#robin-hood-daffy' ).arrowSteps();
  32       *     </script>
  33       *
  34       * @return {jQuery}
  35       * @chainable
  36       */
  37      $.fn.arrowSteps = function () {
  38          var $steps, width, arrowWidth, $stepDiv,
  39              $el = this,
  40              paddingSide = $( 'body' ).hasClass( 'rtl' ) ? 'padding-left' : 'padding-right';
  41  
  42          $el.addClass( 'arrowSteps' );
  43          $steps = $el.find( 'li' );
  44  
  45          width = parseInt( 100 / $steps.length, 10 );
  46          $steps.css( 'width', width + '%' );
  47  
  48          // Every step except the last one has an arrow pointing forward:
  49          // at the right hand side in LTR languages, and at the left hand side in RTL.
  50          // Also add in the padding for the calculated arrow width.
  51          $stepDiv = $steps.filter( ':not(:last-child)' ).addClass( 'arrow' ).find( 'div' );
  52  
  53          // Execute when complete page is fully loaded, including all frames, objects and images
  54          $( window ).load( function () {
  55              arrowWidth = parseInt( $el.outerHeight(), 10 );
  56              $stepDiv.css( paddingSide, arrowWidth.toString() + 'px' );
  57          } );
  58  
  59          $el.data( 'arrowSteps', $steps );
  60  
  61          return this;
  62      };
  63  
  64      /**
  65       * Highlights the element selected by the selector.
  66       *
  67       *       $( '#robin-hood-daffy' ).arrowStepsHighlight( '#guard' );
  68       *       // 'Guard!' is highlighted.
  69       *
  70       *       // ... user completes the 'guard' step ...
  71       *
  72       *       $( '#robin-hood-daffy' ).arrowStepsHighlight( '#turn' );
  73       *       // 'Turn!' is highlighted.
  74       *
  75       * @param {string} selector
  76       */
  77      $.fn.arrowStepsHighlight = function ( selector ) {
  78          var $previous,
  79              $steps = this.data( 'arrowSteps' );
  80          $.each( $steps, function ( i, step ) {
  81              var $step = $( step );
  82              if ( $step.is( selector ) ) {
  83                  if ($previous) {
  84                      $previous.addClass( 'tail' );
  85                  }
  86                  $step.addClass( 'head' );
  87              } else {
  88                  $step.removeClass( 'head tail lasthead' );
  89              }
  90              $previous = $step;
  91          } );
  92      };
  93  
  94      /**
  95       * @class jQuery
  96       * @mixins jQuery.plugin.arrowSteps
  97       */
  98  }( jQuery ) );