html - JavaScript ES6 side nav issue when function call -
i'm building side nav javascript es6 , started supercharged-show code example. made toggle button replace show , hide ones. try use togglesidenav function call showsidenav nothing happen. i'm missing this.
my html page looks :
<body> <header class="header"> <!--<button class="js-menu-show header__menu-toggle material-icons">menu</button>--> <hc-hamburger role="button" class="js-menu"> <div class="hamburger-menu"> <div class="bar"></div> </div> </hc-hamburger> </header> <aside class="js-side-nav side-nav"> <nav class="js-side-nav-container side-nav__container"> <!--<button class="js-menu-hide side-nav__hide material-icons">close</button>--> <header class="side-nav__header"> side nav </header> <ul class="side-nav__content"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </nav> </aside> <script src='./detabinator.js'></script> <script src='./side-nav.js'></script> <script src='./hamburger.js'></script> </body> and js file :
'use strict'; class sidenav { constructor () { this.togglemenuel = document.queryselector('.js-menu'); this.showbuttonel = document.queryselector('.js-menu-show'); this.hidebuttonel = document.queryselector('.js-menu-hide'); this.sidenavel = document.queryselector('.js-side-nav'); this.sidenavcontainerel = document.queryselector('.js-side-nav-container'); // control whether container's children can focused // set initial state inert since drawer offscreen this.detabinator = new detabinator(this.sidenavcontainerel); this.detabinator.inert = true; this.togglesidenav = this.togglesidenav.bind(this); this.showsidenav = this.showsidenav.bind(this); this.hidesidenav = this.hidesidenav.bind(this); this.blockclicks = this.blockclicks.bind(this); this.ontouchstart = this.ontouchstart.bind(this); this.ontouchmove = this.ontouchmove.bind(this); this.ontouchend = this.ontouchend.bind(this); this.ontransitionend = this.ontransitionend.bind(this); this.update = this.update.bind(this); this.startx = 0; this.currentx = 0; this.touchingsidenav = false; this.supportspassive = undefined; this.addeventlisteners(); } // apply passive event listening if it's supported applypassive () { if (this.supportspassive !== undefined) { return this.supportspassive ? {passive: true} : false; } // feature detect let issupported = false; try { document.addeventlistener('test', null, {get passive () { issupported = true; }}); } catch (e) { } this.supportspassive = issupported; return this.applypassive(); } addeventlisteners () { this.togglemenuel.addeventlistener('click', this.togglesidenav); // this.showbuttonel.addeventlistener('click', this.showsidenav); // this.hidebuttonel.addeventlistener('click', this.hidesidenav); this.sidenavel.addeventlistener('click', this.hidesidenav); this.sidenavcontainerel.addeventlistener('click', this.blockclicks); this.sidenavel.addeventlistener('touchstart', this.ontouchstart, this.applypassive()); this.sidenavel.addeventlistener('touchmove', this.ontouchmove, this.applypassive()); this.sidenavel.addeventlistener('touchend', this.ontouchend); } ontouchstart (evt) { if (!this.sidenavel.classlist.contains('side-nav--visible')) return; this.startx = evt.touches[0].pagex; this.currentx = this.startx; this.touchingsidenav = true; requestanimationframe(this.update); } ontouchmove (evt) { if (!this.touchingsidenav) return; this.currentx = evt.touches[0].pagex; const translatex = math.min(0, this.currentx - this.startx); if (translatex < 0) { evt.preventdefault(); } } ontouchend (evt) { if (!this.touchingsidenav) return; this.touchingsidenav = false; const translatex = math.min(0, this.currentx - this.startx); this.sidenavcontainerel.style.transform = ''; if (translatex < 0) { this.hidesidenav(); } } update () { if (!this.touchingsidenav) return; requestanimationframe(this.update); const translatex = math.min(0, this.currentx - this.startx); this.sidenavcontainerel.style.transform = `translatex(${translatex}px)`; } blockclicks (evt) { evt.stoppropagation(); } ontransitionend (evt) { this.sidenavel.classlist.remove('side-nav--animatable'); this.sidenavel.removeeventlistener('transitionend', this.ontransitionend); } showsidenav () { console.log('toto'); this.sidenavel.classlist.add('side-nav--animatable'); this.sidenavel.classlist.add('side-nav--visible'); this.detabinator.inert = false; this.sidenavel.addeventlistener('transitionend', this.ontransitionend); } hidesidenav () { this.sidenavel.classlist.add('side-nav--animatable'); this.sidenavel.classlist.remove('side-nav--visible'); this.detabinator.inert = true; this.sidenavel.addeventlistener('transitionend', this.ontransitionend); } togglesidenav () { this.showsidenav; debugger } } new sidenav(); i have hamburger.js file animate hamburger button don't think cause trouble.
thank's help.
you missing brackets in method invocation:
togglesidenav () { this.showsidenav; debugger // ? } should be:
togglesidenav () { this.showsidenav(); debugger // ? } 
Comments
Post a Comment