import { Chord } from "../music-theory/Chord" ; export class InversionBtn { static readonly inversionTypes : any = { 0 : "None" , 1 : "First" , 2 : "Second" , 3 : "Third" , 4 : "Fourth" , 5 : "Fifth" , 6 : "Sixth" } ; onSetInversion : Function ; btn : HTMLElement ; constructor ( ) { this . _setInversionMenu ( 2 ) ; this . btn = document . getElementById ( "chordInversionBtn" ) ! ; this . onSetInversion = function ( ) { } ; } /**
     * Reset inversion btn to None, and menu items based on the chord length
     */ public reset ( chordLen ) { this . _setInversionButton ( "None" ) ; this . _setInversionMenu ( chordLen - 1 ) ; } param maxInversion private _setInversionMenu ( maxInversion ) { const menu = document . getElementById ( "chordInversionDropdownMenu" ) ! ; menu . innerHTML = "" ; if ( maxInversion >= 3 ) { maxInversion = 3 ; } for ( let i = 0 ; i <= maxInversion ; i ++ ) { const item = document . createElement ( "a" ) ; item . classList . add ( "dropdown-item" ) ; item . dataset . inversion = i . toString ( ) ; item . innerText = InversionBtn . inversionTypes [ i ] ; item . addEventListener ( "pointerup" , e => { const btn = e . target as HTMLElement ; const inversionName = btn . innerText ; const inversionNum = parseInt ( btn . dataset . inversion ! ) ; this . _setInversion ( inversionName , inversionNum ) ; } ) ; menu . appendChild ( item ) ; } } param inversionName param inversionNum private private _setInversion ( inversionName , inversionNum ) { this . _setInversionButton ( inversionName ) ; this . onSetInversion ( inversionNum ) ; } param chord public setInversionText ( chord ) { const inversionName = InversionBtn . inversionTypes [ chord . inversionNum ] ; this . _setInversionButton ( inversionName ) ; const chordLen = Chord . getLen ( chord . family , chord . type ) ; this . _setInversionMenu ( chordLen - 1 ) ; } param inversionName private _setInversionButton ( inversionName ) { this . btn . innerText = inversionName ; } /**
     * Disable clicking the button
     */ public disable ( ) { this . btn . classList . add ( "disabled" ) ; } /**
     * Enable clicking the button
     */ public enable ( ) { this . btn . classList . remove ( "disabled" ) ; } }