vendor: 4,386 bytes, lines 1-103
1/** 2 * jQuery.marquee - scrolling text like old marquee element 3 * @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin 4 */; 5(function($) { 6 $.fn.marquee = function(options) { 7 return this.each(function() { 8 // Extend the options if any provided 9 var o = $.extend({}, $.fn.marquee.defaults, options), 10 $this = $(this), 11 $marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth, 12 loopCount = 3, 13 playState = 'animation-play-state', 14 css3AnimationIsSupported = false, 15 16 // Private methods 17 _prefixedEvent = function(element, type, callback) { 18 var pfx = ["webkit", "moz", "MS", "o", ""]; 19 for (var p = 0; p < pfx.length; p++) { 20 if (!pfx[p]) type = type.toLowerCase(); 21 element.addEventListener(pfx[p] + type, callback, false); 22 } 23 }, 24 25 _objToString = function(obj) { 26 var tabjson = []; 27 for (var p in obj) { 28 if (obj.hasOwnProperty(p)) { 29 tabjson.push(p + ':' + obj[p]); 30 } 31 } 32 tabjson.push(); 33 return '{' + tabjson.join(',') + '}'; 34 }, 35 36 _startAnimationWithDelay = function() { 37 $this.timer = setTimeout(animate, o.delayBeforeStart); 38 }, 39 40 // Public methods 41 methods = { 42 pause: function() { 43 if (css3AnimationIsSupported && o.allowCss3Support) { 44 $marqueeWrapper.css(playState, 'paused'); 45 } else { 46 // pause using pause plugin 47 if ($.fn.pause) { 48 $marqueeWrapper.pause(); 49 } 50 } 51 // save the status 52 $this.data('runningStatus', 'paused'); 53 // fire event 54 $this.trigger('paused'); 55 }, 56 57 resume: function() { 58 // resume using css3 59 if (css3AnimationIsSupported && o.allowCss3Support) { 60 $marqueeWrapper.css(playState, 'running'); 61 } else { 62 // resume using pause plugin 63 if ($.fn.resume) { 64 $marqueeWrapper.resume(); 65 } 66 } 67 // save the status 68 $this.data('runningStatus', 'resumed'); 69 // fire event 70 $this.trigger('resumed'); 71 }, 72 73 toggle: function() { 74 methods[$this.data('runningStatus') == 'resumed' ? 'pause' : 'resume'](); 75 }, 76 77 destroy: function() { 78 // Clear timer 79 clearTimeout($this.timer); 80 // Unbind all events 81 $this.find("*").addBack().unbind(); 82 // Just unwrap the elements that has been added using this plugin 83 $this.html($this.find('.js-marquee:first').html()); 84 } 85 }; 86 87 // Check for methods 88 if (typeof options === 'string') { 89 if ($.isFunction(methods[options])) { 90 // Following two IF statements to support public methods 91 if (!$marqueeWrapper) { 92 $marqueeWrapper = $this.find('.js-marquee-wrapper'); 93 } 94 if ($this.data('css3AnimationIsSupported') === true) { 95 css3AnimationIsSupported = true; 96 } 97 methods[options](); 98 } 99 return; 100 } 101 102 /* Check if element has data attributes. They have top priority 103 For details https://twitter.com/aamirafridi/status/403848
103044069679104 - Can't find a better solution :/ 104 jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */ 105 var dataAttributes = {}, 106 attr; 107 $.each(o, function(key, value) { 108 // Check if element has this data attribute 109 attr = $this.attr('data-' + key); 110 if (typeof attr !== 'undefined') { 111 // Now check if value is boolean or not 112 switch (attr) { 113 case 'true': 114 attr = true; 115 break; 116 case 'false': 117 attr = false; 118 break; 119 } 120 o[key] = attr; 121 } 122 }); 123 124 // since speed option is changed to duration, to support speed for those who are already using it 125 o.duration = o.speed || o.duration; 126 127 // Shortcut to see if direction is upward or downward 128 verticalDir = o.direction == 'up' || o.direction == 'down'; 129 130 // no gap if not duplicated 131 o.gap = o.duplicated ? parseInt(o.gap) : 0; 132 133 // wrap inner content into a div 134 $this.wrapInner('<div class="js-marquee"></div>'); 135 136 // Make copy of the element 137 var $el = $this.find('.js-marquee').css({ 138 'margin-right': o.gap, 139 'float': 'left' 140 }); 141 142 if (o.duplicated) { 143 $el.clone(true).appendTo($this); 144 } 145 146 // wrap both inner elements into one div 147 $this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>'); 148 149 // Save the reference of the wrapper 150 $marqueeWrapper = $this.find('.js-marquee-wrapper'); 151 152 // If direction is up or down, get the height of main element 153 if (verticalDir) { 154 var containerHeight = $this.height(); 155 $marqueeWrapper.removeAttr('style'); 156 $this.height(containerHeight); 157 158 // Change the CSS for js-marquee element 159 $this.find('.js-marquee').css({ 160 'float': 'none', 161 'margin-bottom': o.gap, 162 'margin-right': 0 163 }); 164 165 // Remove bottom margin from 2nd element if duplicated 166 if (o.duplicated) $this.find('.js-marquee:last').css({ 167 'margin-bottom': 0 168 }); 169 170 var elHeight = $this.find('.js-marquee:first').height() + o.gap; 171 172 // adjust the animation speed according to the text length 173 if (o.startVisible && !o.duplicated) { 174 // Compute the complete animation duration and save it for later reference 175 // formula is to: (Height of the text node + height of the main container / Height of the main container) * speed; 176 o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration; 177 178 // formula is to: (Height of the text node / height of the main container) * speed 179 o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration; 180 } else { 181 // formula is to: (Height of the text node + height of the main container / Height of the main container) * speed; 182 o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration; 183 } 184 185 } else { 186 // Save the width of the each element so we can use it in animation 187 elWidth = $this.find('.js-marquee:first').width() + o.gap; 188 189 // container width 190 containerWidth = $this.width(); 191 192 // adjust the animation speed according to the text length 193 if (o.startVisible && !o.duplicated) { 194 // Compute the complete animation duration and save it for later reference
vendor: 14,306 bytes, lines 195-482
195 // formula is to: (Width of the text node + width of the main container / Width of the main container) * speed; 196 o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration; 197 198 // (Width of the text node / width of the main container) * speed 199 o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration; 200 } else { 201 // formula is to: (Width of the text node + width of the main container / Width of the main container) * speed; 202 o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration; 203 } 204 } 205 206 // if duplicated then reduce the speed 207 if (o.duplicated) { 208 o.duration = o.duration / 2; 209 } 210 211 if (o.allowCss3Support) { 212 var 213 elm = document.body || document.createElement('div'), 214 animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000), 215 domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), 216 animationString = 'animation', 217 animationCss3Str = '', 218 keyframeString = ''; 219 220 // Check css3 support 221 if (elm.style.animation) { 222 keyframeString = '@keyframes ' + animationName + ' '; 223 css3AnimationIsSupported = true; 224 } 225 226 if (css3AnimationIsSupported === false) { 227 for (var i = 0; i < domPrefixes.length; i++) { 228 if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) { 229 var prefix = '-' + domPrefixes[i].toLowerCase() + '-'; 230 animationString = prefix + animationString; 231 playState = prefix + playState; 232 keyframeString = '@' + prefix + 'keyframes ' + animationName + ' '; 233 css3AnimationIsSupported = true; 234 break; 235 } 236 } 237 } 238 239 if (css3AnimationIsSupported) { 240 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's infinite ' + o.css3easing; 241 $this.data('css3AnimationIsSupported', true); 242 } 243 } 244 245 var _rePositionVertically = function() { 246 $marqueeWrapper.css('margin-top', o.direction == 'up' ? containerHeight + 'px' : '-' + elHeight + 'px'); 247 }, 248 _rePositionHorizontally = function() { 249 $marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth + 'px' : '-' + elWidth + 'px'); 250 }; 251 252 // if duplicated option is set to true than position the wrapper 253 if (o.duplicated) { 254 if (verticalDir) { 255 if (o.startVisible) { 256 $marqueeWrapper.css('margin-top', 0); 257 } else { 258 $marqueeWrapper.css('margin-top', o.direction == 'up' ? containerHeight + 'px' : '-' + ((elHeight * 2) - o.gap) + 'px'); 259 } 260 } else { 261 if (o.startVisible) { 262 $marqueeWrapper.css('margin-left', 0); 263 } else { 264 $marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth + 'px' : '-' + ((elWidth * 2) - o.gap) + 'px'); 265 } 266 } 267 268 // If the text starts out visible we can skip the two initial loops 269 if (!o.startVisible) { 270 loopCount = 1; 271 } 272 } else if (o.startVisible) { 273 // We only have two different loops if marquee is duplicated and starts visible 274 loopCount = 2; 275 } else { 276 if (verticalDir) { 277 _rePositionVertically(); 278 } else { 279 _rePositionHorizontally(); 280 } 281 } 282 283 // Animate recursive method 284 var animate = function() { 285 if (o.duplicated) { 286 // When duplicated, the first loop will be scroll longer so double the duration 287 if (loopCount === 1) { 288 o._originalDuration = o.duration; 289 if (verticalDir) { 290 o.duration = o.direction == 'up' ? o.duration + (containerHeight / ((elHeight) / o.duration)) : o.duration * 2; 291 } else { 292 o.duration = o.direction == 'left' ? o.duration + (containerWidth / ((elWidth) / o.duration)) : o.duration * 2; 293 } 294 // Adjust the css3 animation as well 295 if (animationCss3Str) { 296 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing; 297 } 298 loopCount++; 299 } 300 // On 2nd loop things back to normal, normal duration for the rest of animations 301 else if (loopCount === 2) { 302 o.duration = o._originalDuration; 303 // Adjust the css3 animation as well 304 if (animationCss3Str) { 305 animationName = animationName + '0'; 306 keyframeString = $.trim(keyframeString) + '0 '; 307 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing; 308 } 309 loopCount++; 310 } 311 } 312 313 if (verticalDir) { 314 if (o.duplicated) { 315 316 // Adjust the starting point of animation only when first loops finishes 317 if (loopCount > 2) { 318 $marqueeWrapper.css('margin-top', o.direction == 'up' ? 0 : '-' + elHeight + 'px'); 319 } 320 321 animationCss = { 322 'margin-top': o.direction == 'up' ? '-' + elHeight + 'px' : 0 323 }; 324 } else if (o.startVisible) { 325 // This loop moves the marquee out of the container 326 if (loopCount === 2) { 327 // Adjust the css3 animation as well 328 if (animationCss3Str) { 329 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing; 330 } 331 animationCss = { 332 'margin-top': o.direction == 'up' ? '-' + elHeight + 'px' : containerHeight + 'px' 333 }; 334 loopCount++; 335 } else if (loopCount === 3) { 336 // Set the duration for the animation that will run forever 337 o.duration = o._completeDuration; 338 // Adjust the css3 animation as well 339 if (animationCss3Str) { 340 animationName = animationName + '0'; 341 keyframeString = $.trim(keyframeString) + '0 '; 342 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing; 343 } 344 _rePositionVertically(); 345 } 346 } else { 347 _rePositionVertically(); 348 animationCss = { 349 'margin-top': o.direction == 'up' ? '-' + ($marqueeWrapper.height()) + 'px' : containerHeight + 'px' 350 }; 351 } 352 } else { 353 if (o.duplicated) { 354 355 // Adjust the starting point of animation only when first loops finishes 356 if (loopCount > 2) { 357 $marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px'); 358 } 359 360 animationCss = { 361 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0 362 }; 363 364 } else if (o.startVisible) { 365 // This loop moves the marquee out of the container 366 if (loopCount === 2) { 367 // Adjust the css3 animation as well 368 if (animationCss3Str) { 369 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing; 370 } 371 animationCss = { 372 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth + 'px' 373 }; 374 loopCount++; 375 } else if (loopCount === 3) { 376 // Set the duration for the animation that will run forever 377 o.duration = o._completeDuration; 378 // Adjust the css3 animation as well 379 if (animationCss3Str) { 380 animationName = animationName + '0'; 381 keyframeString = $.trim(keyframeString) + '0 '; 382 animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing; 383 } 384 _rePositionHorizontally(); 385 } 386 } else { 387 _rePositionHorizontally(); 388 animationCss = { 389 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth + 'px' 390 }; 391 } 392 } 393 394 // fire event 395 $this.trigger('beforeStarting'); 396 397 // If css3 support is available than do it with css3, otherwise use jQuery as fallback 398 if (css3AnimationIsSupported) { 399 // Add css3 animation to the element 400 $marqueeWrapper.css(animationString, animationCss3Str); 401 var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}', 402 $styles = $marqueeWrapper.find('style'); 403 404 // Now add the keyframe animation to the marquee element 405 if ($styles.length !== 0) { 406 // Bug fixed for jQuery 1.3.x - Instead of using .last(), use following 407 $styles.filter(":last").html(keyframeCss); 408 } else { 409 $('head').append('<style>' + keyframeCss + '</style>'); 410 } 411 412 // Animation iteration event 413 _prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() { 414 $this.trigger('finished'); 415 }); 416 // Animation stopped 417 _prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() { 418 animate(); 419 $this.trigger('finished'); 420 }); 421 422 } else { 423 // Start animating 424 $marqueeWrapper.animate(animationCss, o.duration, o.easing, function() { 425 // fire event 426 $this.trigger('finished'); 427 // animate again 428 if (o.pauseOnCycle) { 429 _startAnimationWithDelay(); 430 } else { 431 animate(); 432 } 433 }); 434 } 435 // save the status 436 $this.data('runningStatus', 'resumed'); 437 }; 438 439 // bind pause and resume events 440 $this.on('pause', methods.pause); 441 $this.on('resume', methods.resume); 442 443 if (o.pauseOnHover) { 444 $this.on('mouseenter mouseleave', methods.toggle); 445 } 446 447 // If css3 animation is supported than call animate method at once 448 if (css3AnimationIsSupported && o.allowCss3Support) { 449 animate(); 450 } else { 451 // Starts the recursive method 452 _startAnimationWithDelay(); 453 } 454 455 }); 456 }; // End of Plugin 457 // Public: plugin defaults options 458 $.fn.marquee.defaults = { 459 // If you wish to always animate using jQuery 460 allowCss3Support: true, 461 // works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function 462 css3easing: 'linear', 463 // requires jQuery easing plugin. Default is 'linear' 464 easing: 'linear', 465 // pause time before the next animation turn in milliseconds 466 delayBeforeStart: 1000, 467 // 'left', 'right', 'up' or 'down' 468 direction: 'left', 469 // true or false - should the marquee be duplicated to show an effect of continues flow 470 duplicated: false, 471 // speed in milliseconds of the marquee in milliseconds 472 duration: 5000, 473 // gap in pixels between the tickers 474 gap: 20, 475 // on cycle pause the marquee 476 pauseOnCycle: false, 477 // on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause 478 pauseOnHover: false, 479 // the marquee is visible initially positioned next to the border towards it will be moving 480 startVisible: false 481 }; 482})(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.