https://github.com/simonh1000/elm-colorpicker

Elm library to implement a color picker tool
https://github.com/simonh1000/elm-colorpicker

Last synced: 3 months ago
JSON representation

Elm library to implement a color picker tool

• Host: GitHub
• URL: https://github.com/simonh1000/elm-colorpicker
• Owner: simonh1000
• License: mit
• Created: 2017-07-26T07:47:39.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T10:38:55.000Z (5 months ago)
• Last Synced: 2024-09-12T22:02:39.713Z (5 months ago)
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/simonh1000/elm-colorpicker/latest
• Size: 189 KB
• Stars: 19
• Watchers: 4
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ccamel - simonh1000/elm-colorpicker - Elm library to implement a color picker tool (Elm)

README

        
# Elm ColorPicker widget

An Elm library to help you implement a colo(u)r picker tool without relying upon the presence - or [otherwise](http://caniuse.com/#feat=input-color) - of a built-in browser widget.



## Example

```elm

import ColorPicker

type alias Model =

    { colorPicker : ColorPicker.State

    , colour : Color

    }

init : Model

init =

    { colorPicker = ColorPicker.empty

    , colour = Color.rgb 255 0 0

    }

type Msg

    = ColorPickerMsg ColorPicker.Msg

update : Msg -> Model -> Model

update message model =

    case message of

        ColorPickerMsg msg ->

            let

                ( m, colour ) =

                    ColorPicker.update msg model.colour model.colorPicker

            in

                { model

                    | colorPicker = m

                    , colour = colour |> Maybe.withDefault model.colour

                }

view : Model -> Html Msg

view model =

    ColorPicker.view model.colour model.colorPicker

        |> Html.map ColorPickerMsg

```

## Example

See it in action

```sh

cd example

npm install

npm run dev

```

Open http://localhost:3000

### To Do

 * Enable use of different sizes of svg elements

### Changelog

 * 2.0.0 : Remove two exposed helpers that were no longer needed, and buggy

 * 1.1.4 : add opacity picker; better styling; add classes to elements of widget; improved modelling under the hood

 * 1.1.3 : 0.19 (with new Color library)

 * 1.0.0 : Initial release

### Inspired by

 * https://github.com/bendc/color-picker

 * https://github.com/DavidDurman/FlexiColorPicker

 * https://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately?answertab=votes#tab-top

 * Elm-sortable-table's API