import * as m from 'mithril' ; import state from '../state/state' ; import { getSavedDocumentList } from '../utils/file' ; export interface FileOpenModalAttributes { onCancel : ( ) => void ; onFileSelected : ( filename : string ) => void ; } returns function FileOpenModal ( ) { function getButtonMarkup ( attrs ) { return m ( 'div' , { style : { marginTop : '20px' , textAlign : 'right' , } , } , [ m ( 'button' , { onclick : attrs . onCancel } , 'Cancel' ) , ] ) ; } function getCurrentDocsMarkup ( attrs ) { const currentFilenamesMarkup = [ ] ; getSavedDocumentList ( ) . forEach ( ( filename , index ) => { currentFilenamesMarkup . push ( m ( 'div' , { style : { background : '#ffffff' , fontSize : `${ state . ui . getCurrentFontSize ( ) }px` , paddingTop : index === 0 ? '10px' : '0' , paddingBottom : '10px' , paddingLeft : '20px' , paddingRight : '20px' , } , onclick : ( ) => attrs . onFileSelected ( filename ) , } , filename ) ) ; } ) ; return m ( 'div' , { style : { height : '100px' , overflow : 'auto' , paddingTop : '10px' , paddingBottom : '10px' , paddingLeft : '55px' , width : '200px' , maxWidth : '75%' , } , } , currentFilenamesMarkup ) ; } function getFileOpenModalMarkup ( attrs ) { return m ( 'div' , { style : { background : '#dddddd' , padding : '10px' , border : '2px solid blue' , fontSize : '14px' , position : 'fixed' , left : '50%' , top : '35%' , transform : 'translate(-50%, -50%)' , zIndex : '20' , } , } , [ getCurrentDocsMarkup ( attrs ) , getButtonMarkup ( attrs ) , ] ) ; } function getOverlayMarkup ( ) { return m ( 'div' , { style : { position : 'fixed' , top : '0px' , width : '100%' , height : '100vh' , background : 'rgba(255, 255, 255, 0.5)' , zIndex : '10' , } , } ) ; } return { view : ( { attrs } ) : m . Vnode => m ( 'div' , [ getOverlayMarkup ( ) , getFileOpenModalMarkup ( attrs ) , ] ) , } ; } export default FileOpenModal ;