diff options
| author | alyx <alyx@aleteoryx.me> | 2022-02-06 16:09:29 +0000 |
|---|---|---|
| committer | Aleteoryx <alyx@aleteoryx.me> | 2022-02-06 16:09:29 +0000 |
| commit | fb1876db725b1d96d3fb58d2a597a12e36ca7b39 (patch) | |
| tree | e3fe932f2ba848dbb6b3f2f13816aead257a4d6a /grapher/pl | |
| parent | 21bc06407c450a3ae5643d5462c452ec92b3d782 (diff) | |
| download | RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.tar.gz RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.tar.bz2 RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.zip | |
permalinking is fully operational
Diffstat (limited to 'grapher/pl')
| -rw-r--r-- | grapher/pl/index.html | 20 | ||||
| -rw-r--r-- | grapher/pl/script.js | 40 | ||||
| -rw-r--r-- | grapher/pl/style.css | 60 |
3 files changed, 120 insertions, 0 deletions
diff --git a/grapher/pl/index.html b/grapher/pl/index.html new file mode 100644 index 0000000..3dc7119 --- /dev/null +++ b/grapher/pl/index.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Permalinked Graph</title> + + <link crossorigin href="style.css" rel="stylesheet" type="text/css" /> + + <link crossorigin href="script.js" rel="preload" as="script"/> + <link crossorigin href="style.css" rel="preload" as="style"/> + + + <script crossorigin src="script.js"></script> + </head> + <body> + <div id="header"><span><b>By: <i><span id="author"></span></i></b></span><a href="../" id="linker">Open in Editor</a></div> + <iframe src="../" id="frame"></iframe> + </body> +</html>
\ No newline at end of file diff --git a/grapher/pl/script.js b/grapher/pl/script.js new file mode 100644 index 0000000..c47a636 --- /dev/null +++ b/grapher/pl/script.js @@ -0,0 +1,40 @@ +window.addEventListener('load', async e => { + const frame = document.getElementById('frame'); + const author = document.getElementById('author'); + const linker = document.getElementById('linker'); + + linker.target = window.location.hash.substr(1); + + const graph = await (await fetch(`https://graphpl.aleteoryx.me/load/${window.location.hash.substr(1)}`)).json() + if (frame.contentWindow.document.readyState != 'complete') + await new Promise((res, rej) => frame.contentWindow.addEventListener('load', e => {res();})); + + author.innerText = graph.author ? graph.author : [ + "a ghost", + "nobody", + "thine mother", + "god's mistake", + "the zodiac killer", + "tyleo, secretly", + "someone else", + "Danny Elfman", + "a rat in a cage", + "viewers like you" + ][Math.round(Math.random() * 10)]; + + frame.contentWindow.postMessage({type: 'lock'}); + frame.contentWindow.postMessage({type: 'loadGraph', graph: graph}); + + linker.addEventListener('click', e => { + let newwin = window.open('', window.location.hash.substr(1)); + window.onmessage = ({data}) => { + console.log(data.type); + if(data.type == 'grapherLoaded') { + newwin.postMessage({type: 'loadGraph', graph: graph}); + newwin.name = ''; + window.onmessage = null; + } + } + }) + +})
\ No newline at end of file diff --git a/grapher/pl/style.css b/grapher/pl/style.css new file mode 100644 index 0000000..7ac40df --- /dev/null +++ b/grapher/pl/style.css @@ -0,0 +1,60 @@ +@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); + +html { + --foreforeground: #3788ae; + --foreground: #082f41; + --background: #03141c; + color: white; + background: var(--background); + /*padding: 1cm;*/ + font-size: 12pt; + font-family: 'Raleway', sans-serif; + height: 100%; +} + +body { + margin: 0; + height: 100vw; + overflow: hidden; +} + +#frame { + margin:0; + padding:0; + width: 100vw; + height: calc(100vw - 3cm); + position: relative; + border:none; +} + +#header { + margin:0; + width: 100vw; + height: 3cm; + background: var(--background); + position: relative; +} +#header > span { + font-size: 2cm; + position: absolute; + top: calc(50% - 1.35cm); + bottom: calc(50% - 1.35cm); + left: 0.5cm; +} +#header > span #author { + color: var(--foreforeground); +} +#header > a { + position: absolute; + background: var(--foreground); + font-size: 1cm; + padding: 1rem; + padding-bottom: 0; + color: white; + text-decoration: none; + border-radius: 1rem; + height: 1.5cm; + top: 0.5cm; + bottom: 0.75cm; + right: 0.75cm; +}
\ No newline at end of file |