Commit 110b033

<p>

On this page you'll find some examples from the Pad module. See <a

href="https://solid.github.io/solid-ui/Documentation/api/modules/_pad_.html#pad">API

documentation</a> for more info about how to use the pad module.

</p>

<code>notepad</code>: Working with the Notepad

The Notepad provides functionality to both create a new Notepad or view/edit an existing one.

The code below shows an example of how to view an existing notepad.

<ul>

<li>Use the store and fetcher to fetch the notepad document.</li>

<li>Provide the full path of the pad document you are fetching.</li>

<li>Provide the URI of the author/editor of the document.</li>

<li>Provide the full path of the subject for this pad. As you can see in the example below it is the same

as the pad, except you also need to include '#this'.

</li>

<li>Optional: Provide a StatusArea property (HTMLDIVElement) to display error messages</li>

</ul>

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/id1585026584938/index.ttl')

const me = new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')

const subject = UI.store.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl#this')

const options = { exists: true }

await fetcher.load(pad.doc()) // if you don't have this you will get an inconsistency error

In order to create a new notepad you need to change three things:

<ul>

<li>Provide user authentication. You can do this by by including solid-auth-client as explained in

https://solidproject.org/for-developers/apps/first-app/1-authentication </li>

<li>Change the exists flag on the options object to <code>false</code>.</li>

<li>Use the updater to create the document in the store, instead of using the <code>fetcher.load()</code> function

above. The code below is a simple example (without error handling) to give you an idea of how this works.

<code> kb.updater.put(pad, [], 'text/turtle', function (pad, subject, me, options) {

const result = UI.pad.notepad(document, pad, subject, me, options)

document.querySelector('#div-notepad').appendChild(result)

}</code></li>

</ul>

This method converts a pad document to HTML so that it can be exported.

const doc = document.querySelector('#iframe-notepadToHTML').contentWindow.document

doc.open()

doc.write(htmlStr)

doc.close()

<iframe id="iframe-notepadToHTML" src="about:blank"></iframe>

<code>lightColorHash</code> : Returns a color in hex format calculated by hashing a WebID

<p>This method returns a hex value for setting a unique color on the input box of the notepad for a given

editor/user.

It does this by hashing the WebID passed in as an argument. Ideally this would be the WebID of the person

logged in. However, this function could be used in any situation where you need to have a unique color to style

a component based on WebIDs.

<p>The example below shows how you can use the lightColorHash function.</p>

<article id='manageParticipation'>

<h2>

<a href='#manageParticipation'>

<code>manageParticipation</code>: Creates the table to display the participants

</a>

</h2>

<p>ManageParticpation manages the pad document editors. </p>

<p>The example below shows how to use this function. </p>

<ul>

<li>Provide the HTMLTableElement or HTMLDivElement on which to render the participants.</li>

<li>Provide the full path to the pad document.</li>

<li>Provide the full path to the subject, which is the pad document + '#this'.</li>

<li>Optional: There are three properties that can be set on the options object.</li>

<ul>

<li>statusArea - a place to show error messages from pad.</li>

<li>draggable - set this to true in order to make the participant draggable.</li>

<li>deleteFunction - provide a delete function to enable the delete functionality.</li>

<li>link - this should create a link to the WebID.</li>

</ul>

</ul>

<script id='script-manageParticipation'>

window.addEventListener('DOMContentLoaded', (event) => {

const me = new UI.rdf.NamedNode('https://example-user.inrupt.net/profile/card#me')

const structure = document.createElement('div')

const padMessages = document.createElement('div')

const subject = UI.store.sym('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')

options = { statusArea: padMessages }

// const result = UI.pad.manageParticipation(document, structure, pad.doc(), subject, me, options)

// document.querySelector('#div-manageParticipation').appendChild(result)

})

</script>

<pre id='viewSource-manageParticipation'></pre>

<div id='div-manageParticipation'></div>

</article>

the given pad. This is used by manageParticipation, but can be used on it's own as well. </p>

<p>The example below shows how to use this function, however the function call

is commented out because it will add a triple each time this page is rendered just as the renderParticpants

function below. </p>

<ul>

<li>Use the fetcher to load the pad document.</li>

<li>Provide the HTMLTableElement on which to render the participants.</li>

<li>Provide the full path to the pad document.</li>

<li>Provide the full path to the subject, which is the pad document + '#this'.</li>

<li>Optional: There are three properties that can be set on the options object.</li>

<ul>

<li>draggable - set this to true in order to make the participant draggable.</li>

<li>deleteFunction - provide a delete function to enable the delete functionality.</li>

<li>link - this should create a link to the WebID.</li>

</ul>

</ul>

const table = document.createElement('table');

const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl')

const subject = kb.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl#this')

const options = { draggable: true, link: true, deleteFunction: () => alert("deleted") }

<code>participationObject</code>: Contains the subject, pad and WebID for the participants

const subject = kb.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this');

const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl')

const htmlStr = await UI.pad.participationObject(subject, pad, me);

<code>recordParticipation</code>: Adds the WebID of the user to the participant store

<p>Records the participants in the store for the given document and returns the participation object.

This is also used in manageParticipation, but could also be used on it's own to create a particpation triple. </p>

<p>The code below provides an example of the code you need to write to use this function, however the function call

is commented out because it will add a triple each time this page is rendered. </p>

const subject = kb.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl#this');

const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/example-notepad/index.ttl#this')