https://github.com/werner/diyalog

Elm dialog
https://github.com/werner/diyalog

elm elm-language

Last synced: about 1 month ago
JSON representation

Elm dialog

• Host: GitHub
• URL: https://github.com/werner/diyalog
• Owner: werner
• License: mit
• Created: 2017-01-23T21:15:12.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-06T23:04:29.000Z (almost 8 years ago)
• Last Synced: 2024-10-12T20:20:54.253Z (2 months ago)
• Topics: elm, elm-language
• Language: Elm
• Size: 83 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Diyalog - A css independient Elm modal

## Examples

All examples are included in examples folder

## Instalation

```

elm package install werner/diyalog

```

## Quick Guide

```elm

module Basic exposing (..)

import Html exposing (..)

import Html.Attributes exposing (..)

import Html.Events exposing (on, onClick, targetValue)

import Diyalog exposing (..)

import Diyalog.Message exposing (..)

import Random

type Msg = DiyalogMsg Diyalog.Message.Msg

         | ChangeNumber Int

type alias Model = { modal : Diyalog.Model Msg, numberRandom : Int }

view : Model -> Html Msg

view model = 

    div [] [ button [ id "my-btn"

                    , onClick <| DiyalogMsg Diyalog.Message.ShowingModal ]

                    [ text "Open Modal" ]

           , p [] []

           , div [] [ text <| "Mi number:" ++ toString model.numberRandom ]

           , Diyalog.view DiyalogMsg model.modal

           ]

update : Msg -> Model -> ( Model, Cmd Msg)

update msg model =

    case msg of

        DiyalogMsg msgModal ->

            case msgModal of

                OkModal ->

                    let (updateModal, cmd) = Diyalog.update msgModal model.modal

                    in

                        ( { model | modal = updateModal }, Random.generate ChangeNumber (Random.int 1 20) )

                _ ->

                    let (updateModal, cmd) = Diyalog.update msgModal model.modal

                    in

                        ( { model | modal = updateModal }, Cmd.none )

        ChangeNumber i ->

            ( { model | numberRandom = i}, Cmd.none )

subscriptions : Model -> Sub Msg

subscriptions model =

    Sub.batch [ Sub.map DiyalogMsg ( Diyalog.subscriptions model.modal ) ]

initial : Model

initial = let initialModal = Diyalog.initial DiyalogMsg

          in { modal = { initialModal | headerTitle = "My awesome Title"

                                      , body = simpleBody }

             , numberRandom = 0 }

main : Program Never Model Msg

main =

    program

      {

        init = ( initial, Cmd.none )

      , view = view

      , update = update

      , subscriptions = subscriptions

      }

simpleBody : Html Msg

simpleBody = p [] [ text " A modal example" ]

```