Components

A collection of (currently) unfinished and undocumented mithril utilities and components.

Table of Contents

• Action
• Classes
• MediaQuery
• Modal
• Portal
• Slider

Action

Use an action component when you have an internal or external link.

import {action} from '@codeurs/front'

view() {
  return m('a', action('/url'))
}

If you have multiple attributes you must write it a little bit different.

import {action} from '@codeurs/front'

view() {
  return m('a', {
    class: 'link',
    ...action('/url')
  })
}

Classes

Conditionally join classNames together. Uses classNames in its implementation but allows you to easily prefix them.

import {classes} from '@codeurs/front'

view() {
  const {mod} = this.attrs
  const open = true

  return [
    //class will be 'mod-small'
    m('a', classes({mod: 'small'}), 'Size'),

    //class will be 'mod-small.mod-black'
    m('a', classes({mod: ['small', 'black']}), 'Size and color'),

    //class will not be set if mod is falsy (false/null/undefined/0/NaN/'')
    m('a', classes({mod}), 'Modification'),

    //class will be 'is-open' if open evaluates to true
    m('a', classes({is: {open}}), 'Is open'),

    //class will be 'is-active' if url is '/home'
    m('a', classes({is: {active: action.isActive('/home')}}), 'Is active')
  ]
}

MediaQuery

Media queries are useful when you want to modify your site depending on the browser's width. The big advantage over css media queries is that elements are not shown but also not drawn.

import {MediaQuery} from '@codeurs/front'

view() {
  return [
    m(MediaQuery, {
      maxWidth: 767,
      view: () => m('p', 'Content that can only be seen up to 768 pixels.')
    }),
    m(MediaQuery, {
      minWidth: 768,
      view: () => m('p', 'Content that can only be seen from 768 pixels.')
    })
  ]
}

Modal

A temporary UI overlay.

import {Component, ModalStore, Modal, ModalOverlay} from '@codeurs/front'

class ModalExample extends Component {
  modal = new ModalStore()
  view() {
    return [
      m('a', {onclick: this.modal.open}, 'Open modal'),
      m(Modal, this.modal, [
        m(ModalOverlay),
        m('.modalexample', 'Popup content')
      ])
    ]
  }
}

Portal

Creates a top-level node in the body and mounts its children. Useful to escape z-index stacking for modals.

import {Component, Portal} from '@codeurs/front'

class PortalExample extends Component {
  view() {
    return m(Portal, [
      m('.portalexample', 'This is placed at the end of document.body')
    ])
  }
}

Slider

Horizontal touch enabled slider. Slides can be of variable width.

import {Component, Slider, SliderStore} from '@codeurs/front'

export default class SliderExample extends Component {
  slider = new SliderStore()
  view() {
    return m('.sliderexample', [
      m(Slider, this.slider, [
        m('.sliderexample-slide'), // display: inline-block
        m('.sliderexample-slide')  // etc ...
      ]),
      m('a', {onclick: e => this.slider.goPrevious()}, 'Previous'),
      m('a', {onclick: e => this.slider.goNext()}, 'Next')
    ])
  }
}