{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/CollapseComponent.js"],"names":["CollapseComponent","compEl","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","call","maxRes","$component","dataset","collapseMaxres","collapses","querySelectorAll","SELECTORS","collapse","collapseBoxes","document","collapseTrigger","Component","trigger","tab","collapseContent","_this2","forEach","i","querySelector","getAttribute","addEventListener","handleTrigger","setAttribute","click","item","index","classList","toggle","add","_this3","contains","height","offsetHeight","style","maxHeight","setCollapse","listenTrigger","isTablet","isMobile","_this4","content","handleCollapseTrigger","target","collapseBodyclass","body","window","matchMedia","matches","ctx","$on","$customEvents","COLLAPSE_EVENTS","update","e","payload","extraDiv","closest","css","log","initCollapseMobile","initCollapse","bindEvents"],"mappings":"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","file":"component-CollapseComponent.chunks.js","sourcesContent":["import Component from '../abstracts/Component';\n\nexport default class CollapseComponent extends Component {\n\n  get COMPONENTNAME() {\n    return 'CollapseComponent';\n  }\n\n  get SELECTORS() {\n    return {\n      collapse: '[data-collapse]',\n      trigger: '[data-trigger]',\n      tab: '[data-tab]',\n      collapseBoxes: '[data-collapse-box]',\n      collapseContent: '[data-collapse-content]',\n      collapseTrigger: '[data-collapse-trigger]',\n    };\n  }\n\n  constructor(compEl) {\n    super(compEl);\n    this.maxRes = this.$component.dataset.collapseMaxres;\n    this.collapses = this.$component.querySelectorAll(this.SELECTORS.collapse);\n    // globals\n    this.collapseBoxes = document.querySelectorAll(this.SELECTORS.collapseBoxes);\n    this.collapseTrigger = document.querySelectorAll(this.SELECTORS.collapseTrigger);\n  }\n\n  listenTrigger() {\n    this.collapses.forEach((collapse, i) => {\n      let trigger = collapse.querySelector(this.SELECTORS.trigger);\n      if (trigger.getAttribute('data-trigger') != 'triggered' ) {\n        trigger.addEventListener('click', () => this.handleTrigger(collapse, i));\n        trigger.setAttribute('data-trigger','triggered');\n        if (trigger.getAttribute('data-collapse-opened') != null && trigger.getAttribute('data-collapse-opened') == 'true') {\n          // trigger the open\n          trigger.click();\n        }\n      }\n    });\n  }\n\n  handleTrigger(collapse, i) {\n    this.collapses.forEach((item, index) => {\n      if (index === i) {\n        item.classList.toggle('collapsed');\n      } else {\n        item.classList.add('collapsed');\n      }\n    });\n  }\n\n  setCollapse() {\n    this.collapses.forEach(collapse => {\n      if (!collapse.classList.contains('collapsed')) {\n        let tabs = collapse.querySelectorAll(this.SELECTORS.tab);\n        tabs.forEach(tab => {\n          let height = tab.offsetHeight;\n          tab.style.maxHeight = `${height}px`;\n        });\n        collapse.classList.add('collapsed');\n      }\n    });\n  }\n\n  initCollapseMobile() {\n    if (typeof this.maxRes === 'undefined') {\n      this.setCollapse();\n      this.listenTrigger();\n    } else if (this.maxRes == 'md' && this.isTablet()) {\n      this.setCollapse();\n      this.listenTrigger();\n    } else if (this.maxRes == 'sm' && this.isMobile()) {\n      this.setCollapse();\n      this.listenTrigger();\n    } else {\n      // no def - to be improved\n    }\n  }\n\n\n  initCollapse() {\n    // add collapsed on collapsable boxes\n    if (this.collapseBoxes != null) {\n      this.collapseBoxes.forEach(collapse => {\n        if (collapse.getAttribute('data-collapse-triggered') == null) {\n          let contents = collapse.querySelectorAll(this.SELECTORS.collapseContent);\n          contents.forEach(content => {\n            let height = content.offsetHeight;\n            content.style.maxHeight = `${height}px`;\n          });\n          collapse.classList.add('collapsed');\n          collapse.setAttribute('data-collapse-triggered','');\n        }\n      });\n\n    }\n    // bind click\n    if (this.collapseTrigger != null) {\n      this.collapseTrigger.forEach((trigger, i) => {\n        if (trigger.getAttribute('data-collapse-triggered') == null) {\n          trigger.addEventListener('click', () => this.handleCollapseTrigger(trigger, i));\n          trigger.setAttribute('data-collapse-triggered','');\n          if (trigger.getAttribute('data-collapse-opened') != null && trigger.getAttribute('data-collapse-opened') == 'true') {\n            // trigger the open\n            trigger.click();\n          }\n        }\n      });\n    }\n  }\n\n  handleCollapseTrigger(trigger, i) {\n    let target = document.querySelector('[data-collapse-box=\"'+trigger.getAttribute('data-collapse-trigger')+'\"]');\n    if (target != null) {\n      target.classList.toggle('collapsed');\n      target.classList.toggle('opened');\n      trigger.classList.toggle('opened');\n      if (trigger.dataset.collapseBodyclass != null) {\n        document.body.classList.toggle(trigger.dataset.collapseBodyclass);\n      }\n    }\n  }\n\n  isTablet() {\n    return window.matchMedia('(max-width: 991px)').matches;\n  }\n\n  isMobile() {\n    return window.matchMedia('(max-width: 768px)').matches;\n  }\n\n  bindEvents() {\n    let ctx = this;\n    // update the collapsed content\n    this.$on(this.$customEvents.COLLAPSE_EVENTS.update, (e) => {\n      let collapseContent = e.payload.extraDiv.closest(ctx.SELECTORS.collapseContent);\n      collapseContent.css('max-height','none');\n    });\n  }\n\n  render() {\n    this.log('Rendering...');\n    this.initCollapseMobile();\n    this.initCollapse();\n    this.bindEvents();\n  }\n}\n"],"sourceRoot":""}