mirror of
https://github.com/dillonkearns/elm-pages-v3-beta.git
synced 2024-11-30 13:16:08 +03:00
Move hmr loading indicator code into hmr.js and out of Elm code.
This commit is contained in:
Dillon Kearns
parent
ebb78e541a
commit
a0622db69d
194
examples/docs/static/hmr.js
vendored
194
examples/docs/static/hmr.js
vendored
@ -23,6 +23,7 @@ function connect(refetchContentJson) {
|
||||
} else {
|
||||
elmJsFetch().then(thenApplyHmr);
|
||||
}
|
||||
showCompiling("");
|
||||
};
|
||||
}
|
||||
|
||||
@ -294,3 +295,196 @@ function hideError(velocity) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showCompiling(message) {
|
||||
hideError("fast");
|
||||
setTimeout(function () {
|
||||
showCompiling_(message);
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function showCompiling_(message) {
|
||||
var nodeContainer = document.getElementById("elm-live:elmCompilingContainer");
|
||||
|
||||
if (!nodeContainer) {
|
||||
nodeContainer = document.createElement("div");
|
||||
nodeContainer.id = "__elm-pages-loading";
|
||||
nodeContainer.class = "lds-default"
|
||||
nodeContainer.style = `
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 110px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: white;
|
||||
display: block;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 15px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
|
||||
`
|
||||
document.body.appendChild(nodeContainer);
|
||||
}
|
||||
|
||||
nodeContainer.innerHTML = `
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear 0s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 37px;
|
||||
left: 66px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.1s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 22px;
|
||||
left: 62px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.2s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 11px;
|
||||
left: 52px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.3s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 7px;
|
||||
left: 37px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.4s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 11px;
|
||||
left: 22px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.5s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 22px;
|
||||
left: 11px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.6s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 37px;
|
||||
left: 7px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.7s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 52px;
|
||||
left: 11px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.8s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 62px;
|
||||
left: 22px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -0.9s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 66px;
|
||||
left: 37px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -1s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 62px;
|
||||
left: 52px;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
animation: 1.2s linear -1.1s infinite normal none running lds-default;
|
||||
background: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 52px;
|
||||
left: 62px;
|
||||
"
|
||||
></div>
|
||||
`;
|
||||
setTimeout(function () {
|
||||
document.getElementById("__elm-pages-loading").style.opacity = 1;
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function hideCompiling(velocity) {
|
||||
const node = document.getElementById("elm-live:elmCompilingContainer");
|
||||
if (node) {
|
||||
if (velocity === "fast") {
|
||||
node.remove();
|
||||
} else {
|
||||
document.getElementById("__elm-pages-loading").style.opacity = 0;
|
||||
setTimeout(function () {
|
||||
node.remove();
|
||||
}, speed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,6 +188,16 @@ function wrapHtml(fromElm, contentJsonString) {
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="/style.css"></link>
|
||||
<style>
|
||||
@keyframes lds-default {
|
||||
0%, 20%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="preload" href="/elm-pages.js" as="script">
|
||||
<link rel="preload" href="/index.js" as="script">
|
||||
<link rel="preload" href="/elm.js" as="script">
|
||||
|
||||
@ -1,108 +0,0 @@
|
||||
module Pages.Internal.HotReloadLoadingIndicator exposing (..)
|
||||
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes exposing (..)
|
||||
|
||||
|
||||
circle : List (Html.Attribute msg) -> Html msg
|
||||
circle attrs =
|
||||
Html.div
|
||||
(style "animation" "lds-default 1.2s linear infinite"
|
||||
:: style "background" "#000"
|
||||
:: style "position" "absolute"
|
||||
:: style "width" "6px"
|
||||
:: style "height" "6px"
|
||||
:: style "border-radius" "50%"
|
||||
:: attrs
|
||||
)
|
||||
[]
|
||||
|
||||
|
||||
view : Bool -> Bool -> Html msg
|
||||
view isDebugMode display =
|
||||
Html.div
|
||||
[ id "__elm-pages-loading"
|
||||
, class "lds-default"
|
||||
, style "position" "fixed"
|
||||
, style "bottom" "10px"
|
||||
, style "right"
|
||||
(if isDebugMode then
|
||||
"110px"
|
||||
|
||||
else
|
||||
"10px"
|
||||
)
|
||||
, style "width" "80px"
|
||||
, style "height" "80px"
|
||||
, style "background-color" "white"
|
||||
, style "box-shadow" "0 8px 15px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.12)"
|
||||
, style "display"
|
||||
(case display of
|
||||
True ->
|
||||
"block"
|
||||
|
||||
False ->
|
||||
"none"
|
||||
)
|
||||
]
|
||||
[ circle
|
||||
[ style "animation-delay" "0s"
|
||||
, style "top" "37px"
|
||||
, style "left" "66px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.1s"
|
||||
, style "top" "22px"
|
||||
, style "left" "62px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.2s"
|
||||
, style "top" "11px"
|
||||
, style "left" "52px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.3s"
|
||||
, style "top" "7px"
|
||||
, style "left" "37px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.4s"
|
||||
, style "top" "11px"
|
||||
, style "left" "22px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.5s"
|
||||
, style "top" "22px"
|
||||
, style "left" "11px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.6s"
|
||||
, style "top" "37px"
|
||||
, style "left" "7px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.7s"
|
||||
, style "top" "52px"
|
||||
, style "left" "11px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.8s"
|
||||
, style "top" "62px"
|
||||
, style "left" "22px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-0.9s"
|
||||
, style "top" "66px"
|
||||
, style "left" "37px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-1s"
|
||||
, style "top" "62px"
|
||||
, style "left" "52px"
|
||||
]
|
||||
, circle
|
||||
[ style "animation-delay" "-1.1s"
|
||||
, style "top" "52px"
|
||||
, style "left" "62px"
|
||||
]
|
||||
]
|
||||
@ -13,7 +13,6 @@ import Json.Encode
|
||||
import NoMetadata exposing (NoMetadata(..))
|
||||
import Pages.ContentCache as ContentCache exposing (ContentCache)
|
||||
import Pages.Internal.ApplicationType as ApplicationType
|
||||
import Pages.Internal.HotReloadLoadingIndicator as HotReloadLoadingIndicator
|
||||
import Pages.Internal.Platform.Cli
|
||||
import Pages.Internal.String as String
|
||||
import Pages.Manifest as Manifest
|
||||
@ -176,28 +175,10 @@ view urlToRoute pathKey viewFn model =
|
||||
, body =
|
||||
[ onViewChangeElement model.url
|
||||
, body |> Html.map UserMsg |> Html.map AppMsg
|
||||
, Html.Lazy.lazy2 loadingView model.phase model.hmrStatus
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
loadingView : Phase -> HmrStatus -> Html msg
|
||||
loadingView phase hmrStatus =
|
||||
case phase of
|
||||
DevClient isDebugMode ->
|
||||
(case hmrStatus of
|
||||
HmrLoading ->
|
||||
True
|
||||
|
||||
_ ->
|
||||
False
|
||||
)
|
||||
|> HotReloadLoadingIndicator.view isDebugMode
|
||||
|
||||
_ ->
|
||||
Html.text ""
|
||||
|
||||
|
||||
onViewChangeElement currentUrl =
|
||||
-- this is a hidden tag
|
||||
-- it is used from the JS-side to reliably
|
||||
|
||||
Loading…
Reference in New Issue
Block a user