Open YievCkim opened 3 years ago
index.html
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="node_modules/@github/image-crop-element/dist/index.esm.js">
</script>
<link
href="node_modules/@github/image-crop-element/index.css"
rel="stylesheet">
<style>
.wrapper {
width: 500px;
margin: 30px auto;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<script src="elm.js"></script>
<script>
var app = Elm.CustomElements.init({
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
Asset.elm
module Asset exposing (Image, src, waterfall)
import Html exposing (Attribute)
import Html.Attributes as Attr
type Image
= Image String
-- IMAGES
waterfall : Image
waterfall =
image "waterfall.jpg"
image : String -> Image
image filename =
Image ("/assets/images/" ++ filename)
-- USING IMAGES
src : Image -> Attribute msg
src (Image url) =
Attr.src url
CustomElements.elm
module CustomElements exposing (CropData)
import Asset
import Browser
import Html exposing (Attribute, Html, div, h2, strong, text)
import Html.Attributes exposing (class, src)
import Html.Events exposing (on)
import Json.Decode as Decode exposing (Decoder, int)
import Json.Decode.Pipeline exposing (requiredAt)
type alias CropData =
{ x : Int
, y : Int
, width : Int
, height : Int
}
imageCrop : List (Attribute a) -> List (Html a) -> Html a
imageCrop =
Html.node "image-crop"
type Msg
= NoOp
update : Msg -> CropData -> ( CropData, Cmd Msg )
update msg cropData =
case msg of
NoOp ->
( cropData, Cmd.none )
initialModel : CropData
initialModel =
{ x = 297
, y = 0
, width = 906
, height = 906
}
init : () -> ( CropData, Cmd Msg )
init flags =
( initialModel, Cmd.none )
view : CropData -> Html Msg
view cropData =
div [ class "center" ]
[ h2 [] [ text "Image Crop" ]
, imageCrop
[ Asset.src Asset.waterfall
, class "wrapper"
]
[]
]
main : Program () CropData Msg
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
The node_modules directory seems to be not accessible from elm-live HTTP interface. Using python HTTP from project's root works:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
I had to change some path in index.html too:
<script
type="module"
src="node_modules/@github/image-crop-element/dist/index.js">
</script>
<link
href="node_modules/@github/image-crop-element/dist/index.css"
rel="stylesheet">
I keep the report open, if you want to specify this details in the book.
Be careful that if you install the latest version of @github/image-crop-element (5.0.0 at the time of writing), the CSS file has been removed and embedded in the JS file. So you need to remove it from the HTML file
First I would like to thank you for this great book. I have finished the previous chapters and I am stuck on the last chapter: "Interacting with Web Components".
When I try the first example I get this error in my browser and no image on the screen:
Loading module from "http://localhost:8000/node_modules/@github/image-crop-element/dist/index.esm.js was blocked because of a disallowed MIME type ("text/html").
I don't understand why this error. I have checked several times my code and and it is the same as the one in the book.
My browser link me this topic with the error: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options