Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a good way to insert random HTML/JS snippets in elm?

Tags:

elm

I'd like to embed the following snippet in an elm app I'm writing:

<script src="https://gist.github.com/jpaugh/2988462.js"></script>

I've tried using the [markdown|..|] quasi-quoter,

header = plainText "blah, blah."
gist = [markdown|
<script src='https://gist.github.com/jpaugh/2988462.js'></script>
|]

main = flow down [header, gist]

And that throws an error that clearly represents a bug in Elm, and puts all of my content inside a <noscript>.

<noscript>
  <p>blah, blah</p>
  <p><script src='https://gist.github.com/jpaugh/2988462.js'></script>
    </p>
</noscript>

But is there another way to do this? Using Markdown syntax to insert html snippets seems precarious to me. Is this covered by one of the library functions? And how should I insulate it from Elm's own javascript? (Using an <iframe> doesn't seem to help.)

Edit: Here's the error message. This is what shows up onscreen, not the code.

error msg

like image 287
jpaugh Avatar asked May 04 '13 03:05

jpaugh


2 Answers

It may be best to take it the other way around: don't use JS/CSS to mess up elm's "domain" and rather embed elm in normal HTML: you can do what you want outside of the elm box and still run your JS outside:

http://elm-lang.org/blog/announce/version-0.8.elm#embedding-elm-in-html-and-js

But I think you can achieve the contents from that snippet already in Elm without using any javascript, I'm not sure what is the thing you are trying to achieve in the end.

like image 101
Emmanuel Touzery Avatar answered Oct 17 '22 03:10

Emmanuel Touzery


Update: No longer possible


I did this, because I am evil.

script' : List Attribute -> String -> Html
script' attrs s = node "script" attrs [ text s ]

based on Html and Html.Attributes respectively. Example usage:

div [] [ script' [] "alert(tremble in fear elm);" ]

as such

script : List Attribute -> List Html -> Html
script attrs children = node "script" attrs children

scriptSrc : String -> Html
scriptSrc s = script [ type' "text/javascript", src s ] []

scriptRun : String -> Html
scriptRun s = script [ type' "text/javascript" ] [ text s ]
like image 3
Fresheyeball Avatar answered Oct 17 '22 02:10

Fresheyeball