Glissando for Mithril

A simple content slider for anything that needs to move.

• API
• Demos
  • Standalone use
  • Directed use
• Usage
  • Standalone use
    • Example
  • Directed use
• Size

API

See: Main documentation

Demos

• All examples

Standalone use

• Simple example
• Kitchen sink
• Variable number of images per page

Directed use

• With Mithril router and TypeScript
• Nested routes with Mithril router and TypeScript

Usage

Standalone use

Import the component and model factory and slider CSS:

import { GlissandoSlider, useGlissandoModel } from 'glissando-mithril'
import 'glissando-mithril/dist/glissando.global.min.css'

Create a new model instance:

const model = useGlissandoModel();

Use the rendering component. Pass the model as a prop and the pages as children.

m(GlissandoSlider, { model }, [
  m(Page1),
  m(Page2),
  m(Page3),
  // ... add as many as needed - only 3 will be rendered
])

The pages can be added and removed dynamically. Each time the GlissandoSlider's children change, the model is updated automatically.

Control the slider with methods and query its state using selectors:

{
  view: () => {
    const { previous, next, hasPrevious, hasNext, isAnimating } = model

    return [
      m('button', {
        onclick: () => previous(),
        disabled: !hasPrevious() || isAnimating(),
      }, 'Previous'),
      m('button', {
        onclick: () => next(),
        disabled: !hasNext() || isAnimating(),
      }, 'Next'),
      m(GlissandoSlider, { model }, [
        m(Page1),
        m(Page2),
        m(Page3),
      ])
    ]
  }
}

Example

import { GlissandoSlider, useGlissandoModel } from 'glissando-mithril'
import 'glissando-mithril/dist/glissando.global.min.css'
import { Page1, Page2, Page3 } from './pages'

const Slider = () => {
  const model = useGlissandoModel();
  const { previous, next, hasPrevious, hasNext, isAnimating } = model;

  return {
    view: () => {
      return [
          m(
            'button',
            {
              onclick: () => previous(),
              disabled: !hasPrevious() || isAnimating(),
            },
            'Previous',
          ),
          m(
            'button',
            {
              onclick: () => next(),
              disabled: !hasNext() || isAnimating(),
            },
            'Next',
          ),
        ]),
        m(
          GlissandoSlider,                  
            { model },                     // pass the model as prop
            [
              m(Page1), m(Page2), m(Page3) // may contain as many pages as needed
            ],
        ),
      ]
    }
  }
}

Directed use

Use application state to tell the slider what to show:

const pages = ["page-1", "page-2", "page-3"];

const Slider = {
  view: ({ attrs }) => {
    const { model } = attrs;
    const currentPage = m.route.param('page');

    return m(
      GlissandoSlider,
      {
        model,
        locations: pages,
        location: currentPage,
      },
      pages.map(id =>
        m(Page, {
          key: id,
          location: id,
        }),
      ),
    );
  },
};

The counterparts of component props locations and location are model selectors getLocation, getNextLocation and getPreviousLocation:

const Header: m.Component<TProps> = {
  view: ({ attrs }) => {
    const { model } = attrs;
    const {
      isAnimating,
      getLocation,
      getNextLocation,
      getPreviousLocation,
    } = model;
    
    const location = getLocation();
    const previousLocation = getPreviousLocation();
    const nextLocation = getNextLocation();

    const goPrevious = () => {
      if (previousLocation) {
        m.route.set(previousLocation);
      }
    };
    const goNext = () => {
      if (nextLocation) {
        m.route.set(nextLocation);
      }
    };

    return m(
      'header', [
        m(
          'button',
          {
            type: 'button',
            disabled: !previousLocation || isAnimating(),
            onclick: goPrevious,
          },
          'Previous'
        ),
        m(
          'button',
          {
            type: 'button',
            disabled: !nextLocation || isAnimating(),
            onclick: goNext,
          },
          'Next'
        ),
      ],
    );
  },
};

Size

2.3 KB with all dependencies, minified and gzipped