Masthead Country Widget 

<div class="masthead__widget-area masthead__widget-area--left">
    <div class="masthead-country-widget">
        <div class="widget-trigger" data-country-trigger>
            Switch Country Ipsen in the world
            <span class="widget-arrow-icon"></span>
        </div>
        <div class="masthead-country-widget__inner">
            <div class="masthead-country-widget__inner-er">
                <h2>Global Site</h2>
                <ul class="masthead-country-widget__list">
                    <li class="masthead-country-item"><a href="/belgium">Belgium</a></li>
                    <li class="masthead-country-item"><a href="/UK">UK</a></li>
                    <li class="masthead-country-item"><a href="/canada">Canada</a></li>
                    <li class="masthead-country-item"><a href="">Belgium</a></li>
                    <li class="masthead-country-item"><a href="">France</a></li>
                    <li class="masthead-country-item"><a href="">United Kingdom</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
  • Content: 
    /* @masthead-country-widget */

.masthead-country-widget {
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

  h2 {
    @include poly-margin-y--small;
    margin-left: 10px;
    color: white !important;
  }


  @media screen and (max-width: 769px) {
    width: 100%;
    display: flex;
    justify-content: space-between;

    > span {        
        line-height: 40px;
        font-weight: 900;

        @include themify($themes) {
            font-family: themed('headingFont');
            font-size: themed('ctaFontSize');
        }
    }
  }

  @media screen and (min-width: 770px) {
      h2 {
          display: block !important;
      }
  }

  .widget-trigger {
    padding-left: 40px;
  }

  &.country-open {
      .widget-trigger {
        @include themify($themes) {
          background-color: themed('ctaColor');
        }

          .widget-arrow-icon {
              transform: rotate(180deg);
              transform-origin: center center;
          }
      }

      .masthead-country-widget__inner {
          transform: scale(1);
          opacity: 1;
          // display: block;

          .widget-arrow-icon {
              transform: rotate(180deg);
              display: block;

              &:hover {
                  @include themify($themes) {
                      color: darken(themed('ctaColor'), 20%);
                  }
              }
          }

          ul li a {
              color: white;
          }
      }
  }
}

.masthead-country-widget__inner {
  position: absolute;
  z-index: 399;
  top: 40px;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  // display: none;
  left: 0;
  right: 0;

  

  @include themify($themes) {
    background-color: themed('ctaColor');
  }

  @media screen and (min-width: 770px) {
      transform: scale(0);
      opacity: 0;
      transform-origin: top left;
      @include poly-padding--large;
  }

  .widget-arrow-icon {
      display: block;
      transform: rotate(0deg);
  }

  .masthead-country-widget__inner-er {
      position: relative;
      @include poly-padding-x--large;

      @media screen and (max-width: 769px) {
        @include poly-padding-y--large;
        @include poly-padding-x;
        @include poly-margin-top;
    }

      .current-site {
        padding: 3px 30px 0 10px;
        line-height: 41px;
        display: block;
        font-size: 12px;
        font-weight: 600;
        font-family: "Biryani", sans-serif;
        position: absolute;
        left: 0;
        top: 0;
        background-image: $tick-blue;
        background-position: 95% center;
        background-repeat: no-repeat;
        background-size: 20px;
    
        background-color: white;
        border-radius: $border-radius-square;


        @media screen and (min-width: 770px) {
            padding: 3px 40px 0 10px;
            background-position: 91% center;
        }
        
        @include themify($themes) {
            color: themed('ctaColor');
        }
    
      }

      &.col-2 ul {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
      }
  }


  ul {
      display: flex;
      flex-flow: column wrap;
      height: 230px;
      align-content: flex-start;
      overflow:hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;

      @media screen and (max-width: 769px) {
          padding: 0 3rem;
          height: 100%;
      }

      li {
            position: relative;
            width: calc(100% / 5);
            border: 0 solid transparent;
            border-width: 0 20px 10px 0;

            @media screen and (max-width: 769px)  {
                margin-bottom: 1em;
                width: 50%;
                border-width: 0 30px 10px 0;
            }

          a {
              color: white;
              padding: 3px 40px 0 10px;
              line-height: 41px;
              display: inline-block;
              font-size: 12px;
              font-weight: 200;
              font-family: "Biryani", sans-serif;

              &:hover{
                  background-color: white;
                  border-radius: $border-radius-square;
                  
                  @include themify($themes) {
                      color: themed('ctaColor');
                  }
              }

              @media screen and (max-width: 769px) {
                padding: 0;
                display: block;
                line-height: 2;
            }
          }
      }
  }
}
  • URL: /components/raw/masthead-country-widget/_masthead-country-widget.scss
  • Filesystem Path: src/components/_support-blocks/masthead-comps/masthead-country-widget/_masthead-country-widget.scss
  • Size: 4.5 KB
  • Content: 
    /* masthead-country-widget */
