Work4Home

1.js

const filterProductsRow = window.jQuery('div#FiltersAndProductsWrapper div.col-xs-12 div.FilterProductsTable div.FilterProductsRow').css({
  'display': 'flex'
  , 'flex-direction': 'column'
})

const filterContainer = window.jQuery('div#FilterContainer', filterProductsRow).css({
  'order': '1'
}).removeClass('col-xs-12 col-md-2 MobClosed')

const productContainer = window.jQuery('div#ProductContainer', filterProductsRow).css({
  'order': '2'
})

const innerFilterContainer = window.jQuery('div#innerfiltercontainer', filterContainer).css({
  'width': 'auto'
})

const filterlist = window.jQuery('ul#filterlist', innerFilterContainer).css({
  'display': 'flex'
})

const productFilter = window.jQuery('li.productFilter', filterlist).css({
  'flex': '0 1 33.33%'
})

2.js

jQ = jQuery

jQ('body').append(jQ('<link>', {
  'rel': 'stylesheet',
  'href': 'http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
}))

// lodash debounce
// ;(function(){function e(){}function t(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}function n(e){return null!=e&&typeof e=="object"}function o(e){var t;if(!(t=typeof e=="symbol")&&(t=n(e))){if(null==e)e=e===i?"[object Undefined]":"[object Null]";else if(v&&v in Object(e)){t=d.call(e,v);var o=e[v];try{e[v]=i;var r=true}catch(e){}var u=j.call(e);r&&(t?e[v]=o:delete e[v]),e=u}else e=j.call(e);t="[object Symbol]"==e}return t}function r(e){if(typeof e=="number")return e;if(o(e))return u; if(t(e)&&(e=typeof e.valueOf=="function"?e.valueOf():e,e=t(e)?e+"":e),typeof e!="string")return 0===e?e:+e;e=e.replace(f,"");var n=l.test(e);return n||a.test(e)?s(e.slice(2),n?2:8):c.test(e)?u:+e}var i,u=NaN,f=/^\s+|\s+$/g,c=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,a=/^0o[0-7]+$/i,s=parseInt,b=typeof self=="object"&&self&&self.Object===Object&&self,p=typeof global=="object"&&global&&global.Object===Object&&global||b||Function("return this")(),y=(b=typeof exports=="object"&&exports&&!exports.nodeType&&exports)&&typeof module=="object"&&module&&!module.nodeType&&module,m=Object.prototype,d=m.hasOwnProperty,j=m.toString,v=(m=p.Symbol)?m.toStringTag:i,g=Math.max,O=Math.min,x=function(){ return p.Date.now()};window.optimost.saitama.debounce=function(e,n,o){function u(t){var n=s,o=b;return s=b=i,j=t,y=e.apply(o,n)}function f(e){var t=e-d;return e-=j,d===i||t>=n||0>t||h&&e>=p}function c(){var e=x();if(f(e))return l(e);var t,o=setTimeout;t=e-j,e=n-(e-d),t=h?O(e,p-t):e,m=o(c,t)}function l(e){return m=i,T&&s?u(e):(s=b=i,y)}function a(){var e=x(),t=f(e);if(s=arguments,b=this,d=e,t){if(m===i)return j=e=d,m=setTimeout(c,n),v?u(e):y;if(h)return m=setTimeout(c,n),u(d)}return m===i&&(m=setTimeout(c,n)),y}var s,b,p,y,m,d,j=0,v=false,h=false,T=true; if(typeof e!="function")throw new TypeError("Expected a function");return n=r(n)||0,t(o)&&(v=!!o.leading,p=(h="maxWait"in o)?g(r(o.maxWait)||0,n):p,T="trailing"in o?!!o.trailing:T),a.cancel=function(){m!==i&&clearTimeout(m),j=0,s=d=b=m=i},a.flush=function(){return m===i?y:l(x())},a},e.isObject=t,e.isObjectLike=n,e.isSymbol=o,e.now=x,e.toNumber=r,e.VERSION="4.17.4",typeof define=="function"&&typeof define.amd=="object"&&define.amd?(p._=e, define(function(){return e})):y?((y.exports=e)._=e,b._=e):p._=e;}).call(this);

const duration = 500
const iconWidth = 50
const getRect = jQElt => {
  let elt = 0
  return (elt = jQElt) && (elt = elt[0]) && (elt = elt.getBoundingClientRect())
}
const bodyRect = getRect(jQ('body'))
const midHeight = window.parseInt(bodyRect && bodyRect.height / 2 || 400)
const productContainerRect = getRect(jQ('div#ProductContainer'))
const productContainerRectRight = productContainerRect.right
const productContainerRectLeft = productContainerRect.left
const midRight = bodyRect && bodyRect.right
const maxIconSpace = 75 // 15px + iconSize "50px"
const backToTop = jQ('<button>', {
  'id': 'backToTopIcon',
  'class': 'fa fa-arrow-circle-up fa-4x',
  'title': 'Top'
})
const btnStyle = {
  'position': 'fixed',
  'top': `${midHeight}px`,
  'left': `${productContainerRectRight + maxIconSpace < midRight ? productContainerRectRight + 15 : productContainerRectLeft - maxIconSpace}px`
}
const btnFoo = event => {
  event.preventDefault()
  window.optimost.saitama.debounce(window.optimost.saitama.fireAjaxCounter, 250, {'leading': true, 'trailing': false})(58)
  ;jQ('html, body').animate({scrollTop: 0}, duration)
  return false
}

