example-drupal-theme-script.js

// This code has been modified from the original to comply with NDA.
// Code may not run as expected due to the modifications applied.
(function ($) {
  'use strict';
  Drupal.behaviors.client_init_accordions = {
    attach: function (context, settings) {
      var w = $(window).width();
      $('.js-accordion-module').each(function(){
        var $el = $(this);

        if ($el.hasClass('contact-sb')) {
          $el.addClass('is-expanded');
        }
        // Add click event to the controls
        // if it is the contact side bar
        $el.find('.js-accordion-link').click(function(e){
          e.preventDefault();
          // toggle the expanded state
          $el.toggleClass('is-expanded').find('.js-accordion-content').stop(true,true).slideToggle();
        });
      });

      function _triggerCollapse(w) {
        if (w <= 748) {
          $('.js-accordion-module').each(function(){
            var $el = $(this);
            if ($el.hasClass('contact-sb') && $el.hasClass('is-expanded')) {
              $el.find('.js-accordion-link').trigger('click');
            }
          });
        } else {
          $('.js-accordion-module').each(function(){
            var $el = $(this);
            // Add click event to the controls
            // if it is the contact side bar
            if ($el.hasClass('contact-sb') && !$el.hasClass('is-expanded')) {
              $el.find('.js-accordion-link').trigger('click');
            }
          });
        }
      }

      _triggerCollapse(w);

      $(window).resize(function () {
        w = $(window).width();
        _triggerCollapse(w);
      });
    }
  }

  Drupal.behaviors.client_feedback = {
    attach: function(context, settings) {
      var $page = $('.page');

      $page.find('.js-leave-feedback-link').click(function(){
        var $parent = $('.js-leave-feedback');
        if ($parent.hasClass('is-visible') === false) {
          $('body').addClass('is-visible');
        } else {
          $('body').removeClass('is-visible');
        }
      });
    }
  }

  Drupal.behaviors.client_google_maps = {
    attach: function(context, settings) {
      var mapContainerClass = "js-google-map",
        latlngCityHall = "",
        latlngDPW = "",
        latlngParking = "",
        latlngSafety = "",
        googleMap,
        currentInfoWindow,
        zoom = 13;

      init();

      function setZoom() {
        if($('.breakpoint-m-min').width() <= window.innerWidth){
          zoom = 14;
        }
      }

      function setLocations(){
        // These are just random locations used for this example code.
        latlngCityHall = new google.maps.LatLng(47.6123601,-122.3889969);
        latlngDPW = new google.maps.LatLng(30.2582868,-97.7516438);
        latlngParking = new google.maps.LatLng(40.7745944,-74.046237);
        latlngSafety = new google.maps.LatLng(28.5534723,-81.3633816);
      }

      function createMap(){
        var mapContainer = $('.' + mapContainerClass)[0];

        var mapOptions = {
          scrollwheel: false,
          draggable: false,
          zoom: zoom,
          center: latlngCityHall
        };

        googleMap = new google.maps.Map(mapContainer,mapOptions);
      }

      function createMarkers(){
        createMarker({
          'title':"Seattle City Hall",
          'street':'600 4th Ave',
          'zip':'98104',
          'url':'/city-hall'
        },latlngCityHall);
        createMarker({
          'title':"Austin Public Works Department",
          'street':'505 Barton Springs Rd # 1300',
          'zip':'78704',
          'url':'/adpw'
        },latlngDPW);
        createMarker({
          'title':"Parking Garage",
          'street':'4 E 76th St',
          'zip':'10021',
          'url':'/departments/parking'
        },latlngParking);
        createMarker({
          'title':"Florida Safety Council",
          'street':'1505 E Colonial Dr',
          'zip':'32803',
          'url':'/safety'
        },latlngSafety);
      }
      function createMarker(data, position){
        var infoWindow = new google.maps.InfoWindow({
          content: '<div class="info-window"><h3><a href="' + data.url + '">' + data.title + '</a></h3><span>' + data.street + '</span><br /><span>client, AL ' + data.zip + '</span></div>'
        });

        var marker = new google.maps.Marker({
          position: position,
          title:data.title
        });

        marker.setMap(googleMap);

        google.maps.event.addListener(marker, 'click', function() {
          if (currentInfoWindow) {
            currentInfoWindow.close();
          }
          currentInfoWindow = infoWindow;
          infoWindow.open(googleMap,marker);
        });
      }

      function init(){
        //wait for dom ready
        $(function(){
          if($('.' + mapContainerClass).length) {
            setZoom();
            setLocations();
            createMap();
            createMarkers();
          }
        });
      }
    }
  }

  Drupal.behaviors.client_media_gallery = {
    attach: function(context, settings) {
      var mediaGalleryClass = 'js-media-gallery-carousel',
        mediumBreakpoint,
        narrowView = true,
        hasCarousel = false,
        carousels = new Array();

      init();

      function initSlider($el){
        var slider;
        // if the browser is narrow 
        if(window.innerWidth < mediumBreakpoint || $el.hasClass('use-carousel') && !hasCarousel){
          // create the slider
          slider = createSlider($el);
          hasCarousel = true;
        } else {
          // otherwise record the browser is wide
          narrowView = false;
        }
        $( window ).resize(function() {
          // if we cross into the narrow view
          if(!narrowView && window.innerWidth < mediumBreakpoint && !hasCarousel){
            // create the slider
            slider = createSlider($el);
            // otherwise record the browser is narrow
            narrowView = true;
            hasCarousel = true;
          } 
          // if we cross into the wide view
          if(narrowView && window.innerWidth >= mediumBreakpoint && !$el.hasClass('use-carousel')){
            // destroy the slider
            slider.destroySlider();
            // otherwise record the browser is wide
            narrowView = false;
          }

        });
      }

      function createSlider($el) {
        return $el.bxSlider({
            pager: false,
            slideMargin: 40,
            slideWidth: 900
          })
          .removeClass('hidden');
      }

      function init() {
        //wait for the DOM to be ready
        $(function(){
          // set the medium break point value
          mediumBreakpoint = $('.breakpoint-m-min').width();
          // for each media gallery on the page
          $('.' + mediaGalleryClass).each(function(){
            initSlider($(this));
          });
        });
      }
    }
  }

  Drupal.behaviors.client_sidebar_nav = {
    attach: function(context, settings) {
      var resizeTimeout,
        extraLargeBreakpoint = 1260,
        isNavOpen = false, // flag to indicate whether the sidebar nav is open
        sidebarTargetClass = 'global-nav',
        sidebarClass = 'sidebar-nav__open',
        subnavClass = 'global-nav__sub-nav',
        sidebarTrigger = 'js-global-nav-menu-link',
        primaryNavItem = 'global-nav__main-items',
        sidebarNavCloseClass = 'js-sidebar-nav-close',
        sidebarNavBack = 'js-sidebar-nav-back',
        subnavSelectedClass = 'subnav-selected',
        $body = $('body');

      init();

      /**
       * Open the sidebar navigation. Toggles appropriate classes.
       * @return {[void]}
       */
      function openPrimaryNav() {
        // add to body the sidebarClass
        $body.addClass(sidebarClass);

        // add to target the sidebarClass
        $body.find('.' + sidebarTargetClass).addClass(sidebarClass);

        // Add top level nav item to sub-nav list in order to navigate
        // to the top level item via click.
        $body.find('.' + subnavClass).each(function() {
          // Create a new sub nav item with the link and text from the top level
          // nav item
          var $this = $(this);
          var $navClone = $this.parent().clone().removeClass()
                .addClass('global-nav__sub-nav-items');

          // remove duplicate subnav, add and remove appropriate classes to
          // match other sub-nav items
          $navClone.children('.global-nav__sub-nav').remove();
          $navClone.children('.global-nav__main-items-link')
            .addClass('global-nav__sub-nav-link')
            .removeClass('global-nav__main-items-link');
          $this.children('.global-nav__sub-nav-items:first-child').after($navClone);
        });

        isNavOpen = true;
      }
      
      /**
       * Open the secondary nav item that corresponds to the clicked primary nav item
       * @param  {[Object]}   The primary nav element that has been clicked. Passed as 
       *            a jQuery object.
       * @return {[void]}
       */
      function openSecondaryNav($selected) {
        $selected.addClass(subnavSelectedClass);
      }

      /**
       * Close the navigation when clicking the Menu icon,
       * clicking the close icon, or when resizing the 
       * window. This function toggles the appropriate classes.
       * @return {[void]}
       */
      function closeNav() {
        // remove from body the sidebarClass
        $body.removeClass(sidebarClass);

        // remove from target the sidebarClass;
        $body.find('.' + sidebarTargetClass).removeClass(sidebarClass);

        // remove secondary nav open classes
        $body.find('.' + subnavClass).removeClass(subnavSelectedClass);

        // Remove the duplicate top level nav item
        //$body.find('.global-nav__sub-nav-items:nth-child(2)').remove();

        // set sidebar nav flag
        isNavOpen = false
      }

      /**
       * Check if the navigation is open; if it is, close it.
       * @return
       */
      function windowResized() {
        if ((window.innerWidth >= extraLargeBreakpoint) && (isNavOpen == true)) {
          closeNav();
        }
      }

      function init() {
        $(function() {
          // set the XL Break point
          // extraLargeBreakpoint = $body.find('.breakpoint-xxl-min').width() - 1;
          var touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
          var $header = $body.find('.site-header');
          var $offset = 0;
  
          if ($body.find('.' + sidebarTrigger).length) {
            $body.find('.' + sidebarTrigger).on(touchEvent, function(e) {
              e.preventDefault();
  
              if ($body.find('.' + sidebarClass).length) {
                closeNav();
              } else {
                openPrimaryNav();
              }
            });

            $(document).on(touchEvent, function(e) {
              if (!$(e.target).parents('.site-header').length) {
                closeNav();
              }
            });
          }
  
          if ($body.find('.' + sidebarNavCloseClass).length) {
            $body.find('.' + sidebarNavCloseClass).on(touchEvent, function() {
              closeNav();
            });
          }
  
          if ($body.find('.' + sidebarNavBack).length) {
            $body.find('.' + sidebarNavBack).on(touchEvent, function() {
              $(this).parents('.' + subnavClass).removeClass(subnavSelectedClass);
            });
          }

          // Secondary Navigation opening controls
          if ($body.find('.' + primaryNavItem).length) {
            // Add class to each primary nav item that has a subnav
            $body.find('.' + subnavClass).each(function() {
              $(this).parents('.' + primaryNavItem).addClass('has-sub-nav');
            });

            // select the anchor tag so that you do not prevent default of
            // secondary nav items
            $body.find('.' + primaryNavItem + ".has-sub-nav").children('a').on(touchEvent, function(e) {
              // only prevent the user from being navigated away if the  
              // sidebar navigation is being used

              if (window.innerWidth <= extraLargeBreakpoint) {
                e.preventDefault();
                openSecondaryNav($(this).siblings('.' + subnavClass));
              }
            });
          }

          $(window).resize(function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
              windowResized();
            }, 200);
          });

          if ($body.hasClass('front')) {
            $offset = $body.find('.main-content')[0].offsetTop;
          }
          else {
            $offset = $body.find('.sub-header-container')[0].offsetTop;
          }

          $offset = parseInt($offset, 10);

          if ($(window).scrollTop() >= $offset) {
            $header.addClass('active');
          }

          $(document).scroll(function () {
            closeNav();
            if ($(window).scrollTop() >= $offset) {
              $header.addClass('active');
            }
            else {
              $header.removeClass('active');
            }
          });
        });
      }
    }
  }

  Drupal.behaviors.client_sidebar = {
    attach: function(context, settings) {
      var $body = $('body');
      // Due to limitations of the Context module, we can't load a block into two
      // regions. So, we clone the blocks here.
      if ($body.find('.node-type-orgunit') || $body.find('.node-type-programs')) {
        var flinks = $body.find('.block-links');
        var cross = $body.find('.field-name-cross-promotion').clone();
        var resources = $body.find('.block-views-listing-ul-block-2');
        var divisions = $body.find('.block-views-listing-ul-block-1');
        var divisionsClone = divisions.first().clone();
  
        if (!flinks.find('.empty').length) {
          var flinksClone = flinks.first().clone();
        } else {
          flinks.css('display','none');
        }
  
        if (!resources.find('.empty').length) {
          var resourcesClone = resources.first().clone();
          resourcesClone.find('.resources-links').css('display', 'block');
        } else {
          resources.css('display','none');
        }
  
        divisionsClone.find('.related-links').css('display', 'block');
  
        if (!resources.find('.empty').length) {
          resourcesClone.appendTo('.sidebar-mobile').css('display', 'block');
        }

        cross.prependTo('.content_below_75.sidebar-mobile');
      }
    }
  }

  Drupal.behaviors.client_showHideMore = {
    attach: function (context, settings) {
      var classes = {
        parent    : "js-has-more",
        trigger   : "js-has-more--trigger",
        showAll   : "show-all",
        isExpanded: "is-expanded",
        fadeIn    : "fade-in"
      };
      var $wrapper = $('.' + classes.parent);
      var debug = false;

      if (debug) {
        console.log("The 'showHideMore()' function has been called.");
        console.log($('.' + classes.parent));
      }

      $wrapper.each(function() {
        if ( $(this).children('ul.link-list__items').children().length <= 6 ) {
          var $container = $(this);
          $container.find('.' + classes.trigger).click(function(event) {
            event.preventDefault();

            if ($container.hasClass(classes.isExpanded)) {
              // 'more' is already showing, so fade out and hide
              $container.toggleClass(classes.fadeIn);
              $container.toggleClass(classes.isExpanded);

              setTimeout(function() {
                // Wait for the fade (css), then hide the items
                $container.toggleClass(classes.showAll);
              }, 300);
            } else {
              // time to show more things!
              $container.toggleClass(classes.showAll);
              $container.toggleClass(classes.isExpanded);

              setTimeout(function() {
                $container.toggleClass(classes.fadeIn);
              }, 100);
            }
          });
        }
      });
    }
  }
})(jQuery)