{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/ShopTheLookComponent.js"],"names":["ShopTheLookComponent","_classCallCheck","this","_this2","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","call","carousel","$","SELECTORS","controller","ScrollMagic","Controller","containers","container","backdropMobile","pins","isClick","scene","timeout","timeout2","Component","fixedWrapper","arrows","wrapperPins","backgroundImage","active","pxScrolled","pxScrollable","scrolled","reduce","prev","curr","Math","abs","varPins","percentScrolled","nextPins","forEach","element","index","push","closestPin","$el","scrollable","height","elHeight","elOffset","offset","top","document","documentElement","scrollTop","clientHeight","insideScrolled","toPercent","goTo","indexOf","console","log","slick","_this","length","each","Number","style","slice","sort","a","b","window","on","find","event","currentSlide","nextSlide","setTimeout","animate","_this3","$container","offsetStart","duration","Scene","triggerElement","setPin","addTo","handleScrollInElement","complete","trigger","addEventListener","evt","firstTouch","changedTouches","xDown","clientX","yDown","clientY","xUp","addClass","click","e","hasClass","preventDefault","$matchMedia","mobileEvents","init","undefined","destroy","off","removeClass","clearTimeout","_this4","bindEvents"],"mappings":"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","file":"components-ShopTheLookComponent.chunks.js","sourcesContent":["import Component from '../abstracts/Component';\nimport ScrollMagic from 'scrollmagic';\nimport 'debug.addIndicators';\n\nexport default class ShopTheLookComponent extends Component {\n\n  get SELECTORS() {\n    return {\n      container: '.c-shop-the-look',\n      backdropMobile: '.js-backdrop-stl',\n      fixedWrapper: '.fixed-container',\n      carousel: '.shop-the-look-carousel',\n      arrows: '.slick-arrow',\n      wrapperPins: '.js-wrapper-pins',\n      pins: '.js-pin',\n      backgroundImage: '.background-image-wrapper img'\n    }\n  }\n\n  get CLASSES() {\n    return {\n      active: 'active'\n    }\n  }\n\n  constructor() {\n    super();\n\n    this.carousel = $(this.SELECTORS.carousel);\n    this.controller = new ScrollMagic.Controller();\n    this.containers = $(this.SELECTORS.container);\n    this.backdropMobile = $(this.SELECTORS.backdropMobile);\n    this.pins = $(this.SELECTORS.pins);\n    this.isClick = false;\n    this.scene;\n    this.timeout;\n    this.timeout2;\n  }\n\n  toPercent(pxScrolled, pxScrollable) {\n    return (pxScrolled * 100) / pxScrollable;\n  }\n\n  closestPin(scrolled, pins) {\n    return pins.reduce(function (prev, curr) {\n      return (Math.abs(curr - scrolled) < Math.abs(prev - scrolled) ? curr : prev);\n    });\n  }\n\n  nextPin(varPins, percentScrolled) {\n    let nextPins = [];\n    varPins.forEach((element, index) => {\n      element > percentScrolled ? nextPins.push(element) : '';\n    });\n    return nextPins[0];\n  }\n\n  bindScroll(element, varPins, closestPin) {\n    let $el = $(element),\n      scrollable = $(this.SELECTORS.wrapperPins).height(),\n      elHeight = $el.height(),\n      elOffset = $el.offset().top,\n      scrolled = document.documentElement.scrollTop;\n\n    if (scrolled >= elOffset && scrolled <= (elOffset + elHeight - document.documentElement.clientHeight)) {\n      let insideScrolled = scrolled - elOffset;\n      let percentScrolled = this.toPercent(insideScrolled, scrollable);\n\n      if (closestPin != this.closestPin(percentScrolled, varPins)) {\n        closestPin = this.closestPin(percentScrolled, varPins);\n        let goTo = varPins.indexOf(closestPin);\n        console.log('vado alla slide {}', goTo);\n        this.carousel.slick('slickGoTo', goTo);\n      }\n    }\n  }\n\n\n  handleScrollInElement(element) {\n    let _this = this,\n      $el = $(element),\n      scrollable = $(this.SELECTORS.wrapperPins).height(),\n      elHeight = $el.height(),\n      elOffset = $el.offset().top;\n\n    if (this.pins.length) {\n      let varPins = [];\n\n      this.pins.each((index, element) => {\n        varPins.push(Number(element.style.top.slice(0, -1)));\n      })\n\n      // riordino l'array\n      varPins.sort((a, b) => {\n        return a - b;\n      })\n\n      let closestPin = varPins[0];\n\n      $(window).on('scroll.stl-component', () => {\n        // _this.bindScroll(element, varPins, closestPin);\n        let scrolled = document.documentElement.scrollTop;\n\n        if (scrolled >= elOffset && scrolled <= (elOffset + elHeight - document.documentElement.clientHeight)) {\n          let insideScrolled = scrolled - elOffset;\n          let percentScrolled = _this.toPercent(insideScrolled, scrollable);\n\n          if (closestPin != _this.closestPin(percentScrolled, varPins)) {\n            closestPin = _this.closestPin(percentScrolled, varPins);\n            let goTo = varPins.indexOf(closestPin);\n            // TODO festire meglio il goTo slide\n            _this.carousel.slick('slickGoTo', goTo);\n          }\n        }\n      });\n\n      _this.carousel.find(_this.SELECTORS.arrows).on('click.stl-carousel', () => {\n        _this.isClick = true;\n      });\n\n      _this.carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) {\n        setTimeout(() => {\n          if (_this.isClick) {\n            $('html, body').animate({\n              scrollTop: $(`.wrapper-pins div:nth-child(${nextSlide + 1})`).offset().top - document.documentElement.clientHeight / 2\n            }, 1000);\n            _this.isClick = false;\n          }\n        }, 100);\n      });\n    }\n  }\n\n  init(container) {\n    let $container = $(container),\n        image = $container.find(this.SELECTORS.backgroundImage);\n\n    image.on(\"load\", () => {\n      let fixedWrapper = $container.find(this.SELECTORS.fixedWrapper),\n          offsetStart = document.documentElement.clientHeight / 2,\n          duration = $container.height() - (offsetStart * 2);\n\n      // prevent scrollmagic error\n      if (duration < 0) duration = 1;\n  \n      this.scene = new ScrollMagic.Scene({\n          triggerElement: container,\n          offset: offsetStart,\n          duration: duration\n        })\n        .setPin(fixedWrapper[0])\n        // .addIndicators()\n        .addTo(this.controller);\n  \n      this.handleScrollInElement(container);\n    }).each((index, element) => {\n\n        // trigger event when image is cached\n        if(element.complete) {\n          $(element).trigger('load');\n\n      }\n    });\n  }\n\n  mobileEvents(container) {\n    container.addEventListener('touchstart', handleTouchStart);\n    container.addEventListener('touchend', handleTouchEnd);\n\n    let _this = this,\n      xDown = null,\n      yDown = null;\n\n    function handleTouchStart(evt) {\n      const firstTouch = evt.changedTouches[0];\n      xDown = firstTouch.clientX;\n      yDown = firstTouch.clientY;\n    };\n\n    function handleTouchEnd(evt) {\n      if (!xDown || !yDown) {\n        return;\n      }\n\n      var xUp = evt.changedTouches[0].clientX;\n      var yUp = evt.changedTouches[0].clientY;\n\n      var xDiff = xDown - xUp;\n      var yDiff = yDown - yUp;\n\n      if (xDiff > 20) {\n        $(_this.backdropMobile).addClass('visible');\n        $(container).addClass('swiped');\n      }\n\n      /* reset values */\n      xDown = null;\n      yDown = null;\n    };\n\n    // MR3-573\n    $(container).find(this.SELECTORS.carousel).click((e) => {\n      if(!$(container).hasClass('swiped')){\n        e.preventDefault();\n        $(_this.backdropMobile).addClass('visible');\n        $(container).addClass('swiped');\n      }\n    });\n  }\n\n  bindEvents(container) {\n    let _this = this;\n\n    _this.carousel.on('init', function (event, slick) {\n      _this.log(\"Shop the look initialized\");\n      if (_this.$matchMedia('md', null)) {\n        _this.mobileEvents(container);\n      } else {\n        _this.init(container);\n      }\n    });\n\n    window.addEventListener('resize', () => {\n\n      _this.log(\"Shop the look re-initialized\");\n      // eseguo l'unbind degli eventi\n      if (_this.scene != undefined) _this.scene.destroy(true);\n      _this.carousel.find(_this.SELECTORS.arrows).off('click.stl-carousel');\n      _this.carousel.off('beforeChange');\n      $(window).off('scroll.stl-component');\n      // reinizializzo il componente\n\n      if (_this.$matchMedia('md', null)) {\n        $(_this.backdropMobile).removeClass('visible');\n        $(container).removeClass('swiped');\n        // _this.log('sono sotto md');\n        _this.mobileEvents(container);\n      } else {\n        clearTimeout(_this.timeout);\n        _this.timeout = setTimeout(() => {\n          _this.init(container);\n        }, 200);\n      }\n\n    });\n\n  }\n\n  render() {\n\n    if (this.containers.length) {\n      this.containers.each((index, element) => {\n        if (!$(element).hasClass('is-edit')) this.bindEvents(element);\n      })\n    }\n\n  }\n}\n"],"sourceRoot":""}