diff --git a/elm-src/HtmlToElmWebsite/Main.elm b/elm-src/HtmlToElmWebsite/Main.elm
index 9ab2602..d1491a2 100644
--- a/elm-src/HtmlToElmWebsite/Main.elm
+++ b/elm-src/HtmlToElmWebsite/Main.elm
@@ -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 ""
@@ -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" ) ]
}
]
]
@@ -57,7 +58,7 @@ topBar =
snippetButton : String -> Html Msg
snippetButton snippetName =
span
- [class "example-button"
+ [ class "example-button"
, onClick (LoadSnippet snippetName)
]
[ text snippetName ]
@@ -80,57 +81,59 @@ 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
@@ -138,7 +141,7 @@ rightPanel model =
, class "elm-code"
]
[ hint
- , pre [id "elm-code", class "elm"] []
+ , pre [ id "elm-code", class "elm" ] []
]
, div
[ style Layout.panelHeader
@@ -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
@@ -237,11 +255,10 @@ initialModel =
}
+
-- actionsModelSignal : Signal Model
-- actionsModelSignal =
-- Signal.foldp updateFunc initialModel actionsMailbox.signal
-
-
-- modelSignal : Signal Model
-- modelSignal =
-- let
@@ -254,8 +271,6 @@ initialModel =
-- }
-- in
-- Signal.map2 reducer actionsModelSignal incomingHtmlCodeSignal
-
-
-- main : Signal Html
-- main =
-- Signal.map2 (view actionsAddress) modelSignal Window.dimensions
@@ -263,56 +278,62 @@ initialModel =
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
diff --git a/js/Main.js b/js/Main.js
index 6b001f9..12706df 100644
--- a/js/Main.js
+++ b/js/Main.js
@@ -19749,33 +19749,6 @@ var _user$project$Main$initialModel = {
currentSnippet: '',
windowSize: {width: 1000, height: 20}
};
-var _user$project$Main$copyButton = function (visible) {
- var style_ = visible ? {ctor: '[]'} : {
- ctor: '::',
- _0: {ctor: '_Tuple2', _0: 'display', _1: 'none'},
- _1: {ctor: '[]'}
- };
- return A2(
- _elm_lang$html$Html$div,
- {
- ctor: '::',
- _0: _elm_lang$html$Html_Attributes$id('copy-button'),
- _1: {
- ctor: '::',
- _0: _elm_lang$html$Html_Attributes$style(style_),
- _1: {
- ctor: '::',
- _0: _elm_lang$html$Html_Attributes$class('copy-button'),
- _1: {ctor: '[]'}
- }
- }
- },
- {
- ctor: '::',
- _0: _elm_lang$html$Html$text('copy'),
- _1: {ctor: '[]'}
- });
-};
var _user$project$Main$topBar = A2(
_elm_lang$html$Html$div,
{
@@ -19914,10 +19887,47 @@ var _user$project$Main$elmDomReady = _elm_lang$core$Native_Platform.outgoingPort
function (v) {
return v;
});
+var _user$project$Main$copyCode = _elm_lang$core$Native_Platform.outgoingPort(
+ 'copyCode',
+ function (v) {
+ return null;
+ });
var _user$project$Main$Model = F5(
function (a, b, c, d, e) {
return {html: a, elmCode: b, indentSpaces: c, currentSnippet: d, windowSize: e};
});
+var _user$project$Main$OnClickCopy = {ctor: 'OnClickCopy'};
+var _user$project$Main$copyButton = function (visible) {
+ var style_ = visible ? {ctor: '[]'} : {
+ ctor: '::',
+ _0: {ctor: '_Tuple2', _0: 'display', _1: 'none'},
+ _1: {ctor: '[]'}
+ };
+ return A2(
+ _elm_lang$html$Html$div,
+ {
+ ctor: '::',
+ _0: _elm_lang$html$Html_Events$onClick(_user$project$Main$OnClickCopy),
+ _1: {
+ ctor: '::',
+ _0: _elm_lang$html$Html_Attributes$id('copy-button'),
+ _1: {
+ ctor: '::',
+ _0: _elm_lang$html$Html_Attributes$style(style_),
+ _1: {
+ ctor: '::',
+ _0: _elm_lang$html$Html_Attributes$class('copy-button'),
+ _1: {ctor: '[]'}
+ }
+ }
+ }
+ },
+ {
+ ctor: '::',
+ _0: _elm_lang$html$Html$text('copy'),
+ _1: {ctor: '[]'}
+ });
+};
var _user$project$Main$NoOp = {ctor: 'NoOp'};
var _user$project$Main$ElmDomReady = {ctor: 'ElmDomReady'};
var _user$project$Main$WindowSizeChanged = function (a) {
@@ -19994,11 +20004,18 @@ var _user$project$Main$update = F2(
_0: _user$project$Main$elmDomReady(''),
_1: {ctor: '[]'}
});
- default:
+ case 'NoOp':
return A2(
_elm_lang$core$Platform_Cmd_ops['!'],
model,
{ctor: '[]'});
+ default:
+ return {
+ ctor: '_Tuple2',
+ _0: model,
+ _1: _user$project$Main$copyCode(
+ {ctor: '_Tuple0'})
+ };
}
});
var _user$project$Main$subscriptions = function (model) {
diff --git a/js/non-elm.js b/js/non-elm.js
index 1b091b1..2b91481 100644
--- a/js/non-elm.js
+++ b/js/non-elm.js
@@ -40,19 +40,6 @@ elm.ports.elmDomReady.subscribe(function() {
updateCodeMirrorSize();
}, 0)
- var copyButton = document.getElementById('copy-button')
- var zc = new ZeroClipboard(copyButton);
- zc.on( 'ready', function(event) {
- zc.on( 'copy', function(event) {
- event.clipboardData.setData('text/plain', globalCurrElmCode);
- console.log('set zc', globalCurrElmCode);
- } );
- });
-
- zc.on( 'error', function(event) {
- // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
- ZeroClipboard.destroy();
- } );
});
@@ -60,3 +47,18 @@ elm.ports.currentSnippet.subscribe(function(currentSnippet) {
console.log('curr snippet', currentSnippet);
codeMirror.getDoc().setValue(currentSnippet);
});
+
+
+elm.ports.copyCode.subscribe(function(){
+ var el = document.createElement('textarea');
+ el.value = globalCurrElmCode;
+ el.setAttribute('readonly', '');
+ el.style.position = 'absolute';
+ el.style.left = '-9999px';
+ document.body.appendChild(el);
+ el.select();
+ document.execCommand('copy');
+ document.body.removeChild(el);
+
+ // copy from https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
+});
diff --git a/website/index.html b/website/index.html
index a48ef22..99bfc26 100644
--- a/website/index.html
+++ b/website/index.html
@@ -20,10 +20,10 @@
-
+
-
+