Created
October 17, 2018 16:50
-
-
Save PixelPartner/dfcd10b8766c9d5d1e441b63811d5581 to your computer and use it in GitHub Desktop.
Define your own elm-ui Element that works with Safari AR Quicklook feature on iOS 12+
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{- | |
Define your own elm-ui Element that works with Safari AR Quicklook feature on iOS 12+ | |
The problem with the standard Element nodes is that Safari wants the <a> node to only have | |
a single child and that needs to be an <img> | |
-} | |
usdz : List (Attribute Msg) -> { usdzUrl : String, imgUrl : String } -> Element Msg | |
usdz attrs rec = | |
link | |
( htmlAttribute (Html.Attributes.attribute "rel" "ar") | |
:: attrs | |
) | |
{ label= html | |
(Html.node "img" | |
[ Html.Attributes.src rec.imgUrl | |
, Html.Attributes.style "max-width" "100%" | |
, Html.Attributes.style "max-height" "100%" | |
] | |
[] -- no other content allowed here by Apple | |
) | |
, url=rec.usdzUrl | |
} | |
-- usage: | |
usdz [ width (px 240), centerX ] | |
{ usdzUrl="models/model1.usdz" | |
, imgUrl="img/model1_preview.png" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also make sure, your web server serves .usdz files with the proper MIME type not included in most off-the-shelf Apache installs.
Look up the details on http://dev.apple.com