import * as m from 'mithril' ; import state from '../state/state' ; import { getSavedDocumentList } from '../utils/file' ; export interface FileSaveModalAttributes { docName : string ; onCancel : ( ) => void ; onSave : ( filename : string ) => void ; } returns function FileSaveModal ( ) { let inputValue = '' ; function getButtonsMarkup ( attrs ) { return m ( 'div' , { style : { marginTop : '20px' , textAlign : 'right' , } , } , [ m ( 'button' , { style : 'margin-right: 10px' , onclick : ( ) => onSave ( attrs ) , disabled : inputValue === '' , } , 'Save' ) , m ( 'button' , { onclick : attrs . onCancel } , 'Cancel' ) , ] ) ; } function getCurrentDocsMarkup ( ) { const currentFilenamesMarkup = [ ] ; getSavedDocumentList ( ) . forEach ( ( filename , index ) => { currentFilenamesMarkup . push ( m ( 'div' , { style : { background : '#ffffff' , paddingTop : index === 0 ? '10px' : '0' , paddingBottom : '10px' , paddingLeft : '20px' , paddingRight : '20px' , } , } , filename ) ) ; } ) ; return m ( 'div' , { style : { height : '100px' , overflow : 'auto' , paddingTop : '10px' , paddingBottom : '10px' , paddingLeft : '55px' , } , } , currentFilenamesMarkup ) ; } function getNameInputMarkup ( attrs ) { return m ( 'div' , { style : 'display: flex' , } , [ m ( 'div' , 'Name' ) , m ( 'div' , m ( 'input' , { oninput : onInputValueChange , onkeyup : ( e ) => onInputKeyUp ( e , attrs ) , style : { fontSize : `${ state . ui . getCurrentFontSize ( ) }px` , marginLeft : '12px' , } , value : inputValue , } ) ) , ] ) ; } function getFileSaveModalMarkup ( attrs ) { return m ( 'div' , { style : { background : '#dddddd' , padding : '10px' , border : '2px solid blue' , fontSize : `${ state . ui . getCurrentFontSize ( ) }px` , position : 'fixed' , left : '50%' , top : '35%' , transform : 'translate(-50%, -50%)' , zIndex : '20' , } , } , [ getCurrentDocsMarkup ( ) , getNameInputMarkup ( attrs ) , getButtonsMarkup ( attrs ) , ] ) ; } function getOverlayMarkup ( ) { return m ( 'div' , { style : { position : 'fixed' , top : '0px' , width : '100%' , height : '100vh' , background : 'rgba(255, 255, 255, 0.5)' , zIndex : '10' , } , } ) ; } function onInputKeyUp ( e , attrs ) { if ( e . key === 'Enter' ) { onSave ( attrs ) ; } else if ( e . key === 'Escape' ) { attrs . onCancel ( ) ; } } function onInputValueChange ( e ) { if ( e . target !== null ) { inputValue = ( ( e . target ) as HTMLInputElement ) . value ; } } function onSave ( attrs ) { if ( inputValue !== '' ) { attrs . onSave ( inputValue ) ; } } return { oninit : ( node ) => { if ( node . attrs . docName !== '' ) { inputValue = node . attrs . docName ; } } , oncreate : ( node ) => { node . dom . getElementsByTagName ( 'input' ) [ 0 ] . focus ( ) ; } , view : ( { attrs } ) : m . Vnode => m ( 'div' , [ getOverlayMarkup ( ) , getFileSaveModalMarkup ( attrs ) , ] ) , } ; } export default FileSaveModal ;