src/OptionsButton.ts

   1/**

   2 * # Options Button Widget

   3 * A simple options button widget, allowing any button to be pressed indpendently of others.

   4 * 

   5 * ### Profile

   6 * invoked as `m(OptionsButton, {name:, onclick:});`

   7 * 

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

   9 * - `onclick:() => void` function to execute when button is clicked

  10 * - `name: string` name to show as button text

  11 * - `css: string` css class to assign to button tag

  12 * - `style: string` style string to apply to button tag

  13 * 

  14 * ### Example

  15 * 

  16 * 'script.js'>

  17 * let options = {};

  18 * 

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

  20 *    m('h4', `Select Option: '${Object.keys(options).map(k=>options[k]).join(" ")}'`),

  21 *    m(hsWidget.OptionsButton, { desc: {

  22 *        items: ['1st''2nd','3rd'],

  23 *        clicked: (item) => options[item] = options[item]? undefined : item

  24 *    }})

  25 * ])});

  26 * 

  27 * 

  28 * 

  29 */

  30

  31/** */

  32import { m, Vnode }      from 'hslayout';

  33import { Layout }        from 'hslayout';

  34import { Selector }      from './Selector';

  35import { anyItems }      from './Selector';

  36

  37/**

  38 * # Options Button Widget

  39 * A group of buttons with one or more selected

  40 * 

  41 * ### Profile

  42 * invoked as `m(OptionsButton, {desc: { items:[], clicked:}});`

  43 * 

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

  45 * - `desc:` see {@link Selector.SelectorDesc SelectorDesc}

  46 *     - `clicked:(item:string) => void`    function to execute when button is selected

  47 *     - `selectedItem?: number|string`     the currently selected item, by index or name

  48 *     - `items: string[]`                  names to individual buttons to show

  49 *     - `itemCss?:string[]`                css to apply to each item;

  50 * - `css?: string`                         css class to assign to button group

  51 * - `style?: string`                       style string to apply to button tag

  52 */

  53export class OptionsButton extends Selector {

  54    oninit(node:Vnode) {

  55        Selector.init(node, anyItems);

  56    }

  57    static viewGroup(css:string, node: Vnode) {

  58        css = `${css} ${node.attrs.css || ''}`;

  59        const style = node.attrs.style || '';

  60

  61        return m(css, {style:style}, m(Layout, {

  62            columns: [],

  63            content: node.state.items.map((l:string, i:number) => Selector.renderItem(node, i))

  64        }));

  65    }

  66    view(node: Vnode): Vnode { return OptionsButton.viewGroup('.hs-options-buttons', node); }

  67}

  68

  69