persistent iframe

embed an urbit app and retain your location in that other app.

this means you can open a Tlon DM in hawk then navigate away from that hawk page.

when you go back to that hawk page, the Tlon app will still be looking at that DM.

paste this code into a hawk file

mime: /text/hawk-500

::  persistent iframe.
::    [protocol: hawk-500]
::
::
::  displays an iframe and stores its internal url
::  so that it may be restored if a user
::  navigates away from the page.
::
::  ex: an iframe displaying the Tlon Messenger app.
::      if you navigate to your DMs,
::      then close the tab,
::      the re-open a new tab back to this hawk file,
::      it will show your DMs instead of the start
::        page for Tlong Messenger.
::
::  it displays a button at the top of the page
::  for returning to the iframe's default url.
::
::
::
=/  default-url  "/apps/groups"
::
::
::
;div.wf.hf.fc
  ;div.p1.frw.ac.jb
    ;div.mono: {default-url}
    ;button.p-1.b1.br1.bd1.hover.mono
      =onclick  "$('iframe.persistent').get(0).contentWindow.location.href = '{default-url}';"
      ; home
    ==
  ==
  ;iframe.persistent.bd0.grow(src default-url);
  ;script
    ;-  %-  trip
    '''
    // anonymous function which gets called immediately.
    // this allows variable namespacing for htmx loads.
    //
    (() => {
      let iframe = $('iframe.persistent').get(0);
      //
      //  if there was a previously saved location,
      //  restore it
      //
      let key = 'pframe' + window.location.pathname;
      let dbName = "hawk";
      let storeName = "pframe";
      let request = indexedDB.open(dbName, 1);
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(storeName)) {
          db.createObjectStore(storeName);
        }
      };
      request.onsuccess = async (e) => {
        const db = event.target.result;
        function storeData(key, value) {
          const transaction = db.transaction(storeName, "readwrite");
          const store = transaction.objectStore(storeName);
          store.put(value, key);
        }
        function getData(key) {
          return new Promise((resolve, reject) => {
            const transaction = db.transaction(storeName, "readonly");
            const store = transaction.objectStore(storeName);
            const request = store.get(key);
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject("Error retrieving data");
          });
        }
        let storedUrl = await getData(key)
        if (storedUrl) {
          iframe.src = storedUrl;
        }
        //
        //  every 2 seconds, save the iframe's location
        //
        if (!window[key]) {
          window[key] = setInterval(
            () => {
              let isCurrent = (key.slice(6) === window.location.pathname);
              let iframe = $('iframe.persistent').get(0);
              if (isCurrent && iframe) {
                let obj = new URL(iframe.contentWindow.location.href);
                let url = obj.pathname + obj.search + obj.hash;
                storeData(key, url)
              } else {
                // remove the timer if page changed
                clearInterval(window[key]);
                window[key] = null;
              }
            }, 1500
          )
        }
      };
    })()
    '''
  ==
==