1+ /**
2+ * jqMetro
3+ * JQUERY PLUGIN FOR METRO UI CONTROLS
4+ *
5+ * Copyright (c) 2011 Mohammad Valipour (http://manorey.net/mohblog)
6+ * Licensed under the MIT License:
7+ * http://www.opensource.org/licenses/mit-license.php
8+ *
9+ */
10+
11+ ; ( function ( $ ) {
12+ var defaults = {
13+ animationDuration : 150 ,
14+ headerOpacity : 0.5 ,
15+ fixedHeaders : false ,
16+ headerSelector : function ( item ) { return item . children ( "h3" ) . first ( ) ; } ,
17+ itemSelector : function ( item ) { return item . children ( ".pivot-item" ) ; } ,
18+ headerItemTemplate : function ( ) { return $ ( "<span class='header' />" ) ; } ,
19+ pivotItemTemplate : function ( ) { return $ ( "<div class='pivotItem' />" ) ; } ,
20+ itemsTemplate : function ( ) { return $ ( "<div class='items' />" ) ; } ,
21+ headersTemplate : function ( ) { return $ ( "<div class='headers' />" ) ; } ,
22+ controlInitialized : undefined ,
23+ selectedItemChanged : undefined
24+ } ;
25+
26+ $ . fn . metroPivot = function ( settings ) {
27+ if ( this . length > 1 )
28+ {
29+ return this . each ( function ( index , el ) { $ ( el ) . wp7Pivot ( settings ) ; } ) ;
30+ }
31+
32+ $ . extend ( this , defaults , settings ) ;
33+ $ . extend ( this , {
34+ animating : false ,
35+ headers : undefined ,
36+ items : undefined ,
37+ goToNext : function ( ) {
38+ if ( this . animating ) return ;
39+ this . headers . children ( ".current" ) . next ( ) . trigger ( "click" ) ;
40+ } ,
41+ goToPrevious : function ( ) {
42+ if ( this . animating ) return ;
43+ this . headers . children ( ".header" ) . last ( ) . trigger ( "click" ) ;
44+ } ,
45+ goToItemByName :function ( header ) {
46+ if ( this . animating ) return ;
47+ this . headers . children ( ":contains(" + header + ")" ) . first ( ) . trigger ( "click" ) ;
48+ } ,
49+ goToItemByIndex :function ( index ) {
50+ if ( this . animating ) return ;
51+ this . headers . children ( ) . eq ( index ) . trigger ( "click" ) ;
52+ } ,
53+ initialize : function ( ) {
54+ var pivot = this ;
55+ // define sections
56+
57+ var headers = pivot . headersTemplate ( ) ;
58+ var items = pivot . itemsTemplate ( ) ;
59+
60+ pivot . itemSelector ( pivot ) . each ( function ( index , el ) {
61+ el = $ ( el ) ;
62+
63+ var h3Element = pivot . headerSelector ( el ) ;
64+ if ( h3Element . length == 0 ) return ;
65+
66+ var headerItem = pivot . headerItemTemplate ( ) . html ( h3Element . html ( ) ) . fadeTo ( 0 , pivot . headerOpacity ) ;
67+ var pivotItem = pivot . pivotItemTemplate ( ) . append ( el ) . hide ( ) ;
68+
69+ if ( index == 0 ) {
70+ headerItem . addClass ( "current" ) . fadeTo ( 0 , 1 ) ;
71+ pivotItem . addClass ( "current" ) . show ( ) ;
72+ }
73+ headerItem . attr ( "index" , index ) ;
74+ headerItem . click ( function ( ) { pivot . pivotHeader_Click ( $ ( this ) ) ; } ) ;
75+
76+ headers . append ( headerItem ) ;
77+ items . append ( pivotItem ) ;
78+
79+ h3Element . remove ( ) ;
80+ } ) ;
81+
82+ pivot . append ( headers ) . append ( items ) ;
83+ pivot . headers = headers ;
84+ pivot . items = items ;
85+
86+ this . data ( "controller" , pivot ) ;
87+
88+ if ( this . controlInitialized != undefined )
89+ {
90+ this . controlInitialized ( ) ;
91+ }
92+ } ,
93+ setCurrentHeader : function ( header ) {
94+ var pivot = this ;
95+
96+ // make current header a normal one
97+ this . headers . children ( ".header.current" ) . removeClass ( "current" ) . fadeTo ( 0 , this . headerOpacity ) ;
98+
99+ // make selected header to current
100+ header . addClass ( "current" ) . fadeTo ( 0 , 1 ) ;
101+
102+ if ( pivot . fixedHeaders == false )
103+ {
104+ // create a copy for fadeout navigation
105+ var copy = header . prevAll ( ) . clone ( ) ;
106+ // detach items to move to end of headers
107+ var detached = $ ( header . prevAll ( ) . detach ( ) . toArray ( ) . reverse ( ) ) ;
108+
109+ // copy animation items to beginning and animate them
110+ $ ( "<span />" ) . append ( copy ) . prependTo ( pivot . headers ) . animate ( { width : 0 , opacity : 0 } , pivot . animationDuration , function ( ) {
111+ // when finished: delete animation objects
112+ $ ( this ) . remove ( ) ;
113+
114+ // and attach detached items to the end of headers
115+ detached . fadeTo ( 0 , 0 ) . appendTo ( pivot . headers ) . fadeTo ( 200 , pivot . headerOpacity ) ;
116+ } ) ;
117+ }
118+ } ,
119+ setCurrentItem : function ( item , index ) {
120+ var pivot = this ;
121+
122+ // hide current item immediately
123+ pivot . items . children ( ".pivotItem.current" ) . hide ( ) . removeClass ( "current" ) ;
124+
125+ // after a little delay
126+ setTimeout ( function ( ) {
127+ // move the item to far right and make it visible
128+ item . css ( { marginLeft : item . outerWidth ( ) } ) . show ( ) . addClass ( "current" ) ;
129+
130+ // animate it to left
131+ item . animate ( { marginLeft : 0 } , pivot . animationDuration , function ( ) { pivot . currentItemChanged ( index ) ; } ) ;
132+
133+ } , 200 ) ;
134+ } ,
135+ currentItemChanged : function ( index ) {
136+ this . animating = false ;
137+ if ( this . selectedItemChanged != undefined )
138+ {
139+ this . selectedItemChanged ( index ) ;
140+ }
141+ } ,
142+ pivotHeader_Click : function ( me ) {
143+ // ignore if already current
144+ if ( me . is ( ".current" ) ) return ;
145+
146+ // ignore if still animating
147+ if ( this . animating ) return ;
148+ this . animating = true ;
149+
150+ // set current header
151+ this . setCurrentHeader ( me ) ;
152+
153+ var index = me . attr ( "index" ) ;
154+ // find and set current item
155+ var item = this . items . children ( ".pivotItem:nth(" + index + ")" ) ;
156+ this . setCurrentItem ( item , index ) ;
157+ } ,
158+ } ) ;
159+
160+ return this . initialize ( ) ;
161+ } ;
162+ } ) ( jQuery ) ;
0 commit comments