$(document).ready(function () {
    let $parentWidget = $('.masthead-country-widget')
    let windowWidth = $(window).outerWidth()
    let didResize = false
    let didRotate = false
    let mobileSize = 769
    let queryFlag

    if ($parentWidget.length) {
        
        let $parentWrapper = $('.masthead-country-widget__inner')
        let $innerWrapper = $('.masthead-country-widget__inner-er')
        let title = $parentWidget.find('h2')
        let headerText = title.text()
        let activeItem = $('a.current-site', $parentWidget)
        let $activeItemParent = activeItem.parent('li')
        let triggerButton = 'data-country-trigger'
        let listWrapper = $('.masthead-country-widget__list') 
        let listCalcHeight = listWrapper.outerHeight() / 2

        if ( windowWidth <= mobileSize ) {
            listWrapper.css('height', listCalcHeight + 100)
        }

        function toggleNav () {
            $parentWidget.toggleClass('country-open')
        }

        function doMobile() {
            if ( $('li', $parentWidget ).length > 8) {
                $innerWrapper.addClass('col-2')
            }

            // $activeItemParent.appendTo('ul', $innerWrapper).find('a').addClass('active-button') // these were causing trouble

            $parentWrapper.appendTo('.masthead')
            $parentWidget.attr('data-menu-item', 'country')
                        .attr('data-js-trigger-subnav', '')
                        

            if (!$parentWidget.data('data-mobile-text')) {
                $parentWidget.data('data-mobile-text', 'true').prepend('<span class="mobile-header">' + headerText + '</span>' )
            }

            $parentWrapper.attr('data-submenu-item', 'country')
                            .addClass('global-subnav')
                            

            if (!$parentWrapper.data('data-mobile-text')) {
                $parentWrapper.data('data-mobile-text', 'true').prepend(' <button class="global-subnav__section-title mobile-back-button"><span></span><span class="mobile-header">' + headerText + '</span></button>')
            } 
            
            title.remove()

            $('[data-country-trigger]').click(function() {
                toggleNav()

                // $('[data-submenu-item="country"]').toggleClass('global-subnav--is-open')
            })
        }

        function doDesktop() {

            // $innerWrapper.addClass('col-' + calc)

            // activeItem.prependTo($innerWrapper).addClass('active-button')
            // $activeItemParent.remove()

            $(document).on('click', '[' + triggerButton + ']', function (e){
                toggleNav()
            })

            $(document).on('click', function(event) { 
                if(!$(event.target).closest($parentWidget).length) {
                    if($parentWidget.hasClass('country-open')) {
                        toggleNav()
                    }
                }        
            });

            if ($parentWidget.data('data-mobile-text')) {
                $parentWidget.removeData('data-mobile-text')
                $('span').remove(':contains("' + headerText + '")')
            } 
        }

        if ( windowWidth <= mobileSize ) {
            queryFlag = 'mobile'
            doMobile()

        } else {
            queryFlag = 'desktop'
            doDesktop()
        }

        $(window).resize(function() {
            didResize = true;
        })

        $(window).on( "orientationchange", function() {
            didRotate = true;
        })
        
        setInterval(function() {
            if ( didResize || didRotate ) {
                didResize = false;
                didRotate = false;

                windowWidth = $(window).outerWidth()
            
                if ( windowWidth <= mobileSize  && queryFlag !== 'mobile') {
                    doMobile()
                } else if ( windowWidth > mobileSize  && queryFlag !== 'desktop') {
                    doDesktop()
                }
            }
        }, 100);

    }
})
  • URL: /components/raw/masthead-country-widget/masthead-country-widget.js
  • Filesystem Path: src/components/_support-blocks/masthead-comps/masthead-country-widget/masthead-country-widget.js
  • Size: 4.1 KB