Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slamdata/purescript-halogen-menu
https://github.com/slamdata/purescript-halogen-menu
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/slamdata/purescript-halogen-menu
- Owner: slamdata
- License: apache-2.0
- Archived: true
- Created: 2015-10-29T22:58:42.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-24T11:19:37.000Z (over 7 years ago)
- Last Synced: 2024-07-01T09:57:16.547Z (4 months ago)
- Language: PureScript
- Size: 37.1 KB
- Stars: 8
- Watchers: 11
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-purescript - purescript-halogen-menu - Interactive menus in Halogen (Components)
README
# purescript-halogen-menu
[](https://github.com/slamdata/purescript-halogen-menu/releases)
[](https://travis-ci.org/slamdata/purescript-halogen-menu)
A reusable halogen component that presents an interactive menu.
## HTML
Menus are rendered as unordered lists of submenus which can be selected and dismissed. Selected submenus are also rendered as unordered lists.
Here is an example of a rendered menu with the first submenu selected.
```HTML
- Color
- Load color
- Save color
- Edit
```
## Guide
### Installing `purescript-halogen-menu`
* Install `purescript-markdown-halogen` using bower: `bower i purescript-markdown-halogen --save`.
### Rendering a menu
* Create a Halogen parent component to install your menu in.
* Decide what you want selecting an item from your menu to do. Commonly this will be to cause some other component or to evaluate a query.
* Define a query or other data type which represents what you want selecting an item from your menu to do.
* Import `Halogen.Menu.Model (Menu(), mkMenu)`.
* Construct the intitial state of your menu as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditorMenu/Model.purs) replacing `ColorQuery Unit` with the type you defined in the previous step.
* Import `Halogen.Menu.Component (MenuP(), MenuQueryP(), SubmenuSlotAddress(), menuComponent)`.
* Define a slot address for your menu.
* Define a type synonym for your menu's state and queries using the query or other data type you defined above as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L37-L38).
* Use these type synonyms and slot address type to redefine the child state, child query and child slot address type synonyms for your parent component as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L51-L53).
* Install your menu into your parent component inside of an element with a class or id as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L74-L80).
### Dismissing submenus when `onclick` events are triggered outside of a menu component
* Import `Halogen.Menu.Query (MenuQuery(..))`.
* Define a non propogating and default preventing action which is triggered by the onclick event of the root element of your application as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L71).
* Define the evaluation of this action such that it queries your menu component with the `DismissSubmenu` action as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L93-L95).
### Making a menu perform actions
* Import `Halogen.Menu.Submenu.Query (SubmenuQuery(..))`.
* Define a peek function for your parent component which transforms the `SelectSubmenuItem` query containing the values you have specified into the operations you wish to perform. In [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/src/ColorEditor/Component.purs#L97-L104) this is routing a query to another component.
### Styling a menu
* Use the [included template](stylesheet.css) to define styling for the `ul`s, `li`s and `button`s in your menu using the class or id you defined previously as a root element as in [this example](https://github.com/beckyconning/color-editor/tree/94de4b0297ef1ed6e76561ec88234be0ca7f07bd/stylesheet.css#L17-L72).
## Module documentation
Module documentation is [published on Pursuit](http://pursuit.purescript.org/packages/purescript-halogen-menu).
## Example
An example Halogen application which uses `purescript-halogen-menu` is available [here](https://github.com/beckyconning/color-editor).