src/overview.ts

   1/**

   2# hsWidgets 

   3

   4Helpful Scripts UI widgets.  

   5"./data/src/hsWidget/coverage/" target="_blank">[Coverage Info]

   6

   7[![npm version](https://badge.fury.io/js/hswidget.svg)](https://badge.fury.io/js/hswidget)

   8[![GitHub](https://img.shields.io/badge/GitHub-hsWidget-blue.svg)](https://github.com/helpfulscripts/hswidget)

   9[![docs](https://img.shields.io/badge/hsDocs-hsWidget-blue.svg)](https://helpfulscripts.github.io/hsWidget/#!/api/hsWidget/0)

  10[![Build Status](https://travis-ci.org/HelpfulScripts/hsWidget.svg?branch=master)](https://travis-ci.org/HelpfulScripts/hsWidget)

  11[![Dependencies Status](https://david-dm.org/helpfulscripts/hswidget.svg)](https://david-dm.org/helpfulscripts/hswidget)

  12[![Coverage Status](https://coveralls.io/repos/github/HelpfulScripts/hsWidget/badge.svg?branch=master)](https://coveralls.io/github/HelpfulScripts/hsWidget?branch=master)

  13[![Known Vulnerabilities](https://snyk.io/test/github/HelpfulScripts/hsWidget/badge.svg?targetFile=package.json)](https://snyk.io/test/github/HelpfulScripts/hsWidget?targetFile=package.json)

  14[![NPM License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://www.npmjs.com/package/hswidget)

  15

  16___

  17

  18 **hsWidgets** Provides various UI widgets for use with mithril:

  19

  20

  21| Widget | Description |

  22|========|=============|

  23|   {@link Menu.Menu Menu} | A group of horizontal menu items that can trigger actions |

  24|   {@link Button.Button Button} | A simple button widget |

  25|   {@link ToggleButton.ToggleButton ToggleButton} | A button widget that toggleds through a number of items |

  26|   {@link RadioButton.RadioButton RadioButton} | A radio button group widget: one selected at a time |

  27|   {@link OptionsButton.OptionsButton OptionsButton} | An options button group widget: independently selected |

  28|   {@link Collapsible Collapsible} | A panel that will expand znd collapse when the title is clicked |

  29|   {@link Modal Modal} | A modal panel that will cover the entire window until released. |

  30|   {@link AddRemove AddButton} | An inline `+` button that will open a form for adding new elements. |

  31|   {@link AddRemove RemoveButton} | An inline `-` button that will remove an item. |

  32|   {@link TypeAhead TypeAhead} | A TypeAhead search input form. |

  33|   {@link Slider Slider} | A simple nominal or continuous slider. |

  34

  35 * 

  36 * 'script.js'>

  37 * const render = () => m.mount(root, {view: () => 

  38 *    m('.hs-white', m(hsLayout.Layout, {

  39 *      rows:['100px''360px''210px''250px''340px''320px''340px'], content: [m('',''),

  40 * 

  41 *    // Buttons:

  42 *    m('',[

  43 *      m('h2''Buttons'),

  44 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.Button.Button'}, 'Button'), `: Please click: (${clicked}-times clicked)`]),

  45 *      m(hsWidget.Button, { desc: { name: 'click me', clicked: () => clicked++ }}),

  46 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.RadioButton.RadioButton'}, 'RadioButton'), `: Select Station: ${radio}`]),

  47 *      m(hsWidget.RadioButton, { desc: {

  48 *        items: ['1st''2nd','3rd'], clicked: (item) => radio = item

  49 *      }}),

  50 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.OptionsButton.OptionsButton'}, 'OptionsButton'), `: Select Option: '${Object.keys(options).map(k=>options[k]).join(" ")}'`]),

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

  52 *        items: ['1st''2nd','3rd'], clicked: (item) => options[item] = options[item]? undefined : item

  53 *      }}),

  54 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.ToggleButton.ToggleButton'}, 'ToggleButton'), `: Please Toggle between 1st, 2nd, and 3rd`]),

  55 *      m(hsWidget.ToggleButton, { desc: {

  56 *        items: ['1st''2nd','3rd'], clicked: (item) => toggle = item

  57 *      }}),

  58 *    ]),

  59 * 

  60 *    // Menus:

  61 *    m('',[

  62 *      m('h2''Menus'),

  63 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.Menu.Menu'}, 'Menu'), `: Please select:`]),

  64 *      m(hsWidget.Menu, { css: '.myMenu', desc: {

  65 *       items: menuItems,  defaultItem: 'Two',

  66 *       clicked: (item) => theContent = content[menuItems.indexOf(item)]

  67 *      }}),

  68 *      m('myMenuMain', theContent),

  69 *    ]),

  70 * 

  71 *    // Modal Dialog Box:

  72 *    m('',[

  73 *      m('h2.myGapModal''Modal Dialog Box'),

  74 *      m('h4', {onclick:() => trigger() }, 

  75 *          [m('a',{href:'#!/api/hsWidget/hsWidget.Modal.Modal'}, 'Modal'), `: Click me to open a modal box (previous dismissals: ${dismissals})`]),

  76 *      m(hsWidget.Modal, {

  77 *          width:  '300px',

  78 *          height: '200px',

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

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

  81 *          content: m('''click on border or on the x to release')

  82 *      })

  83 *    ]),

  84 * 

  85 *    // Collapsibles:

  86 *    m('',[

  87 *      m('h2''Collapsibles'),

  88 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.Collapsible.Collapsible'}, 'Collapsible'), ': ']),

  89 *      m(hsWidget.Collapsible, { css:'.myCollapsible', components: [

  90 *          m('.myTitle''click me to toggle - no arrows'), content 

  91 *      ]}),

  92 *      m(hsWidget.Collapsible, { css:'.myCollapsible', preArrow:true, components: [

  93 *          m('.myTitle''click me to toggle - left arrow'), content 

  94 *      ]}),

  95 *      m(hsWidget.Collapsible, { css:'.myCollapsible', postArrow:true, components: [

  96 *          m('.myTitle''click me to toggle - right arrow'), content 

  97 *      ]}),

  98 *      m(hsWidget.Collapsible, { css:'.myCollapsible', preArrow:true, postArrow:true, components: [

  99 *          m('.myTitle''click me to toggle - both arrows'), content

 100 *      ]}),

 101 *      m('''Background text, will be pushed down by the Collapsible')

 102 *    ]),

 103 * 

 104 *    // Typeahead Search:

 105 *    m('',[

 106 *      m('h2.myGapTypeAhead''Typeahead Search'),

 107 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.TypeAhead.TypeAhead'}, 'TypeAhead'), `: In-Memory List: ${hero.length? 'Selected1: ' + hero : 'Search for a Superhero'}`]),

 108 *      m(hsWidget.TypeAhead, { 

 109 *          placeholder: 'favorite hero',

 110 *          onsubmit: item => hero = item,

 111 *          list: ['Batman''Superman''Spiderman''Hulk']

 112 *      }),

 113 *      m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.TypeAhead.TypeAhead'}, 'TypeAhead'), `: Remote List: ${friend.length? 'Selected2: '+ friend : 'Search for a Friend'}`]),

 114 *      m(hsWidget.TypeAhead, { 

 115 *          placeholder: 'best friend',

 116 *          onsubmit: item => friend = item,

 117 *          autofocus: true,

 118 *          list: 'example/search.json'

 119 *      })

 120 *    ]),

 121 * 

 122 *    // Corner Buttons:

 123 *    m('',[

 124 *      m('h2.myGapCornerButtons''Corner Buttons'),

 125 *      //m('h4', [m('a',{href:'#!/api/hsWidget/hsWidget.ToolbarButton.ButtonSymbols'}, 'ButtonSymbols'), ', '

 126 *      //         m('a',{href:'#!/api/hsWidget/hsWidget.ToolbarButton.ToolbarButton'}, 'ToolbarButton'), ': ',

 127 *      //         lastCornerButton]),

 128 *      m('', Object.keys(hsWidget.ButtonSymbols).map(

 129 *          b => m('.myCornerPositioned', [

 130 *              btnClicked[b]? m('.myCornerClicked''Yayy!!') : m('', b),

 131 *              m(hsWidget.ToolbarButton, { 

 132 *                  symbols:hsWidget.ToolbarButton.getSymbol(b), onclick:click(b) 

 133 *              })

 134 *          ])

 135 *      ))

 136 *    ]),

 137 * 

 138 * 

 139 * 

 140 * 

 141 *    // Slider:

 142 *    m('',[

 143 *      m('h2.mySliders''Sliders'),

 144 *      m('h4', `Nominal Slider: ${nom}`),

 145 *      m(hsWidget.Slider, { 

 146 *          range: ['one''two''three'],

 147 *          onchange: v => nom=v

 148 *      }),

 149 *      m('h4', `Continuous Slider: ${con}`),

 150 *      m(hsWidget.Slider, {

 151 *          range: [0, 100],

 152 *          onchange: v => con=Math.floor(v*10)/10

 153 *      })

 154 *    ])

 155 * ]}))});

 156 * 

 157 * 

 158 * //--------------------------------------

 159 * // supporting variables:

 160 * const menuItems = ['One''Two''Three'];

 161 * const content   = ['1st''2nd''3rd'];

 162 * let  theContent = content[1];

 163 * let clicked = 0;

 164 * let radio = '';

 165 * let option = '';

 166 * let options = {};

 167 * let toggle = '';

 168 * let added  = 0;

 169 * let removed  = 0;

 170 * const btnClicked = {};

 171 * let lastCornerButton = '';

 172 * let dismissals = 0;

 173 * let trigger;

 174 * let hero = '';

 175 * let friend = '';

 176 * let nom, con;

 177 * 

 178 * const click = (button) => () => {

 179 *    lastCornerButton = '';

 180 *    if (hsWidget.ButtonSymbols[button]) {

 181 *       lastCornerButton = m.trust(`last button pressed: ${hsWidget.ButtonSymbols[button].sym}`);

 182 *       btnClicked[button] = true;

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

 184 *    }

 185 * };

 186 * 

 187 * const reset = (button) => () => {

 188 *    btnClicked[button] = false;

 189 *    m.redraw();

 190 * }

 191 *

 192 * render();

 193 * 

 194 *

 195 * 'style.css'>

 196 * .myMenuMain { 

 197 *    border:1px solid #ddd;

 198 *    border-top: 0px solid #ddd;

 199 * } 

 200 * .myMenu .hs-selectable { 

 201 *     background-color: #eef; 

 202 * }

 203 * .myMenu .hs-selected { 

 204 *     background-color: #ddf; 

 205 *     border-width:0px;

 206 * }

 207 * .myCollapsible {

 208 *     margin-bottom: 5px;

 209 * }

 210 * .myCollapsible .hs-collapsible-title {

 211 *     font-weight:bold;

 212 *     background-color: #eee;

 213 * }

 214 * .myCollapsible .hs-collapsible-expanded {

 215 *     margin-left: 10px;

 216 * }

 217 * .myCornerClicked { background-color: #efe; }

 218 * .myCornerPositioned { 

 219 *      position: relative; 

 220 *      display: inline-block;

 221 *      box-sizing: border-box;

 222 *      background-color: #eee; 

 223 *      text-align: center;

 224 *      font-size: 70%;

 225 *      margin:  2px;

 226 *      padding-top: 20px;

 227 *      height: 50px;

 228 *      width:  50px;

 229 * }

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

 231 * 

 232 * .hs-radio-buttons>.hs-column-layout>.hs-layout { border-color: transparent}

 233 * 

 234 * 

 235 * 

 236*/

 237

 238/** */

 239