Flare

data Flare a

A Flare is a Signal with a corresponding list of HTML elements for the user interface components.

Instances

• Functor Flare
• Apply Flare
• Applicative Flare

newtype UI a

The main data type for a Flare UI. It encapsulates the Effect action which is to be run when setting up the input elements and corresponding signals.

Instances

• Functor UI
• Apply UI
• Applicative UI
• (Semigroup a) => Semigroup (UI a)
• (Monoid a) => Monoid (UI a)

type ElementId = String

type Label = String

number :: Label -> Number -> UI Number

Creates an input field for a Number from a given label and default value.

number_ :: Number -> UI Number

Like number, but without a label.

numberRange :: Label -> Number -> Number -> Number -> Number -> UI Number

Creates an input field for a Number from a given label, minimum value, maximum value, step size as well as default value. The returned value is guaranteed to be within the given range.

numberRange_ :: Number -> Number -> Number -> Number -> UI Number

Like numberRange, but without a label.

numberSlider :: Label -> Number -> Number -> Number -> Number -> UI Number

Creates a slider for a Number input from a given label, minimum value, maximum value, step size as well as default value.

numberSlider_ :: Number -> Number -> Number -> Number -> UI Number

Like numberSlider, but without a label.

innerFlare :: forall b a. UI a -> (a -> UI b) -> UI b

Renders an UI with access to the current value.

int :: Label -> Int -> UI Int

Creates an input field for an Int from a given label and default value. The returned value is guaranteed to be within the allowed integer range.

int_ :: Int -> UI Int

Like int, but without a label.

intRange :: Label -> Int -> Int -> Int -> UI Int

Creates an input field for an Int from a given label, minimum and maximum values as well as a default value. The returned value is guaranteed to be within the given range.

intRange_ :: Int -> Int -> Int -> UI Int

Like intRange, but without a label.

intSlider :: Label -> Int -> Int -> Int -> UI Int

Creates a slider for an Int input from a given label, minimum and maximum values as well as a default value.

intSlider_ :: Int -> Int -> Int -> UI Int

Like intSlider, but without a label.

string :: Label -> String -> UI String

Creates a text field for a String input from a given label and default value.

string_ :: String -> UI String

Like string, but without a label.

stringPattern :: Label -> String -> String -> UI String

Creates a text field for a String input from a given label, validation pattern (HTML5 pattern attribute), and a default value.

stringPattern_ :: String -> String -> UI String

Like stringPattern, but without a label.

boolean :: Label -> Boolean -> UI Boolean

Creates a checkbox for a Boolean input from a given label and default value.

boolean_ :: Boolean -> UI Boolean

Like boolean, but without a label.

optional :: forall a. Label -> Boolean -> a -> UI (Maybe a)

Creates a checkbox that returns Just x if enabled and Nothing if disabled. Takes a label, the initial state (enabled or disabled) and the default value x.

optional_ :: forall a. Boolean -> a -> UI (Maybe a)

Like optional, but without a label.

button :: forall a. Label -> a -> a -> UI a

Creates a button which yields the first value in the default state and the second value when it is pressed.

buttons :: forall a f. Traversable f => f a -> (a -> String) -> UI (Maybe a)

Create a button for each element of the given container. The whole component returns Nothing if none of the buttons is pressed and Just x if the button corresponding to the element x is pressed.

select :: forall a f. Foldable f => Label -> NonEmpty f a -> (a -> String) -> UI a

Creates a select box to choose from a list of options. The first option is selected by default. The rest of the options is given as an array.

select_ :: forall a f. Foldable f => NonEmpty f a -> (a -> String) -> UI a

Like select, but without a label.

radioGroup :: forall a f. Foldable f => Label -> NonEmpty f a -> (a -> String) -> UI a

Creates a group of radio buttons to choose from a list of options. The first option is selected by default. The rest of the options is given as an array.

radioGroup_ :: forall a f. Foldable f => NonEmpty f a -> (a -> String) -> UI a

Like radioGroup, but without a label.

textarea :: Label -> String -> UI String

Creates a textarea field for a String input from a given label and default value.

textarea_ :: String -> UI String

Like textarea, but without a label.

color :: Label -> Color -> UI Color

Creates a color picker input field from a label and default Color.

color_ :: Color -> UI Color

Like color, but without a label.

date :: Label -> Date -> UI Date

Creates a date input field from a label and default Date.

date_ :: Date -> UI Date

Like date, but without a label.

time :: Label -> Time -> UI Time

Creates a time input field from a label and default Time.

time_ :: Time -> UI Time

Like time, but without a label.

fieldset :: forall a. Label -> UI a -> UI a

Group the components of a UI inside a fieldset element with a given title.

resizableList :: forall a. Label -> (a -> UI a) -> a -> List a -> UI (List a)

Creates a resizable List a input given a way to construct a UIs, a default a, and a default List a.

resizableList_ :: forall a. (a -> UI a) -> a -> List a -> UI (List a)

Like resizableList, but without a label.

applyUIFlipped :: forall b a. UI a -> UI (a -> b) -> UI b

A flipped version of <*> for UI that arranges the components in the order of appearance.

Operator alias for Flare.applyUIFlipped (left-associative / precedence 4)

wrap :: forall a. (Signal a) -> UI a

Encapsulate a Signal within a UI component.

lift :: forall a. Effect (Signal a) -> UI a

Lift a Signal inside the Eff monad to a UI component.

liftSF :: forall b a. (Signal a -> Signal b) -> UI a -> UI b

Lift a function from Signal a to Signal b to a function from UI a to UI b without affecting the components. For example:

dropRepeats :: forall a. (Eq a) => UI a -> UI a
dropRepeats = liftSF S.dropRepeats

foldp :: forall b a. (a -> b -> b) -> b -> UI a -> UI b

Create a past dependent component. The fold-function takes the current value of the component and the previous value of the output to produce the new value of the output.

setupFlare :: forall a. UI a -> Effect { components :: Array Element, signal :: Signal a }

Low level function to get direct access to the HTML elements and the Signal inside a Flare UI.

flareWith :: forall a. ElementId -> (Signal a -> Effect Unit) -> UI a -> Effect Unit

Renders a Flare UI to the DOM and sets up all event handlers. The ID specifies the HTML element to which the controls are attached. The handler function argument handles the Signal inside the Flare.

runFlareWith :: forall a. ElementId -> (a -> Effect Unit) -> UI a -> Effect Unit

Renders a Flare UI to the DOM and sets up all event handlers. The ID specifies the HTML element to which the controls are attached. The function argument will be mapped over the Signal inside the Flare.

runFlare :: ElementId -> ElementId -> UI String -> Effect Unit

Renders a Flare UI to the DOM and sets up all event handlers. The two IDs specify the DOM elements to which the controls and the output will be attached, respectively.

runFlareShow :: forall a. Show a => ElementId -> ElementId -> UI a -> Effect Unit

Like runFlare but uses show to convert the contained value to a String before rendering to the DOM (useful for testing).