import { EVT } from './EVT' ; import { DOM } from './DOM' ; import { SaveSettings } from './SaveSettings' ; import { SettingsForm } from './Settings.d' ; import formHtml from './SettingHTML' ; class Settings { constructor ( ) { this . form = DOM . useSlot ( 'form' , formHtml ) as SettingsForm ; this . allCheckBox = this . form . querySelectorAll ( 'input[type="checkbox"]' ) as NodeListOf < HTMLInputElement > ; this . allRadio = this . form . querySelectorAll ( 'input[type="radio"]' ) as NodeListOf < HTMLInputElement > ; this . allSwitch = this . form . querySelectorAll ( '.checkbox_switch' ) ; this . allLabel = this . form . querySelectorAll ( 'label' ) ; this . bindEvents ( ) ; new SaveSettings ( this . form ) ; this . initFormBueatiful ( ) ; } private initFormBueatiful ( ) { this . resetLabelActive ( ) ; this . resetSubOptionDisplay ( ) ; } public form : SettingsForm ; private allSwitch : NodeListOf < HTMLInputElement > ; private allCheckBox : NodeListOf < HTMLInputElement > ; private allRadio : NodeListOf < HTMLInputElement > ; private allLabel : NodeListOf < HTMLLabelElement > ; private readonly activeClass = 'active' ; private readonly chooseKeys = [ 'Enter' , 'NumpadEnter' ] ; private bindEvents ( ) { for ( const checkbox of this . allCheckBox ) { this . bindCheckboxEvent ( checkbox ) ; } for ( const radio of this . allRadio ) { this . bindRadioEvent ( radio ) ; } window . addEventListener ( EVT . events . settingChange , ( ) => { this . initFormBueatiful ( ) ; } ) ; this . form . querySelector ( '.showFileNameTip' ) ! . addEventListener ( 'click' , ( ) => DOM . toggleEl ( document . querySelector ( '.fileNameTip' ) ! as HTMLDivElement ) ) ; this . form . querySelector ( '.showDateTip' ) ! . addEventListener ( 'click' , ( ) => DOM . toggleEl ( document . querySelector ( '.dateFormatTip' ) ! as HTMLElement ) ) ; const centerInputs = this . form . querySelectorAll ( 'input[type=text]' ) ; for ( const el of centerInputs ) { if ( el . name !== 'userSetName' ) { el . addEventListener ( 'focus' , function ( ) { this . select ( ) ; } ) ; } } this . insertValueToInput ( this . form . fileNameSelect , this . form . userSetName ) ; } private insertValueToInput ( from , to ) { from . addEventListener ( 'change' , ( ) => { if ( from . value !== 'default' ) { const position = to . selectionStart ! ; to . value = to . value . substr ( 0 , position ) + from . value + to . value . substr ( position , to . value . length ) ; to . selectionStart = position + from . value . length ; to . selectionEnd = position + from . value . length ; to . focus ( ) ; } } ) ; } private bindCheckboxEvent ( el ) { el . addEventListener ( 'keydown' , ( event ) => { if ( this . chooseKeys . includes ( event . code ) ) { el . checked = ! el . checked ; this . emitChange ( el . name , el . checked ) ; } } ) ; el . nextElementSibling ! . addEventListener ( 'click' , ( ) => { el . checked = ! el . checked ; this . emitChange ( el . name , el . checked ) ; } ) ; const label = this . form . querySelector ( `label[for="${ el . id }"]` ) ; if ( label ) { label . addEventListener ( 'click' , ( ) => { this . emitChange ( el . name , el . checked ) ; } ) ; } } private bindRadioEvent ( el ) { el . nextElementSibling ! . addEventListener ( 'click' , ( ) => { el . checked = true ; this . emitChange ( el . name , this . form [ el . name ] . value ) ; } ) ; const label = this . form . querySelector ( `label[for="${ el . id }"]` ) ; if ( label ) { label . addEventListener ( 'click' , ( ) => { this . emitChange ( el . name , this . form [ el . name ] . value ) ; } ) ; } } private emitChange ( name , value ) { EVT . fire ( EVT . events . settingChange , { name : name , value : value } ) ; } private resetLabelActive ( ) { for ( const checkbox of this . allCheckBox ) { this . setLabelActive ( checkbox ) ; } for ( const radio of this . allRadio ) { this . setLabelActive ( radio ) ; } } private setLabelActive ( input ) { const label = this . form . querySelector ( `label[for="${ input . id }"]` ) ; if ( label ) { const method = input . checked ? 'add' : 'remove' ; label . classList [ method ] ( 'active' ) ; } } private resetSubOptionDisplay ( ) { for ( const _switch of this . allSwitch ) { const subOption = this . form . querySelector ( `.subOptionWrap[data-show="${ _switch . name }"]` ) as HTMLSpanElement ; if ( subOption ) { subOption . style . display = _switch . checked ? 'inline' : 'none' ; } } } } const settings = new Settings ( ) ; const form = settings . form ; export { form } ;