mystiq/hydrogen-web
Archived
4
1
Fork 1
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
export async function main(container, paths) {
try {
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if (isIE11) {
document.body.className += " ie11";
} else {
document.body.className += " not-ie11";
}
// to replay:
// const fetchLog = await (await fetch("/fetchlogs/constrainterror.json")).json();
// 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) {
return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"},
t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
);
if (document.body.classList.contains("ie11")) {
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%;
animation-name: spinner;
animation-duration: 2s;
animation-iteration-count: infinite;
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;
fill: none;
stroke: currentcolor;
stroke-width: 12;
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 {
--size: 20px;
width: var(--size);

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

@ -77,6 +77,6 @@ limitations under the License.
}
.GapView > div {
flex: 1;
flex: 1 1 0;
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/themes/element/theme.css">
</head>
<body>
<body class="not-ie11">
<script type="text/javascript">
function vm(o) {
// fake EventEmitter