import * as UI from '../../src/index'
import { Canvas, Meta, Story } from '@storybook/addon-docs' import { rawJsonDecorator } from './decorators'
In this first example we'll see how you can create a notepad. This method creates input fields which allow you to provide a notepad component to your application.
The inputs will be stored to https://example-user.inrupt.net/public/example-notepad/index.ttl#this
{() => { const pad = $rdf.namedNode('https://example-user.inrupt.net/public/example-notepad/index.ttl#this') const me = new $rdf.NamedNode('https://example-user.inrupt.net/profile/card#me') const subject = SolidLogic.store.sym('https://test.test#') const options = {} return UI.pad.notepad(document, pad.doc(), subject, me, options) }} {() => { const me = new $rdf.NamedNode('https://example-user.inrupt.net/profile/card#me') const structure = document.createElement('div') const container = document.createElement('div') const subject = SolidLogic.store.sym('https://test.test#') const pad = $rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this') const options = { statusArea: container } return UI.pad.manageParticipation(document, structure, pad.doc(), subject, me, options) }}This method converts a pad.ttl document to HTML.
{() => { const div = document.createElement("div") const kb = SolidLogic.store const fetcher = $rdf.fetcher(kb) const pad = $rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this') fetcher.load(pad.doc()).then(() => { const htmlStr = UI.pad.notepadToHTML(pad, kb) div.appendChild(document.createTextNode(htmlStr)) }) return div }}This method returns a hex value for setting the color of the input box of the notepad. It does this by hashing the uri passed in as an argument. Ideally this would be the uri of the person logged in.
{() => { const colorStr = UI.pad.lightColorHash(new $rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')) const inputBox = document.createElement('INPUT') inputBox.setAttribute("type", "text") inputBox.style.backgroundColor = colorStr return inputBox }}Creates the table with the list of participants that have contributed to the given pad that is passed in. This gets called from manageParticipation, but can be used on it's own as well.
{() => { const div = document.createElement("div") const table = document.createElement('table'); const kb = SolidLogic.store const fetcher = $rdf.fetcher(kb) const pad = $rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this') fetcher.load(pad.doc()).then(() => { // subject = new NamedNode('test') // this i think the page where a list.. ns.ws('participants') are stored const subject = kb.sym('https://test.test#') const options = {} // what to put in options //options are used in the button personTR there are the following properties can be defined deleteFunction, link, draggable const tableOfParticipants = UI.pad.renderParticipants(document, table, pad, subject, new $rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'), options) div.appendChild(tableOfParticipants) }) return div }} {() => { const container = document.createElement("pre") const kb = SolidLogic.store const subject = kb.sym('https://test.test#'); const fetcher = $rdf.fetcher(kb) const pad = $rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this') fetcher.load(pad.doc()).then(() => { const me = new $rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me') return UI.pad.participationObject(subject, pad, me); }).then((node) => { container.appendChild(document.createTextNode(JSON.stringify(node, null, 2))) }) return container } }