solid-panes 3.7.3 → 4.0.0-60467249

package/src/audio/audioPane.js

@@ -1,197 +0,0 @@
-/*   Single audio play Pane
- **
- */
- import * as UI from 'solid-ui'
- import * as $rdf from 'rdflib'
-const ns = UI.ns
-
-export default {
-  icon: UI.icons.iconBase + 'noun_534313.svg',
-
-  name: 'audio',
-
-  // Does the subject deserve an audio play pane?
-  label: function (subject, context) {
-    const kb = context.session.store
-    const typeURIs = kb.findTypeURIs(subject)
-
-    const prefix = $rdf.Util.mediaTypeClass('audio/*').uri.split('*')[0]
-    for (const t in typeURIs) {
-      if (t.startsWith(prefix)) return 'Play audio'
-    }
-    return null
-  },
-
-  render: function (subject, context) {
-    const kb = context.session.store
-    const dom = context.dom
-    const options = {
-      autoplay: false,
-      chain: true,
-      chainAlbums: true,
-      loop: false
-    }
-
-    const removeExtension = function (str) {
-      const dot = str.lastIndexOf('.')
-      if (dot < 0) return str // if any
-      const slash = str.lastIndexOf('/')
-      if (dot < slash) return str
-      return str.slice(0, dot)
-    }
-
-    // True if there is another file like song.mp3 when this is "song 1.mp3"
-    // or this is song.m4a
-    //
-    const looksRedundant = function (x) {
-      const folder = kb.any(undefined, ns.ldp('contains'), x)
-      if (!folder) return false
-      const contents = kb.each(folder, ns.ldp('contains'))
-      if (contents.length < 2) return false
-      const thisName = x.uri
-      for (let k = 0; k < contents.length; k++) {
-        const otherName = contents[k].uri
-        if (
-          thisName.length > otherName.length &&
-          thisName.startsWith(removeExtension(otherName))
-        ) {
-          return true
-        }
-        if (
-          thisName.endsWith('.m4a') &&
-          otherName.endsWith('.mp3') &&
-          removeExtension(thisName) === removeExtension(otherName)
-        ) {
-          return true
-        }
-      }
-      return false
-    }
-
-    // Alternative methods could include:
-    // Accesing metadata in the audio contol, or paring the audio file
-    const guessNames = function (x) {
-      const a = x.uri.split('/').slice(-3) // Hope artist, album, track
-      const decode = function (str) {
-        try {
-          return decodeURIComponent(str)
-        } catch (e) {
-          return str
-        }
-      }
-      artistRow.textContent = decode(a[0])
-      albumRow.textContent = decode(a[1])
-      trackRow.textContent = decode(removeExtension(a[2]))
-    }
-
-    const moveOn = function (current, level) {
-      return new Promise(function (resolve) {
-        level = level || 0
-        if (!options.chain) return resolve(null)
-        // Ideally navigate graph else cheat with URI munging:
-        const folder =
-          kb.any(undefined, ns.ldp('contains'), current) || current.dir()
-        if (!folder) return resolve(null)
-        kb.fetcher.load(folder).then(function (_xhr) {
-          const contents = kb.each(folder, ns.ldp('contains')) // @@ load if not loaded
-          // if (contents.length < 2) return resolve(null)   NO might move on from 1-track album
-          let j
-          contents.sort() // sort by URI which hopefully will get tracks in order
-          for (let i = 0; i < contents.length; i++) {
-            if (current.uri === contents[i].uri) {
-              j = (i + 1) % contents.length
-              if (j === 0) {
-                if (!options.chainAlbums) {
-                  if (options.loop) {
-                    return resolve(contents[j])
-                  }
-                  return resolve(null) // No more music needed
-                } else {
-                  // chain albums
-                  if (level === 1 || !options.chainAlbums) return resolve(null) // limit of navigating treee
-                  moveOn(folder, level + 1).then(function (folder2) {
-                    if (folder2) {
-                      kb.fetcher.load(folder2).then(function (_xhr) {
-                        const contents = kb.each(folder2, ns.ldp('contains'))
-                        if (contents.length === 0) return resolve(null)
-                        contents.sort()
-                        console.log('New Album: ' + folder2)
-                        return resolve(contents[0]) // Start off new album
-                      })
-                    }
-                  })
-                }
-              } else {
-                return resolve(contents[j])
-              }
-            }
-          } // for
-        })
-      })
-    }
-    const endedListener = function (event) {
-      const current = kb.sym(event.target.getAttribute('src'))
-      if (!options.chain) return
-      const tryNext = function (cur) {
-        const current = cur
-        moveOn(current).then(function (next) {
-          if (!next) {
-            console.log('No successor to ' + current)
-            return
-          }
-          if (!looksRedundant(next)) {
-            console.log('Moving on to ' + next)
-            guessNames(next)
-            controlRow.appendChild(audioControl(next, true)) // Force autoplay
-            controlRow.removeChild(event.target)
-          } else {
-            console.log('Ignoring redundant ' + next)
-            tryNext(next)
-          }
-        })
-      }
-      tryNext(current)
-    }
-
-    const audioControl = function (song, autoplay) {
-      const audio = dom.createElement('audio')
-      audio.setAttribute('controls', 'yes')
-      // get audio with authenticated fetch
-      kb.fetcher._fetch(song.uri)
-        .then(function(response) {
-          return response.blob()
-        })
-        .then(function(myBlob) {
-          const objectURL = URL.createObjectURL(myBlob)
-          audio.setAttribute('src', objectURL) // w640 h480 //
-        })
-
-      if (autoplay) {
-        audio.setAttribute('autoplay', 'autoplay') // Make this a personal preference
-      }
-      audio.addEventListener('ended', endedListener, false)
-      return audio
-    }
-
-    const div = dom.createElement('div')
-    const table = div.appendChild(dom.createElement('table'))
-    const labelStyle = 'padding: 0.3em; color:white; background-color: black;'
-    const artistRow = table.appendChild(dom.createElement('tr'))
-    artistRow.style.cssText = labelStyle
-    const albumRow = table.appendChild(dom.createElement('tr'))
-    albumRow.style.cssText = labelStyle
-    const trackRow = table.appendChild(dom.createElement('tr'))
-    trackRow.style.cssText = labelStyle
-    const controlRow = table.appendChild(dom.createElement('tr'))
-    guessNames(subject)
-    controlRow.appendChild(audioControl(subject, options.autoplay))
-
-    if (!kb.holds(undefined, ns.ldp('contains'), subject) && subject.dir()) {
-      kb.fetcher.load(subject.dir()) // Prefetch enclosing @@ or playlist
-    }
-
-    return div
-  }
-}
-
-// ends

