spree_frontend 4.0.8 → 4.1.0.rc1

data/app/assets/javascripts/spree/frontend/views/spree/products/index.js

@@ -0,0 +1,37 @@
+Spree.ready(function($) {
+  $('#sort-by-overlay-show-button').click(function() { $('#sort-by-overlay').show() })
+  $('#sort-by-overlay-hide-button').click(function() { $('#sort-by-overlay').hide() })
+
+  $('#filter-by-overlay-show-button').click(function() { $('#filter-by-overlay').show() })
+  $('#filter-by-overlay-hide-button').click(function() { $('#filter-by-overlay').hide() })
+
+  function closeNoProductModal() {
+    $('#no-product-available').removeClass('shown')
+    $('#overlay').removeClass('shown')
+  }
+
+  $('#no-product-available-close-button').click(closeNoProductModal)
+  $('#no-product-available-hide-button').click(closeNoProductModal)
+
+  $('.plp-overlay-card-item').click(function() {
+    $(this).toggleClass('plp-overlay-card-item--selected')
+  })
+
+  $('.color-select').click(function() {
+    var allOptionsBorders = $('.color-select-border')
+    var borderElement = $(this).find('.color-select-border')
+
+    allOptionsBorders.each(function() {
+      $(this).removeClass('color-select-border--selected')
+    })
+    borderElement.addClass('color-select-border--selected')
+  })
+
+  $('.plp-overlay-ul-li').click(function() {
+    $('.plp-overlay-ul-li--active').removeClass('plp-overlay-ul-li--active')
+      .addClass('plp-overlay-ul-li')
+
+    $(this).removeClass('plp-overlay-ul-li')
+      .addClass('plp-overlay-ul-li--active')
+  })
+})

data/app/assets/javascripts/spree/frontend/views/spree/products/modal_carousel.js

@@ -0,0 +1,35 @@
+Spree.ready(function($) {
+  var $modalCarousel = $('#productModalThumbnailsCarousel')
+  if ($modalCarousel.length) {
+    ThumbnailsCarousel($, $modalCarousel)
+  }
+
+  var activeSingleImageIndex = function(sourceWrappingClass) {
+    var $activeSingleImage = $('.' + sourceWrappingClass + ' .product-details-single [data-variant-id].active')
+    return $activeSingleImage.index()
+  }
+
+  var selectModalThumbnail = function(imgIndex) {
+    var $modalThumbnails = $('#productModalThumbnailsCarousel > div > div.carousel-item.product-thumbnails-carousel-item.active > div > div')
+    var $modalThumbnailsChildren = $modalThumbnails.children('[data-variant-id]')
+    if ($modalThumbnailsChildren.length > 0) {
+      $($modalThumbnailsChildren.get(imgIndex).getElementsByTagName('img')[0]).addClass('selected')
+    }
+  }
+
+  var activateModalSingleImg = function(imgIndex, targetWrappingClass) {
+    $('.' + targetWrappingClass + ' .product-details-single [data-variant-id].active').removeClass('active')
+    var $modalActiveSingleImage = $($('.' + targetWrappingClass + ' .product-details-single [data-variant-id]').parent().children().get(imgIndex))
+    $modalActiveSingleImage.addClass('active')
+  }
+
+  $('#picturesModal').on('show.bs.modal', function() {
+    var rowActiveSingleImageIndex = activeSingleImageIndex('row')
+    selectModalThumbnail(rowActiveSingleImageIndex - 1)
+    activateModalSingleImg(rowActiveSingleImageIndex, 'modal')
+  })
+
+  $('#picturesModal').on('hide.bs.modal', function() {
+    activateModalSingleImg(activeSingleImageIndex('modal'), 'row')
+  })
+})

data/app/assets/javascripts/spree/frontend/views/spree/shared/carousel/single.js

@@ -0,0 +1,139 @@
+Spree.ready(function($) {
+  // Adjust single carousel based on picked variant.
+
+  var productDetailsPage = $('#product-details')
+
+  if (productDetailsPage.length) {
+    var variantIdAttributeName = 'data-variant-id'
+    var carouselItemsContainerSelector = '.carousel-inner'
+    var carouselItemSelector = '[data-variant-id]'
+    var isMasterVariantAttributeName = 'data-variant-is-master'
+    var enabledCarouselItemClass = 'carousel-item'
+    var activeCarouselItemClass = 'active'
+    var getCarouselsWithVariantChangeTriggerSelector = function(triggerId) {
+      return (
+        '.product-carousel[data-variant-change-trigger-identifier=' +
+        triggerId +
+        ']'
+      )
+    }
+    var carouselEmptyClass = 'product-carousel--empty'
+    var carouselIndicatorsContainerSelector = '.product-carousel-indicators'
+    var carouselIndicatorSelector = '.product-carousel-indicators-indicator'
+    var enabledCarouselIndicatorClass =
+      'product-carousel-indicators-indicator--visible'
+    var activeCarouselIndicatorClass = 'active'
+    var carouselIndicatorSlidetoAttributeName = 'data-slide-to'
+
+    Spree.showSingleCarouselVariantImages = function($carousel, variantId) {
+      $carousel.carouselBootstrap4('dispose')
+      var oldActiveQualifiedIndex = null
+      var $firstQualifyingSlide = null
+      var qualifiedSlides = 0
+      var $carouselIndicatorsContainer = $carousel.find(
+        carouselIndicatorsContainerSelector
+      )
+      var $carouselItemsContainer = $carousel.find(carouselItemsContainerSelector)
+      var $carouselIndicators = $carousel.find(carouselIndicatorSelector)
+      $carousel
+        .find(carouselItemSelector)
+        .each(function(itemIndex, slideElement) {
+          var $slide = $(slideElement)
+          var qualifies =
+            $slide.attr(variantIdAttributeName) === variantId ||
+            $slide.attr(isMasterVariantAttributeName) === 'true'
+          var $slideIndicator = $carouselIndicators.eq(itemIndex)
+
+          if (qualifies) {
+            qualifiedSlides += 1
+            // Switch indicator slide to index based on picked variant.
+            $slideIndicator.attr(
+              carouselIndicatorSlidetoAttributeName,
+              qualifiedSlides - 1
+            )
+          } else {
+            $slideIndicator.detach()
+            $carouselIndicatorsContainer.append($slideIndicator)
+
+            $slide.detach()
+            $carouselItemsContainer.append($slide)
+          }
+
+          // Switch item visibility in the carousel based on picked variant.
+          $slide.toggleClass(enabledCarouselItemClass, qualifies)
+          // Switch indicator visibility in the carousel based on picked variant.
+          $slideIndicator.toggleClass(enabledCarouselIndicatorClass, qualifies)
+
+          // Safari doesn't correctly calculate width of $slideIndicator after page loading.
+          // w-100 class makes Safari work as expected. For visible images we don't need this class anymore.
+          $slideIndicator.find('img').toggleClass('w-100', !qualifies)
+
+          $slideIndicator.removeClass(activeCarouselIndicatorClass)
+
+          // Select an active image included in the new list of images for selected variant.
+          if (qualifies) {
+            if ($slide.hasClass(activeCarouselItemClass)) {
+              // Use the current active slide if it's still active after changing the variant.
+              oldActiveQualifiedIndex = qualifiedSlides - 1
+            }
+
+            if ($firstQualifyingSlide === null) {
+              $firstQualifyingSlide = $slide
+            }
+          } else {
+            $slide.removeClass(activeCarouselItemClass)
+          }
+        })
+
+      if (qualifiedSlides === 0) {
+        // There are no images to show after picking a variant. Disable the carousel.
+        $carousel.addClass(carouselEmptyClass)
+      } else {
+        $carousel.removeClass(carouselEmptyClass)
+
+        if (oldActiveQualifiedIndex === null) {
+          // Pick the first qualifying slide if the old active slide does not qualify.
+          $firstQualifyingSlide.addClass(activeCarouselItemClass)
+          // Activate first indicator.
+          $carouselIndicators
+            .filter('.' + enabledCarouselIndicatorClass)
+            .eq(0)
+            .addClass(activeCarouselIndicatorClass)
+        } else {
+          // Activate proper indicator based on active slide.
+          $carouselIndicators
+            .filter('.' + enabledCarouselIndicatorClass)
+            .eq(oldActiveQualifiedIndex)
+            .addClass(activeCarouselIndicatorClass)
+        }
+
+        $carousel.carouselBootstrap4()
+
+        setTimeout(function() {
+          // Add delay to allow other carousels to adjust their slides after a variant is picked before syncing slides.
+          var enabledSlides = $carousel.find('.' + enabledCarouselItemClass)
+          var toSlideIndex = enabledSlides.index(
+            enabledSlides.find('.' + activeCarouselItemClass)
+          )
+          Spree.goToCarouselSlide($carousel, toSlideIndex, true, true)
+          Spree.addSwipeEventListeners($carousel)
+
+          $carousel.on('slide.bs.carousel', function(event) {
+            $carousel.trigger('single_carousel:slide', event.to)
+          })
+        })
+      }
+    }
+
+    productDetailsPage.on('variant_id_change', function (options) {
+      var triggerId = options.triggerId
+      var variantId = options.variantId
+      $(getCarouselsWithVariantChangeTriggerSelector(triggerId)).each(function (
+        _carouselElementIndex,
+        carouselElement
+      ) {
+        Spree.showSingleCarouselVariantImages($(carouselElement), variantId)
+      })
+    })
+  }
+})

