src/Modal.ts

   1/**

   2 * # Modal Widget

   3 * returns a Vnode that covers the entire window. 

   4 * 

   5 * ### Profile

   6 * invoked as `m(Modal, {  })`

   7 * 

   8 * ### Attributes (node.attrs):

   9 * - `width?:  string` the `px` or `%` of the window width to use, or 'auto' if omitted.

  10 * - `height?: string` the `px` or `%` of the window height to use, or 'auto' if omitted.

  11 * - `content: Vnode` the mithril node to show as content of the modal

  12 * - `dismiss: () => void` an optional function that is called when the modal box is dismissed.

  13 * - `setTrigger: (trigger:()=>void)=>void` required; a function that that receives a trigger function 

  14 *      to be called in order to trigger the modal box. See below for an implementation example.

  15 * 

  16 * ### Example

  17 * 

  18 * 'script.js'>

  19 * let dismissals = 0;

  20 * let trigger;

  21 * m.mount(root, {view: () => m('.hs-white', [

  22 *      m('h4', {onclick:() => trigger()}, `click me (dismissed ${dismissals} times)`),

  23 *      m(hsWidget.Modal, { 

  24 *          setTrigger: (t) => trigger = t,

  25 *          width:  '300px',

  26 *          height: '200px',

  27 *          dismiss: () => dismissals++,

  28 *          content: m('''click border to release'

  29 *      })

  30 *    ])

  31 * });

  32 * 

  33 * 

  34 */

  35

  36 /** */

  37import { m, Vnode}  from 'hslayout'

  38import { ToolbarButton } from './ToolbarButton';

  39

  40export class Modal {    

  41    oninit(node:Vnode) {

  42        node.state.id = Math.floor(Math.random()*1000);

  43        node.state.showModal = false;

  44    }

  45    view(node:Vnode) {

  46        const trigger = () => {

  47            node.state.showModal = true;

  48            m.redraw();

  49        };

  50        const dismiss = () => {

  51            node.state.showModal = false;

  52            if (node.attrs.dismiss) { node.attrs.dismiss(); }

  53        };

  54        const w = node.attrs.width  || 'auto';

  55        const h = node.attrs.height || 'auto';

  56        const attrs = { style: `width:${w}; height:${h};`};

  57        if (node.attrs.setTrigger) { node.attrs.setTrigger(trigger); }

  58        else { console.log(`required attribute function 'setTrigger' is not defined`); }

  59        return !node.state.showModal? m('span') : m('.hs-modal-frame', [

  60            m('.hs-modal-background', { onclick: dismiss}, ''),

  61            m('.hs-modal-foreground', attrs, !node.attrs.content? 'modal pane' : [

  62                node.attrs.content,

  63                m(ToolbarButton, { onclick: dismiss, symbols:ToolbarButton.getSymbol('cross') }) 

  64            ])

  65        ]);

  66    }

  67}

  68