jQ(window).on('scroll', () => {
  if (!/hidden/i.test(jQ('div.showFilterButtonWrapper').css('visibility'))) {
    jQ('footer.FooterWrap').prepend(backToTop.css(btnStyle).off('click').on('click', btnFoo))
  } else {
    backToTop.remove()
  }    
})


// Counter tracking the filter product options clicked.
window.jQuery('li.productFilter').each((_, productFilter) => {
  window.jQuery('div.productFilterTitleBox h3', productFilter).each((_, titleBox) => {
    const title = window.jQuery(titleBox).text()
    window.jQuery('div.productFilterList div.FilterListItem ', productFilter).each((_, productOption) => {
      const jQProductOption = window.jQuery(productOption)
      const option = jQProductOption.data('productname')
      jQProductOption.on('click', _ => {
        const oldOpcounter = window.jQuery.extend({}, window.opcounter)
        window.opcounter = window.jQuery.extend({}, window.opcounter, {'opfiltergroup': title, 'opfiltervalue': option})
        window.optimost.saitama.fireAjaxCounter(56)
        window.opcounter = window.jQuery.extend({}, oldOpcounter)
      })
    })
  })
})

// Counter tracking the sorting options selected.
window.$optg.v.uscbacktotop = {'orderBy': 'rank'}
window.location.hash.replace(/OrderBy=([^\&]*)/, (_, orderBy) => window.$optg.v.uscbacktotop.orderBy = orderBy)
window.jQuery(document).ajaxSuccess((_a, _b, options) => {
  options.url.replace(/sortOption=([^\&]*)/, (_, sortOption) => {
    if (sortOption !== window.$optg.v.uscbacktotop.orderBy) {
      window.$optg.v.uscbacktotop.orderBy = sortOption
      const oldOpcounter = window.jQuery.extend({}, window.opcounter)
      window.opcounter = window.jQuery.extend({}, window.opcounter, {'opsortbyselection': sortOption})
      window.optimost.saitama.fireAjaxCounter(57)
      window.opcounter = window.jQuery.extend({}, oldOpcounter)
    }
  })
})

new1.js

const getRect = jQElt => {
  let elt = 0
  return (elt = jQElt) && (elt = elt[0]) && (elt = elt.getBoundingClientRect())
}

let filterProductsRow = window.jQuery('div#FiltersAndProductsWrapper div.col-xs-12 div.FilterProductsTable div.FilterProductsRow')
let filterContainer = window.jQuery('div#FilterContainer', filterProductsRow)
const filterContainerRectwidth = ((filterContainerRect) => filterContainerRect && filterContainerRect.width || 0)(getRect(filterContainer))

// The main wrapper becomes a flex container.
// By Column.
filterProductsRow = filterProductsRow.css({
  'display': 'flex'
  , 'flex-direction': 'column'
})

// Remove the blocking grid options.
// "RefineBy" elt is the top elt, Options are the second.
filterContainer = filterContainer.css({
  'order': '1'
}).removeClass('col-xs-12 col-md-2 MobClosed')
const productContainer = window.jQuery('div#ProductContainer', filterProductsRow).css({
  'order': '2',
  'margin-left': `${filterContainerRectwidth}px`
})
const innerFilterContainer = window.jQuery('div#innerfiltercontainer', filterContainer).css({
  'width': 'auto',
  'margin-bottom': '20px' // Add some space between the filter bar and the options bar
})

// Removes the ShowFilter button Div.
const showFilterButtonDiv = window.jQuery('div#showFilterButtonDiv', innerFilterContainer).css({
  'display': 'none'
})

// The options are their own flex container, order by row.
const filterlist = window.jQuery('ul#filterlist', innerFilterContainer).css({
  'display': 'flex'
})
// Make sure the sizes are the same.
const productFilter = window.jQuery('li.productFilter', filterlist).css({
  'flex': '0 1 33.33%'
})
// Do not show expanded options, only the title for each.
const filterTitleBox = window.jQuery('div.productFilterTitleBox', productFilter).addClass('FilterClosed')
const productFilterList = window.jQuery('div.productFilterList', productFilter).css({
  'display': 'none'
})

window.jQuery(window).off('scroll')

const topNavBarBottom = ((topNavBarRect) => topNavBarRect && topNavBarRect.bottom || 0)(getRect(window.jQuery('div.TopNavBar')))