solid-panes 4.4.2-2 → 4.4.2-3

package/dist/outline/viewAsImage.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var UI = _interopRequireWildcard(require("solid-ui"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-var _default = dom => function viewAsImage(obj) {
-  const img = UI.utils.AJARImage(obj.uri, UI.utils.label(obj), UI.utils.label(obj), dom);
-  img.setAttribute('class', 'outlineImage');
-  return img;
-};
-exports.default = _default;

package/dist/outline/viewAsMbox.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = dom => function viewAsMbox(obj) {
-  const anchor = dom.createElement('a');
-  // previous implementation assumed email address was Literal. fixed.
-
-  // FOAF mboxs must NOT be literals -- must be mailto: URIs.
-
-  let address = obj.termType === 'NamedNode' ? obj.uri : obj.value; // this way for now
-  // if (!address) return viewAsBoringDefault(obj)
-  const index = address.indexOf('mailto:');
-  address = index >= 0 ? address.slice(index + 7) : address;
-  anchor.setAttribute('href', 'mailto:' + address);
-  anchor.appendChild(dom.createTextNode(address));
-  return anchor;
-};
-exports.default = _default;

package/dist/pad/padPane.css

@@ -1,40 +0,0 @@
-.pad-layout {
-  background-color: white;
-  min-width: 94%;
-  margin-right: 3%;
-  margin-left: 3%;
-  min-height: 13rem;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-
-.pad-row {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-}
-
-.pad-main {
-  flex: 1 1 100%;
-  width: 100%;
-}
-
-.pad-controls {
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.pad-cell {
-  flex: 1 1 auto;
-}
-
-.pad-new-instance-message {
-  font-size: 140%;
-}
-
-@media (max-width: 600px) {
-  .pad-controls .pad-cell {
-    flex: 1 1 100%;
-  }
-}

package/dist/pad/padPane.js

@@ -1,421 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _solidUi = require("solid-ui");
-var _solidLogic = require("solid-logic");
-var _rdflib = require("rdflib");
-require("./padPane.css");
-/*   pad Pane
- **
- */
-
-const paneDef = {
-  // icon:  (module.__dirname || __dirname) + 'images/ColourOn.png',
-  icon: _solidUi.icons.iconBase + 'noun_79217.svg',
-  name: 'pad',
-  audience: [_solidUi.ns.solid('PowerUser')],
-  // Does the subject deserve an pad pane?
-  label: function (subject, context) {
-    // @ts-ignore
-    const t = context.session.store.findTypeURIs(subject);
-    if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
-      return 'pad';
-    }
-    return null; // No under other circumstances
-  },
-  mintClass: _solidUi.ns.pad('Notepad'),
-  mintNew: function (context, newPaneOptions) {
-    // @ts-ignore
-    const store = context.session.store;
-    const updater = store.updater;
-    if (newPaneOptions.me && !newPaneOptions.me.uri) {
-      throw new Error('notepad mintNew:  Invalid userid');
-    }
-    const newInstance = newPaneOptions.newInstance = newPaneOptions.newInstance || store.sym(newPaneOptions.newBase + 'index.ttl#this');
-    // const newInstance = kb.sym(newBase + 'pad.ttl#thisPad');
-    const newPadDoc = newInstance.doc();
-    store.add(newInstance, _solidUi.ns.rdf('type'), _solidUi.ns.pad('Notepad'), newPadDoc);
-    store.add(newInstance, _solidUi.ns.dc('title'), 'Shared Notes', newPadDoc);
-    store.add(newInstance, _solidUi.ns.dc('created'), new Date(), newPadDoc); // @@ TODO Remove casting
-    if (newPaneOptions.me) {
-      store.add(newInstance, _solidUi.ns.dc('author'), newPaneOptions.me, newPadDoc);
-    }
-    // kb.add(newInstance, ns.pad('next'), newInstance, newPadDoc);
-    // linked list empty @@
-    const chunk = store.sym(newInstance.uri + '_line0');
-    store.add(newInstance, _solidUi.ns.pad('next'), chunk, newPadDoc); // Linked list has one entry
-    store.add(chunk, _solidUi.ns.pad('next'), newInstance, newPadDoc);
-    store.add(chunk, _solidUi.ns.dc('author'), newPaneOptions.me, newPadDoc);
-    store.add(chunk, _solidUi.ns.sioc('content'), '', newPadDoc);
-    return new Promise(function (resolve, reject) {
-      if (!updater) {
-        reject(new Error('Have no updater'));
-        return;
-      }
-      updater.put(newPadDoc, store.statementsMatching(undefined, undefined, undefined, newPadDoc), 'text/turtle', function (uri2, ok, message) {
-        if (ok) {
-          resolve(newPaneOptions);
-        } else {
-          reject(new Error('FAILED to save new tool at: ' + uri2 + ' : ' + message));
-        }
-      });
-    });
-  },
-  // and follow instructions there
-  // @@ TODO Set better type for paneOptions
-  render: function (subject, context, paneOptions) {
-    const dom = context.dom;
-    // @ts-ignore
-    const store = context.session.store;
-    // Utility functions
-    const complainIfBad = function (ok, message) {
-      if (!ok) {
-        div.appendChild(_solidUi.widgets.errorMessageBlock(dom, message, 'pink'));
-      }
-    };
-    const clearElement = function (ele) {
-      while (ele.firstChild) {
-        ele.removeChild(ele.firstChild);
-      }
-      return ele;
-    };
-
-    // Access control
-
-    // Two constiations of ACL for this app, public read and public read/write
-    // In all cases owner has read write control
-    const genACLtext = function (docURI, aclURI, allWrite) {
-      const g = (0, _rdflib.graph)();
-      const auth = (0, _rdflib.Namespace)('http://www.w3.org/ns/auth/acl#');
-      let a = g.sym(aclURI + '#a1');
-      const acl = g.sym(aclURI);
-      const doc = g.sym(docURI);
-      g.add(a, _solidUi.ns.rdf('type'), auth('Authorization'), acl);
-      g.add(a, auth('accessTo'), doc, acl);
-      g.add(a, auth('agent'), me, acl);
-      g.add(a, auth('mode'), auth('Read'), acl);
-      g.add(a, auth('mode'), auth('Write'), acl);
-      g.add(a, auth('mode'), auth('Control'), acl);
-      a = g.sym(aclURI + '#a2');
-      g.add(a, _solidUi.ns.rdf('type'), auth('Authorization'), acl);
-      g.add(a, auth('accessTo'), doc, acl);
-      g.add(a, auth('agentClass'), _solidUi.ns.foaf('Agent'), acl);
-      g.add(a, auth('mode'), auth('Read'), acl);
-      if (allWrite) {
-        g.add(a, auth('mode'), auth('Write'), acl);
-      }
-      // TODO: Figure out why `serialize` isn't on the type definition according to TypeScript:
-      return (0, _rdflib.serialize)(acl, g, aclURI, 'text/turtle');
-    };
-
-    /**
-     * @param docURI
-     * @param allWrite
-     * @param callbackFunction
-     *
-     * @returns {Promise<Response>}
-     */
-    const setACL = function setACL(docURI, allWrite, callbackFunction) {
-      const aclDoc = store.any((0, _rdflib.sym)(docURI), (0, _rdflib.sym)('http://www.iana.org/assignments/link-relations/acl')); // @@ check that this get set by web.js
-      if (!fetcher) {
-        throw new Error('Have no fetcher');
-      }
-      if (aclDoc) {
-        // Great we already know where it is
-        const aclText = genACLtext(docURI, aclDoc.uri, allWrite);
-        return fetcher.webOperation('PUT', aclDoc.uri, {
-          data: aclText,
-          contentType: 'text/turtle'
-        }).then(() => callbackFunction(true)).catch(err => {
-          callbackFunction(false, err.message);
-        });
-      } else {
-        return fetcher.load(docURI).catch(err => {
-          callbackFunction(false, 'Getting headers for ACL: ' + err);
-        }).then(() => {
-          const aclDoc = store.any((0, _rdflib.sym)(docURI), (0, _rdflib.sym)('http://www.iana.org/assignments/link-relations/acl'));
-          if (!aclDoc) {
-            // complainIfBad(false, "No Link rel=ACL header for " + docURI);
-            throw new Error('No Link rel=ACL header for ' + docURI);
-          }
-          const aclText = genACLtext(docURI, aclDoc.uri, allWrite);
-          return fetcher.webOperation('PUT', aclDoc.uri, {
-            data: aclText,
-            contentType: 'text/turtle'
-          });
-        }).then(() => callbackFunction(true)).catch(err => {
-          callbackFunction(false, err.message);
-        });
-      }
-    };
-
-    //  Reproduction: spawn a new instance
-    //
-    // Viral growth path: user of app decides to make another instance
-    const newInstanceButton = function () {
-      const button = div.appendChild(dom.createElement('button'));
-      button.textContent = 'Start another pad';
-      button.addEventListener('click', function () {
-        return showBootstrap(subject, spawnArea, 'pad');
-      });
-      return button;
-    };
-
-    // Option of either using the workspace system or just typing in a URI
-    const showBootstrap = function showBootstrap(thisInstance, container, noun) {
-      const div = clearElement(container);
-      const appDetails = {
-        noun: 'notepad'
-      };
-      div.appendChild(_solidUi.login.newAppInstance(dom, appDetails, (workspace, newBase) => {
-        // FIXME: not sure if this will work at all, just
-        // trying to get the types to match - Michiel.
-        return initializeNewInstanceInWorkspace(new _rdflib.NamedNode(workspace || newBase));
-      }));
-      div.appendChild(dom.createElement('hr')); // @@
-
-      const p = div.appendChild(dom.createElement('p'));
-      p.textContent = 'Where would you like to store the data for the ' + noun + '?  ' + 'Give the URL of the directory where you would like the data stored.';
-      const baseField = div.appendChild(dom.createElement('input'));
-      baseField.setAttribute('type', 'text');
-      baseField.size = 80 // really a string
-;
-      baseField.label = 'base URL';
-      baseField.autocomplete = 'on';
-      div.appendChild(dom.createElement('br')); // @@
-
-      const button = div.appendChild(dom.createElement('button'));
-      button.textContent = 'Start new ' + noun + ' at this URI';
-      button.addEventListener('click', function (_e) {
-        let newBase = baseField.value;
-        if (newBase.slice(-1) !== '/') {
-          newBase += '/';
-        }
-        initializeNewInstanceAtBase(thisInstance, newBase);
-      });
-    };
-
-    //  Create new document files for new instance of app
-    const initializeNewInstanceInWorkspace = function (ws) {
-      // @@ TODO Clean up type for newBase
-      let newBase = store.any(ws, _solidUi.ns.space('uriPrefix'));
-      if (!newBase) {
-        newBase = ws.uri.split('#')[0];
-      } else {
-        newBase = newBase.value;
-      }
-      if (newBase.slice(-1) !== '/') {
-        _rdflib.log.error(appPathSegment + ': No / at end of uriPrefix ' + newBase); // @@ paramater?
-        newBase = newBase + '/';
-      }
-      const now = new Date();
-      newBase += appPathSegment + '/id' + now.getTime() + '/'; // unique id
-
-      initializeNewInstanceAtBase(thisInstance, newBase);
-    };
-    const initializeNewInstanceAtBase = function (thisInstance, newBase) {
-      const here = (0, _rdflib.sym)(thisInstance.uri.split('#')[0]);
-      const base = here; // @@ ???
-
-      const newPadDoc = store.sym(newBase + 'pad.ttl');
-      const newIndexDoc = store.sym(newBase + 'index.html');
-      const toBeCopied = [{
-        local: 'index.html',
-        contentType: 'text/html'
-      }];
-      const newInstance = store.sym(newPadDoc.uri + '#thisPad');
-
-      // log.debug("\n Ready to put " + kb.statementsMatching(undefined, undefined, undefined, there)); //@@
-
-      const agenda = [];
-      let f; //   @@ This needs some form of visible progress bar
-      for (f = 0; f < toBeCopied.length; f++) {
-        const item = toBeCopied[f];
-        const fun = function copyItem(item) {
-          agenda.push(function () {
-            const newURI = newBase + item.local;
-            console.log('Copying ' + base + item.local + ' to ' + newURI);
-            const setThatACL = function () {
-              setACL(newURI, false, function (ok, message) {
-                if (!ok) {
-                  complainIfBad(ok, 'FAILED to set ACL ' + newURI + ' : ' + message);
-                  console.log('FAILED to set ACL ' + newURI + ' : ' + message);
-                } else {
-                  agenda.shift()(); // beware too much nesting
-                }
-              });
-            };
-            if (!store.fetcher) {
-              throw new Error('Store has no fetcher');
-            }
-            store.fetcher.webCopy(base + item.local, newBase + item.local, item.contentType).then(() => _solidLogic.authn.checkUser()).then(webId => {
-              me = webId;
-              setThatACL();
-            }).catch(err => {
-              console.log('FAILED to copy ' + base + item.local + ' : ' + err.message);
-              complainIfBad(false, 'FAILED to copy ' + base + item.local + ' : ' + err.message);
-            });
-          });
-        };
-        fun(item);
-      }
-      agenda.push(function createNewPadDataFile() {
-        store.add(newInstance, _solidUi.ns.rdf('type'), PAD('Notepad'), newPadDoc);
-
-        // TODO @@ Remove casting of add
-        store.add(newInstance, _solidUi.ns.dc('created'), new Date(),
-        // @@ TODO Remove casting
-        newPadDoc);
-        if (me) {
-          store.add(newInstance, _solidUi.ns.dc('author'), me, newPadDoc);
-        }
-        store.add(newInstance, PAD('next'), newInstance, newPadDoc); // linked list empty
-
-        // Keep a paper trail   @@ Revisit when we have non-public ones @@ Privacy
-        store.add(newInstance, _solidUi.ns.space('inspiration'), thisInstance, padDoc);
-        store.add(newInstance, _solidUi.ns.space('inspiration'), thisInstance, newPadDoc);
-        if (!updater) {
-          throw new Error('Have no updater');
-        }
-        updater.put(newPadDoc, store.statementsMatching(undefined, undefined, undefined, newPadDoc), 'text/turtle', function (_uri2, ok, message) {
-          if (ok) {
-            agenda.shift()();
-          } else {
-            complainIfBad(ok, 'FAILED to save new notepad at: ' + newPadDoc.uri + ' : ' + message);
-            console.log('FAILED to save new notepad at: ' + newPadDoc.uri + ' : ' + message);
-          }
-        });
-      });
-      agenda.push(function () {
-        setACL(newPadDoc.uri, true, function (ok, body) {
-          complainIfBad(ok, 'Failed to set Read-Write ACL on pad data file: ' + body);
-          if (ok) agenda.shift()();
-        });
-      });
-      agenda.push(function () {
-        // give the user links to the new app
-
-        const p = div.appendChild(dom.createElement('p'));
-        p.classList.add('pad-new-instance-message');
-        p.innerHTML = 'Your <a href=\'' + newIndexDoc.uri + '\'><b>new notepad</b></a> is ready. ' + '<br/><br/><a href=\'' + newIndexDoc.uri + '\'>Go to new pad</a>';
-      });
-      agenda.shift()();
-      // Created new data files.
-    };
-
-    //  Update on incoming changes
-    const showResults = function (exists) {
-      console.log('showResults()');
-      me = _solidLogic.authn.currentUser();
-      _solidLogic.authn.checkUser().then(webId => {
-        me = webId;
-      });
-      const title = store.any(subject, _solidUi.ns.dc('title')) || store.any(subject, _solidUi.ns.vcard('fn'));
-      if (paneOptions.solo && typeof window !== 'undefined' && title) {
-        window.document.title = title.value;
-      }
-      options.exists = exists;
-      padEle = _solidUi.pad.notepad(dom, padDoc, subject, me, options);
-      naviMain.appendChild(padEle);
-      const partipationTarget = store.any(subject, _solidUi.ns.meeting('parentMeeting')) || subject;
-      _solidUi.pad.manageParticipation(dom, naviMiddle2, padDoc, partipationTarget, me, options);
-      if (!store.updater) {
-        throw new Error('Store has no updater');
-      }
-      store.updater.setRefreshHandler(padDoc, padEle.reloadAndSync); // initiated =
-    };
-
-    // Read or create empty data file
-    const loadPadData = function () {
-      if (!fetcher) {
-        throw new Error('Have no fetcher');
-      }
-      fetcher.nowOrWhenFetched(padDoc.uri, undefined, function (ok, body, response) {
-        if (!ok) {
-          if (response.status === 404) {
-            // /  Check explicitly for 404 error
-            console.log('Initializing results file ' + padDoc);
-            if (!updater) {
-              throw new Error('Have no updater');
-            }
-            updater.put(padDoc, [], 'text/turtle', function (_uri2, ok, message) {
-              if (ok) {
-                clearElement(naviMain);
-                showResults(false);
-              } else {
-                complainIfBad(ok, 'FAILED to create results file at: ' + padDoc.uri + ' : ' + message);
-                console.log('FAILED to craete results file at: ' + padDoc.uri + ' : ' + message);
-              }
-            });
-          } else {
-            // Other error, not 404 -- do not try to overwite the file
-            complainIfBad(ok, 'FAILED to read results file: ' + body);
-          }
-        } else {
-          // Happy read
-          clearElement(naviMain);
-          if (store.holds(subject, _solidUi.ns.rdf('type'), _solidUi.ns.wf('TemplateInstance'))) {
-            showBootstrap(subject, naviMain, 'pad');
-          }
-          showResults(true);
-          naviMiddle3.appendChild(newInstanceButton());
-        }
-      });
-    };
-
-    //  Body of Pane
-    const appPathSegment = 'app-pad.timbl.com'; // how to allocate this string and connect to
-
-    const fetcher = store.fetcher;
-    const updater = store.updater;
-    let me;
-    const PAD = (0, _rdflib.Namespace)('http://www.w3.org/ns/pim/pad#');
-    const thisInstance = subject;
-    const padDoc = subject.doc();
-    let padEle;
-    const div = dom.createElement('div');
-
-    //  Build the DOM
-    const structure = div.appendChild(dom.createElement('div')); // responsive flex layout
-    structure.className = 'pad-layout';
-    const naviLoginoutTR = structure.appendChild(dom.createElement('div'));
-    naviLoginoutTR.className = 'pad-row';
-    naviLoginoutTR.appendChild(dom.createElement('div')); // naviLoginout1
-    naviLoginoutTR.appendChild(dom.createElement('div'));
-    naviLoginoutTR.appendChild(dom.createElement('div'));
-    const naviTop = structure.appendChild(dom.createElement('div')); // stuff
-    naviTop.className = 'pad-row';
-    const naviMain = naviTop.appendChild(dom.createElement('div'));
-    naviMain.className = 'pad-main';
-    const naviMiddle = structure.appendChild(dom.createElement('div')); // controls
-    naviMiddle.className = 'pad-row pad-controls';
-    const naviMiddle1 = naviMiddle.appendChild(dom.createElement('div'));
-    naviMiddle1.className = 'pad-cell';
-    const naviMiddle2 = naviMiddle.appendChild(dom.createElement('div'));
-    naviMiddle2.className = 'pad-cell';
-    const naviMiddle3 = naviMiddle.appendChild(dom.createElement('div'));
-    naviMiddle3.className = 'pad-cell';
-    const naviStatus = structure.appendChild(dom.createElement('div')); // status etc
-    naviStatus.className = 'pad-row';
-    const statusArea = naviStatus.appendChild(dom.createElement('div'));
-    const naviSpawn = structure.appendChild(dom.createElement('div')); // create new
-    naviSpawn.className = 'pad-row';
-    const spawnArea = naviSpawn.appendChild(dom.createElement('div'));
-    const naviMenu = structure.appendChild(dom.createElement('div'));
-    naviMenu.setAttribute('class', 'pad-row naviMenu');
-    naviMenu.appendChild(dom.createElement('div')); // naviLeft
-    naviMenu.appendChild(dom.createElement('div'));
-    naviMenu.appendChild(dom.createElement('div'));
-    const options = {
-      statusArea,
-      timingArea: naviMiddle1
-    };
-    loadPadData();
-    return div;
-  }
-};
-// ends
-var _default = exports.default = paneDef;

package/dist/playlist/playlistPane.js

@@ -1,119 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var UI = _interopRequireWildcard(require("solid-ui"));
-var $rdf = _interopRequireWildcard(require("rdflib"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/*   Playlist Pane
- **
- **  This pane allows playlists and playlists slots to be viewed
- **  seeAlso: http://smiy.sourceforge.net/pbo/spec/playbackontology.html
- */
-
-const ns = UI.ns;
-var _default = exports.default = {
-  icon: UI.icons.iconBase + 'noun_1619.svg',
-  name: 'playlistSlot',
-  audience: [ns.solid('PowerUser')],
-  label: function (subject, context) {
-    const kb = context.session.store;
-    if (!kb.anyStatementMatching(subject, UI.ns.rdf('type'), kb.sym('http://purl.org/ontology/pbo/core#PlaylistSlot'))) {
-      return null;
-    }
-    return 'playlist slot';
-  },
-  render: function (subject, context) {
-    const myDocument = context.dom;
-    function isVideo(src, _index) {
-      if (!src) {
-        return {
-          html5: true
-        };
-      }
-      const youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-_%]+)/i);
-      const vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
-      const dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i);
-      const vk = src.match(/\/\/(?:www\.)?(?:vk\.com|vkontakte\.ru)\/(?:video_ext\.php\?)(.*)/i);
-      if (youtube) {
-        return {
-          youtube
-        };
-      } else if (vimeo) {
-        return {
-          vimeo
-        };
-      } else if (dailymotion) {
-        return {
-          dailymotion
-        };
-      } else if (vk) {
-        return {
-          vk
-        };
-      }
-    }
-    const link = function (contents, uri) {
-      if (!uri) return contents;
-      const a = myDocument.createElement('a');
-      a.setAttribute('href', uri);
-      a.appendChild(contents);
-      a.addEventListener('click', UI.widgets.openHrefInOutlineMode, true);
-      return a;
-    };
-    const text = function (str) {
-      return myDocument.createTextNode(str);
-    };
-    const kb = context.session.store;
-    const obj = kb.any(subject, $rdf.sym('http://purl.org/ontology/pbo/core#playlist_item'));
-    let index = kb.any(subject, $rdf.sym('http://purl.org/ontology/olo/core#index'));
-    let uri = obj.uri;
-    const video = isVideo(uri);
-    const div = myDocument.createElement('div');
-    let img;
-    if (video && video.youtube) {
-      uri = uri.replace('watch?v=', 'embed/');
-      div.setAttribute('class', 'imageView');
-      img = myDocument.createElement('IFRAME');
-      img.setAttribute('src', uri);
-      img.setAttribute('frameborder', 0);
-      img.setAttribute('style', 'width: 100%; aspect-ratio: 16/9; max-width: 100%; border: 0;');
-      img.setAttribute('allowfullscreen', 'true');
-    } else {
-      div.setAttribute('class', 'imageView');
-      img = myDocument.createElement('IMG');
-      img.setAttribute('src', obj.value);
-      img.setAttribute('style', 'max-width: 100%; height: auto;');
-    }
-    let descDiv;
-    if (index) {
-      const sl = kb.statementsMatching(null, $rdf.sym('http://purl.org/ontology/olo/core#index'));
-      const slots = [];
-      for (let i = 0; i < sl.length; i++) {
-        if (sl[i]) {
-          slots.push(parseInt(sl[i].object.value, 10));
-        }
-      }
-      index = parseInt(index.value, 10);
-      descDiv = myDocument.createElement('div');
-      const pIndex = slots[(slots.indexOf(index) - 1 + slots.length) % slots.length];
-      const nIndex = slots[(slots.indexOf(index) + 1 + slots.length) % slots.length];
-      const prev = link(text('<<'), subject.uri.split('#')[0] + '#' + pIndex);
-      descDiv.appendChild(prev);
-      const indexDiv = myDocument.createElement('span');
-      indexDiv.innerHTML = ' Playlist slot : ' + index + ' ';
-      descDiv.appendChild(indexDiv);
-      const next = link(text('>>'), subject.uri.split('#')[0] + '#' + nIndex);
-      descDiv.appendChild(next);
-    }
-    const tr = myDocument.createElement('TR'); // why need tr?
-    tr.appendChild(img);
-    if (descDiv) {
-      tr.appendChild(descDiv);
-    }
-    div.appendChild(tr);
-    return div;
-  }
-}; // ends