data/app/assets/javascripts/spree/frontend/views/spree/shared/carousel/swipes.js

@@ -0,0 +1,53 @@
+Spree.ready(function($) {
+  Spree.addSwipeEventListeners = function($carousel) {
+    var touchStartX = 0
+    var touchStartY = 0
+    var touchCurrentX = 0
+    var touchCurrentY = 0
+
+    var SWIPE_THRESHOLD = 40
+
+    $carousel.on('touchstart.bs.carousel', function(event) {
+      touchStartX = event.touches[0].clientX
+      touchStartY = event.touches[0].clientY
+    })
+
+    $carousel.on('touchmove.bs.carousel', function(event) {
+      touchCurrentX = event.touches[0].clientX
+      touchCurrentY = event.touches[0].clientY
+    })
+
+    $carousel.on('touchend.bs.carousel', function(_event) {
+      var carouselInstance = $carousel.data('bs.carousel')
+
+      var touchDeltaX = touchCurrentX - touchStartX
+      var touchDeltaY = touchCurrentY - touchStartY
+
+      var absDeltaX = Math.abs(touchDeltaX)
+      var absDeltaY = Math.abs(touchDeltaY)
+
+      if (touchCurrentX > 0 && absDeltaX > SWIPE_THRESHOLD && absDeltaX > absDeltaY) {
+        var direction = absDeltaX / touchDeltaX
+
+        if (direction > 0) {
+          carouselInstance.prev()
+        }
+
+        if (direction < 0) {
+          carouselInstance.next()
+        }
+      }
+
+      touchCurrentX = 0
+      touchStartX = 0
+      touchCurrentY = 0
+      touchStartY = 0
+
+      carouselInstance.touchDeltaX = 0
+    })
+  }
+
+  $('.carousel').each(function(_index, carousel) {
+    Spree.addSwipeEventListeners($(carousel))
+  })
+})

data/app/assets/javascripts/spree/frontend/views/spree/shared/carousel/thumbnails.js

