Advertisement
Guest User

Untitled

a guest
May 24th, 2017
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.77 KB | None | 0 0
  1. ;(function($, window, document, undefined) {
  2. var $win = $(window);
  3. var $doc = $(document);
  4. var $slider;
  5.  
  6. var tag = document.createElement('script');
  7. var lastScrollTop = 0;
  8. var delta = 5;
  9. var CurrentSection = 0;
  10. var _timerSection = null;
  11.  
  12. tag.src = "https://www.youtube.com/iframe_api";
  13. var firstScriptTag = document.getElementsByTagName('script')[0];
  14. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  15.  
  16. var ytPlayers = {};
  17. var vPlayers = {};
  18. var youtubeSettings = '?controls=0&showinfo=0&rel=0&autohide=0&autoplay=1&loop=1&modestbranding=1&showinfo=0&enablejsapi=1'
  19.  
  20. var isMobile = {
  21. Android: function() {
  22. return navigator.userAgent.match(/Android/i);
  23. },
  24. BlackBerry: function() {
  25. return navigator.userAgent.match(/BlackBerry/i);
  26. },
  27. iOS: function() {
  28. return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  29. },
  30. Opera: function() {
  31. return navigator.userAgent.match(/Opera Mini/i);
  32. },
  33. Windows: function() {
  34. return navigator.userAgent.match(/IEMobile/i);
  35. },
  36. any: function() {
  37. return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  38. }
  39. };
  40.  
  41. var isDesktop = true;
  42.  
  43. $doc.ready(function() {
  44. if (isMobile.any()){
  45. $('body').addClass('mobile');
  46. isDesktop = false;
  47. };
  48.  
  49. if (isDesktop) {
  50. $('.video, .slide-video').responsiveVideo();
  51. };
  52.  
  53. $slider = $('.slider .owl-carousel');
  54.  
  55. jPlayerInit();
  56.  
  57. $('.popup-youtube').magnificPopup({
  58. type: 'iframe'
  59. });
  60.  
  61. $('.popup-video').magnificPopup({
  62. type: 'inline'
  63. });
  64.  
  65. $('.header-trigger').on('click', function (e) {
  66. e.preventDefault();
  67.  
  68. $(this).toggleClass('active');
  69. $('body').toggleClass('header-active');
  70. });
  71.  
  72. // Nav Service
  73.  
  74. $('.nav-services a').on('click', function(e) {
  75. e.preventDefault();
  76.  
  77. var target = $(this).attr('href');
  78. var headerHeight = $('.header').outerHeight();
  79. var targetPosition = $(target).offset().top;
  80.  
  81. $('html, body').animate({
  82. scrollTop: targetPosition - headerHeight
  83. })
  84. })
  85.  
  86. // Chosen
  87.  
  88. $('select').chosen({
  89. disable_search_threshold: 999,
  90. });
  91. });
  92.  
  93. var fullPageLoaded = false;
  94.  
  95. $win.on('load resize', function() {
  96. if ($('#fullpage').length) {
  97. if (fullPageLoaded && $win.width() <= 1024) {
  98. fullPageLoaded = false;
  99. $.fn.fullpage.destroy('all');
  100. }
  101.  
  102. if (!fullPageLoaded && $win.width() > 1024) {
  103. fullPageLoaded = true;
  104. fullPageInit();
  105. }
  106. };
  107. });
  108.  
  109. $win.on('load', function() {
  110. isotope();
  111. initProjectVideoYoutube();
  112. initProjectVideoVimeo();
  113.  
  114. // Slider Logo
  115.  
  116. setTimeout(function() { $('.slider .slide-image').fadeOut(1999) }, 1000);
  117.  
  118. // YT players
  119.  
  120. if (isDesktop) {
  121. $('.yt-player').each(function() {
  122. var $ytPlayer = $(this);
  123. var identifier = $(this).attr('id');
  124. var src = $(this).data('video');
  125.  
  126. var player = new YT.Player(identifier, {
  127. playerVars: {
  128. 'loop': 1,
  129. 'playlist': src,
  130. 'controls': 1,
  131. 'rel': 0
  132. },
  133. videoId: src,
  134. events: {
  135. 'onReady': function(event) {
  136. player.mute();
  137.  
  138. ytPlayers[ identifier ] = player;
  139. }
  140. }
  141. });
  142. });
  143. };
  144.  
  145.  
  146.  
  147. $('video').each(function(){
  148. var $this = $(this);
  149. var _id = $this.attr('id');
  150.  
  151. vPlayers[_id] = document.getElementById(_id);
  152. });
  153.  
  154. // Sliders
  155.  
  156. $slider.owlCarousel({
  157. items: 1,
  158. mouseDrag: false,
  159. touchDrag: false,
  160. animateOut: 'fadeOut',
  161. autoplay: true,
  162. loop: true,
  163. onChange : function(){
  164. $('body').InitPauseVideos();
  165.  
  166. clearTimeout(_timerSection);
  167.  
  168. _timerSection = setTimeout(function() {
  169. var $active = $('.main > section').eq(CurrentSection).find('.owl-item.active');
  170.  
  171. $active.InitPlayVideo();
  172.  
  173. $('.video, .slide-video').responsiveVideo();
  174. }, 500);
  175. }
  176.  
  177. });
  178.  
  179. $('.slider-testimonials .owl-carousel').owlCarousel({
  180. items: 1,
  181. nav: true
  182. });
  183.  
  184. $('.slider-project .owl-carousel').owlCarousel({
  185. items: 1,
  186. nav: true
  187. });
  188.  
  189. $('body').on('change', '.gfield-fileupload input', function() {
  190. $('.file-name').remove();
  191.  
  192. $('<span class="file-name">' + this.value + '</span>').insertAfter(this);
  193. })
  194. });
  195.  
  196. function jPlayerInit() {
  197. $(".jp-jplayer").each( function(){
  198.  
  199. $(this).jPlayer({
  200. ready: function () {
  201.  
  202. var video_url = $(this).data('video-url');
  203. var video_poster = $(this).data('poster');
  204.  
  205. $(this).jPlayer("setMedia", {
  206. m4v: video_url,
  207. ogv: video_url,
  208. poster: video_poster
  209. });
  210.  
  211. jplayerScroll();
  212. },
  213. swfPath: "/js",
  214. supplied: "m4v, ogv",
  215. useStateClassSkin: true,
  216. autoBlur: false,
  217. smoothPlayBar: true,
  218. keyEnabled: true,
  219. remainingDuration: true,
  220. toggleDuration: true,
  221. });
  222. });
  223. };
  224.  
  225. var projectYoutube;
  226.  
  227. function initProjectVideoYoutube() {
  228. var $video = $('.project-video');
  229. var identifier = $('.youtube').attr('id');
  230. var src = $video.find('.youtube').data('src');
  231.  
  232. projectYoutube = new YT.Player(identifier, {
  233. playerVars: {
  234. 'loop': 1,
  235. 'playlist': src,
  236. 'controls': 1
  237. },
  238. videoId: src,
  239. events: {
  240. 'onReady': function() {
  241. projectYoutube.mute();
  242. youtubeScroll();
  243. }
  244. }
  245. });
  246. };
  247.  
  248. var projectVimeo;
  249. var vimeoIframe;
  250.  
  251. function initProjectVideoVimeo() {
  252. var $video = $('.project-video');
  253. var playerId = 'vimeo';
  254. var src = $video.find('.vimeo').data('src');
  255.  
  256. $video.find('.vimeo').html('<iframe id="' + playerId + '" src="http://player.vimeo.com/video/'+ src +'?api=1&player_id= ' + playerId +'" width="500" height="281" frameborder="0"></iframe>');
  257.  
  258. vimeoIframe = $('#vimeo')[0];
  259. projectVimeo = $f(vimeoIframe);
  260. var status = $('.status');
  261.  
  262. projectVimeo.addEvent('ready', function() {
  263. projectVimeo.api('setVolume', 0);
  264. vimeoScroll();
  265. });
  266. };
  267.  
  268. function jplayerScroll() {
  269. var $video = $('.project-video');
  270. var videoId = $video.find('.jp-jplayer.autoplay').attr('id');
  271.  
  272. if (isDesktop) {
  273. $('#' + videoId).jPlayer( "mute");
  274.  
  275. startStopVideo();
  276.  
  277. $win.on('scroll', function() {
  278. startStopVideo();
  279. });
  280. };
  281.  
  282. function startStopVideo() {
  283. isVisible($video) ? $('#' + videoId).jPlayer( "play") : $('#' + videoId).jPlayer( "pause");
  284. };
  285. };
  286.  
  287. function youtubeScroll() {
  288. var $video = $('.project-video');
  289. var autoplay = $video.find('.youtube').is('.autoplay')
  290.  
  291. if (autoplay) {
  292. if (isDesktop) {
  293. startStopVideo();
  294.  
  295. $win.on('scroll', function() {
  296. startStopVideo();
  297. });
  298. };
  299. };
  300.  
  301. function startStopVideo() {
  302. isVisible($video) ? projectYoutube.playVideo() : projectYoutube.pauseVideo();
  303. };
  304. };
  305.  
  306. function vimeoScroll() {
  307. var $video = $('.project-video');
  308. var autoplay = $video.find('.vimeo').is('.autoplay');
  309.  
  310. if (autoplay) {
  311. if (isDesktop) {
  312. startStopVideo();
  313.  
  314. $win.on('scroll', function() {
  315. startStopVideo();
  316. });
  317. };
  318. };
  319.  
  320. function startStopVideo() {
  321. isVisible($video) ? projectVimeo.api('play') : projectVimeo.api('pause');
  322. };
  323. };
  324.  
  325. function isVisible($video) {
  326. var videoOffsetTop = $video.offset().top;
  327. var videoOffsetBottom = $video.offset().top + $video.outerHeight();
  328.  
  329. return ($win.scrollTop() + $win.height()) > videoOffsetTop && $win.scrollTop() < videoOffsetBottom;
  330. };
  331.  
  332. $.fn.InitPauseVideos = function(){
  333. var $container = $('.main');
  334.  
  335. $.each(vPlayers, function(index, value){
  336. value.pause();
  337. });
  338.  
  339. $.each(ytPlayers, function(index, value){
  340. value.pauseVideo();
  341. });
  342. };
  343.  
  344. $.fn.InitPlayVideo = function(){
  345. var currentSection = $(this);
  346.  
  347. // Section Videos
  348. $('.video iframe').attr('src', '');
  349.  
  350. if (currentSection.find('.section-video.youtube-video').length) {
  351. currentSection.find('.section-video iframe').attr('src', currentSection.find('.video').data('src') + youtubeSettings )
  352. };
  353.  
  354. if (currentSection.find('.section-video.embed-video').length) {
  355. currentSection.find('.section-video video')[0].play();
  356. };
  357.  
  358. $doc.on('player-loaded', function (event, data) {
  359. if ( currentSection.find('.slide-video .yt-player[id="' + data.identifier + '"]') ) {
  360. data.player.playVideo();
  361. }
  362. });
  363.  
  364. // Intitial Youtube Load
  365.  
  366. var $currentSectionVideos = currentSection.find('.slide-video .yt-player');
  367.  
  368. if ( $currentSectionVideos.length ) {
  369. $currentSectionVideos.each(function () {
  370. var $video = $(this);
  371. var videoId = $video.attr('id');
  372.  
  373. if ( videoId in ytPlayers ) {
  374. ytPlayers[videoId].playVideo();
  375. }
  376. });
  377. };
  378.  
  379. var $embedVideo = currentSection.find('.slide-video video');
  380.  
  381. $embedVideo.each(function(){
  382. var currentVideo = $(this);
  383.  
  384. if (currentVideo[0].readyState === 4) {
  385. currentVideo[0].play();
  386. }
  387.  
  388. currentVideo.on('loadeddata', function() {
  389. currentVideo[0].play();
  390. });
  391. });
  392. }
  393.  
  394. function fullPageInit() {
  395. $('#fullpage').fullpage({
  396. sectionSelector: '.fullpage-section',
  397. slideSelector: '.fullpage-slide',
  398. navigation:true,
  399. afterLoad: function(anchorLink, index) {
  400. var $this = $(this);
  401.  
  402. clearTimeout(_timerSection);
  403.  
  404. CurrentSection = $this.index();
  405.  
  406. $('body').InitPauseVideos();
  407.  
  408. if(!$this.find('.slider').length){
  409. _timerSection = setTimeout(function() {
  410. $this.InitPlayVideo();
  411. }, 500);
  412. }else{
  413. _timerSection = setTimeout(function() {
  414. var $active = $('.main > section').eq(CurrentSection).find('.owl-item.active');
  415.  
  416. $active.InitPlayVideo();
  417. }, 500);
  418. }
  419.  
  420. // Footer
  421. if(index === $('#fullpage .fullpage-section').length){
  422. $('body').toggleClass('footer-active', true)
  423. } else {
  424. $('body').toggleClass('footer-active', false)
  425. };
  426. }
  427. });
  428. };
  429.  
  430. function isotope () {
  431. //Isotope
  432. var $wallOuter = $('.team-members-outer');
  433. var $container = $wallOuter.find('.team-members');
  434.  
  435. $win.on('load resize', resizeContainer);
  436.  
  437. function resizeContainer() {
  438. $wallOuter.width('auto');
  439. };
  440.  
  441. resizeContainer();
  442.  
  443. $container.isotope({
  444. itemSelector: '.team-members .team-member',
  445. percentPosition: true,
  446. masonry: {
  447. // use outer width of grid-sizer for columnWidth
  448. columnWidth: '.team-members .team-member'
  449. }
  450. });
  451. };
  452.  
  453. $.fn.responsiveVideo = function (options) {
  454. var resize_repsonsive_video = function() {
  455.  
  456. var $player = $(this);
  457.  
  458.  
  459. var win_width = $player.parent().width(),
  460. win_height = $player.parent().height();
  461.  
  462.  
  463. var video_width = parseInt($player.data('video-width'));
  464. var video_height = parseInt($player.data('video-height'));
  465. var video_offset = parseInt($player.data('video-offset'));
  466.  
  467. var img_dimensions_ratio = video_height / video_width;
  468.  
  469. var offset = video_offset / video_height;
  470.  
  471. offsetWidth = win_width * offset;
  472. offsetHeight = win_height * offset;
  473.  
  474.  
  475. if ( win_height / win_width > img_dimensions_ratio ) {
  476.  
  477. var player_width = win_height / img_dimensions_ratio,
  478. player_height = win_height;
  479.  
  480. player_width += (player_width * offset);
  481. player_height += ( player_height * offset)
  482.  
  483. $player.height(player_height).width(player_width);
  484.  
  485. } else {
  486.  
  487. var player_width = win_width,
  488. player_height = win_width * img_dimensions_ratio;
  489.  
  490. player_width += (player_width * offset);
  491. player_height += (player_height * offset);
  492.  
  493. $player.width(player_width).height(player_height);
  494.  
  495. }
  496.  
  497. $player.css({
  498. 'left': (win_width - $player.width()) / 2,
  499. 'top': (win_height - $player.height() ) /2
  500. });
  501. }
  502.  
  503. var videos = this;
  504. $(window).on('load resize', function () {
  505. setTimeout(function() {
  506. videos.each(resize_repsonsive_video);
  507. }, 500);
  508. });
  509.  
  510. return videos.each(resize_repsonsive_video);
  511. };
  512. })(jQuery, window, document);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement