Skip to content

Commit 6168d16

Browse files
committed
tried to move all styles to style.js
1 parent 672e55e commit 6168d16

17 files changed

Lines changed: 242 additions & 262 deletions

File tree

dist/solid-ui.js

Lines changed: 111 additions & 104 deletions
Large diffs are not rendered by default.

dist/solid-ui.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/solid-ui.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/solid-ui.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/media/media-capture.ts

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
1-
/// /////////////////////////////////////////////
21
//
32
// Media input widget
43
//
54
//
65
// Workflow:
7-
// The HTML5 functionality (on mobille) is to prompt for either
8-
// a realtime camera capture , OR a selection from images already ont the device
6+
// The HTML5 functionality (on mobile) is to prompt for either
7+
// a realtime camera capture, OR a selection from images already not the device
98
// (eg camera roll).
109
//
11-
// The solid alternative is to either take a phtoto
12-
// or access cemra roll (etc) OR to access solid cloud storage of favorite photo almbums.
10+
// The solid alternative is to either take a photo
11+
// or access camera roll (etc) OR to access solid cloud storage of favorite photo albums.
1312
// (Especially latest taken ones)
1413
//
1514
import * as debug from '../debug'
1615

1716
/** @module mediaCapture */
1817

1918
import { icons } from '../iconBase'
19+
import * as style from '../style'
2020
import * as widgets from '../widgets'
2121
import { IndexedFormula, NamedNode } from 'rdflib'
2222

2323
const cameraIcon = icons.iconBase + 'noun_Camera_1618446_000000.svg' // Get it from github
2424
const retakeIcon = icons.iconBase + 'noun_479395.svg' // Get it from github
2525

26-
const canvasWidth = '640'
27-
const canvasHeight = '480'
28-
29-
const controlStyle = `border-radius: 0.5em; margin: 0.8em; width: ${canvasWidth}; height:${canvasHeight};`
30-
// const controlStyle = 'border-radius: 0.5em; margin: 0.8em; width: 320; height:240;'
3126
const contentType = 'image/png'
3227

3328
/** A control to capture a picture using camera
@@ -88,7 +83,7 @@ export function cameraCaptureControl (
8883
player = main.appendChild(dom.createElement('video'))
8984
player.setAttribute('controls', '1')
9085
player.setAttribute('autoplay', '1')
91-
player.setAttribute('style', controlStyle)
86+
player.setAttribute('style', style.controlStyle)
9287
if (!navigator.mediaDevices) {
9388
throw new Error('navigator.mediaDevices not available')
9489
}
@@ -112,9 +107,9 @@ export function cameraCaptureControl (
112107
function grabCanvas () {
113108
// Draw the video frame to the canvas.
114109
canvas = dom.createElement('canvas')
115-
canvas.setAttribute('width', canvasWidth)
116-
canvas.setAttribute('height', canvasHeight)
117-
canvas.setAttribute('style', controlStyle)
110+
canvas.setAttribute('width', style.canvasWidth)
111+
canvas.setAttribute('height', style.canvasHeight)
112+
canvas.setAttribute('style', style.controlStyle)
118113
main.appendChild(canvas)
119114

120115
const context = canvas.getContext('2d')
@@ -178,9 +173,9 @@ export function cameraCaptureControl (
178173
* @param {IndexedForumla} store - The quadstore to store data in
179174
* @param {fuunction} getImageDoc - returns NN of the image file to be created
180175
* @param {function<Node>} doneCallback - called with the image taken
181-
* @returns {DomElement} - A div element with the buton in it
176+
* @returns {DomElement} - A div element with the button in it
182177
*
183-
* This expacts the buttton to a large control when it is pressed
178+
* This expects the button to a large control when it is pressed
184179
*/
185180

186181
export function cameraButton (

src/pad.ts

Lines changed: 13 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { newThing, errorMessageBlock } from './widgets'
1010
import { beep } from './utils'
1111
import { log } from './debug'
1212
import { solidLogicSingleton } from 'solid-logic'
13-
export { renderPartipants, participationObject, manageParticipation, recordParticipation } from './participation'
13+
import * as style from './style'
14+
export { renderParticipants, participationObject, manageParticipation, recordParticipation } from './participation'
1415

1516
const store = solidLogicSingleton.store
1617

@@ -55,7 +56,7 @@ export function lightColorHash (author?: NamedNode): string {
5556
/** notepad
5657
*
5758
* @param {HTMLDocument} dom - the web page of the browser
58-
* @param {NamedNode} padDoc - the document into which the particpation should be shown
59+
* @param {NamedNode} padDoc - the document into which the participation should be shown
5960
* @param {NamedNode} subject - the thing in which participation is happening
6061
* @param {NamedNode} me - person who is logged into the pod
6162
* @param {notepadOptions} options - the options that can be passed in consist of statusArea, exists
@@ -72,10 +73,7 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
7273

7374
const PAD = Namespace('http://www.w3.org/ns/pim/pad#')
7475

75-
table.setAttribute(
76-
'style',
77-
'padding: 1em; overflow: auto; resize: horizontal; min-width: 40em;'
78-
)
76+
table.setAttribute('style', style.notepadStyle)
7977

8078
let upstreamStatus: HTMLElement | null = null
8179
let downstreamStatus: HTMLElement | null = null
@@ -87,10 +85,10 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
8785
downstreamStatus = tr.appendChild(dom.createElement('td'))
8886

8987
if (upstreamStatus) {
90-
upstreamStatus.setAttribute('style', 'width:50%')
88+
upstreamStatus.setAttribute('style', style.upstreamStatus)
9189
}
9290
if (downstreamStatus) {
93-
downstreamStatus.setAttribute('style', 'width:50%')
91+
downstreamStatus.setAttribute('style', style.downstreamStatus)
9492
}
9593
}
9694
/* @@ TODO want to look into this, it seems upstream should be a boolean and default to false ?
@@ -112,15 +110,9 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
112110
const setPartStyle = function (part: NotepadPart, colors?: string, pending?: any) {
113111
const chunk = part.subject
114112
colors = colors || ''
115-
const baseStyle =
116-
'font-size: 100%; font-family: monospace; width: 100%; border: none; white-space: pre-wrap;'
117-
const headingCore =
118-
'font-family: sans-serif; font-weight: bold; border: none;'
119-
const headingStyle = [
120-
'font-size: 110%; padding-top: 0.5em; padding-bottom: 0.5em; width: 100%;',
121-
'font-size: 120%; padding-top: 1em; padding-bottom: 1em; width: 100%;',
122-
'font-size: 150%; padding-top: 1em; padding-bottom: 1em; width: 100%;'
123-
]
113+
const baseStyle = style.baseStyle
114+
const headingCore = style.headingCore
115+
const headingStyle = style.headingStyle
124116

125117
const author = kb.any(chunk as any, ns.dc('author'))
126118
if (!colors && author) {
@@ -139,12 +131,12 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
139131
let indent: any = kb.any(chunk as any, PAD('indent'))
140132

141133
indent = indent ? indent.value : 0
142-
const style =
134+
const localStyle =
143135
indent >= 0
144136
? baseStyle + 'text-indent: ' + indent * 3 + 'em;'
145137
: headingCore + headingStyle[-1 - indent]
146138
// ? baseStyle + 'padding-left: ' + (indent * 3) + 'em;'
147-
part.setAttribute('style', style + colors)
139+
part.setAttribute('style', localStyle + colors)
148140
}
149141

150142
const removePart = function (part: NotepadPart) {
@@ -236,28 +228,6 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
236228
})
237229
}
238230

239-
// Use this sort of code to split the line when return pressed in the middle @@
240-
/*
241-
function doGetCaretPosition doGetCaretPosition (oField) {
242-
var iCaretPos = 0
243-
// IE Support
244-
if (document.selection) {
245-
// Set focus on the element to avoid IE bug
246-
oField.focus()
247-
// To get cursor position, get empty selection range
248-
var oSel = document.selection.createRange()
249-
// Move selection start to 0 position
250-
oSel.moveStart('character', -oField.value.length)
251-
// The caret position is selection length
252-
iCaretPos = oSel.text.length
253-
// Firefox suppor
254-
} else if (oField.selectionStart || oField.selectionStart === '0') {
255-
iCaretPos = oField.selectionStart
256-
}
257-
// Return results
258-
return (iCaretPos)
259-
}
260-
*/
261231
const addListeners = function (part: any, chunk: any) {
262232
part.addEventListener('keydown', function (event) {
263233
if (!updater) {
@@ -300,7 +270,7 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
300270
part.state = 4 // delete me
301271
return
302272
case 3: // being deleted already
303-
case 4: // already deleme state
273+
case 4: // already deleted state
304274
return
305275
case undefined:
306276
case 0:
@@ -644,8 +614,6 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
644614
}
645615
return
646616
}
647-
// var last = kb.the(undefined, PAD('previous'), subject)
648-
// var chunk = first // = kb.the(subject, PAD('next'));
649617
let row
650618

651619
// First see which of the logical chunks have existing physical manifestations
@@ -717,7 +685,7 @@ export function notepad (dom: HTMLDocument, padDoc: NamedNode, subject: NamedNod
717685
log(' reloaded OK')
718686
clearStatus()
719687
if (!consistencyCheck()) {
720-
complain('CONSITENCY CHECK FAILED')
688+
complain('CONSISTENCY CHECK FAILED')
721689
} else {
722690
refreshTree(table)
723691
}

src/participation.ts

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Manage a UI for the particpation of a person in any thing
1+
/* Manage a UI for the participation of a person in any thing
22
*/
33

44
// import { currentUser } from './authn/authn'
@@ -9,6 +9,7 @@ import { personTR, newThing, errorMessageBlock } from './widgets'
99
import { syncTableToArray } from './utils'
1010
import { lightColorHash } from './pad'
1111
import { log } from './debug'
12+
import * as style from './style'
1213
import { solidLogicSingleton, authn } from 'solid-logic'
1314

1415
type ParticipationOptions = {
@@ -31,10 +32,10 @@ const store = solidLogicSingleton.store as LiveStore
3132
* @param {NamedNode} unused2/me - user that is logged into the pod (this argument is no longer used, but left in for backwards compatibility)
3233
* @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable these are used by the personTR button
3334
*/
34-
export function renderPartipants (dom: HTMLDocument, table: ParticipationTableElement, unused1: NamedNode, subject: NamedNode, unused2: NamedNode, options: ParticipationOptions) {
35-
table.setAttribute('style', 'margin: 0.8em;')
35+
export function renderParticipants (dom: HTMLDocument, table: ParticipationTableElement, unused1: NamedNode, subject: NamedNode, unused2: NamedNode, options: ParticipationOptions) {
36+
table.setAttribute('style', style.participantsStyle)
3637

37-
const newRowForParticpation = function (parp) {
38+
const newRowForParticipation = function (parp) {
3839
const person = store.any(parp, ns.wf('participant'))
3940

4041
let tr
@@ -47,14 +48,13 @@ export function renderPartipants (dom: HTMLDocument, table: ParticipationTableEl
4748

4849
const block = dom.createElement('div')
4950
block.setAttribute(
50-
'style',
51-
'height: 1.5em; width: 1.5em; margin: 0.3em; border 0.01em solid #888; background-color: ' +
52-
bg
53-
)
51+
'style', style.participantsBlock)
52+
block.style.backgroundColor = bg
53+
5454
tr = personTR(dom, null, person, options)
5555
table.appendChild(tr)
5656
const td = dom.createElement('td')
57-
td.setAttribute('style', 'vertical-align: middle;')
57+
td.setAttribute('style', style.personTableTD)
5858
td.appendChild(block)
5959
tr.insertBefore(td, tr.firstChild)
6060
return tr
@@ -69,16 +69,16 @@ export function renderPartipants (dom: HTMLDocument, table: ParticipationTableEl
6969
const participations = parps.map(function (p) {
7070
return p[1]
7171
})
72-
syncTableToArray(table, participations, newRowForParticpation)
72+
syncTableToArray(table, participations, newRowForParticipation)
7373
}
7474
table.refresh = syncTable
7575
syncTable()
7676
return table
7777
}
7878

79-
/** Record, or find old, Particpation object
79+
/** Record, or find old, Participation object
8080
*
81-
* A particpaption object is a place to record things specifically about
81+
* A participation object is a place to record things specifically about
8282
* subject and the user, such as preferences, start of membership, etc
8383
* @param {NamedNode} subject - the thing in which the participation is happening
8484
* @param {NamedNode} document - where to record the data
@@ -104,13 +104,13 @@ export function participationObject (subject: NamedNode, padDoc: NamedNode, me:
104104
}
105105
candidates.sort() // Pick the earliest
106106
// @@ Possibly, for extra credit, delete the others, if we have write access
107-
debug.warn('Multiple particpation objects, picking earliest, in ' + padDoc)
107+
debug.warn('Multiple participation objects, picking earliest, in ' + padDoc)
108108
resolve(candidates[0][1])
109109
// throw new Error('Multiple records of your participation')
110110
}
111111
if (parps.length) {
112112
// If I am not already recorded
113-
resolve(parps[0]) // returns the particpation object
113+
resolve(parps[0]) // returns the participation object
114114
} else {
115115
const participation = newThing(padDoc)
116116
const ins = [
@@ -127,7 +127,7 @@ export function participationObject (subject: NamedNode, padDoc: NamedNode, me:
127127
];
128128
(store.updater as UpdateManager).update([], ins, function (uri: string | null | undefined, ok: boolean, errorMessage?: string) {
129129
if (!ok) {
130-
reject(new Error('Error recording your partipation: ' + errorMessage))
130+
reject(new Error('Error recording your participation: ' + errorMessage))
131131
} else {
132132
resolve(participation)
133133
}
@@ -140,7 +140,7 @@ export function participationObject (subject: NamedNode, padDoc: NamedNode, me:
140140
/** Record my participation and display participants
141141
*
142142
* @param {NamedNode} subject - the thing in which participation is happening
143-
* @param {NamedNode} padDoc - the document into which the particpation should be recorded
143+
* @param {NamedNode} padDoc - the document into which the participation should be recorded
144144
* @param {DOMNode} refreshable - a DOM element whose refresh() is to be called if the change works
145145
*
146146
*/
@@ -156,10 +156,10 @@ export function recordParticipation (subject: NamedNode, padDoc: NamedNode, refr
156156
}
157157
if (parps.length) {
158158
// If I am not already recorded
159-
return parps[0] // returns the particpation object
159+
return parps[0] // returns the participation object
160160
} else {
161161
if (!(store.updater as UpdateManager).editable(padDoc)) {
162-
debug.log('Not recording participation, as no write acesss as ' + me + ' to ' + padDoc)
162+
debug.log('Not recording participation, as no write access as ' + me + ' to ' + padDoc)
163163
return null
164164
}
165165
const participation = newThing(padDoc)
@@ -177,12 +177,11 @@ export function recordParticipation (subject: NamedNode, padDoc: NamedNode, refr
177177
];
178178
(store.updater as UpdateManager).update([], ins, function (uri: string | null | undefined, ok: boolean, errorMessage?: string) {
179179
if (!ok) {
180-
throw new Error('Error recording your partipation: ' + errorMessage)
180+
throw new Error('Error recording your participation: ' + errorMessage)
181181
}
182182
if (refreshable && refreshable.refresh) {
183183
refreshable.refresh()
184184
}
185-
// UI.pad.renderPartipants(dom, table, padDoc, subject, me, options)
186185
})
187186
return participation
188187
}
@@ -192,7 +191,7 @@ export function recordParticipation (subject: NamedNode, padDoc: NamedNode, refr
192191
*
193192
* @param {Document} dom - the web page loaded into the browser
194193
* @param {HTMLDivElement} container - the container element where the participants should be displayed
195-
* @param {NamedNode} document - the document into which the particpation should be shown
194+
* @param {NamedNode} document - the document into which the participation should be shown
196195
* @param {NamedNode} subject - the thing in which participation is happening
197196
* @param {NamedNode} me - the logged in user
198197
* @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable these are used by the personTR button
@@ -208,15 +207,15 @@ export function manageParticipation (
208207
) {
209208
const table = dom.createElement('table')
210209
container.appendChild(table)
211-
renderPartipants(dom, table, padDoc, subject, me, options)
210+
renderParticipants(dom, table, padDoc, subject, me, options)
212211
let _participation
213212
try {
214213
_participation = recordParticipation(subject, padDoc, table)
215214
} catch (e) {
216215
container.appendChild(
217216
errorMessageBlock(
218217
dom,
219-
'Error recording your partipation: ' + e
218+
'Error recording your participation: ' + e
220219
)
221220
) // Clean up?
222221
}

src/stories/Notepad.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ Creates the table with the list of participants that have contributed to the giv
9393
const subject = kb.sym('https://test.test#')
9494
const options = {} // what to put in options
9595
//options are used in the button personTR there are the following properties can be defined deleteFunction, link, draggable
96-
const tableOfParticipants = UI.pad.renderPartipants(document, table, pad, subject, new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'), options)
96+
const tableOfParticipants = UI.pad.renderParticipants(document, table, pad, subject, new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'), options)
9797
div.appendChild(tableOfParticipants)
9898
})
9999
return div

0 commit comments

Comments
 (0)