0

I am creating a variable crashride and doing querySelector inside renderedcallback then I am using that variable inside another function. But if I directly say this.crashride inside the function animateCrashorRide then it does not work so I have to again do query selector for the same css class which does not look right? Please suggest how to resolve this issue.

Link: https://www.youtube.com/watch?v=37Roq15Em2U

Play/try yourself in community cloud : https://smriti19s-developer-edition.na57.force.com/lwcproject/s/

Below is the code

app.html

<template>
  <main>
    <section class="main-wrapper">
      <div class="key-map-wrapper">
        <h2>Key Mapping</h2>
        <ul class="key-map-list">
          <li>
            <kbd class="key-code">E</kbd>
            <span class="key-sound">Crash</span>
          </li>
          <li>
            <kbd class="key-code">R</kbd>
            <span class="key-sound">Ride</span>
          </li>
          <li>
            <kbd class="key-code">F</kbd>
            <span class="key-sound">Floor tom</span>
          </li>
          <li>
            <kbd class="key-code">G</kbd>
            <span class="key-sound">Mid tom</span>
          </li>
          <li>
            <kbd class="key-code">H</kbd>
            <span class="key-sound">High tom</span>
          </li>
          <li>
            <kbd class="key-code">V</kbd>
            <kbd class="key-code">B</kbd>
            <span class="key-sound">Kick</span>
          </li>
          <li>
            <kbd class="key-code">J</kbd>
            <span class="key-sound">Snare</span>
          </li>
          <li>
            <kbd class="key-code">I</kbd>
            <span class="key-sound">Hi-Hat Open</span>
          </li>
          <li>
            <kbd class="key-code">K</kbd>
            <span class="key-sound">Hi-Hat Closed</span>
          </li>
        </ul>
      </div>
      <h1 class="main-title"> Play drums using <br/>Lightning Web Component</h1>
      <div class="drum-kit-wrapper">
        <img class="crash-ride crash-cymbal" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/img/crash.png" alt="Crash cymbal">
        <img class="hihat-top hihat-top-cymbal" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/img/hihat-top.png" alt="Hi Hat cymbal">
        <!-- https://theasciicode.com.ar/  adding ascii on div using data-key -->
        <div data-key="74" class="key snare">
          <kbd>J</kbd>
        </div>
        <div data-key="66" class="key kick">
          <kbd>B</kbd>
        </div>
        <div data-key="86" class="key kick2">
          <kbd>V</kbd>
        </div>
        <div data-key="72" class="key tom-high">
          <kbd>H</kbd>
        </div>
        <div data-key="71" class="key tom-mid">
          <kbd>G</kbd>
        </div>
        <div data-key="70" class="key tom-low">
          <kbd>F</kbd>
        </div>
        <div data-key="69" class="key crash">
          <kbd>E</kbd>
        </div>
        <div data-key="82" class="key ride">
          <kbd>R</kbd>
        </div>
        <div data-key="73" class="key hihat-open">
          <kbd>I</kbd>
        </div>
        <div data-key="75" class="key hihat-close">
          <kbd>K</kbd>
        </div>
        <img class="drum-kit" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/img/drum-kit.png" alt="Drum Kit" />
      </div>
    </section>
  </main>
  <!-- one audio for one div-->
  <audio data-key="74" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/snare.wav"></audio>
  <audio data-key="66" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/kick.wav"></audio>
  <audio data-key="86" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/kick.wav"></audio>
  <audio data-key="72" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/tom-high.wav"></audio>
  <audio data-key="71" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/tom-mid.wav"></audio>
  <audio data-key="70" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/tom-low.wav"></audio>
  <audio data-key="69" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/crash.wav"></audio>
  <audio data-key="82" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/ride.wav"></audio>
  <audio data-key="73" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/hihat-open.wav"></audio>
  <audio data-key="75" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/hihat-close.wav"></audio>
  </template>

app.js

//APP.JS


import { LightningElement } from 'lwc';

export default class App extends LightningElement {

//which event happens automatically we dont need to capture by using event 
//else we have to use event
playingClass = 'playing';

  renderedCallback(){
//    console.log('this => ', this);
    const crashRide = this.template.querySelector('.crash-ride');
  //  console.log('crashRide => ', crashRide);
    const hiHatTop = this.template.querySelector('.hihat-top');
   // console.log('hiHatTop => ', hiHatTop);
    crashRide.addEventListener('transitionend', this.removeCrashRideTransition);
    hiHatTop.addEventListener('transitionend', this.removeHiHatTopTransition);
    //window works in lwc
    window.addEventListener('keydown', this.playSound);
    const drumKeys = Array.from(this.template.querySelectorAll('.key'));
    drumKeys.forEach(key => {
    key.addEventListener('transitionend', this.removeKeyTransition);
});
    }  


