import { isArray } from '../common/types' ; import { makeKeyboardElement , unshiftKeyboardLayer , onUndoStateChanged , showAlternateKeys , hideAlternateKeys , VirtualKeyboard , } from './virtual-keyboard-utils' ; import { register as registerCommand , SelectorPrivate } from './commands' ; import { on } from '../editor-mathfield/utils' ; export { unshiftKeyboardLayer } ; registerCommand ( { showAlternateKeys , } , { target : 'virtual-keyboard' } ) ; export function switchKeyboardLayer ( keyboard , layer ) { if ( keyboard . options . virtualKeyboardMode !== 'off' ) { if ( layer !== 'lower-command' && layer !== 'upper-command' && layer !== 'symbols-command' ) { keyboard . executeCommand ( 'complete' ) ; } showVirtualKeyboard ( keyboard ) ; hideAlternateKeys ( ) ; unshiftKeyboardLayer ( keyboard ) ; const layers = keyboard ?. element ! . querySelectorAll ( '.keyboard-layer' ) ; let found = false ; for ( const layer_ of layers ) { if ( ( layer_ as HTMLElement ) . dataset . layer === layer ) { found = true ; break ; } } if ( found ) { for ( const layer_ of layers ) { if ( ( layer_ as HTMLElement ) . dataset . layer === layer ) { layer_ . classList . add ( 'is-visible' ) ; } else { layer_ . classList . remove ( 'is-visible' ) ; } } } keyboard . focusMathfield ( ) ; } return true ; } export function shiftKeyboardLayer ( keyboard ) { const keycaps = keyboard ?. element ! . querySelectorAll < HTMLElement > ( 'div.keyboard-layer.is-visible .rows .keycap, div.keyboard-layer.is-visible .rows .action' ) ; if ( keycaps ) { for ( const keycap of keycaps ) { let shiftedContent = keycap . getAttribute ( 'data-shifted' ) ; if ( shiftedContent || /^[a-z]$/ . test ( keycap . innerHTML ) ) { keycap . dataset . unshiftedContent = keycap . innerHTML ; if ( ! shiftedContent ) { shiftedContent = keycap . innerHTML . toUpperCase ( ) ; } keycap . innerHTML = keyboard . options . createHTML ( shiftedContent ) ; const command = keycap . getAttribute ( 'data-command' ) ; if ( command ) { keycap . dataset . unshiftedCommand = command ; const shifteCommand = keycap . getAttribute ( 'data-shifted-command' ) ; if ( shifteCommand ) { keycap . dataset . command = shifteCommand ; } else { const commandObject = JSON . parse ( command ) ; if ( isArray ( commandObject ) ) { commandObject [ 1 ] = commandObject [ 1 ] . toUpperCase ( ) ; } keycap . dataset . command = JSON . stringify ( commandObject ) ; } } } } } return false ; } registerCommand ( { shiftKeyboardLayer , } , { target : 'virtual-keyboard' } ) ; export function performAlternateKeys ( keyboard , command ) { hideAlternateKeys ( ) ; return keyboard . executeCommand ( command ) ; } export function insertAndUnshiftKeyboardLayer ( keyboard , c ) { keyboard . executeCommand ( [ 'insert' , c ] ) ; unshiftKeyboardLayer ( keyboard ) ; return true ; } registerCommand ( { hideAlternateKeys : ( ) => hideAlternateKeys ( ) , performAlternateKeys , switchKeyboardLayer : ( keyboard , layer ) => switchKeyboardLayer ( keyboard , layer ) , unshiftKeyboardLayer : ( keyboard ) => unshiftKeyboardLayer ( keyboard ) , insertAndUnshiftKeyboardLayer , } , { target : 'virtual-keyboard' } ) ; export function toggleVirtualKeyboardAlt ( keyboard ) { let hadAltTheme = false ; if ( keyboard ?. element ) { hadAltTheme = keyboard ?. element . classList . contains ( 'material' ) ; keyboard . disable ( ) ; } showVirtualKeyboard ( keyboard , hadAltTheme ? '' : 'material' ) ; return false ; } export function toggleVirtualKeyboardShift ( keyboard ) { keyboard . options . virtualKeyboardLayout = { qwerty : 'azerty' , azerty : 'qwertz' , qwertz : 'dvorak' , dvorak : 'colemak' , colemak : 'qwerty' , } [ keyboard . options . virtualKeyboardLayout ] ; const layer = keyboard ?. element ! . querySelector ( 'div.keyboard-layer.is-visible' ) ?. id ?? '' ; if ( keyboard ) { keyboard . disable ( ) ; } showVirtualKeyboard ( keyboard ) ; if ( layer ) { switchKeyboardLayer ( keyboard , layer ) ; } return false ; } registerCommand ( { toggleVirtualKeyboardAlt , /** Toggle the virtual keyboard, but switch another keyboard layout */ toggleVirtualKeyboardShift , } , { target : 'virtual-keyboard' } ) ; export function showVirtualKeyboard ( keyboard , theme = '' ) { keyboard . visible = false ; toggleVirtualKeyboard ( keyboard , theme ) ; return false ; } export function hideVirtualKeyboard ( keyboard ) { keyboard . visible = true ; toggleVirtualKeyboard ( keyboard ) ; return false ; } function toggleVirtualKeyboard ( keyboard , theme ? ) { if ( ! keyboard . options . virtualKeyboardContainer ) return false ; keyboard . visible = ! keyboard . visible ; if ( keyboard . visible ) { keyboard . focusMathfield ( ) ; if ( keyboard . element ) { keyboard . element . classList . add ( 'is-visible' ) ; } else { keyboard . element = makeKeyboardElement ( keyboard , theme ?? '' ) ; on ( keyboard . element , 'touchstart:passive mousedown' , ( ) => keyboard . focusMathfield ( ) ) ; keyboard . options . virtualKeyboardContainer . appendChild ( keyboard . element ) ; } window . setTimeout ( ( ) => { keyboard ?. element ?. classList . add ( 'is-visible' ) ; } , 1 ) ; } else if ( keyboard . element ) { keyboard . disable ( ) ; } keyboard . stateChanged ( ) ; return false ; } registerCommand ( { toggleVirtualKeyboard : ( keyboard , theme ) => toggleVirtualKeyboard ( keyboard , theme ) , hideVirtualKeyboard : ( keyboard ) => hideVirtualKeyboard ( keyboard ) , showVirtualKeyboard : ( keyboard , theme ) : boolean => showVirtualKeyboard ( keyboard , theme ) , onUndoStateChanged : ( keyboard , canUndoState , canRedoState ) => onUndoStateChanged ( keyboard , canUndoState , canRedoState ) , } , { target : 'virtual-keyboard' } ) ;