{"version":3,"sources":["webpack:///./src/components/module/AnchorTab.vue?d1d5","webpack:///./src/components/module/AnchorTab.vue?d774","webpack:///src/components/module/AnchorTab.vue","webpack:///./src/components/module/AnchorTab.vue?fcde","webpack:///./src/components/module/AnchorTab.vue?6b3b"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","style","headStyle","color","backgroundColor","_l","item","idx","key","id","class","headItemStyle","on","$event","clickAnchor","_v","_s","name","undefined","count","_e","_t","staticRenderFns","pageScroll","sticky_state","setHeadStyle","component"],"mappings":"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","file":"js/chunk-71f01594.0203373e.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AnchorTab.vue?vue&type=style&index=0&id=17a43d5a&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{ref:\"anchorHead\",staticClass:\"flex-center anchor-head\",style:([_vm.headStyle, {color:'#303030'}, {backgroundColor:'white'}])},[_c('div',{staticClass:\"flex-center anchor-head-wrap\",style:(_vm.headWrapStyle)},_vm._l((_vm.menu),function(item,idx){return _c('div',{key:item.id,staticClass:\"unselect\",class:(\"anchor\" + (item.id)),style:(_vm.headItemStyle(item.id)),on:{\"click\":function($event){return _vm.clickAnchor(item.id, idx)}}},[_c('span',[_vm._v(_vm._s(item.name))]),(item.count!==undefined)?_c('span',[_vm._v(\"(\"+_vm._s(item.count)+\")\")]):_vm._e()])}),0)]),_vm._t(\"content\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n<template>\r\n  <div>\r\n    <div ref=\"anchorHead\" class=\"flex-center anchor-head\"\r\n         :style=\"[headStyle, {color:'#303030'}, {backgroundColor:'white'}]\">\r\n      <div class=\"flex-center anchor-head-wrap\" :style=\"headWrapStyle\">\r\n        <div v-for=\"(item, idx) in menu\" :key=\"item.id\" class=\"unselect\"\r\n             :class=\"`anchor${item.id}`\"\r\n             @click=\"clickAnchor(item.id, idx)\"\r\n             :style=\"headItemStyle(item.id)\">\r\n          <span>{{item.name}}</span>\r\n          <span v-if=\"item.count!==undefined\">({{item.count}})</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <slot name=\"content\"></slot>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import $ from 'jquery'\r\n  export default {\r\n    name: 'anchor-tab',\r\n    props: {\r\n      menu: {\r\n        type: Array,\r\n        required: true\r\n      },\r\n      anchorHeadStyle: {\r\n        type: Object,\r\n        required: false\r\n      },\r\n      headHeight: {   // 앵커 헤더 높이\r\n        type: Number,\r\n        required: false,\r\n        default: function() {\r\n          return 48;\r\n        }\r\n      },\r\n      /*scrollOffset: {   // 헤더 등 fixed 처리 시 상위 offset\r\n        type: Number,\r\n        required: false,\r\n        default: function() {\r\n          return 0;\r\n        }\r\n      },*/\r\n      anchorHeadItemStyle: {\r\n        type: Object,\r\n        required: false\r\n      },\r\n      anchorHeadUnselectedItemStyle: {\r\n        type: Object,\r\n        required: false\r\n      },\r\n      changeOffset: {   // 상위 엘레먼트 등 clientHeight 변경 시 감지\r\n        type: Number,\r\n        required: false\r\n      },\r\n      extraScrollAnchor: {\r\n        type: Number,\r\n        required: false\r\n      },\r\n    },\r\n    created() {\r\n      this.initializeAnchorTop();\r\n      this.setHeadStyle();\r\n      window.addEventListener('resize', () => {\r\n        this.setHeadStyle();\r\n      })\r\n      let vm = this;\r\n      setTimeout(function() {\r\n        if (vm.$refs.anchorHead) {\r\n          let menu_list = [];\r\n          for(let i=0; i<vm.menu.length; i++) {\r\n            let menu = vm.menu[i];\r\n            menu.start = $(`#anchor${menu.id}`).position().top-100;\r\n            menu.end = menu.start + document.getElementById(`anchor${menu.id}`).getBoundingClientRect().height;\r\n            console.log(`#anchor${menu.id}`, menu.y)\r\n            menu_list.push(menu);\r\n          }\r\n          vm.menuData = menu_list;\r\n\r\n          window.addEventListener('scroll', () => {\r\n            vm.onScroll();\r\n            // 스크롤시 해당하는 탭에 강조 표시\r\n            let anchor = '.anchor'\r\n            // 현재 y축 위치\r\n            let now = $(window).scrollTop();\r\n            // now += document.getElementsByClassName('header')[0].clientHeight\r\n            //   +document.getElementsByClassName('header-menu')[0].clientHeight\r\n            //   +document.getElementsByClassName('anchor-head')[0].clientHeight;\r\n\r\n            if(vm.menuData.length===0) return;\r\n            for(let index=0; index<vm.menuData.length; index++) {\r\n              let start = 0;\r\n              let end = 100000000;\r\n              let item = vm.menuData[index];\r\n              start = vm.menuData[index].start;\r\n              end = vm.menuData[index].end;\r\n              /*if(index < vm.menuData.length-1) {\r\n                end = vm.menuData[index+1].end;\r\n              }\r\n              else {\r\n                end = 100000000;\r\n              }*/\r\n              if(start <= now && now <= end) {\r\n                // console.log('bold!!!', index, start, now, end);\r\n                $(anchor + (item.id)).css('fontWeight', 700);\r\n              }\r\n              else {\r\n                // console.log('unset!!!', index, start, now, end);\r\n                $(anchor + (item.id)).css('fontWeight', 500);\r\n              }\r\n            }\r\n          });\r\n        }\r\n      },1000)\r\n    },\r\n    mounted() {\r\n      this.$nextTick(function() {\r\n        if (this.$refs.anchorHead) {\r\n          window.addEventListener('scroll', () => {\r\n            this.onScroll();\r\n          });\r\n        }\r\n      })\r\n    },\r\n    updated() {\r\n      this.$nextTick(function() {\r\n        if (this.$refs.anchorHead) {\r\n          this.currentTop = this.$refs.anchorHead.getBoundingClientRect().top;\r\n        }\r\n      })\r\n    },\r\n    destroyed() {\r\n      window.removeEventListener('scroll', () => {\r\n        this.onScroll();\r\n      });\r\n    },\r\n    watch: {\r\n      changeOffset() {\r\n        this.initializeAnchorTop();\r\n      },\r\n      extraScrollAnchor(n) {\r\n        if (n!==-undefined) {\r\n          this.clickAnchor(n);\r\n          this.$emit('initialExtra');\r\n        }\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        scrollOffset: 0,\r\n        currentTop: 0,\r\n        initialAnchorTop: 0,\r\n        anchorTop: 0,\r\n        scrollUp: false,\r\n        sticky_state: false,\r\n        selectedTab: 0,\r\n        headStyle: {},\r\n        headWrapStyle: {},\r\n        menuData: []\r\n      }\r\n    },\r\n    computed: {\r\n      computedMenu() {\r\n        let result = [];\r\n        this.menu.forEach(item => {\r\n          if(item.id === this.selectedTab)\r\n            result.push(item);\r\n        });\r\n        return result;\r\n      },\r\n      scrollOptions() {\r\n        return {\r\n          // container: '#anchor',\r\n          easing: 'ease-out',\r\n          offset: -(this.scrollOffset + this.headHeight),\r\n          force: true,\r\n          cancelable: true,\r\n          onStart: function() {\r\n            // scrolling started\r\n          },\r\n          onDone: function() {\r\n            // scrolling done\r\n          },\r\n          onCancel: function() {\r\n            // scrolling has been interrupted\r\n          },\r\n          x: false,\r\n          y: true\r\n        };\r\n      }\r\n    },\r\n    methods: {\r\n      initializeAnchorTop() {\r\n        this.$nextTick(function() {\r\n          if (this.$refs.anchorHead) {\r\n            let elOffset = this.$refs.anchorHead.offsetTop;\r\n            this.initialAnchorTop = elOffset;\r\n          }\r\n        })\r\n      },\r\n      onScroll() {\r\n        this.$nextTick(function() {\r\n          if (this.$refs.anchorHead) {\r\n            let currentTop = this.currentTop;\r\n            // sticky 상태가 아닐 경우\r\n            if (currentTop > this.scrollOffset) {\r\n              this.sticky_state = false;\r\n              this.setHeadStyle();\r\n            }\r\n            else if (currentTop < this.scrollOffset) {\r\n              this.sticky_state = true;\r\n              this.setHeadStyle();\r\n            }\r\n            // sticky 상태 일 경우\r\n            else {\r\n              let pageScroll = $(window).scrollTop();\r\n              if (pageScroll >= (this.initialAnchorTop - this.scrollOffset)) {\r\n                this.sticky_state = true;\r\n                this.setHeadStyle();\r\n              }\r\n              else {\r\n                this.sticky_state = false;\r\n                this.setHeadStyle();\r\n              }\r\n            }\r\n          }\r\n        })\r\n      },\r\n      clickAnchor(id) {\r\n        let duration = 500;\r\n        this.$scrollTo(`#anchor${id}`, duration, this.scrollOptions);\r\n        this.selectedTab = id;\r\n      },\r\n      setHeadStyle() {\r\n        // head\r\n        if (window.innerWidth <= 500) {\r\n          this.scrollOffset = 60;\r\n        }\r\n        else this.scrollOffset = 82;\r\n        let head = {};\r\n        if (this.sticky_state) {\r\n          head.position = 'fixed';\r\n          head.width = '100vw';\r\n          head.top = `${this.scrollOffset}px`;\r\n          head.left = 0;\r\n        }\r\n        else {\r\n          head.position = 'static';\r\n          head.width = '';\r\n          head.top = '';\r\n          head.left = '';\r\n        }\r\n        head.height = `${this.headHeight}px`;\r\n        head.borderBottom = '1px solid #e6e6e6';\r\n        this.headStyle = head;\r\n        // head wrap\r\n        let head_wrap = {};\r\n        if (this.anchorHeadStyle) head_wrap = this.anchorHeadStyle;\r\n        if (this.sticky_state&&this.maxWidth) {\r\n          head_wrap.width = this.maxWidth;\r\n        }\r\n        else head_wrap.width = '100%';\r\n        this.headWrapStyle = head_wrap;\r\n      },\r\n      headItemStyle(id) {\r\n        if (this.selectedTab===id) {\r\n          if (this.anchorHeadItemStyle) return this.anchorHeadItemStyle;\r\n        }\r\n        else {\r\n          if (this.anchorHeadUnselectedItemStyle) return this.anchorHeadUnselectedItemStyle;\r\n        }\r\n        let styles = {};\r\n        styles.color = '#303030';\r\n        if (this.selectedTab===id) styles.fontWeight = 'bold';\r\n        return styles;\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style scoped>\r\n  .anchor-head,\r\n  .anchor-head-wrap {\r\n    display: flex;\r\n    justify-content: space-around;\r\n    align-items: center;\r\n    z-index: 101;\r\n  }\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AnchorTab.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AnchorTab.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./AnchorTab.vue?vue&type=template&id=17a43d5a&scoped=true&\"\nimport script from \"./AnchorTab.vue?vue&type=script&lang=js&\"\nexport * from \"./AnchorTab.vue?vue&type=script&lang=js&\"\nimport style0 from \"./AnchorTab.vue?vue&type=style&index=0&id=17a43d5a&scoped=true&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  \"17a43d5a\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}