backtotop

stickyFilters.js

// @flow
/* eslint array-callback-return: "error" */
/* eslint block-scoped-const: "error" */
/* eslint no-implied-eval: "error" */
/* eslint comma-style: ["error", "first"] */
/* eslint max-len: ["error", 200] */
/* eslint max-params: ["error", 4] */
/* eslint-env es6 */
/* eslint newline-per-chained-call: ["error", { "ignoreChainWithDepth": 2 }] */
/* eslint operator-linebreak: [2, "before"] */

// in the setup
// const formCSS = 'form#QuestionSetViewModel {display: none;}'
// trial.saitama.addStyle(formCSS, 'op_css_uscbacktotopPreload')
// <script>
window.optimost.services['w{{$creative.waveId}}_uscbacktotop'].opVariant2 = (trial, jQ) => {
  try {
    if (trial && jQ) {
      window.optimost.services['w{{$creative.waveId}}_uscbacktotop'].creative = 2

      jQ(() => {
        const windowHeight = document.querySelector('body').clientHeight
        let lastScrollTop = 0
        const innerfiltercontainer = window.jQuery('#innerfiltercontainer')
        const filterContainerWidth = document.querySelector('#FilterContainer').clientWidth
        const getinnerfiltercontainerCurrentTop = () => window.parseInt(innerfiltercontainer.css('top'))
        const getHeaderHeight = () => document.querySelector('#HeaderGroup').clientHeight
        const fixFooterOverflow = () => {
          const filtersAndProductsWrapper = window.jQuery('#FiltersAndProductsWrapper')
          if (filtersAndProductsWrapper.height() > innerfiltercontainer.height()) {
            const filterBottom = innerfiltercontainer.offset().top + innerfiltercontainer.height()
            const wrapperBottom = filtersAndProductsWrapper.offset().top + filtersAndProductsWrapper.height()
            if (filterBottom > wrapperBottom) {
              const newTop = getinnerfiltercontainerCurrentTop() - (filterBottom - wrapperBottom)
              innerfiltercontainer.css({
                'top': newTop
                , 'position': 'relative'
                , 'width': filterContainerWidth
              })
            }
          }
        }
        const innerfiltercontainerSetRelativeTop = () => {
          let ih = innerfiltercontainer.offset().top - innerfiltercontainer.parent().offset().top
          if (ih < 0) {
            ih = 0
          }
          innerfiltercontainer.css({
            'position': 'relative'
            , 'top': ih
            , 'width': filterContainerWidth
          })
          fixFooterOverflow()
        }
        const innerfiltercontainerSetRelativeBottom = lowerLimit => {
          const filterHeight = innerfiltercontainer.find('div.clearfix:last')[0].getBoundingClientRect().top - innerfiltercontainer[0].getBoundingClientRect().top
          const newCSS = {
            'position': 'fixed'
            , 'width': filterContainerWidth
            , 'top': (lowerLimit < windowHeight ? lowerLimit - 12 : windowHeight) - filterHeight
          }
          innerfiltercontainer.css(newCSS)
        }

//        const setRelativeBottom = lowerLimit => window.optimost.saitama.debounce(innerfiltercontainerSetRelativeBottom, 200)(lowerLimit)

        const filterScrollHandlerNoShowFilter = () => {
          const st = window.jQuery(document).scrollTop()
           if (document.querySelector('#ProductContainer').getBoundingClientRect().top < getHeaderHeight()) {
            innerfiltercontainer.css({
              'position': 'fixed'
              , 'width': filterContainerWidth
              , 'top': getHeaderHeight()
            })
          } else {
            if (st > lastScrollTop) {
              // downscroll
              const lowerLimit = jQ('div.paginationWrapper:last')[0].getBoundingClientRect().top
              if (lowerLimit < windowHeight || innerfiltercontainer.css('position') === 'fixed') {
                innerfiltercontainerSetRelativeBottom(lowerLimit)
              }
              const innerBottom = innerfiltercontainer.find('div.clearfix:last')[0].getBoundingClientRect().top
              if (innerBottom < windowHeight && lowerLimit > windowHeight) {
                innerfiltercontainer.css({
                  'position': 'fixed'
                  , 'width': filterContainerWidth
                  , 'top': innerfiltercontainer[0].getBoundingClientRect().top - innerBottom + windowHeight
                })
              }
            } else {
              // upscroll
              if (innerfiltercontainer.css('position') === 'fixed') {
                innerfiltercontainerSetRelativeTop()
              }
              const innerTop = innerfiltercontainer[0].getBoundingClientRect().top
              if (innerTop > 0 && innerfiltercontainer.position().top > 0) {
                innerfiltercontainer.css({
                  'position': 'fixed'
                  , 'width': filterContainerWidth
                  , 'top': getHeaderHeight()
                })
              }
            }
          }
          lastScrollTop = st
        }

        jQ(window)
          .off('scroll')
          .on('scroll', filterScrollHandlerNoShowFilter)
      })
    } else {
      trial.saitama.log('opVariant2 condition not met', {
        trial
        , jQ
      })
    }
  } catch (opVariant2Err) {
    trial.saitama.log('! opVariant2 error: ', opVariant2Err)
  }
  return trial
}

window.optimost.services['w{{$creative.waveId}}_uscbacktotop'].opVariant2(
  window.optimost.services['w{{$creative.waveId}}_uscbacktotop']
  , window.jQuery
)
// </script>
// http://www.usc.co.uk/levis?opqa=true&opglobalqa=true
// https://secure.marketinghub.opentext.com/by/trial/1633/p/qatool/4/content.html?key=backToTop&_213=1_backToTop&_214=2_stickyFilters&_212=control&accountId=1717&waveId=285&accNm=%0A%09%09%09%09USC%09%09%09&brdCrmb=Product%20Listing%20Pages%3E%3EU058%20-%20Back%20to%20Top%3E%3ETrial%201%20%2850%25%29%3E%3EQA%3E%3EQA%20Wave%202