Skip to content

new-copy-feature #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

new-copy-feature #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 103 additions & 82 deletions elm-src/HtmlToElmWebsite/Main.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
port module Main exposing (..)

import Task

import Dict
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Window


-- import Debug exposing (..)

import HtmlToElmWebsite.Layout as Layout
import HtmlToElmWebsite.HtmlComponents exposing (githubStarButton)
import HtmlToElmWebsite.HtmlExamples exposing (htmlExamples)
import HtmlToElm.HtmlToElm exposing (htmlToElm)

-- type alias StringAddress = Signal.Address String


-- type alias StringAddress = Signal.Address String
-- currHtmlMailbox : Signal.Mailbox String
-- currHtmlMailbox =
-- Signal.mailbox ""
Expand All @@ -27,27 +28,27 @@ topBar =
[ div
[]
[ p
[ style [("float", "left")]]
[ style [ ( "float", "left" ) ] ]
[ text "HTML to Elm" ]
, div
[ style [("float", "right"), ("font-size", "14px")]]
[ style [ ( "float", "right" ), ( "font-size", "14px" ) ] ]
[ a
[ href "https://github.com/mbylstra/html-to-elm"
, style [("margin-right", "10px")]
, style [ ( "margin-right", "10px" ) ]
]
[ img
[ src "https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-16.png"
, style [("vertical-align", "text-top")]
, style [ ( "vertical-align", "text-top" ) ]
]
[]
, text " https://github.com/mbylstra/html-to-elm"
]
, githubStarButton
{ user="mbylstra"
, repo="html-to-elm"
, type_="star"
, size="small"
, style=[("vertical-align", "middle"), ("margin-top", "-5px")]
{ user = "mbylstra"
, repo = "html-to-elm"
, type_ = "star"
, size = "small"
, style = [ ( "vertical-align", "middle" ), ( "margin-top", "-5px" ) ]
}
]
]
Expand All @@ -57,7 +58,7 @@ topBar =
snippetButton : String -> Html Msg
snippetButton snippetName =
span
[class "example-button"
[ class "example-button"
, onClick (LoadSnippet snippetName)
]
[ text snippetName ]
Expand All @@ -80,65 +81,67 @@ leftPanel model =
, div
[]
[ textarea
[
-- type_ "string"
[ -- type_ "string"
id "html"
, placeholder "input"
, name "points"
-- , on "input" targetValue (\v -> Signal.message currHtmlMailbox.address v) -- this should be an action!
-- , on "input" targetValue (\v -> Signal.message currHtmlMailbox.address v) -- this should be an action!
]
[ ]
[]
]
, div
[ style Layout.panelHeader
, class "left-panel-heading"
]
([ text "snippets: " ] ++ snippetButtons)
([ text "snippets: " ] ++ snippetButtons)
]


copyButton : Bool -> Html Msg
copyButton visible =
let
style_ = if visible then [] else [("display", "none")]
style_ =
if visible then
[]
else
[ ( "display", "none" ) ]
in
div
[ id "copy-button", style style_, class "copy-button" ]
[ text "copy"]
[ onClick OnClickCopy, id "copy-button", style style_, class "copy-button" ]
[ text "copy" ]


rightPanel : Model -> Html Msg
rightPanel model =

let
hint =
case model.elmCode of
Just elmCode ->
div [] []

Nothing ->
div [ class "hint" ]
[ text """
Hint: only one top level element is allowed
"""
]

in
div
[ class "right-panel", style <| Layout.rightPanel model.windowSize]
[ class "right-panel", style <| Layout.rightPanel model.windowSize ]
[ div
[ style Layout.panelHeader
, class "right-panel-heading"
]
[ text "Elm code appears here (see "
, a [href "https://github.com/elm-lang/html", target "_blank"] [ text "elm-lang/html"]
, a [ href "https://github.com/elm-lang/html", target "_blank" ] [ text "elm-lang/html" ]
, text ")"
]
, div
[ style <| Layout.panelContent model.windowSize
, class "elm-code"
]
[ hint
, pre [id "elm-code", class "elm"] []
, pre [ id "elm-code", class "elm" ] []
]
, div
[ style Layout.panelHeader
Expand All @@ -149,78 +152,93 @@ rightPanel model =
[ class "example-button"
, onClick (SetIndentSpaces 2)
]
[text "2"]
[ text "2" ]
, span
[class "example-button"
[ class "example-button"
, onClick (SetIndentSpaces 4)
]
[text "4"]
[ text "4" ]
]
--, copyButton (if elmCode == "" then True else True)
, copyButton True
]

type Msg =
LoadSnippet String

type Msg
= LoadSnippet String
| SetIndentSpaces Int
| HtmlUpdated String
| WindowSizeChanged Window.Size
| ElmDomReady
| NoOp
| OnClickCopy



-- actionsMailbox : Signal.Mailbox (Maybe Msg)
-- actionsMailbox = Signal.mailbox Nothing


-- actionsAddress : Signal.Address Msg
-- actionsAddress =
-- Signal.forwardTo actionsMailbox.address Just


update : Msg -> Model -> (Model, Cmd Msg)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case Debug.log "msg" msg of
HtmlUpdated html ->
let
elmCode = (htmlToElm model.indentSpaces) html
elmCode =
(htmlToElm model.indentSpaces) html
in
{ model |
html = html
, elmCode = elmCode
} ! [ outgoingElmCode elmCode ]
{ model
| html = html
, elmCode = elmCode
}
! [ outgoingElmCode elmCode ]

LoadSnippet snippetName ->
let
snippet =
case (Dict.get snippetName htmlExamples) of
Just snippet_ -> snippet_
Nothing -> ""
snippet =
case (Dict.get snippetName htmlExamples) of
Just snippet_ ->
snippet_

Nothing ->
""
in
{ model | currentSnippet = snippet }
! [ currentSnippet snippet ]
{ model | currentSnippet = snippet }
! [ currentSnippet snippet ]

SetIndentSpaces indentSpaces ->
let
newModel = { model | indentSpaces = indentSpaces }
newModel =
{ model | indentSpaces = indentSpaces }
in
newModel !
[ Task.perform identity (Task.succeed (HtmlUpdated model.html)) ]
newModel
! [ Task.perform identity (Task.succeed (HtmlUpdated model.html)) ]

WindowSizeChanged size ->
{ model | windowSize = size } ! []

ElmDomReady ->
model !
[ elmDomReady "" ]
model
! [ elmDomReady "" ]

NoOp ->
model ! []
model ! []

OnClickCopy ->
( model, copyCode () )


-- Nothing ->
-- Debug.crash "This should never happen."

-- Nothing ->
-- Debug.crash "This should never happen."


type alias Model =
{ html : String
, elmCode: Maybe String
, elmCode : Maybe String
, indentSpaces : Int
, currentSnippet : String
, windowSize : Window.Size
Expand All @@ -237,11 +255,10 @@ initialModel =
}



-- actionsModelSignal : Signal Model
-- actionsModelSignal =
-- Signal.foldp updateFunc initialModel actionsMailbox.signal


-- modelSignal : Signal Model
-- modelSignal =
-- let
Expand All @@ -254,65 +271,69 @@ initialModel =
-- }
-- in
-- Signal.map2 reducer actionsModelSignal incomingHtmlCodeSignal


-- main : Signal Html
-- main =
-- Signal.map2 (view actionsAddress) modelSignal Window.dimensions


view : Model -> Html Msg
view model =
div [ ]
[ topBar
, div []
[ leftPanel model
, rightPanel model
div []
[ topBar
, div []
[ leftPanel model
, rightPanel model
]
]
]


-- port incomingHtmlCodeSignal : Signal (String)

-- port incomingHtmlCodeSignal : Signal (String)
-- port outgoingElmCode : Signal (Maybe String)
-- port outgoingElmCode = Signal.map .elmCode modelSignal

-- port windowHeight : Signal Int
-- port windowHeight = Window.height






main : Program Never Model Msg
main =
Html.program
{ init = initialModel !
[ Task.perform (\size -> WindowSizeChanged size) Window.size
, Task.perform identity (Task.succeed ElmDomReady)
]
, update = update
, view = view
, subscriptions = subscriptions
}
Html.program
{ init =
initialModel
! [ Task.perform (\size -> WindowSizeChanged size) Window.size
, Task.perform identity (Task.succeed ElmDomReady)
]
, update = update
, view = view
, subscriptions = subscriptions
}


subscriptions : Model -> Sub Msg
subscriptions model =
-- suggestions Suggest
incomingHtmlCode HtmlUpdated
-- suggestions Suggest
incomingHtmlCode HtmlUpdated



-- subscriptions model =
-- Window.resizes (\size -> WindowSizeChanged size)


port incomingHtmlCode : (String -> msg) -> Sub msg



port incomingHtmlCode : (String -> msg) -> Sub msg
-- port suggestions : (List String -> msg) -> Sub msg


port outgoingElmCode : Maybe String -> Cmd msg


port currentSnippet : String -> Cmd msg


port elmDomReady : String -> Cmd msg


port copyCode : () -> Cmd msg
Loading