package/src/chatPreferencesForm.ttl

@@ -1,12 +0,0 @@
-  @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.
-  @prefix ui: <http://www.w3.org/ns/ui#>.
-  @prefix : <#>.
-
-  :this
-    <http://purl.org/dc/elements/1.1/title> "Chat preferences" ;
-    a ui:Form ;
-    ui:part :colorizeField;
-    ui:parts ( :colorizeField :expandImagesInline ).
-
-:colorizeField a ui:BooleanField; ui:label "Color user input by user".
-:expandImagesInline a ui:BooleanField; ui:label "Expand image URLs inline".

package/src/classInstancePane.js

@@ -1,110 +0,0 @@
-/*   Class member Pane
- **
- **  This outline pane lists the members of a class
- */
-
-import * as UI from 'solid-ui'
-import * as $rdf from 'rdflib'
-
-const ns = UI.ns
-
-export const classInstancePane =  {
-  icon: UI.icons.originalIconBase + 'tango/22-folder-open.png',
-
-  name: 'classInstance',
-
-  // Create a new folder in a Solid system,
-
-  audience: [ns.solid('PowerUser')],
-
-  label: function (subject, context) {
-    const kb = context.session.store
-    const n = kb.each(undefined, ns.rdf('type'), subject).length
-    if (n > 0) return 'List (' + n + ')' // Show how many in hover text
-    return null // Suppress pane otherwise
-  },
-
-  render: function (subject, context) {
-    const dom = context.dom
-    const outliner = context.getOutliner(dom)
-    const kb = context.session.store
-    const complain = function complain (message, color) {
-      const pre = dom.createElement('pre')
-      pre.setAttribute('style', 'background-color: ' + color || '#eed' + ';')
-      div.appendChild(pre)
-      pre.appendChild(dom.createTextNode(message))
-    }
-    const div = dom.createElement('div')
-    div.setAttribute('class', 'instancePane')
-    div.setAttribute(
-      'style',
-      '  border-top: solid 1px #777; border-bottom: solid 1px #777; margin-top: 0.5em; margin-bottom: 0.5em '
-    )
-
-    // If this is a class, look for all both explicit and implicit
-    const sts = kb.statementsMatching(undefined, ns.rdf('type'), subject)
-    if (sts.length > 0) {
-      const already = {}
-      const more = []
-      sts.forEach(st => {
-        already[st.subject.toNT()] = st
-      })
-      for (const nt in kb.findMembersNT(subject)) {
-        if (!already[nt]) {
-          more.push($rdf.st(kb.fromNT(nt), ns.rdf('type'), subject)) // @@ no provenance
-        }
-      }
-      if (more.length) {
-        complain(
-          'There are ' +
-            sts.length +
-            ' explicit and ' +
-            more.length +
-            ' implicit members of ' +
-            UI.utils.label(subject)
-        )
-      }
-      if (subject.sameTerm(ns.rdf('Property'))) {
-        // / Do not find all properties used as properties .. unless look at kb index
-      } else if (subject.sameTerm(ns.rdfs('Class'))) {
-        const uses = kb.statementsMatching(undefined, ns.rdf('type'), undefined)
-        const usedTypes = {}
-        uses.forEach(function (st) {
-          usedTypes[st.object] = st
-        }) // Get unique
-        const used = []
-        for (const i in usedTypes) {
-          used.push($rdf.st($rdf.sym(i), ns.rdf('type'), ns.rdfs('Class')))
-        }
-        complain(
-          'Total of ' +
-            uses.length +
-            ' type statements and ' +
-            used.length +
-            ' unique types.'
-        )
-      }
-
-      if (sts.length > 10) {
-        const tr = dom.createElement('TR')
-        tr.appendChild(dom.createTextNode('' + sts.length))
-        // tr.AJAR_statement=sts[i]
-        div.appendChild(tr)
-      }
-
-      outliner.appendPropertyTRs(div, sts, true, function (_pred) {
-        return true
-      })
-
-      if (more.length) {
-        complain('Implicit:')
-        outliner.appendPropertyTRs(div, more, true, function (_pred) {
-          return true
-        })
-      }
-    }
-
-    return div
-  }
-}
-// ends

