1/* 2 The MIT License (MIT) 3 https://github.com/moagrius/isOnScreen 4 */ 5 6(function ($) { 7 8 $.fn.isOnScreen = function(x, y){ 9 10 if(x == null || typeof x == 'undefined') x = 1; 11 if(y == null || typeof y == 'undefined') y = 1; 12 13 var win = $(window); 14 15 var viewport = { 16 top : win.scrollTop(), 17 left : win.scrollLeft() 18 }; 19 viewport.right = viewport.left + win.width(); 20 viewport.bottom = viewport.top + win.height(); 21 22 var height = this.outerHeight(); 23 var width = this.outerWidth(); 24 25 if(!width || !height){ 26 return false; 27 } 28 29 var bounds = this.offset(); 30 bounds.right = bounds.left + width; 31 bounds.bottom = bounds.top + height; 32 33 var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 34 35 if(!visible){ 36 return false; 37 } 38 39 var deltas = { 40 top : Math.min( 1, ( bounds.bottom - viewport.top ) / height), 41 bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height), 42 left : Math.min(1, ( bounds.right - viewport.left ) / width), 43 right : Math.min(1, ( viewport.right - bounds.left ) / width) 44 }; 45 46 return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y; 47 48 }; 49 50})(jQuery); 51 52 53// REQUEST ANIMATION FRAME 54 55window.fgRAF = (function(){ 56 return window.requestAnimationFrame || 57 window.webkitRequestAnimationFrame || 58 window.mozRequestAnimationFrame || 59 window.oRequestAnimationFrame || 60 window.msRequestAnimationFrame || 61 function( callback ){ 62 window.setTimeout(callback, 1000 / 60); 63 }; 64})(); 65 66 67(function($){ 68 69 var freshGridClass = { 70 run: true, 71 // VARIABLES 72 $breakpoint: null, 73 74 breakpoint: null, 75 76 $bgLayers : $(), 77 78 $minHeight: $(), 79 80 $matchColumns: $(), 81 82 fgWowForInit: null, 83 84 fgWowHasBeenInit: false, 85 86 usedLayersType: {}, 87 88 winWidth: null, 89 winHeight: null, 90 91 $bgLayersCollection : $(), 92 93 $bgCollection: $(), 94 95 96 // FUNCTIONS 97 initialize: function () { 98 this.initBreakPoint(); 99 this.initFreshGrid(); 100 101 this.initWinWidthAndHeight(); 102 103 this.initForceMinHeight(); 104 this.initMatchColumnsHeight(); 105 //this.initYoutubeVideos(); 106 this.initWowAnimations(); 107 this.initForceFullwidth(); 108 // 109 this.eventBinding(); 110 this.mainLoop(); 111 }, 112 113 figureOutIfElementHasBeenResized: function ( $element ) { 114 var cachedDimension = $element.data('cached-dimension'); 115 var newDimension = $element.outerWidth() + '-' + $element.outerHeight(); 116 117 if( newDimension != cachedDimension ){ 118 $element.data('cached-dimension', newDimension); 119 return true; 120 } 121 122 return false; 123 }, 124 125 initFreshGrid: function() { 126 var self = this; 127 this.$bgLayers = $('.fg-bg-layer'); 128 129 this.$bgLayers.each(function(){ 130 var dataJSON = $(this).attr('data-fg-bg'); 131 var data = JSON.parse(dataJSON); 132 133 var $element = $(this).parent().parent(); 134 135 /*----------------------------------------------------------*/ 136 /* CSS THINGS 137 /*----------------------------------------------------------*/ 138 $element.addClass('has-fg-bg fg-hover'); 139 if ( 'static' == $element.css('position') ){ 140 $element.css('position', 'relative'); 141 } 142 if ( 'auto' == $element.css('z-index') ){ 143 $element.css('z-index','1'); 144 } 145 146 $(this).data('type', data.type); 147 $(this).data('bgLayerData', data); 148 $(this).data('$element', $element); 149 150 151 if( data.type == 'slant') { 152 self.initLayerTypeSlant( data, $(this), $element ); 153 } 154 155 var $bg = $(this).parent(); 156 157 var layerTypes = $bg.data('layer-types'); 158 if( !layerTypes ) { 159 layerTypes = []; 160 } 161 162 if( layerTypes.indexOf( data.type) == -1 ) { 163 layerTypes.push( data.type); 164 } 165 166 $bg.data('layer-types', layerTypes); 167 168 }); 169 170 this.$bgCollection = $('.fg-bg'); 171 172 $('.fg-bg-clipped').each(function(){ 173 //console.log('aa'); 174 175 if ( 'static' == $(this).css('position') ){ 176 $(this).css('position', 'relative'); 177 } 178 var $parent = $(this).parent(); 179 180 var $currentBg = $parent.children('.fg-bg'); 181 $currentBg.detach().prependTo( $(this) ); 182 183 }); 184 185 186 //if( collectionTypes.indexOf( bgLayerData.type ) == -1 ) { 187 // collectionTypes.push( bgLayerData.type ); 188 //} 189 190 191 192 this.initLayerTypeVideo(); 193 }, 194 195 /*----------------------------------------------------------*/ 196 /* TYPE COLOR 197 /*----------------------------------------------------------*/ 198 initLayerTypeSlant: function( bgLayerData, $bgLayer, $element ) { 199 var calculateSlantFunction = null; 200 if ( 'top' == bgLayerData.edge ){ 201 if ( 'up' == bgLayerData.direction ){
202 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 203 $bgLayer.css({ 204 'border-top': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElWidth + 'px solid ' + bgLayerData.color, 205 'border-right': thisElWidth + 'px solid transparent', 206 'top': '0', 207 'right': '0', 208 'bottom': 'auto', 209 'left': 'auto' 210 }); 211 }; 212 } else { 213 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 214 $bgLayer.css({ 215 'border-top': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElWidth + 'px solid ' + bgLayerData.color, 216 'border-left': thisElWidth*1*1 + 'px solid transparent', 217 'top': '0', 218 'right': 'auto', 219 'bottom': 'auto', 220 'left': '0' 221 }); 222 }; 223 } 224 } 225 226 if ( 'right' == bgLayerData.edge ){ 227 if ( 'up' == bgLayerData.direction ){ 228 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 229 $bgLayer.css({ 230 'border-right': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElHeight + 'px solid ' + bgLayerData.color, 231 'border-top': thisElHeight*1*1 + 'px solid transparent', 232 'top': '0', 233 'right': '0', 234 'bottom': 'auto', 235 'left': 'auto' 236 }); 237 }; 238 } else { 239 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 240 $bgLayer.css({ 241 'border-right': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElHeight + 'px solid ' + bgLayerData.color, 242 'border-bottom': thisElHeight*1*1 + 'px solid transparent', 243 'top': 'auto', 244 'right': '0', 245 'bottom': '0', 246 'left': 'auto' 247 }); 248 }; 249 } 250 } 251 252 if ( 'bottom' == bgLayerData.edge ){ 253 if ( 'up' == bgLayerData.direction ){ 254 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 255 $bgLayer.css({ 256 'border-bottom': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElWidth + 'px solid ' + bgLayerData.color,
257 'border-right': thisElWidth*1*1 + 'px solid transparent', 258 'top': 'auto', 259 'right': '0', 260 'bottom': '0', 261 'left': 'auto' 262 }); 263 }; 264 } else { 265 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 266 $bgLayer.css({ 267 'border-bottom': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElWidth + 'px solid ' + bgLayerData.color, 268 'border-left': thisElWidth*1*1 + 'px solid transparent', 269 'top': 'auto', 270 'right': 'auto', 271 'bottom': '0', 272 'left': '0' 273 }); 274 }; 275 } 276 } 277 278 if ( 'left' == bgLayerData.edge ){ 279 if ( 'up' == bgLayerData.direction ){ 280 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 281 $bgLayer.css({ 282 'border-left': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElHeight + 'px solid ' + bgLayerData.color, 283 'border-bottom': thisElHeight*1*1 + 'px solid transparent', 284 'top': 'auto', 285 'right': 'auto', 286 'bottom': '0', 287 'left': '0' 288 }); 289 }; 290 } else { 291 calculateSlantFunction = function( thisElWidth, thisElHeight ){ 292 $bgLayer.css({ 293 'border-left': Math.tan(bgLayerData.angle*(Math.PI/180))*thisElHeight + 'px solid ' + bgLayerData.color, 294 'border-top': thisElHeight*1*1 + 'px solid transparent', 295 'top': '0', 296 'right': 'auto', 297 'bottom': 'auto', 298 'left': '0' 299 }); 300 }; 301 } 302 } 303 $bgLayer.data('calculateSlantFunction', calculateSlantFunction ); 304 305 }, 306 307 recalculateVideoLayerPlayOrStop: function( bgLayerData, $bgLayer, $element, dimensionsHasBeenChanged ) { 308 var self = this; 309 /*----------------------------------------------------------*/ 310 /* PAUSE VIDEO WHEN ITS NOT VISIBLE 311 /*----------------------------------------------------------*/ 312 (function(){ 313 var playToggle = $bgLayer.data('playToggle'); 314 var player = $bgLayer.data('youtube-player'); 315 316 if( player == undefined || player.playVideo == undefined ) { 317 return; 318 } 319 320 if( $element.isOnScreen(0,0) ){ 321 if( playToggle == 0 || playToggle == undefined ) { 322 player.playVideo(); 323 $bgLayer.data('playToggle', 1); 324 } 325 } else { 326 if( playToggle == 1 || playToggle == undefined ) { 327 player.pauseVideo(); 328 $bgLayer.data('playToggle', 0); 329 } 330 } 331 })(); 332 }, 333 334 recalculateVideoLayer: function( bgLayerData, $bgLayer, $element, dimensionsHasBeenChanged ) { 335 /*----------------------------------------------------------*/ 336 /* CALCULATE VIDEO SIZE 337 /*----------------------------------------------------------*/ 338 // if( dimensionsHasBeenChanged ) { 339 (function(){ 340 if( self.breakpoint < 3 || !$element.isOnScreen(0,0) ) { 341 return false; 342 } 343 344 var thisElWidth = $element.outerWidth(); 345 var thisElHeight = $element.outerHeight(); 346 347 var newVideoWidth, newVideoHeight; 348 349 if ( thisElHeight >
349 ( thisElWidth / bgLayerData.width * bgLayerData.height ) ){ 350 351 newVideoWidth = ( thisElHeight / bgLayerData.height * bgLayerData.width ) * 1.005; 352 newVideoHeight = ( thisElHeight ) * 1.005; 353 354 $bgLayer.css({ 355 'width': newVideoWidth*2 + 'px', 356 'height': newVideoHeight*2 + 'px', 357 'left': ( -(newVideoWidth/2) + thisElWidth/2 ) + 'px', 358 'top': ( -(newVideoHeight/2) -1 ) + 'px' 359 }); 360 361 } else { 362 363 newVideoWidth = ( thisElWidth ) * 1.005; 364 newVideoHeight = ( thisElWidth / bgLayerData.width * bgLayerData.height ) * 1.005; 365 366 $bgLayer.css({ 367 'width': newVideoWidth*2 + 'px', 368 'height': newVideoHeight*2 + 'px', 369 'left': '-1px', 370 'top': ( -(newVideoHeight) + thisElHeight/2 ) + 'px' 371 }); 372 373 } 374 })(); 375 // } 376 377 378 }, 379 380 381 382 /**********************************************************************************************************************/ 383 /* MAIN LOOP 384 /**********************************************************************************************************************/ 385 mainLoop: function() { 386 var self = this; 387 var isFirstRun = true; 388 var numberOfRuns = 0; 389 var loop = function(){ 390 391 if( self.fgWowHasBeenInit == false && $('.animsition-loading').size() == 0 ) { 392 if( self.fgWowForInit != null ) { 393 self.fgWowForInit.init(); 394 self.fgWowHasBeenInit= true; 395 } 396 } 397 398 self.$bgCollection.each(function () { 399 var $this = $(this); 400 401 var hasBeenResized = self.figureOutIfElementHasBeenResized( $this ); 402 403 if( isFirstRun ) { 404 hasBeenResized = true; 405 } 406 407 408 409 /** 410 * call the function, which should be in for every move 411 */ 412 var layerTypes = $this.data('layer-types'); 413 if( layerTypes ) { 414 if (layerTypes.indexOf('video') != -1) { 415 $this.find('.fg-bg-type-video').each(function () { 416 var $bgLayer = $(this); 417 418 var type = $bgLayer.data('type'); 419 var bgLayerData = $bgLayer.data('bgLayerData'); 420 var $element = $bgLayer.data('$element'); 421 422 self.recalculateVideoLayerPlayOrStop(bgLayerData, $bgLayer, $element, hasBeenResized); 423 }); 424 } 425 } 426 427 var isOnScreen = $this.isOnScreen(0,0); 428 // 429 // 430 if( !isOnScreen && !isFirstRun) { 431 return; 432 } 433 // 434 if( isOnScreen && $this.data('been-on-screen') == undefined ) { 435 hasBeenResized = true; 436 $this.data('been-on-screen', true); 437 } 438 439 /** 440 * call only the visible functions 441 */ 442 $this.children().each(function(){ 443 var $bgLayer = $(this); 444 445 var type = $bgLayer.data('type'); 446 var bgLayerData = $bgLayer.data('bgLayerData'); 447 var $element = $bgLayer.data('$element'); 448 449 switch( type ) { 450 case 'video': self.recalculateVideoLayer( bgLayerData, $bgLayer, $element, hasBeenResized ); break; 451 case 'slant': self.recalculateSlantLayer( bgLayerData, $bgLayer, $element, hasBeenResized); break; 452 case 'parallax': self.recalculateParallaxLayer( bgLayerData, $bgLayer, $element, hasBeenResized); break; 453 } 454 }); 455 // 456 }); 457
458 self.recalcMatchColumnsHeight(); 459 460 isFirstRun = false; 461 if( self.run ) { 462 fgRAF( loop); 463 } 464 465 }; 466 loop(); 467 }, 468 469 recalculateSlantLayer: function( bgLayerData, $bgLayer, $element, dimensionsHasBeenChanged) { 470 if( !dimensionsHasBeenChanged ) { 471 return; 472 } 473 474 var elementWidth = $element.outerWidth(); 475 var elementHeight = $element.outerHeight(); 476 var recalculateSlantFunction = $bgLayer.data('calculateSlantFunction'); 477 478 recalculateSlantFunction( elementWidth, elementHeight ); 479 }, 480 481 recalculateParallaxLayer: function( bgLayerData, $bgLayer, $element, dimensionsHasBeenChanged) { 482 var thisElWidth, thisElHeight, thisElTop, thisElLeft, bgLayerHeight; 483 if( this.breakpoint >= 3 ) { 484 thisElWidth = $element.outerWidth(); 485 thisElHeight = $element.outerHeight(); 486 487 thisElTop = $element.offset().top; 488 thisElLeft = $element.offset().left; 489 // bgLayerHeight = $bgLayer.outerHeight(); 490 491 $bgLayer.removeClass('parallax-off').addClass('parallax-on'); 492 493 var winScrollTop = $(window).scrollTop(); 494 495 var calcBgPosX, calcBgPosY, finalBgPos; 496 497 if ( 'auto' == bgLayerData.size ){ 498 499 // CHANGE BACKGROUND SIZE 500 $bgLayer.css('background-size', 'auto'); 501 502 // CHANGE BACKGROUND POSITION 503 calcBgPosX = thisElLeft + (thisElWidth - bgLayerData.width)* ( bgLayerData.offset_h / 100 ) + 'px'; 504 505 calcBgPosY = ( ( thisElTop - winScrollTop ) * bgLayerData.speed / 100 ) + ( thisElHeight - bgLayerData.height ) * ( bgLayerData.offset_v / 100 ) + 'px'; 506 507 finalBgPos = calcBgPosX + ' ' + calcBgPosY; 508 509 $bgLayer.css('background-position', finalBgPos); 510 511 } else if ( 'cover' == bgLayerData.size ){ 512 513 // CHANGE BACKGROUND SIZE 514 515 var newBgWidth = thisElWidth; 516 var newBgHeight = ( thisElWidth / bgLayerData.width ) * bgLayerData.height; 517 518 var finalBgSize; 519 520 if ( newBgHeight < ( this.winHeight - ( this.winHeight - thisElHeight ) * ( bgLayerData.speed / 100 ) ) ){ 521 newBgHeight = ( this.winHeight - ( this.winHeight - thisElHeight ) * ( bgLayerData.speed / 100 ) ); 522 newBgWidth = ( bgLayerData.width / bgLayerData.height ) * newBgHeight; 523 } 524 525 finalBgSize = newBgWidth + 'px ' + newBgHeight + 'px'; 526 527 $bgLayer.css('background-size', finalBgSize); 528 529 // CHANGE BACKGROUND POSITION 530 531 calcBgPosX = thisElLeft - ( ( newBgWidth - thisElWi
531dth ) / 2 ) + 'px'; 532 calcBgPosY = ( thisElTop - winScrollTop ) * ( bgLayerData.speed / 100 ) + 'px'; 533 534 finalBgPos = calcBgPosX + ' ' + calcBgPosY; 535 536 $bgLayer.css('background-position', finalBgPos); 537 } 538 539 } else { 540 $bgLayer.removeClass('parallax-on').addClass('parallax-off'); 541 542 $bgLayer.css('background-position', ''); 543 $bgLayer.css('background-size', ''); 544 545 if ( $bgLayer.css('background-image') ){ 546 $bgLayer.css('background-image', "url('" + bgLayerData.url + "')"); 547 } 548 } 549 550 }, 551 552 553 getBreakpointNames: function() { 554 var breakpointNames = new Array(); 555 breakpointNames.push('xs'); 556 breakpointNames.push('sm'); 557 breakpointNames.push('md'); 558 breakpointNames.push('lg'); 559 560 return breakpointNames; 561 }, 562 563 initForceFullwidth: function() { 564 this.$forceFullwidth = $('.fg-force-fullwidth'); 565 this.recalculateForceFullwidth(); 566 }, 567 568 recalculateForceFullwidth: function() { 569 var self = this; 570 this.$forceFullwidth.each(function(){ 571 var $this = $(this); 572 $this.css('margin-left', 0); 573 var offsetLeft = $this.offset().left; 574 575 $this.css('margin-left', -offsetLeft); 576 $this.css('width', self.winWidth); 577 578 }); 579 }, 580 581 initMatchColumnsHeight: function() { 582 this.$matchColumns = $($(".fg-row-match-cols").get().reverse());//$('.fg-row-match-cols'); 583 }, 584 585 recalcMatchColumnsHeight: function() { 586 var self = this; 587 588 589 this.$matchColumns.each(function(){ 590 var $row = $(this); 591 592 var breakpoints = $row.data('fg-match-cols'); 593 594 var matchThisBp = false; 595 if( breakpoints == undefined ) { 596 matchThisBp = true; 597 } else { 598 if( parseInt(breakpoints[ self.breakpoint ]) == 1 ) { 599 matchThisBp = true; 600 } 601 } 602 603 var biggestColumnHeight = 0; 604 605 var $cols; 606 if( $row.hasClass('fg-row-match-cols-all') ) { 607 $cols = $row.find('.fg-col'); 608 } else { 609 $cols = $row.children('.fg-col'); 610 } 611 612 $cols.each(function(){ 613 614 var $col = $(this); 615 if( $col.hasClass('fg-col-not-match') ) { 616 return; 617 } 618 619 /*----------------------------------------------------------*/ 620 /* BASIC COLUMN HEIGHT 621 /*----------------------------------------------------------*/ 622 var basicColumnHeight = $col.find('.fg-match-column-inside-wrapper:first').height(); 623 624 var paddingTop = parseInt($col.css('padding-top')); 625 var paddingBottom = parseInt($col.css('padding-bottom')); 626 627 var borderTop = parseInt($col.css('border-top-width')); 628 var borderBottom = parseInt($col.css('border-bottom-width')); 629 630 basicColumnHeight = basicColumnHeight + paddingTop + paddingBottom + borderTop + borderBottom; 631 632 if( basicColumnHeight > biggestColumnHeight ) { 633 biggestColumnHeight = basicColumnHeight; 634 } 635 636 var setHeight = ''; 637 638 /*----------------------------------------------------------*/ 639 /* FORCE MIN HEIGHT 640 /*----------------------------------------------------------*/ 641 var dataFgForceMinHeight = $col.attr('data-fg-force-min-height'); 642 643 if( dataFgForceMinHeight != undefined ) { 644 645 var minHeight = JSON.parse( dataFgForceMinHeight ); 646 647 var currentMinHeight = minHeight[ 'breakpoint_' + self.breakpoint ]; 648 649 if ( currentMinHeight != undefined ){ 650 651 var height = parseInt(currentMinHeight.height); 652 653 var offset = parseInt(currentMinHeight.offset); 654 655 if( isNaN( offset) ) { 656 offset = 0; 657 } 658 659 var actualMinHeight = self.winHeight * ( height / 100 ) + offset; 660 setHeight = actualMinHeight; 661 662 if( actualMinHeight >
662 biggestColumnHeight ) { 663 biggestColumnHeight = actualMinHeight; 664 } 665 666 } 667 668 } 669 670 /*----------------------------------------------------------*/ 671 /* HEIGHT DATA 672 /*----------------------------------------------------------*/ 673 var dataFgHeight = $col.attr('data-fg-height'); 674 if( dataFgHeight != undefined ) { 675 var heightData = JSON.parse( dataFgHeight ); 676 677 var currentHeight = heightData[ self.breakpoint ]; 678 setHeight = currentHeight; 679 if( currentHeight != null && currentHeight > biggestColumnHeight ) { 680 biggestColumnHeight = currentHeight; 681 } 682 } 683 684 if( !matchThisBp ) { 685 // console.log( setHeight ); 686 $col.css('height', setHeight); 687 } 688 689 }); 690 691 if( matchThisBp ) { 692 $cols.filter(':not(.fg-col-not-match)').css('height', biggestColumnHeight ); 693 } 694 695 }); 696 697 698 }, 699 700 eventBinding: function() { 701 var self = this; 702 $(window).on('resize orientationchange', function(){ 703 self.recalculateBreakpoint(); 704 self.recalculateWinWidthAndHeight(); 705 self.recalculateMinHeight(); 706 self.recalculateForceFullwidth(); 707 }); 708 }, 709 710 initForceMinHeight: function() { 711 var self = this; 712 713 $('[data-fg-force-min-height]').each(function(){ 714 715 if( $(this).parent().hasClass('fg-row-match-cols') ) { 716 return; 717 } 718 719 self.$minHeight = self.$minHeight.add( $(this) ); 720 }); 721 722 this.recalculateMinHeight(); 723 }, 724 725 recalculateMinHeight: function() { 726 var self = this; 727 this.$minHeight.each(function(){ 728 var $this = $(this); 729 730 // is data empty? 731 var data = JSON.parse( $this.attr('data-fg-force-min-height') ); 732 if( data == '' ) { 733 return; 734 } 735 //$this.removeClass('fg-temp-height') 736 737 738 // var recalcMinHeight = function() { 739 var breakpoint = self.breakpoint; 740 741 $this.css('height', ''); 742 743 var currentHeight = $this.height(); 744 745 if( data['breakpoint_' + breakpoint] != undefined ) { 746 var bpSettings, new_height, new_offset; 747 bpSettings = data['breakpoint_' + breakpoint]; 748 new_height = parseFloat(bpSettings.height) || 0; 749 new_offset = parseFloat(bpSettings.offset) || 0; 750 751 var final_height = (self.winHeight * ( new_height / 100 )) + new_offset + 0.2; // 0.2 is a hack to compensate for "integer only" output from matchHeight 752 753 754 if( final_height < currentHeight ) { 755 final_height = currentHeight; 756 } 757 758 $this.css('height', Math.round(final_height) + 'px'); // rounding is needed to fix inconsistencies in Chrome with usage of ForceMinHeight 759 } 760 }); 761 }, 762 763 initBreakPoint: function() { 764 $('body').append('<div class="fg-breakpoint"></div>'); 765 this.$breakpoint = $('.fg-breakpoint'); 766 767 this.recalculateBreakpoint(); 768 }, 769 770 recalculateBreakpoint: function() { 771 this.breakpoint = this.$breakpoint.width(); 772 }, 773 774 775 776 initLayerTypeVideo: function( ) { 777 // if( this.breakpoint < 3 ) { 778 // return; 779 // } 780 var $bgVideo = this.$bgLayers.filter('.fg-bg-type-video'); 781 782 if( $bgVideo.size() == 0 ) { 783 return; 784 } 785 786 var youtubeVideoUsed = false;
787 788 $bgVideo.each(function(){ 789 var $layer = $(this); 790 var dataJSON = $(this).attr('data-freshgrid'); 791 var data = JSON.parse( dataJSON ); 792 793 var mutedAttr = 'muted'; 794 if ( 'on' == data.sound ){ 795 mutedAttr = ''; 796 } 797 798 if ( 'youtube' == data.variant ){ 799 youtubeVideoUsed = true; 800 var url = data.url; 801 if( url) { 802 var videoID = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/); 803 $layer.append('<div class="fg-youtube-iframe" data-videoId="' + videoID[1] + '"></div>'); 804 } 805 } else if ( 'html' == data.variant ){ 806 var url = data.url; 807 $layer.append('<video class="fg-bg-html-video-frame" autoplay loop ' + mutedAttr + ' playsinline><source type="video/mp4" src="' + url + '"></source></video>'); 808 } 809 810 if ( 'on' == data.shield ){ 811 $layer.addClass('shield-on'); 812 } 813 814 if ( 'on' == data.sound ){ 815 $layer.addClass('has-sound'); 816 } 817 }); 818 819 if( youtubeVideoUsed ) { 820 this.initYoutubeVideos(); 821 } 822 823 }, 824 825 /** 826 * Init youtube video layers, if used 827 */ 828 initYoutubeVideosCounter : 0, 829 initYoutubeVideos: function() { 830 //if( this.usedLayersType['video'] == undefined ) { 831 // return false; 832 //} 833 834 var $ytScript = $("<script type='text/javascript' src='//www.youtube.com/iframe_api'></script>"); 835 836 var self = this; 837 838 window.onYouTubeIframeAPIReady = (function(){ 839 840 if ( !(typeof window.YT !== 'undefined' && typeof window.YT.Player !== 'undefined') && this.initYoutubeVideosCounter < 4 ) { 841 self.initYoutubeVideosCounter++; 842 setTimeout( function(){self.initYoutubeVideos()}, 300 ); 843 return; 844 } 845 self.$bgLayers.filter('.fg-bg-type-video').each(function(){ 846 var hasSound = $(this).hasClass('has-sound'); 847 var $youtubeIframe = $(this).find('.fg-youtube-iframe'); 848 var player = new YT.Player($youtubeIframe[0], { 849 videoId: $youtubeIframe.attr('data-videoId'), 850 playerVars: { 851 iv_load_policy: 3, 852 modestbranding: 1, 853 autoplay: 1, 854 controls: 0, 855 showinfo: 0, // 'showinfo' is deprecated by YT now 856 wmode: 'opaque', 857 branding: 0, 858 autohide: 0, 859 rel: 0 // 'rel' is deprecated by YT now 860 }, 861 events: { 862 'onReady': function( event ){ 863 if ( !hasSound ){ 864 player.mute(); 865 } 866 867 event.target.setPlaybackQuality('highres'); 868 869 // CUSTOM TEMPORARY LOOPING TO EXTRA BLACK FRAME BETWEEN LOOPS 870 var interval = setInterval(function(){ 871 if (player.getCurrentTime() + 0.1 > player.getDuration()) { 872 player.seekTo(0); 873 } 874 }, 100 ); 875 }, 876 'onStateChange': function( event ){ 877 // loop video 878 // NATIVE LOOPING VIA YOUTUBE API RESULTS IN EXTRA BLACK FRAME BETWEEN LOOPS 879 // if (event.data === YT.PlayerState.ENDED) { 880 // player.playVideo(); 881 // } 882 // set quality 883 if (event.data == YT.PlayerState.BUFFERING) { 884 event.target.setPlaybackQuality('highres'); 885 } 886 }, 887 888 } 889 }); 890 891 $(self).data('youtube-player', player); 892 }); 893 }); 894 895 $('body').append( $ytScript ); 896 }, 897 898 initWinWidthAndHeight: function() { 899 this.recalculateWinWidthAndHeight(); 900 }, 901 902 recalculateWinWidthAndHeight: function() { 903 this.winWidth = $(window).width(); 904 this.winHeight = $(window).height(); 905 }, 906 907 initWowAnimations: function() { 908 var $wowEls = $('[data-fg-wow]'); 909 $wowEls.each(function(){ 910 var $this = $(this); 911 $this.addClass('fg-wow ' + $this.attr('data-fg-wow')); 912 }); 913 var _this_ = this; 914 915 var initWow = setInterval(function(){ 916 917 $wowEls.removeAttr('data-fg-wow'); 918 919 if( typeof WOW == 'undefined' ) { 920 return; 921 } 922 923 clearInterval( initWow ); 924
925 var fgWow = new WOW( 926 { 927 boxClass: 'fg-wow', 928 mobile: false, 929 tablet: false 930 } 931 ); 932 933 if( $('.animsition-loading').size() == 0 ) { 934 fgWow.init(); 935 _this_.fgWowHasBeenInit = true; 936 } else { 937 _this_.fgWowForInit = fgWow; 938 _this_.fgWowHasBeenInit = false; 939 } 940 },200); 941 942 }, 943 944 945 946 947 948 }; 949 950 $(document).ready(function(){ 951 952 freshGridClass.initialize(); 953 954 }); 955 956 957})(jQuery); 958 959 960 961
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.