@@ -0,0 +1,137 @@
+function ThumbnailsCarousel($, $carousel) {
+  var VISIBLE_IMAGE_SELECTOR = '.product-thumbnails-carousel-item-single--visible img'
+  var SELECTED_IMAGE_CLASS = 'selected'
+  var self = this
+
+  this.constructor = function() {
+    this.bindEventHandlers()
+  }
+
+  this.bindEventHandlers = function() {
+    $carousel.on('click', 'img', this.handleImageClick)
+    $carousel.on('thumbnails:ready', this.handleThumbnailsReady)
+
+    $('body').on('single_carousel:slide', this.handleSingleCarouselSlide)
+  }
+
+  this.handleImageClick = function(event) {
+    self.selectImage($(event.target))
+  }
+
+  this.handleThumbnailsReady = function(_event) {
+    var $image = $carousel.find(VISIBLE_IMAGE_SELECTOR).eq(0)
+
+    self.selectImage($image)
+  }
+
+  this.handleSingleCarouselSlide = function(_event, imageIndex) {
+    var $image = $carousel.find('[data-product-carousel-to-slide=' + imageIndex + '] img')
+
+    self.selectImage($image)
+  }
+
+  this.selectImage = function($image) {
+    this.unselectImages()
+
+    $image.addClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.unselectImages = function() {
+    $carousel.find('img').removeClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.constructor()
+}
+
+Spree.ready(function($) {
+  // Adjust thumbnails carousel based on picked variant.
+
+  if ($('#product-details').length) {
+
+    var variantIdAttributeName = 'data-variant-id'
+    var carouselItemSelector = '[data-variant-id]'
+    var isMasterVariantAttributeName = 'data-variant-is-master'
+    var enabledCarouselItemClass = 'carousel-item'
+    var activeCarouselItemClass = 'active'
+    var getCarouselsWithVariantChangeTriggerSelector = function(triggerId) {
+      return (
+        '.product-thumbnails-carousel[data-variant-change-trigger-identifier="' +
+        triggerId +
+        '"]'
+      )
+    }
+
+    Spree.showThumbnailsCarouselVariantImages = function($carousel, variantId) {
+      var carouselSlideSelector = '.product-thumbnails-carousel-item'
+      var carouselSlideContainerSelector =
+        '.product-thumbnails-carousel-item-content'
+      var enabledCarouselSingleClass =
+        'product-thumbnails-carousel-item-single--visible'
+      var carouselToSlideAttributeName = 'data-product-carousel-to-slide'
+      var carouselPerPageAttributeName = 'data-product-carousel-per-page'
+      var carouselEmptyClass = 'product-thumbnails-carousel--empty'
+
+      $carousel.carouselBootstrap4('dispose')
+      var qualifiedSlides = 0
+      var perPage = parseInt($carousel.attr(carouselPerPageAttributeName)) || 1
+      var $slides = $carousel.find(carouselSlideSelector)
+
+      $carousel
+        .find(carouselItemSelector)
+        .each(function(_itemIndex, slideElement) {
+          // Switch item visibility in the carousel based on picked variant.
+
+          var targetSlideIndex
+          var $slide = $(slideElement)
+          var qualifies =
+            $slide.attr(variantIdAttributeName) === variantId ||
+            $slide.attr(isMasterVariantAttributeName) === 'true'
+
+          if (qualifies) {
+            qualifiedSlides += 1
+            $slide.attr(carouselToSlideAttributeName, qualifiedSlides - 1)
+          }
+
+          targetSlideIndex = Math.max(0, Math.ceil(qualifiedSlides / perPage) - 1)
+          $slide.detach()
+          $slides
+            .eq(targetSlideIndex)
+            .find(carouselSlideContainerSelector)
+            .append($slide)
+          $slide.toggleClass(enabledCarouselSingleClass, qualifies)
+        })
+      var enabledSlidesCount = Math.ceil(qualifiedSlides / perPage)
+      $carousel
+        .find(carouselSlideSelector)
+        .each(function(slideIndex, slideElement) {
+          var $slide = $(slideElement)
+          $slide.toggleClass(
+            enabledCarouselItemClass,
+            slideIndex < enabledSlidesCount
+          )
+          $slide.toggleClass(activeCarouselItemClass, slideIndex === 0)
+        })
+
+      // If there are no images to show after picking a variant, disable the carousel.
+      $carousel.toggleClass(carouselEmptyClass, enabledSlidesCount === 0)
+
+      $carousel.carouselBootstrap4()
+      $carousel.trigger('thumbnails:ready')
+    }
+
+    $('#product-details').on('variant_id_change', function(options) {
+      var triggerId = options.triggerId
+      var variantId = options.variantId
+      $(getCarouselsWithVariantChangeTriggerSelector(triggerId)).each(function(
+        _carouselElementIndex,
+        carouselElement
+      ) {
+        Spree.showThumbnailsCarouselVariantImages($(carouselElement), variantId)
+      })
+    })
+
+    var $carousel = $('#productThumbnailsCarousel')
+
+    ThumbnailsCarousel($, $carousel)
+  }
+})

data/app/assets/javascripts/spree/frontend/views/spree/shared/carousel.js

@@ -0,0 +1,129 @@
+Spree.ready(function($) {
+  // Synchronize carousels.
+
+  var carouselGroupIdentifierAttributeName =
+    'data-product-carousel-group-identifier'
+  var carouselPerPageAttributeName = 'data-product-carousel-per-page'
+  var carouselIsSlaveAttributeName = 'data-product-carousel-is-slave'
+  var carouselToSlideAttributeName = 'data-product-carousel-to-slide'
+  var groupedCarousels = []
+  Spree.goToCarouselSlide = function(
+    $invokedCarousel,
+    slideIndex,
+    slideIndexLocalToSlide,
+    respectIsSlave
+  ) {
+    var elementGroupIdentifier = $invokedCarousel.attr(
+      carouselGroupIdentifierAttributeName
+    )
+
+    var carouselGroupDescription = groupedCarousels.find(function(
+      candidateCarouselGroupDescription
+    ) {
+      return (
+        candidateCarouselGroupDescription.identifier === elementGroupIdentifier
+      )
+    })
+
+    carouselGroupDescription.elements.forEach(function(element) {
+      var $candidateCarousel = element.$carousel
+      if (
+        (!respectIsSlave || element.isSlave) &&
+        !$candidateCarousel.is($invokedCarousel)
+      ) {
+        setTimeout(function() {
+          // setTimeout is required due to "Returns to the caller before the target item has been shown" issue.
+          // Details: https://getbootstrap.com/docs/4.0/components/carousel/#carouselnumber
+          if (slideIndexLocalToSlide) {
+            var invokedPerPage = carouselGroupDescription.elements.find(
+              function(element) {
+                var $candidateCarousel = element.$carousel
+                return $candidateCarousel.is($invokedCarousel)
+              }
+            ).perPage
+
+            $candidateCarousel.carouselBootstrap4(
+              Math.floor((slideIndex * invokedPerPage) / element.perPage)
+            )
+          } else {
+            $candidateCarousel.carouselBootstrap4(
+              Math.floor(slideIndex / element.perPage)
+            )
+          }
+        })
+      }
+    })
+  }
+
+  $('[' + carouselGroupIdentifierAttributeName + ']').each(function(
+    _carouselIndex,
+    carouselElement
+  ) {
+    var $carousel = $(carouselElement)
+
+    $carousel.carouselBootstrap4()
+
+    var elementGroupIdentifier = $carousel.attr(
+      carouselGroupIdentifierAttributeName
+    )
+    var perPage = parseInt($carousel.attr(carouselPerPageAttributeName)) || 1
+    var isSlave = !!$carousel.attr(carouselIsSlaveAttributeName)
+
+    var carouselGroupDescription = groupedCarousels.find(function(
+      candidateCarouselGroupDescription
+    ) {
+      return (
+        candidateCarouselGroupDescription.identifier === elementGroupIdentifier
+      )
+    })
+    if (carouselGroupDescription) {
+      carouselGroupDescription.elements.push({
+        $carousel: $carousel,
+        perPage: perPage,
+        isSlave: isSlave
+      })
+    } else {
+      groupedCarousels.push({
+        identifier: elementGroupIdentifier,
+        elements: [
+          {
+            $carousel: $carousel,
+            perPage: perPage,
+            isSlave: isSlave
+          }
+        ]
+      })
+    }
+  })
+
+  $('body').on('click', '[' + carouselToSlideAttributeName + ']', function(
+    event
+  ) {
+    var $invokedCarousel = $(
+      event.currentTarget.closest(
+        '[' + carouselGroupIdentifierAttributeName + ']'
+      )
+    )
+
+    var toSlideOnPageIndex = parseInt(
+      $(event.currentTarget).attr(carouselToSlideAttributeName)
+    )
+
+    Spree.goToCarouselSlide($invokedCarousel, toSlideOnPageIndex, false, false)
+  })
+
+  $('body').on(
+    'slide.bs.carousel',
+    '[' + carouselGroupIdentifierAttributeName + ']',
+    function(event) {
+      var invokedCarouselElement = event.relatedTarget.closest(
+        '[' + carouselGroupIdentifierAttributeName + ']'
+      )
+      var $invokedCarousel = $(invokedCarouselElement)
+      var toSlideIndex = event.to
+      Spree.goToCarouselSlide($invokedCarousel, toSlideIndex, true, true)
+    }
+  )
+
+  $('.carousel').carouselBootstrap4()
+})

data/app/assets/javascripts/spree/frontend/views/spree/shared/delete_address_popup.js

@@ -0,0 +1,27 @@
+Spree.ready(function($) {
+  var deleteAddressLinks = document.querySelectorAll('.js-delete-address-link');
+  if (deleteAddressLinks.length > 0) {
+    deleteAddressLinks.forEach(function(deleteLink) {
+      deleteLink.addEventListener('click', function(e) {
+        document.querySelector('#overlay').classList.add('shown');
+        document.querySelector('#delete-address-popup').classList.add('shown');
+        document.querySelector('#delete-address-popup-confirm').href = e.currentTarget.dataset.address;
+      }, false)
+    })
+  }
+
+  document.querySelector('#overlay').addEventListener('click', function () {
+    var addressActionElement = document.querySelector('#delete-address-popup');
+    if (addressActionElement) addressActionElement.classList.remove('shown');
+  }, false);
+
+  var popupCloseButtons = document.querySelectorAll('.js-delete-address-popup-close-button')
+  if (popupCloseButtons.length > 0) {
+    popupCloseButtons.forEach(function(closeButton) {
+      closeButton.addEventListener('click', function(e) {
+        document.querySelector('#overlay').classList.remove('shown');
+        document.querySelector('#delete-address-popup').classList.remove('shown');
+      })
+    })
+  }
+})

data/app/assets/javascripts/spree/frontend/views/spree/shared/mobile_navigation.js

@@ -0,0 +1,123 @@
+Spree.ready(function($) {
+
+  function MobileNavigationManager()  {
+    this.mobileNavigation = document.querySelector('.mobile-navigation');
+
+    if (this.mobileNavigation !== null) {
+      this.burgerButton = document.querySelector('.navbar-toggler');
+      this.closeButton = document.querySelector('#mobile-navigation-close-button');
+      this.categoryLinks = document.querySelectorAll('.mobile-navigation-category-link');
+      this.backButton = document.querySelector('#mobile-navigation-back-button');
+      this.overlay = document.querySelector('#overlay');
+      this.navigationOpen = false;
+      this.openedCategories = ['main'];
+
+      this.onResize = this.onResize.bind(this);
+      this.onCategoryClick = this.onCategoryClick.bind(this);
+      this.onTouchMove = this.onTouchMove.bind(this);
+      this.onBurgerClick = this.onBurgerClick.bind(this);
+      this.onCloseClick = this.onCloseClick.bind(this);
+      this.onBackClick = this.onBackClick.bind(this);
+      this.closeAllCategories = this.closeAllCategories.bind(this);
+
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('turbolinks:request-start', this.onCloseClick);
+
+      this.mobileNavigation.addEventListener('touchmove', this.onTouchMove, false);
+      this.burgerButton.addEventListener('click', this.onBurgerClick, false);
+      this.closeButton.addEventListener('click', this.onCloseClick, false);
+      this.backButton.addEventListener('click', this.onBackClick, false);
+
+      this.categoryLinks.forEach(function(link) {
+        link.addEventListener('click', this.onCategoryClick)
+      }.bind(this))
+    }
+  }
+
+  MobileNavigationManager.prototype.onResize = function(e) {
+    var currentWidth = e.currentTarget.innerWidth;
+    if (this.navigationOpen && currentWidth >= 1200) this.close();
+  }
+
+  MobileNavigationManager.prototype.onCategoryClick = function(e) {
+    var category = e.currentTarget.dataset.category;
+    e.preventDefault();
+    this.openCategory(category);
+  }
+
+  MobileNavigationManager.prototype.onTouchMove = function(e) {
+    e.preventDefault();
+  };
+
+  MobileNavigationManager.prototype.onBurgerClick = function() {
+    if (this.navigationOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  MobileNavigationManager.prototype.onCloseClick = function() {
+    this.close();
+    setTimeout(this.closeAllCategories, 500);
+  };
+
+  MobileNavigationManager.prototype.onBackClick = function() {
+    this.closeCurrentCategory();
+  };
+
+  MobileNavigationManager.prototype.open = function() {
+    this.navigationOpen = true;
+    this.mobileNavigation.classList.add('shown');
+    document.body.style.overflow = "hidden";
+    this.overlay.classList.add('shown');
+  }
+
+  MobileNavigationManager.prototype.close = function() {
+    this.navigationOpen = false;
+    this.mobileNavigation.classList.remove('shown');
+    document.body.style.overflow = "";
+    this.overlay.classList.remove('shown');
+  }
+
+  MobileNavigationManager.prototype.openCategory = function(category) {
+    this.openedCategories.push(category);
+    var subList = document.querySelector('ul[data-category=' + category + ']');
+    if (subList) {
+      subList.classList.add('shown');
+      this.backButton.classList.add('shown');
+    }
+    return false;
+  }
+
+  MobileNavigationManager.prototype.closeCurrentCategory = function() {
+    var category = this.openedCategories.pop();
+    var subList = document.querySelector('ul[data-category=' + category + ']');
+    if (subList) {
+      subList.classList.remove('shown');
+    }
+    if (this.openedCategories[this.openedCategories.length - 1] === 'main') {
+      this.backButton.classList.remove('shown');
+    }
+    return false;
+  }
+
+  MobileNavigationManager.prototype.closeCategory = function(category) {
+    var subList = document.querySelector('ul[data-category=' + category + ']');
+    subList.style.transition = 'none';
+    subList.classList.remove('shown');
+    setTimeout(function(){ subList.style.transition = ''; }, 500);
+  }
+
+  MobileNavigationManager.prototype.closeAllCategories = function() {
+    var openedCategories = this.openedCategories;
+    if (openedCategories.length === 1) return false;
+    for (var i = openedCategories.length - 1; i > 0; i--) {
+      var category = openedCategories.pop();
+      this.closeCategory(category);
+    }
+    this.backButton.classList.remove('shown');
+  }
+
+  new MobileNavigationManager();
+})