{"version":3,"file":"js/communities-9753d0a689af69ba42e1.chunk.js","sources":["webpack:///./app/javascript/javascripts/components/Communities.vue","webpack:///./app/javascript/javascripts/components/Communities.vue?f22c","webpack:///./app/javascript/javascripts/components/TooltipTrigger.vue","webpack:///./app/javascript/javascripts/components/TooltipTrigger.vue?9864","webpack:///./app/javascript/javascripts/components/TooltipTrigger.vue?e0bd","webpack:///./app/javascript/javascripts/components/TooltipTrigger.vue?e0a6","webpack:///app/javascript/javascripts/components/Communities.vue","webpack:///app/javascript/javascripts/components/TooltipTrigger.vue","webpack:///./app/javascript/javascripts/components/TooltipTrigger.vue?d714","webpack:///./app/javascript/javascripts/components/TooltipTrigger.vue?87a7"],"sourcesContent":["var render, staticRenderFns\nimport script from \"./Communities.vue?vue&type=script&lang=js&\"\nexport * from \"./Communities.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/tmp/build_4c84e177/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('9a9380e6')) {\n      api.createRecord('9a9380e6', component.options)\n    } else {\n      api.reload('9a9380e6', component.options)\n    }\n    \n  }\n}\ncomponent.options.__file = \"app/javascript/javascripts/components/Communities.vue\"\nexport default component.exports","import mod from \"-!../../../../node_modules/babel-loader/lib/index.js??ref--7-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Communities.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/babel-loader/lib/index.js??ref--7-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Communities.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TooltipTrigger.vue?vue&type=template&id=1f55ff5f&\"\nimport script from \"./TooltipTrigger.vue?vue&type=script&lang=js&\"\nexport * from \"./TooltipTrigger.vue?vue&type=script&lang=js&\"\nimport style0 from \"./TooltipTrigger.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/tmp/build_4c84e177/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('1f55ff5f')) {\n      api.createRecord('1f55ff5f', component.options)\n    } else {\n      api.reload('1f55ff5f', component.options)\n    }\n    module.hot.accept(\"./TooltipTrigger.vue?vue&type=template&id=1f55ff5f&\", function () {\n      api.rerender('1f55ff5f', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"app/javascript/javascripts/components/TooltipTrigger.vue\"\nexport default component.exports","import mod from \"-!../../../../node_modules/babel-loader/lib/index.js??ref--7-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TooltipTrigger.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/babel-loader/lib/index.js??ref--7-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TooltipTrigger.vue?vue&type=script&lang=js&\"","import mod from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../../node_modules/css-loader/dist/cjs.js??ref--2-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--2-2!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TooltipTrigger.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../../node_modules/css-loader/dist/cjs.js??ref--2-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--2-2!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TooltipTrigger.vue?vue&type=style&index=0&lang=css&\"","export * from \"-!../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TooltipTrigger.vue?vue&type=template&id=1f55ff5f&\"","<script>\nconst countryCache = {};\n\nexport default {\n  props: {\n    initialCommunities: { required: true, type: Array }\n  },\n  data: function() {\n    return {\n      communities: this.initialCommunities,\n      popoverCountry: null,\n      isMobile: false,\n      isMapInit: false,\n      mapContainer: null,\n      mapWrapper: null,\n      isMoving: false,\n      zoom: 1,\n      x: 0,\n      y: 0,\n      mouseX: 0,\n      mouseY: 0,\n      translateX: 0,\n      translateY: 0,\n      dragLimitX: 0,\n      dragLimitY: 0,\n      zoomStep: 1.3,\n      shouldMove: false,\n      searchValue: '',\n      regions: [\n        { key: 'africa', name: 'Africa' },\n        { key: 'australia', name: 'Australia/Oceania' },\n        { key: 'eurasia', name: 'Eurasia' },\n        { key: 'europe', name: 'Europe' },\n        { key: 'israel', name: 'Israel' },\n        { key: 'latin-america', name: 'Latin America' },\n        { key: 'north-america', name: 'North America' }\n      ]\n    };\n  },\n\n  computed: {\n    scale() {\n      return {\n        transform: `translate(${this.x}px, ${this.y}px) scale(${this.zoom}, ${\n          this.zoom\n        })`\n      };\n    }\n  },\n\n  mounted() {\n    window.addEventListener('resize', this.onResize);\n    this.onResize();\n\n    if (window.innerWidth < 992) {\n      this.isMobile = true;\n    }\n  },\n\n  beforeDestroy() {\n    window.removeEventListener('resize', this.onResize);\n    this.detachEvents();\n  },\n\n  methods: {\n    onResize() {\n      if (window.innerWidth >= 992 && this.isMobile) {\n        this.isMobile = false;\n      }\n\n      if (window.innerWidth < 992 && !this.isMobile) {\n        this.detachEvents();\n        this.isMobile = true;\n        this.isMapInit = false;\n        this.mapContainer = null;\n        this.mapWrapper = null;\n      }\n\n      if (!this.isMobile && !this.isMapInit) {\n        this.$nextTick(() => {\n          this.initMap();\n        });\n      }\n\n      if (this.isMapInit) {\n        this.zoom = 1;\n        this.x = 0;\n        this.y = 0;\n      }\n    },\n\n    enableMove(e) {\n      this.shouldMove = true;\n      this.hideCountryPopover();\n      document.body.classList.add('drag-map');\n      this.mouseX = e.clientX;\n      this.mouseY = e.clientY;\n\n      this.dragLimitX =\n        (this.mapContainer.getBoundingClientRect().width -\n          this.mapWrapper.getBoundingClientRect().width) /\n          2 +\n        100;\n      this.dragLimitY =\n        (this.mapContainer.getBoundingClientRect().height -\n          this.mapWrapper.getBoundingClientRect().height) /\n          2 +\n        100;\n\n      this.isMoving = false;\n    },\n\n    onMouseMove(e) {\n      if (!this.shouldMove) {\n        return;\n      }\n      if (\n        !this.isMoving &&\n        (e.clientX - this.mouseX > 5 || e.clientY - this.mouseY > 5)\n      ) {\n        this.isMoving = true;\n      } // prevent open the country popup\n\n      if (\n        this.zoom == 1 ||\n        Math.abs(this.translateX + (e.clientX - this.mouseX)) >\n          this.dragLimitX ||\n        Math.abs(this.translateY + (e.clientY - this.mouseY)) > this.dragLimitY\n      ) {\n        return;\n      }\n\n      this.x = this.translateX + (e.clientX - this.mouseX);\n      this.y = this.translateY + (e.clientY - this.mouseY);\n    },\n\n    onMouseUp() {\n      document.body.classList.remove('drag-map');\n\n      this.translateX = this.x;\n      this.translateY = this.y;\n      this.shouldMove = false;\n    },\n\n    attachDocumentEvents() {\n      document.addEventListener('mousemove', this.onMouseMove);\n      document.addEventListener('mouseup', this.onMouseUp);\n    },\n\n    detachEvents() {\n      document.removeEventListener('mousemove', this.onMouseMove);\n      document.removeEventListener('mouseup', this.onMouseUp);\n      this.$el\n        .querySelector('#communities-map')\n        .removeEventListener('click', this.showCountryPopover);\n      this.$el\n        .querySelector('#map-container')\n        .removeEventListener('dragstart', () => {\n          return false;\n        });\n    },\n\n    initMap() {\n      let map = this.$el.querySelector('#communities-map');\n\n      map.addEventListener('click', this.showCountryPopover);\n      this.$el\n        .querySelector('#map-container')\n        .addEventListener('dragstart', () => {\n          return false;\n        });\n\n      this.attachDocumentEvents();\n\n      this.isMapInit = true;\n      this.mapWrapper = this.$el.querySelector('#map-wrapper');\n      this.mapContainer = this.$el.querySelector('#map-container');\n\n      let lands = map.querySelectorAll('path');\n\n      lands.forEach((land) => {\n        land.classList.add('land');\n\n        let community = this.communities.find(\n          ({ id }) => id == land.getAttribute('id')\n        );\n\n        if (community) {\n\n          if (!community.is_affiliated) {\n            land.classList.add('non-affiliated');\n          }\n\n          if (community.body) {\n            land.classList.add('has-body');\n          }\n        } else {\n          land.classList.add('non-affiliated');\n        }\n      });\n    },\n\n    zoomIn() {\n      this.zoom =\n        this.zoom * this.zoomStep > 4.75 ? 5 : this.zoom * this.zoomStep;\n      this.hideCountryPopover();\n    },\n\n    zoomOut() {\n      this.zoom =\n        this.zoom / this.zoomStep < 1.25\n          ? 1\n          : (this.zoom = this.zoom / this.zoomStep);\n      this.x = 0;\n      this.y = 0;\n      this.hideCountryPopover();\n    },\n\n    filterByRegion: function(region) {\n      return this.communities\n        .filter(function(community) {\n          if (Array.isArray(community.region)) {\n            return community.region.includes(region);\n          }\n        })\n        .sort(function(a, b) {\n          return a.name.toLowerCase().localeCompare(b.name.toLowerCase());\n        });\n    },\n\n    showCountryPopover(e) {\n      if (this.isMoving) {\n        return;\n      } // prevent open the country popover after drag\n      let el = e.target;\n      let popoverWidth = 260;\n      let spaceX = 20;\n      let spaceY = 17;\n\n      if (\n        !e.target.classList.contains('land') ||\n        (e.target.classList.contains('non-affiliated') &&\n          !e.target.classList.contains('has-body'))\n      ) {\n        return true;\n      }\n\n      if (e.target.classList.contains('-active')) {\n        return this.hideCountryPopover();\n      }\n\n      this.inactivateActiveCountry();\n      e.target.classList.add('-active');\n\n      // Calc the position based on mouse coords and wrapper boundaries\n      let rect = this.mapWrapper.getBoundingClientRect();\n      let x = e.clientX - rect.left + spaceX; //last part compensates spacing between mouse pointer and popover\n      let y = e.clientY - rect.top - spaceY; //last part compensates spacing between mouse pointer and popover\n\n      let right = false;\n\n      if (window.innerWidth < x + popoverWidth + spaceX) {\n        x = x - popoverWidth - spaceX * 2; //we already have spaceX in x\n        right = true;\n      }\n\n      let currentCommunity = this.communities.find(\n        (c) => c.id == el.getAttribute('id')\n      );\n\n      this.popoverCountry = {\n        id: currentCommunity.id,\n        name: null,\n        body: null,\n        video: null,\n        sidebar_image: null,\n        right: right,\n        transform: `translate(${x}px, ${y}px)`\n      };\n\n      this.loadPopupCountry(currentCommunity.id);\n    },\n\n    hideCountryPopover() {\n      this.popoverCountry = null;\n      this.inactivateActiveCountry();\n    },\n\n    async loadPopupCountry(id) {\n      let data = null;\n\n      if (countryCache[id]) {\n        data = countryCache[id];\n      } else {\n        const response = await fetch(`/api/v1/community/${id}`);\n        data = await response.json();\n\n        countryCache[id] = data;\n      }\n\n      this.popoverCountry.name = data.name;\n      this.popoverCountry.body = data.body_short;\n      this.popoverCountry.video = data.video;\n      this.popoverCountry.sidebar_image = data.sidebar_image;\n    },\n\n    inactivateActiveCountry() {\n      let activeCountry = this.$el.querySelector('.land.-active');\n\n      if (activeCountry) {\n        activeCountry.classList.remove('-active');\n      }\n    },\n\n    dropdownSearchHandler(event) {\n      this.searchValue = event.target.value.toUpperCase();\n      let dropdownElement = document.querySelector(\n        '.region-dropdown-menu.open'\n      );\n\n      if (dropdownElement !== null) {\n        let dropdownOptions = dropdownElement.querySelectorAll('a');\n\n        Array.from(dropdownOptions).forEach((option) => {\n          let inputedValue = option.innerText.toUpperCase();\n\n          if (inputedValue.indexOf(this.searchValue) > -1) {\n            option.style.display = '';\n          } else {\n            option.style.display = 'none';\n          }\n        });\n      }\n    }\n  }\n};\n</script>\n\n<style></style>\n","<template>\n  <span>\n    <button\n      class=\"tooltip-button\"\n      :data-tippy-content=\"this.body\"\n      data-tippy-arrow=\"true\"\n    >\n      <slot />\n    </button>\n  </span>\n</template>\n\n<script>\nimport tippy from 'tippy.js';\nimport 'tippy.js/dist/tippy.css';\nimport axios from '@common/http/axios';\n\nexport default {\n  props: {\n    tooltip: { required: true, type: String }\n  },\n\n  data() {\n    return {\n      body: ''\n    };\n  },\n\n  mounted() {\n    this.fetchModalData();\n\n    setTimeout(() => {\n      tippy('[data-tippy-content]', {\n        allowHTML: true,\n        theme: 'wjc'\n      });\n    }, 2000);\n  },\n\n  methods: {\n    async fetchModalData() {\n      try {\n        const { data } = await axios.get(`/api/v1/tooltips/${this.tooltip}`);\n        this.body = data.body;\n      } catch (ex) {\n        console.error(ex);\n        this.body =\n          'We failed to load the content. Sorry for the inconvenience.';\n      } finally {\n        // this.loading = false;\n      }\n    }\n  }\n};\n</script>\n<style>\n.tooltip-button {\n  @apply font-semi-bold;\n  color: #295ba5;\n}\n\n.tippy-box[data-theme~='wjc'] {\n  @apply flex flex-col p-4 rounded-md text-white font-primary text-base font-normal;\n  width: 320px;\n  background: #2d2d32;\n}\n\n.tippy-arrow {\n  width: 16px;\n  height: 16px;\n  color: #333;\n}\n\n.tippy-arrow:before {\n  content: '';\n  position: absolute;\n  border-color: transparent;\n  border-style: solid;\n}\n\n.tippy-box[data-placement^='top'] > .tippy-arrow:before {\n  bottom: -7px;\n  left: 0;\n  border-width: 8px 8px 0;\n  border-top-color: initial;\n  transform-origin: center top;\n}\n\n.tippy-box[data-placement^='top'] > .tippy-arrow {\n  bottom: 0;\n}\n</style>\n","// extracted by mini-css-extract-plugin","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"span\", [\n    _c(\n      \"button\",\n      {\n        staticClass: \"tooltip-button\",\n        attrs: { \"data-tippy-content\": this.body, \"data-tippy-arrow\": \"true\" },\n      },\n      [_vm._t(\"default\")],\n      2\n    ),\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAYA;AACA;AACA;;;;;;;;;;;;ACjCA;AAAA;AAAA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAiBA;AACA;AACA;;;;;;;;;;;;ACvCA;AAAA;AAAA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACCA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAKA;AAMA;AACA;AAEA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AAMA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AAEA;AAAA;AACA;AAEA;AACA;AAGA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AACA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAIA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAKA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AAIA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClUA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;;;;;;;;;;;ACrDA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;A","sourceRoot":""}