package/src/dashboard/basicPreferences.ts

@@ -1,201 +0,0 @@
-import { PaneDefinition } from 'pane-registry'
-import { IndexedFormula, NamedNode, parse, Store } from 'rdflib'
-import { icons, login, ns, widgets } from 'solid-ui'
-import ontologyData from './ontologyData.ttl'
-import preferencesFormText from './preferencesFormText.ttl'
-
-export const basicPreferencesPane: PaneDefinition = {
-  icon: icons.iconBase + 'noun_Sliders_341315_000000.svg',
-  name: 'basicPreferences',
-  label: _subject => {
-    return null
-  },
-
-  // Render the pane
-  // The subject should be the logged in user.
-  render: (subject, context) => {
-    const dom = context.dom
-    const store = context.session.store as Store
-
-    function complainIfBad (ok: Boolean, mess: any) {
-      if (ok) return
-      container.appendChild(widgets.errorMessageBlock(dom, mess, '#fee'))
-    }
-
-    const container = dom.createElement('div')
-
-    const formArea = setupUserTypesSection(container, dom)
-
-    function loadData (doc: NamedNode, turtle: String) {
-      doc = doc.doc() // remove # from URI if nec
-      if (!store.holds(undefined, undefined, undefined, doc)) {
-        // If not loaded already
-        ;(parse as any)(turtle, store, doc.uri, 'text/turtle', null) // Load form directly
-      }
-    }
-
-    const preferencesForm = store.sym(
-      'urn:uuid:93774ba1-d3b6-41f2-85b6-4ae27ffd2597#this'
-    )
-    loadData(preferencesForm, preferencesFormText)
-
-    const ontologyExtra = store.sym(
-      'urn:uuid:93774ba1-d3b6-41f2-85b6-4ae27ffd2597-ONT'
-    )
-    loadData(ontologyExtra, ontologyData)
-
-    async function doRender () {
-      const renderContext = await login.ensureLoadedPreferences({
-        dom,
-        div: container
-      })
-      if (!renderContext.preferencesFile) {
-        // Could be CORS
-        console.log(
-          'Not doing private class preferences as no access to preferences file. ' +
-          renderContext.preferencesFileError
-        )
-        return
-      }
-      const appendedForm = widgets.appendForm(
-        dom,
-        formArea,
-        {},
-        renderContext.me,
-        preferencesForm,
-        renderContext.preferencesFile,
-        complainIfBad
-      )
-      appendedForm.style.borderStyle = 'none'
-
-      const trustedApplicationsView = context.session.paneRegistry.byName('trustedApplications')
-      if (trustedApplicationsView) {
-        container.appendChild(trustedApplicationsView.render(null, context))
-      }
-
-      // @@ TODO Remove need for casting as any and bang (!) syntax
-      addDeleteSection(container, store, renderContext.me!, dom)
-    }
-
-    doRender()
-
-    return container
-  }
-}
-
-function setupUserTypesSection (
-  container: Element,
-  dom: HTMLDocument
-): Element {
-  const formContainer = createSection(container, dom, 'User types')
-
-  const description = formContainer.appendChild(dom.createElement('p'))
-  description.innerText = 'Here you can self-assign user types to help the data browser know which views you would like to access.'
-
-  const userTypesLink = formContainer.appendChild(dom.createElement('a'))
-  userTypesLink.href = 'https://github.com/solidos/userguide/#role'
-  userTypesLink.innerText = 'Read more'
-
-  const formArea = formContainer.appendChild(dom.createElement('div'))
-
-  return formArea
-}
-
-export default basicPreferencesPane
-
-// ends
-
-function addDeleteSection (
-  container: HTMLElement,
-  store: IndexedFormula,
-  profile: NamedNode,
-  dom: HTMLDocument
-): void {
-  const section = createSection(container, dom, 'Delete account')
-
-  const podServerNodes = store.each(profile, ns.space('storage'), null, profile.doc())
-  const podServers = podServerNodes.map(node => node.value)
-
-  const list = section.appendChild(dom.createElement('ul'))
-
-  podServers.forEach(async server => {
-    const deletionLink = await generateDeletionLink(server, dom)
-    if (deletionLink) {
-      const listItem = list.appendChild(dom.createElement('li'))
-      listItem.appendChild(deletionLink)
-    }
-  })
-}
-
-async function generateDeletionLink (
-  podServer: string,
-  dom: HTMLDocument
-): Promise<HTMLElement | null> {
-  const link = dom.createElement('a')
-  link.textContent = `Delete your account at ${podServer}`
-  const deletionUrl = await getDeletionUrlForServer(podServer)
-  if (typeof deletionUrl !== 'string') {
-    return null
-  }
-  link.href = deletionUrl
-  return link
-}
-
-/**
- * Hacky way to get the deletion link to a Pod
- *
- * This function infers the deletion link by assuming the URL structure of Node Solid server.
- * In the future, Solid will hopefully provide a standardised way of discovering the deletion link:
- * https://github.com/solidos/data-interoperability-panel/issues/18
- *
- * If NSS is in multi-user mode (the case on inrupt.net and solid.community), the deletion URL for
- * vincent.dev.inrupt.net would be at dev.inrupt.net/account/delete. In single-user mode, the
- * deletion URL would be at vincent.dev.inrupt.net/account/delete.
- *
- * @param server Pod server containing the user's account.
- * @returns URL of the page that Node Solid Server would offer to delete the account, or null if
- *          the URLs we tried give invalid responses.
- */
-async function getDeletionUrlForServer (
-  server: string
-): Promise<string | null> {
-  const singleUserUrl = new URL(server)
-  const multiUserUrl = new URL(server)
-  multiUserUrl.pathname = singleUserUrl.pathname = '/account/delete'
-
-  const hostnameParts = multiUserUrl.hostname.split('.')
-  // Remove `vincent.` from `vincent.dev.inrupt.net`, for example:
-  multiUserUrl.hostname = hostnameParts.slice(1).join('.')
-
-  const multiUserNssResponse = await fetch(multiUserUrl.href, {
-    method: 'HEAD'
-  })
-  if (multiUserNssResponse.ok) {
-    return multiUserUrl.href
-  }
-
-  const singleUserNssResponse = await fetch(singleUserUrl.href, {
-    method: 'HEAD'
-  })
-  if (singleUserNssResponse.ok) {
-    return singleUserUrl.href
-  }
-  return null
-}
-
-function createSection (
-  container: Element,
-  dom: HTMLDocument,
-  title: string
-): Element {
-  const section = container.appendChild(dom.createElement('div'))
-  section.style.border = '0.3em solid #418d99'
-  section.style.borderRadius = '0.5em'
-  section.style.padding = '0.7em'
-  section.style.marginTop = '0.7em'
-
-  const titleElement = section.appendChild(dom.createElement('h3'))
-  titleElement.innerText = title
-
-  return section
-}

