Use optional url parameter for playground

[andreasplesch]

https://create3000.github.io/x_ite/playground/?uri=https://myserver/myX3d.x3d

would then load the x3d from the link into the editor. This could be useful for sharing simple x3d files.

It may be not too much work to do. I may be able to give it a try.

[andreasplesch]

Something like this in playground.html

const url = new URL (document .location .href) .searchParams .get ("url");
if (url .toLowerCase() .endsWith (".x3d")) {
        editor .setValue ("Starting to fetch " + url);
        fetch (url)
        .then ( (r) => r .ok ? r .text () : "<!--Response was not ok trying to fetch url.-->\n" + box)
        .then ( (t) => editor .setValue (t))
        .catch ( () => editor .setValue ("failed loading"));
}
else {editor . setValue (box .replace(/ {3}/g, "  "));}

seems to work well enough.

[create3000]

I have modified playground.html according to your lines of code and it seems to work fine.

Example: https://create3000.github.io/x_ite/playground/?url=https://create3000.github.io/media/examples/Geometry2D/Disk2D/Disk2D.x3d

[andreasplesch]

Thanks. Works great:

https://create3000.github.io/x_ite/playground/?url=https://gist.githubusercontent.com/andreasplesch/dc3595c5cf5198bedd7dbdb119a7a059/raw/4c9aed0dd47191873fc4e87870125eecc75c1ab1/jscad.x3d

[andreasplesch]

This works as well:

https://create3000.github.io/x_ite/playground/?url=https://corsproxy.io/?https://www.web3d.org/x3d/content/examples/ConformanceNist/Geometry/IndexedLineSet/coordIndex_colorCanonical.xml

and absolute urls: https://create3000.github.io/x_ite/playground/?url=https://raw.githubusercontent.com/andreasplesch/Library/apstuff/claraio/buildings/crytek-sponza-huge/crytek-sponza-huge-vray-urls.x3d

[andreasplesch]

Thanks again. It turns out that there was a problem with data urls .

I finally discovered that the searchParams property does not work with data urls. It destroys some characters, probably trying to find multiple parameters.

Here is a simple regex match instead which worked well:

const url = new URL(document.location.href).search.match(/^\?url=(.*)/);

if (url) {
    try {
        const response = await fetch(url[1]) //first capture group
          , text = response.ok ? await response.text() : "Response was not ok trying to fetch url: " + url[1];

        editor.setValue(text);
    } catch (error) {
        editor.setValue(error.message);
    }
} else {
    editor.setValue(box.replace(/ {3}/g, "  "));
}

[create3000]

Yes, parts of search param must be encoded with encodeURIComponent (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent), and thus later be decoded with decodeURIComponent.

[create3000]

This means, I would rather do:

const url = decodeURIComponent (new URL (document .location .href) .searchParams .get ("url"));
...

[andreasplesch]

I tried that, it did not work, unfortunately.

Wait,

const url = decodeURIComponent (new URL (encodeURIComponent(document .location .href)) .searchParams .get ("url"));

might work.

No, new URL() does not accept it.

[andreasplesch]

const url = new URL(document.location.href);

if (url.searchParams.get("url")) {

  const dummyURL = new URL( 'http://dummy/' + encodeURIComponent (url.search.slice ( 5 ) )); //?url= exists but may not be first
  const realUrl = decodeURIComponent ( dummyURL.pathname.slice ( 1 ));
...

seems to work but it may be messier than the regex?

Actually I think this is pretty much the same as simply

if (url.searchParams.get("url")) {

    const realUrl = url.search.slice ( 5 );
    ....

That would be the simplest.

It does not work for multiple search params (/?date=Jan4_1999,?url=htt) but failure for this is acceptable.

This does work like the regex and gets rid of the obscure array[1] use.

[create3000]

If I encode data:model/x3d+xml,<Shape><Text string='"Hello: ?&amp;"'/></Shape> and then create the link https://create3000.github.io/x_ite/playground/?url=data%3Amodel%2Fx3d%2Bxml%2C%3CShape%3E%3CText%20string%3D%27%22Hello%3A%20%3F%26amp;%22%27%2F%3E%3C%2FShape%3E, which will work.

[andreasplesch]

ok, percentencoded dataurls, will work, and are probably ok to expect.

(This is almost black)

[create3000]

Files loaded with url parameter, do now support relative URL's inside, even if they are edited later. :)

[andreasplesch]

Very nice !