{"version":3,"sources":["webpack:///./static/js/components/set-active.js"],"names":["SetActive","el","this","addEventListener","evt","param","target","dataset","value","elWithGivenAttr","getElementWithGivenAttribute","paramValue","text","history","replaceState","getUpdatedURL","encodeURI","targets","document","getElementsByClassName","length","childNodes","map","opt","undefined","targetEl","classList","contains","remove","activeTarget","add","syncWithURL","URLSearchParams","window","location","search","key","current","getURLSearchParams","set","toString","parent","attribute","find","child","get","params","decodeURI","matchedEl","dispatchEvent","Event"],"mappings":"snBAYMA,E,WACJ,WAAYC,GAAI,Y,4FAAA,SACdC,KAAKD,GAAKA,EAEVA,EAAGE,iBAAiB,UAAU,SAAAC,GAC5B,IAAMC,EAAQD,EAAIE,OAAOC,QAAQF,MAC3BG,EAAQJ,EAAIE,OAAOE,MACnBC,EAAkB,EAAKC,6BAA6BN,EAAIE,OAAQ,QAASE,GACzEG,EAAaF,EAAgBF,QAAQI,YAAcF,EAAgBG,KAEzE,GAAKJ,EAAL,CAIAK,QAAQC,aAAa,KAAM,GAAI,EAAKC,cAAcV,EAAOW,UAAUL,KAGnE,IAAMM,EAAUC,SAASC,uBAAuBX,GAG3CS,EAAQG,SAKb,EAAI,EAAKnB,GAAGoB,YAAYC,KAAI,SAAAC,QACRC,IAAdD,EAAIf,OACN,EAAIU,SAASC,uBAAuBI,EAAIf,QAAQc,KAAI,SAAAG,GAC9CA,EAASC,UAAUC,SAAS,WAC9BF,EAASC,UAAUE,OAAO,gBAMlC,EAAIX,GAASK,KAAI,SAAAO,GACfA,EAAaH,UAAUI,IAAI,aAK7B,EAAIZ,SAASC,uBAAT,kBAAkDG,KAAI,SAAArB,GACpDA,EAAGO,QAAUA,IACfP,EAAGO,MAAQA,WAKjBN,KAAK6B,YAAY9B,G,oEASjB,OAAO,IAAI+B,gBAAgBC,OAAOC,SAASC,U,oCAY/BC,EAAK5B,GACjB,IAAM6B,EAAUnC,KAAKoC,qBAErB,OADAD,EAAQE,IAAIH,EAAK5B,GACjB,WAAW6B,EAAQG,c,mDAYQC,EAAQC,EAAWlC,GAE9C,OAAO,EADUiC,EAAOpB,YACHsB,MAAK,SAAAC,GAAK,OAAIC,IAAID,EAAOF,KAAelC,O,kCAQnDP,GACV,IAAM6C,EAAS5C,KAAKoC,qBACd3B,EAAaoC,UAAUD,EAAOD,IAAI5C,EAAGM,QAAQF,QAAU,IAEvD2C,EACJ9C,KAAKQ,6BAA6BT,EAAI,qBAAsBU,IAC5DT,KAAKQ,6BAA6BT,EAAI,OAAQU,GAE3CqC,IAIL/C,EAAGO,MAAQwC,EAAUxC,MACrBP,EAAGgD,cAAc,IAAIC,MAAM,iB,gCAIhBlD","file":"set-active.js","sourcesContent":["import get from 'lodash.get';\n\n/**\n * Intended for <select>'s, this component adds an 'active' class to whatever\n * element matches the `value` in the selected <option>. It also removes 'active'\n * from all of that element's direct siblings.\n *\n * NOTE: one caveat is that in order for this to work, siblings need to be\n * 'alone' inside a wrapper element. Usually wrapping them in a <span> is\n * all that's necessary, but this is not always possible.\n */\n\nclass SetActive {\n  constructor(el) {\n    this.el = el;\n\n    el.addEventListener('change', evt => {\n      const param = evt.target.dataset.param;\n      const value = evt.target.value;\n      const elWithGivenAttr = this.getElementWithGivenAttribute(evt.target, 'value', value);\n      const paramValue = elWithGivenAttr.dataset.paramValue || elWithGivenAttr.text;\n\n      if (!value) {\n        return;\n      }\n\n      history.replaceState(null, '', this.getUpdatedURL(param, encodeURI(paramValue)));\n\n      // grab the first element with that target classname\n      const targets = document.getElementsByClassName(value);\n\n      // if no target elements were found, exit\n      if (!targets.length) {\n        return;\n      }\n\n      // deactivate all currently active items before proceeding\n      [...this.el.childNodes].map(opt => {\n        if (opt.value !== undefined) {\n          [...document.getElementsByClassName(opt.value)].map(targetEl => {\n            if (targetEl.classList.contains('active')) {\n              targetEl.classList.remove('active');\n            }\n          });\n        }\n      });\n\n      [...targets].map(activeTarget => {\n        activeTarget.classList.add('active');\n      });\n\n      // also synchronize any other SetActive components on the page with the\n      // same target\n      [...document.getElementsByClassName(`js-set-active`)].map(el => {\n        if (el.value !== value) {\n          el.value = value;\n        }\n      });\n    });\n\n    this.syncWithURL(el);\n  }\n\n  /**\n   * Get current URL search params\n   *\n   * @return URLSearchParams\n   */\n  getURLSearchParams() {\n    return new URLSearchParams(window.location.search);\n  }\n\n  /**\n   * Get an updated search param with given\n   * key value query\n   *\n   * @param string key\n   * @param string value\n   *\n   * @return string\n   */\n  getUpdatedURL(key, value) {\n    const current = this.getURLSearchParams();\n    current.set(key, value);\n    return `?${current.toString()}`;\n  }\n\n  /**\n   * Get an element under parent with given attribute value pair.\n   *\n   * @param Node parent\n   * @param string attribute\n   * @param string value\n   *\n   * @return Node\n   */\n  getElementWithGivenAttribute(parent, attribute, value) {\n    const children = parent.childNodes;\n    return [...children].find(child => get(child, attribute) === value);\n  }\n\n  /**\n   * Sync given element with the query param.\n   *\n   * @param object el\n   */\n  syncWithURL(el) {\n    const params = this.getURLSearchParams();\n    const paramValue = decodeURI(params.get(el.dataset.param) || '');\n\n    const matchedEl =\n      this.getElementWithGivenAttribute(el, 'dataset.paramValue', paramValue) ||\n      this.getElementWithGivenAttribute(el, 'text', paramValue);\n\n    if (!matchedEl) {\n      return;\n    }\n\n    el.value = matchedEl.value;\n    el.dispatchEvent(new Event('change'));\n  }\n}\n\nexport default SetActive;\n"],"sourceRoot":""}