package/src/dashboard/dashboardPane.ts

@@ -1,83 +0,0 @@
-import { icons } from 'solid-ui'
-import { authn, authSession, store } from 'solid-logic'
-import { Fetcher, NamedNode } from 'rdflib'
-import { generateHomepage } from './homepage'
-import { DataBrowserContext, PaneDefinition } from 'pane-registry'
-
-export const dashboardPane: PaneDefinition = {
-  icon: icons.iconBase + 'noun_547570.svg',
-  name: 'dashboard',
-  label: subject => {
-    console.log()
-    if (subject.uri === subject.site().uri) {
-      return 'Dashboard'
-    }
-    return null
-  },
-  render: (subject, context) => {
-    console.log('Dashboard Pane Render')
-    const dom = context.dom
-    const container = dom.createElement('div')
-    const runBuildPage = () => {
-      container.innerHTML = ''
-      buildPage(
-        container,
-        authn.currentUser() || null,
-        context,
-        subject
-      )
-    }
-
-    authSession.events.on("login", () => {
-      // console.log('On Login')
-      runBuildPage()
-    })
-    authSession.events.on("sessionRestore", () => {
-      // console.log('On Session Restore')
-      runBuildPage()
-    })
-    // console.log('Initial Load')
-    runBuildPage()
-
-    return container
-  }
-}
-
-function buildPage (
-  container: HTMLElement,
-  webId: NamedNode | null,
-  context: DataBrowserContext,
-  subject: NamedNode
-) {
-  // if uri then SolidOS is a browse.html web app
-  const uri = (new URL(window.location.href)).searchParams.get('uri')
-  if (webId && (uri || webId.site().uri === subject.site().uri)) {
-    return buildDashboard(container, context)
-  }
-  return buildHomePage(container, subject)
-}
-
-function buildDashboard (container: HTMLElement, context: DataBrowserContext) {
-  // console.log('build dashboard')
-  // @@ TODO get a proper type
-  const outliner: any = context.getOutliner(context.dom)
-  outliner
-    .getDashboard()
-    .then((dashboard: HTMLElement) => container.appendChild(dashboard))
-}
-
-function buildHomePage (container: HTMLElement, subject: NamedNode) {
-  // console.log('build home page')
-  const wrapper = document.createElement('div')
-  container.appendChild(wrapper)
-  const shadow = wrapper.attachShadow({ mode: 'open' })
-  const link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.href = '/common/css/bootstrap.min.css'
-  shadow.appendChild(link)
-  generateHomepage(subject, store, store.fetcher as Fetcher).then(homepage =>
-    shadow.appendChild(homepage)
-  )
-}
-
-export default dashboardPane

