A Mithril modal component that animates in and out

Using mithril.exitable & Velocity

by Barney Carroll

HTML

<script src="https://rawgit.com/barneycarroll/mithril.exitable.js/master/src/exitable.es3.js"></script>
<script src="https://cdn.rawgit.com/lhorie/mithril/master/mithril.js"></script>
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.js"></script>
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://cdn.rawgit.com/barneycarroll/mithril.exitable.js/master/src/exitable.es3.js"></script>

Babel + JSX

const popup = {
	controller( options ){
  	this.entry = ( el, init ) =>
    	init || Velocity( el.firstChild, 'transition.slideDownIn' )
    
    this.exit = el =>
      Velocity( el.firstChild, 'transition.slideDownOut' )
  },
  
	view : ( ctrl, options ) =>
      m( '.overlay', {
      	config : ctrl.entry,
      
      	onclick( e ){
        	this == e.target && options.close()
      	},
        
      	style : `
          top             : 0;
          bottom          : 0;
          left            : 0;
          right           : 0;
          position        : fixed;

          display         : flex;
          align-items     : center;
          justify-content : center;
        `
    	},
        m( '.popup', {
      		style : `
            background : white;
            border     : 1px solid;
            padding    : 1em;
            overflow   : hidden;
            max-width  : 50%;
          `
    		},
          options.title,

          m( 'hr' ),

          options.body,

          m( 'hr' ),

          m( 'button', {
            style   : `float: right`,
            onclick : options.close
          }, 
            'Cool, thanks'
					)
				)
			)
}

m.mount(document.body, {
  view : ctrl => [
    m( 'button', {
      onclick : () =>
      ctrl.popup = true
    },
      'Popup?'
     ),

    ctrl.popup
    ? m.component( popup, {
      title    : m( 'h1', 'This content is ', m( 'strong', 'rich' ) ),
      body     : m( 'p', 'Are you comfortable with this popup?' ),
      clickOff : true,
      close    : () =>
      ctrl.popup = false
    } )
    : ''
  ]
})