100 lines
1.9 KiB
JavaScript
100 lines
1.9 KiB
JavaScript
import KeyboardElement from 'three-mesh-ui/examples/elements/keyboard/KeyboardElement';
|
|
import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
|
|
import HTMBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBlockElement';
|
|
|
|
export default class KeyboardHTM extends HTMBlockElement {
|
|
|
|
constructor( options ) {
|
|
|
|
KeyboardElement.ensureOptions( options );
|
|
|
|
super({tagName:'keyboard'});
|
|
|
|
KeyboardElement.make( this, options );
|
|
|
|
// parse all keys
|
|
const iconsInputs = ['enter','shift','backspace'];
|
|
for ( let i = 0; i < this.keys.length; i++ ) {
|
|
const key = this.keys[ i ];
|
|
|
|
if( iconsInputs.indexOf( key.info.input ) !== -1 ){
|
|
key.setAttribute( 'type', 'icon');
|
|
}else{
|
|
key.setAttribute( 'type', 'char');
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
*
|
|
* @returns {HTMBlockElement}
|
|
* @private
|
|
*/
|
|
_buildPanel( ) {
|
|
|
|
const panelBlock = new HyperThreeMesh.createElement('div',{tagName:'panel'});
|
|
panelBlock.charset = 0;
|
|
|
|
return panelBlock;
|
|
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @returns {HTMBlockElement}
|
|
* @private
|
|
*/
|
|
_buildBlock( ) {
|
|
|
|
return HyperThreeMesh.createElement( 'div');
|
|
|
|
}
|
|
|
|
/* eslint-disable no-unused-vars */
|
|
|
|
/**
|
|
*
|
|
* @param char
|
|
* @param keyDefinition
|
|
* @returns {HTMBaseElement}
|
|
* @private
|
|
*/
|
|
_buildKey( char, keyDefinition ) {
|
|
|
|
const key = HyperThreeMesh.createElement( 'button', { tagName:"key", name: char } );
|
|
key.setAttribute('input', char)
|
|
return key;
|
|
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param char
|
|
* @param keyDefinition
|
|
* @returns {HTMBaseElement}
|
|
* @private
|
|
*/
|
|
_buildKeyInline( char, keyDefinition ) {
|
|
|
|
return HyperThreeMesh.createElement( 'span', { tagName:"anonymous-span", name: char } );
|
|
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param char
|
|
* @param keyDefinition
|
|
* @returns {HTMBaseElement}
|
|
* @private
|
|
*/
|
|
_buildKeyInlineBlock( char, keyDefinition ) {
|
|
|
|
return HyperThreeMesh.createElement( 'icon', { name: char } );
|
|
|
|
} /* eslint-enable no-unused-vars */
|
|
|
|
}
|