1(function() { 2 var 3 4 _$container=null, 5 6 //The slide groups. There are 3 of them so a slide can always appear left & right of the active slide. 7 _$slide_groups=null, 8 9 //The current items 10 _current={ 11 $slide_group: null, 12 $all_slides: null, 13 $slide: null, 14 $slide_image: null, 15 $video_player: null, //created when a video is played 16 video_elem: null, //will only contain a value if a video is playing. This is a DOM object 17 slide_index: null, 18 slide_count: null 19 }, 20 21 //The scrollings wrapper (viewport) and scrolling content area 22 _scroll={ 23 $wrapper: null, 24 $content: null 25 }, 26 27 _controls={ 28 $left: null, 29 $right: null, 30 $play: null, 31 $dots: null, 32 $dot_container: null, 33 $filled_dot_container: null, 34 $filled_dots: null 35 }, 36 37 _gradient={ 38 $left: null, 39 $right: null 40 }, 41 42 _caption={ 43 $wrapper: null, 44 $text1: null, 45 $text2: null 46 }, 47 48 //widths of various elements. 49 _widths={ 50 slide: null, 51 slide_group: null, 52 //width of partial slide shown to left and right of curent slide 53 partial_slide: null, 54 scroll_wrapper: null, 55 scroll_content: null 56 }, 57 58 //opacity of various controls 59 _opacity={ 60 arrows: null, 61 play: null, 62 dots: null, 63 filled_dots: null, 64 caption: null 65 }, 66 67 //indicates if the transition is running 68 _is_transitioning=false, 69 70 //auto advance timer 71 _timer={ 72 interval: 5000, 73 handle: null 74 }, 75 76 //used with orientation change handler 77 _orientation_timer={ 78 interval: 100, 79 maxCount: 20, 80 currentCount: 0 81 }, 82 83 //used to determine when resizing is finished. 84 _resize_timer={ 85 interval: 100, 86 handle: null, 87 lastWidth: 0, 88 }, 89 90 //are we in mobile view 91 _is_mobile=false, 92 93 //pause on hover 94 _is_paused=false, 95 96 //is video full screen 97 _is_video_full_screen = false, 98 99 100 // 101 // init 102 // 103 init = function () { 104 _$container=$('#carousel2'); 105 106 if (_$container.length > 0) { 107 //initialize the resize timer 108 _resize_timer.lastWidth=$(window).width(); 109 110 checkMobile(); 111 getElements(); 112 sizeAllElements(); 113 114 //hide the play button, we needed it visible so we could adjust it's size 115 _controls.$play.hide(); 116 117 createSlideGroups(); 118 getWidths(); 119 goToSlide(0,false); 120 setupPrevNextButtons(); 121 setupDots(); 122 setupVideoPlay(); 123 124 setupPause(); 125 126 setupFullScreenChange(); 127 128 //need to insure all other functions have finished, otherwise resize triggers on load and reloads 129 //page multiple times. 130 setTimeout(function() { 131 setupResize(); 132 },0); 133 134 // start the auto advance timer 135 startTimer(); 136 } 137 }, 138 139 140 // 141 // get the elements we need to work with 142 // 143 getElements = function () { 144 //get the current elems 145 _current={ 146 $slide_group: _$container.find('.carousel2-slide-group'), 147 $all_slides: _$container.find('.carousel2-slide'), 148 $slide: _$container.find('.carousel2-slide').first(), 149 video_elem: null, 150 slide_index: 0 151 }; 152 _current.slide_count=_current.$all_slides.length; 153 154 //get the scrolling elems 155 _scroll={ 156 $wrapper: _$container.find('.carousel2-scroll'), 157 $content: _$container.find('.carousel2-scroll-inner') 158 }; 159 160 //get the controls 161 _controls={ 162 $left: _$container.find('.left-arrow'), 163 $right: _$container.find('.right-arrow'), 164 $play: _$container.find('.carousel-play'), 165 $dots: _$container.find('.unfilled-dot-container .carousel-dot'),
166 $dot_container: _$container.find('.unfilled-dot-container'), 167 $filled_dots: _$container.find('.filled-dot-container .carousel-dot'), 168 $filled_dot_container: _$container.find('.filled-dot-container') 169 }; 170 171 _gradient={ 172 $left: _$container.find('.gradient-overlay-left'), 173 $right: _$container.find('.gradient-overlay-right'), 174 } 175 176 //area where we write the captions 177 _caption={ 178 $wrapper: _$container.find('.carousel-caption'), 179 $text1: _$container.find('.carousel-caption-1'), 180 $text2: _$container.find('.carousel-caption-2') 181 }; 182 183 //get initial opacity 184 _opacity={ 185 arrows: _controls.$left.css('opacity'), 186 play: _controls.$play.css('opacity'), 187 dots: _controls.$dots.eq(0).css('opacity'), 188 filled_dots: _controls.$filled_dots.eq(0).css('opacity'), 189 caption: _caption.$wrapper.css('opacity') 190 }; 191 }, 192 193 194 // 195 // If we're < 1200px wide but not in mobile (larger than 500px), we need to shrink down the elements and preserve 196 // aspect ratio 197 // 198 sizeAllElements=function() { 199 var w=$(window).width(); 200 201 if(w<1200&&w>500) { 202 //get the factor to reduce everything by 203 var factor=w/1200; 204 205 //if size < 960, desktop site scrolls horizontally, mobile site shrinks. Use this as our min size 206 if(w<960) { 207 factor=960/1200; 208 } 209 210 sizeElement(_current.$slide_group,factor); 211 sizeElement(_current.$all_slides,factor); 212 213 sizeElement(_scroll.$wrapper,factor); 214 sizeElement(_scroll.$content,factor); 215 216 sizeElement(_gradient.$left,factor); 217 sizeElement(_gradient.$right,factor); 218 219 //set image to slide width. We can't use the image tag to determine the width because the image 220 //may not be loaded yet. 221 var $elem=_$container.find('.carousel2-slide-image'); 222 $elem.css('width',_current.$all_slides.width()); 223 224 //arrows 225 sizeControl(_controls.$left,factor); 226 sizeControl(_controls.$right,factor); 227 sizeControl(_controls.$play,factor,true); 228 229 //caption 230 _caption.$text1.css('font-size',parseInt(_caption.$text1.css('font-size'))*factor+'px'); 231 _caption.$text2.css('font-size',parseInt(_caption.$text2.css('font-size'))*factor+'px'); 232 233 _caption.$wrapper 234 .css('padding',parseInt(_caption.$wrapper.css('padding'))*factor+'px') 235 .css('right',parseInt(_caption.$wrapper.css('right'))*factor+'px') 236 .css('bottom',parseInt(_caption.$wrapper.css('bottom'))*factor+'px'); 237 238 //dots 239 _controls.$dot_container 240 .css('top',parseInt(_controls.$dot_container.css('top'))*factor+'px') 241 .css('left',parseInt(_controls.$dot_container.css('left'))*factor+'px') 242 .css('width',parseInt(_controls.$dot_container.css('width'))*factor+'px'); 243 244 _controls.$filled_dot_container 245 .css('top',parseInt(_controls.$filled_dot_container.css('top'))*factor+'px') 246 .css('left',parseInt(_controls.$filled_dot_container.css('left'))*factor+'px') 247 .css('width',parseInt(_controls.$filled_dot_container.css('width'))*factor+'px'); 248 } 249 250 //we need this to run always, it's not part of _carousel_html so it's values isn't reset. 251 if(w>500) { 252 //header wrap, outside of our carousel 253 $elem=$('.carousel2-page .header-wrap'); 254 $elem.css('height',_scroll.$wrapper.offset().top+_scroll.$wrapper.height()); 255 } 256 }, 257 258 // 259 // helper to size a single element 260 // 261 sizeElement=function($elem,factor) { 262 $elem.css('width',$elem.width()*factor); 263 $elem.css('height',$elem.height()*factor); 264 }, 265 266 // 267 // size the controls, also size backgroud and adjust position. 268 // 269 sizeControl=function($elem,factor,adjust_left) { 270 var w=$elem.width(); 271 var h=$elem.height(); 272 273 sizeElement($elem,factor); 274 275 $elem 276 .css('background-size',w*factor+'px '+h*factor+'px') 277 .css('top',$elem.position().top*factor+'px'); 278 279 if(adjust_left) { 280 $elem.css('left',$elem.position().left*factor+'px'); 281 } 282 283 }, 284 285 // 286 // create the other 2 slide groups 287 // 288 createSlideGroups=function() { 289 //add a slide group before & after
290 _scroll.$content.prepend(_current.$slide_group.clone()); 291 _scroll.$content.append(_current.$slide_group.clone()); 292 293 //get the groups 294 _$slide_groups=_$container.find('.carousel2-slide-group'); 295 296 //add a class to each group, this is just used for development/inspecting and it's also used by mobile 297 _$slide_groups.each(function() { 298 $(this).addClass('slide-group-'+_$slide_groups.index($(this))); 299 }); 300 }, 301 302 // 303 // get the width of the various elements we need to work with 304 // 305 getWidths=function() { 306 //get the widths 307 _widths={ 308 slide: _current.$slide.outerWidth(true), 309 slide_group: _current.$slide_group.width(), 310 scroll_wrapper: _scroll.$wrapper.width(), 311 scroll_content: _scroll.$content.width() 312 }; 313 _widths.partial_slide=(_widths.scroll_wrapper-_widths.slide)/2; 314 }, 315 316 317 318 // 319 // show the indicated slide number 320 // 321 goToSlide=function(slide_index,transition,cb) { 322 //get the prev slide index 323 var prev_index=_current.slide_index; 324 var $prev_slide=_current.$slide; 325 // var $prev_image = _current.$slide_image; 326 327 var new_index=slide_index; 328 329 //insure it's in bounds 330 if(new_index<0) { 331 new_index=0; 332 } else if(new_index>=_current.slide_count-1) { 333 new_index=_current.slide_count-1; 334 } 335 336 //set the current slide 337 _current.slide_index=new_index; 338 _current.$slide=_current.$all_slides.eq(_current.slide_index); 339 _current.$slide_image=_current.$slide.find('.carousel2-slide-image'); 340 _current.$video_player=null; 341 _current.video_elem=null; 342 // _current.$flowplayer = _current.$slide.find('.flowplayer'); 343 344 if(!transition) { 345 //if no transition, only on page load 346 if(!_is_mobile) { 347 //set initial slide position 348 _scroll.$content.css('left',getCurrentSlideLeft()); 349 350 //set the current dot 351 _controls.$dots.css('opacity',0); 352 _controls.$dots.eq(_current.slide_index).css('opacity',_opacity.dots); 353 _controls.$filled_dots.eq(_current.slide_index).css('opacity',0); 354 _controls.$filled_dots.eq(_current.slide_index).css('cursor','default'); 355 } 356 357 //show it 358 _current.$slide.show(); 359 360 361 //set the caption 362 _caption.$text1.html(_current.$slide.attr('data-text-1')); 363 _caption.$text2.html(_current.$slide.attr('data-text-2')); 364 _caption.$wrapper.attr('href',_current.$slide.attr('data-url')); 365 366 //if it's a video 367 if(_current.$slide.attr('data-video-url')) { 368 //show the play button 369 _controls.$play.show(); 370 } else { 371 //show the play button 372 _controls.$play.css('opacity','0').show(); 373 374 } 375 } else { 376 //use transitions 377 var tl=new TimelineLite({ 378 onComplete: function() { 379 //remove 0 opacity from prev slide image, this is for mobile because we don't fade 380 //up to the image when a video ends. 381 // console.log($prev_image); 382 // $prev_image.css('opacity', _opacity.slide); 383 384 if(cb) { 385 cb(); 386 } 387 } 388 }); 389 390 if(_is_mobile) { 391 //get the height of the slide group div. We need to set an explicit height on it during the transitions 392 //to avoid page jump, which occurs occaisionally when the slides display is being altered 393 var height=_current.$slide_group.height(); 394 _current.$slide_group.css('height',height); 395 396 _current.$slide_image.css('opacity',1); 397 398 399 //need to transition to next slide and toggle display to maintain height 400 tl 401 .to($prev_slide,0.5,{ opacity: 0,ease: Power1.easeIn,display: 'none' },0) 402 .to(_current.$slide,0.6,{ opacity: 1,ease: Power1.easeIn,display: 'block' },0.5) 403 404 //remove fixed height 405 .call(function() { 406 if(_is_mobile) { 407 _current.$slide_group.css('height','auto'); 408 } 409 },null,null,0.55) 410 411 412 } else { 413 //move the slide
414 tl.to(_scroll.$content.get(),1,{ left: getCurrentSlideLeft(),ease: Power1.easeInOut }); 415 416 //dots 417 tl 418 .to(_controls.$dots.eq(prev_index),0.5,{ ease: Power1.easeOut,opacity: 0 },0) 419 .to(_controls.$filled_dots.eq(prev_index),0.2,{ ease: Power1.easeIn,opacity: _opacity.filled_dots },0) 420 421 .to(_controls.$filled_dots.eq(_current.slide_index),0.5,{ ease: Power1.easeOut,opacity: 0 },0.25) 422 .to(_controls.$dots.eq(_current.slide_index),0.3,{ ease: Power1.easeIn,opacity: _opacity.dots },0.25); 423 424 _controls.$filled_dots.eq(_current.slide_index).css('cursor','default'); 425 _controls.$filled_dots.eq(prev_index).css('cursor','pointer'); 426 } 427 428 //play button 429 tl.to(_controls.$play,0.5,{ opacity: 0,ease: Power3.easeOut },0); 430 if(_current.$slide.attr('data-video-url')) { 431 tl.to(_controls.$play,0.5,{ opacity: _opacity.play,ease: Power1.easeIn },0.5) 432 .call(function() { 433 _controls.$play.css('opacity',''); 434 },null,null,1.05); 435 } 436 437 438 //caption 439 tl 440 .to(_caption.$wrapper,0.5,{ ease: Power3.easeOut,opacity: 0 },0) 441 .call(function() { 442 _caption.$text1.html(_current.$slide.attr('data-text-1')); 443 _caption.$text2.html(_current.$slide.attr('data-text-2')); 444 _caption.$wrapper.attr('href',_current.$slide.attr('data-url')); 445 },null,0.4) 446 //},null,null,0.4) 447 // .to(_caption.$wrapper, 0.5, {ease: Power3.easeOut, opacity: _opacity.caption}, 0.4); 448 .to(_caption.$wrapper,0.5,{ ease: Power1.easeIn,opacity: _opacity.caption },0.5); 449 450 tl.play(); 451 } 452 }, 453 454 455 // 456 // return the left position for the current slide 457 // 458 getCurrentSlideLeft=function() { 459 var left=(-1*_widths.slide_group)+_widths.partial_slide-(_current.slide_index*_widths.slide); 460 // console.log('slide_group', _widths.slide_group); 461 // console.log('partial_slide', _widths.partial_slide); 462 // console.log('slide_index', _current.slide_index); 463 // console.log('slide', _widths.slide); 464 // console.log('left', left); 465 return left; 466 }, 467 468 469 // 470 // Setup the prev/next buttons 471 // 472 setupPrevNextButtons=function() { 473 //left arrow 474 _controls.$left.click(function() { 475 previousSlide(); 476 }); 477 478 //right arrow 479 _controls.$right.click(function() { 480 nextSlide(); 481 }); 482 }, 483 484 // 485 // go to the previous slide 486 // 487 previousSlide=function() { 488 if(!_is_transitioning) { 489 _is_transitioning=true; 490 checkMobile(); 491 stopTimer(); 492 493 stopVideo(function() { 494 if(_current.slide_index==0) { 495 if(!_is_mobile) { 496 //we're on the first slide, scroll to this slide on the next group 497 _scroll.$content.css('left',_scroll.$content.position().left-_widths.slide_group); 498 } 499 500 //go to last slide, since we scrolled to the next group, we'll be moving left to the last slide 501 goToSlide(_current.slide_count-1,true,function() { 502 _is_transitioning=false; 503 startTimer(); 504 }); 505 506 } else { 507 goToSlide(_current.slide_index-1,true,function() { 508 _is_transitioning=false; 509 startTimer(); 510 }); 511 } 512 }); 513 } 514 }, 515 516 // 517 // go to the next slide 518 // 519 nextSlide=function() { 520 if(!_is_transitioning) { 521 522 _is_transitioning=true; 523 checkMobile(); 524 stopTimer(); 525 526 stopVideo(function() { 527 if(_current.slide_index==_current.slide_count-1) { 528 if(!_is_mobile) { 529 //we're on the last slide, scroll to this slide on the previous group 530 _scroll.$content.css('left',_scroll.$content.position().left+_widths.slide_group); 531 } 532 533 //go to first slide, since we scrolled to the previous group, we'll be moving right to the first slide 534 goToSlide(0,true,function() { 535 _is_transitioning=false; 536 startTimer(); 537 }); 538 } else { 539 goToSlide(_current.slide_index+1,true,function() { 540 _is_transitioning=false; 541 startTimer(); 542 }); 543 544 } 545 }); 546 } 547 }, 548 549 550 551 // 552 // setup the click handler for the dots 553 // 554 setupDots=function() { 555 _controls.$dots.click(function() { 556 if(!_is_transitioning) { 557 var $elem=$(this); 558 559 var index=_controls.$dots.index($elem); 560 561 if(_current.slide_index!=index) { 562 checkMobile(); 563 _is_transitioning=true; 564 stopTimer(); 565 566 stopVideo(function() { 567 goToSlide(index,true,function() { 568 _is_transitioning=false; 569 startTimer(); 570 }); 571 }); 572 } 573 } 574 }); 575 }, 576 577 578 579 580 // 581 // setup the vidoe play button 582 // 583 setupVideoPlay=function() { 584 585 _controls.$play.click(function() { 586 //stop the timer 587 stopTimer(); 588 589 checkMobile(); 590 591 // //not sure why the caption menu isn't sized correctly 592 // _current.$slide.find('.mejs-captions-selector').css('height', 50); 593 594 // //get the video DOM object 595 // _current.video_elem = _current.$slide.find('video').get(0); 596 597 598 599 //build the html for the player 600 var url=_current.$slide.attr('data-video-url'); 601 var w=_current.$slide_image.width(); 602 var h=_current.$slide_image.height(); 603 604 //create the containg div and add the video elem 605 var $video=$('<video>') 606 .attr({ autoplay: false,controls: true,preload: 'none',crossorigin: 'anonymous' }) 607 .css({ width: '100%',height: '100%' }) 608 .append($('<source>').attr({ type: 'video/mp4',src: url })) 609 .append($('<track>').attr({ kind: 'subtitles',src: url.replace('.mp4','.vtt'),srclang: 'en' })) 610 611 _current.$video_player=$('<div>') 612 .addClass('carousel2-video-player') 613 .css({ 614 position: (_is_mobile?'absolute':'relative'), 615 left: 0, 616 top: (_is_mobile?0:-1*h), 617 width: w, 618 height: h, 619 opacity: 0 620 }) 621 .append($video); 622 623 //add it to the slide 624 _current.$slide.append(_current.$video_player); 625 626 //create the mejs player 627 $video.mediaelementplayer({ videoWidth: w,videoHeight: h }); 628 629 //get the DOM player 630 _current.video_elem=_current.$video_player.find('video').get(0); 631 632 //handler for video end 633 _current.video_elem.onended=function() { 634 stopVideo(null); 635 } 636 637 638 if(_is_mobile) { 639 var tl=new TimelineLite({ 640 onComplete: function() { 641 //need to hide play button so it won't pick up clicks 642 _controls.$play.css('display','none'); 643 } 644 }); 645 var time=0.5; 646 647 tl 648 .to(_controls.$play,time,{ ease: Power1.easeIn,opacity: 0 },0) 649 .to(_current.$video_player,time,{ ease: Power1.easeIn,opacity: 1 },0) 650 .to(_current.$slide_image,time,{ ease: Power1.easeIn,opacity: 0 },0) 651 .call(function() { 652 _current.video_elem.play(); 653 },null,null,1) 654 .play(); 655 656 } else { 657 var tl=new TimelineLite({ 658 onComplete: function() { 659 //need to hide dot containers & play button so they don't pick up clicks 660 _controls.$filled_dot_container.css('display','none');
661 _controls.$dot_container.css('display','none'); 662 _controls.$play.css('display','none'); 663 _caption.$wrapper.css('display','none'); 664 } 665 }); 666 var time=0.5; 667 668 tl 669 .to(_caption.$wrapper,time,{ ease: Power1.easeIn,opacity: 0 }) 670 .to(_controls.$filled_dot_container,time,{ ease: Power1.easeIn,opacity: 0 },0) 671 .to(_controls.$dot_container,time,{ ease: Power1.easeIn,opacity: 0 },0) 672 .to(_controls.$play,time,{ ease: Power1.easeIn,opacity: 0 },0) 673 .to(_current.$video_player,time,{ ease: Power1.easeIn,opacity: 1 },0) 674 // .to(_current.$slide.find('.mejs-container'), time, {ease: Power1.easeIn, opacity: 1}, 0) 675 // .to(_current.$flowplayer, time, {ease: Power1.easeIn, opacity: 1}, 0) 676 .to(_current.$slide_image,time,{ ease: Power1.easeIn,opacity: 0 },0) 677 .call(function() { 678 _current.video_elem.play(); 679 },null,null,1) 680 .play(); 681 682 } 683 684 }); 685 686 }, 687 688 689 // 690 // stop the video playback 691 // 692 stopVideo=function(cb) { 693 //video ended will be true when the video finishes, it will be false when called from goToSlide 694 695 if(_current.video_elem) { 696 checkMobile(); 697 698 //stop the video 699 _current.video_elem.pause(); 700 _current.video_elem.onended=null; 701 702 //show dot containers and play, they won't be visible yet as opacity is 0 703 if(!_is_mobile) { 704 _controls.$filled_dot_container.css('display','block'); 705 _controls.$dot_container.css('display','block'); 706 _caption.$wrapper.css('display','block'); 707 } 708 _controls.$play.css('display','block'); 709 710 711 var tl=new TimelineLite({ 712 onComplete: function() { 713 _current.video_elem.currentTime=0; 714 715 //clear the current video 716 _current.video_elem=null; 717 718 //remove the video player 719 _current.$video_player.remove(); 720 _current.$video_player=null; 721 722 //start the timer to move to the next slide 723 startTimer(1); 724 725 if(cb) { 726 cb(); 727 } 728 } 729 }); 730 731 var time=1; 732 var easing=Power4.easeIn; 733 var delay=0; 734 735 if(_is_mobile) { 736 tl 737 //.to(_current.$slide_image, time, {ease: easing, opacity: 1}, delay) 738 .to(_current.$video_player,time,{ ease: easing,opacity: 0 },delay); 739 740 //only show the play button if the video ended. It looks odd to show it when moving to a new page 741 // if (video_ended) { 742 // tl.to(_controls.$play, time, {ease: easing, opacity: _opacity.play}, delay); 743 // } 744 745 tl.play(); 746 } else { 747 tl 748 .to(_controls.$filled_dot_container,time,{ ease: easing,opacity: 1 },delay) 749 .to(_controls.$dot_container,time,{ ease: easing,opacity: 1 },delay) 750 .to(_current.$slide_image,time,{ ease: easing,opacity: 1 },delay) 751 .to(_current.$video_player,time,{ ease: easing,opacity: 0 },delay); 752 753 //only show the caption & play button if the video ended. It looks odd to show them 754 //when moving to a new page 755 // if (video_ended) { 756 // tl.to(_caption.$wrapper, time, {ease: easing, opacity: _opacity.caption}, delay) 757 // .to(_controls.$play, time, {ease: easing, opacity: _opacity.play}, delay); 758 // } 759 760 tl.play(); 761 } 762 } else if(cb) { 763 cb(); 764 } 765 }, 766 767 768 // 769 // start the auto advance timer 770 // 771 startTimer=function(duration) { 772 stopTimer(); 773 774 if(!duration) { 775 duration=_timer.interval; 776 } 777 778 _timer.handle=setTimeout(function() { 779 checkMobile(); 780 if(!_is_paused || _is_video_full_screen || _is_mobile) { //there will be a slight delay coming out of full screen, it may be paused if video played to end 781 checkMobile(); 782 nextSlide(); 783 } else { 784 startTimer(); 785 } 786 },duration); 787 }, 788 789 // 790 // stop the auto advance timer 791 // 792 stopTimer=function() { 793 if(_timer.handle) { 794 clearTimeout(_timer.handle); 795 _timer.handle=null; 796 } 797 }, 798 799 // 800 // sets the _is_mobile flat 801 // 802 checkMobile=function() { 803 _is_mobile=($(window).width()<=500); 804 }, 805 806 807 // 808 // setup resize & orientation change handlers 809 // 810 setupResize=function() { 811 $(window).on('resize',function() { 812 //we only want to monitor width. Mobile browsers often hide the url bar which changes the height 813 //and fires this event, we want to ignore those. 814 if(_resize_timer.lastWidth!=$(window).width()) { 815 startResizeTimer(); 816 } 817 }); 818 }, 819 820 821 // 822 // start the resize timer, we use this to determine when resizing is done 823 // 824 startResizeTimer=function() { 825 if(_resize_timer.handle) { 826 clearTimeout(_resize_timer.handle); 827 } 828 829 _resize_timer.handle=setTimeout(function() { 830 // _resize_timer.handle=null; 831 var w=$(window).width(); 832 833 if(_resize_timer.lastWidth!=w) { 834 //still resizing 835 _resize_timer.lastWidth=w; 836 startResizeTimer(); 837 } else { 838 //resizing done, reload. This solves the menu problem as well. 839 if (!_is_video_full_screen) { 840 window.location=window.location; 841 } 842 } 843 },_resize_timer.interval); 844 }, 845 846 847 848 // 849 // pause on hover handler 850 // 851 setupPause=function() { 852 _$container.mouseenter(function() { 853 _is_paused=true; 854 }); 855 856 _$container.mouseleave(function() { 857 _is_paused=false; 858 }); 859 860 }, 861 862 // 863 // setup video full screen handler 864 // 865 setupFullScreenChange = function() { 866 $('body').on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() { 867 var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
868 869 //if coming out of full screen, we need a delay 870 if (_is_video_full_screen && !isFullScreen) { 871 setTimeout(function() { 872 _is_video_full_screen = false; 873 }, 1000); 874 } else { 875 _is_video_full_screen = isFullScreen; 876 } 877 }); 878 879 }, 880 881 882 dummy=function() { }; 883 884 $(document).ready(init); 885 886})();
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.