summaryrefslogtreecommitdiff
path: root/resources/jquery/jquery.arrowSteps.js
diff options
context:
space:
mode:
Diffstat (limited to 'resources/jquery/jquery.arrowSteps.js')
-rw-r--r--resources/jquery/jquery.arrowSteps.js81
1 files changed, 81 insertions, 0 deletions
diff --git a/resources/jquery/jquery.arrowSteps.js b/resources/jquery/jquery.arrowSteps.js
new file mode 100644
index 00000000..f9637545
--- /dev/null
+++ b/resources/jquery/jquery.arrowSteps.js
@@ -0,0 +1,81 @@
+/**
+ * jQuery arrowSteps plugin
+ * Copyright Neil Kandalgaonkar, 2010
+ *
+ * This work is licensed under the terms of the GNU General Public License,
+ * version 2 or later.
+ * (see http://www.fsf.org/licensing/licenses/gpl.html).
+ * Derivative works and later versions of the code must be free software
+ * licensed under the same or a compatible license.
+ *
+ *
+ * DESCRIPTION
+ *
+ * Show users their progress through a series of steps, via a row of items that fit
+ * together like arrows. One item can be highlighted at a time.
+ *
+ *
+ * SYNOPSIS
+ *
+ * <ul id="robin-hood-daffy">
+ * <li id="guard"><div>Guard!</div></li>
+ * <li id="turn"><div>Turn!</div></li>
+ * <li id="parry"><div>Parry!</div></li>
+ * <li id="dodge"><div>Dodge!</div></li>
+ * <li id="spin"><div>Spin!</div></li>
+ * <li id="ha"><div>Ha!</div></li>
+ * <li id="thrust"><div>Thrust!</div></li>
+ * </ul>
+ *
+ * <script language="javascript"><!--
+ * $( '#robin-hood-daffy' ).arrowSteps();
+ *
+ * $( '#robin-hood-daffy' ).arrowStepsHighlight( '#guard' );
+ * // 'Guard!' is highlighted.
+ *
+ * // ... user completes the 'guard' step ...
+ *
+ * $( '#robin-hood-daffy' ).arrowStepsHighlight( '#turn' );
+ * // 'Turn!' is highlighted.
+ *
+ * //-->
+ * </script>
+ *
+ */
+
+( function( $j ) {
+ $j.fn.arrowSteps = function() {
+ this.addClass( 'arrowSteps' );
+ var $steps = this.find( 'li' );
+
+ var width = parseInt( 100 / $steps.length, 10 );
+ $steps.css( 'width', width + '%' );
+
+ // every step except the last one has an arrow at the right hand side. Also add in the padding
+ // for the calculated arrow width.
+ var arrowWidth = parseInt( this.outerHeight(), 10 );
+ $steps.filter( ':not(:last-child)' ).addClass( 'arrow' )
+ .find( 'div' ).css( 'padding-right', arrowWidth.toString() + 'px' );
+
+ this.data( 'arrowSteps', $steps );
+ return this;
+ };
+
+ $j.fn.arrowStepsHighlight = function( selector ) {
+ var $steps = this.data( 'arrowSteps' );
+ var $previous;
+ $j.each( $steps, function( i, step ) {
+ var $step = $j( step );
+ if ( $step.is( selector ) ) {
+ if ($previous) {
+ $previous.addClass( 'tail' );
+ }
+ $step.addClass( 'head' );
+ } else {
+ $step.removeClass( 'head tail lasthead' );
+ }
+ $previous = $step;
+ } );
+ };
+
+} )( jQuery );