From accfa598b3cbc54fdfb33cb568055ed6994a4966 Mon Sep 17 00:00:00 2001 From: Chayim Refael Friedman Date: Tue, 10 Aug 2021 03:41:00 +0300 Subject: [PATCH] Allow people to share links to the playground (#1046) * Allow people to share links to the playground We do that by encoding the code (compressed) in the URL. The compression is the same used in the TypeScript playground: https://github.com/microsoft/TypeScript-Website/blob/e9d8f66f6b8be2dda06737d3686dcb795749dff2/packages/sandbox/src/compilerOptions.ts#L119-L120 --- doc/site/static/lzstring.min.js | 89 +++++++++++++++++++++++++++++++++ doc/site/static/style.css | 33 ++++++++++++ doc/site/static/wren.js | 23 +++++++++ doc/site/try/index.markdown | 3 ++ doc/site/try/template.html | 1 + 5 files changed, 149 insertions(+) create mode 100644 doc/site/static/lzstring.min.js diff --git a/doc/site/static/lzstring.min.js b/doc/site/static/lzstring.min.js new file mode 100644 index 00000000..641ac9c4 --- /dev/null +++ b/doc/site/static/lzstring.min.js @@ -0,0 +1,89 @@ +// Minified from https://github.com/microsoft/TypeScript-Website/blob/e9d8f66f6b8be2dda06737d3686dcb795749dff2/packages/sandbox/src/vendor/lzstring.min.js + +// Original license reproduced below: + +// DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE +// Version 2, December 2004 +// +// Copyright (C) 2004 Sam Hocevar +// +// Everyone is permitted to copy and distribute verbatim or modified +// copies of this license document, and changing it is allowed as long +// as the name is changed. +// +// DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE +// TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION +// +// 0. You just DO WHAT THE FUCK YOU WANT TO. +// + +var LZString=(function(){function o(o,r){if(!t[o]){t[o]={} +for(var n=0;ne;e++){var s=r.charCodeAt(e);(n[2*e]=s>>>8),(n[2*e+1]=s%256)} +return n},decompressFromUint8Array:function(o){if(null===o||void 0===o)return i.decompress(o) +for(var n=new Array(o.length / 2),e=0,t=n.length;t>e;e++)n[e]=256*o[2*e]+o[2*e+1] +var s=[] +return(n.forEach(function(o){s.push(r(o))}),i.decompress(s.join('')))},compressToEncodedURIComponent:function(o){return null==o?'':i._compress(o,6,function(o){return e.charAt(o)})},decompressFromEncodedURIComponent:function(r){return null==r?'':''==r?null:((r=r.replace(/ /g,'+')),i._decompress(r.length,32,function(n){return o(e,r.charAt(n))}))},compress:function(o){return i._compress(o,16,function(o){return r(o)})},_compress:function(o,r,n){if(null==o)return'' +var e,t,i,s={},p={},u='',c='',a='',l=2,f=3,h=2,d=[],m=0,v=0 +for(i=0;ie;e++)(m<<=1),v==r-1?((v=0),d.push(n(m)),(m=0)):v++ +for(t=a.charCodeAt(0),e=0;8>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1)}else{for(t=1,e=0;h>e;e++) +(m=(m<<1)|t),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t=0) +for(t=a.charCodeAt(0),e=0;16>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1)} +l--,0==l&&((l=Math.pow(2,h)),h++),delete p[a]}else +for(t=s[a],e=0;h>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1) +l--,0==l&&((l=Math.pow(2,h)),h++),(s[c]=f++),(a=String(u))} +if(''!==a){if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)(m<<=1),v==r-1?((v=0),d.push(n(m)),(m=0)):v++ +for(t=a.charCodeAt(0),e=0;8>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1)}else{for(t=1,e=0;h>e;e++) +(m=(m<<1)|t),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t=0) +for(t=a.charCodeAt(0),e=0;16>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1)} +l--,0==l&&((l=Math.pow(2,h)),h++),delete p[a]}else +for(t=s[a],e=0;h>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1) +l--,0==l&&((l=Math.pow(2,h)),h++)} +for(t=2,e=0;h>e;e++) +(m=(m<<1)|(1&t)),v==r-1?((v=0),d.push(n(m)),(m=0)):v++,(t>>=1) +for(;;){if(((m<<=1),v==r-1)){d.push(n(m)) +break} +v++} +return d.join('')},decompress:function(o){return null==o?'':''==o?null:i._decompress(o.length,32768,function(r){return o.charCodeAt(r)})},_decompress:function(o,n,e){var t,i,s,p,u,c,a,l,f=[],h=4,d=4,m=3,v='',w=[],A={val:e(0),position:n,index:1} +for(i=0;3>i;i+=1)f[i]=i +for(p=0,c=Math.pow(2,2),a=1;a!=c;) +(u=A.val&A.position),(A.position>>=1),0==A.position&&((A.position=n),(A.val=e(A.index++))),(p|=(u>0?1:0)*a),(a<<=1) +switch((t=p)){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;) +(u=A.val&A.position),(A.position>>=1),0==A.position&&((A.position=n),(A.val=e(A.index++))),(p|=(u>0?1:0)*a),(a<<=1) +l=r(p) +break +case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;) +(u=A.val&A.position),(A.position>>=1),0==A.position&&((A.position=n),(A.val=e(A.index++))),(p|=(u>0?1:0)*a),(a<<=1) +l=r(p) +break +case 2:return''} +for(f[3]=l,s=l,w.push(l);;){if(A.index>o)return'' +for(p=0,c=Math.pow(2,m),a=1;a!=c;) +(u=A.val&A.position),(A.position>>=1),0==A.position&&((A.position=n),(A.val=e(A.index++))),(p|=(u>0?1:0)*a),(a<<=1) +switch((l=p)){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;) +(u=A.val&A.position),(A.position>>=1),0==A.position&&((A.position=n),(A.val=e(A.index++))),(p|=(u>0?1:0)*a),(a<<=1);(f[d++]=r(p)),(l=d-1),h-- +break +case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;) +(u=A.val&A.position),(A.position>>=1),0==A.position&&((A.position=n),(A.val=e(A.index++))),(p|=(u>0?1:0)*a),(a<<=1);(f[d++]=r(p)),(l=d-1),h-- +break +case 2:return w.join('')} +if((0==h&&((h=Math.pow(2,m)),m++),f[l]))v=f[l] +else{if(l!==d)return null +v=s+s.charAt(0)} +w.push(v),(f[d++]=s+v.charAt(0)),h--,(s=v),0==h&&((h=Math.pow(2,m)),m++)}},} +return i})();'function'==typeof define&&define.amd?define(function(){return LZString}):'undefined'!=typeof module&&null!=module&&(module.exports=LZString) \ No newline at end of file diff --git a/doc/site/static/style.css b/doc/site/static/style.css index c2b5798b..4cb2adc9 100644 --- a/doc/site/static/style.css +++ b/doc/site/static/style.css @@ -502,6 +502,39 @@ table.precedence td { border-bottom: solid 1px var(--gray-10); } +/* +Sourced from https://github.com/microsoft/TypeScript-Website/blob/e9d8f66f6b8be2dda06737d3686dcb795749dff2/packages/typescriptlang-org/src/templates/play.scss#L916-L943. +Licensed under the MIT license https://github.com/microsoft/TypeScript-Website/blob/e9d8f66f6b8be2dda06737d3686dcb795749dff2/LICENSE-CODE. +*/ +#copied-popup { + top: 0; + left: 0; + right: 0; + bottom: 0; + position: fixed; + z-index: 100; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; +} + +#copied-popup p { + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 20px; + font-size: 1.5rem; + + border-radius: 1em; + padding: 0.5em 1.5em; + opacity: 0; + + transition: opacity 0.1s ease-in-out; + + /* Help Safari with blurred text */ + transform: translateZ(0); +} + @media only screen and (max-width: 839px) { /* 36 pixel columns.*/ .page { width: 720px; } diff --git a/doc/site/static/wren.js b/doc/site/static/wren.js index 33118333..0d9f40d4 100644 --- a/doc/site/static/wren.js +++ b/doc/site/static/wren.js @@ -22,9 +22,11 @@ window.onload = function() { Module.printErr = function(text) { output.innerText += text + "\n"; } var run = document.querySelector("#try-run") + var share = document.querySelector("#share") var hello = document.querySelector("#try-hello") var fractal = document.querySelector("#try-fractal") var loop = document.querySelector("#try-loop") + var copiedPopup = document.querySelector("#copied-popup p") var compile = Module.cwrap('wren_compile', 'number', ['string']) var set_input = (content) => { @@ -34,6 +36,21 @@ window.onload = function() { jar.updateCode(content); } + share.onclick = (e) => { + var code = jar.toString() + var compressed = LZString.compressToEncodedURIComponent(code) + var url = location.protocol + "//" + location.host + location.pathname + "?code=" + compressed + navigator.clipboard.writeText(url).then( + () => { + copiedPopup.style.opacity = "1" + setTimeout(() => { + copiedPopup.style.opacity = "" + }, 1000) + }, + (e) => console.error(e) + ) + } + run.onclick = (e) => { console.log("run") output.setAttribute('ready', ''); @@ -75,5 +92,11 @@ window.onload = function() { }`); } //fractal + var initial_code = new URLSearchParams(location.search).get("code") + if (initial_code !== null) { + initial_code = LZString.decompressFromEncodedURIComponent(initial_code) + set_input(initial_code) + } + } //if try_code } diff --git a/doc/site/try/index.markdown b/doc/site/try/index.markdown index 785d6e1e..43e4bfc4 100644 --- a/doc/site/try/index.markdown +++ b/doc/site/try/index.markdown @@ -14,6 +14,7 @@ examples:  

enter code below

+ share• run
@@ -25,3 +26,5 @@ examples:   
...
+ +

URL copied to clipboard

diff --git a/doc/site/try/template.html b/doc/site/try/template.html index 7df57044..3a09ec84 100644 --- a/doc/site/try/template.html +++ b/doc/site/try/template.html @@ -6,6 +6,7 @@ +