import { Chord } from "../music-theory/Chord" ; import $ from "jquery" ; /**
 * Control the current chord's type
 */ export class ChordTypeBtn { onSetChordType : Function ; btn : HTMLElement ; constructor ( ) { const menuContainer = document . getElementById ( "chordTypeDropdownMenu" ) ! ; this . _renderDropdownMenu ( menuContainer ) ; $ ( '[data-submenu]' ) . submenupicker ( ) ; this . onSetChordType = function ( ) { } ; this . btn = document . getElementById ( "chordTypeBtn" ) ! ; } param container private private _renderDropdownMenu ( container ) { for ( let family in Chord . chordFamilies ) { const submenu = document . createElement ( "div" ) ; submenu . classList . add ( "dropdown" , "dropright" , "dropdown-submenu" ) ; const familyBtn = document . createElement ( "button" ) ; familyBtn . classList . add ( "dropdown-item" , "dropdown-toggle" ) ; familyBtn . setAttribute ( "type" , "button" ) ; familyBtn . setAttribute ( "data-toggle" , "dropdown" ) ; familyBtn . dataset . family = family ; familyBtn . innerText = family ; submenu . appendChild ( familyBtn ) ; const typesMenu = document . createElement ( "div" ) ; typesMenu . classList . add ( "dropdown-menu" ) ; for ( let type in Chord . chordFamilies [ family ] ) { const typeBtn = document . createElement ( "button" ) ; typeBtn . classList . add ( "dropdown-item" ) ; typeBtn . setAttribute ( "type" , "button" ) ; typeBtn . innerText = type ; typeBtn . dataset . family = family ; typeBtn . dataset . type = type ; typeBtn . addEventListener ( "pointerup" , e => { const btn = e . target as HTMLElement ; const type = btn . dataset . type ! ; const family = btn . dataset . family ! ; this . setChordType ( type , family ) ; } ) ; typesMenu . appendChild ( typeBtn ) ; } submenu . appendChild ( typesMenu ) ; container . appendChild ( submenu ) ; } } param type param family public setChordType ( type , family ) { this . setTypeText ( type ) ; this . onSetChordType ( type , family ) ; } param type public setTypeText ( type ) { this . btn . innerText = type ; } /**
     * Disable clicking the button
     */ public disable ( ) { this . btn . classList . add ( "disabled" ) ; } /**
     * Enable clicking the button
     */ public enable ( ) { this . btn . classList . remove ( "disabled" ) ; } }