1/** 2 * Arctext.js 3 * A jQuery plugin for curved text 4 * http://www.codrops.com 5 * 6 * Copyright 2011, Pedro Botelho / Codrops 7 * Free to use under the MIT license. 8 * 9 * Date: Mon Jan 23 2012 10 */ 11 12(function( $, undefined ) { 13 14 /*! 15 * FitText.js 1.2 16 * 17 * Copyright 2011, Dave Rupert http://daverupert.com 18 * Released under the WTFPL license 19 * http://sam.zoy.org/wtfpl/ 20 * 21 * Date: Thu May 05 14:23:00 2011 -0600 22 */ 23 $.fn.fitText = function( kompressor, options ) { 24 25 // Setup options 26 var compressor = kompressor || 1, 27 settings = $.extend({ 28 'minFontSize' : Number.NEGATIVE_INFINITY, 29 'maxFontSize' : Number.POSITIVE_INFINITY 30 }, options); 31 32 return this.each(function(){ 33 34 // Store the object 35 var $this = $(this); 36 37 // Resizer() resizes items based on the object width divided by the compressor * 10 38 var resizer = function () { 39 $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 40 }; 41 42 // Call once to set. 43 resizer(); 44 45 // Call on resize. Opera debounces their resize by default. 46 $(window).on('resize.fittext orientationchange.fittext', resizer); 47 48 }); 49 50 }; 51 52 /* 53 * Lettering plugin 54 * 55 * changed injector function: 56 * add for empty chars. 57 */ 58 function injector(t, splitter, klass, after) { 59 var a = t.text().split(splitter), inject = '', emptyclass; 60 if (a.length) { 61 $(a).each(function(i, item) { 62 emptyclass = ''; 63 if(item === ' ') { 64 emptyclass = ' empty'; 65 item=' '; 66 } 67 inject += '<span class="'+klass+(i+1)+emptyclass+'">'+item+'</span>'+after; 68 }); 69 t.empty().append(inject); 70 } 71 } 72 73 var methods = { 74 init : function() { 75 76 return this.each(function() { 77 injector($(this), '', 'char', ''); 78 }); 79 80 }, 81 82 words : function() { 83 84 return this.each(function() { 85 injector($(this), ' ', 'word', ' '); 86 }); 87 88 }, 89 90 lines : function() { 91 92 return this.each(function() { 93 var r = "eefec303079ad17405c889e092e105b0"; 94 // Because it's hard to split a <br/> tag consistently across browsers, 95 // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 96 // (of the word "split"). If you're trying to use this plugin on that 97 // md5 hash string, it will fail because you're being ridiculous. 98 injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); 99 }); 100 101 } 102 }; 103 104 $.fn.lettering = function( method ) { 105 // Method calling logic 106 if ( method && methods[method] ) { 107 return methods[ method ].apply( this, [].slice.call( arguments, 1 )); 108 } else if ( method === 'letters' || ! method ) { 109 return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array 110 } 111 $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); 112 return this; 113 }; 114 115 /* 116 * Arctext object. 117 */ 118 $.Arctext = function( options, element ) { 119 120 this.$el = $( element ); 121 this._init( options ); 122 123 }; 124 125 $.Arctext.defaults = { 126 radius : 0, // the minimum value allowed is half of the word length. if set to -1, the word will be straight. 127 dir : 1, // 1: curve is down, -1: curve is up. 128 rotate : true, // if true each letter will be rotated. 129 fitText : false // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget the wrapper should be fluid. 130 }; 131 132 $.Arctext.prototype = { 133 _init : function( options ) { 134 135 this.options = $.extend( true, {}, $.Arctext.defaults, options ); 136 137 // apply the lettering plugin. 138 this._applyLettering(); 139 140 this.$el.data( 'arctext', true ); 141 142 // calculate values 143 this._calc(); 144 145 // apply transformation. 146 this._rotateWord(); 147 148 // load the events 149 this._loadEvents(); 150 151 }, 152 _applyLettering : function() { 153 154 this.$el.lettering(); 155 156 if( this.options.fitText ) 157 this.$el.fitText(1.3); 158 159 this.$letters = this.$el.find('span').css('display', 'inline-block'); 160 161 }, 162 _calc : function() { 163 164 if( this.options.radius === -1 ) 165 return false; 166 167 // calculate word / arc sizes & distances. 168 this._calcBase(); 169 170 // get final values for each letter. 171 this._calcLetters(); 172 173 }, 174 _calcBase : function() { 175 176 // total word width (sum of letters widths) 177 this.dtWord = 0; 178 179 var _self = this; 180 181 this.$letters.each( function(i) { 182 183 var $letter = $(this), 184 letterWidth = $letter.outerWidth( true ); 185 186 _self.dtWord += letterWidth; 187 188 // save the center point of each letter: 189 $letter.data( 'center', _self.dtWord - letterWidth / 2 ); 190 191 }); 192 193 // the middle point of the word. 194 var centerWord = this.dtWord / 2; 195 196 // check radius : the minimum value allowed is half of the word length. 197 if( this.options.radius < centerWord ) 198 this.options.radius = centerWord; 199 200 // total arc segment length, where the letters will be placed. 201 this.dtArcBase = this.dtWord; 202 203 // calculate the arc (length) that goes from the beginning of the first letter (x=0) to the end of the last letter (x=this.dtWord). 204 // first lets calculate the angle for the triangle with base = this.dtArcBase and the other two sides = radiu
204s. 205 var angle = 2 * Math.asin( this.dtArcBase / ( 2 * this.options.radius ) ); 206 207 // given the formula: L(ength) = R(adius) x A(ngle), we calculate our arc length. 208 this.dtArc = this.options.radius * angle; 209 210 }, 211 _calcLetters : function() { 212 213 var _self = this, 214 iteratorX = 0; 215 216 this.$letters.each( function(i) { 217 218 var $letter = $(this), 219 // calculate each letter's semi arc given the percentage of each letter on the original word. 220 dtArcLetter = ( $letter.outerWidth( true ) / _self.dtWord ) * _self.dtArc, 221 // angle for the dtArcLetter given our radius. 222 beta = dtArcLetter / _self.options.radius, 223 // distance from the middle point of the semi arc's chord to the center of the circle. 224 // this is going to be the place where the letter will be positioned. 225 h = _self.options.radius * ( Math.cos( beta / 2 ) ), 226 // angle formed by the x-axis and the left most point of the chord. 227 alpha = Math.acos( ( _self.dtWord / 2 - iteratorX ) / _self.options.radius ), 228 // angle formed by the x-axis and the right most point of the chord. 229 theta = alpha + beta / 2, 230 // distances of the sides of the triangle formed by h and the orthogonal to the x-axis. 231 x = Math.cos( theta ) * h, 232 y = Math.sin( theta ) * h, 233 // the value for the coordinate x of the middle point of the chord. 234 xpos = iteratorX + Math.abs( _self.dtWord / 2 - x - iteratorX ), 235 // finally, calculate how much to translate each letter, given its center point. 236 // also calculate the angle to rotate the letter accordingly. 237 xval = 0| xpos - $letter.data( 'center' ), 238 yval = 0| _self.options.radius - y, 239 angle = ( _self.options.rotate ) ? 0| -Math.asin( x / _self.options.radius ) * ( 180 / Math.PI ) : 0; 240 241 // the iteratorX will be positioned on the second point of each semi arc 242 iteratorX = 2 * xpos - iteratorX; 243 244 // save these values 245 $letter.data({ 246 x : xval, 247 y : ( _self.options.dir === 1 ) ? yval : -yval, 248 a : ( _self.options.dir === 1 ) ? angle : -angle 249 }); 250 251 }); 252 253 }, 254 _rotateWord : function( animation ) { 255 256 if( !this.$el.data('arctext') ) return false; 257 258 var _self = this; 259 260 this.$letters.each( function(i) { 261 262 var $letter = $(this), 263 transformation = ( _self.options.radius === -1 ) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)', 264 transition = ( animation ) ? 'all ' + ( animation.speed || 0 ) + 'ms ' + ( animation.easing || 'linear' ) : 'none'; 265 266 $letter.css({ 267 '-webkit-transition' : transition, 268 '-moz-transition' : transition, 269 '-o-transition' : transition, 270 '-ms-transition' : transition, 271 'transition' : transition 272 }) 273 .css({ 274 '-webkit-transform' : transformation, 275 '-moz-transform' : transformation, 276 '-o-transform' : transformation, 277 '-ms-transform' : transformation, 278 'transform' : transformation 279 }); 280 281 }); 282 283 }, 284 _loadEvents : function() { 285 286 if( this.options.fitText ) { 287 288 var _self = this; 289 290 $(window).on( 'resize.arctext', function() { 291 292 _self._calc(); 293 294 // apply transformation. 295 _self._rotateWord(); 296 297 }); 298 299 } 300 301 }, 302 set : function( opts ) { 303 304 if( !opts.radius && 305 !opts.dir && 306 opts.rotate === 'undefined' ) { 307 return false; 308 } 309 310 this.options.radius = opts.radius || this.options.radius; 311 this.options.dir = opts.dir || this.options.dir; 312 313 if( opts.rotate !== undefined ) { 314 this.options.rotate = opts.rotate; 315 } 316 317 this._calc(); 318 319 this._rotateWord( opts.animation ); 320 321 }, 322 destroy : function() { 323 324 this.options.radius = -1; 325 this._rotateWord(); 326 this.$letters.removeData('x y a center'); 327 this.$el.removeData('arctext'); 328 $(window).off('.arctext'); 329 330 } 331 }; 332 333 var logError = function( message ) { 334 if ( this.console ) { 335 console.error( message ); 336 } 337 }; 338 339 $.fn.arctext = function( options ) { 340 341 if ( typeof options === 'string' ) { 342 343 var args = Array.prototype.slice.call( arguments, 1 ); 344 345 this.each(function() { 346 347 var instance = $.data( this, 'arctext' ); 348 349 if ( !instance ) { 350 logError( "cannot call methods on arctext prior to initialization; " + 351 "attempted to call method '" + options + "'" ); 352 return; 353 } 354 355 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 356 logError( "no such method '" + options + "' for arctext instance" ); 357 return; 358 } 359 360 instance[ options ].apply( instance, args ); 361 362 }); 363 364 } 365 else { 366 367 this.each(function() { 368 369 var instance = $.data( this, 'arctext' ); 370 if ( !instance ) { 371 $.data( this, 'arctext', new $.Arctext( options, this ) ); 372 } 373 }); 374 375 } 376 377 return this; 378 379 }; 380 381})( jQuery );
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.