src/ToolbarButton.ts

   1/**

   2 * # Toolbar Button

   3 * creates a set of buttons at the corner of a positioned panel.

   4 * 

   5 * ### Profile

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

   7 * 

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

   9 * - `symbols: string | string[]` a symbol, or array of symbols 

  10 * - `onclick: ()=>void` a function that is called when the modal box is dismissed

  11 * 

  12 * ### Example

  13 * 

  14 * 'script.js'>

  15 * const clicked = {}

  16 * const keys = Object.keys(hsWidget.ButtonSymbols);

  17 * const groupsOf4 = [];

  18 * let batch = [];

  19 * for (let i=0; i < keys.length; i++) {

  20 *    if (i % 4 === 0) {

  21 *       batch = []

  22 *       groupsOf4.push(batch);

  23 *    }

  24 *    batch.push(keys[i]);

  25 * }

  26 * 

  27 * m.mount(root, {view: () => m('', [

  28 *    m('', keys.map(       // single symbols

  29 *       bn => m('.myPositioned', [

  30 *          clicked[bn]? m('.myClicked''Yayy!!') : m('', bn),

  31 *          m(hsWidget.ToolbarButton, { symbols:hsWidget.ToolbarButton.getSymbol(bn), onclick:click(bn) })

  32 *       ])

  33 *    )), 

  34 *    m('', groupsOf4.map(  // groups of 4 symbols

  35 *       batch => m('.myPositioned', [

  36 *          clicked[batch[0]]? m('.myClicked''Yayy!!') : m('', batch[0]),

  37 *          m(hsWidget.ToolbarButton, { symbols:batch.map(bt => hsWidget.ToolbarButton.getSymbol(bt)), onclick:click(batch[0]) })

  38 *       ])

  39 *    ))

  40 * ])});

  41 * 

  42 * function click(button) {

  43 *      return () => {

  44 *          clicked[button] = true;

  45 *          setTimeout(reset(button), 800);

  46 *      }

  47 * }

  48 * 

  49 * function reset(button) {

  50 *      return () => {

  51 *          clicked[button] = false;

  52 *          m.redraw();

  53 *      }

  54 * }

  55 * 

  56 * 'style.css'>

  57 * .myClicked { background-color: #efe; }

  58 * .myPositioned { 

  59 *      position: relative; 

  60 *      display: inline-block;

  61 *      box-sizing: border-box;

  62 *      background-color: #fff; 

  63 *      text-align: center;

  64 *      font-size: 70%;

  65 *      margin:  2px;

  66 *      padding-top: 20px;

  67 *      height: 50px;

  68 *      width:  70px;

  69 * }

  70 * .hs-corner-button { color: #008; }

  71 * 

  72 * 

  73 */

  74

  75 /** */

  76import { m, Vnode}  from 'hslayout'

  77

  78export const ButtonSymbols = {

  79    cross:      { sym: '×' },

  80    minus:      { sym: '−'},

  81    plus:       { sym: '+'},

  82    dLeft:      { sym: '«'},

  83    dRight:     { sym: '»'},

  84    left:       { sym: '‹'},

  85    right:      { sym: '›'},

  86    leftTri:    { sym: '◂'},

  87    rightTri:   { sym: '▸'},

  88    upTri:      { sym: '▴'},

  89    downTri:    { sym: '▾'},

  90    up:         { sym: '∧'},

  91    down:       { sym: '∨'},

  92    lArrow:     { sym: '←'},

  93    rArrow:     { sym: '→'},

  94    uArrow:     { sym: '↑'},

  95    dArrow:     { sym: '↓'},

  96    empty:      { sym: '○'},

  97    emptySlash: { sym: '∅'},

  98    oSlash:     { sym: 'ø'},

  99    o:          { sym: 'ο'},

 100    lines3:     { sym: '≡'},

 101    sum:        { sym: 'Σ'},

 102    ellipsis:   { sym: '…'},

 103    vertEllips: { sym: '⁝'},

 104    bullet:     { sym: '•'},

 105    enter:      { sym: '↵'},

 106    again:      { sym: '↻'},

 107    start:      { sym: '⇱'},

 108    end:        { sym: '⇲'}

 109};

 110

 111export class ToolbarButton {

 112    // constructor(protected symbols='-') {}

 113    static getSymbol(name:string) {

 114        return ButtonSymbols[name]? ButtonSymbols[name].sym : '';

 115    }

 116    view(node:Vnode) {

 117        if (typeof node.attrs.symbols === 'string') {

 118            return m('.hs-corner-button'

 119                { onclick: node.attrs.onclick }, 

 120                m.trust(node.attrs.symbols)

 121            );

 122        } else {

 123            return m('.hs-corner-button'

 124                    { onclick: node.attrs.onclick }, 

 125                    node.attrs.symbols.map((sym:string) =>m.trust(sym))

 126            );

 127        }

 128    }

 129}

 130

 131