Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

provide alternative spinner for ie11

Browse source
This commit is contained in:
Bruno Windels 2020-09-11 11:28:59 +02:00
parent 95c6fd5a5b
commit 0e3084cce3
5 changed files with 59 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/main.js
View file

@ -80,6 +80,12 @@ async function loadOlmWorker(paths) {
// see https://github.com/rollup/plugins/tree/master/packages/multi-entry // see https://github.com/rollup/plugins/tree/master/packages/multi-entry
export async function main(container, paths) { export async function main(container, paths) {
try { try {
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if (isIE11) {
document.body.className += " ie11";
} else {
document.body.className += " not-ie11";
}
// to replay: // to replay:
// const fetchLog = await (await fetch("/fetchlogs/constrainterror.json")).json(); // const fetchLog = await (await fetch("/fetchlogs/constrainterror.json")).json();
// const replay = new ReplayRequester(fetchLog, {delay: false}); // const replay = new ReplayRequester(fetchLog, {delay: false});

15
src/ui/web/common.js
View file

@ -15,9 +15,18 @@ limitations under the License.
*/ */
export function spinner(t, extraClasses = undefined) { export function spinner(t, extraClasses = undefined) {
return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"}, if (document.body.classList.contains("ie11")) {
t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"}) return t.div({className: "spinner"}, [
); t.div(),
t.div(),
t.div(),
t.div(),
]);
} else {
return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"},
t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
);
}
} }
/** /**

45
src/ui/web/css/spinner.css
View file

@ -32,24 +32,57 @@ limitations under the License.
} }
} }
.spinner circle { .not-ie11 .spinner circle {
transform-origin: 50% 50%; transform-origin: 50% 50%;
animation-name: spinner; animation-name: spinner;
animation-duration: 2s; animation-duration: 2s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
/**
* TODO
* see if with IE11 we can just set a static stroke state and make it rotate?
*/
stroke-dasharray: 0 0 85 85; stroke-dasharray: 0 0 85 85;
fill: none; fill: none;
stroke: currentcolor; stroke: currentcolor;
stroke-width: 12; stroke-width: 12;
stroke-linecap: butt; stroke-linecap: butt;
} }
.ie11 .spinner {
display: inline-block;
position: relative;
}
.ie11 .spinner div {
box-sizing: border-box;
display: block;
position: absolute;
padding: 2px;
border: 2px solid currentcolor;
border-radius: 50%;
animation: ie-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: currentcolor transparent transparent transparent;
width: var(--size);
height: var(--size);
}
.ie11 .spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.ie11 .spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.ie11 .spinner div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes ie-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner { .spinner {
--size: 20px; --size: 20px;
width: var(--size); width: var(--size);

2
src/ui/web/css/timeline.css
View file

@ -77,6 +77,6 @@ limitations under the License.
} }
.GapView > div { .GapView > div {
flex: 1; flex: 1 1 0;
margin-left: 10px; margin-left: 10px;
} }

2
src/ui/web/view-gallery.html
View file

@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/themes/element/theme.css"> <link rel="stylesheet" type="text/css" href="css/themes/element/theme.css">
</head> </head>
<body> <body class="not-ie11">
<script type="text/javascript"> <script type="text/javascript">
function vm(o) { function vm(o) {
// fake EventEmitter // fake EventEmitter