package/src/dashboard/homepage.ts

@@ -1,72 +0,0 @@
-import { Fetcher, IndexedFormula, NamedNode, sym } from 'rdflib'
-import { ns } from 'solid-ui'
-
-export async function generateHomepage (
-  subject: NamedNode,
-  store: IndexedFormula,
-  fetcher: Fetcher
-): Promise<HTMLElement> {
-  const ownersProfile = await loadProfile(subject, fetcher)
-  const name = getName(store, ownersProfile)
-
-  const wrapper = document.createElement('div')
-  wrapper.classList.add('container')
-  wrapper.appendChild(createTitle(ownersProfile.uri, name))
-  wrapper.appendChild(createDataSection(name))
-
-  return wrapper
-}
-
-function createDataSection (name: string): HTMLElement {
-  const dataSection = document.createElement('section')
-
-  const title = document.createElement('h2')
-  title.innerText = 'Data'
-  dataSection.appendChild(title)
-
-  const listGroup = document.createElement('div')
-  listGroup.classList.add('list-group')
-  dataSection.appendChild(listGroup)
-
-  const publicDataLink = document.createElement('a')
-  publicDataLink.classList.add('list-group-item')
-  publicDataLink.href = window.document.location.href + 'public/'
-  publicDataLink.innerText = `View ${name}'s files`
-  listGroup.appendChild(publicDataLink)
-
-  return dataSection
-}
-
-function createTitle (uri: string, name: string): HTMLElement {
-  const profileLink = document.createElement('a')
-  profileLink.href = uri
-  profileLink.innerText = name
-
-  const profileLinkPost = document.createElement('span')
-  profileLinkPost.innerText = '\'s Pod'
-
-  const title = document.createElement('h1')
-  title.appendChild(profileLink)
-  title.appendChild(profileLinkPost)
-
-  return title
-}
-
-async function loadProfile (
-  subject: NamedNode,
-  fetcher: Fetcher
-): Promise<NamedNode> {
-  const pod = subject.site().uri
-  // TODO: This is a hack - we cannot assume that the profile is at this document, but we will live with it for now
-  const webId = sym(`${pod}profile/card#me`)
-  await fetcher.load(webId)
-  return webId
-}
-
-function getName (store: IndexedFormula, ownersProfile: NamedNode): string {
-  return (
-    store.anyValue(ownersProfile, ns.vcard('fn'), null, ownersProfile.doc()) ||
-    store.anyValue(ownersProfile, ns.foaf('name'), null, ownersProfile.doc()) ||
-    new URL(ownersProfile.uri).host.split('.')[0]
-  )
-}