Giter VIP home page Giter VIP logo

Comments (13)

andreasplesch avatar andreasplesch commented on July 3, 2024

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.

from x_ite.

create3000 avatar create3000 commented on July 3, 2024

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

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024

Thanks. Works great:

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

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024

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

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024

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, "  "));
}

from x_ite.

create3000 avatar create3000 commented on July 3, 2024

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.

from x_ite.

create3000 avatar create3000 commented on July 3, 2024

This means, I would rather do:

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

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024

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.

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024
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.

from x_ite.

create3000 avatar create3000 commented on July 3, 2024

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.

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024

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

(This is almost black)

from x_ite.

create3000 avatar create3000 commented on July 3, 2024

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

from x_ite.

andreasplesch avatar andreasplesch commented on July 3, 2024

Very nice !

from x_ite.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.