1/** 2 * jquery.dropdown.js v1.0.0 3 * http://www.codrops.com 4 * 5 * Licensed under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7 * 8 * Copyright 2012, Codrops 9 * http://www.codrops.com 10 */ 11;( function( $, window, undefined ) { 12 'use strict'; 13 14 $.jaDropDown = function( options, element ) { 15 this.$el = $( element ); 16 this._init( options ); 17 }; 18 19 // the options 20 $.jaDropDown.defaults = { 21 speed : 300, 22 easing : 'ease', 23 gutter : 0, 24 // initial stack effect 25 stack : true, 26 // delay between each option animation 27 delay : 0, 28 // random angle and positions for the options 29 random : false, 30 // rotated [right||left||false] : the options will be rotated to thr right side or left side. 31 // make sure to tune the transform origin in the stylesheet 32 rotated : false, 33 // effect to slide in the options. value is the margin to start with 34 slidingIn : false, 35 onOptionSelect : function(opt) { return false; } 36 }; 37 38 $.jaDropDown.prototype = { 39 40 _init : function( options ) { 41 42 // options 43 this.options = $.extend( true, {}, $.jaDropDown.defaults, options ); 44 this._layout(); 45 this._initEvents(); 46 47 }, 48 _layout : function() { 49 50 var self = this; 51 this.minZIndex = 1000; 52 var value = this._transformSelect(); 53 this.opts = this.listopts.children( 'li' ); 54 this.optsCount = this.opts.length; 55 this.size = { width : this.cloneElm.width(), height : this.cloneElm.height() }; 56 57 var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ), 58 inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime(); 59 60 this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel ); 61 62 this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount ); 63 this._positionOpts(); 64 if( Modernizr.csstransitions ) { 65 setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 ); 66 } 67 68 }, 69 _transformSelect : function() { 70 71 var optshtml = '', selectlabel = '', value = -1; 72 this.$el.children( 'option' ).each( function() { 73 74 var $this = $( this ), 75 val = isNaN( $this.attr( 'value' ) ) ? $this.attr( 'value' ) : Number( $this.attr( 'value' ) ) , 76 classes = $this.attr( 'class' ), 77 selected = $this.attr( 'selected' ), 78 label = $this.text(); 79 80 if( val !== -1 ) { 81 optshtml += 82 classes !== undefined ? 83 '<li data-value="' + val + '"><span class="' + classes + '" title="' + (label.replace(/'/g, "\\'")) + '">' + label + '</span></li>' : 84 '<li data-value="' + val + '"><span title="' + (label.replace(/'/g, "\\'")) + '">' + label + '</span></li>'; 85 } 86 87 if( selected ) { 88 selectlabel = label; 89 value = val; 90 } 91 92 } ); 93 94 this.listopts = $( '<ul/>' ).append( optshtml ); 95 this.selectlabel = $( '<span/>' ).append( selectlabel ); 96 this.dd = $( '<div class="cd-dropdown"/>' ).append( this.selectlabel, this.listopts ).insertAfter( this.$el ); 97 98 this.cloneElm = $(this.dd.get(0).outerHTML); 99 this.cloneElm.css({ 100 position: 'fixed', 101 left: '-1000px' 102 }); 103 104 $('body').append(this.cloneElm); 105 106 this.$el.remove(); 107 108 return value; 109 110 }, 111 _positionOpts : function( anim ) { 112 113 var self = this; 114 115 this.listopts.css( 'height', 'auto' ); 116 this.opts 117 .each( function( i ) { 118 $( this ).css( { 119 zIndex : self.minZIndex + self.optsCount - 1 - i, 120 top : self.options.slidingIn ? ( i + 1 ) * ( self.size.height + self.options.gutter ) : 0, 121 left : 0, 122 marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0, 123 opacity : self.options.slidingIn ? 0 : 1, 124 transform : 'none' 125 } ); 126 } ); 127 128 if( !this.options.slidingIn ) { 129 this.opts 130 .eq( this.optsCount - 1 ) 131 .css( { top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' } ) 132 .end() 133 .eq( this.optsCount - 2 ) 134 .css( { top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' } ) 135 .end() 136 .eq( this.optsCount - 3 ) 137 .css( { top : this.options.stack ? 3 : 0, left : 0, transform : 'none' } ); 138 } 139 140 }, 141 _initEvents : function() { 142 143 var self = this; 144 145 this.selectlabel.on( 'mousedown.dropdown', function( event ) { 146 self.opened ? self.close() : self.open(); 147 return false;
148 149 } ); 150 151 this.opts.on( 'click.dropdown', function() { 152 if( self.opened ) { 153 var opt = $( this ); 154 self.options.onOptionSelect( opt ); 155 self.inputEl.val( opt.data( 'value' ) ); 156 self.selectlabel.html( opt.html() ); 157 self.close(); 158 } 159 } ); 160 161 }, 162 open : function() { 163 var self = this; 164 this.dd.toggleClass( 'cd-active' ); 165 this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) ); 166 this.opts.each( function( i ) { 167 168 $( this ).css( { 169 opacity : 1, 170 top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ), 171 left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0, 172 width : self.size.width, 173 marginLeft : 0, 174 transform : self.options.random ? 175 'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' : 176 self.options.rotated ? 177 self.options.rotated === 'right' ? 178 'rotate(-' + ( i * 5 ) + 'deg)' : 179 'rotate(' + ( i * 5 ) + 'deg)' 180 : 'none', 181 transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0 182 } ); 183 184 } ); 185 this.opened = true; 186 187 }, 188 close : function() { 189 190 var self = this; 191 this.dd.toggleClass( 'cd-active' ); 192 if( this.options.delay && Modernizr.csstransitions ) { 193 this.opts.each( function( i ) { 194 $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } ); 195 } ); 196 } 197 this._positionOpts( true ); 198 this.opened = false; 199 200 } 201 202 } 203 204 $.fn.jadropdown = function( options ) { 205 var instance = $.data( this, 'dropdown' ); 206 if ( typeof options === 'string' ) { 207 var args = Array.prototype.slice.call( arguments, 1 ); 208 this.each(function() { 209 instance[ options ].apply( instance, args ); 210 }); 211 } 212 else { 213 this.each(function() { 214 instance ? instance._init() : instance = $.data( this, 'dropdown', new $.jaDropDown( options, this ) ); 215 }); 216 } 217 return instance; 218 }; 219 220} )( jQuery, window );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.