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/index.html | 24 ++++++++++++++++---- grapher/pl/index.html | 20 +++++++++++++++++ grapher/pl/script.js | 40 +++++++++++++++++++++++++++++++++ grapher/pl/style.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++ grapher/script.js | 25 +++++++++++++++++++++ grapher/style.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++ oi.css | 7 ++++++ open-iconic.eot | Bin 0 -> 28196 bytes open-iconic.otf | Bin 0 -> 20996 bytes open-iconic.ttf | Bin 0 -> 28028 bytes open-iconic.woff | Bin 0 -> 14984 bytes 11 files changed, 233 insertions(+), 4 deletions(-) create mode 100644 grapher/pl/index.html create mode 100644 grapher/pl/script.js create mode 100644 grapher/pl/style.css create mode 100644 oi.css create mode 100644 open-iconic.eot create mode 100644 open-iconic.otf create mode 100644 open-iconic.ttf create mode 100644 open-iconic.woff diff --git a/grapher/index.html b/grapher/index.html index 6cec1f0..51aea52 100644 --- a/grapher/index.html +++ b/grapher/index.html @@ -6,17 +6,19 @@ CV2 Node Graph Generator + + - + @@ -28,16 +30,30 @@ If you cannot enable it here, you can try using tyleo's figma templates - , although those also need javascript.4 + , although those also need javascript.
- +
+
+ +
+

Permalinking Menu

+
+

Set your name below and click the button to get a permanent link to this graph.

+ + +
+ +
+ +
+
?
@@ -81,6 +97,6 @@

- + \ No newline at end of file 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 diff --git a/grapher/script.js b/grapher/script.js index a9ec156..5a8d8ef 100644 --- a/grapher/script.js +++ b/grapher/script.js @@ -221,7 +221,11 @@ function serializeGraph() { } function deserializeGraph(graph) { + for(const chip of chips) { + chip.el.remove(); + } chips.length = 0; + connections.length = 0 for (const chip of graph.chips) { const newchip = newChip(chip.GUID); @@ -258,6 +262,9 @@ function deserializeGraph(graph) { }); } } +function loadGraphHandler({graph}) { + deserializeGraph(graph); +} var locked = false; @@ -265,6 +272,22 @@ function lockGraph() { locked = true; document.getElementById('searchbox').remove(); document.getElementById('helpbox') .remove(); + document.getElementById('plbox') .remove(); +} + +async function getPermalink() { + const linker = document.getElementById('linktarget'); + const linkerp = document.getElementById('linkprefix'); + const ab = document.getElementById('authorbox'); + + const ret = await fetch('https://graphpl.aleteoryx.me/save', { + method: 'POST', + body: JSON.stringify({...serializeGraph(), author: ab.value ? ab.value : undefined}) + }).then(m => m.text()) + console.log(ret); + linkerp.innerText = "Success! Permalinked at:" + linker.href = `https://cv2.aleteoryx.me/grapher/pl#${ret}` + linker.innerText = `https://cv2.aleteoryx.me/grapher/pl#${ret}` } window.onload = async function() { @@ -450,4 +473,6 @@ window.onload = async function() { requestAnimationFrame(updateanim); })() + + if(window.opener) opener.postMessage({type: 'grapherLoaded'}); } diff --git a/grapher/style.css b/grapher/style.css index 35fe3bb..7b9f51e 100644 --- a/grapher/style.css +++ b/grapher/style.css @@ -169,6 +169,43 @@ canvas { box-shadow: black 1mm 1mm 3mm } +#plbox > summary::marker { + content:''; +} +#plbox > summary { + height: 3rem; + width: 3rem; + background: #0000; + color: #fff7; + padding: 0; + position: absolute; + top: 0; + right: 0; + user-select: none; +} +#plbox[open] > summary { + color: #fff; +} + +#plbox { + position: fixed; + top: 2rem; + right: 2rem; + background: #0000; + border-radius: 0; + z-index: 100; +} + +#plbox > div { + background: var(--foreground); + border-radius: 0.5cm; + width: 10cm; + padding: 1rem; + position: relative; + top: 4rem; + box-shadow: black 1mm 1mm 3mm +} + hr { border: 0.5mm solid var(--foreforeground); @@ -185,3 +222,27 @@ kbd { border-radius: 1mm; box-shadow: inset black -0.25mm -0.25mm 1mm; } + +.icon { + font-family: "Icons"; + font-size: 2rem; + height: 2rem; + width: 2rem; +} + +button, input { + color: white; + background: var(--background); + padding: 0.5rem; + + border: none; + border-radius: 1rem; + font-size: 13pt; + margin: 0.5rem; +} + +button:hover { + background: var(--foreforeground); +} + +a {color: white;} \ No newline at end of file diff --git a/oi.css b/oi.css new file mode 100644 index 0000000..d9c6559 --- /dev/null +++ b/oi.css @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Icons'; + src: url('/open-iconic.eot'); + src: url('/open-iconic.eot') format('embedded-opentype'), url('open-iconic.woff') format('woff'), url('/open-iconic.ttf') format('truetype'), url('/open-iconic.otf') format('opentype'), url('/open-iconic.svg#iconic-sm') format('svg'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/open-iconic.eot b/open-iconic.eot new file mode 100644 index 0000000..f98177d Binary files /dev/null and b/open-iconic.eot differ diff --git a/open-iconic.otf b/open-iconic.otf new file mode 100644 index 0000000..f6bd684 Binary files /dev/null and b/open-iconic.otf differ diff --git a/open-iconic.ttf b/open-iconic.ttf new file mode 100644 index 0000000..fab6048 Binary files /dev/null and b/open-iconic.ttf differ diff --git a/open-iconic.woff b/open-iconic.woff new file mode 100644 index 0000000..f930998 Binary files /dev/null and b/open-iconic.woff differ -- cgit v1.2.3-70-g09d2