 playSound = e => {
 // console.log('inside playsound');
  const keyCode = e.keyCode;
   console.log('keycode',keyCode);
  var keyElement = this.template.querySelector(`div[data-key="${keyCode}"]`);
  console.log('keyElement',keyElement);
 // console.log('inside keyElement',keyElement);
  //when press key valid-- checks key code for audio element
  const audioElement = this.template.querySelector(`audio[data-key="${keyCode}"]`);
 // console.log('audioElement',audioElement);
  //set timestap from where audio starts 
  //current time of null -  
  //method does does not exist - spellingerror in predefined function (which already exsist in any lang)
  audioElement.currentTime = 0;
  audioElement.play();

  switch(keyCode) {
    case 69:
    case 82:
      this.animateCrashOrRide();
      break;
    case 73:
    case 75:
      this.animateHiHatClosed();
      break;
  }

  keyElement.classList.add(this.playingClass);
};
animateCrashOrRide()  {
  console.log('inside animatedcrash ride');  
   this.template.querySelector('.crash-ride').style.transform = "rotate(0deg) scale(1.5)";

};

animateHiHatClosed() {
 console.log('inside animateHiHatClosed');
 this.template.querySelector('.hihat-top').style.top = "171px";
 //hiHatTop.style.top = '171px';
};

 removeCrashRideTransition = e =>  {
  console.log('inside removeCrashRideTransition');

  if(e.propertyName !== 'transform') return;

  e.target.style.transform = 'rotate(-7.2deg) scale(1.5)';
};

 removeHiHatTopTransition = e => {
  console.log('inside removeHiHatTopTransition');
  if(e.propertyName !== 'top') return;

  e.target.style.top = '166px';
};  

 removeKeyTransition = e => {
  console.log('inside removeKeyTransition');

  if(e.propertyName !== 'transform') return;

e.target.classList.remove(this.playingClass);
};

}

app.css


html,body {
    padding: 0;
    margin: 0;
    background-color: #fff;
}

.main-wrapper {
    margin: 30px auto 0;
    width: 1080px;
    text-align: center;
}

.main-title {
    font-family: 'Pacifico', cursive;
    text-align: center;
    font-size: 3.2em;
    color: #cb2026;
    text-shadow: 1px 1px 1px #5a0b0d;
    padding-bottom: 50px;
}

.drum-kit-wrapper {
    position: relative;
    width: 600px;
    margin: -100px auto 0;
}

.drum-kit {
    width: 100%;
    height: 520px;
    position: relative;
}

.crash-cymbal {
    position: absolute;
    top: 114px;
    left: 80px;
    transform: rotate(-7.2deg) scale(1.5);
    transition: all ease-in-out .042s;
}

.hihat-top-cymbal {
    position: absolute;
    top: 166px;
    right: 71px;
    transform: scale(1.35);
    z-index: 0;
    transition: all ease-in-out .042s;
}

.key {
    display: inline-block;
    transition: all ease-in-out .042s;
    position: absolute;
    background: #eaeaea;
    font-size: 1.5em;
    height: 32px;
    width: 32px;
    text-align: center;
    border-radius: 4px;
    border: 3px solid #aaa;
    color: #444;
    box-shadow: 1px 1px 1px rgba(0,0,0,.65);
    z-index: 2;
}

.key.kick {
    top: 355px;
    right: 250px;
}

.key.kick2 {
    top: 355px;
    right: 308px;
}

.key.snare {
    right: 145px;
    top: 280px;
}

.key.tom-high {
    right: 227px;
    top: 240px;
}

.key.tom-mid {
    left: 222px;
    top: 220px;
}

.key.tom-low {
    top: 320px;
    left: 133px;
}

.key.crash {
    top: 80px;
    left: 75px;
}

.key.ride {
    left: 165px;
    top: 87px;
}

.key.hihat-open {
    right: 165px;
    top: 144px;
}

.key.hihat-close {
    right: 60px;
    top: 150px;
}

.playing {
    transform: scale(1.12);
}

.key-map-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 700px;
    background: #111;
    width: 250px;
    z-index: 3;
}

.key-map-wrapper > h2 {
    color: #fff;
    font-family: 'Handlee', cursive;
    margin-bottom: 35px;
    border-bottom: 1px solid #fff;
    padding-bottom: 20px;
}

.key-map-list {
    list-style: none;
    color: #fff;
    text-align: left;
}

.key-map-list > li {
    margin-bottom: 25px;
}

.key-code {
    color: #444;
    background-color: #eaeaea;
    font-size: 1.25em;
    padding: 5px 10px;
    border-radius: 4px;
    border: 3px solid #aaa;
}

.key-sound {
    font-size: 1.2em;
    margin-left: 10px;
    font-family: 'Handlee', cursive;
    vertical-align: middle;
}
1
  • BTW, nicely done sample project for LWC.
    – arut
    Aug 14, 2020 at 14:38

1 Answer 1

0

The scope of const crashRide is within the renderedCallback method and cannot be accessed outside this method. You can update your code as shown below. So, this way you are accessing the event object which has all the details about the current event (such as type, target, current target etc.). event.target refers to the target HTML element to which the event was originally dispatched.

animateCrashOrRide(event)  {
   console.log('inside animatedcrash ride');  
   event.target.style.transform = "rotate(0deg) scale(1.5)";
};

There is nothing wrong with your way of coding too. If you look at the code in browser console, lwc runtime would have converted your code to access the event object. Something like this (where a represents the event object):

this.removeCrashRideTransition = a =>{
   "transform" === a.propertyName && (a.target.style.transform = "rotate(-7.2deg) scale(1.5)")
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.