Dynamically loading panes

[josephguillaume]

Responding to the README:

And so we hope we will end up with panes dynamically laoded according to user configuration preferences.

I thought I'd describe what I currently do and what I'm still missing.

A pane needs to be defined and registered using JS, so I have a index.html file that provides a custom pane sitting in my pod. When I navigate to it within solidos, it gets rendered in an IFrame. Within that file, I call

parent.panes.register(p)

Or so that it becomes the default pane for that session:

parent.panes.list.unshift(p)                                                       
parent.panes["myPaneName"]=p

1) The latter is a workaround because register always adds panes in order of decreasing preference, so a user-defined pane will never be default 2) I currently have to specifically navigate to index.html within solidos. Pasting the URL straight into the location bar doesn't load solidos, and navigating to the folder loads solidos but not index.html. https://github.com/SolidOS/solidos/issues/196 would change the latter, i.e. the pane registration code would run automatically when navigating to the folder 3) In some use cases, I don't need the pane to be always available - it would be ok for it to be registered only when navigating to a folder. For other use cases, it would be useful if the pane was automatically loaded from my preferences file (perhaps lazily the first time the relevant class is encountered). Presumably this would be just JS rather than an index.html, though maybe it could be an entire custom component. 4) I do see there are security issues with executing arbitrary JS that has access to the entire parent solidos environment. I only have html files I have written in my pod at this time.

Despite the limitations above I find it very useful to be able to change a custom pane on the fly rather than having to recompile and without adding it to the mashlib bundle.

[bourgeoa]

@josephguillaume can you give the index.html link or content?

[josephguillaume]

Here's an example: https://josephguillaume.solidcommunity.net/public/index.html It creates a pane with a link to open the resource in an external window with Penny.

I have other examples that have hard-coded paths/vocabs and would need work before being able to shared.

I've been using an older mashlib on my own pod. As it turns out, the latest behaviour on solidcommunity.net is a bit different. Opening the link directly to both the path and folder just return the html (not solidos), and the registration therefore doesn't work in that context. It looks like dokieli is already the default handler for a folder with an index.html too. The pane does get registered as intended when navigating within solidos to the folder or index.html page.

Here's an entry point into solidos to be able to see the behaviour https://josephguillaume.solidcommunity.net/public/index.ttl

<div id="test"></div>
<script>
  if (!parent.panes.byName("openWithPenny")) {
    parent.panes.register({
      name: "openWithPenny",
      label: function(subject) {
        return "Penny";
      },
      render: function(subject, context) {
        const myDocument = context.dom;
        const div = myDocument.createElement("div");
        let url = `https://penny.vincenttunru.com/explore/?url=${encodeURIComponent(
          subject.value
        )}`;
        div.innerHTML = `
    <a href='${url}' target=_blank>Open with Penny</a>
    `;
        window.open(url);
        return div;
      }
    });
  }
  document.getElementById("test").innerHTML = "loaded";
</script>

[josephguillaume]

Just noticed https://github.com/SolidOS/solid-panes/issues/103 Allow panes to be added dynamically