{"version":3,"sources":["webpack:///./src/components/component/Drawer.vue?04d6","webpack:///./src/components/component/Drawer.vue?cca1","webpack:///src/components/component/Drawer.vue","webpack:///./src/components/component/Drawer.vue?3be6","webpack:///./src/components/component/Drawer.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","style","_t","on","$event","stopPropagation","preventDefault","$emit","_e","staticRenderFns","component"],"mappings":"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","file":"js/chunk-31f64ca5.5422d982.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Drawer.vue?vue&type=style&index=0&id=736143eb&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.enabled)?_c('section',[_c('aside',{ref:\"element\",staticClass:\"sidebar\",style:(_vm.style)},[_vm._t(\"default\")],2),_c('div',{ref:\"overlay\",staticClass:\"overlay\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.$emit('close')}}})]):_vm._e()}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <section v-if=\"enabled\">\r\n    <aside class=\"sidebar\" :style=\"style\" ref=\"element\">\r\n      <slot></slot>\r\n    </aside>\r\n    <div class=\"overlay\" ref=\"overlay\" @click.stop.prevent=\"$emit('close')\"></div>\r\n  </section>\r\n</template>\r\n<script>\r\n  export default {\r\n    name: 'Drawer',\r\n    props: {\r\n      direction: {\r\n        type: String\r\n      },\r\n      exist: {\r\n        type: Boolean\r\n      },\r\n      bottomHeight: {\r\n        type: Number,\r\n        default: 150\r\n      },\r\n      asideStyle: {\r\n        type: Object,\r\n        default: function() {\r\n          return {};\r\n        }\r\n      }\r\n    },\r\n    data(){\r\n      return {\r\n        auto_speed:'0.3s',\r\n        manual_speed:'0.03s',\r\n        threshold:20,\r\n        startTime:null,\r\n        startPos:null,\r\n        translate:null,\r\n        active:false,\r\n        visible:true,\r\n        moving: {\r\n          x: null,\r\n          y: null\r\n        }\r\n      }\r\n    },\r\n    computed:{\r\n      element() {\r\n        return this.$refs.element;\r\n      },\r\n      overlay() {\r\n        return this.$refs.overlay;\r\n      },\r\n      enabled() {\r\n        return this.exist === true;\r\n\r\n      },\r\n      style() {\r\n        let deco = this.asideStyle;\r\n        if(this.direction === 'right') {\r\n          deco.transform = 'translate3d(100%,0,0)';\r\n          deco.right = 0;\r\n        } else if(this.direction === 'bottom') {\r\n          let height = window.innerHeight - this.bottomHeight;\r\n          if (this.bottomHeight > window.innerHeight) {\r\n            height = (this.bottomHeight - window.innerHeight) * 2\r\n          }\r\n          deco.transform = 'translate3d(0,'+ height + 'px,0)';\r\n          deco.bottom = 0;\r\n        }\r\n        else {\r\n          deco.transform = 'translate3d(-100%,0,0)';\r\n          deco.left = 0;\r\n        }\r\n        return deco;\r\n      },\r\n    },\r\n    mounted(){\r\n      // document.addEventListener('touchstart',(e) =>{this.handleStart(e)});\r\n      // document.addEventListener('touchmove',(e) =>{this.handleMove(e)});\r\n      // document.addEventListener('touchend',(e) =>{this.handleEnd(e)});\r\n      // document.addEventListener('touchcancel',(e) =>{this.handleEnd(e)});\r\n      window.addEventListener('resize', (e) =>{this.setVisibality(e)}, true);\r\n      this.overlay.addEventListener('transitionend',(e) =>{this.handleZindex(e)},false);\r\n      this.overlay.addEventListener('click',() =>{this.close()},false);\r\n      this.setVisibality();\r\n    },\r\n    methods:{\r\n      setVisibality(){\r\n        this.visible = this.element.offsetWidth !== 0;\r\n      },\r\n      handleStart(e){\r\n        this.startTime = new Date().getTime();\r\n        this.startPos = e.targetTouches[0].pageX;\r\n        this.element.style.transitionDuration = this.manual_speed;\r\n      },\r\n      handleMove(e){\r\n        let gesture = this.direction === 'bottom' ? this.gestureY(e) : this.gesture(e);\r\n        let valid = this.validate(this.direction,gesture);\r\n        if(valid){\r\n          let percent = this.percentage(this.direction,gesture);\r\n          if(this.direction === 'left'){\r\n            /* touch scroll-y 튕김 방지 */\r\n            let oldY = this.moving.y;\r\n            let currentY = e.touches[0].pageY;\r\n            let offsetY = oldY - currentY;\r\n            if (offsetY<0) return;\r\n\r\n            /* 터치 감도 조정 코드\r\n            let oldX = this.moving.x;\r\n            let currentX = e.touches[0].pageX;\r\n            let offsetX = oldX - currentX;\r\n            if (offsetX>offsetY) return; */\r\n\r\n            this.translate = (e.touches[0].pageX-this.element.offsetWidth);\r\n            if(this.translate < 0){\r\n              this.element.style.transform = 'translate3d('+ this.translate +'px,0,0)';\r\n            }else{\r\n              this.open();\r\n            }\r\n          } else if(this.direction === 'right'){\r\n            /* touch scroll-y 튕김 방지 */\r\n            let oldY = this.moving.y;\r\n            let currentY = e.touches[0].pageY;\r\n            let offsetY = oldY - currentY;\r\n            if (offsetY<0) return;\r\n\r\n            this.translate = -(screen.width-this.element.offsetWidth-e.touches[0].pageX);\r\n            if(this.translate > 0){\r\n              this.element.style.transform = 'translate3d('+ this.translate +'px,0,0)';\r\n            }else{\r\n              this.open();\r\n            }\r\n          } else if(this.display === 'bottom'){\r\n            this.translate = -(screen.height-this.bottomHeight-e.touches[0].pageY);\r\n            if(this.translate > 0){\r\n              this.element.style.transform = 'translate3d(0,'+ this.translate +'px,0)';\r\n            }else{\r\n              this.open();\r\n            }\r\n          }\r\n          this.overlayOpacity(percent/100);\r\n\r\n          this.moving.x = e.touches[0].pageX;\r\n          this.moving.y = e.touches[0].pageY;\r\n        }\r\n      },\r\n      handleEnd(e){\r\n        let speed = this.speed(e);\r\n        let gesture = this.direction === 'bottom' ? this.gestureY(e) : this.gesture(e);\r\n        let valid = this.validate(this.direction,gesture);\r\n        if(valid){\r\n          if(speed>0.6){\r\n            if(!this.active){\r\n              this.open();\r\n            }else{\r\n              this.close();\r\n            }\r\n          }else{\r\n            if(this.direction === 'bottom') {\r\n              if(this.bottomHeight/2>Math.abs(this.translate)) {\r\n                this.open();\r\n              }else{\r\n                this.close();\r\n              }\r\n            }\r\n            else if(this.element.offsetWidth/2>Math.abs(this.translate)){\r\n              this.open();\r\n            }else{\r\n              this.close();\r\n            }\r\n          }\r\n        }\r\n      },\r\n      handleZindex(){\r\n        let opacity = window.getComputedStyle(this.overlay).getPropertyValue('opacity');\r\n        if(opacity<=0){\r\n          this.overlay.style.zIndex = -1000;\r\n        }\r\n      },\r\n      validate(direction,gesture){\r\n        if(direction === 'left'){\r\n          if((this.active && gesture === 'swiperight') || (!this.active && (gesture === 'swipeleft' || this.startPos>this.threshold))){\r\n            return false;\r\n          }\r\n        } else if(direction === 'right'){\r\n          if((this.active && gesture === 'swipeleft') || (!this.active && (gesture === 'swiperight' || this.startPos<(screen.width-this.threshold)))){\r\n            return false;\r\n          }\r\n        } else if(direction === 'bottom'){\r\n          if((this.active && gesture === 'swipebottom') || (!this.active && (gesture === 'swipebottom' || this.startPos<(screen.height-this.threshold)))){\r\n            return false;\r\n          }\r\n        }\r\n        if((document.querySelector('.sidebar.active') && !this.active) || !this.visible){\r\n          return false;\r\n        }\r\n        return true;\r\n      },\r\n      overlayOpacity(opacity){\r\n        this.overlay.style.opacity = opacity;\r\n        if(opacity > 0){\r\n          this.overlay.style.zIndex = 1000;\r\n        }\r\n      },\r\n      gesture(e){\r\n        let directions = [\r\n          'swipeleft',\r\n          'swiperight'\r\n        ];\r\n        let currentPos = e.changedTouches[0].pageX;\r\n        if((this.startPos-currentPos)<0){\r\n          return directions[1];\r\n        }else{\r\n          return directions[0];\r\n        }\r\n      },\r\n      gestureY(e){\r\n        let directions = [\r\n          'swipetop',\r\n          'swipebottom'\r\n        ];\r\n        let currentPos = e.changedTouches[0].pageY;\r\n        if((this.startPos-currentPos)<0){\r\n          return directions[1];\r\n        }else{\r\n          return directions[0];\r\n        }\r\n      },\r\n      open(){\r\n        this.translate = 0;\r\n        if(this.direction === 'bottom') {\r\n          let height = window.innerHeight - this.bottomHeight;\r\n          if (this.bottomHeight > window.innerHeight) {\r\n            height = (this.bottomHeight - window.innerHeight) * 2\r\n          }\r\n          this.element.style.transform = 'translate3d(0,'+height+'px,0)';\r\n        } else {\r\n          this.element.style.transform = 'translate3d('+this.translate+',0,0)';\r\n        }\r\n        this.element.style.transitionDuration = this.auto_speed;\r\n        this.overlayOpacity(1);\r\n        this.lock(document.querySelector('html'));\r\n        this.lock(document.querySelector('body'));\r\n        this.element.classList.add('active');\r\n        this.active = true;\r\n\r\n        this.moving = { x: null, y: null };\r\n      },\r\n      close(){\r\n        if(this.direction === 'left'){\r\n          if (this.element.offsetWidth > this.element.offsetHeight) {\r\n            // this.translate = '-'+this.element.offsetWidth+'px';\r\n            this.translate = '-100%';\r\n          } else {\r\n            // this.translate = '-'+this.element.offsetHeight+'px';\r\n            this.translate = '-100%';\r\n          }\r\n        } else if(this.direction === 'right'){\r\n          this.translate = this.element.offsetWidth+'px';\r\n        }  else if(this.direction === 'bottom'){\r\n          this.translate = screen.height + 'px';\r\n        }\r\n\r\n        if(this.direction === 'bottom') {\r\n          this.element.style.transform = 'translate3d(0,'+this.translate+',0)';\r\n        } else {\r\n          this.element.style.transform = 'translate3d('+this.translate+',0,0)';\r\n        }\r\n        this.element.style.transitionDuration = this.auto_speed;\r\n        this.overlayOpacity(0);\r\n        this.unlock(document.querySelector('html'));\r\n        this.unlock(document.querySelector('body'));\r\n        this.element.classList.remove('active');\r\n        this.active = false;\r\n\r\n        this.moving = { x: null, y: null };\r\n      },\r\n      speed(e){\r\n        let time = new Date().getTime() - this.startTime;\r\n        let startP = Math.abs(this.startPos);\r\n        let endP =  this.direction === 'bottom' ? Math.abs(e.changedTouches[0].pageY) : Math.abs(e.changedTouches[0].pageX);\r\n        let distance = startP>endP? (startP-endP):(endP-startP);\r\n        return distance/time;\r\n      },\r\n      percentage(direction,gesture){\r\n        let percentage = 0;\r\n        let test = [];\r\n        if(direction === 'left'){\r\n          test = ['swipeleft','swiperight']\r\n        } else if(direction === 'right'){\r\n          test = ['swiperight','swipeleft']\r\n        } else if(direction === 'bottom'){\r\n          test = ['swipebottom','swipetop']\r\n        }\r\n        let size = direction === 'bottom' ? 'offsetHeight' : 'offsetWidth';\r\n        if(this.active && gesture === test[0]){\r\n          percentage = 100-Math.round(Math.abs(this.translate)/this.element[size]*100);\r\n        }\r\n        if(!this.active && gesture === test[1]){\r\n          percentage = Math.round(100-Math.abs(this.translate)/this.element[size]*100);\r\n        }\r\n        if(percentage>100){\r\n          percentage = 100;\r\n        }\r\n        if(percentage<0){\r\n          percentage = 0;\r\n        }\r\n        return percentage;\r\n      },\r\n      lock(element){\r\n        element.style.overflow = 'hidden';\r\n        element.style.touchAction = 'none';\r\n      },\r\n      unlock(element){\r\n        element.style.removeProperty('overflow');\r\n        element.style.removeProperty('touch-action');\r\n      }\r\n    }\r\n  }\r\n</script>\r\n<style lang=\"stylus\" scoped>\r\n  div.overlay{\r\n    position:fixed;\r\n    z-index: -1000;\r\n    left: 0;\r\n    top:0;\r\n    background:rgba(11, 10, 12, 0.35);\r\n    opacity: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    transition: opacity 0.3s ease;\r\n  }\r\n  aside.sidebar{\r\n    z-index: 9999;\r\n    position: fixed;\r\n    will-change: transform;\r\n    height: 100%;\r\n    top: 0;\r\n    transition:transform 0.3s ease;\r\n    background:#fff;\r\n    min-width: 300px;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n    word-wrap: break-word;\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!./Drawer.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!./Drawer.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Drawer.vue?vue&type=template&id=736143eb&scoped=true&\"\nimport script from \"./Drawer.vue?vue&type=script&lang=js&\"\nexport * from \"./Drawer.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Drawer.vue?vue&type=style&index=0&id=736143eb&lang=stylus&scoped=true&\"\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  \"736143eb\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}