Skip to content

Notepad.stories.mdx

Latest commit

 

History

History
124 lines (105 loc) · 4.94 KB

Notepad.stories.mdx

File metadata and controls

124 lines (105 loc) · 4.94 KB
Raw

import * as UI from '../../lib'

import { Canvas, Meta, Story } from '@storybook/addon-docs' import { rawJsonDecorator } from './decorators'

notepad: Creates a notepad

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 = UI.rdf.namedNode('https://example-user.inrupt.net/public/example-notepad/index.ttl#this') const me = new UI.rdf.NamedNode('https://example-user.inrupt.net/profile/card#me') const subject = UI.store.sym('https://test.test#') const options = {} return UI.pad.notepad(document, pad.doc(), subject, me, options) }}

manageParticipation: Creates the table to display the participants

{() => { const me = new UI.rdf.NamedNode('https://example-user.inrupt.net/profile/card#me') const structure = document.createElement('div') const container = document.createElement('div') const subject = UI.store.sym('https://test.test#') const pad = UI.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) }}

notepadToHTML: Converts a Turtle file to an HTML

This method converts a pad.ttl document to HTML.

{() => { const div = document.createElement("div") const kb = UI.store const fetcher = UI.rdf.fetcher(kb) const pad = UI.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 }}

lightColorHash : Determines a color to be used for a participants notepad entry

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 UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')) const inputBox = document.createElement('INPUT') inputBox.setAttribute("type", "text") inputBox.style.backgroundColor = colorStr return inputBox }}

renderParticipants: Creates a table of participants on a given notepad document

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 = UI.store const fetcher = UI.rdf.fetcher(kb) const pad = UI.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.renderPartipants(document, table, pad, subject, new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'), options) div.appendChild(tableOfParticipants) }) return div }}

participationObject: Contains the subject, pad and URI for the participants

{() => { const container = document.createElement("pre") const kb = UI.store const subject = kb.sym('https://test.test#'); const fetcher = UI.rdf.fetcher(kb) const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this') fetcher.load(pad.doc()).then(() => { const me = new UI.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 } }