_responsive.js 6.19 KB

import jquery from 'jquery';

var Responsive = (function($) {

    // $('.play-pause-btn').on('click', function() {
    //   if(!this.isDesktop()) {
    //     $(this).hide();
    //     $(this).parents('.swiper-wrapper').find('.header-video').trigger('play');
    //   }
    // });

    var desk = window.matchMedia("(min-width: 1150px)");

    function isDesktop() {
        return desk.matches;
    }

    function toggleMobileMenu() {

      $('#navbarNavDropdown').toggleClass('show');
      $('.navbar-toggler').toggleClass('active');

      if($('#navbarNavDropdown').hasClass('show')) {
        $('body').addClass('locked');
      } else {
        $('body').removeClass('locked');
      }

    }

    $(document).on('click', '.navbar-toggler', function() {
      toggleMobileMenu();
    });

    $.fn.classChange = function(cb) {
      return $(this).each((_, el) => {
        new MutationObserver(mutations => {
          mutations.forEach(mutation => cb && cb(mutation.target, $(mutation.target).prop(mutation.attributeName)));
        }).observe(el, {
          attributes: true,
          attributeFilter: ['class'] // only listen for class attribute changes 
        });
      });
    }

    function init() {

      $('body').classChange(function(el,  new_class) {
        if(new_class.indexOf('pojo-a11y-resize-font-130') !== -1) {
          setTimeout(function() {
            $(window).trigger('resize');
          }, 500);
        }

      });

      function putBackMenuItemsToLastIndex() {
        $('.mi-image-container').each(function() {

          var item = $(this).parentsUntil('.menu-item');

          var last_idx = $(item).data('last-idx');
          var cur_idx = $(item).index();
          console.log(last_idx + " " + cur_idx)

          if(last_idx != cur_idx) {
            var item = $(this).parents('.menu-item')[0];
            var dropdown = $(this).parents('.dropdown-menu');
            $(dropdown).children().eq(last_idx).before(item);
          }

        });
      }

      function makeImageMenuItemsLastItems() {
        $('.mi-image-container').each(function() {
            var item = $(this).parents('.menu-item')[0];

            if(last_idx != 1) {
              var dropdown = $(this).parents('.dropdown-menu');
              var last_idx = $(dropdown).find('li').index(item);
              $(item).data('last-idx', last_idx);
              $(dropdown).append(item);
            }

        });
      }

      function mobilizeJobIframes() {
        var iframes = $('.available-jobs').find('iframe');
        for(var i = 0;i < iframes.length;++i) {
          var frame_height = Number($(iframes[i]).height());
          frame_height *= 1.95;
          console.log(frame_height);
          $(iframes[i]).css('height', frame_height);
        }
      }

      function demobilizeJobIframes() {
        var iframes = $('.available-jobs').find('iframe');
        for(var i = 0;i < iframes.length;++i) {
          var frame_height = $(iframes[i]).height();
          frame_height /= 1.95;
          $(iframes[i]).css('height', frame_height);
        }
      }

      function setupDropdownMenuHeights() {
        $('.dropdown-menu').each(function() {
          $(this).css('height', $(this).height() + 5);
          $(this).addClass('ready');
        });
      }

      function destructMobileCarousels() {

      }

      function makeMobileCarousels() {
          //LegacyCalc.mobilize();
          //ImageCollage.mobilize();
      } 

        function demobilize() {
            $('.donate.menu-item').append( $('#main-nav .donate-btn') );
            $('.navbar-toggler').after($('#navbarNavDropdown'));
            $('.news-and-stories-block').each(function() {
              var btn = $(this).find('.post-list-load-more');
              $(this).append(btn);
             });
             destructMobileCarousels();
            //  HeaderMenu.alignTheSideCaptions();
            putBackMenuItemsToLastIndex();
            // demobilizeJobIframes();

            if($('.menu-item-11505').length > 0) {
              $('.menu-item-11503').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-11503'));
              $('.menu-item-11505').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-11505'));
            }

            if($('.menu-item-15438').length > 0) {
              $('.menu-item-15438').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-15438'));
              $('.menu-item-15442').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-15442'));
            }

        }

        function mobilize() {
            var donate_btn =  $('#main-menu .donate > a');
            if(!$(donate_btn).hasClass('donate-btn')) {
                $(donate_btn).addClass('donate-btn');
            }
            $('#main-nav .container').append( donate_btn );
            $('#wrapper-navbar').append($('#navbarNavDropdown'));
            $('.news-and-stories-block').each(function() {
             var btn = $(this).find('.post-list-load-more');
             $(this).prepend(btn);
            });
            // HeaderMenu.alignTheSideCaptions();
            makeMobileCarousels();
            makeImageMenuItemsLastItems();
            setupDropdownMenuHeights();
            // mobilizeJobIframes();
            mobileVideos();

            if($('.menu-item-11505').length > 0) {
              $('.menu-item-11505').parents('.dropdown-menu').prepend($('.menu-item-11505'));
              $('.menu-item-11503').parents('.dropdown-menu').prepend($('.menu-item-11503'));
            }

            if($('.menu-item-15438').length > 0) {
              $('.menu-item-15442').parents('.dropdown-menu').prepend($('.menu-item-15442'));
              $('.menu-item-15438').parents('.dropdown-menu').prepend($('.menu-item-15438'));
            }


        }


        function mobileVideos() {
        }

      desk.addEventListener('change', event => {
        if (event.matches) {
            demobilize();
        } else {
          mobilize();
        }
      });

      if (desk.matches) {
        // demobilize();
      } else {
        mobilize();
      }

    }

    return {
      init: init,
      isDesktop:isDesktop,
    };
  
  }(jquery));

  jquery(document).ready(Responsive.init);
  
  export { Responsive };