From fb1876db725b1d96d3fb58d2a597a12e36ca7b39 Mon Sep 17 00:00:00 2001 From: alyx Date: Sun, 6 Feb 2022 16:09:29 +0000 Subject: permalinking is fully operational --- grapher/pl/index.html | 20 +++++++++++++++++ grapher/pl/script.js | 40 ++++++++++++++++++++++++++++++++++ grapher/pl/style.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 grapher/pl/index.html create mode 100644 grapher/pl/script.js create mode 100644 grapher/pl/style.css (limited to 'grapher/pl') 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 @@ + + + + + + Permalinked Graph + + + + + + + + + + + + + + \ 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 -- cgit v1.2.3-54-g00ecf