Redoing r108960 with history
authorSam Reed <reedy@users.mediawiki.org>
Mon, 23 Jan 2012 17:02:51 +0000 (17:02 +0000)
committerSam Reed <reedy@users.mediawiki.org>
Mon, 23 Jan 2012 17:02:51 +0000 (17:02 +0000)
If it was a 3rd party library, there probably wouldn't have been any use doing this

resources/Resources.php
resources/jquery/images/jquery.arrowSteps.divider-ltr.png [new file with mode: 0644]
resources/jquery/images/jquery.arrowSteps.divider-rtl.png [new file with mode: 0644]
resources/jquery/images/jquery.arrowSteps.head-ltr.png [new file with mode: 0644]
resources/jquery/images/jquery.arrowSteps.head-rtl.png [new file with mode: 0644]
resources/jquery/images/jquery.arrowSteps.tail-ltr.png [new file with mode: 0644]
resources/jquery/images/jquery.arrowSteps.tail-rtl.png [new file with mode: 0644]
resources/jquery/jquery.arrowSteps.css [new file with mode: 0644]
resources/jquery/jquery.arrowSteps.js [new file with mode: 0644]

index 30a8c46..1830ba9 100644 (file)
@@ -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 (file)
index 0000000..0de1ae9
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 (file)
index 0000000..f3f0651
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 (file)
index 0000000..dbcc71b
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 (file)
index 0000000..760798b
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 (file)
index 0000000..61340fa
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 (file)
index 0000000..dd2d8e8
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 (file)
index 0000000..6046103
--- /dev/null
@@ -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;
+}
\ No newline at end of file
diff --git a/resources/jquery/jquery.arrowSteps.js b/resources/jquery/jquery.arrowSteps.js
new file mode 100644 (file)
index 0000000..f963754
--- /dev/null
@@ -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 );