resources/src/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 /**
  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 ).on( '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 ) );