mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-03 21:08:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix broken BigInt64Array unsupported message on old Safari

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

81
frontend/src/App.vue
View file

@ -1,20 +1,5 @@
<template>
<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>
<style lang="scss">
@ -223,53 +208,6 @@ img {
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>
<script lang="ts">
@ -288,8 +226,6 @@ import { createPortfolioState, PortfolioState } from "@/state-providers/portfoli
import { createWorkspaceState, WorkspaceState } from "@/state-providers/workspace";
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";
const managerDestructors: {
@ -335,17 +271,6 @@ export default defineComponent({
workspace: createWorkspaceState(editor),
};
},
computed: {
apiUnsupported() {
return !("BigInt64Array" in window);
},
},
methods: {
closeUnsupportedWarning() {
const element = this.$refs.unsupported as HTMLElement;
element.parentElement?.removeChild(element);
},
},
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.)
Object.assign(managerDestructors, {
@ -367,10 +292,6 @@ export default defineComponent({
// Destroy the WASM editor instance
this.editor.instance.free();
},
components: {
MainWindow,
LayoutRow,
LayoutCol,
},
components: { MainWindow },
});
</script>

19
frontend/src/main.ts
View file

@ -4,11 +4,30 @@
import "reflect-metadata";
import { createApp } from "vue";
import { stripIndents } from "@/utility-functions/strip-indents";
import { initWasm } from "@/wasm-communication/editor";
import App from "@/App.vue";
(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
await initWasm();