import WithRender from "./sidebar.vue" ; import Vue from "vue" ; import { Component , Prop , Watch } from "vue-property-decorator" ; import $ from "jquery" ; import hammer from "hammerjs" ; import "./sidebar.scss" ; import { InjectContext } from "../../../utils/decorators" ; import { Context } from "../../facilmap/facilmap" ; @ WithRender @ Component ( { components : { } } ) export default class Sidebar extends Vue { @ InjectContext ( ) context ! : Context ; @ Prop ( { type : String , required : true } ) readonly id ! : string ; sidebar ? : HTMLElement ; pan ? : HammerManager ; touchStartX : number | null = null ; sidebarVisible = false ; mounted ( ) { this . initPan ( ) ; } beforeDestroy ( ) { this . destroyPan ( ) ; } @ Watch ( "context.isNarrow" ) handleNarrowChange ( ) { this . destroyPan ( ) ; setTimeout ( ( ) => { this . initPan ( ) ; } , 0 ) ; } initPan ( ) { this . sidebar = ( this . $el as any ) . querySelector ( ".b-sidebar" ) ; if ( this . sidebar ) { this . pan = new hammer . Manager ( this . sidebar ) ; this . pan . add ( new hammer . Pan ( { direction : hammer . DIRECTION_RIGHT } ) ) ; this . pan . on ( "pan" , this . handleDragMove ) ; this . pan . on ( "panend" , this . handleDragEnd ) ; } } destroyPan ( ) { if ( this . pan ) { this . pan . destroy ( ) ; this . pan = undefined ; } this . sidebar = undefined ; } handleDragMove ( event ) { $ ( this . sidebar ! ) . css ( "margin-right" , `-${ event . deltaX }px` ) ; } handleDragEnd ( event ) { if ( event . velocityX > 0.3 || event . deltaX > this . sidebar ! . offsetWidth / 2 ) { this . sidebarVisible = false ; } else { $ ( this . sidebar ! ) . animate ( { marginRight : 0 } ) ; } } handleSidebarHidden ( ) { $ ( this . sidebar ! ) . css ( "margin-right" , "" ) ; } }