Skip to content

Instantly share code, notes, and snippets.

@matsubara0507

matsubara0507/app.elm

Created December 26, 2017 13:08
Show Gist options
  • Save matsubara0507/bf1298b87898a0be3f0edc44c673c488 to your computer and use it in GitHub Desktop.
Save matsubara0507/bf1298b87898a0be3f0edc44c673c488 to your computer and use it in GitHub Desktop.
Download ZIP
elm-nankatsukuro#4
Raw
app.elm
module Main exposing (..)
import Html exposing (Html, a, div, span, text, textarea)
import Html.Attributes exposing (class, readonly, type_, value, wrap)
import Html.Events exposing (onClick)
import List.Extra as List
type alias Key =
{ view : String
, data : List String
}
keys : List Key
keys =
[ Key "1 あ" [ "あ", "い", "う", "え", "お", "1" ]
, Key "2 か" [ "か", "き", "く", "け", "こ", "2" ]
, Key "3 さ" [ "さ", "し", "す", "せ", "そ", "3" ]
, Key "4 た" [ "た", "ち", "つ", "て", "と", "4" ]
, Key "5 な" [ "な", "に", "ぬ", "ね", "の", "5" ]
, Key "6 は" [ "は", "ひ", "ふ", "へ", "ほ", "6" ]
, Key "7 ま" [ "ま", "み", "む", "め", "も", "7" ]
, Key "8 や" [ "や", "ゆ", "よ", "8" ]
, Key "9 ら" [ "ら", "り", "る", "れ", "ろ", "9" ]
, Key "*" [ "*" ]
, Key "0 わ" [ "わ", "を", "ん", "0" ]
, Key "#" [ "#" ]
]
returnButton : Html Msg
returnButton =
a
[ class "return button", type_ "button", onClick Return ]
[ span [ class "icon is-medium" ] [ text "□" ] ]
keyView : Key -> Html Msg
keyView key =
a
[ class "button", type_ "button", onClick (Push key) ]
[ span [ class "icon" ] [ text key.view ] ]
---- MODEL ----
type alias Model =
{ text : String
, pushed : ( Maybe Key, Int )
, cache : String
}
init : ( Model, Cmd Msg )
init =
( Model "" ( Nothing, -1 ) "", Cmd.none )
---- UPDATE ----
type Msg
= Push Key
| Return
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Push key ->
let
model_ =
{ model | pushed = updatePushed key model }
in
if Tuple.first model.pushed == Just key then
( { model_ | cache = updateCache key model_ }, Cmd.none )
else
( { model_ | text = updateText model_, cache = updateCache key model_ }, Cmd.none )
Return ->
( { model | text = updateText model, pushed = ( Nothing, -1 ), cache = "" }, Cmd.none )
updateCache : Key -> Model -> String
updateCache key model =
key.data
|> List.getAt (Tuple.second model.pushed)
|> Maybe.withDefault ""
updateText : Model -> String
updateText model =
model.text ++ model.cache
updatePushed : Key -> Model -> ( Maybe Key, Int )
updatePushed key model =
if Tuple.first model.pushed == Just key then
( Just key, (Tuple.second model.pushed + 1) % List.length key.data )
else
( Just key, 0 )
---- VIEW ----
view : Model -> Html Msg
view model =
div []
[ div [ class "display" ]
[ textarea
[ class "display-text"
, readonly True
, wrap "hard"
, value (model.text ++ model.cache)
]
[]
]
, keys
|> List.map keyView
|> (::) returnButton
|> div [ class "keyboard" ]
]
---- PROGRAM ----
main : Program Never Model Msg
main =
Html.program
{ view = view
, init = init
, update = update
, subscriptions = always Sub.none
}
Raw
index.html
<html>
<head>
<style>
body {
margin: 0;
padding: 10px;
text-align: center;
color: #293c4b;
}
.display {
margin: 0 auto;
width: 250px;
height: 280px;
border: 3px solid #6F6F6F;
}
.display-text {
width: 100%;
height: 100%;
padding: 10px;
background-color: #EFEFEF;
resize: none;
}
.keyboard {
margin: 0 auto;
margin-top: -3px;
width: 250px;
height: 280px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 3px solid #6F6F6F;
}
.button {
height: 50px;
}
.return {
grid-row: 0;
grid-column: span 3;
}
</style>
</head>
<body>
<script>
var app = Elm.Main.fullscreen()
// you can use ports and stuff here
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment