jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix broken BigInt64Array unsupported message on old Safari

This commit is contained in:
Keavon Chambers 2022-07-07 10:58:29 -07:00
parent b01f76f097
commit ad7097ea92
2 changed files with 20 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/App.vue
View File

@ -1,20 +1,5 @@
<template> <template>
<MainWindow /> <MainWindow />
<div class="unsupported-modal-backdrop" v-if="apiUnsupported" ref="unsupported">
<LayoutCol class="unsupported-modal">
<h2>This browser currently doesn't support Graphite</h2>
<p>Unfortunately, some features won't work properly. Please upgrade to a modern browser such as Firefox, Chrome, Edge, or Safari version 15 or later.</p>
<p>
This browser is missing support for the
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a> JavaScript
API which is required for using the editor. However, you can still explore the user interface.
</p>
<LayoutRow>
<button class="unsupported-modal-button" @click="() => closeUnsupportedWarning()">I understand, let's just see the interface</button>
</LayoutRow>
</LayoutCol>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -223,53 +208,6 @@ img {
margin-top: 8px; margin-top: 8px;
} }
} }
.unsupported-modal-backdrop {
background: rgba(255, 255, 255, 0.6);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
.unsupported-modal {
background: var(--color-3-darkgray);
border-radius: 4px;
box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
padding: 0 16px 16px 16px;
border: 1px solid var(--color-4-dimgray);
max-width: 500px;
p {
margin-top: 0;
}
a {
color: var(--color-accent-hover);
}
.unsupported-modal-button {
flex: 1;
background: var(--color-1-nearblack);
border: 0 none;
padding: 12px;
border-radius: 2px;
&:hover {
background: var(--color-6-lowergray);
color: var(--color-f-white);
}
&:active {
background: var(--color-accent-hover);
color: var(--color-f-white);
}
}
}
}
</style> </style>
<script lang="ts"> <script lang="ts">
@ -288,8 +226,6 @@ import { createPortfolioState, PortfolioState } from "@/state-providers/portfoli
import { createWorkspaceState, WorkspaceState } from "@/state-providers/workspace"; import { createWorkspaceState, WorkspaceState } from "@/state-providers/workspace";
import { createEditor, Editor } from "@/wasm-communication/editor"; import { createEditor, Editor } from "@/wasm-communication/editor";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import MainWindow from "@/components/window/MainWindow.vue"; import MainWindow from "@/components/window/MainWindow.vue";
const managerDestructors: { const managerDestructors: {
@ -335,17 +271,6 @@ export default defineComponent({
workspace: createWorkspaceState(editor), workspace: createWorkspaceState(editor),
}; };
}, },
computed: {
apiUnsupported() {
return !("BigInt64Array" in window);
},
},
methods: {
closeUnsupportedWarning() {
const element = this.$refs.unsupported as HTMLElement;
element.parentElement?.removeChild(element);
},
},
async mounted() { async mounted() {
// Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.) // Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.)
Object.assign(managerDestructors, { Object.assign(managerDestructors, {
@ -367,10 +292,6 @@ export default defineComponent({
// Destroy the WASM editor instance // Destroy the WASM editor instance
this.editor.instance.free(); this.editor.instance.free();
}, },
components: { components: { MainWindow },
MainWindow,
LayoutRow,
LayoutCol,
},
}); });
</script> </script>

19
frontend/src/main.ts
View File

@ -4,11 +4,30 @@
import "reflect-metadata"; import "reflect-metadata";
import { createApp } from "vue"; import { createApp } from "vue";
import { stripIndents } from "@/utility-functions/strip-indents";
import { initWasm } from "@/wasm-communication/editor"; import { initWasm } from "@/wasm-communication/editor";
import App from "@/App.vue"; import App from "@/App.vue";
(async (): Promise<void> => { (async (): Promise<void> => {
if (!("BigUint64Array" in window)) {
const body = document.body;
const message = stripIndents`
<style>
h2, p, a {
text-align: center;
color: white;
}
</style>
<h2>This browser is too old</h2>
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or later.</p>
<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
JavaScript API must be supported by the browser for Graphite to function.)</p>
`;
body.innerHTML = message + body.innerHTML;
return;
}
// Initialize the WASM module for the editor backend // Initialize the WASM module for the editor backend
await initWasm(); await initWasm();