From: John Du Hart Date: Sun, 15 Jan 2012 06:07:24 +0000 (+0000) Subject: Adding jquery.arrowSteps to core, from UploadWizard X-Git-Tag: 1.31.0-rc.0~25260 X-Git-Url: https://git.cyclocoop.org/%242?a=commitdiff_plain;h=4537f5fe4efc2173ef6619b28236da692665b980;p=lhc%2Fweb%2Fwiklou.git Adding jquery.arrowSteps to core, from UploadWizard --- diff --git a/resources/Resources.php b/resources/Resources.php index 667d5ca6c8..5a81af7752 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -82,6 +82,10 @@ return array( 'jquery.appear' => array( 'scripts' => 'resources/jquery/jquery.appear.js', ), + 'jquery.arrowSteps' => array( + 'scripts' => 'resources/jquery/jquery.arrowSteps.js', + 'styles' => 'resources/jquery/jquery.arrowSteps.css', + ), 'jquery.async' => array( 'scripts' => 'resources/jquery/jquery.async.js', ), diff --git a/resources/jquery/images/jquery.arrowSteps.divider-ltr.png b/resources/jquery/images/jquery.arrowSteps.divider-ltr.png new file mode 100644 index 0000000000..0de1ae9cb9 Binary files /dev/null and b/resources/jquery/images/jquery.arrowSteps.divider-ltr.png differ diff --git a/resources/jquery/images/jquery.arrowSteps.divider-rtl.png b/resources/jquery/images/jquery.arrowSteps.divider-rtl.png new file mode 100644 index 0000000000..f3f065199c Binary files /dev/null and b/resources/jquery/images/jquery.arrowSteps.divider-rtl.png differ diff --git a/resources/jquery/images/jquery.arrowSteps.head-ltr.png b/resources/jquery/images/jquery.arrowSteps.head-ltr.png new file mode 100644 index 0000000000..dbcc71b9d4 Binary files /dev/null and b/resources/jquery/images/jquery.arrowSteps.head-ltr.png differ diff --git a/resources/jquery/images/jquery.arrowSteps.head-rtl.png b/resources/jquery/images/jquery.arrowSteps.head-rtl.png new file mode 100644 index 0000000000..760798bf7d Binary files /dev/null and b/resources/jquery/images/jquery.arrowSteps.head-rtl.png differ diff --git a/resources/jquery/images/jquery.arrowSteps.tail-ltr.png b/resources/jquery/images/jquery.arrowSteps.tail-ltr.png new file mode 100644 index 0000000000..61340fa8d8 Binary files /dev/null and b/resources/jquery/images/jquery.arrowSteps.tail-ltr.png differ diff --git a/resources/jquery/images/jquery.arrowSteps.tail-rtl.png b/resources/jquery/images/jquery.arrowSteps.tail-rtl.png new file mode 100644 index 0000000000..dd2d8e8a31 Binary files /dev/null and b/resources/jquery/images/jquery.arrowSteps.tail-rtl.png differ diff --git a/resources/jquery/jquery.arrowSteps.css b/resources/jquery/jquery.arrowSteps.css new file mode 100644 index 0000000000..f8f6e9515f --- /dev/null +++ b/resources/jquery/jquery.arrowSteps.css @@ -0,0 +1,45 @@ +.arrowSteps { + list-style-type: none; + list-style-image: none; + border: 1px solid #666666; + position: relative; +} + +.arrowSteps li { + float: left; + padding: 0px; + margin: 0px; + border: 0 none; +} + +.arrowSteps li div { + padding: 0.5em; + text-align: center; + white-space: nowrap; + overflow: hidden; +} + +.arrowSteps li.arrow div { + /* @embed */ + background: url(images/jquery.arrowSteps.divider-ltr.png) no-repeat right center; +} + +/* applied to the element preceding the highlighted step */ +.arrowSteps li.arrow.tail div { + /* @embed */ + background: url(images/jquery.arrowSteps.tail-ltr.png) no-repeat right center; +} + +/* this applies to all highlighted, including the last */ +.arrowSteps li.head div { + /* @embed */ + background: url(images/jquery.arrowSteps.head-ltr.png) no-repeat left center; + font-weight: bold; +} + +/* this applies to all highlighted arrows except the last */ +.arrowSteps li.arrow.head div { + /* TODO: eliminate duplication of jquery.arrowSteps.head.png embedding */ + /* @embed */ + background: url(images/jquery.arrowSteps.head-ltr.png) no-repeat right center; +} diff --git a/resources/jquery/jquery.arrowSteps.js b/resources/jquery/jquery.arrowSteps.js new file mode 100644 index 0000000000..f9637545dc --- /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 + * + * + * + * + * + */ + +( 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 );